diff --git a/web/eslint-rules/no-literal-ui-string.js b/web/eslint-rules/no-literal-ui-string.js
new file mode 100644
index 00000000..3ca92ce6
--- /dev/null
+++ b/web/eslint-rules/no-literal-ui-string.js
@@ -0,0 +1,64 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const baseline = JSON.parse(fs.readFileSync(new URL('../i18n-literal-baseline.json', import.meta.url), 'utf8'));
+const componentsRoot = fileURLToPath(new URL('../js/components/', import.meta.url));
+const visibleAttributes = new Set(['title', 'aria-label', 'placeholder', 'alt']);
+
+function candidate(value) {
+  const normalized = value.replace(/\s+/g, ' ').trim();
+  return /[A-Za-z]/.test(normalized) ? normalized : null;
+}
+
+// Only inspect string branches that become JSX children. Calls such as t('key'),
+// class names, API paths, and logging arguments are outside this rule's scope.
+function expressionStrings(node) {
+  if (!node) return [];
+  if (node.type === 'Literal' && typeof node.value === 'string') return [node.value];
+  if (node.type === 'TemplateLiteral') return node.quasis.map((part) => part.value.cooked || '');
+  if (node.type === 'ConditionalExpression') {
+    return [...expressionStrings(node.consequent), ...expressionStrings(node.alternate)];
+  }
+  if (node.type === 'LogicalExpression') return expressionStrings(node.right);
+  if (node.type === 'BinaryExpression' && node.operator === '+') {
+    return [...expressionStrings(node.left), ...expressionStrings(node.right)];
+  }
+  return [];
+}
+
+export default {
+  meta: {
+    type: 'problem',
+    docs: { description: 'Disallow new user-visible JSX literals' },
+    schema: [],
+  },
+  create(context) {
+    const file = path.relative(componentsRoot, context.filename).replaceAll(path.sep, '/');
+    const allowed = baseline[file] || {};
+    const seen = new Map();
+
+    function check(node, text) {
+      const value = candidate(text);
+      if (!value) return;
+      const count = (seen.get(value) || 0) + 1;
+      seen.set(value, count);
+      if (process.env.I18N_LITERAL_BASELINE === '1' || count > (allowed[value] || 0)) {
+        context.report({ node, message: `Untranslated UI string: ${JSON.stringify(value)}` });
+      }
+    }
+
+    return {
+      JSXText(node) { check(node, node.value); },
+      JSXAttribute(node) {
+        if (visibleAttributes.has(node.name.name) && node.value?.type === 'Literal') {
+          check(node, node.value.value);
+        }
+      },
+      JSXExpressionContainer(node) {
+        if (node.parent.type === 'JSXAttribute') return;
+        for (const value of expressionStrings(node.expression)) check(node, value);
+      },
+    };
+  },
+};
diff --git a/web/eslint.config.js b/web/eslint.config.js
index e9479db0..8696d77c 100644
--- a/web/eslint.config.js
+++ b/web/eslint.config.js
@@ -8,6 +8,7 @@
  */
 import jsxA11y from 'eslint-plugin-jsx-a11y';
 import reactHooks from 'eslint-plugin-react-hooks';
+import noLiteralUiString from './eslint-rules/no-literal-ui-string.js';
 
 const recommendedRules = jsxA11y.flatConfigs.recommended.rules;
 
@@ -45,4 +46,11 @@ export default [
       'react-hooks/rules-of-hooks': 'off',
     },
   },
+  {
+    files: ['js/components/**/*.js', 'js/components/**/*.jsx'],
+    // Existing technical labels and examples are counted by file in the
+    // baseline. New JSX text or visible-attribute literals fail lint.
+    plugins: { 'lightnvr-i18n': { rules: { 'no-literal-ui-string': noLiteralUiString } } },
+    rules: { 'lightnvr-i18n/no-literal-ui-string': 'error' },
+  },
 ];
diff --git a/web/i18n-literal-baseline.json b/web/i18n-literal-baseline.json
new file mode 100644
index 00000000..ad985a13
--- /dev/null
+++ b/web/i18n-literal-baseline.json
@@ -0,0 +1,124 @@
+{
+  "preact/BatchDownloadModal.jsx": {
+    "recordings.zip": 1
+  },
+  "preact/EventRoutingView.jsx": {
+    "· QoS": 1
+  },
+  "preact/FisheyeEptzCanvas.jsx": {
+    "ePTZ": 1
+  },
+  "preact/Footer.jsx": {
+    "LightNVR ©": 1
+  },
+  "preact/HLSVideoCell.jsx": {
+    "go2rtc": 1,
+    "HLS": 2
+  },
+  "preact/Header.jsx": {
+    "LightNVR": 1,
+    "v": 1
+  },
+  "preact/HealthView.jsx": {
+    "ms": 1
+  },
+  "preact/LoginView.jsx": {
+    "LightNVR": 1
+  },
+  "preact/MSEVideoCell.jsx": {
+    "PTZ": 1,
+    "MSE": 1
+  },
+  "preact/SetupWizard.jsx": {
+    "/var/lib/lightnvr/recordings": 1,
+    "/var/lib/lightnvr/lightnvr.db": 1
+  },
+  "preact/StreamCard.jsx": {
+    "ONVIF": 2
+  },
+  "preact/StreamConfigModal.jsx": {
+    "http://192.168.1.100/": 1,
+    "http://": 1,
+    "https://": 1,
+    "outdoor,critical": 1,
+    "admin": 1,
+    "Profile_1": 1,
+    "H.264 (AVC)": 1,
+    "H.265 (HEVC)": 1,
+    "TCP": 1,
+    "UDP": 1,
+    "[api_detection]": 1,
+    "rtmp://a.rtmp.youtube.com/live2/xxxx-xxxx-xxxx-xxxx-xxxx": 1
+  },
+  "preact/StreamsView.jsx": {
+    "admin": 1,
+    "password": 1,
+    "x": 1
+  },
+  "preact/WebRTCVideoCell.jsx": {
+    "WebRTC": 1
+  },
+  "preact/events/EventDestinationEditor.jsx": {
+    "mqtt.example.net": 1,
+    "lightnvr/v1/status/{installation_uuid}/{destination_uuid}": 1,
+    "/etc/lightnvr/certs/broker-ca.pem": 1,
+    "/etc/lightnvr/certs/client.pem": 1,
+    "/etc/lightnvr/certs/client.key": 1
+  },
+  "preact/events/EventRouteEditor.jsx": {
+    "person, vehicle": 1,
+    "entrance, loading-dock": 1,
+    "America/New_York": 1
+  },
+  "preact/fleet/FleetTable.jsx": {
+    "FPS": 1
+  },
+  "preact/fleet/OrganizationManager.jsx": {
+    "#2563eb": 1
+  },
+  "preact/settings/AuthTab.jsx": {
+    "X-Forwarded-For": 1,
+    "X-Real-IP": 1
+  },
+  "preact/settings/DetectionTab.jsx": {
+    "/var/lib/lightnvr/models": 1,
+    "default": 1
+  },
+  "preact/settings/GeneralTab.jsx": {
+    "lightnvr": 1,
+    "LOG_USER": 1,
+    "LOG_DAEMON": 1,
+    "LOG_LOCAL0": 1,
+    "LOG_LOCAL1": 1,
+    "LOG_LOCAL2": 1,
+    "LOG_LOCAL3": 1,
+    "LOG_LOCAL4": 1,
+    "LOG_LOCAL5": 1,
+    "LOG_LOCAL6": 1,
+    "LOG_LOCAL7": 1
+  },
+  "preact/settings/Go2rtcTab.jsx": {
+    "/usr/local/bin/go2rtc": 1,
+    "/etc/lightnvr/go2rtc": 1,
+    "stun.l.google.com:19302": 1,
+    "override.yaml": 1
+  },
+  "preact/settings/MqttTab.jsx": {
+    "localhost": 1,
+    "lightnvr": 2,
+    "homeassistant": 1
+  },
+  "preact/settings/StorageTab.jsx": {
+    ".bak": 1,
+    "/usr/local/bin/lightnvr-post-backup": 1
+  },
+  "preact/users/AddUserModal.jsx": {
+    "(CIDR)": 1
+  },
+  "preact/users/AuditHistoryModal.jsx": {
+    "recordings.export": 1
+  },
+  "preact/users/EditUserModal.jsx": {
+    "(CIDR)": 1
+  }
+}
diff --git a/web/js/components/preact/AsyncButton.jsx b/web/js/components/preact/AsyncButton.jsx
index b00acd75..79cede5a 100644
--- a/web/js/components/preact/AsyncButton.jsx
+++ b/web/js/components/preact/AsyncButton.jsx
@@ -37,6 +37,7 @@
 import { Fragment } from 'preact';
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import { useAsyncAction } from '../../hooks/useAsyncAction.js';
+import { useI18n } from '../../i18n.js';
 
 /**
  * Inline 16x16 spinner icon, rotated via Tailwind's `animate-spin`.
@@ -131,6 +132,7 @@ export function AsyncButton({
   type = 'button',
   ...rest
 }) {
+  const { t } = useI18n();
   const { run, pending, error } = useAsyncAction(onClick || (() => Promise.resolve()));
 
   // Track the brief success flash.
@@ -241,7 +243,7 @@ export function AsyncButton({
     content = (
       <span class="inline-flex items-center justify-center gap-2">
         <SpinnerIcon />
-        <span class="sr-only">Working…</span>
+        <span class="sr-only">{t('recordings.working')}</span>
       </span>
     );
   } else if (showSuccess) {
diff --git a/web/js/components/preact/BatchDeleteModal.jsx b/web/js/components/preact/BatchDeleteModal.jsx
index 6ef05ab8..7afc60c0 100644
--- a/web/js/components/preact/BatchDeleteModal.jsx
+++ b/web/js/components/preact/BatchDeleteModal.jsx
@@ -7,6 +7,7 @@ import { useState, useEffect, useRef, useCallback } from 'preact/hooks';
 import { showStatusMessage } from './ToastContainer.jsx';
 import { batchDeleteStatus } from '../../utils/batch-delete-status.js';
 import { useQueryClient } from '../../query-client.js';
+import { t as translate, useI18n } from '../../i18n.js';
 
 /**
  * BatchDeleteModal component
@@ -18,6 +19,7 @@ import { useQueryClient } from '../../query-client.js';
  * @returns {JSX.Element} BatchDeleteModal component
  */
 export function BatchDeleteModal() {
+  const { t } = useI18n();
   const queryClient = useQueryClient();
 
   // Modal phase: 'hidden' | 'confirm' | 'progress'
@@ -47,9 +49,9 @@ export function BatchDeleteModal() {
   const getConfirmDescription = () => {
     const params = pendingParamsRef.current;
     if (!params) return '';
-    if (params.ids) return `${params.ids.length} selected recording${params.ids.length !== 1 ? 's' : ''}`;
-    if (params.totalCount) return `${params.totalCount} filtered recording${params.totalCount !== 1 ? 's' : ''}`;
-    return 'all matching recordings';
+    if (params.ids) return t(params.ids.length === 1 ? 'recordings.selectedRecordingOne' : 'recordings.selectedRecordingMany', { count: params.ids.length });
+    if (params.totalCount) return t(params.totalCount === 1 ? 'recordings.filteredRecordingOne' : 'recordings.filteredRecordingMany', { count: params.totalCount });
+    return t('recordings.allMatchingRecordings');
   };
 
   /**
@@ -71,7 +73,7 @@ export function BatchDeleteModal() {
    */
   const cancelConfirm = useCallback(() => {
     closeModal();
-    showStatusMessage('Batch delete cancelled', 'info', 3000);
+    showStatusMessage(t('recordings.batchDeleteCancelled'), 'info', 3000);
   }, [closeModal]);
 
   /**
@@ -231,7 +233,7 @@ export function BatchDeleteModal() {
               });
 
               // Show error message
-              showStatusMessage(`Error: ${error.message || 'Unknown error'}`, 'error', 5000);
+              showStatusMessage(t('recordings.errorMessage', { message: error.message || t('recordings.unknownError') }), 'error', 5000);
 
               reject(error);
             });
@@ -258,7 +260,7 @@ export function BatchDeleteModal() {
         });
 
         // Show error message
-        showStatusMessage(`Error: ${error.message || 'Unknown error'}`, 'error', 5000);
+        showStatusMessage(t('recordings.errorMessage', { message: error.message || t('recordings.unknownError') }), 'error', 5000);
 
         reject(error);
       });
@@ -331,7 +333,7 @@ export function BatchDeleteModal() {
     } else if (progress.complete) {
       return '100%';
     } else {
-      return 'In progress';
+      return t('recordings.inProgress');
     }
   };
 
@@ -351,7 +353,7 @@ export function BatchDeleteModal() {
         {phase === 'confirm' && (
           <>
             <div className="flex justify-between items-center mb-4 pb-2 border-b border-border">
-              <h3 className="text-xl font-bold">Confirm Batch Delete</h3>
+              <h3 className="text-xl font-bold">{t('recordings.confirmBatchDelete')}</h3>
               <button
                 className="text-muted-foreground hover:text-foreground text-2xl font-bold"
                 onClick={cancelConfirm}
@@ -365,10 +367,10 @@ export function BatchDeleteModal() {
                     d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
                 </svg>
                 <div>
-                  <p className="font-semibold text-red-500 mb-1">This action cannot be undone</p>
+                  <p className="font-semibold text-red-500 mb-1">{t('recordings.actionCannotBeUndone')}</p>
                   <p className="text-sm text-muted-foreground">
-                    You are about to permanently delete <strong>{getConfirmDescription()}</strong>.
-                    Once started, this operation cannot be cancelled or reversed.
+                    {t('recordings.aboutToPermanentlyDelete', { description: getConfirmDescription() })}
+                    {' '}{t('recordings.batchDeleteIrreversible')}
                   </p>
                 </div>
               </div>
@@ -379,13 +381,13 @@ export function BatchDeleteModal() {
                 className="px-4 py-2 bg-secondary text-secondary-foreground rounded hover:bg-secondary/80 transition-colors"
                 onClick={cancelConfirm}
               >
-                Cancel
+                {t('common.cancel')}
               </button>
               <button
                 className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 transition-colors font-medium"
                 onClick={proceedWithDelete}
               >
-                Delete {getConfirmDescription()}
+                {t('recordings.deleteDescription', { description: getConfirmDescription() })}
               </button>
             </div>
           </>
@@ -396,7 +398,7 @@ export function BatchDeleteModal() {
           <>
             <div className="flex justify-between items-center mb-4 pb-2 border-b border-border">
               <h3 className="text-xl font-bold">
-                {progress.complete ? 'Batch Delete Complete' : 'Deleting Recordings…'}
+                {t(progress.complete ? 'recordings.batchDeleteComplete' : 'recordings.deletingRecordings')}
               </h3>
             </div>
 
@@ -415,27 +417,27 @@ export function BatchDeleteModal() {
 
               <div className="mb-4">
                 <div className="flex justify-between mb-2">
-                  <span className="text-muted-foreground">Succeeded:</span>
+                  <span className="text-muted-foreground">{t('recordings.succeededLabel')}</span>
                   <span className="font-bold text-green-600 dark:text-green-400">{progress.succeeded}</span>
                 </div>
                 <div className="flex justify-between">
-                  <span className="text-muted-foreground">Failed:</span>
+                  <span className="text-muted-foreground">{t('recordings.failedLabel')}</span>
                   <span className="font-bold text-red-600 dark:text-red-400">{progress.failed}</span>
                 </div>
               </div>
 
               {!progress.complete && (
                 <div className="text-xs text-muted-foreground italic mb-4">
-                  This operation cannot be cancelled once started.
+                  {t('recordings.batchDeleteCannotCancel')}
                 </div>
               )}
             </div>
 
             <div className="flex justify-end pt-2 border-t border-border">
               {progress.complete ? (
-                <button className="btn-primary" onClick={closeModal}>Done</button>
+                <button className="btn-primary" onClick={closeModal}>{t('common.done')}</button>
               ) : (
-                <span className="text-sm text-muted-foreground italic">Please wait…</span>
+                <span className="text-sm text-muted-foreground italic">{t('recordings.pleaseWait')}</span>
               )}
             </div>
           </>
@@ -453,7 +455,7 @@ export function BatchDeleteModal() {
  */
 export function batchDeleteRecordings(ids) {
   if (!ids || ids.length === 0) {
-    showStatusMessage('No recordings selected for deletion', 'warning', 5000);
+    showStatusMessage(translate('recordings.noSelectionForDeletion'), 'warning', 5000);
     return;
   }
 
@@ -461,13 +463,13 @@ export function batchDeleteRecordings(ids) {
     window.batchDeleteRecordingsByHttpRequest({ ids })
       .catch(error => {
         console.error('Error in batch delete:', error);
-        showStatusMessage(`Error: ${error.message || 'Failed to start batch delete operation'}`, 'error', 5000);
+        showStatusMessage(translate('recordings.errorMessage', { message: error.message || translate('recordings.batchDeleteStartFailed') }), 'error', 5000);
         if (typeof window.closeBatchDeleteModal === 'function') {
           window.closeBatchDeleteModal();
         }
       });
   } else {
-    showStatusMessage('Batch delete function not available', 'error', 5000);
+    showStatusMessage(translate('recordings.batchDeleteUnavailable'), 'error', 5000);
   }
 }
 
@@ -478,7 +480,7 @@ export function batchDeleteRecordings(ids) {
  */
 export function batchDeleteRecordingsByFilter(filter) {
   if (!filter) {
-    showStatusMessage('No filter specified for deletion', 'warning', 5000);
+    showStatusMessage(translate('recordings.noFilterForDeletion'), 'warning', 5000);
     return;
   }
 
@@ -486,13 +488,13 @@ export function batchDeleteRecordingsByFilter(filter) {
     window.batchDeleteRecordingsByHttpRequest({ filter })
       .catch(error => {
         console.error('Error in batch delete:', error);
-        showStatusMessage(`Error: ${error.message || 'Failed to start batch delete operation'}`, 'error', 5000);
+        showStatusMessage(translate('recordings.errorMessage', { message: error.message || translate('recordings.batchDeleteStartFailed') }), 'error', 5000);
         if (typeof window.closeBatchDeleteModal === 'function') {
           window.closeBatchDeleteModal();
         }
       });
   } else {
-    showStatusMessage('Batch delete function not available', 'error', 5000);
+    showStatusMessage(translate('recordings.batchDeleteUnavailable'), 'error', 5000);
   }
 }
 
diff --git a/web/js/components/preact/BatchDownloadModal.jsx b/web/js/components/preact/BatchDownloadModal.jsx
index 172e2199..74a83645 100644
--- a/web/js/components/preact/BatchDownloadModal.jsx
+++ b/web/js/components/preact/BatchDownloadModal.jsx
@@ -3,13 +3,14 @@
  */
 import { useState, useEffect, useCallback } from 'preact/hooks';
 import { showStatusMessage } from './ToastContainer.jsx';
+import { t as translate, useI18n } from '../../i18n.js';
 
 /**
  * Sequential download: trigger one download per recording with a small delay.
  * @param {Array} recordings  Full recording objects (must have .id, .stream, .start_time)
  */
 async function downloadSequential(recordings) {
-  showStatusMessage(`Starting ${recordings.length} download${recordings.length !== 1 ? 's' : ''}…`);
+  showStatusMessage(translate(recordings.length === 1 ? 'recordings.startingDownloadOne' : 'recordings.startingDownloadMany', { count: recordings.length }));
   for (let i = 0; i < recordings.length; i++) {
     const r = recordings[i];
     const url = `/api/recordings/download/${r.id}`;
@@ -40,18 +41,18 @@ async function downloadZip(ids, filename, onProgress, onComplete, onError) {
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ ids, filename }),
     });
-    if (!resp.ok) throw new Error(`Server error ${resp.status}`);
+    if (!resp.ok) throw new Error(translate('recordings.serverError', { status: resp.status }));
     const { token, total } = await resp.json();
 
     // Poll status
     while (true) {
       await new Promise(r => setTimeout(r, 800));
       const st = await fetch(`/api/recordings/batch-download/status/${token}`);
-      if (!st.ok) throw new Error('Status poll failed');
+      if (!st.ok) throw new Error(translate('recordings.statusPollFailed'));
       const { status, current } = await st.json();
       onProgress(current, total);
       if (status === 'complete') break;
-      if (status === 'error')   throw new Error('ZIP creation failed on server');
+      if (status === 'error')   throw new Error(translate('recordings.zipCreationFailed'));
     }
 
     // Trigger download
@@ -63,7 +64,7 @@ async function downloadZip(ids, filename, onProgress, onComplete, onError) {
     document.body.removeChild(a);
     onComplete();
   } catch (err) {
-    onError(err.message || 'Unknown error');
+    onError(err.message || translate('recordings.unknownError'));
   }
 }
 
@@ -77,6 +78,7 @@ async function downloadZip(ids, filename, onProgress, onComplete, onError) {
  *   selectedIds  {Object}  – map of id → true for selected recordings
  */
 export function BatchDownloadModal({ isOpen, onClose, recordings = [], selectedIds = {} }) {
+  const { t } = useI18n();
   const [mode, setMode] = useState('zip');          // 'zip' | 'sequential'
   const [zipName, setZipName] = useState('recordings.zip');
   const [busy, setBusy] = useState(false);
@@ -116,7 +118,7 @@ export function BatchDownloadModal({ isOpen, onClose, recordings = [], selectedI
         ids,
         name.endsWith('.zip') ? name : name + '.zip',
         (cur, tot) => setProgress({ current: cur, total: tot }),
-        () => { setBusy(false); onClose(); showStatusMessage('ZIP download started'); },
+        () => { setBusy(false); onClose(); showStatusMessage(t('recordings.zipDownloadStarted')); },
         (msg) => { setBusy(false); setError(msg); }
       );
     }
@@ -129,9 +131,9 @@ export function BatchDownloadModal({ isOpen, onClose, recordings = [], selectedI
   return (
     <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
       <div class="bg-card text-card-foreground rounded-lg shadow-xl w-full max-w-md p-6">
-        <h2 class="text-lg font-semibold mb-4">Download Selected Recordings</h2>
+        <h2 class="text-lg font-semibold mb-4">{t('recordings.downloadSelectedRecordings')}</h2>
         <p class="text-sm text-muted-foreground mb-4">
-          {selected.length} recording{selected.length !== 1 ? 's' : ''} selected
+          {t(selected.length === 1 ? 'recordings.recordingSelectedOne' : 'recordings.recordingSelectedMany', { count: selected.length })}
         </p>
 
         {/* Mode selector */}
@@ -140,16 +142,16 @@ export function BatchDownloadModal({ isOpen, onClose, recordings = [], selectedI
             <input type="radio" name="dl-mode" value="zip" checked={mode === 'zip'}
               onChange={() => setMode('zip')} class="mt-0.5" />
             <div>
-              <div class="font-medium text-sm">ZIP archive (recommended)</div>
-              <div class="text-xs text-muted-foreground">All files packaged into a single .zip</div>
+              <div class="font-medium text-sm">{t('recordings.zipArchiveRecommended')}</div>
+              <div class="text-xs text-muted-foreground">{t('recordings.zipArchiveHelp')}</div>
             </div>
           </label>
           <label class="flex items-start gap-3 cursor-pointer">
             <input type="radio" name="dl-mode" value="sequential" checked={mode === 'sequential'}
               onChange={() => setMode('sequential')} class="mt-0.5" />
             <div>
-              <div class="font-medium text-sm">Sequential downloads</div>
-              <div class="text-xs text-muted-foreground">Each file downloaded separately (browser may block multiple tabs)</div>
+              <div class="font-medium text-sm">{t('recordings.sequentialDownloads')}</div>
+              <div class="text-xs text-muted-foreground">{t('recordings.sequentialDownloadsHelp')}</div>
             </div>
           </label>
         </div>
@@ -157,7 +159,7 @@ export function BatchDownloadModal({ isOpen, onClose, recordings = [], selectedI
         {/* ZIP filename input */}
         {mode === 'zip' && (
           <div class="mb-5">
-            <label class="block text-sm font-medium mb-1">ZIP filename</label>
+            <label class="block text-sm font-medium mb-1">{t('recordings.zipFilename')}</label>
             <input
               type="text"
               value={zipName}
@@ -174,7 +176,7 @@ export function BatchDownloadModal({ isOpen, onClose, recordings = [], selectedI
         {busy && (
           <div class="mb-4">
             <div class="flex justify-between text-xs text-muted-foreground mb-1">
-              <span>{mode === 'zip' ? 'Building ZIP…' : 'Downloading…'}</span>
+              <span>{t(mode === 'zip' ? 'recordings.buildingZip' : 'recordings.downloading')}</span>
               <span>{progress.current} / {progress.total}</span>
             </div>
             <div class="h-2 bg-muted rounded-full overflow-hidden">
@@ -196,14 +198,14 @@ export function BatchDownloadModal({ isOpen, onClose, recordings = [], selectedI
             onClick={onClose}
             disabled={busy}
           >
-            Cancel
+            {t('common.cancel')}
           </button>
           <button
             class="btn-primary px-4 py-2 text-sm disabled:opacity-50 disabled:cursor-not-allowed"
             onClick={handleDownload}
             disabled={busy || selected.length === 0}
           >
-            {busy ? 'Working…' : 'Download'}
+            {t(busy ? 'recordings.working' : 'common.download')}
           </button>
         </div>
       </div>
diff --git a/web/js/components/preact/DetectionOverlay.jsx b/web/js/components/preact/DetectionOverlay.jsx
index 53940807..084aa8c5 100644
--- a/web/js/components/preact/DetectionOverlay.jsx
+++ b/web/js/components/preact/DetectionOverlay.jsx
@@ -4,6 +4,7 @@
  */
 import { useState, useEffect, useRef, useCallback } from 'preact/hooks';
 import { showStatusMessage } from './ToastContainer.jsx';
+import { t } from '../../i18n.js';
 import { formatFilenameTimestamp } from '../../utils/date-utils.js';
 import { displayedVideoBox } from './useLiveDisplayMode.js';
 import { startDetectionPolling } from '../../utils/detection-polling.js';
@@ -266,7 +267,7 @@ export function drawDetectionsOnCanvas(ctx, width, height, detections) {
  */
 export function takeSnapshotWithDetections(videoRef, canvasRef, streamName) {
   if (!videoRef.current || !canvasRef.current) {
-    showStatusMessage('Cannot take snapshot: Video not available', 'error');
+    showStatusMessage(t('live.snapshotVideoUnavailable'), 'error');
     return null;
   }
 
@@ -279,7 +280,7 @@ export function takeSnapshotWithDetections(videoRef, canvasRef, streamName) {
 
   // Check if we have valid dimensions
   if (combinedCanvas.width === 0 || combinedCanvas.height === 0) {
-    showStatusMessage('Cannot take snapshot: Video not loaded or has invalid dimensions', 'error');
+    showStatusMessage(t('live.snapshotInvalidDimensions'), 'error');
     return null;
   }
 
diff --git a/web/js/components/preact/FisheyeEptzCanvas.jsx b/web/js/components/preact/FisheyeEptzCanvas.jsx
index 1a0958bb..f374eb68 100644
--- a/web/js/components/preact/FisheyeEptzCanvas.jsx
+++ b/web/js/components/preact/FisheyeEptzCanvas.jsx
@@ -496,7 +496,7 @@ export function FisheyeEptzCanvas({ videoRef, eptzConfig, streamName }) {
           style={{ zIndex: 8 }}
           title={rendererError}
         >
-          ePTZ unavailable
+          {t('live.eptzUnavailable')}
         </span>
       )}
     </>
diff --git a/web/js/components/preact/ManualRecordingButton.jsx b/web/js/components/preact/ManualRecordingButton.jsx
index 2475ede9..4978131b 100644
--- a/web/js/components/preact/ManualRecordingButton.jsx
+++ b/web/js/components/preact/ManualRecordingButton.jsx
@@ -1,7 +1,9 @@
 import { useCallback, useEffect, useState } from 'preact/hooks';
 import { showStatusMessage } from './ToastContainer.jsx';
+import { useI18n } from '../../i18n.js';
 
 export function ManualRecordingButton({ streamName }) {
+  const { t } = useI18n();
   const [status, setStatus] = useState(null);
   const [busy, setBusy] = useState(false);
 
@@ -49,12 +51,12 @@ export function ManualRecordingButton({ streamName }) {
         throw new Error(data.error || data.message || `HTTP ${response.status}`);
       }
       showStatusMessage(
-        action === 'start' ? 'Manual recording started' : 'Manual recording stopped',
+        t(action === 'start' ? 'live.manualRecordingStarted' : 'live.manualRecordingStopped'),
         'success'
       );
       await refresh();
     } catch (error) {
-      showStatusMessage(`Manual recording failed: ${error.message}`, 'error', 5000);
+      showStatusMessage(t('live.manualRecordingFailed', { message: error.message }), 'error', 5000);
     } finally {
       setBusy(false);
     }
diff --git a/web/js/components/preact/RecordingsView.jsx b/web/js/components/preact/RecordingsView.jsx
index 27b05eb5..ee2717c5 100644
--- a/web/js/components/preact/RecordingsView.jsx
+++ b/web/js/components/preact/RecordingsView.jsx
@@ -734,7 +734,7 @@ export function RecordingsView() {
       .filter(([_, sel]) => sel)
       .map(([id]) => id);
     if (selectedIds.length === 0) {
-      showStatusMessage('No recordings selected', 'warning');
+      showStatusMessage(t('recordings.noRecordingsSelected'), 'warning');
       return;
     }
     // Store current URL for "Refine Selections" back-link
diff --git a/web/js/components/preact/SettingsView.jsx b/web/js/components/preact/SettingsView.jsx
index 9be1f261..1e1ec81b 100644
--- a/web/js/components/preact/SettingsView.jsx
+++ b/web/js/components/preact/SettingsView.jsx
@@ -925,7 +925,7 @@ export function SettingsView() {
           >
             <div class="flex items-center justify-end gap-3">
               {isDirty ? (
-                <span class="text-xs text-muted-foreground">{t('settings.unsavedChanges') !== 'settings.unsavedChanges' ? t('settings.unsavedChanges') : 'Unsaved changes'}</span>
+                <span class="text-xs text-muted-foreground">{t('settings.unsavedChanges')}</span>
               ) : null}
               <AsyncButton
                 id="save-settings-btn"
diff --git a/web/js/components/preact/StreamConfigModal.jsx b/web/js/components/preact/StreamConfigModal.jsx
index 77f8a2e0..fae897f8 100644
--- a/web/js/components/preact/StreamConfigModal.jsx
+++ b/web/js/components/preact/StreamConfigModal.jsx
@@ -347,14 +347,10 @@ export function StreamConfigModal({
           const statusCode = response.status;
           const statusText = response.statusText || '';
           showStatusMessage(
-            t(
-              'streamConfig.zonesLoadFailed',
-              'Failed to load detection zones (HTTP {statusCode}{statusText}). Please try again or contact an administrator.',
-              {
-                statusCode,
-                statusText: statusText ? `: ${statusText}` : '',
-              }
-            ),
+            t('streamsConfig.zonesLoadFailed', {
+              statusCode,
+              statusText: statusText ? `: ${statusText}` : '',
+            }),
             'error'
           );
         }
@@ -362,11 +358,7 @@ export function StreamConfigModal({
         console.error('Error loading zones:', error);
         const errorMessage = (error && error.message) ? error.message : String(error || '');
         showStatusMessage(
-          t(
-            'streamConfig.zonesLoadError',
-            'An error occurred while loading detection zones. Details: {errorMessage}',
-            { errorMessage }
-          ),
+          t('streamsConfig.zonesLoadError', { errorMessage }),
           'error'
         );
       }
@@ -832,13 +824,13 @@ export function StreamConfigModal({
                             📅 {t('streamsConfig.onASchedule')}
                           </span>
                           <span className="text-xs text-muted-foreground">
-                            — restrict detection-triggered clips independently
+                            {t('streamsConfig.detectionScheduleHelpShort')}
                           </span>
                         </label>
                         {currentStream.detectionRecordOnSchedule && (
                           <div className="rounded-xl border border-primary/25 bg-background p-3 shadow-sm">
                             <p className="text-xs text-muted-foreground mb-3">
-                              External events are still annotated outside these hours, but they will not start a detection clip.
+                              {t('streamsConfig.detectionScheduleHelp')}
                             </p>
                             <RecordingScheduleGrid
                               schedule={currentStream.detectionRecordingSchedule?.length === HOURS_PER_WEEK
@@ -1226,7 +1218,7 @@ export function StreamConfigModal({
                         onChange={onInputChange}
                       />
                       <p className="mt-1 text-xs text-muted-foreground">{t('streamsConfig.retentionDaysHelp')}</p>
-                      <p className="mt-1 text-xs text-muted-foreground">-1 = inherit the global setting</p>
+                      <p className="mt-1 text-xs text-muted-foreground">{t('streamsConfig.inheritGlobalSetting')}</p>
                     </div>
                     <div>
                       <label htmlFor="detection-retention-days" className="block text-sm font-medium mb-2">
@@ -1243,7 +1235,7 @@ export function StreamConfigModal({
                         onChange={onInputChange}
                       />
                       <p className="mt-1 text-xs text-muted-foreground">{t('streamsConfig.detectionRetentionDaysHelp')}</p>
-                      <p className="mt-1 text-xs text-muted-foreground">-1 = inherit the global setting</p>
+                      <p className="mt-1 text-xs text-muted-foreground">{t('streamsConfig.inheritGlobalSetting')}</p>
                     </div>
                     <div>
                       <label htmlFor="max-storage-mb" className="block text-sm font-medium mb-2">
@@ -1375,7 +1367,7 @@ export function StreamConfigModal({
                             />
                             <span className="font-medium">{zone.name}</span>
                             <span className="text-sm text-muted-foreground">
-                              ({zone.polygon.length} points)
+                              {t('streamsConfig.zonePoints', { count: zone.polygon.length })}
                             </span>
                           </div>
                           <span className={`text-sm px-2 py-1 rounded ${zone.enabled ? 'bg-[hsl(var(--success-muted))] text-[hsl(var(--success-muted-foreground))]' : 'bg-muted text-muted-foreground'}`}>
diff --git a/web/js/components/preact/StreamsView.jsx b/web/js/components/preact/StreamsView.jsx
index c2ca7359..a560e4aa 100644
--- a/web/js/components/preact/StreamsView.jsx
+++ b/web/js/components/preact/StreamsView.jsx
@@ -1613,7 +1613,7 @@ export function StreamsView() {
               <option value="disabled">{t('availability.disabled')}</option>
               <option value="all">{t('availability.all')}</option>
             </select>
-            <span className="font-medium">{t('streams.sortBy') || 'Sort by'}:</span>
+            <span className="font-medium">{t('streams.sortBy')}:</span>
             {[
               { key: 'name',       label: t('common.name') },
               { key: 'status',     label: t('common.status') },
diff --git a/web/js/components/preact/UI.jsx b/web/js/components/preact/UI.jsx
index d263fa60..8818d770 100644
--- a/web/js/components/preact/UI.jsx
+++ b/web/js/components/preact/UI.jsx
@@ -7,7 +7,7 @@ import { createContext } from 'preact';
 import { useState, useEffect, useRef, useCallback } from 'preact/hooks';
 import { createPortal } from 'preact/compat';
 import { showStatusMessage } from './ToastContainer.jsx';
-import { useI18n } from '../../i18n.js';
+import { t as translate, useI18n } from '../../i18n.js';
 import { formatUtils } from './recordings/formatUtils.js';
 import { formatFilenameTimestamp, nowMilliseconds } from '../../utils/date-utils.js';
 import dayjs from 'dayjs';
@@ -54,23 +54,24 @@ export const ModalContext = createContext({
  * @returns {JSX.Element} DeleteConfirmationModal component
  */
 export function DeleteConfirmationModal(props) {
+  const { t } = useI18n();
   const { isOpen, onClose, onConfirm, mode, count, recordingName } = props;
 
   if (!isOpen) return null;
 
   // Determine title and message based on mode
-  let title = 'Confirm Delete';
-  let message = 'Are you sure you want to delete this item?';
+  let title = t('recordings.confirmDelete');
+  let message = t('recordings.confirmDeleteItem');
 
   if (mode === 'single') {
-    title = 'Delete Recording';
-    message = `Are you sure you want to delete this recording from ${recordingName || 'this stream'}? This action cannot be undone.`;
+    title = t('timeline.deleteRecording');
+    message = t('recordings.confirmDeleteFromStream', { stream: recordingName || t('recordings.thisStream') });
   } else if (mode === 'selected') {
-    title = 'Delete Selected Recordings';
-    message = `Are you sure you want to delete ${count} selected recording${count !== 1 ? 's' : ''}?`;
+    title = t('recordings.deleteSelectedRecordings');
+    message = t(count === 1 ? 'recordings.confirmDeleteSelectedOne' : 'recordings.confirmDeleteSelectedMany', { count });
   } else if (mode === 'all') {
-    title = 'Delete All Filtered Recordings';
-    message = 'Are you sure you want to delete all recordings matching the current filters? This action cannot be undone.';
+    title = t('recordings.deleteAllFilteredRecordings');
+    message = t('recordings.confirmDeleteAllFiltered');
   }
 
   // Handle escape key
@@ -105,13 +106,13 @@ export function DeleteConfirmationModal(props) {
             class="px-4 py-2 bg-gray-200 text-gray-800 rounded hover:bg-gray-300 transition-colors dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600"
             onClick={onClose}
           >
-            Cancel
+            {t('common.cancel')}
           </button>
           <button
             class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 transition-colors"
             onClick={onConfirm}
           >
-            Delete
+            {t('common.delete')}
           </button>
         </div>
       </div>
@@ -129,6 +130,7 @@ export function DeleteConfirmationModal(props) {
  * @returns {JSX.Element} SnapshotPreviewModal component
  */
 export function SnapshotPreviewModal({ isOpen, onClose, imageData, streamName, onDownload }) {
+  const { t } = useI18n();
   const modalRef = useRef(null);
 
   useEffect(() => {
@@ -176,11 +178,12 @@ export function SnapshotPreviewModal({ isOpen, onClose, imageData, streamName, o
       <div className="modal-content bg-card text-card-foreground rounded-lg shadow-xl max-w-4xl max-h-[90vh] flex flex-col transform transition-all duration-300 ease-out scale-95 opacity-0" style={{ width: '90%' }}>
         <div className="flex justify-between items-center p-4 border-b border-border">
           <h3 id="snapshot-preview-title" className="text-lg font-semibold text-gray-900 dark:text-white">
-            {streamName ? `Snapshot: ${streamName}` : 'Snapshot'}
+            {streamName ? t('recordings.snapshotOfStream', { stream: streamName }) : t('timeline.snapshot')}
           </h3>
           <button
             className="close text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
             onClick={onClose}
+            aria-label={t('common.close')}
           >
             ✕
           </button>
@@ -190,7 +193,7 @@ export function SnapshotPreviewModal({ isOpen, onClose, imageData, streamName, o
             id="snapshot-preview-image"
             className="max-w-full max-h-[70vh] mx-auto"
             src={imageData}
-            alt="Snapshot"
+            alt={t('timeline.snapshot')}
           />
         </div>
         <div className="p-4 border-t border-border flex justify-end space-x-2">
@@ -199,14 +202,14 @@ export function SnapshotPreviewModal({ isOpen, onClose, imageData, streamName, o
             className="btn-primary"
             onClick={onDownload}
           >
-            Download
+            {t('common.download')}
           </button>
           <button
             id="snapshot-close-btn"
             className="px-4 py-2 bg-gray-200 text-gray-800 rounded hover:bg-gray-300 transition-colors dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600"
             onClick={onClose}
           >
-            Close
+            {t('common.close')}
           </button>
         </div>
       </div>
@@ -231,7 +234,7 @@ export function VideoModal({ isOpen, onClose, videoUrl, title, downloadUrl }) {
   const [timeWindow, setTimeWindow] = useState(2);
   const [detections, setDetections] = useState([]);
   const [recordingData, setRecordingData] = useState(null);
-  const [detectionStatus, setDetectionStatus] = useState('No detections loaded');
+  const [detectionStatus, setDetectionStatus] = useState(() => t('recordings.noDetectionsLoaded'));
   const [currentSpeed, setCurrentSpeed] = useState(1.0);
   const [currentPlaybackSeconds, setCurrentPlaybackSeconds] = useState(0);
   const [isFullscreen, setIsFullscreen] = useState(false);
@@ -310,7 +313,7 @@ export function VideoModal({ isOpen, onClose, videoUrl, title, downloadUrl }) {
 
           if (startTime === 0 || endTime === 0) {
             console.error('Failed to parse recording timestamps:', data.start_time, data.end_time);
-            setDetectionStatus('Error: Invalid recording timestamps');
+            setDetectionStatus(t('recordings.invalidRecordingTimestamps'));
             return;
           }
 
@@ -327,14 +330,14 @@ export function VideoModal({ isOpen, onClose, videoUrl, title, downloadUrl }) {
           setDetections(fetchedDetections);
 
           if (fetchedDetections.length > 0) {
-            setDetectionStatus(`${fetchedDetections.length} detection${fetchedDetections.length !== 1 ? 's' : ''} available`);
+            setDetectionStatus(t(fetchedDetections.length === 1 ? 'recordings.detectionAvailableOne' : 'recordings.detectionAvailableMany', { count: fetchedDetections.length }));
           } else {
-            setDetectionStatus('No detections found for this recording');
+            setDetectionStatus(t('recordings.noDetectionsForRecording'));
           }
         }
       } catch (error) {
         console.error('Error fetching data:', error);
-        setDetectionStatus('Error loading detections');
+        setDetectionStatus(t('recordings.errorLoadingDetections'));
       }
     };
 
@@ -366,10 +369,10 @@ export function VideoModal({ isOpen, onClose, videoUrl, title, downloadUrl }) {
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ protected: newState }),
       });
-      if (!response.ok) throw new Error(`Failed to ${newState ? 'protect' : 'unprotect'} recording`);
+      if (!response.ok) throw new Error(t(newState ? 'recordings.protectFailed' : 'recordings.unprotectFailed'));
       setIsProtected(newState);
       showStatusMessage(
-        newState ? 'Recording protected from automatic deletion' : 'Recording protection removed',
+        t(newState ? 'recordings.recordingProtected' : 'recordings.recordingProtectionRemoved'),
         'success'
       );
 
@@ -379,7 +382,7 @@ export function VideoModal({ isOpen, onClose, videoUrl, title, downloadUrl }) {
       }));
     } catch (error) {
       console.error('Error toggling protection:', error);
-      showStatusMessage(`Error: ${error.message}`, 'error');
+      showStatusMessage(t('recordings.errorMessage', { message: error.message }), 'error');
     }
   }, [recordingId, isProtected]);
 
@@ -388,8 +391,8 @@ export function VideoModal({ isOpen, onClose, videoUrl, title, downloadUrl }) {
     if (!recordingId) return;
     try {
       const response = await fetch(`/api/recordings/${recordingId}`, { method: 'DELETE' });
-      if (!response.ok) throw new Error('Failed to delete recording');
-      showStatusMessage('Recording deleted successfully', 'success');
+      if (!response.ok) throw new Error(t('timeline.failedToDeleteRecording'));
+      showStatusMessage(t('timeline.recordingDeletedSuccessfully'), 'success');
       setShowDeleteConfirm(false);
 
       // Notify RecordingsView to remove the recording locally
@@ -400,7 +403,7 @@ export function VideoModal({ isOpen, onClose, videoUrl, title, downloadUrl }) {
       onClose();
     } catch (error) {
       console.error('Error deleting recording:', error);
-      showStatusMessage(`Error: ${error.message}`, 'error');
+      showStatusMessage(t('recordings.errorMessage', { message: error.message }), 'error');
       setShowDeleteConfirm(false);
     }
   }, [recordingId, onClose]);
@@ -410,7 +413,7 @@ export function VideoModal({ isOpen, onClose, videoUrl, title, downloadUrl }) {
     if (!videoRef.current) return;
     const video = videoRef.current;
     if (!video.videoWidth || !video.videoHeight) {
-      showStatusMessage('Cannot take snapshot: Video not loaded', 'error');
+      showStatusMessage(t('timeline.cannotTakeSnapshotVideoNotLoaded'), 'error');
       return;
     }
     const canvas = document.createElement('canvas');
@@ -425,7 +428,7 @@ export function VideoModal({ isOpen, onClose, videoUrl, title, downloadUrl }) {
 
     canvas.toBlob((blob) => {
       if (!blob) {
-        showStatusMessage('Failed to create snapshot', 'error');
+        showStatusMessage(t('timeline.failedToCreateSnapshot'), 'error');
         return;
       }
       const blobUrl = URL.createObjectURL(blob);
@@ -438,7 +441,7 @@ export function VideoModal({ isOpen, onClose, videoUrl, title, downloadUrl }) {
         if (document.body.contains(link)) document.body.removeChild(link);
         URL.revokeObjectURL(blobUrl);
       }, 1000);
-      showStatusMessage(`Snapshot saved: ${fileName}`, 'success', 2000);
+      showStatusMessage(t('recordings.snapshotSaved', { fileName }), 'success', 2000);
     }, 'image/jpeg', 0.95);
   }, [recordingData]);
 
@@ -507,9 +510,9 @@ export function VideoModal({ isOpen, onClose, videoUrl, title, downloadUrl }) {
 
     // Update status
     if (visibleDetections.length > 0) {
-      setDetectionStatus(`Showing ${visibleDetections.length} detection${visibleDetections.length !== 1 ? 's' : ''} at current time`);
+      setDetectionStatus(t(visibleDetections.length === 1 ? 'recordings.showingDetectionOne' : 'recordings.showingDetectionMany', { count: visibleDetections.length }));
     } else {
-      setDetectionStatus(`No detections at current time (${detections.length} total)`);
+      setDetectionStatus(t('recordings.noDetectionsAtCurrentTime', { count: detections.length }));
     }
 
     // Draw each visible detection using letterbox-aware coordinates
@@ -604,7 +607,7 @@ export function VideoModal({ isOpen, onClose, videoUrl, title, downloadUrl }) {
     const video = videoRef.current;
     setPlaybackMessage('');
     return loadRecordingPlayback(video, videoUrl, {
-      onPreparing: () => setPlaybackMessage('Preparing a compatible version for this browser…'),
+      onPreparing: () => setPlaybackMessage(t('recordings.preparingCompatiblePlayback')),
       onReady: () => setPlaybackMessage(''),
       onError: error => setPlaybackMessage(error.message),
     });
@@ -708,7 +711,7 @@ export function VideoModal({ isOpen, onClose, videoUrl, title, downloadUrl }) {
       }
     } catch (error) {
       console.error('Error toggling fullscreen:', error);
-      showStatusMessage(`Could not toggle fullscreen mode: ${error.message}`, 'error');
+      showStatusMessage(t('timeline.couldNotToggleFullscreen', { message: error.message }), 'error');
     }
   }, []);
 
@@ -774,11 +777,12 @@ export function VideoModal({ isOpen, onClose, videoUrl, title, downloadUrl }) {
       <div className="modal-content bg-card text-card-foreground rounded-lg shadow-xl max-w-4xl max-h-[95vh] h-[95vh] flex flex-col overflow-hidden transform transition-all duration-300 ease-out scale-95 opacity-0 w-full md:w-[90%]">
         <div className="flex justify-between items-center p-2 sm:p-3 border-b border-border flex-shrink-0">
           <h3 id="video-preview-title" className="text-base sm:text-lg font-semibold text-gray-900 dark:text-white truncate mr-2">
-            {title || 'Video'}
+            {title || t('recordings.video')}
           </h3>
           <button
             className="close text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 flex-shrink-0"
             onClick={onClose}
+            aria-label={t('common.close')}
           >
             ✕
           </button>
@@ -827,7 +831,7 @@ export function VideoModal({ isOpen, onClose, videoUrl, title, downloadUrl }) {
 
           <div id="recordings-controls" className="mx-2 sm:mx-3 mb-2 sm:mb-3 p-2 sm:p-3 border border-green-500 rounded-lg bg-card text-card-foreground shadow-md relative z-10 flex-1 min-h-0 overflow-y-auto overscroll-contain md:flex-none">
             <h3 className="text-base font-bold text-center mb-2 text-foreground">
-              PLAYBACK CONTROLS
+              {t('recordings.playbackControls')}
             </h3>
 
             <div className="flex justify-center mb-3">
@@ -835,9 +839,9 @@ export function VideoModal({ isOpen, onClose, videoUrl, title, downloadUrl }) {
                 type="button"
                 className="px-3 py-1.5 rounded bg-secondary text-secondary-foreground hover:bg-secondary/80 transition-colors text-sm font-medium"
                 onClick={handleToggleFullscreen}
-                title={isFullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}
+                title={t(isFullscreen ? 'timeline.exitFullscreen' : 'timeline.enterFullscreen')}
               >
-                {isFullscreen ? 'Exit Fullscreen' : 'Fullscreen'}
+                {t(isFullscreen ? 'timeline.exitFullscreen' : 'timeline.fullscreen')}
               </button>
             </div>
 
@@ -845,7 +849,7 @@ export function VideoModal({ isOpen, onClose, videoUrl, title, downloadUrl }) {
               {/* Speed controls section */}
               <div className="border-b border-border pb-3 md:border-b-0 md:border-r md:pr-3 md:pb-0">
                 <h4 className="font-bold text-center mb-2 text-foreground text-sm">
-                  Playback Speed
+                  {t('recordings.playbackSpeed')}
                 </h4>
 
                 <div className="flex flex-wrap justify-center gap-1.5">
@@ -860,20 +864,20 @@ export function VideoModal({ isOpen, onClose, videoUrl, title, downloadUrl }) {
                       data-speed={speed}
                       onClick={() => handleSpeedChange(speed)}
                     >
-                      {speed === 1.0 ? '1× (Normal)' : `${speed}×`}
+                      {speed === 1.0 ? t('recordings.normalSpeed') : `${speed}×`}
                     </button>
                   ))}
                 </div>
 
                 <div id="current-speed-indicator" className="mt-2 text-center font-medium text-green-600 dark:text-green-400 text-xs">
-                  Current Speed: {currentSpeed}× {currentSpeed === 1.0 ? '(Normal)' : ''}
+                  {t('recordings.currentSpeed', { speed: `${currentSpeed}×` })} {currentSpeed === 1.0 ? t('recordings.normalSpeedSuffix') : ''}
                 </div>
               </div>
 
               {/* Detection overlay section */}
               <div className="pt-3 md:pt-0 md:pl-3">
                 <h4 className="font-bold text-center mb-2 text-foreground text-sm">
-                  Detection Overlays
+                  {t('recordings.detectionOverlays')}
                 </h4>
 
                 <div className="flex flex-col items-center gap-1.5">
@@ -890,7 +894,7 @@ export function VideoModal({ isOpen, onClose, videoUrl, title, downloadUrl }) {
                       htmlFor="detection-overlay-checkbox"
                       className="text-xs font-medium text-foreground"
                     >
-                      Show Detection Overlays
+                      {t('recordings.showDetectionOverlays')}
                     </label>
                   </div>
 
@@ -899,7 +903,7 @@ export function VideoModal({ isOpen, onClose, videoUrl, title, downloadUrl }) {
                       htmlFor="detection-sensitivity-slider"
                       className="text-xs font-medium text-foreground mb-1"
                     >
-                      Detection Sensitivity
+                      {t('recordings.detectionSensitivity')}
                     </label>
 
                     <input
@@ -914,7 +918,7 @@ export function VideoModal({ isOpen, onClose, videoUrl, title, downloadUrl }) {
                     />
 
                     <div id="detection-sensitivity-value" className="text-xs text-muted-foreground text-center mb-1">
-                      Time Window: {timeWindow} second{timeWindow !== 1 ? 's' : ''}
+                      {t(timeWindow === 1 ? 'recordings.timeWindowOne' : 'recordings.timeWindowMany', { count: timeWindow })}
                     </div>
                   </div>
 
@@ -941,7 +945,7 @@ export function VideoModal({ isOpen, onClose, videoUrl, title, downloadUrl }) {
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
                 </svg>
-                Snapshot
+                {t('timeline.snapshot')}
               </button>
               {/* Download */}
               {downloadUrl && (
@@ -953,7 +957,7 @@ export function VideoModal({ isOpen, onClose, videoUrl, title, downloadUrl }) {
                   <svg xmlns="http://www.w3.org/2000/svg" className="h-3.5 w-3.5 mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                   </svg>
-                  Download
+                  {t('common.download')}
                 </a>
               )}
               {/* View in Timeline */}
@@ -975,7 +979,7 @@ export function VideoModal({ isOpen, onClose, videoUrl, title, downloadUrl }) {
                     <svg xmlns="http://www.w3.org/2000/svg" className="h-3.5 w-3.5 mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                     </svg>
-                    Timeline
+                    {t('nav.timeline')}
                   </a>
                 );
               })()}
@@ -988,7 +992,7 @@ export function VideoModal({ isOpen, onClose, videoUrl, title, downloadUrl }) {
                       : 'bg-secondary text-secondary-foreground hover:bg-secondary/80'
                   }`}
                   onClick={handleToggleProtection}
-                  title={isProtected ? 'Unprotect Recording' : 'Protect Recording'}
+                  title={t(isProtected ? 'recordings.unprotect' : 'recordings.protect')}
                 >
                   <svg xmlns="http://www.w3.org/2000/svg" className="h-3.5 w-3.5 mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     {isProtected ? (
@@ -997,7 +1001,7 @@ export function VideoModal({ isOpen, onClose, videoUrl, title, downloadUrl }) {
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z" />
                     )}
                   </svg>
-                  {isProtected ? 'Protected' : 'Protect'}
+                  {t(isProtected ? 'recordings.protected' : 'recordings.protectAction')}
                 </button>
               )}
               {/* Delete */}
@@ -1010,7 +1014,7 @@ export function VideoModal({ isOpen, onClose, videoUrl, title, downloadUrl }) {
                   <svg xmlns="http://www.w3.org/2000/svg" className="h-3.5 w-3.5 mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                   </svg>
-                  Delete
+                  {t('common.delete')}
                 </button>
               )}
             </div>
@@ -1021,8 +1025,8 @@ export function VideoModal({ isOpen, onClose, videoUrl, title, downloadUrl }) {
               onClose={() => setShowDeleteConfirm(false)}
               onConfirm={handleDeleteRecording}
               title={t('timeline.deleteRecording')}
-              message="Are you sure you want to delete this recording? This action cannot be undone."
-              confirmLabel="Delete"
+              message={t('timeline.deleteRecordingConfirmation')}
+              confirmLabel={t('common.delete')}
             />
           </div>
         </div>
@@ -1037,6 +1041,7 @@ export function VideoModal({ isOpen, onClose, videoUrl, title, downloadUrl }) {
  * Provides modal context and renders modal components
  */
 export function ModalProvider({ children }) {
+  const { t } = useI18n();
   const [snapshotModal, setSnapshotModal] = useState({
     isOpen: false,
     imageData: '',
@@ -1079,7 +1084,7 @@ export function ModalProvider({ children }) {
 
       if (!imageData) {
         console.error('No image data available for download');
-        showStatusMessage('Download failed: No image data available', 'error', 5000);
+        showStatusMessage(t('recordings.snapshotDownloadMissingData'), 'error', 5000);
         return;
       }
 
@@ -1099,10 +1104,10 @@ export function ModalProvider({ children }) {
         }
       }, 100);
 
-      showStatusMessage('Snapshot downloaded successfully', 'success', 3000);
+      showStatusMessage(t('recordings.snapshotDownloaded'), 'success', 3000);
     } catch (error) {
       console.error('Error in snapshot download process:', error);
-      showStatusMessage('Download failed: ' + error.message, 'error', 5000);
+      showStatusMessage(t('recordings.downloadFailed', { message: error.message }), 'error', 5000);
     }
   }, [snapshotModal]);
 
@@ -1201,7 +1206,7 @@ export function showVideoModal(videoUrl, title, downloadUrl) {
     );
   }).catch(err => {
     console.error('Error rendering video modal:', err);
-    showStatusMessage('Error showing video modal: ' + err.message, 'error');
+    showStatusMessage(translate('recordings.errorShowingVideo', { message: err.message }), 'error');
   });
 }
 
@@ -1247,10 +1252,10 @@ export function showSnapshotPreview(imageData, streamName) {
           }
         }, 100);
 
-        showStatusMessage('Snapshot downloaded successfully', 'success', 3000);
+        showStatusMessage(translate('recordings.snapshotDownloaded'), 'success', 3000);
       } catch (error) {
         console.error('Error downloading snapshot:', error);
-        showStatusMessage('Download failed: ' + error.message, 'error', 5000);
+        showStatusMessage(translate('recordings.downloadFailed', { message: error.message }), 'error', 5000);
       }
     };
 
@@ -1269,6 +1274,6 @@ export function showSnapshotPreview(imageData, streamName) {
     );
   }).catch(err => {
     console.error('Error rendering snapshot modal:', err);
-    showStatusMessage('Error showing snapshot preview: ' + err.message, 'error');
+    showStatusMessage(translate('recordings.errorShowingSnapshot', { message: err.message }), 'error');
   });
 }
diff --git a/web/js/components/preact/WebRTCVideoCell.jsx b/web/js/components/preact/WebRTCVideoCell.jsx
index 2ccdf9e2..56c12a2f 100644
--- a/web/js/components/preact/WebRTCVideoCell.jsx
+++ b/web/js/components/preact/WebRTCVideoCell.jsx
@@ -1720,7 +1720,7 @@ export function WebRTCVideoCell({
                 opacity: 0.7
               }}
             >
-              {talkMode === 'ptt' ? 'PTT' : 'TOG'}
+              {t(talkMode === 'ptt' ? 'live.pushToTalkShort' : 'live.toggleTalkShort')}
             </button>
             {/* Main microphone button */}
             <button
diff --git a/web/js/components/preact/WebRTCView.jsx b/web/js/components/preact/WebRTCView.jsx
index 0e54ad4f..13f20b8b 100644
--- a/web/js/components/preact/WebRTCView.jsx
+++ b/web/js/components/preact/WebRTCView.jsx
@@ -624,7 +624,7 @@ export function WebRTCView({ audioDisabled = false, isAutoDisabled = false, isWe
       console.log('Entering fullscreen mode for video cell');
       requestNativeFullscreen(cellElement).catch(err => {
         console.error(`Error attempting to enable fullscreen: ${err.message}`);
-        showStatusMessage(`Could not enable fullscreen mode: ${err.message}`);
+        showStatusMessage(t('live.couldNotEnableFullscreen', { message: err.message }));
       });
     } else {
       console.log('Exiting fullscreen mode');
diff --git a/web/js/components/preact/live/LiveOperatorNavigator.jsx b/web/js/components/preact/live/LiveOperatorNavigator.jsx
index fe8d85b6..0853013e 100644
--- a/web/js/components/preact/live/LiveOperatorNavigator.jsx
+++ b/web/js/components/preact/live/LiveOperatorNavigator.jsx
@@ -412,7 +412,7 @@ export function LiveOperatorNavigator({
                     onSurfaceChange('plan');
                   }}>
                   <strong>{plan.name}</strong>
-                  <small>{liveCount}/{(plan.cameras || []).length} live · {(plan.cameras || []).length} placed</small>
+                  <small>{t('live.navigator.planCameraCounts', { live: liveCount, total: (plan.cameras || []).length })}</small>
                 </button>
               </div>
             );
diff --git a/web/js/components/preact/recordings/RecordingsGrid.jsx b/web/js/components/preact/recordings/RecordingsGrid.jsx
index 9ed7071b..7439c333 100644
--- a/web/js/components/preact/recordings/RecordingsGrid.jsx
+++ b/web/js/components/preact/recordings/RecordingsGrid.jsx
@@ -258,7 +258,7 @@ function RecordingCard({
             <svg class="w-12 h-12 opacity-30 animate-pulse" fill="currentColor" viewBox="0 0 20 20">
               <path fillRule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clipRule="evenodd" />
             </svg>
-            <span class="text-xs mt-2 opacity-50">Loading...</span>
+            <span class="text-xs mt-2 opacity-50">{t('common.loading')}</span>
           </div>
         ) : (
           <div
@@ -269,7 +269,7 @@ function RecordingCard({
             <svg class="w-12 h-12 opacity-40 text-destructive" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
             </svg>
-            <span class="text-xs mt-2 opacity-60">Tap to retry</span>
+            <span class="text-xs mt-2 opacity-60">{t('recordings.tapToRetry')}</span>
           </div>
         )}
 
@@ -348,7 +348,7 @@ function RecordingCard({
             <div class="mb-1">
               <div class="flex items-center justify-between gap-2">
                 <span class="font-medium text-sm truncate" title={recording.stream}>
-                  {recording.stream || 'Unknown'}
+                  {recording.stream || t('common.unknown')}
                 </span>
                 <span class="text-xs text-muted-foreground whitespace-nowrap">
                   {formatUtils.formatDateTime(recording.start_time_unix ?? recording.start_time)}
diff --git a/web/js/components/preact/recordings/RecordingsTable.jsx b/web/js/components/preact/recordings/RecordingsTable.jsx
index 87d081b2..1bbfdb57 100644
--- a/web/js/components/preact/recordings/RecordingsTable.jsx
+++ b/web/js/components/preact/recordings/RecordingsTable.jsx
@@ -22,6 +22,7 @@ const HIDEABLE_COLUMNS = [
  * Inline tag cell with overlay toggle
  */
 function TagCell({ recording, onTagsChanged }) {
+  const { t } = useI18n();
   const [showOverlay, setShowOverlay] = useState(false);
   return (
     <td className="px-6 py-4">
@@ -35,7 +36,7 @@ function TagCell({ recording, onTagsChanged }) {
           <button
             className="p-0.5 rounded hover:bg-muted/70 transition-colors"
             onClick={() => setShowOverlay(!showOverlay)}
-            title="Manage tags"
+            title={t('recordings.manageTagsInline')}
           >
             <TagIcon className="w-3.5 h-3.5 text-muted-foreground" />
           </button>
@@ -396,7 +397,7 @@ export function RecordingsTable({
                           <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path>
                           <path fillRule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clipRule="evenodd"></path>
                         </svg>
-                        Yes
+                        {t('common.yes')}
                       </span>
                     ) : ''}
                   </td>
diff --git a/web/js/components/preact/recordings/TagsOverlay.jsx b/web/js/components/preact/recordings/TagsOverlay.jsx
index 93fe283b..6892258a 100644
--- a/web/js/components/preact/recordings/TagsOverlay.jsx
+++ b/web/js/components/preact/recordings/TagsOverlay.jsx
@@ -88,7 +88,7 @@ export function TagsOverlay({ recording, onClose, onTagsChanged }) {
     try {
       await recordingsAPI.setRecordingTags(recording.id, newTags);
       if (onTagsChanged) onTagsChanged(recording.id, newTags);
-      showStatusMessage(`Tag "${trimmed}" added`);
+      showStatusMessage(t('recordings.tagAdded', { tag: trimmed }));
     } catch { /* error shown by API */ }
     setSaving(false);
   }, [tags, recording.id, onTagsChanged]);
@@ -100,7 +100,7 @@ export function TagsOverlay({ recording, onClose, onTagsChanged }) {
     try {
       await recordingsAPI.setRecordingTags(recording.id, newTags);
       if (onTagsChanged) onTagsChanged(recording.id, newTags);
-      showStatusMessage(`Tag "${tag}" removed`);
+      showStatusMessage(t('recordings.tagRemoved', { tag }));
     } catch { /* error shown by API */ }
     setSaving(false);
   }, [tags, recording.id, onTagsChanged]);
@@ -122,14 +122,14 @@ export function TagsOverlay({ recording, onClose, onTagsChanged }) {
     >
       <div class="flex items-center justify-between mb-2">
         <span class="text-sm font-medium flex items-center gap-1">
-          <TagIcon className="w-3.5 h-3.5" /> Recording Tags
+          <TagIcon className="w-3.5 h-3.5" /> {t('recordings.recordingTags')}
         </span>
         <button class="text-muted-foreground hover:text-foreground text-xs" onClick={onClose}>✕</button>
       </div>
 
       {/* Current tags */}
       <div class="flex flex-wrap gap-1 mb-2 min-h-[24px]">
-        {tags.length === 0 && <span class="text-xs text-muted-foreground italic">No tags</span>}
+        {tags.length === 0 && <span class="text-xs text-muted-foreground italic">{t('recordings.noTags')}</span>}
         {tags.map(tag => <TagChip key={tag} tag={tag} onRemove={removeTag} />)}
       </div>
 
@@ -226,12 +226,12 @@ export function BulkTagsOverlay({ recordings, selectedRecordings, onClose, onTag
         // Remove from all
         await recordingsAPI.batchUpdateRecordingTags(selectedIds, [], [tag]);
         setTagStates(prev => ({ ...prev, [tag]: 'none' }));
-        showStatusMessage(`Tag "${tag}" removed from ${selectedIds.length} recordings`);
+        showStatusMessage(t('recordings.tagRemovedFromRecordings', { tag, count: selectedIds.length }));
       } else {
         // 'none' or 'some' -> add to all
         await recordingsAPI.batchUpdateRecordingTags(selectedIds, [tag], []);
         setTagStates(prev => ({ ...prev, [tag]: 'all' }));
-        showStatusMessage(`Tag "${tag}" added to ${selectedIds.length} recordings`);
+        showStatusMessage(t('recordings.tagAddedToRecordings', { tag, count: selectedIds.length }));
       }
       if (onTagsChanged) onTagsChanged();
     } catch { /* error shown by API */ }
@@ -248,7 +248,7 @@ export function BulkTagsOverlay({ recordings, selectedRecordings, onClose, onTag
       if (!allTags.includes(trimmed)) setAllTags(prev => [...prev, trimmed].sort());
       setInputValue('');
       setShowSuggestions(false);
-      showStatusMessage(`Tag "${trimmed}" added to ${selectedIds.length} recordings`);
+      showStatusMessage(t('recordings.tagAddedToRecordings', { tag: trimmed, count: selectedIds.length }));
       if (onTagsChanged) onTagsChanged();
     } catch { /* error shown by API */ }
     setSaving(false);
@@ -271,14 +271,14 @@ export function BulkTagsOverlay({ recordings, selectedRecordings, onClose, onTag
     >
       <div class="flex items-center justify-between mb-2">
         <span class="text-sm font-medium flex items-center gap-1">
-          <TagIcon className="w-3.5 h-3.5" /> Recording Tags ({selectedIds.length} recordings)
+          <TagIcon className="w-3.5 h-3.5" /> {t('recordings.recordingTagsCount', { count: selectedIds.length })}
         </span>
         <button class="text-muted-foreground hover:text-foreground text-xs" onClick={onClose}>✕</button>
       </div>
 
       {/* Tag list with tri-state checkboxes */}
       <div class="max-h-48 overflow-y-auto mb-2 space-y-0.5">
-        {knownTags.length === 0 && <span class="text-xs text-muted-foreground italic">No tags yet</span>}
+        {knownTags.length === 0 && <span class="text-xs text-muted-foreground italic">{t('recordings.noTagsYet')}</span>}
         {knownTags.map(tag => {
           const state = tagStates[tag];
           return (
diff --git a/web/js/components/preact/recordings/recordingsAPI.jsx b/web/js/components/preact/recordings/recordingsAPI.jsx
index 93e758d1..6256bcc8 100644
--- a/web/js/components/preact/recordings/recordingsAPI.jsx
+++ b/web/js/components/preact/recordings/recordingsAPI.jsx
@@ -4,6 +4,7 @@
 
 import { batchDeleteStatus } from '../../../utils/batch-delete-status.js';
 import { showStatusMessage } from '../ToastContainer.jsx';
+import { t } from '../../../i18n.js';
 import { prepareRecordingPlayback } from '../../../utils/recording-playback.js';
 import { formatUtils } from './formatUtils.js';
 import { urlUtils } from './urlUtils.js';
@@ -234,11 +235,11 @@ export const recordingsAPI = {
         onSuccess: () => {
           // Invalidate recordings queries to refresh the list
           queryClient.invalidateQueries({ queryKey: ['recordings'] });
-          showStatusMessage('Recording deleted successfully');
+          showStatusMessage(t('timeline.recordingDeletedSuccessfully'));
         },
         onError: (error) => {
           console.error('Error deleting recording:', error);
-          showStatusMessage('Error deleting recording: ' + error.message);
+          showStatusMessage(t('recordings.errorDeletingRecording', { message: error.message }));
         }
       });
     },
@@ -268,7 +269,7 @@ export const recordingsAPI = {
         },
         onError: (error) => {
           console.error('Error in batch delete operation:', error);
-          showStatusMessage('Error in batch delete operation: ' + error.message);
+          showStatusMessage(t('recordings.errorBatchDelete', { message: error.message }));
         }
       });
     }
@@ -284,7 +285,7 @@ export const recordingsAPI = {
       return data || [];
     } catch (error) {
       console.error('Error loading streams for filter:', error);
-      showStatusMessage('Error loading streams: ' + error.message);
+      showStatusMessage(t('recordings.errorLoadingStreams', { message: error.message }));
       return [];
     }
   },
@@ -366,7 +367,7 @@ export const recordingsAPI = {
       return data;
     } catch (error) {
       console.error('Error loading recordings:', error);
-      showStatusMessage('Error loading recordings: ' + error.message);
+      showStatusMessage(t('recordings.errorLoadingRecordings', { message: error.message }));
       throw error;
     }
   },
@@ -385,11 +386,11 @@ export const recordingsAPI = {
         retryDelay: 1000 // 1 second between retries
       });
 
-      showStatusMessage('Recording deleted successfully');
+      showStatusMessage(t('timeline.recordingDeletedSuccessfully'));
       return true;
     } catch (error) {
       console.error('Error deleting recording:', error);
-      showStatusMessage('Error deleting recording: ' + error.message);
+      showStatusMessage(t('recordings.errorDeletingRecording', { message: error.message }));
       return false;
     }
   },
@@ -405,7 +406,7 @@ export const recordingsAPI = {
       .map(([id]) => parseInt(id, 10));
 
     if (selectedIds.length === 0) {
-      showStatusMessage('No recordings selected');
+      showStatusMessage(t('recordings.noRecordingsSelected'));
       return { succeeded: 0, failed: 0 };
     }
 
@@ -418,7 +419,7 @@ export const recordingsAPI = {
       return recordingsAPI.deleteSelectedRecordingsHttp(selectedIds);
     } catch (error) {
       console.error('Error in batch delete operation:', error);
-      showStatusMessage('Error in batch delete operation: ' + error.message);
+      showStatusMessage(t('recordings.errorBatchDelete', { message: error.message }));
       return { succeeded: 0, failed: 0 };
     }
   },
@@ -447,7 +448,7 @@ export const recordingsAPI = {
       return await recordingsAPI.handleBatchDeleteResponse(response);
     } catch (error) {
       console.error('Error in HTTP batch delete operation:', error);
-      showStatusMessage('Error in batch delete operation: ' + error.message);
+      showStatusMessage(t('recordings.errorBatchDelete', { message: error.message }));
       return { succeeded: 0, failed: 0 };
     }
   },
@@ -560,7 +561,7 @@ export const recordingsAPI = {
       return recordingsAPI.deleteAllFilteredRecordingsHttp(filter);
     } catch (error) {
       console.error('Error in delete all operation:', error);
-      showStatusMessage('Error in delete all operation: ' + error.message);
+      showStatusMessage(t('recordings.errorDeleteAll', { message: error.message }));
       return { succeeded: 0, failed: 0 };
     }
   },
@@ -603,7 +604,7 @@ export const recordingsAPI = {
       return await recordingsAPI.handleBatchDeleteResponse(deleteResponse);
     } catch (error) {
       console.error('Error in HTTP delete all operation:', error);
-      showStatusMessage('Error in delete all operation: ' + error.message);
+      showStatusMessage(t('recordings.errorDeleteAll', { message: error.message }));
       return { succeeded: 0, failed: 0 };
     }
   },
@@ -681,7 +682,7 @@ export const recordingsAPI = {
     // Check if recording has an id property
     if (!recording.id) {
       console.error('Recording has no id property:', recording);
-      showStatusMessage('Error: Recording has no id property');
+      showStatusMessage(t('recordings.recordingMissingId'));
       return;
     }
 
@@ -783,7 +784,7 @@ export const recordingsAPI = {
       return data;
     } catch (error) {
       console.error('Error setting recording tags:', error);
-      showStatusMessage('Error setting tags: ' + error.message);
+      showStatusMessage(t('recordings.errorSettingTags', { message: error.message }));
       throw error;
     }
   },
@@ -808,7 +809,7 @@ export const recordingsAPI = {
       return data;
     } catch (error) {
       console.error('Error in batch tag update:', error);
-      showStatusMessage('Error updating tags: ' + error.message);
+      showStatusMessage(t('recordings.errorUpdatingTags', { message: error.message }));
       throw error;
     }
   },
@@ -823,7 +824,7 @@ export const recordingsAPI = {
       await prepareRecordingPlayback(downloadUrl, {
         compatibility: false,
         signal: AbortSignal.timeout(60 * 60 * 1000),
-        onWaiting: () => showStatusMessage('Preparing archived recording…'),
+        onWaiting: () => showStatusMessage(t('recordings.preparingArchivedRecording')),
       });
     } catch (error) {
       showStatusMessage(error.message || 'Unable to retrieve recording', 'error');
@@ -844,6 +845,6 @@ export const recordingsAPI = {
     link.click();
     document.body.removeChild(link);
 
-    showStatusMessage('Download started');
+    showStatusMessage(t('recordings.downloadStarted'));
   }
 };
diff --git a/web/js/components/preact/settings/AuthTab.jsx b/web/js/components/preact/settings/AuthTab.jsx
index ed5f766d..cb742172 100644
--- a/web/js/components/preact/settings/AuthTab.jsx
+++ b/web/js/components/preact/settings/AuthTab.jsx
@@ -33,7 +33,7 @@ export function AuthTab({
     <div class="space-y-6">
       {/* Authentication & access */}
       <div class="settings-group bg-card text-card-foreground rounded-lg shadow p-4">
-        <h3 class="text-lg font-semibold mb-4 pb-2 border-b border-border">{t('settings.authentication') || 'Authentication & Access'}</h3>
+        <h3 class="text-lg font-semibold mb-4 pb-2 border-b border-border">{t('settings.authentication')}</h3>
         <div data-setting-label={t('settings.enableAuthentication')} class="setting grid grid-cols-1 md:grid-cols-3 gap-4 items-center mb-4">
           <label for="setting-auth-enabled" class="font-medium">{t('settings.enableAuthentication')}</label>
           <div class="col-span-2">
diff --git a/web/js/components/preact/settings/Go2rtcTab.jsx b/web/js/components/preact/settings/Go2rtcTab.jsx
index 479403b6..ad0df31e 100644
--- a/web/js/components/preact/settings/Go2rtcTab.jsx
+++ b/web/js/components/preact/settings/Go2rtcTab.jsx
@@ -461,7 +461,7 @@ export function Go2rtcTab({ settings, setSettings, handleInputChange, canModifyS
                 {settings.go2rtcOverrideDisabledReason ? (
                   <div class="p-3 border border-yellow-500 bg-yellow-50 dark:bg-yellow-900/20 rounded text-sm">
                     <div class="font-medium text-yellow-800 dark:text-yellow-200 mb-1">
-                      Override quarantined
+                      {t('settings.go2rtcOverrideQuarantined')}
                     </div>
                     <div class="text-yellow-900 dark:text-yellow-100 whitespace-pre-wrap font-mono text-xs">
                       {settings.go2rtcOverrideDisabledReason}
@@ -478,7 +478,7 @@ export function Go2rtcTab({ settings, setSettings, handleInputChange, canModifyS
                           setOverrideValidation(null);
                         }}
                       >
-                        Restore quarantined version into the editor
+                        {t('settings.go2rtcRestoreQuarantined')}
                       </button>
                     ) : null}
                   </div>
@@ -502,10 +502,10 @@ export function Go2rtcTab({ settings, setSettings, handleInputChange, canModifyS
                 <div class="flex items-center justify-between text-xs text-muted-foreground max-w-md">
                   <span>
                     {formatBytes(utf8ByteLength(settings.go2rtcConfigOverride))} / {formatBytes(GO2RTC_OVERRIDE_MAX_BYTES)}
-                    {overrideValidating ? ' • validating…' : null}
+                    {overrideValidating ? t('settings.go2rtcValidating') : null}
                   </span>
                   {overrideValidation && overrideValidation.libyaml_available === false ? (
-                    <span class="text-yellow-700 dark:text-yellow-300">libyaml unavailable — server-side validation skipped</span>
+                    <span class="text-yellow-700 dark:text-yellow-300">{t('settings.go2rtcValidationSkipped')}</span>
                   ) : null}
                 </div>
 
@@ -513,7 +513,7 @@ export function Go2rtcTab({ settings, setSettings, handleInputChange, canModifyS
                 {overrideValidation && overrideValidation.valid === false && overrideValidation.error ? (
                   <div class="p-2 border border-red-500 bg-red-50 dark:bg-red-900/20 rounded text-sm text-red-800 dark:text-red-200 max-w-md">
                     <div class="font-medium">
-                      Line {overrideValidation.error.line || '?'}, col {overrideValidation.error.column || '?'}
+                      {t('settings.go2rtcErrorPosition', { line: overrideValidation.error.line || '?', column: overrideValidation.error.column || '?' })}
                     </div>
                     <div class="text-xs mt-1 whitespace-pre-wrap">{overrideValidation.error.message}</div>
                   </div>
@@ -536,7 +536,7 @@ export function Go2rtcTab({ settings, setSettings, handleInputChange, canModifyS
                     disabled={!canModifySettings}
                     onClick={loadEffectiveConfig}
                   >
-                    Show effective config
+                    {t('settings.go2rtcShowEffectiveConfig')}
                   </button>
                   <select
                     class="px-2 py-1 text-xs border border-input rounded bg-background disabled:opacity-60"
@@ -544,7 +544,7 @@ export function Go2rtcTab({ settings, setSettings, handleInputChange, canModifyS
                     disabled={!canModifySettings}
                     onChange={handleInsertPreset}
                   >
-                    <option value="">Load example…</option>
+                    <option value="">{t('settings.go2rtcLoadExample')}</option>
                     {OVERRIDE_PRESETS.map((p, i) => (
                       <option key={i} value={i}>{p.label}</option>
                     ))}
@@ -553,7 +553,7 @@ export function Go2rtcTab({ settings, setSettings, handleInputChange, canModifyS
 
                 {/* Supported-sections collapsible */}
                 <details class="text-xs text-muted-foreground max-w-md">
-                  <summary class="cursor-pointer hover:text-foreground">Supported go2rtc sections</summary>
+                  <summary class="cursor-pointer hover:text-foreground">{t('settings.go2rtcSupportedSections')}</summary>
                   <ul class="mt-2 space-y-1">
                     {KNOWN_GO2RTC_SECTIONS.map(([k, desc]) => (
                       <li key={k}><code class="font-mono">{k}</code> — {desc}</li>
@@ -568,13 +568,13 @@ export function Go2rtcTab({ settings, setSettings, handleInputChange, canModifyS
                   <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={() => setEffectiveConfigOpen(false)}>
                     <div class="bg-card text-card-foreground rounded-lg shadow-lg max-w-4xl w-full max-h-[80vh] overflow-auto p-4" onClick={(e) => e.stopPropagation()}>
                       <div class="flex items-center justify-between mb-3 pb-2 border-b">
-                        <h3 class="font-semibold">go2rtc effective config (redacted)</h3>
-                        <button type="button" class="text-sm underline" onClick={() => setEffectiveConfigOpen(false)}>Close</button>
+                        <h3 class="font-semibold">{t('settings.go2rtcEffectiveConfig')}</h3>
+                        <button type="button" class="text-sm underline" onClick={() => setEffectiveConfigOpen(false)}>{t('common.close')}</button>
                       </div>
                       {effectiveConfigLoading ? (
-                        <div class="text-sm text-muted-foreground">Loading…</div>
+                        <div class="text-sm text-muted-foreground">{t('settings.go2rtcLoading')}</div>
                       ) : effectiveConfig?.error ? (
-                        <div class="text-sm text-red-600">Failed to load: {effectiveConfig.error}</div>
+                        <div class="text-sm text-red-600">{t('settings.go2rtcLoadFailed', { message: effectiveConfig.error })}</div>
                       ) : effectiveConfig ? (
                         <div class="space-y-3">
                           {(() => {
@@ -595,7 +595,7 @@ export function Go2rtcTab({ settings, setSettings, handleInputChange, canModifyS
                           })()}
                           {effectiveConfig.redaction_available === false ? (
                             <div class="p-2 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-500 rounded text-xs text-yellow-800 dark:text-yellow-200">
-                              libyaml unavailable on the server — secret redaction is SKIPPED. Treat this preview as if it contained your secrets in cleartext.
+                              {t('settings.go2rtcRedactionUnavailable')}
                             </div>
                           ) : null}
                           {Array.isArray(effectiveConfig.warnings) && effectiveConfig.warnings.length > 0 ? (
@@ -605,12 +605,12 @@ export function Go2rtcTab({ settings, setSettings, handleInputChange, canModifyS
                           ) : null}
                           <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                             <div>
-                              <div class="text-xs font-medium mb-1">go2rtc.yaml (base)</div>
-                              <pre class="text-xs font-mono p-2 border border-input bg-muted rounded overflow-auto max-h-96 whitespace-pre-wrap">{effectiveConfig.base || '(empty)'}</pre>
+                              <div class="text-xs font-medium mb-1">{t('settings.go2rtcBaseConfig')}</div>
+                              <pre class="text-xs font-mono p-2 border border-input bg-muted rounded overflow-auto max-h-96 whitespace-pre-wrap">{effectiveConfig.base || t('settings.go2rtcEmpty')}</pre>
                             </div>
                             <div>
                               <div class="text-xs font-medium mb-1">override.yaml</div>
-                              <pre class="text-xs font-mono p-2 border border-input bg-muted rounded overflow-auto max-h-96 whitespace-pre-wrap">{effectiveConfig.override || '(none)'}</pre>
+                              <pre class="text-xs font-mono p-2 border border-input bg-muted rounded overflow-auto max-h-96 whitespace-pre-wrap">{effectiveConfig.override || t('settings.go2rtcNone')}</pre>
                             </div>
                           </div>
                         </div>
diff --git a/web/js/components/preact/settings/StorageTab.jsx b/web/js/components/preact/settings/StorageTab.jsx
index 9d9a1702..fbb0a6cb 100644
--- a/web/js/components/preact/settings/StorageTab.jsx
+++ b/web/js/components/preact/settings/StorageTab.jsx
@@ -311,7 +311,7 @@ function StorageTargetsPanel({ canModifySettings, t }) {
                   <div class="flex flex-wrap items-center gap-2">
                     <h4 class="font-semibold">{target.name}</h4>
                     {target.is_default && <span class="badge-info rounded-full px-2 py-0.5 text-xs font-semibold">{t('settings.storageTargets.default')}</span>}
-                    <span class={`rounded-full px-2 py-0.5 text-xs font-semibold ${statusClass(health.status)}`}>{health.status || 'unknown'}</span>
+                    <span class={`rounded-full px-2 py-0.5 text-xs font-semibold ${statusClass(health.status)}`}>{health.status || t('common.unknown')}</span>
                     {!objectStorage && <span class={`rounded-full px-2 py-0.5 text-xs font-semibold ${pressureClass(health.pressure)}`}>{t(`settings.storageTargets.pressure.${health.pressure || 'unavailable'}`)}</span>}
                     <span class="rounded-full bg-muted px-2 py-0.5 text-xs">{target.storage_class}</span>
                   </div>
diff --git a/web/js/components/preact/settings/StreamsDefaultsTab.jsx b/web/js/components/preact/settings/StreamsDefaultsTab.jsx
index ad3000f9..4ff1a6de 100644
--- a/web/js/components/preact/settings/StreamsDefaultsTab.jsx
+++ b/web/js/components/preact/settings/StreamsDefaultsTab.jsx
@@ -37,9 +37,9 @@ export function StreamsDefaultsTab({ settings, handleInputChange, canModifySetti
       </div>
 
       <div class="settings-group bg-card text-card-foreground rounded-lg shadow p-4">
-        <h3 class="text-lg font-semibold mb-4 pb-2 border-b border-border">{t('settings.streamsDefaults') || 'Streams Defaults'}</h3>
+        <h3 class="text-lg font-semibold mb-4 pb-2 border-b border-border">{t('settings.streamsDefaults')}</h3>
         <p class="text-sm text-muted-foreground mb-4">
-          {t('settings.streamsDefaultsDescription') || 'Defaults applied to new streams. Per-stream overrides always win.'}
+          {t('settings.streamsDefaultsDescription')}
         </p>
         <div data-setting-label={t('settings.defaultPreDetectionBufferSeconds')} class="setting grid grid-cols-1 md:grid-cols-3 gap-4 items-center mb-4">
           <label for="setting-default-pre-buffer" class="font-medium">{t('settings.defaultPreDetectionBufferSeconds')}</label>
diff --git a/web/js/components/preact/system/NetworkInfo.jsx b/web/js/components/preact/system/NetworkInfo.jsx
index a84b6d81..1138237a 100644
--- a/web/js/components/preact/system/NetworkInfo.jsx
+++ b/web/js/components/preact/system/NetworkInfo.jsx
@@ -26,7 +26,7 @@ export function NetworkInfo({ systemInfo }) {
                 <span>{iface.address || t('system.noIp')}</span>
               </div>
               <div className="text-sm text-muted-foreground">
-                MAC: {iface.mac && iface.mac !== 'Unavailable' ? iface.mac : t('common.unknown')} | {iface.up === true ? t('system.up') : iface.up === false ? t('system.down') : t('common.unknown')}
+                {t('system.macLabel')} {iface.mac && iface.mac !== 'Unavailable' ? iface.mac : t('common.unknown')} | {iface.up === true ? t('system.up') : iface.up === false ? t('system.down') : t('common.unknown')}
                 {iface.capability && iface.capability !== 'available' ? ` · ${iface.capability}` : ''}
               </div>
             </div>
diff --git a/web/js/components/preact/system/StreamStorage.jsx b/web/js/components/preact/system/StreamStorage.jsx
index 622b7deb..b0f31dff 100644
--- a/web/js/components/preact/system/StreamStorage.jsx
+++ b/web/js/components/preact/system/StreamStorage.jsx
@@ -18,7 +18,7 @@ export function StreamStorage({ systemInfo, formatBytes }) {
   if (!systemInfo.streamStorage || !Array.isArray(systemInfo.streamStorage) || systemInfo.streamStorage.length === 0) {
     return (
       <div className="bg-card text-card-foreground rounded-lg shadow p-4">
-        <h3 className="text-lg font-semibold mb-4 pb-2 border-b border-border">Stream Storage</h3>
+        <h3 className="text-lg font-semibold mb-4 pb-2 border-b border-border">{t('system.streamStorage')}</h3>
         <div className="text-muted-foreground text-center py-4">
           {t('system.noStreamStorageInformationAvailable')}
         </div>
diff --git a/web/js/components/preact/timeline/CalendarPicker.jsx b/web/js/components/preact/timeline/CalendarPicker.jsx
index 46301337..47d94dc2 100644
--- a/web/js/components/preact/timeline/CalendarPicker.jsx
+++ b/web/js/components/preact/timeline/CalendarPicker.jsx
@@ -12,12 +12,6 @@ import { useI18n } from '../../../i18n.js';
 
 /* ── helpers ────────────────────────────────────────────────── */
 
-const DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
-const MONTHS = [
-  'January','February','March','April','May','June',
-  'July','August','September','October','November','December'
-];
-
 /** Parse YYYY-MM-DD into local Date at midnight */
 function parseLocal(str) {
   return dayjs(str);
@@ -41,7 +35,7 @@ function buildGrid(year, month) {
 /* ── component ──────────────────────────────────────────────── */
 
 export function CalendarPicker({ value, onChange }) {
-  const { t } = useI18n();
+  const { t, locale } = useI18n();
   const today = dayjs().format('YYYY-MM-DD');
   const selected = value || today;
 
@@ -80,9 +74,9 @@ export function CalendarPicker({ value, onChange }) {
     else setViewMonth(m => m + 1);
   };
   const goToday = () => {
-    const t = dayjs();
-    setViewYear(t.year());
-    setViewMonth(t.month());
+    const currentDate = dayjs();
+    setViewYear(currentDate.year());
+    setViewMonth(currentDate.month());
     pick(today);
   };
 
@@ -98,7 +92,12 @@ export function CalendarPicker({ value, onChange }) {
 
   /* ── display helpers ── */
   const displayDate = parseLocal(selected);
-  const displayStr = `${MONTHS[displayDate.month()]} ${displayDate.date()}, ${displayDate.year()}`;
+  const dateFormatter = new Intl.DateTimeFormat(locale, { dateStyle: 'long' });
+  const monthFormatter = new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' });
+  const weekdayFormatter = new Intl.DateTimeFormat(locale, { weekday: 'short' });
+  const displayStr = dateFormatter.format(displayDate.toDate());
+  const weekdays = Array.from({ length: 7 }, (_, day) =>
+    weekdayFormatter.format(new Date(2023, 0, 1 + day)));
 
   return (
     <div className="relative" ref={wrapperRef} data-testid="date-picker">
@@ -161,7 +160,7 @@ export function CalendarPicker({ value, onChange }) {
             </button>
 
             <span className="font-semibold text-sm select-none">
-              {MONTHS[viewMonth]} {viewYear}
+              {monthFormatter.format(new Date(viewYear, viewMonth, 1))}
             </span>
 
             <button type="button" onClick={nextMonth}
@@ -176,7 +175,7 @@ export function CalendarPicker({ value, onChange }) {
 
           {/* Day-of-week headers */}
           <div className="grid grid-cols-7 text-center text-xs text-muted-foreground mb-1">
-            {DAYS.map(d => <span key={d} className="py-1">{d}</span>)}
+            {weekdays.map((day, index) => <span key={index} className="py-1">{day}</span>)}
           </div>
 
           {/* Day cells */}
@@ -214,7 +213,7 @@ export function CalendarPicker({ value, onChange }) {
               onClick={goToday}
               className="text-xs px-3 py-1 rounded bg-secondary text-secondary-foreground hover:bg-accent transition-colors"
             >
-              Today
+              {t('recordings.today')}
             </button>
           </div>
         </div>
diff --git a/web/js/components/preact/timeline/TimelinePage.jsx b/web/js/components/preact/timeline/TimelinePage.jsx
index ad9402bf..4d243ef1 100644
--- a/web/js/components/preact/timeline/TimelinePage.jsx
+++ b/web/js/components/preact/timeline/TimelinePage.jsx
@@ -1072,7 +1072,7 @@ export function TimelinePage() {
   useEffect(() => {
     if (streamsError) {
       console.error('TimelinePage: Error loading streams:', streamsError);
-      showStatusMessage('Error loading streams: ' + streamsError.message, 'error');
+      showStatusMessage(t('recordings.errorLoadingStreams', { message: streamsError.message }), 'error');
     }
   }, [streamsError]);
 
@@ -1107,16 +1107,16 @@ export function TimelinePage() {
           const uniqueStreams = [...new Set(segs.map(s => s.stream))];
           setSelectedStream(uniqueStreams.join(', '));
 
-          showStatusMessage(`Loaded ${segs.length} selected recording segments across ${availableDates.length} day${availableDates.length !== 1 ? 's' : ''}`, 'success');
+          showStatusMessage(t(availableDates.length === 1 ? 'timeline.loadedSelectedSegmentsOneDay' : 'timeline.loadedSelectedSegmentsManyDays', { count: segs.length, days: availableDates.length }), 'success');
         } else {
           setIdsTimelineSegments([]);
           loadSegmentsIntoTimeline([], selectedDate);
-          showStatusMessage('No recordings found for the selected IDs', 'info');
+          showStatusMessage(t('timeline.noRecordingsForSelectedIds'), 'info');
         }
       } catch (err) {
         console.error('Error fetching segments by IDs:', err);
         setIdsTimelineSegments([]);
-        showStatusMessage('Error loading selected recordings: ' + err.message, 'error');
+        showStatusMessage(t('timeline.errorLoadingSelectedRecordings', { message: err.message }), 'error');
       } finally {
         setIdsLoading(false);
       }
@@ -1196,7 +1196,7 @@ export function TimelinePage() {
   useEffect(() => {
     if (timelineError) {
       console.error('TimelinePage: Error loading timeline data:', timelineError.message);
-      showStatusMessage('Error loading timeline data: ' + timelineError.message, 'error');
+      showStatusMessage(t('timeline.errorLoadingData', { message: timelineError.message }), 'error');
       setSegments([]);
       setDetectionIntervals([]);
       return;
@@ -1210,7 +1210,7 @@ export function TimelinePage() {
 
     if (timelineSegments.length === 0) {
       loadSegmentsIntoTimeline([], selectedDate);
-      showStatusMessage('No recordings found for the selected date', 'warning');
+      showStatusMessage(t('timeline.noRecordingsForSelectedDate'), 'warning');
       return;
     }
 
@@ -1389,7 +1389,7 @@ export function TimelinePage() {
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
           </svg>
           <p className="text-muted-foreground text-lg">
-            {idsMode ? 'No selected recordings are visible for this day' : 'No recordings found for the selected date and stream'}
+            {t(idsMode ? 'timeline.noSelectedRecordingsVisible' : 'timeline.noRecordingsForDateAndStream')}
           </p>
         </div>
       );
diff --git a/web/js/components/preact/timeline/TimelinePlayer.jsx b/web/js/components/preact/timeline/TimelinePlayer.jsx
index 60239603..4ec11c72 100644
--- a/web/js/components/preact/timeline/TimelinePlayer.jsx
+++ b/web/js/components/preact/timeline/TimelinePlayer.jsx
@@ -907,7 +907,7 @@ export function TimelinePlayer({
         }, 0);
       }
 
-      showStatusMessage(`Snapshot saved: ${fileName}`, 'success', 2000);
+      showStatusMessage(t('recordings.snapshotSaved', { fileName }), 'success', 2000);
     }, 'image/jpeg', 0.95);
   }, [segmentRecordingData, t]);
 
diff --git a/web/js/components/preact/timeline/TimelineSegments.jsx b/web/js/components/preact/timeline/TimelineSegments.jsx
index 0d2c7e56..ee1534a6 100644
--- a/web/js/components/preact/timeline/TimelineSegments.jsx
+++ b/web/js/components/preact/timeline/TimelineSegments.jsx
@@ -220,7 +220,7 @@ export function TimelineSegments({ segments: propSegments, detectionIntervals: p
     if (!segments || segments.length === 0) {
       return (
         <div className="absolute inset-0 flex items-center justify-center text-muted-foreground text-sm">
-          No segments to display
+          {t('timeline.noSegmentsToDisplay')}
         </div>
       );
     }
@@ -328,7 +328,7 @@ export function TimelineSegments({ segments: propSegments, detectionIntervals: p
     <div
       className="timeline-segments relative w-full h-16"
       ref={containerRef}
-      aria-label="Recording timeline"
+      aria-label={t('timeline.recordingTimeline')}
     >
       {renderSegments()}
       {dragPreview && (
diff --git a/web/js/utils/batch-delete-status.js b/web/js/utils/batch-delete-status.js
index 235cef60..ff509b7a 100644
--- a/web/js/utils/batch-delete-status.js
+++ b/web/js/utils/batch-delete-status.js
@@ -1,13 +1,17 @@
 /** Keep accepted-but-pending deletions distinct from completed cleanup and failures. */
+import { t } from '../i18n.js';
+
 export function batchDeleteStatus(result) {
   const succeeded = result.succeeded || 0;
   const failed = result.failed || 0;
   const pending = result.pending_deletions || 0;
   if (pending > 0) {
-    return `Accepted ${succeeded} deletions; ${pending} await storage cleanup${failed > 0 ? `; failed to delete ${failed}` : ''}`;
+    return t('recordings.batchDeletePending', { succeeded, pending })
+      + (failed > 0 ? t('recordings.batchDeletePendingFailures', { count: failed }) : '');
   }
   if (succeeded > 0) {
-    return `Successfully deleted ${succeeded} recording${succeeded !== 1 ? 's' : ''}${failed > 0 ? `, but failed to delete ${failed}` : ''}`;
+    return t(succeeded === 1 ? 'recordings.batchDeleteSucceededOne' : 'recordings.batchDeleteSucceededMany', { count: succeeded })
+      + (failed > 0 ? t('recordings.batchDeleteSucceededFailures', { count: failed }) : '');
   }
-  return `Failed to delete ${failed} recording${failed !== 1 ? 's' : ''}`;
+  return t(failed === 1 ? 'recordings.batchDeleteFailedOne' : 'recordings.batchDeleteFailedMany', { count: failed });
 }
diff --git a/web/public/locales/en.json b/web/public/locales/en.json
index 8c36af1f..a246eded 100644
--- a/web/public/locales/en.json
+++ b/web/public/locales/en.json
@@ -1079,6 +1079,7 @@
   "recordings.tags": "Tags",
   "recordings.downloadSelectedTitle": "Download selected recordings",
   "recordings.manageTagsButton": "Manage Tags",
+  "recordings.manageTagsInline": "Manage tags",
   "recordings.manageTagsTitle": "Manage tags for selected recordings",
   "recordings.columnCaptureMethod": "Capture Method",
   "recordings.columnStartTime": "Start Time",
@@ -2647,5 +2648,151 @@
   "live.eptzCanvasHint": "Drag to pan and tilt; wheel or pinch to zoom; Home resets",
   "live.eptzReset": "Reset ePTZ view",
   "live.autoShort": "Auto",
-  "live.webrtcShort": "WebRTC"
+  "live.webrtcShort": "WebRTC",
+  "recordings.confirmDelete": "Confirm Delete",
+  "recordings.confirmDeleteItem": "Are you sure you want to delete this item?",
+  "recordings.confirmDeleteFromStream": "Are you sure you want to delete this recording from {stream}? This action cannot be undone.",
+  "recordings.thisStream": "this stream",
+  "recordings.deleteSelectedRecordings": "Delete Selected Recordings",
+  "recordings.confirmDeleteSelectedOne": "Are you sure you want to delete {count} selected recording?",
+  "recordings.confirmDeleteSelectedMany": "Are you sure you want to delete {count} selected recordings?",
+  "recordings.deleteAllFilteredRecordings": "Delete All Filtered Recordings",
+  "recordings.confirmDeleteAllFiltered": "Are you sure you want to delete all recordings matching the current filters? This action cannot be undone.",
+  "recordings.snapshotOfStream": "Snapshot: {stream}",
+  "recordings.noDetectionsLoaded": "No detections loaded",
+  "recordings.invalidRecordingTimestamps": "Error: Invalid recording timestamps",
+  "recordings.detectionAvailableOne": "{count} detection available",
+  "recordings.detectionAvailableMany": "{count} detections available",
+  "recordings.noDetectionsForRecording": "No detections found for this recording",
+  "recordings.errorLoadingDetections": "Error loading detections",
+  "recordings.snapshotSaved": "Snapshot saved: {fileName}",
+  "recordings.showingDetectionOne": "Showing {count} detection at current time",
+  "recordings.showingDetectionMany": "Showing {count} detections at current time",
+  "recordings.noDetectionsAtCurrentTime": "No detections at current time ({count} total)",
+  "recordings.preparingCompatiblePlayback": "Preparing a compatible version for this browser…",
+  "recordings.video": "Video",
+  "recordings.playbackControls": "PLAYBACK CONTROLS",
+  "recordings.playbackSpeed": "Playback Speed",
+  "recordings.normalSpeed": "1× (Normal)",
+  "recordings.currentSpeed": "Current Speed: {speed}",
+  "recordings.normalSpeedSuffix": "(Normal)",
+  "recordings.detectionOverlays": "Detection Overlays",
+  "recordings.showDetectionOverlays": "Show Detection Overlays",
+  "recordings.detectionSensitivity": "Detection Sensitivity",
+  "recordings.timeWindowOne": "Time Window: {count} second",
+  "recordings.timeWindowMany": "Time Window: {count} seconds",
+  "recordings.protectAction": "Protect",
+  "recordings.snapshotDownloadMissingData": "Download failed: No image data available",
+  "recordings.snapshotDownloaded": "Snapshot downloaded successfully",
+  "recordings.downloadFailed": "Download failed: {message}",
+  "recordings.errorShowingVideo": "Error showing video modal: {message}",
+  "recordings.errorShowingSnapshot": "Error showing snapshot preview: {message}",
+  "recordings.selectedRecordingOne": "{count} selected recording",
+  "recordings.selectedRecordingMany": "{count} selected recordings",
+  "recordings.filteredRecordingOne": "{count} filtered recording",
+  "recordings.filteredRecordingMany": "{count} filtered recordings",
+  "recordings.allMatchingRecordings": "all matching recordings",
+  "recordings.batchDeleteCancelled": "Batch delete cancelled",
+  "recordings.confirmBatchDelete": "Confirm Batch Delete",
+  "recordings.actionCannotBeUndone": "This action cannot be undone",
+  "recordings.aboutToPermanentlyDelete": "You are about to permanently delete {description}.",
+  "recordings.batchDeleteIrreversible": "Once started, this operation cannot be cancelled or reversed.",
+  "recordings.deleteDescription": "Delete {description}",
+  "recordings.batchDeleteComplete": "Batch Delete Complete",
+  "recordings.deletingRecordings": "Deleting Recordings…",
+  "recordings.succeededLabel": "Succeeded:",
+  "recordings.failedLabel": "Failed:",
+  "recordings.batchDeleteCannotCancel": "This operation cannot be cancelled once started.",
+  "recordings.pleaseWait": "Please wait…",
+  "recordings.startingDownloadOne": "Starting {count} download…",
+  "recordings.startingDownloadMany": "Starting {count} downloads…",
+  "recordings.zipDownloadStarted": "ZIP download started",
+  "recordings.downloadSelectedRecordings": "Download Selected Recordings",
+  "recordings.recordingSelectedOne": "{count} recording selected",
+  "recordings.recordingSelectedMany": "{count} recordings selected",
+  "recordings.zipArchiveRecommended": "ZIP archive (recommended)",
+  "recordings.zipArchiveHelp": "All files packaged into a single .zip",
+  "recordings.sequentialDownloads": "Sequential downloads",
+  "recordings.sequentialDownloadsHelp": "Each file downloaded separately (browser may block multiple tabs)",
+  "recordings.zipFilename": "ZIP filename",
+  "recordings.buildingZip": "Building ZIP…",
+  "recordings.downloading": "Downloading…",
+  "recordings.working": "Working…",
+  "recordings.tapToRetry": "Tap to retry",
+  "recordings.noTags": "No tags",
+  "recordings.noTagsYet": "No tags yet",
+  "recordings.recordingTagsCount": "Recording Tags ({count} recordings)",
+  "timeline.noSelectedRecordingsVisible": "No selected recordings are visible for this day",
+  "timeline.noRecordingsForDateAndStream": "No recordings found for the selected date and stream",
+  "timeline.noSegmentsToDisplay": "No segments to display",
+  "timeline.recordingTimeline": "Recording timeline",
+  "system.macLabel": "MAC:",
+  "settings.go2rtcOverrideQuarantined": "Override quarantined",
+  "settings.go2rtcRestoreQuarantined": "Restore quarantined version into the editor",
+  "settings.go2rtcValidating": " • validating…",
+  "settings.go2rtcValidationSkipped": "libyaml unavailable — server-side validation skipped",
+  "settings.go2rtcErrorPosition": "Line {line}, col {column}",
+  "settings.go2rtcShowEffectiveConfig": "Show effective config",
+  "settings.go2rtcLoadExample": "Load example…",
+  "settings.go2rtcSupportedSections": "Supported go2rtc sections",
+  "settings.go2rtcEffectiveConfig": "go2rtc effective config (redacted)",
+  "settings.go2rtcLoading": "Loading…",
+  "settings.go2rtcLoadFailed": "Failed to load: {message}",
+  "settings.go2rtcRedactionUnavailable": "libyaml unavailable on the server — secret redaction is SKIPPED. Treat this preview as if it contained your secrets in cleartext.",
+  "settings.go2rtcBaseConfig": "go2rtc.yaml (base)",
+  "settings.go2rtcEmpty": "(empty)",
+  "settings.go2rtcNone": "(none)",
+  "streamsConfig.detectionScheduleHelpShort": "— restrict detection-triggered clips independently",
+  "streamsConfig.detectionScheduleHelp": "External events are still annotated outside these hours, but they will not start a detection clip.",
+  "streamsConfig.inheritGlobalSetting": "-1 = inherit the global setting",
+  "streamsConfig.zonePoints": "({count} points)",
+  "live.navigator.planCameraCounts": "{live}/{total} live · {total} placed",
+  "live.eptzUnavailable": "ePTZ unavailable",
+  "live.pushToTalkShort": "PTT",
+  "live.toggleTalkShort": "TOG",
+  "fleet.location": "Location",
+  "fleet.tags": "Tags",
+  "streamsConfig.zonesLoadFailed": "Failed to load detection zones (HTTP {statusCode}{statusText}). Please try again or contact an administrator.",
+  "streamsConfig.zonesLoadError": "An error occurred while loading detection zones. Details: {errorMessage}",
+  "recordings.inProgress": "In progress",
+  "recordings.noSelectionForDeletion": "No recordings selected for deletion",
+  "recordings.batchDeleteStartFailed": "Failed to start batch delete operation",
+  "recordings.batchDeleteUnavailable": "Batch delete function not available",
+  "recordings.noFilterForDeletion": "No filter specified for deletion",
+  "recordings.serverError": "Server error {status}",
+  "recordings.statusPollFailed": "Status poll failed",
+  "recordings.zipCreationFailed": "ZIP creation failed on server",
+  "recordings.unknownError": "Unknown error",
+  "recordings.protectFailed": "Failed to protect recording",
+  "recordings.unprotectFailed": "Failed to unprotect recording",
+  "live.snapshotVideoUnavailable": "Cannot take snapshot: Video not available",
+  "live.snapshotInvalidDimensions": "Cannot take snapshot: Video not loaded or has invalid dimensions",
+  "live.manualRecordingStarted": "Manual recording started",
+  "live.manualRecordingStopped": "Manual recording stopped",
+  "live.manualRecordingFailed": "Manual recording failed: {message}",
+  "timeline.loadedSelectedSegmentsOneDay": "Loaded {count} selected recording segments across {days} day",
+  "timeline.loadedSelectedSegmentsManyDays": "Loaded {count} selected recording segments across {days} days",
+  "timeline.noRecordingsForSelectedIds": "No recordings found for the selected IDs",
+  "timeline.errorLoadingSelectedRecordings": "Error loading selected recordings: {message}",
+  "timeline.errorLoadingData": "Error loading timeline data: {message}",
+  "timeline.noRecordingsForSelectedDate": "No recordings found for the selected date",
+  "recordings.tagAdded": "Tag \"{tag}\" added",
+  "recordings.tagRemoved": "Tag \"{tag}\" removed",
+  "recordings.tagRemovedFromRecordings": "Tag \"{tag}\" removed from {count} recordings",
+  "recordings.tagAddedToRecordings": "Tag \"{tag}\" added to {count} recordings",
+  "recordings.errorDeletingRecording": "Error deleting recording: {message}",
+  "recordings.errorBatchDelete": "Error in batch delete operation: {message}",
+  "recordings.errorDeleteAll": "Error in delete all operation: {message}",
+  "recordings.recordingMissingId": "Error: Recording has no id property",
+  "recordings.errorSettingTags": "Error setting tags: {message}",
+  "recordings.errorUpdatingTags": "Error updating tags: {message}",
+  "recordings.preparingArchivedRecording": "Preparing archived recording…",
+  "recordings.downloadStarted": "Download started",
+  "recordings.batchDeletePending": "Accepted {succeeded} deletions; {pending} await storage cleanup",
+  "recordings.batchDeletePendingFailures": "; failed to delete {count}",
+  "recordings.batchDeleteSucceededOne": "Successfully deleted {count} recording",
+  "recordings.batchDeleteSucceededMany": "Successfully deleted {count} recordings",
+  "recordings.batchDeleteSucceededFailures": ", but failed to delete {count}",
+  "recordings.batchDeleteFailedOne": "Failed to delete {count} recording",
+  "recordings.batchDeleteFailedMany": "Failed to delete {count} recordings"
 }
diff --git a/web/tests/locale-coverage.spec.js b/web/tests/locale-coverage.spec.js
index 3ce1f926..fc1b16df 100644
--- a/web/tests/locale-coverage.spec.js
+++ b/web/tests/locale-coverage.spec.js
@@ -1,5 +1,6 @@
 import fs from 'node:fs';
 import path from 'node:path';
+import { parse } from '@babel/parser';
 
 const localeDir = path.resolve(__dirname, '../public/locales');
 const readCatalog = (code) => JSON.parse(fs.readFileSync(path.join(localeDir, `${code}.json`), 'utf8'));
@@ -21,6 +22,36 @@ const shortcutKeys = new Set([
   'timeline.inlineHint',
 ]);
 
+test('static translation keys used by the web UI exist in English', () => {
+  const sourceRoot = path.resolve(__dirname, '../js');
+  const sourceFiles = (directory) => fs.readdirSync(directory, { withFileTypes: true }).flatMap((entry) => {
+    const file = path.join(directory, entry.name);
+    return entry.isDirectory() ? sourceFiles(file) : /\.jsx?$/.test(entry.name) ? [file] : [];
+  });
+  const missing = [];
+
+  for (const file of sourceFiles(sourceRoot)) {
+    const source = fs.readFileSync(file, 'utf8');
+    const ast = parse(source, { sourceType: 'module', plugins: ['jsx'] });
+    const visit = (node) => {
+      if (!node || typeof node !== 'object') return;
+      if (Array.isArray(node)) return node.forEach(visit);
+      if (node.type === 'CallExpression' && ['t', 'translate'].includes(node.callee?.name)) {
+        const key = node.arguments?.[0];
+        if (key?.type === 'StringLiteral' && !englishKeySet.has(key.value)) {
+          missing.push(`${path.relative(sourceRoot, file)}: ${key.value}`);
+        }
+      }
+      for (const [property, child] of Object.entries(node)) {
+        if (!['loc', 'start', 'end'].includes(property)) visit(child);
+      }
+    };
+    visit(ast);
+  }
+
+  expect(missing).toEqual([]);
+});
+
 describe('locale catalog coverage', () => {
   for (const { code } of manifest.locales) {
     if (code === 'en') continue;
diff --git a/web/tests/recordingsAPI.spec.js b/web/tests/recordingsAPI.spec.js
index 274166ee..debaa409 100644
--- a/web/tests/recordingsAPI.spec.js
+++ b/web/tests/recordingsAPI.spec.js
@@ -4,6 +4,13 @@ jest.mock('../js/components/preact/ToastContainer.jsx', () => ({
   showStatusMessage: jest.fn()
 }));
 
+jest.mock('../js/i18n.js', () => {
+  const english = require('../public/locales/en.json');
+  return {
+    t: (key, params = {}) => (english[key] || key).replace(/\{([^}]+)\}/g, (_, name) => String(params[name] ?? '')),
+  };
+});
+
 jest.mock('../js/fetch-utils.js', () => ({
   fetchJSON: jest.fn(),
   enhancedFetch: jest.fn()