feat: add i18n (translation/localization) (#16877)

* Translation module init * Add more i18n keys * fix: fix string wrong * refactor: use namespace translation file * chore: add more translation key * fix: fix some page name error * refactor: change Trans tag for t function * chore: fix some key not work * chore: fix SearchFilterDialog i18n key error Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> * chore: fix en i18n file filter missing some keys * chore: add some i18n keys * chore: add more i18n keys again * feat: add search page i18n * feat: add explore model i18n keys * Update web/src/components/menu/GeneralSettings.tsx Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> * Update web/src/components/menu/GeneralSettings.tsx Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> * Update web/src/components/menu/GeneralSettings.tsx Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> * feat: add more live i18n keys * feat: add more search setting i18n keys * fix: remove some comment * fix: fix some setting page url error * Update web/src/views/settings/SearchSettingsView.tsx Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> * fix: add system missing keys * fix: update password update i18n keys * chore: remove outdate translation.json file * fix: fix exploreSettings error * chore: add object setting i18n keys * Update web/src/views/recording/RecordingView.tsx Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> * Update web/public/locales/en/components/filter.json Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> * Update web/src/components/overlay/ExportDialog.tsx Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> * feat: add more i18n keys * fix: fix motionDetectionTuner html node * feat: add more page i18n keys * fix: cameraStream i18n keys error * feat: add Player i18n keys * feat: add more toast i18n keys * feat: change explore setting name * feat: add more document title i18n keys * feat: add more search i18n keys * fix: fix accessDenied i18n keys error * chore: add objectType i18n * chore: add inputWithTags i18n * chore: add SearchFilterDialog i18n * Update web/src/views/settings/ObjectSettingsView.tsx Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> * Update web/src/views/settings/ObjectSettingsView.tsx Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> * Update web/src/views/settings/ObjectSettingsView.tsx Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> * Update web/src/views/settings/ObjectSettingsView.tsx Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> * Update web/src/views/settings/ObjectSettingsView.tsx Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> * chore: add some missing i18n keys * chore: remove most import { t } from "i18next"; --------- Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
2025-09-26 19:41:29 +08:00 · 2025-03-16 23:36:20 +08:00
parent db541abed4
commit d34533981f
150 changed files with 6810 additions and 1927 deletions
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -41,6 +41,8 @@
        "embla-carousel-react": "^8.2.0",
        "framer-motion": "^11.5.4",
        "hls.js": "^1.5.20",
+        "i18next": "^24.2.0",
+        "i18next-http-backend": "^3.0.1",
        "idb-keyval": "^6.2.1",
        "immer": "^10.1.1",
        "konva": "^9.3.18",
@@ -56,6 +58,7 @@
        "react-dom": "^18.3.1",
        "react-grid-layout": "^1.5.0",
        "react-hook-form": "^7.52.1",
+        "react-i18next": "^15.2.0",
        "react-icons": "^5.5.0",
        "react-konva": "^18.2.10",
        "react-router-dom": "^6.26.0",
@@ -192,9 +195,10 @@
      }
    },
    "node_modules/@babel/runtime": {
-      "version": "7.24.4",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.4.tgz",
-      "integrity": "sha512-dkxf7+hn8mFBwKjs9bvBlArzLVxVbS8usaPUDd5p2a9JCL9tB8OaOVN1isD4+Xyk4ns89/xeOmbQvgdK7IIVdA==",
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz",
+      "integrity": "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==",
+      "license": "MIT",
      "dependencies": {
        "regenerator-runtime": "^0.14.0"
      },
@@ -4306,6 +4310,15 @@
        "toggle-selection": "^1.0.6"
      }
    },
+    "node_modules/cross-fetch": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-4.0.0.tgz",
+      "integrity": "sha512-e4a5N8lVvuLgAWgnCrLr2PP0YyDOTHa9H/Rj54dirp61qXnNq46m82bRhNqIA5VccJtWBvPTFRV3TtvHUKPB1g==",
+      "license": "MIT",
+      "dependencies": {
+        "node-fetch": "^2.6.12"
+      }
+    },
    "node_modules/cross-spawn": {
      "version": "7.0.3",
      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -5427,6 +5440,15 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "license": "MIT",
+      "dependencies": {
+        "void-elements": "3.1.0"
+      }
+    },
    "node_modules/http-proxy-agent": {
      "version": "7.0.2",
      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
@@ -5455,6 +5477,46 @@
        "node": ">= 14"
      }
    },
+    "node_modules/i18next": {
+      "version": "24.2.0",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-24.2.0.tgz",
+      "integrity": "sha512-ArJJTS1lV6lgKH7yEf4EpgNZ7+THl7bsGxxougPYiXRTJ/Fe1j08/TBpV9QsXCIYVfdE/HWG/xLezJ5DOlfBOA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://locize.com"
+        },
+        {
+          "type": "individual",
+          "url": "https://locize.com/i18next.html"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2"
+      },
+      "peerDependencies": {
+        "typescript": "^5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/i18next-http-backend": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/i18next-http-backend/-/i18next-http-backend-3.0.1.tgz",
+      "integrity": "sha512-XT2lYSkbAtDE55c6m7CtKxxrsfuRQO3rUfHzj8ZyRtY9CkIX3aRGwXGTkUhpGWce+J8n7sfu3J0f2wTzo7Lw0A==",
+      "license": "MIT",
+      "dependencies": {
+        "cross-fetch": "4.0.0"
+      }
+    },
    "node_modules/idb-keyval": {
      "version": "6.2.1",
      "resolved": "https://registry.npmjs.org/idb-keyval/-/idb-keyval-6.2.1.tgz",
@@ -6359,6 +6421,48 @@
        "react-dom": "^16.8 || ^17 || ^18"
      }
    },
+    "node_modules/node-fetch": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
+      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/node-fetch/node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
+      "license": "MIT"
+    },
+    "node_modules/node-fetch/node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/node-fetch/node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "license": "MIT",
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
    "node_modules/node-releases": {
      "version": "2.0.18",
      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz",
@@ -7151,6 +7255,28 @@
        "react": "^16.8.0 || ^17 || ^18 || ^19"
      }
    },
+    "node_modules/react-i18next": {
+      "version": "15.2.0",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-15.2.0.tgz",
+      "integrity": "sha512-iJNc8111EaDtVTVMKigvBtPHyrJV+KblWG73cUxqp+WmJCcwkzhWNFXmkAD5pwP2Z4woeDj/oXDdbjDsb3Gutg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.25.0",
+        "html-parse-stringify": "^3.0.1"
+      },
+      "peerDependencies": {
+        "i18next": ">= 23.2.3",
+        "react": ">= 16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/react-icons": {
      "version": "5.5.0",
      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
@@ -8455,7 +8581,7 @@
      "version": "5.8.2",
      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.2.tgz",
      "integrity": "sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==",
-      "dev": true,
+      "devOptional": true,
      "license": "Apache-2.0",
      "bin": {
        "tsc": "bin/tsc",
@@ -8881,6 +9007,15 @@
        }
      }
    },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/vscode-jsonrpc": {
      "version": "8.2.0",
      "resolved": "https://registry.npmjs.org/vscode-jsonrpc/-/vscode-jsonrpc-8.2.0.tgz",
--- a/web/package.json
+++ b/web/package.json
@@ -47,6 +47,8 @@
    "embla-carousel-react": "^8.2.0",
    "framer-motion": "^11.5.4",
    "hls.js": "^1.5.20",
+    "i18next": "^24.2.0",
+    "i18next-http-backend": "^3.0.1",
    "idb-keyval": "^6.2.1",
    "immer": "^10.1.1",
    "konva": "^9.3.18",
@@ -62,6 +64,7 @@
    "react-dom": "^18.3.1",
    "react-grid-layout": "^1.5.0",
    "react-hook-form": "^7.52.1",
+    "react-i18next": "^15.2.0",
    "react-icons": "^5.5.0",
    "react-konva": "^18.2.10",
    "react-router-dom": "^6.26.0",
--- a/web/public/locales/en/audio.json
+++ b/web/public/locales/en/audio.json
@@ -0,0 +1,8 @@
+{
+  "crying": "Crying",
+  "laughter": "Laughter",
+  "scream": "Scream",
+  "speech": "Speech",
+  "yell": "Yell",
+  "fire_alarm": "Fire alarm"
+}
--- a/web/public/locales/en/common.json
+++ b/web/public/locales/en/common.json
@@ -0,0 +1,173 @@
+{
+  "time": {
+    "untilForTime": "Until {{time}}",
+    "untilForRestart": "Until Frigate restarts.",
+    "untilRestart": "Until restart",
+    "ago": "{{timeAgo}} ago",
+    "justNow": "Just now",
+    "today": "Today",
+    "yesterday": "Yesterday",
+    "last7": "Last 7 days",
+    "last14": "Last 14 days",
+    "last30": "Last 30 days",
+    "thisWeek": "This Week",
+    "lastWeek": "Last Week",
+    "thisMonth": "This Month",
+    "lastMonth": "Last Month",
+    "5minutes": "5 minutes",
+    "10minutes": "10 minutes",
+    "30minutes": "30 minutes",
+    "1hour": "1 hour",
+    "12hours": "12 hours",
+    "24hours": "24 hours",
+    "pm": "pm",
+    "am": "am",
+    "yr": "{{time}}yr",
+    "year": "{{time}} years",
+    "mo": "{{time}}mo",
+    "month": "{{time}} months",
+    "d": "{{time}}d",
+    "day": "{{time}} days",
+    "h": "{{time}}h",
+    "hour": "{{time}} hours",
+    "m": "{{time}}m",
+    "minute": "{{time}} minutes",
+    "s": "s",
+    "second": "{{time}} seconds",
+    "formattedTimestamp": "%b %-d, %I:%M:%S %p",
+    "formattedTimestamp.24hour": "%b %-d, %H:%M:%S",
+    "formattedTimestamp2": "%m/%d %I:%M:%S%P",
+    "formattedTimestamp2.24hour": "%d %b %H:%M:%S",
+    "formattedTimestampExcludeSeconds": "%b %-d, %I:%M %p",
+    "formattedTimestampExcludeSeconds.24hour": "%b %-d, %H:%M",
+    "formattedTimestampWithYear": "%b %-d %Y, %I:%M %p",
+    "formattedTimestampWithYear.24hour": "%b %-d %Y, %H:%M",
+    "formattedTimestampOnlyMonthAndDay": "%b %-d"
+  },
+  "unit": {
+    "speed": {
+      "mph": "mph",
+      "kph": "kph"
+    }
+  },
+  "label": {
+    "back": "Go back"
+  },
+  "button": {
+    "apply": "Apply",
+    "reset": "Reset",
+    "enabled": "Enabled",
+    "enable": "Enable",
+    "disabled": "Disabled",
+    "disable": "Disable",
+    "save": "Save",
+    "saving": "Saving...",
+    "cancel": "Cancel",
+    "close": "Close",
+    "copy": "Copy",
+    "back": "Back",
+    "history": "History",
+    "fullscreen": "Fullscreen",
+    "exitFullscreen": "Exit Fullscreen",
+    "pictureInPicture": "Picture in Picture",
+    "on": "ON",
+    "off": "OFF",
+    "edit": "Edit",
+    "copyCoordinates": "Copy coordinates",
+    "delete": "Delete",
+    "yes": "Yes",
+    "no": "No",
+    "download": "Download",
+    "info": "Info",
+    "suspended": "Suspended",
+    "unsuspended": "Unsuspend",
+    "play": "Play",
+    "unselect": "Unselect",
+    "export": "Export",
+    "deleteNow": "Delete Now"
+  },
+  "menu": {
+    "system": "System",
+    "systemMetrics": "System metrics",
+    "configuration": "Configuration",
+    "systemLogs": "System logs",
+    "settings": "Settings",
+    "configurationEditor": "Configuration Editor",
+    "languages": "Languages",
+    "language": {
+      "en": "English",
+      "zhCN": "简体中文(Simplified Chinese)",
+      "withSystem.label": "Use the system settings for languag"
+    },
+    "appearance": "Appearance",
+    "darkMode": {
+      "label": "Dark Mode",
+      "light": "Light",
+      "dark": "Dark",
+      "withSystem.label": "Use the system settings for light or dark mode"
+    },
+    "withSystem": "System",
+    "theme": {
+        "label": "Theme",
+        "blue": "Blue",
+        "green": "Green",
+        "nord": "Nord",
+        "red": "Red",
+        "contrast": "High Contrast",
+        "default": "Default"
+    },
+    "help": "Help",
+    "documentation.label": "Frigate documentation",
+    "documentation": "Documentation",
+    "restart": "Restart Frigate",
+    "live": "Live",
+    "live.allCameras": "All Cameras",
+    "live.cameras": "Cameras",
+    "live.cameras.count_one": "{{count}} Camera",
+    "live.cameras.count_other": "{{count}} Cameras",
+    "review": "Review",
+    "explore": "Explore",
+    "export": "Export",
+    "uiPlayground": "UI Playground",
+    "faceLibrary": "Face Library",
+    "user": {
+      "account": "Account",
+      "current": "Current User: {{user}}",
+      "anonymous": "anonymous",
+      "logout": "Logout",
+      "setPassword": "Set Password"
+    }
+  },
+  "toast": {
+    "copyUrlToClipboard": "Copied URL to clipboard.",
+    "save": {
+      "error": "Failed to save config changes: {{errorMessage}}",
+      "error.noMessage": "Failed to save config changes"
+    }
+  },
+  "role": {
+    "title": "Role",
+    "admin": "Admin",
+    "viewer": "Viewer",
+    "desc": "Admins have full access to all features in the Frigate UI. Viewers are limited to viewing cameras, review items, and historical footage in the UI."
+  },
+  "pagination": {
+    "label": "pagination",
+    "previous": "Previous",
+    "previous.label": "Go to previous page",
+    "next": "Next",
+    "next.label": "Go to next page",
+    "more": "More pages"
+  },
+  "accessDenied": {
+    "documentTitle": "Access Denied - Frigate",
+    "title": "Access Denied",
+    "desc": "You don't have permission to view this page."
+  },
+  "notFound": {
+    "documentTitle": "Not Found - Frigate",
+    "title": "404",
+    "desc": "Page not found"
+  },
+  "selectItem": "Select {{item}}"
+}
--- a/web/public/locales/en/components/auth.json
+++ b/web/public/locales/en/components/auth.json
@@ -0,0 +1,15 @@
+{
+    "form": {
+        "user": "Username",
+        "password": "Password",
+        "login": "Login",
+        "errors": {
+            "usernameRequired": "Username is required",
+            "passwordRequired": "Password is required",
+            "rateLimit": "Exceeded rate limit. Try again later.",
+            "loginFailed": "Login failed",
+            "unknownError": "Unknown error. Check logs.",
+            "webUnkownError": "Unknown error. Check console logs."
+        }
+    }
+}
--- a/web/public/locales/en/components/camera.json
+++ b/web/public/locales/en/components/camera.json
@@ -0,0 +1,77 @@
+{
+  "group": {
+    "label": "Camera Groups",
+    "add": "Add camera groups",
+    "edit": "Edit camera groups",
+    "delete": {
+      "label": "Delete Camera Group",
+      "confirm": "Confirm Delete",
+      "confirm.desc": "Are you sure you want to delete the camera group <em>{{name}}</em>?"
+    },
+    "name": {
+      "label": "Name",
+      "placeholder": "Enter a name...",
+      "error": {
+        "mustLeastCharacters": "Camera group name must be at least 2 characters.",
+        "exists": "Camera group name already exists.",
+        "nameMustNotPeriod": "Camera group name must not contain a period.",
+        "invalid": "Invalid camera group name."
+      }
+    },
+    "cameras": {
+      "label": "Cameras",
+      "desc": "Select cameras for this group."
+    },
+    "icon": "Icon",
+    "success": "Camera group ({{name}}) has been saved.",
+    "camera": {
+      "setting": {
+        "label": "Camera Streaming Settings",
+        "title": "{{cameraName}} Streaming Settings",
+        "desc": "Change the live streaming options for this camera group's dashboard. <em>These settings are device/browser-specific.</em>",
+        "audioIsAvailable": "Audio is available for this stream",
+        "audioIsUnavailable": "Audio is available for this stream",
+        "audio": {
+          "tips": "Audio must be output from your camera and configured in go2rtc for this stream.",
+          "tips.document": "Read the documentation "
+        },
+        "streamMethod": {
+          "label": "Streaming Method",
+          "method": {
+            "noStreaming": {
+              "label": "No Streaming",
+              "desc": "Camera images will only update once per minute and no live streaming will occur."
+            },
+            "smartStreaming": {
+              "label": "Smart Streaming (recommended)",
+              "desc": "Smart streaming will update your camera image once per minute when no detectable activity is occurring to conserve bandwidth and resources. When activity is detected, the image seamlessly switches to a live stream."
+            },
+            "continuousStreaming": {
+              "label": "Continuous Streaming",
+              "desc": "Camera image will always be a live stream when visible on the dashboard, even if no activity is being detected.",
+              "desc.warning": "Continuous streaming may cause high bandwidth usage and performance issues. Use with caution."
+            }
+          }
+        },
+        "compatibilityMode": {
+          "label": "Compatibility mode",
+          "desc": "Enable this option only if your camera's live stream is displaying color artifacts and has a diagonal line on the right side of the image."
+        }
+      }
+    }
+  },
+  "debug": {
+    "options": {
+      "label": "Settings",
+      "title": "Options",
+      "showOptions": "Show Options",
+      "hideOptions": "Hide Options"
+    },
+    "boundingBox": "Bounding Box",
+    "timestamp": "Timestamp",
+    "zones": "Zones",
+    "mask": "Mask",
+    "motion": "Motion",
+    "regions": "Regions"
+  }
+}
--- a/web/public/locales/en/components/dialog.json
+++ b/web/public/locales/en/components/dialog.json
@@ -0,0 +1,96 @@
+{
+  "restart": {
+    "title": "Are you sure you want to restart Frigate?",
+    "button": "Restart",
+    "restarting": {
+      "title": "Frigate is Restarting",
+      "content": "This page will reload in {{countdown}} seconds.",
+      "button": "Force Reload Now"
+    }
+  },
+  "explore": {
+    "plus": {
+      "submitToPlus": {
+        "label": "Submit To Frigate+",
+        "desc": "Objects in locations you want to avoid are not false positives. Submitting them as false positives will confuse the model."
+      },
+      "review": {
+        "true.label": "Confirm this label for Frigate Plus",
+        "true_one": "This is a {{label}}",
+        "true_other": "This is an {{label}}",
+        "false_one": "This is not a {{label}}",
+        "false_other": "This is not an {{label}}",
+        "false.label": "Do not confirm this label for Frigate Plus",
+        "state.submitted": "Submitted"
+      }
+    },
+    "video": {
+      "viewInHistory": "View in History"
+    }
+  },
+  "export": {
+    "time": {
+      "fromTimeline": "Select from Timeline",
+      "lastHour_one": "Last Hour",
+      "lastHour_other": "Last {{count}} Hours",
+      "custom": "Custom",
+      "start": "Start Time",
+      "start.label": "Select Start Time",
+      "end": "End Time",
+      "end.label": "Select End Time"
+    },
+    "name": {
+      "placeholder": "Name the Export"
+    },
+    "select": "Select",
+    "export": "Export",
+    "selectOrExport": "Select or Export",
+    "toast": {
+      "success": "Successfully started export. View the file in the /exports folder.",
+      "error": {
+        "failed": "Failed to start export: {{error}}",
+        "endTimeMustAfterStartTime": "End time must be after start time",
+        "noVaildTimeSelected": "No valid time range selected"
+      }
+    },
+    "fromTimeline": {
+      "saveExport": "Save Export",
+      "previewExport": "Preview Export"
+    }
+  },
+  "streaming": {
+    "label": "Stream",
+    "restreaming": {
+      "NotEnabled": "Restreaming is not enabled for this camera.",
+      "desc": "Set up go2rtc for additional live view options and audio for this camera.",
+      "desc.readTheDocumentation": "Read the documentation "
+    },
+    "showStats": {
+      "label": "Show stream stats",
+      "desc": "Enable this option to show stream statistics as an overlay on the camera feed."
+    },
+    "debugView": "Debug View"
+  },
+  "search": {
+    "saveSearch": {
+      "label": "Save Search",
+      "desc": "Provide a name for this saved search.",
+      "placeholder": "Enter a name for your search",
+      "overwrite": "{{searchName}} already exists. Saving will overwrite the existing value.",
+      "success": "Search ({{searchName}}) has been saved.",
+      "button.save.label": "Save this search"
+    }
+  },
+  "recording": {
+    "confirmDelete": {
+      "title": "Confirm Delete",
+      "desc": "Are you sure you want to delete all recorded video associated with this review item?<br /><br />Hold the <em>Shift</em> key to bypass this dialog in the future.",
+      "desc.selected": "Are you sure you want to delete all recorded video associated with this review item?<br /><br />Hold the <em>Shift</em> key to bypass this dialog in the future."
+    },
+    "button": {
+      "export": "Export",
+      "markAsReviewed": "Mark as reviewed",
+      "deleteNow": "Delete Now"
+    }
+  }
+}
--- a/web/public/locales/en/components/filter.json
+++ b/web/public/locales/en/components/filter.json
@@ -0,0 +1,108 @@
+{
+  "filter": "Filter",
+  "labels": {
+    "label": "Labels",
+    "all": "All Labels",
+    "all.short": "Labels",
+    "count": "{{count}} Labels"
+  },
+  "zones": {
+    "all": "All Zones",
+    "all.short": "Zones"
+  },
+  "dates": {
+    "all": "All Dates",
+    "all.short": "Dates"
+  },
+  "more": "More Filters",
+  "reset.label": "Reset filters to default values",
+  "timeRange": "Time Range",
+  "zones.label": "Zones",
+  "subLabels": {
+    "label": "Sub Labels",
+    "all": "All Sub Labels"
+  },
+  "score": "Score",
+  "estimatedSpeed": "Estimated Speed ({{unit}})",
+  "features": {
+    "label": "Features",
+    "hasSnapshot": "Has a snapshot",
+    "hasVideoClip": "Has a video clip",
+    "submittedToFrigatePlus": {
+      "label": "Submitted to Frigate+",
+      "tips": "You must first filter on tracked objects that have a snapshot.<br /><br />Tracked objects without a snapshot cannot be submitted to Frigate+."
+    }
+  },
+  "sort": {
+    "label": "Sort",
+    "dateAsc": "Date (Ascending)",
+    "dateDesc": "Date (Descending)",
+    "scoreAsc": "Object Score (Ascending)",
+    "scoreDesc": "Object Score (Descending)",
+    "speedAsc": "Estimated Speed (Ascending)",
+    "speedDesc": "Estimated Speed (Descending)",
+    "relevance": "Relevance"
+  },
+  "cameras": {
+    "label": "Cameras Filter",
+    "all": "All Cameras",
+    "all.short": "Cameras"
+  },
+  "review": {
+    "showReviewed": "Show Reviewed"
+  },
+  "motion": {
+    "showMotionOnly": "Show Motion Only"
+  },
+  "explore": {
+    "settings": {
+      "title": "Settings",
+      "defaultView": "Default View",
+      "defaultView.desc": "When no filters are selected, display a summary of the most recent tracked objects per label, or display an unfiltered grid.",
+      "defaultView.summary": "Summary",
+      "defaultView.unfilteredGrid": "Unfiltered Grid",
+      "gridColumns": "Grid Columns",
+      "gridColumns.desc": "Select the number of columns in the grid view.",
+      "searchSource": {
+        "label": "Search Source",
+        "desc": "Choose whether to search the thumbnails or descriptions of your tracked objects.",
+        "options": {
+          "thumbnailImage": "Thumbnail Image",
+          "description": "Description"
+        }
+      }
+    },
+    "date": {
+      "selectDateBy": {
+        "label": "Select a date to filter by"
+      }
+    }
+  },
+  "logSettings": {
+    "label": "Filter log level",
+    "filterBySeverity": "Filter logs by severity",
+    "loading": "Loading",
+    "loading.desc": "When the log pane is scrolled to the bottom, new logs automatically stream as they are added.",
+    "disableLogStreaming": "Disable log streaming",
+    "allLogs": "All logs"
+  },
+  "trackedObjectDelete": {
+    "title": "Confirm Delete",
+    "desc": "Deleting these {{objectLength}} tracked objects removes the snapshot, any saved embeddings, and any associated object lifecycle entries. Recorded footage of these tracked objects in History view will <em>NOT</em> be deleted.<br /><br />Are you sure you want to proceed?<br /><br />Hold the <em>Shift</em> key to bypass this dialog in the future.",
+    "toast": {
+      "success": "Tracked objects deleted successfully.",
+      "error": "Failed to delete tracked objects: {{errorMessage}}"
+    }
+  },
+  "zoneMask": {
+    "filterBy": "Filter by zone mask"
+  },
+  "recognizedLicensePlates": {
+    "title": "Recognized License Plates",
+    "loadFailed": "Failed to load recognized license plates.",
+    "loading": "Loading recognized license plates...",
+    "placeholder": "Type to search license plates...",
+    "noLicensePlatesFound": "No license plates found.",
+    "selectPlatesFromList": "Select one or more plates from the list."
+  }
+}
--- a/web/public/locales/en/components/icons.json
+++ b/web/public/locales/en/components/icons.json
@@ -0,0 +1,8 @@
+{
+    "iconPicker": {
+        "selectIcon": "Select an icon",
+        "search": {
+            "placeholder": "Search for an icon..."
+        }
+    }
+}
--- a/web/public/locales/en/components/input.json
+++ b/web/public/locales/en/components/input.json
@@ -0,0 +1,10 @@
+{
+    "button": {
+        "downloadVideo": {
+            "label": "Download Video",
+            "toast": {
+                "success": "Your review item video has started downloading."
+            }
+        }
+    }
+}
--- a/web/public/locales/en/components/player.json
+++ b/web/public/locales/en/components/player.json
@@ -0,0 +1,39 @@
+{
+    "noRecordingsFoundForThisTime": "No recordings found for this time",
+    "noPreviewFound": "No Preview Found",
+    "noPreviewFoundFor": "No Preview Found for {{cameraName}}",
+    "submitFrigatePlus": {
+        "title": "Submit this frame to Frigate+?",
+        "submit": "Submit"
+    },
+    "livePlayerRequiredIOSVersion": "iOS 17.1 or greater is required for this live stream type.",
+    "streamOffline": {
+        "title": "Stream Offline",
+        "desc": "No frames have been received on the {{cameraName}} <code>detect</code> stream, check error logs"
+    },
+    "cameraDisabled": "Camera is disabled",
+    "stats": {
+        "streamType": "Stream Type:",
+        "streamType.short": "Type",
+        "bandwidth": "Bandwidth:",
+        "bandwidth.short": "Bandwidth",
+        "latency": "Latency:",
+        "latency.short": "Latency",
+        "latency.value": "{{secounds}} seconds",
+        "latency.short.value": "{{secounds}} sec",
+        "totalFrames": "Total Frames:",
+        "droppedFrames": "Dropped Frames:",
+        "droppedFrames.short": "Dropped",
+        "droppedFrames.short.value": "{{droppedFrames}} frames",
+        "decodedFrames": "Decoded Frames:",
+        "droppedFrameRate": "Dropped Frame Rate:"
+    },
+    "toast": {
+        "success": {
+            "submittedFrigatePlus": "Successfully submitted frame to Frigate+"
+        },
+        "error": {
+            "submitFrigatePlusFailed": "Failed to submit frame to Frigate+"
+        }
+    }
+}
--- a/web/public/locales/en/objects.json
+++ b/web/public/locales/en/objects.json
@@ -0,0 +1,104 @@
+{
+  "person": "Person",
+  "bicycle": "Bicycle",
+  "car": "Car",
+  "motorcycle": "Motorcycle",
+  "airplane": "Airplane",
+  "bus": "Bus",
+  "train": "Train",
+  "boat": "Boat",
+  "traffic_light": "Traffic Light",
+  "fire_hydrant": "Fire Hydrant",
+  "street_sign": "Street Sign",
+  "stop_sign": "Stop Sign",
+  "parking_meter": "Parking Meter",
+  "bench": "Bench",
+  "bird": "Bird",
+  "cat": "Cat",
+  "dog": "Dog",
+  "horse": "Horse",
+  "sheep": "Sheep",
+  "cow": "Cow",
+  "elephant": "Elephant",
+  "bear": "Bear",
+  "zebra": "Zebra",
+  "giraffe": "Giraffe",
+  "hat": "Hat",
+  "backpack": "Backpack",
+  "umbrella": "Umbrella",
+  "shoe": "Shoe",
+  "eye_glasses": "Eye Glasses",
+  "handbag": "Handbag",
+  "tie": "Tie",
+  "suitcase": "Suitcase",
+  "frisbee": "Frisbee",
+  "skis": "Skis",
+  "snowboard": "Snowboard",
+  "sports_ball": "Sports Ball",
+  "kite": "Kite",
+  "baseball_bat": "Baseball Bat",
+  "baseball_glove": "Baseball Glove",
+  "skateboard": "Skateboard",
+  "surfboard": "Surfboard",
+  "tennis_racket": "Tennis Racket",
+  "bottle": "Bottle",
+  "plate": "Plate",
+  "wine_glass": "Wine Glass",
+  "cup": "Cup",
+  "fork": "Fork",
+  "knife": "Knife",
+  "spoon": "Spoon",
+  "bowl": "Bowl",
+  "banana": "Banana",
+  "apple": "Apple",
+  "sandwich": "Sandwich",
+  "orange": "Orange",
+  "broccoli": "Broccoli",
+  "carrot": "Carrot",
+  "hot_dog": "Hot Dog",
+  "pizza": "Pizza",
+  "donut": "Donut",
+  "cake": "Cake",
+  "chair": "Chair",
+  "couch": "Couch",
+  "potted_plant": "Potted Plant",
+  "bed": "Bed",
+  "mirror": "Mirror",
+  "dining_table": "Dining Table",
+  "window": "Window",
+  "desk": "Desk",
+  "toilet": "Toilet",
+  "door": "Door",
+  "tv": "TV",
+  "laptop": "Laptop",
+  "mouse": "Mouse",
+  "remote": "Remote",
+  "keyboard": "Keyboard",
+  "cell_phone": "Cell Phone",
+  "microwave": "Microwave",
+  "oven": "Oven",
+  "toaster": "Toaster",
+  "sink": "Sink",
+  "refrigerator": "Refrigerator",
+  "blender": "Blender",
+  "book": "Book",
+  "clock": "Clock",
+  "vase": "Vase",
+  "scissors": "Scissors",
+  "teddy_bear": "Teddy Bear",
+  "hair_dryer": "Hair Dryer",
+  "toothbrush": "Toothbrush",
+  "hair_brush": "Hair Brush",
+  "vehicle": "Vehicle",
+  "squirrel": "Squirrel",
+  "deer": "Deer",
+  "animal": "Animal",
+  "bark": "Bark",
+  "fox": "Fox",
+  "goat": "Goat",
+  "rabbit": "Rabbit",
+  "raccoon": "Raccoon",
+  "robot_lawnmower": "Robot Lawnmower",
+  "waste_bin": "Waste bin",
+  "on_demand": "On_demand"
+}
--- a/web/public/locales/en/views/configEditor.json
+++ b/web/public/locales/en/views/configEditor.json
@@ -0,0 +1,16 @@
+{
+    "documentTitle": "Config Editor - Frigate",
+    "configEditor": "Config Editor",
+    "copyConfig": "Copy Config",
+    "saveAndRestart": "Save & Restart",
+    "saveOnly": "Save Only",
+    "toast": {
+        "success": {
+            "copyToClipboard": "Config copied to clipboard."
+        },
+        "error": {
+            "savingError": "Error saving config"
+        }
+        
+    }
+}
--- a/web/public/locales/en/views/events.json
+++ b/web/public/locales/en/views/events.json
@@ -0,0 +1,35 @@
+{
+  "alerts": "Alerts",
+  "detections": "Detections",
+  "motion": {
+    "label": "Motion",
+    "only": "Motion only"
+  },
+  "allCameras": "All Cameras",
+  "empty": {
+    "alert": "There are no alerts to review",
+    "detection": "There are no detections to review",
+    "motion": "No motion data found"
+  },
+  "timeline": "Timeline",
+  "timeline.aria": "Select timeline",
+  "events": {
+    "label": "Events",
+    "aria": "Select events",
+    "noFoundForTimePeriod": "No events found for this time period."
+  },
+  "documentTitle": "Review - Frigate",
+  "recordings": {
+    "documentTitle": "Recordings - Frigate"
+  },
+  "calendarFilter": {
+    "last24Hours": "Last 24 Hours"
+  },
+  "markAsReviewed": "Mark as Reviewed",
+  "markTheseItemsAsReviewed": "Mark these items as reviewed",
+  "newReviewItems": {
+    "label": "View new review items",
+    "button": "New Items To Review"
+  },
+  "camera": "Camera"
+}
--- a/web/public/locales/en/views/explore.json
+++ b/web/public/locales/en/views/explore.json
@@ -0,0 +1,176 @@
+{
+  "documentTitle": "Explore - Frigate",
+  "generativeAI": "Generative AI",
+  "exploreIsUnavailable": {
+    "title": "Explore is Unavailable",
+    "embeddingsReindexing": {
+      "context": "Explore can be used after tracked object embeddings have finished reindexing.",
+      "startingUp": "Starting up...",
+      "estimatedTime": "Estimated time remaining:",
+      "finishingShortly": "Finishing shortly",
+      "step": {
+        "thumbnailsEmbedded": "Thumbnails embedded: ",
+        "descriptionsEmbedded": "Descriptions embedded: ",
+        "trackedObjectsProcessed": "Tracked objects processed: "
+      }
+    },
+    "downloadingModels": {
+      "context": "Frigate is downloading the necessary embeddings models to support the Semantic Search feature. This may take several minutes depending on the speed of your network connection.",
+      "setup": {
+        "visionModel": "Vision model",
+        "visionModelFeatureExtractor": "Vision model feature extractor",
+        "textModel": "Text model",
+        "textTokenizer": "Text tokenizer"
+      },
+      "tips": {
+        "context": "You may want to reindex the embeddings of your tracked objects once the models are downloaded.",
+        "documentation": "Read the documentation"
+      },
+      "error": "An error has occurred. Check Frigate logs."
+    }
+  },
+  "trackedObjectDetails": "Tracked Object Details",
+  "type": {
+    "details": "details",
+    "snapshot": "snapshot",
+    "video": "video",
+    "object_lifecycle": "object lifecycle"
+  },
+  "objectLifecycle": {
+    "title": "Object Lifecycle",
+    "noImageFound": "No image found for this timestamp.",
+    "createObjectMask": "Create Object Mask",
+    "adjustAnnotationSettings": "Adjust annotation settings",
+    "scrollViewTips": "Scroll to view the significant moments of this object's lifecycle.",
+    "autoTrackingTips": "Bounding box positions will be inaccurate for autotracking cameras.",
+    "lifecycleItemDesc": {
+      "visible": "{{label}} detected",
+      "entered_zone": "{{label}} entered {{zones}}",
+      "active": "{{label}} became active",
+      "stationary": "{{label}} became stationary",
+      "attribute": {
+        "faceOrLicense_plate": "{{attribute}} detected for {{label}}",
+        "other": "{{label}} recognized as {{attribute}}"
+      },
+      "gone": "{{label}} left",
+      "heard": "{{label}} heard",
+      "external": "{{label}} detected"
+    },
+    "annotationSettings": {
+      "title": "Annotation Settings",
+      "showAllZones": "Show All Zones",
+      "showAllZones.desc": "Always show zones on frames where objects have entered a zone.",
+      "offset": {
+        "label": "Annotation Offset",
+        "desc": "This data comes from your camera's detect feed but is overlayed on images from the the record feed. It is unlikely that the two streams are perfectly in sync. As a result, the bounding box and the footage will not line up perfectly. However, the <code>annotation_offset</code> field can be used to adjust this.",
+        "documentation": "Read the documentation ",
+        "millisecondsToOffset": "Milliseconds to offset detect annotations by. <em>Default: 0</em>",
+        "tips": "TIP: Imagine there is an event clip with a person walking from left to right. If the event timeline bounding box is consistently to the left of the person then the value should be decreased. Similarly, if a person is walking from left to right and the bounding box is consistently ahead of the person then the value should be increased."
+      }
+    },
+    "carousel": {
+      "previous": "Previous slide",
+      "next": "Next slide"
+    }
+  },
+  "details": {
+    "item": {
+      "title": "Review Item Details",
+      "desc": "Review item details",
+      "button": {
+        "share": "Share this review item",
+        "viewInExplore": "View in Explore"
+      },
+      "tips": {
+        "mismatch_one": "{{count}} unavailable object was detected and included in this review item. Those objects either did not qualify as an alert or detection or have already been cleaned up/deleted.",
+        "mismatch_other": "{{count}} unavailable objects were detected and included in this review item. Those objects either did not qualify as an alert or detection or have already been cleaned up/deleted.",
+        "hasMissingObjects": "Adjust your configuration if you want Frigate to save tracked objects for the following labels: <em>{{objects}}</em>"
+      },
+      "toast": {
+        "success": {
+          "regenerate": "A new description has been requested from {{provider}}. Depending on the speed of your provider, the new description may take some time to regenerate.",
+          "updatedSublabel": "Successfully updated sub label."
+        },
+        "error": {
+          "regenerate": "Failed to call {{provider}} for a new description: {{errorMessage}}",
+          "updatedSublabelFailed": "Failed to update sub label: {{errorMessage}}"
+        }
+      }
+
+    },
+    "label": "Label",
+    "editSubLable": "Edit sub label",
+    "editSubLable.desc": "Enter a new sub label for this {{label}}",
+    "editSubLable.desc.noLabel": "Enter a new sub label for this tracked object",
+    "topScore": "Top Score",
+    "topScore.info": "The top score is the highest median score for the tracked object, so this may differ from the score shown on the search result thumbnail.",
+    "estimatedSpeed": "Estimated Speed",
+    "objects": "Objects",
+    "camera": "Camera",
+    "zones": "Zones",
+    "timestamp": "Timestamp",
+    "button": {
+      "findSimilar": "Find Similar"
+    },
+    "description": {
+      "label": "Description",
+      "placeholder": "Description of the tracked object",
+      "aiTips": "Frigate will not request a description from your Generative AI provider until the tracked object's lifecycle has ended."
+    },
+    "button.regenerate": "Regenerate",
+    "button.regenerate.label": "Regenerate tracked object description",
+    "expandRegenerationMenu": "Expand regeneration menu",
+    "regenerateFromSnapshot": "Regenerate from Snapshot",
+    "regenerateFromThumbnails": "Regenerate from Thumbnails",
+    "tips": {
+      "descriptionSaved": "Successfully saved description",
+      "saveDescriptionFailed": "Failed to update the description: {{errorMessage}}"
+    }
+  },
+  "itemMenu": {
+    "downloadVideo": {
+      "label": "Download video",
+      "aria": "Download video"
+    },
+    "downloadSnapshot": {
+      "label": "Download snapshot",
+      "aria": "Download snapshot"
+    },
+    "viewObjectLifecycle": {
+      "label": "View object lifecycle",
+      "aria": "Show the object lifecycle"
+    },
+    "findSimilar": {
+      "label": "Find similar",
+      "aria": "Find similar tracked objects"
+    },
+    "submitToPlus": {
+      "label": "Submit to Frigate+",
+      "aria": "Submit to Frigate Plus"
+    },
+    "viewInHistory": {
+      "label": "View in History",
+      "aria": "View in History"
+    },
+    "deleteTrackedObject": {
+      "label": "Delete this tracked object"
+    }
+  },
+  "dialog": {
+    "confirmDelete": {
+      "title": "Confirm Delete",
+      "desc": "Deleting this tracked object removes the snapshot, any saved embeddings, and any associated object lifecycle entries. Recorded footage of this tracked object in History view will <em>NOT</em> be deleted.<br /><br />Are you sure you want to proceed?"
+    }
+  },
+  "noTrackedObjects": "No Tracked Objects Found",
+  "fetchingTrackedObjectsFailed": "Error fetching tracked objects: {{errorMessage}}",
+  "trackedObjectsCount": "{{count}} tracked objects ",
+  "searchResult": {
+    "deleteTrackedObject": {
+      "toast": {
+        "success": "Tracked object deleted successfully.",
+        "error": "Failed to delete tracked object: {{errorMessage}}"
+      }
+    }
+  }
+}
--- a/web/public/locales/en/views/exports.json
+++ b/web/public/locales/en/views/exports.json
@@ -0,0 +1,18 @@
+{
+    "documentTitle": "Export - Frigate",
+    "search": "Search",
+    "noExports": "No exports found",
+    "deleteExport": "Delete Export",
+    "deleteExport.desc": "Are you sure you want to delete {{exportName}}?",
+    "editExport": {
+        "title": "Rename Export",
+        "desc": "Enter a new name for this export.",
+        "saveExport": "Save Export"
+    },
+    "toast": {
+        "error": {
+            "renameExportFailed": "Failed to rename export: {{errorMessage}}"
+        }
+    }
+    
+}
--- a/web/public/locales/en/views/faceLibrary.json
+++ b/web/public/locales/en/views/faceLibrary.json
@@ -0,0 +1,41 @@
+{
+    "documentTitle": "Face Library - Frigate",
+    "uploadFaceImage": {
+        "title": "Upload Face Image",
+        "desc": "Upload an image to scan for faces and include for {{pageToggle}}"
+    },
+    "createFaceLibrary": {
+        "title": "Create Face Library",
+        "desc": "Create a new face library"
+    },
+    "train": {
+        "title": "Train",
+        "aria": "Select train"
+    },
+    "selectItem": "Select {{item}}",
+    "button": {
+        "deleteFaceAttempts": "Delete Face Attempts",
+        "addFace": "Add Face",
+        "uploadImage": "Upload Image",
+        "reprocessFace:": "Reprocess Face"
+    },
+    "trainFaceAs:": "Train Face as:",
+    "trainFaceAsPerson:": "Train Face as Person",
+    
+    "toast": {
+        "success": {
+            "uploadedImage": "Successfully uploaded image.",
+            "addFaceLibrary": "Successfully add face library.",
+            "deletedFace": "Successfully deleted face.",
+            "trainedFace": "Successfully trained face.",
+            "updatedFaceScore": "Successfully updated face score."
+        },
+        "error": {
+            "uploadingImageFailed": "Failed to upload image: {{errorMessage}}",
+            "addFaceLibraryFailed": "Failed to set face name: {{errorMessage}}",
+            "deleteFaceFailed": "Failed to delete: {{errorMessage}}",
+            "trainFailed": "Failed to train: {{errorMessage}}",
+            "updateFaceScoreFailed": "Failed to update face score: {{errorMessage}}"
+        }
+    }
+}
--- a/web/public/locales/en/views/live.json
+++ b/web/public/locales/en/views/live.json
@@ -0,0 +1,154 @@
+{
+  "documentTitle": "Live - Frigate",
+  "documentTitle.withCamera": "{{camera}} - Live - Frigate",
+  "lowBandwidthMode": "Low-bandwidth Mode",
+  "twoWayTalk": {
+    "enable": "Enable Two Way Talk",
+    "disable": "Disable Two Way Talk"
+  },
+  "cameraAudio": {
+    "enable": "Enable Camera Audio",
+    "disable": "Disable Camera Audio"
+  },
+  "ptz": {
+    "move": {
+      "clickMove": {
+        "label": "Click in the frame to center the camera",
+        "enable": "Enable click to move",
+        "disable": "Disable click to move"
+      },
+      "left": {
+        "label": "Move PTZ camera to the left"
+      },
+      "up": {
+        "label": "Move PTZ camera up"
+      },
+      "down": {
+        "label": "Move PTZ camera down"
+      },
+      "right": {
+        "label": "Move PTZ camera to the right"
+      }
+    },
+    "zoom": {
+      "in": {
+        "label": "Zoom PTZ camera in"
+      },
+      "out": {
+        "label": "Zoom PTZ camera out"
+      }
+    },
+    "frame": {
+      "center": {
+        "label": "Click in the frame to center the PTZ camera"
+      }
+    },
+    "presets": "PTZ camera presets"
+  },
+  "camera": {
+    "enable": "Enable Camera",
+    "disable": "Disable Camera"
+  },
+  "muteCameras": {
+    "enable": "Mute All Cameras",
+    "disable": "Unmute All Cameras"
+  },
+  "detect": {
+    "enable": "Enable Detect",
+    "disable": "Disable Detect"
+  },
+  "recording": {
+    "enable": "Enable Recording",
+    "disable": "Disable Recording"
+  },
+  "snapshots": {
+    "enable": "Enable Snapshots",
+    "disable": "Disable Snapshots"
+  },
+  "audioDetect": {
+    "enable": "Enable Audio Detect",
+    "disable": "Disable Audio Detect"
+  },
+  "autotracking": {
+    "enable": "Enable Autotracking",
+    "disable": "Disable Autotracking"
+  },
+  "streamStats": {
+    "enable": "Show Stream Stats",
+    "disable": "Hide Stream Stats"
+  },
+  "manualRecording": {
+    "title": "On-Demand Recording",
+    "tips": "Start a manual event based on this camera's recording retention settings.",
+    "playInBackground": {
+      "label": "Play in background",
+      "desc": "Enable this option to continue streaming when the player is hidden."
+    },
+    "showStats": {
+      "label": "Show Stats",
+      "desc": "Enable this option to show stream statistics as an overlay on the camera feed."
+    },
+    "debugView": "Debug View",
+    "start": "Start on-demand recording",
+    "started": "Started manual on-demand recording.",
+    "failedToStart": "Failed to start manual on-demand recording.",
+    "recordDisabledTips": "Since recording is disabled or restricted in the config for this camera, only a snapshot will be saved.",
+    "end": "End on-demand recording",
+    "ended": "Ended manual on-demand recording.",
+    "failedToEnd": "Failed to end manual on-demand recording."
+  },
+  "streamingSettings": "Streaming Settings",
+  "notifications": "Notifications",
+  "audio": "Audio",
+  "suspend:": {
+    "forTime": "Suspend for: "
+  },
+  "stream": {
+    "title": "Stream",
+    "audio": {
+      "tips": "Audio must be output from your camera and configured in go2rtc for this stream.",
+      "tips.documentation": "Read the documentation ",
+      "available": "Audio is available for this stream",
+      "unavailable": "Audio is not available for this stream"
+    },
+    "twoWayTalk": {
+      "tips": "Your device must suppport the feature and WebRTC must be configured for two-way talk.",
+      "tips.documentation": "Read the documentation ",
+      "available": "Two-way talk is available for this stream",
+      "unavailable": "Two-way talk is unavailable for this stream"
+    },
+    "lowBandwidth": {
+      "tips": "Live view is in low-bandwidth mode due to buffering or stream errors.",
+      "resetStream": "Reset stream"
+    },
+    "playInBackground": {
+      "label": "Play in background",
+      "tips": "Enable this option to continue streaming when the player is hidden."
+    }
+  },
+  "cameraSettings": {
+    "title": "{{camera}} Settings",
+    "cameraEnabled": "Camera Enabled",
+    "objectDetection": "Object Detection",
+    "recording": "Recording",
+    "snapshots": "Snapshots",
+    "audioDetection": "Audio Detection",
+    "autotracking": "Autotracking"
+  },
+  "history": {
+    "label": "Show historical footage"
+  },
+  "effectiveRetainMode": {
+    "modes": {
+      "all": "All",
+      "motion": "Motion",
+      "active_objects": "Active Objects"
+    },
+    "notAllTips": "Your {{source}} recording retention configuration is set to <code>mode: {{effectiveRetainMode}}</code>, so this on-demand recording will only keep segments with {{effectiveRetainModeName}}."
+  },
+  "editLayout": {
+    "label": "Edit Layout",
+    "group.label": "Edit Camera Group",
+    "exitEdit": "Exit Editing"
+  }
+}
--- a/web/public/locales/en/views/recording.json
+++ b/web/public/locales/en/views/recording.json
@@ -0,0 +1,12 @@
+{
+    "export": "Export",
+    "calendar": "Calendar",
+    "filter": "Filter",
+    "filters": "Filters",
+    "toast": {
+        "error": {
+            "noValidTimeSelected": "No valid time range selected",
+            "endTimeMustAfterStartTime": "End time must be after start time"
+        }
+    }
+}
--- a/web/public/locales/en/views/search.json
+++ b/web/public/locales/en/views/search.json
@@ -0,0 +1,65 @@
+{
+    "search": "Search",
+    "savedSearches": "Saved Searches",
+    "searchFor": "Search for {{inputValue}}",
+    "button": {
+        "clear": "Clear search",
+        "save": "Save search",
+        "delete": "Delete saved search",
+        "filterInformation": "Filter information",
+        "filterActive": "Filters active"
+    },
+    "trackedObjectId": "Tracked Object ID",
+    "filter": {
+        "label": {
+            "cameras": "Cameras",
+            "labels": "Labels",
+            "zones": "Zones",
+            "sub_labels": "Sub Labels",
+            "search_type": "Search Type",
+            "time_range": "Time Range",
+            "before": "Before",
+            "after": "After",
+            "min_score": "Min Score",
+            "max_score": "Max Score",
+            "min_speed": "Min Speed",
+            "max_speed": "Max Speed",
+            "recognized_license_plate": "Recognized License Plate",
+            "has_clip": "Has Clip",
+            "has_snapshot": "Has Snapshot"
+        },
+        "searchType": {
+            "thumbnail": "Thumbnail", 
+            "description": "Description"
+        },
+        "toast": {
+            "error": {
+                "beforeDateBeLaterAfter": "The 'before' date must be later than the 'after' date.",
+                "afterDatebeEarlierBefore": "The 'after' date must be earlier than the 'before' date.",
+                "minScoreMustBeLessOrEqualMaxScore": "The 'min_score' must be less than or equal to the 'max_score'.",
+                "maxScoreMustBeGreaterOrEqualMinScore": "The 'max_score' must be greater than or equal to the 'min_score'.",
+                "minSpeedMustBeLessOrEqualMaxSpeed": "The 'min_speed' must be less than or equal to the 'max_speed'.",
+                "maxSpeedMustBeGreaterOrEqualMinSpeed": "The 'max_speed' must be greater than or equal to the 'min_speed'."
+            }
+        },
+        "tips": {
+            "title": "How to use text filters",
+            "desc": "Filters help you narrow down your search results. Here's how to use them in the input field:",
+            "desc.step": "<ul className=\"list-disc pl-5 text-sm text-primary-variant\"><li>Type a filter name followed by a colon (e.g., \"cameras:\").</li><li>Select a value from the suggestions or type your own.</li><li>Use multiple filters by adding them one after another with a space in between.</li><li>Date filters (before: and after:) use <em>{{DateFormat}}</em> format.</li><li>Time range filter uses <em>{{exampleTime}}</em> format.</li><li>Remove filters by clicking the 'x' next to them.</li></ul>",
+            "desc.example": "Example: <code className=\"text-primary\">cameras:front_door label:person before:01012024 time_range:3:00PM-4:00PM </code>"
+        },
+        "header": {
+            "currentFilterType": "Filter Values",
+            "noFilters": "Filters",
+            "activeFilters": "Active Filters"
+        }
+    },
+    "similaritySearch": {
+        "title": "Similarity Search",
+        "active": "Similarity search active",
+        "clear": "Clear similarity search"
+    },
+    "placeholder": {
+        "search": "Search..."
+    }
+}
--- a/web/public/locales/en/views/settings.json
+++ b/web/public/locales/en/views/settings.json
@@ -0,0 +1,435 @@
+{
+  "documentTitle": {
+    "default": "Settings - Frigate",
+    "authentication": "Authentication Settings - Frigate",
+    "camera": "Camera Settings - Frigate",
+    "classification": "Classification Settings - Frigate",
+    "masksAndZones": "Mask and Zone Editor - Frigate",
+    "motionTuner": "Motion Tuner - Frigate",
+    "object": "Object Settings - Frigate",
+    "general": "General Settings - Frigate"
+  },
+  "menu": {
+    "uiSettings": "UI Settings",
+    "classificationSettings": "Classification Settings",
+    "cameraSettings": "Camera Settings",
+    "masksAndZones": "Masks / Zones",
+    "motionTuner": "Motion Tuner",
+    "debug": "Debug",
+    "users": "Users",
+    "notifications": "Notifications"
+  },
+  "dialog": {
+    "unsavedChanges": {
+      "title": "You have unsaved changes.",
+      "desc": "Do you want to save your changes before continuing?"
+    }
+  },
+  "cameraSetting": {
+    "camera": "Camera",
+    "noCamera": "No Camera"
+  },
+  "general": {
+    "title": "General Settings",
+    "liveDashboard": {
+      "title": "Live Dashboard",
+      "automaticLiveView": {
+        "label": "Automatic Live View",
+        "desc": "Automatically switch to a camera's live view when activity is detected. Disabling this option causes static camera images on the Live dashboard to only update once per minute."
+      },
+      "playAlertVideos": {
+        "label": "Play Alert Videos",
+        "desc": "By default, recent alerts on the Live dashboard play as small looping videos. Disable this option to only show a static image of recent alerts on this device/browser."
+      }
+    },
+    "storedLayouts": {
+      "title": "Stored Layouts",
+      "desc": "The layout of cameras in a camera group can be dragged/resized. The positions are stored in your browser's local storage.",
+      "clearAll": "Clear All Layouts"
+    },
+    "cameraGroupStreaming": {
+      "title": "Camera Group Streaming Settings",
+      "desc": "Streaming settings for each camera group are stored in your browser's local storage.",
+      "clearAll": "Clear All Streaming Settings"
+    },
+    "recordingsViewer": {
+      "title": "Recordings Viewer",
+      "defaultPlaybackRate": {
+        "label": "Default Playback Rate",
+        "desc": "Default playback rate for recordings playback."
+      }
+    },
+    "calendar": {
+      "title": "Calendar",
+      "firstWeekday": {
+        "label": "First Weekday",
+        "desc": "The day that the weeks of the review calendar begin on.",
+        "sunday": "Sunday",
+        "monday": "Monday"
+      }
+    },
+    "toast": {
+      "success": {
+        "clearStoredLayout": "Cleared stored layout for {{cameraName}}",
+        "clearStreamingSettings": "Cleared streaming settings for all camera groups."
+      },
+      "error": {
+        "clearStoredLayoutFailed": "Failed to clear stored layout: {{errorMessage}}",
+        "clearStreamingSettingsFailed": "Failed to clear streaming settings: {{errorMessage}}"
+      }
+    }
+  },
+  "classification": {
+    "title": "Classification Settings",
+    "semanticSearch": {
+      "title": "Semantic Search",
+      "desc": "Semantic Search in Frigate allows you to find tracked objects within your review items using either the image itself, a user-defined text description, or an automatically generated one.",
+      "readTheDocumentation": "Read the Documentation",
+      "reindexOnStartup": {
+        "label": "Re-Index On Startup",
+        "desc": "Re-indexing will reprocess all thumbnails and descriptions (if enabled) and apply the embeddings on each startup. <em>Don't forget to disable the option after restarting!</em>"
+      },
+      "modelSize": {
+        "label": "Model Size",
+        "desc": "The size of the model used for semantic search embeddings.",
+        "small": "small",
+        "large": "large",
+        "small.desc": "Using <em>small</em> employs a quantized version of the model that uses less RAM and runs faster on CPU with a very negligible difference in embedding quality.",
+        "large.desc": "Using <em>large</em> employs the full Jina model and will automatically run on the GPU if applicable."
+      }
+    },
+    "faceRecognition": {
+      "title": "Face Recognition",
+      "desc": "Face recognition allows people to be assigned names and when their face is recognized Frigate will assign the person's name as a sub label. This information is included in the UI, filters, as well as in notifications.",
+      "readTheDocumentation": "Read the Documentation"
+    },
+    "licensePlateRecognition": {
+      "title": "License Plate Recognition",
+      "desc": "Frigate can recognize license plates on vehicles and automatically add the detected characters to the recognized_license_plate field or a known name as a sub_label to objects that are of type car. A common use case may be to read the license plates of cars pulling into a driveway or cars passing by on a street.",
+      "readTheDocumentation": "Read the Documentation"
+    },
+    "toast": {
+      "success": "Classification settings have been saved.",
+      "error": "Failed to save config changes: {{errorMessage}}"
+    }
+  },
+  "camera": {
+    "title": "Camera Settings",
+    "streams": {
+      "title": "Streams",
+      "desc": "Disabling a camera completely stops Frigate's processing of this camera's streams. Detection, recording, and debugging will be unavailable.<br /> <em>Note: This does not disable go2rtc restreams.</em>"
+    },
+    "review": {
+      "title": "Review",
+      "desc": "Enable/disable alerts and detections for this camera. When disabled, no new review items will be generated.",
+      "alerts": "Alerts ",
+      "detections": "Detections "
+    },
+    "reviewClassification": {
+      "title": "Review Classification",
+      "desc": "Frigate categorizes review items as Alerts and Detections. By default, all <em>person</em> and <em>car</em> objects are considered Alerts. You can refine categorization of your review items by configuring required zones for them.",
+      "readTheDocumentation": "Read the Documentation",
+      "noDefinedZones": "No zones are defined for this camera.",
+      "objectAlertsTips": "All {{alertsLabels}} objects on {{cameraName}} will be shown as Alerts.",
+      "zoneObjectAlertsTips": "All {{alertsLabels}} objects detected in {{zone}} on {{cameraName}} will be shown as Alerts.",
+      "objectDetectionsTips": "All {{detectionsLabels}} objects not categorized on {{cameraName}} will be shown as Detections regardless of which zone they are in.",
+      "zoneObjectDetectionsTips": "All {{detectionsLabels}} objects not categorized in {{zone}} on {{cameraName}} will be shown as Detections.",
+      "zoneObjectDetectionsTips.notSelectDetections": "All {{detectionsLabels}} objects detected in {{zone}} on {{cameraName}} not categorized as Alerts will be shown as Detections regardless of which zone they are in.",
+      "zoneObjectDetectionsTips.regardlessOfZoneObjectDetectionsTips": "All {{detectionsLabels}} objects not categorized on {{cameraName}} will be shown as Detections regardless of which zone they are in.",
+      "selectAlertsZones": "Select zones for Alerts",
+      "selectDetectionsZones": "Select zones for Detections",
+      "limitDetections": "Limit detections to specific zones",
+      "toast": {
+        "success": "Review classification configuration has been saved. Restart Frigate to apply changes."
+      }
+    }
+  },
+  "masksAndZones": {
+    "filter": {
+      "all": "All Masks and Zones"
+    },
+    "toast": {
+      "success": {
+        "copyCoordinates": "Copied coordinates for {{polyName}} to clipboard."
+      },
+      "error": {
+        "copyCoordinatesFailed": "Could not copy coordinates to clipboard."
+      }
+    },
+    "form": {
+      "zoneName": {
+        "error": {
+          "mustBeAtLeastTwoCharacters": "Zone name must be at least 2 characters.",
+          "mustNotBeSameWithCamera": "Zone name must not be the same as camera name.",
+          "alreadyExists": "A zone with this name already exists for this camera.",
+          "mustNotContainPeriod": "Zone name must not contain periods.",
+          "hasIllegalCharacter": "Zone name contains illegal characters."
+        }
+      },
+      "distance.error": "Distance must be greater than or equal to 0.1.",
+      "distance.error.mustBeFilled": "All distance fields must be filled to use speed estimation.",
+      "inertia.error.mustBeAboveZero": "Inertia must be above 0.",
+      "loiteringTime.error.mustBeGreaterOrEqualZero": "Loitering time must be greater than or equal to 0.",
+      "polygonDrawing": {
+        "removeLastPoint": "Remove last point",
+        "reset.label": "Clear all points",
+        "snapPoints": {
+          "true": "Snap points",
+          "false": "Don't Snap points"
+        },
+        "delete": {
+          "title": "Confirm Delete",
+          "desc": "Are you sure you want to delete the {{type}} <em>{{name}}</em>?",
+          "success": "{{name}} has been deleted."
+        },
+        "error": {
+          "mustBeFinished": "Polygon drawing must be finished before saving."
+        }
+      }
+    },
+    "zones": {
+      "label": "Zones",
+      "documentTitle": "Edit Zone - Frigate",
+      "desc": "Zones allow you to define a specific area of the frame so you can determine whether or not an object is within a particular area.",
+      "desc.documentation": "Documentation",
+      "add": "Add Zone",
+      "edit": "Edit Zone",
+      "point_one": "{{count}} point",
+      "point_other": "{{count}} points",
+      "clickDrawPolygon": "Click to draw a polygon on the image.",
+      "name": "Name",
+      "name.inputPlaceHolder": "Enter a name...",
+      "name.tips": "Name must be at least 2 characters and must not be the name of a camera or another zone.",
+      "inertia": "Inertia",
+      "inertia.desc": "Specifies how many frames that an object must be in a zone before they are considered in the zone. <em>Default: 3</em>",
+      "loiteringTime": "Loitering Time",
+      "loiteringTime.desc": "Sets a minimum amount of time in seconds that the object must be in the zone for it to activate. <em>Default: 0</em>",
+      "objects": "Objects",
+      "objects.desc": "List of objects that apply to this zone.",
+      "allObjects": "All Objects",
+      "speedEstimation": "Speed Estimation",
+      "speedEstimation.desc": "Enable speed estimation for objects in this zone. The zone must have exactly 4 points.",
+      "speedThreshold": "Speed Threshold ({{unit}})",
+      "speedThreshold.desc": "Specifies a minimum speed for objects to be considered in this zone.",
+      "speedThreshold.toast.error.pointLengthError": "Speed estimation has been disabled for this zone. Zones with speed estimation must have exactly 4 points.",
+      "speedThreshold.toast.error.loiteringTimeError": "Zones with loitering times greater than 0 should not be used with speed estimation.",
+      "toast.success": "Zone ({{zoneName}}) has been saved. Restart Frigate to apply changes."
+    },
+    "motionMasks": {
+      "label": "Motion Mask",
+      "documentTitle": "Edit Motion Mask - Frigate",
+      "desc": "Motion masks are used to prevent unwanted types of motion from triggering detection. Over masking will make it more difficult for objects to be tracked.",
+      "desc.documentation": "Documentation",
+      "add": "New Motion Mask",
+      "edit": "Edit Motion Mask",
+      "context": "Motion masks are used to prevent unwanted types of motion from triggering detection (example: tree branches, camera timestamps). Motion masks should be used <em>very sparingly</em>, over-masking will make it more difficult for objects to be tracked.",
+      "context.documentation": "Read the documentation",
+      "point_one": "{{count}} point",
+      "point_other": "{{count}} points",
+      "clickDrawPolygon": "Click to draw a polygon on the image.",
+      "polygonAreaTooLarge": "The motion mask is covering {{polygonArea}}% of the camera frame. Large motion masks are not recommended.",
+      "polygonAreaTooLarge.tips": "Motion masks do not prevent objects from being detected. You should use a required zone instead.",
+      "polygonAreaTooLarge.documentation": "Read the documentation",
+      "toast.success": "{{polygonName}} has been saved. Restart Frigate to apply changes.",
+      "toast.success.noName": "Motion Mask has been saved. Restart Frigate to apply changes."
+    },
+    "objectMasks": {
+      "label": "Object Masks",
+      "documentTitle": "Edit Object Mask - Frigate",
+      "desc": "Object filter masks are used to filter out false positives for a given object type based on location.",
+      "documentation": "Documentation",
+      "add": "Add Object Mask",
+      "edit": "Edit Object Mask",
+      "context": "Object filter masks are used to filter out false positives for a given object type based on location.",
+      "point_one": "{{count}} point",
+      "point_other": "{{count}} points",
+      "clickDrawPolygon": "Click to draw a polygon on the image.",
+      "objects": "Objects",
+      "objects.desc": "The object type that that applies to this object mask.",
+      "objects.allObjectTypes": "All object types",
+      "toast.success": "{{polygonName}} has been saved. Restart Frigate to apply changes.",
+      "toast.success.noName": "Object Mask has been saved. Restart Frigate to apply changes."
+    }
+  },
+  "motionDetectionTuner": {
+    "title": "Motion Detection Tuner",
+    "desc": "Frigate uses motion detection as a first line check to see if there is anything happening in the frame worth checking with object detection.",
+    "desc.documentation": "Read the Motion Tuning Guide",
+    "Threshold": "Threshold",
+    "Threshold.desc": "The threshold value dictates how much of a change in a pixel's luminance is required to be considered motion. <em>Default: 30</em>",
+    "contourArea": "Contour Area",
+    "contourArea.desc": "The contour area value is used to decide which groups of changed pixels qualify as motion. <em>Default: 10</em>",
+    "improveContrast": "Improve Contrast",
+    "improveContrast.desc": "Improve contrast for darker scenes. <em>Default: ON</em>",
+    "toast": {
+      "success": "Motion settings have been saved."
+    }
+  },
+  "debug": {
+    "title": "Debug",
+    "detectorDesc": "Frigate uses your detectors ({{detectors}}) to detect objects in your camera's video stream.",
+    "desc": "Debugging view shows a real-time view of tracked objects and their statistics. The object list shows a time-delayed summary of detected objects.",
+    "debugging": "Debugging",
+    "objectList": "Object List",
+    "noObjects": "No objects",
+    "boundingBoxes": {
+      "title": "Bounding boxes",
+      "desc": "Show bounding boxes around tracked objects",
+      "colors": {
+        "label": "Object Bounding Box Colors",
+        "info": "<li>At startup, different colors will be assigned to each object label</li><li>A dark blue thin line indicates that object is not detected at this current point in time</li><li>A gray thin line indicates that object is detected as being stationary</li><li>A thick line indicates that object is the subject of autotracking (when enabled)</li>"
+      }
+    },
+    "timestamp": {
+      "title": "Timestamp",
+      "desc": "Overlay a timestamp on the image"
+    },
+    "zones": {
+      "title": "Zones",
+      "desc": "Show an outline of any defined zones"
+    },
+    "mask": {
+      "title": "Motion masks",
+      "desc": "Show motion mask polygons"
+    },
+    "motion": {
+      "title": "Motion boxes",
+      "desc": "Show boxes around areas where motion is detected",
+      "tips": "<p className=\"mb-2\"><strong>Motion Boxes</strong></p><br><p>Red boxes will be overlaid on areas of the frame where motion is currently being detected</p>"
+    },
+    "regions": {
+      "title": "Regions",
+      "desc": "Show a box of the region of interest sent to the object detector",
+      "tips": "<p className=\"mb-2\"><strong>Region Boxes</strong></p><br><p>Bright green boxes will be overlaid on areas of interest in the frame that are being sent to the object detector.</p>"
+    },
+    "objectShapeFilterDrawing": {
+      "title": "Object Shape Filter Drawing",
+      "desc": "Draw a rectangle on the image to view area and ratio details",
+      "tips": "Enable this option to draw a rectangle on the camera image to show its area and ratio. These values can then be used to set object shape filter parameters in your config.",
+      "document": "Read the documentation ",
+      "score": "Score",
+      "ratio": "Ratio",
+      "area": "Area"
+    }
+  },
+  "users": {
+    "title": "Users",
+    "management": "Users Management",
+    "management.desc": "Manage this Frigate instance's user accounts.",
+    "addUser": "Add User",
+    "updatePassword": "Update Password",
+    "toast": {
+      "success": {
+        "createUser": "User {{user}} created successfully",
+        "deleteUser": "User {{user}} deleted successfully",
+        "updatePassword": "Password updated successfully.",
+        "roleUpdated": "Role updated for {{user}}"
+      },
+      "error": {
+        "setPasswordFailed": "Failed to save password: {{errorMessage}}",
+        "createUserFailed": "Failed to create user: {{errorMessage}}",
+        "deleteUserFailed": "Failed to delete user: {{errorMessage}}",
+        "roleUpdateFailed": "Failed to update role: {{errorMessage}}"
+      }
+    },
+    "table": {
+      "username": "Username",
+      "actions": "Actions",
+      "role": "Role",
+      "noUsers": "No users found.",
+      "changeRole": "Change user role",
+      "password": "Password",
+      "deleteUser": "Delete user"
+    },
+    "dialog": {
+      "form": {
+        "user": "Username",
+        "user.desc": "Only letters, numbers, periods and underscores allowed.",
+        "user.placeholder": "Enter username",
+        "password": "Password",
+        "password.placeholder": "Enter password",
+        "password.confirm": "Confirm Password",
+        "password.confirm.placeholder": "Confirm Password",
+        "password.strength": "password strength: ",
+        "password.strength.weak": "Weak",
+        "password.strength.medium": "Medium",
+        "password.strength.strong": "Strong",
+        "password.strength.veryStrong": "Very strong",
+        "password.match": "Passwords match",
+        "password.notMatch": "Passwords don't match",
+        "newPassword": "New Password",
+        "newPassword.placeholder": "Enter new password",
+        "newPassword.confirm.placeholder": "Re-enter new password",
+        "usernameIsRequired": "Username is required"
+      },
+      "createUser": {
+        "title": "Create New User",
+        "desc": "Add a new user account and specify an role for access to areas of the Frigate UI.",
+        "usernameOnlyInclude": "Username may only include letters, numbers, . or _"
+      },
+      "deleteUser": {
+        "title": "Delete User",
+        "desc": "This action cannot be undone. This will permanently delete the user account and remove all associated data.",
+        "warn": "Are you sure you want to delete <span className=\"font-bold\">{{username}}</span>?"
+      },
+      "passwordSetting": {
+        "updatePassword": "Update Password for {{username}}",
+        "setPassword": "Set Password",
+        "desc": "Create a strong password to secure this account."
+      },
+      "changeRole": {
+        "title": "Change User Role",
+        "desc": "Update permissions for <span className=\"font-medium\">{{username}}</span>",
+        "roleInfo": "<p>Select the appropriate role for this user:</p><ul className=\"mt-2 space-y-1 pl-5\"><li> • <span className=\"font-medium\">Admin:</span> Full access to all features. </li><li> • <span className=\"font-medium\">Viewer:</span> Limited to Live dashboards, Review, Explore, and Exports only.</li></ul>"
+      }
+    }
+  },
+  "notification": {
+    "title": "Notifications",
+    "notificationSettings": {
+      "title": "Notification Settings",
+      "desc": "Frigate can natively send push notifications to your device when it is running in the browser or installed as a PWA.",
+      "documentation": "Read the Documentation"
+    },
+    "notificationUnavailable": {
+      "title": "Notifications Unavailable",
+      "desc": "Web push notifications require a secure context (<code>https://...</code>). This is a browser limitation. Access Frigate securely to use notifications.",
+      "documentation": "Read the Documentation"
+    },
+    "globalSettings": {
+      "title": "Global Settings",
+      "desc": "Temporarily suspend notifications for specific cameras on all registered devices."
+    },
+    "email": "Email",
+    "email.placeholder": "e.g. example@email.com",
+    "email.desc": "A valid email is required and will be used to notify you if there are any issues with the push service.",
+    "cameras": "Cameras",
+    "cameras.noCameras": "No cameras available",
+    "cameras.desc": "Select which cameras to enable notifications for.",
+    "deviceSpecific": "Device Specific Settings",
+    "registerDevice": "Register This Device",
+    "unregisterDevice": "Unregister This Device",
+    "sendTestNotification": "Send a test notification",
+    "active": "Notifications Active",
+    "suspended": "Notifications suspended {{time}}",
+    "suspendTime": {
+      "5minutes": "Suspend for 5 minutes",
+      "10minutes": "Suspend for 10 minutes",
+      "30minutes": "Suspend for 30 minutes",
+      "1hour": "Suspend for 1 hour",
+      "12hours": "Suspend for 12 hours",
+      "24hours": "Suspend for 24 hours",
+      "untilRestart": "Suspend until restart"
+    },
+    "cancelSuspension": "Cancel Suspension",
+    "toast": {
+      "success": {
+        "registered": "Successfully registered for notifications. Restarting Frigate is required before any notifications (including a test notification) can be sent.",
+        "settingSaved": "Notification settings have been saved."
+      },
+      "error": {
+        "registerFailed": "Failed to save notification registration."
+      }
+    }
+  }
+}
--- a/web/public/locales/en/views/system.json
+++ b/web/public/locales/en/views/system.json
@@ -0,0 +1,144 @@
+{
+  "documentTitle": {
+    "cameras": "Cameras Stats - Frigate",
+    "storage": "Storage Stats - Frigate",
+    "general": "General Stats - Frigate",
+    "features": "Features Stats- Frigate",
+    "logs": {
+      "frigate": "Frigate Logs - Frigate",
+      "go2rtc": "Go2RTC Logs - Frigate",
+      "nginx": "Nginx Logs - Frigate"
+    }
+  },
+  "title": "System",
+  "metrics": "System metrics",
+  "logs": {
+    "download": {
+      "label": "Download Logs"
+    },
+    "copy": {
+      "label": "Copy to Clipboard",
+      "success": "Copied logs to clipboard",
+      "error": "Could not copy logs to clipboard"
+    },
+    "type": {
+      "label": "Type",
+      "timestamp": "Timestamp",
+      "tag": "Tag",
+      "message": "Message"
+    },
+    "tips": "Logs are streaming from the server",
+    "toast": {
+      "error": {
+        "fetchingLogsFailed": "Error fetching logs: {{errorMessage}}",
+        "whileStreamingLogs": "Error while streaming logs: {{errorMessage}}"
+      }
+    }
+  },
+  "general": {
+    "title": "General",
+    "detector": {
+      "title": "Detectors",
+      "inferenceSpeed": "Detector Inference Speed",
+      "cpuUsage": "Detector CPU Usage",
+      "memoryUsage": "Detector Memory Usage"
+    },
+    "hardwareInfo": {
+      "title": "Hardware Info",
+      "gpuUsage": "GPU Usage",
+      "gpuMemory": "GPU Memory",
+      "gpuEncoder": "GPU Encoder",
+      "gpuDecoder": "GPU Decoder",
+      "gpuInfo": {
+        "vainfoOutput": {
+          "title": "Vainfo Output",
+          "returnCode": "Return Code: {{code}}",
+          "processOutput": "Process Output:",
+          "processError": "Process Error:"
+        },
+        "nvidiaSMIOutput": {
+          "title": "Nvidia SMI Output",
+          "name": "Name: {{name}}",
+          "driver": "Driver: {{driver}}",
+          "cudaComputerCapability": "CUDA Compute Capability: {{cuda_compute}}",
+          "vbios": "VBios Info: {{vbios}}"
+        },
+        "closeInfo.label": "Close GPU info",
+        "copyInfo.label": "Copy GPU info",
+        "toast": {
+          "success": "Copied GPU info to clipboard"
+        }
+      }
+    },
+    "otherProcesses": {
+      "title": "Other Processes",
+      "processCpuUsage": "Process CPU Usage",
+      "processMemoryUsage": "Process Memory Usage"
+    }
+  },
+  "storage": {
+    "title": "Storage",
+    "overview": "Overview",
+    "recordings": {
+      "title": "Recordings",
+      "tips": "This value represents the total storage used by the recordings in Frigate's database. Frigate does not track storage usage for all files on your disk.",
+      "earliestRecording": "Earliest recording available:"
+    },
+    "cameraStorage": {
+      "title": "Camera Storage",
+      "camera": "Camera",
+      "unused": "Unused",
+      "unusedStorageInformation": "Unused Storage Information",
+      "storageUsed": "Storage Used",
+      "percentageOfTotalUsed": "Percentage of Total Used",
+      "bandwidth": "Bandwidth",
+      "unused.tips": "This value may not accurately represent the free space available to Frigate if you have other files stored on your drive beyond Frigate's recordings. Frigate does not track storage usage outside of its recordings."
+    }
+  },
+  "cameras": {
+    "title": "Cameras",
+    "overview": "Overview",
+    "info": {
+      "cameraProbeInfo": "{{camera}} Camera Probe Info",
+      "streamDataFromFFPROBE": "Stream data is obtained with <code>ffprobe</code>.",
+      "fetching": "Fetching Camera Data",
+      "stream": "Stream {{idx}}",
+      "video": "Video:",
+      "codec": "Codec:",
+      "resolution": "Resolution:",
+      "fps": "FPS:",
+      "unknown": "Unknown",
+      "audio": "Audio:",
+      "error": "Error: {{error}}",
+      "tips": {
+        "title": "Camera Probe Info"
+      }
+    },
+    "framesAndDetections": "Frames / Detections",
+    "label": {
+      "camera": "camera",
+      "detect": "detect",
+      "skipped": "skipped",
+      "ffmpeg": "ffmpeg",
+      "capture": "capture"
+    },
+    "toast": {
+      "success": {
+        "copyToClipboard": "Copied probe data to clipboard."
+      },
+      "error": {
+        "unableToProbeCamera": "Unable to probe camera: {{errorMessage}}"
+      }
+    }
+  },
+  "lastRefreshed": "Last refreshed: ",
+  "stats": {
+    "ffmpegHighCpuUsage": "{{camera}} has high FFMPEG CPU usage ({{ffmpegAvg}}%)",
+    "detectHighCpuUsage": "{{camera}} has high detect CPU usage ({{detectAvg}}%)",
+    "healthy": "System is healthy",
+    "reindexingEmbeddings": "Reindexing embeddings ({{processed}}% complete)"
+  },
+  "features": {
+    "title": "Features"
+  }
+}
--- a/web/public/locales/zh-CN/audio.json
+++ b/web/public/locales/zh-CN/audio.json
@@ -0,0 +1,8 @@
+{
+  "crying": "哭泣",
+  "laughter": "笑声",
+  "scream": "尖叫",
+  "speech": "谈话",
+  "yell": "大喊",
+  "fire_alarm": "火灾警报器"
+}
--- a/web/public/locales/zh-CN/common.json
+++ b/web/public/locales/zh-CN/common.json
@@ -0,0 +1,173 @@
+{
+  "time": {
+    "untilForTime": "直到 {{time}}",
+    "untilForRestart": "直到 Frigate 重启。",
+    "untilRestart": "直到重启",
+    "ago": "{{timeAgo}} 前",
+    "justNow": "刚才",
+    "today": "今天",
+    "yesterday": "昨天",
+    "last7": "最后 7 天",
+    "last14": "最后 14 天",
+    "last30": "最后 30 天",
+    "thisWeek": "本周",
+    "lastWeek": "上个周",
+    "thisMonth": "本月",
+    "lastMonth": "上个月",
+    "5minutes": "5 分钟",
+    "10minutes": "10 分钟",
+    "30minutes": "30 分钟",
+    "1hour": "1 小时",
+    "12hours": "12 小时",
+    "24hours": "24 小时",
+    "pm": "上午",
+    "am": "下午",
+    "yr": "{{time}}年",
+    "year": "{{time}}年",
+    "mo": "{{time}}月",
+    "month": "{{time}}月",
+    "d": "{{time}}天",
+    "day": "{{time}}天",
+    "h": "{{time}}小时",
+    "hour": "{{time}}小时",
+    "m": "{{time}}分钟",
+    "minute": "{{time}}分钟",
+    "s": "{{time}}秒",
+    "second": "{{time}}秒",
+    "formattedTimestamp": "%m月%-d日 %I:%M:%S %p",
+    "formattedTimestamp.24hour": "%m月%-d日 %H:%M:%S",
+    "formattedTimestamp2": "%m/%d %I:%M:%S%P",
+    "formattedTimestamp2.24hour": "%d日%m月 %H:%M:%S",
+    "formattedTimestampExcludeSeconds": "%m月%-d日 %I:%M %p",
+    "formattedTimestampExcludeSeconds.24hour": "%m月%-d日 %H:%M",
+    "formattedTimestampWithYear": "%Y年%m月%-d日 %I:%M:%S %p",
+    "formattedTimestampWithYear.24hour": "%Y年%m月%-d日 %H:%M",
+    "formattedTimestampOnlyMonthAndDay": "%m月%-d日"
+  },
+  "unit": {
+    "speed": {
+      "mph": "英里/小时",
+      "kph": "公里/小时"
+    }
+  },
+  "label": {
+    "back": "返回"
+  },
+  "pagination": {
+    "label": "分页",
+    "previous": "上一页",
+    "previous.label": "转到上一页",
+    "next": "下一页",
+    "next.label": "转到下一页",
+    "more": "更多页面"
+  },
+  "button": {
+    "apply": "应用",
+    "reset": "重置",
+    "enabled": "启用",
+    "enable": "启用",
+    "disabled": "禁用",
+    "disable": "禁用",
+    "save": "保存",
+    "saving": "保存中……",
+    "cancel": "取消",
+    "close": "关闭",
+    "copy": "复制",
+    "back": "返回",
+    "history": "历史",
+    "fullscreen": "全屏",
+    "exitFullscreen": "全屏",
+    "pictureInPicture": "画中画",
+    "on": "开",
+    "off": "关",
+    "edit": "编辑",
+    "copyCoordinates": "复制坐标",
+    "delete": "删除",
+    "yes": "是",
+    "no": "否",
+    "download": "下载",
+    "info": "信息",
+    "suspended": "已暂停",
+    "unsuspended": "取消暂停",
+    "play": "播放",
+    "unselect": "取消选择",
+    "export": "导出",
+    "deleteNow": "立即删除"
+  },
+  "menu": {
+    "system": "系统",
+    "systemMetrics": "系统信息",
+    "configuration": "配置",
+    "systemLogs": "系统日志",
+    "settings": "设置",
+    "configurationEditor": "配置编辑器",
+    "languages": "languages / 语言",
+    "language": {
+      "en": "English",
+      "zhCN": "简体中文",
+      "withSystem.label": "使用系统语言设置"
+    },
+    "appearance": "外观",
+    "darkMode": {
+      "label": "深色模式",
+      "light": "浅色",
+      "dark": "深色",
+      "withSystem.label": "使用系统深色模式设置"
+    },
+    "withSystem": "跟随系统",
+    "theme": {
+        "label": "主题",
+        "blue": "蓝色",
+        "green": "绿色",
+        "nord": "Nord",
+        "red": "红色",
+        "contrast": "高对比度",
+        "default": "默认"
+    },
+    "help": "帮助",
+    "documentation.label": "Frigate 的官方文档",
+    "documentation": "文档",
+    "live": "实时监控",
+    "live.allCameras": "所有摄像头",
+    "live.cameras": "摄像头",
+    "live.cameras.count_one": "{{count}} 个摄像头",
+    "live.cameras.count_other": "{{count}} 个摄像头",
+    "review": "回放",
+    "explore": "探测",
+    "export": "导出",
+    "uiPlayground": "UI Playground",
+    "faceLibrary": "人脸管理",
+    "user": {
+      "account": "账号",
+      "current": "当前用户：{{user}}",
+      "anonymous": "匿名",
+      "logout": "登出",
+      "setPassword": "设置密码"
+    },
+    "restart": "重启 Frigate"
+  },
+  "toast": {
+    "copyUrlToClipboard": "已复制链接到剪贴板。",
+    "save": {
+      "error": "保存配置信息失败： {{errorMessage}}",
+      "error.noMessage": "保存配置信息失败"
+    }
+  },
+  "role": {
+    "title": "权限组",
+    "admin": "管理员",
+    "viewer": "查看者",
+    "desc": "管理员可以完全访问 Frigate UI 的所有功能。查看者则仅限于在 UI 中查看摄像头、审核项和历史录像。"
+  },
+  "accessDenied": {
+    "documentTitle": "没有权限 - Frigate",
+    "title": "没有权限",
+    "desc": "您没有权限查看此页面。"
+  },
+  "notFound": {
+    "documentTitle": "没有找到页面 - Frigate",
+    "title": "404",
+    "desc": "页面未找到"
+  },
+  "selectItem": "选择 {{item}}"
+}
--- a/web/public/locales/zh-CN/components/auth.json
+++ b/web/public/locales/zh-CN/components/auth.json
@@ -0,0 +1,15 @@
+{
+    "form": {
+        "user": "用户名",
+        "password": "密码",
+        "login": "登录",
+        "errors": {
+            "usernameRequired": "用户名不能为空",
+            "passwordRequired": "密码不能为空",
+            "rateLimit": "超出请求限制，请稍后再试。",
+            "loginFailed": "登录失败",
+            "unknownError": "未知错误，请检查日志。",
+            "webUnkownError": "未知错误，请检查控制台日志。"
+        }
+    }
+}
--- a/web/public/locales/zh-CN/components/camera.json
+++ b/web/public/locales/zh-CN/components/camera.json
@@ -0,0 +1,77 @@
+{
+  "group": {
+    "label": "摄像头组",
+    "add": "添加摄像头组",
+    "edit": "编辑摄像头组",
+    "delete": {
+      "label": "删除摄像头组",
+      "confirm": "确认删除",
+      "confirm.desc": "你确定要删除摄像头组 <em>{{name}}</em> 吗？"
+    },
+    "name": {
+      "label": "名称",
+      "placeholder": "请输入名称",
+      "error": {
+        "mustLeastCharacters": "摄像头组的名称必须至少有 2 个字符。",
+        "exists": "摄像头组名称已存在。",
+        "nameMustNotPeriod": "摄像头组名称不能包含英文句号(.)。",
+        "invalid": "无效的摄像头组名称。"
+      }
+    },
+    "cameras": {
+      "label": "摄像头",
+      "desc": "选择添加至该组的摄像头。"
+    },
+    "icon": "图标",
+    "success": "摄像头组（{{name}}）保存成功。",
+    "camera": {
+      "setting": {
+        "label": "摄像头视频流设置",
+        "title": "{{cameraName}} 视频流设置",
+        "desc": "更改此摄像头组仪表板的实时视频流选项。<em>这些设置特定于设备/浏览器。</em>",
+        "audioIsAvailable": "此视频流支持音频",
+        "audioIsUnavailable": "此视频流不支持音频",
+        "audio": {
+          "tips": "音频必须从您的摄像头输出并在 go2rtc 中配置此流。",
+          "tips.document": "阅读文档（英文） "
+        },
+        "streamMethod": {
+          "label": "视频流方法",
+          "method": {
+            "noStreaming": {
+              "label": "无视频流",
+              "desc": "摄像头图像每分钟仅更新一次，不会进行实时视频流播放。"
+            },
+            "smartStreaming": {
+              "label": "智能视频流（推荐）",
+              "desc": "智能视频流在没有检测到活动时，每分钟更新一次摄像头图像，以节省带宽和资源。当检测到活动时，图像会无缝切换到实时视频流。"
+            },
+            "continuousStreaming": {
+              "label": "持续视频流",
+              "desc": "当摄像头画面在仪表板上可见时，始终为实时视频流，即使未检测到活动。",
+              "desc.warning": "持续视频流可能会导致高带宽使用和性能问题，请谨慎使用。"
+            }
+          }
+        },
+        "compatibilityMode": {
+          "label": "兼容模式",
+          "desc": "仅在摄像头的实时视频流显示颜色伪影，并且图像右侧有一条对角线时启用此选项。"
+        }
+      }
+    }
+  },
+  "debug": {
+    "options": {
+      "label": "设置",
+      "title": "选项",
+      "showOptions": "显示选项",
+      "hideOptions": "隐藏选项"
+    },
+    "boundingBox": "边界框",
+    "timestamp": "时间戳",
+    "zones": "区域",
+    "mask": "遮罩",
+    "motion": "运动",
+    "regions": "区域"
+  }
+}
--- a/web/public/locales/zh-CN/components/dialog.json
+++ b/web/public/locales/zh-CN/components/dialog.json
@@ -0,0 +1,96 @@
+{
+  "restart": {
+    "title": "你确定要重启 Frigate?",
+    "button": "重启",
+    "restarting": {
+      "title": "Frigate 正在重启",
+      "content": "该页面将会在 {{countdown}} 秒后自动刷新。",
+      "button": "强制刷新"
+    }
+  },
+  "explore": {
+    "plus": {
+      "submitToPlus": {
+        "label": "提交至 Frigate+",
+        "desc": "您希望避开的地点中的物体不应被视为误报。若将其作为误报提交，可能会导致AI模型容易混淆相关物体的识别。"
+      },
+      "review": {
+        "true.label": "为 Frigate Plus 确认此标签",
+        "true_one": "这是 {{label}}",
+        "true_other": "这是 {{label}}",
+        "false.label": "不为 Frigate Plus 确认此标签",
+        "false_one": "这不是 {{label}}",
+        "false_other": "这不是 {{label}}",
+        "state.submitted": "已提交"
+      }
+    },
+    "video": {
+      "viewInHistory": "在历史中查看"
+    }
+  },
+  "export": {
+    "time": {
+      "fromTimeline": "从时间线选择",
+      "lastHour_one": "最后1小时",
+      "lastHour_other": "最后 {{count}} 小时",
+      "custom": "自定义",
+      "start": "开始时间",
+      "start.label": "选择开始时间",
+      "end": "结束时间",
+      "end.label": "选择结束时间"
+    },
+    "name": {
+      "placeholder": "导出项目的名字"
+    },
+    "select": "选择",
+    "export": "导出",
+    "selectOrExport": "选择或导出",
+    "toast": {
+      "success": "导出成功。进入 /exports 目录查看文件。",
+      "error": {
+        "failed": "导出失败：{{error}}",
+        "endTimeMustAfterStartTime": "结束时间必须在开始时间之后",
+        "noVaildTimeSelected": "未选择有效的时间范围"
+      }
+    },
+    "fromTimeline": {
+      "saveExport": "保存导出",
+      "previewExport": "预览导出"
+    }
+  },
+  "streaming": {
+    "label": "视频流",
+    "restreaming": {
+      "NotEnabled": "重新流式传输未启用。",
+      "desc": "为此摄像头设置 go2rtc，以获取额外的实时预览选项和音频支持。",
+      "desc.readTheDocumentation": "阅读文档（英文） "
+    },
+    "showStats": {
+      "label": "显示视频流统计信息",
+      "desc": "启用后将在摄像头画面上叠加显示视频流统计信息。"
+    },
+    "debugView": "调试界面"
+  },
+  "search": {
+    "saveSearch": {
+      "label": "保存搜索",
+      "desc": "请为此已保存的搜索提供一个名称。",
+      "placeholder": "请输入搜索名称",
+      "overwrite": "{{searchName}} 已存在。保存将覆盖现有值。",
+      "success": "搜索 ({{searchName}}) 已保存。",
+      "button.save.label": "保存此搜索"
+    }
+  },
+  "recording": {
+    "confirmDelete": {
+        "title": "确认删除",
+        "desc": "您确定要删除与此审核项相关的所有录制视频吗？<br /><br />提示：按住 <em>Shift</em> 键点击删除可跳过此对话框。",
+        "desc.selected": "您确定要删除与此审核项相关的所有录制视频吗？<br /><br />提示：按住 <em>Shift</em> 键点击删除可跳过此对话框。"
+    },
+    "button": {
+        "export": "导出",
+        "markAsReviewed": "标记为已审核",
+        "deleteNow": "立即删除"
+    }
+  }
+}
--- a/web/public/locales/zh-CN/components/filter.json
+++ b/web/public/locales/zh-CN/components/filter.json
@@ -0,0 +1,108 @@
+{
+  "filter": "过滤器",
+  "labels": {
+    "label": "标签",
+    "all": "所有标签",
+    "all.short": "标签",
+    "count": "{{count}} 个标签"
+  },
+  "zones": {
+    "all": "所有区域",
+    "all.short": "区域"
+  },
+  "dates": {
+    "all": "所有日期",
+    "all.short": "日期"
+  },
+  "more": "更多筛选项",
+  "reset.label": "重置筛选器为默认值",
+  "timeRange": "时间范围",
+  "zones.label": "区域",
+  "subLabels": {
+    "label": "子标签",
+    "all": "所有子标签"
+  },
+  "score": "分值",
+  "estimatedSpeed": "预计速度（{{unit}}）",
+  "features": {
+    "label": "特性",
+    "hasSnapshot": "包含快照",
+    "hasVideoClip": "包含视频片段",
+    "submittedToFrigatePlus": {
+      "label": "提交至 Frigate+",
+      "tips": "你必须要先筛选具有快照的探测对象。<br /><br />没有快照的跟踪对象无法提交至 Frigate+."
+    }
+  },
+  "sort": {
+    "label": "排序",
+    "dateAsc": "日期 (正序)",
+    "dateDesc": "日期 (倒序)",
+    "scoreAsc": "对象分值 (正序)",
+    "scoreDesc": "对象分值 (倒序)",
+    "speedAsc": "预计速度 (正序)",
+    "speedDesc": "预计速度 (倒序)",
+    "relevance": "关联性"
+  },
+  "cameras": {
+    "label": "摄像头筛选",
+    "all": "所有摄像头",
+    "all.short": "摄像头"
+  },
+  "review": {
+    "showReviewed": "显示已查看的项目"
+  },
+  "motion": {
+    "showMotionOnly": "仅显示运动"
+  },
+  "explore": {
+    "settings": {
+      "title": "设置",
+      "defaultView": "默认视图",
+      "defaultView.desc": "当未选择任何过滤器时，显示每个标签最近跟踪对象的摘要，或显示未过滤的网格。",
+      "defaultView.summary": "摘要",
+      "defaultView.unfilteredGrid": "未过滤网格",
+      "gridColumns": "网格列数",
+      "gridColumns.desc": "选择网格视图中的列数。",
+      "searchSource": {
+        "label": "搜索源",
+        "desc": "选择是搜索缩略图还是跟踪对象的描述。",
+        "options": {
+          "thumbnailImage": "缩略图",
+          "description": "描述"
+        }
+      },
+      "date": {
+        "selectDateBy": {
+          "label": "选择日期进行筛选"
+        }
+      }
+    }
+  },
+  "logSettings": {
+    "label": "日志级别筛选",
+    "filterBySeverity": "按严重程度筛选日志",
+    "loading": "加载中",
+    "loading.desc": "当日志面板滚动到底部时，新的日志会自动流式加载。",
+    "disableLogStreaming": "禁用日志流式加载",
+    "allLogs": "所有日志"
+  },
+  "trackedObjectDelete": {
+    "title": "确认删除",
+    "desc": "删除这 {{objectLength}} 个跟踪对象将移除快照、任何已保存的嵌入和任何相关的对象生命周期条目。历史视图中这些跟踪对象的录制片段将<em>不会</em>被删除。<br /><br />您确定要继续吗？<br /><br />按住 <em>Shift</em> 键可在将来跳过此对话框。",
+    "toast": {
+      "success": "跟踪对象删除成功。",
+      "error": "删除跟踪对象失败：{{errorMessage}}"
+    }
+  },
+  "zoneMask": {
+    "filterBy": "按区域遮罩筛选"
+  },
+  "recognizedLicensePlates": {
+    "title": "识别的车牌",
+    "loadFailed": "加载识别的车牌失败。",
+    "loading": "正在加载识别的车牌...",
+    "placeholder": "输入以搜索车牌...",
+    "noLicensePlatesFound": "未找到车牌。",
+    "selectPlatesFromList": "从列表中选择一个或多个车牌。"
+  }
+}
--- a/web/public/locales/zh-CN/components/icons.json
+++ b/web/public/locales/zh-CN/components/icons.json
@@ -0,0 +1,8 @@
+{
+    "iconPicker": {
+        "selectIcon": "选择图标",
+        "search": {
+            "placeholder": "搜索图标..."
+        }
+    }
+}
--- a/web/public/locales/zh-CN/components/input.json
+++ b/web/public/locales/zh-CN/components/input.json
@@ -0,0 +1,10 @@
+{
+    "button": {
+        "downloadVideo": {
+            "label": "下载视频",
+            "toast": {
+                "success": "下载成功"
+            }
+        }
+    }
+}
--- a/web/public/locales/zh-CN/components/player.json
+++ b/web/public/locales/zh-CN/components/player.json
@@ -0,0 +1,39 @@
+{
+    "noRecordingsFoundForThisTime": "找不到此次录制",
+    "noPreviewFound": "没有找到预览",
+    "noPreviewFoundFor": "没有在 {{cameraName}} 下找到预览",
+    "submitFrigatePlus": {
+        "title": "提交此帧到 Frigate+？",
+        "submit": "提交"
+    },
+    "livePlayerRequiredIOSVersion": "此直播流类型需要 iOS 17.1 或更高版本。",
+    "streamOffline": {
+        "title": "视频流离线",
+        "desc": "未在 {{cameraName}} 的 <code>detect</code> 流上接收到任何帧，请检查错误日志"
+    },
+    "cameraDisabled": "摄像机已禁用",
+    "stats": {
+        "streamType": "流类型：",
+        "streamType.short": "类型",
+        "bandwidth": "带宽：",
+        "bandwidth.short": "带宽",
+        "latency": "延迟：",
+        "latency.short": "延迟",
+        "latency.value": "{{secounds}} 秒",
+        "latency.short.value": "{{secounds}} 秒",
+        "totalFrames": "总帧数：",
+        "droppedFrames": "丢帧数：",
+        "droppedFrames.short": "丢帧",
+        "droppedFrames.short.value": "{{droppedFrames}} 帧",
+        "decodedFrames": "解码帧数：",
+        "droppedFrameRate": "丢帧率："
+    },
+    "toast": {
+        "success": {
+            "submittedFrigatePlus": "已成功提交帧到 Frigate+"
+        },
+        "error": {
+            "submitFrigatePlusFailed": "提交帧到 Frigate+ 失败"
+        }
+    }
+}
--- a/web/public/locales/zh-CN/objects.json
+++ b/web/public/locales/zh-CN/objects.json
@@ -0,0 +1,104 @@
+{
+  "person": "人",
+  "bicycle": "自行车",
+  "car": "汽车",
+  "motorcycle": "摩托车",
+  "airplane": "飞机",
+  "bus": "公交车",
+  "train": "火车",
+  "boat": "船",
+  "traffic_light": "交通灯",
+  "fire_hydrant": "消防栓",
+  "street_sign": "路标",
+  "stop_sign": "停车标志",
+  "parking_meter": "停车计时器",
+  "bench": "长椅",
+  "bird": "鸟",
+  "cat": "猫",
+  "dog": "狗",
+  "horse": "马",
+  "sheep": "羊",
+  "cow": "牛",
+  "elephant": "大象",
+  "bear": "熊",
+  "zebra": "斑马",
+  "giraffe": "长颈鹿",
+  "hat": "帽子",
+  "backpack": "背包",
+  "umbrella": "雨伞",
+  "shoe": "鞋子",
+  "eye_glasses": "眼镜",
+  "handbag": "手提包",
+  "tie": "领带",
+  "suitcase": "手提箱",
+  "frisbee": "飞盘",
+  "skis": "滑雪板",
+  "snowboard": "滑雪板",
+  "sports_ball": "运动球",
+  "kite": "风筝",
+  "baseball_bat": "棒球棒",
+  "baseball_glove": "棒球手套",
+  "skateboard": "滑板",
+  "surfboard": "冲浪板",
+  "tennis_racket": "网球拍",
+  "bottle": "瓶子",
+  "plate": "盘子",
+  "wine_glass": "酒杯",
+  "cup": "杯子",
+  "fork": "叉子",
+  "knife": "刀",
+  "spoon": "勺子",
+  "bowl": "碗",
+  "banana": "香蕉",
+  "apple": "苹果",
+  "sandwich": "三明治",
+  "orange": "橙子",
+  "broccoli": "西兰花",
+  "carrot": "胡萝卜",
+  "hot_dog": "热狗",
+  "pizza": "披萨",
+  "donut": "甜甜圈",
+  "cake": "蛋糕",
+  "chair": "椅子",
+  "couch": "沙发",
+  "potted_plant": "盆栽植物",
+  "bed": "床",
+  "mirror": "镜子",
+  "dining_table": "餐桌",
+  "window": "窗户",
+  "desk": "桌子",
+  "toilet": "厕所",
+  "door": "门",
+  "tv": "电视",
+  "laptop": "笔记本电脑",
+  "mouse": "鼠标",
+  "remote": "遥控器",
+  "keyboard": "键盘",
+  "cell_phone": "手机",
+  "microwave": "微波炉",
+  "oven": "烤箱",
+  "toaster": "烤面包机",
+  "sink": "水槽",
+  "refrigerator": "冰箱",
+  "blender": "搅拌机",
+  "book": "书",
+  "clock": "时钟",
+  "vase": "花瓶",
+  "scissors": "剪刀",
+  "teddy_bear": "泰迪熊",
+  "hair_dryer": "吹风机",
+  "toothbrush": "牙刷",
+  "hair_brush": "发刷",
+  "vehicle": "车辆",
+  "squirrel": "松鼠",
+  "deer": "鹿",
+  "animal": "动物",
+  "bark": "树皮",
+  "fox": "狐狸",
+  "goat": "山羊",
+  "rabbit": "兔子",
+  "raccoon": "浣熊",
+  "robot_lawnmower": "自动割草机",
+  "waste_bin": "垃圾桶",
+  "on_demand": "手动"
+}
--- a/web/public/locales/zh-CN/views/configEditor.json
+++ b/web/public/locales/zh-CN/views/configEditor.json
@@ -0,0 +1,15 @@
+{
+    "documentTitle": "配置编辑器 - Frigate",
+    "configEditor": "配置编辑器",
+    "copyConfig": "复制配置",
+    "saveAndRestart": "保存并重启",
+    "saveOnly": "只保存",
+    "toast": {
+        "success": {
+            "copyToClipboard": "配置已复制到剪贴板。"
+        },
+        "error": {
+            "savingError": "保存配置时出错"
+        }
+    }
+}
--- a/web/public/locales/zh-CN/views/events.json
+++ b/web/public/locales/zh-CN/views/events.json
@@ -0,0 +1,35 @@
+{
+  "alerts": "警告",
+  "detections": "检测",
+  "motion": {
+    "label": "运动",
+    "only": "仅运动画面"
+  },
+  "allCameras": "所有摄像头",
+  "empty": {
+    "alert": "还没有“警告”类回放",
+    "detection": "还没有“探测”类回放",
+    "motion": "还没有运动类数据"
+  },
+  "timeline": "时间线",
+  "timeline.aria": "选择时间线",
+  "events": {
+    "label": "事件",
+    "aria": "选择事件",
+    "noFoundForTimePeriod": "未找到该时间段的事件。"
+  },
+  "documentTitle": "预览 - Frigate",
+  "recordings": {
+    "documentTitle": "回放 - Frigate"
+  },
+  "calendarFilter": {
+    "last24Hours": "过去24小时"
+  },
+  "markAsReviewed": "标记为已审核",
+  "markTheseItemsAsReviewed": "将这些项目标记为已审核",
+  "newReviewItems": {
+    "label": "查看新的审核项目",
+    "button": "新的待审核项目"
+  },
+  "camera": "摄像头"
+}
--- a/web/public/locales/zh-CN/views/explore.json
+++ b/web/public/locales/zh-CN/views/explore.json
@@ -0,0 +1,175 @@
+{
+  "documentTitle": "探索 - Frigate",
+  "generativeAI": "生成式 AI",
+  "exploreIsUnavailable": {
+    "title": "探索功能不可用",
+    "embeddingsReindexing": {
+      "context": "跟踪对象嵌入重新索引完成后，可以使用探索功能。",
+      "startingUp": "启动中...",
+      "estimatedTime": "预计剩余时间：",
+      "finishingShortly": "即将完成",
+      "step": {
+        "thumbnailsEmbedded": "缩略图嵌入：",
+        "descriptionsEmbedded": "描述嵌入：",
+        "trackedObjectsProcessed": "跟踪对象已处理："
+      }
+    },
+    "downloadingModels": {
+      "context": "Frigate正在下载支持语义搜索功能所需的嵌入模型。根据网络连接速度，这可能需要几分钟。",
+      "setup": {
+        "visionModel": "视觉模型",
+        "visionModelFeatureExtractor": "视觉模型特征提取器",
+        "textModel": "文本模型",
+        "textTokenizer": "文本分词器"
+      },
+      "tips": {
+        "context": "模型下载完成后，您可能需要重新索引跟踪对象的嵌入。",
+        "documentation": "阅读文档（英文）"
+      },
+      "error": "发生错误。请检查Frigate日志。"
+    }
+  },
+  "trackedObjectDetails": "探测对象详情",
+  "type": {
+    "details": "详情",
+    "snapshot": "快照",
+    "video": "视频",
+    "object_lifecycle": "对象生命周期"
+  },
+  "objectLifecycle": {
+    "title": "对象生命周期",
+    "noImageFound": "未找到此时间戳的图像。",
+    "createObjectMask": "创建对象遮罩",
+    "adjustAnnotationSettings": "调整标注设置",
+    "scrollViewTips": "滚动查看此对象生命周期的重要时刻。",
+    "autoTrackingTips": "自动跟踪摄像头的边界框位置可能不准确。",
+    "lifecycleItemDesc": {
+      "visible": "检测到 {{label}}",
+      "entered_zone": "{{label}} 进入 {{zones}}",
+      "active": "{{label}} 变为活动状态",
+      "stationary": "{{label}} 变为静止状态",
+      "attribute": {
+        "faceOrLicense_plate": "检测到 {{label}} 的 {{attribute}}",
+        "other": "{{label}} 识别为 {{attribute}}"
+      },
+      "gone": "{{label}} 离开",
+      "heard": "听到 {{label}}",
+      "external": "检测到 {{label}}"
+    },
+    "annotationSettings": {
+      "title": "标注设置",
+      "showAllZones": "显示所有区域",
+      "showAllZones.desc": "在对象进入区域的帧上始终显示区域。",
+      "offset": {
+        "label": "标注偏移",
+        "desc": "这些数据来自摄像头的检测源，但是叠加在录制源的图像上。这两个流不太可能完全同步。因此，边界框和录像不会完全对齐。但是，可以使用 <code>annotation_offset</code> 字段来调整这个问题。",
+        "documentation": "阅读文档（英文） ",
+        "millisecondsToOffset": "检测标注的偏移毫秒数。<em>默认值：0</em>",
+        "tips": "提示：假设有一个人从左向右走的事件片段。如果事件时间线上的边界框始终在人的左侧，则应该减小该值。同样，如果一个人从左向右走，而边界框始终在人的前面，则应该增加该值。"
+      }
+    },
+    "carousel": {
+      "previous": "上一张",
+      "next": "下一张"
+    }
+  },
+  "details": {
+    "item": {
+      "title": "回放项目详情",
+      "desc": "回放项目详情",
+      "button": {
+        "share": "分享该回放",
+        "viewInExplore": "在探测中查看"
+      },
+      "tips": {
+        "mismatch_one": "检测到 {{count}} 个不可用的对象，并已包含在此审核项中。这些对象可能未达到警告或检测标准，或者已被清理/删除。",
+        "mismatch_other": "检测到 {{count}} 个不可用的对象，并已包含在此审核项中。这些对象可能未达到警告或检测标准，或者已被清理/删除。",
+        "hasMissingObjects": "如果希望 Frigate 保存以下标签的跟踪对象，请调整您的配置：<em>{{objects}}</em>"
+      },
+      "toast": {
+        "success": {
+          "regenerate": "已向 {{provider}} 请求新的描述。根据提供商的速度，生成新描述可能需要一些时间。",
+          "updatedSublabel": "成功更新子标签。"
+        },
+        "error": {
+          "regenerate": "调用 {{provider}} 生成新描述失败：{{errorMessage}}",
+          "updatedSublabelFailed": "更新子标签失败：{{errorMessage}}"
+        }
+      }
+    },
+    "label": "标签",
+    "editSubLable": "编辑子标签",
+    "editSubLable.desc": "为 {{label}} 输入新的子标签",
+    "editSubLable.desc.noLabel": "为此跟踪对象输入新的子标签",
+    "topScore": "最高得分",
+    "topScore.info": "最高分是跟踪对象的最高中位数得分，因此可能与搜索结果缩略图上显示的得分不同。",
+    "estimatedSpeed": "预计速度",
+    "objects": "对象",
+    "camera": "摄像头",
+    "zones": "区域",
+    "timestamp": "时间",
+    "button": {
+      "findSimilar": "查找相似项"
+    },
+    "description": {
+      "label": "描述",
+      "placeholder": "跟踪对象的描述",
+      "aiTips": "在跟踪对象的生命周期结束之前，Frigate 不会向您的生成式 AI 提供商请求描述。"
+    },
+    "button.regenerate": "重新生成",
+    "button.regenerate.label": "重新生成跟踪对象描述",
+    "expandRegenerationMenu": "展开重新生成菜单",
+    "regenerateFromSnapshot": "从快照重新生成",
+    "regenerateFromThumbnails": "从缩略图重新生成",
+    "tips": {
+      "descriptionSaved": "已保存描述",
+      "saveDescriptionFailed": "更新描述失败：{{errorMessage}}"
+    }
+  },
+  "itemMenu": {
+    "downloadVideo": {
+      "label": "下载视频",
+      "aria": "下载视频"
+    },
+    "downloadSnapshot": {
+      "label": "下载快照",
+      "aria": "下载快照"
+    },
+    "viewObjectLifecycle": {
+      "label": "查看对象生命周期",
+      "aria": "显示对象的生命周期"
+    },
+    "findSimilar": {
+      "label": "查找相似项",
+      "aria": "查看相似的对象"
+    },
+    "submitToPlus": {
+      "label": "提交至 Frigate+",
+      "aria": "提交至 Frigate Plus"
+    },
+    "viewInHistory": {
+      "label": "在历史记录中查看",
+      "aria": "在历史记录中查看"
+    },
+    "deleteTrackedObject": {
+      "label": "删除此跟踪对象"
+    }
+  },
+  "dialog": {
+    "confirmDelete": {
+      "title": "确认删除",
+      "desc": "删除此跟踪对象将移除快照、所有已保存的嵌入数据以及任何关联的对象生命周期条目。但在历史视图中的录制视频<em>不会</em>被删除。<br /><br />你确定要继续删除吗？"
+    }
+  },
+  "noTrackedObjects": "找不到探测的对象",
+  "fetchingTrackedObjectsFailed": "获取跟踪对象失败：{{errorMessage}}",
+  "trackedObjectsCount": "{{count}} 个跟踪对象",
+  "searchResult": {
+    "deleteTrackedObject": {
+      "toast": {
+        "success": "跟踪对象删除成功。",
+        "error": "删除跟踪对象失败：{{errorMessage}}"
+      }
+    }
+  }
+}
--- a/web/public/locales/zh-CN/views/exports.json
+++ b/web/public/locales/zh-CN/views/exports.json
@@ -0,0 +1,17 @@
+{
+    "documentTitle": "导出 - Frigate",
+    "search": "搜索",
+    "noExports": "没有找到导出的项目",
+    "deleteExport": "删除导出的项目",
+    "deleteExport.desc": "你确定要删除 {{exportName}} 吗？",
+    "editExport": {
+        "title": "重命名导出",
+        "desc": "为此导出项目输入新名称。",
+        "saveExport": "保存导出"
+    },
+    "toast": {
+        "error": {
+            "renameExportFailed": "重命名导出失败：{{errorMessage}}"
+        }
+    }
+}
--- a/web/public/locales/zh-CN/views/faceLibrary.json
+++ b/web/public/locales/zh-CN/views/faceLibrary.json
@@ -0,0 +1,41 @@
+{
+    "documentTitle": "人脸库 - Frigate",
+    "uploadFaceImage": {
+        "title": "上传人脸图片",
+        "desc": "上传图片以扫描人脸并包含在{{pageToggle}}中"
+    },
+    "createFaceLibrary": {
+        "title": "创建人脸库",
+        "desc": "创建一个新的人脸库"
+    },
+    "train": {
+        "title": "训练",
+        "aria": "选择训练"
+    },
+    "selectItem": "选择{{item}}",
+    "button": {
+        "deleteFaceAttempts": "尝试删除人脸",
+        "addFace": "添加人脸",
+        "uploadImage": "上传图片",
+        "reprocessFace:": "重新处理人脸"
+    },
+    "trainFaceAs:": "将人脸训练为：",
+    "trainFaceAsPerson:": "将人脸训练为人物",
+    
+    "toast": {
+        "success": {
+            "uploadedImage": "图片上传成功。",
+            "addFaceLibrary": "人脸库添加成功。",
+            "deletedFace": "人脸删除成功。",
+            "trainedFace": "人脸训练成功。",
+            "updatedFaceScore": "人脸分数更新成功。"
+        },
+        "error": {
+            "uploadingImageFailed": "图片上传失败：{{errorMessage}}",
+            "addFaceLibraryFailed": "设置人脸名称失败：{{errorMessage}}",
+            "deleteFaceFailed": "删除失败：{{errorMessage}}",
+            "trainFailed": "训练失败：{{errorMessage}}",
+            "updateFaceScoreFailed": "更新人脸分数失败：{{errorMessage}}"
+        }
+    }
+}
--- a/web/public/locales/zh-CN/views/live.json
+++ b/web/public/locales/zh-CN/views/live.json
@@ -0,0 +1,154 @@
+{
+  "documentTitle": "实时监控 - Frigate",
+  "documentTitle.withCamera": "{{camera}} - 实时监控 - Frigate",
+  "lowBandwidthMode": "低带宽模式",
+  "twoWayTalk": {
+    "enable": "开启双向对话",
+    "disable": "关闭双向对话"
+  },
+  "cameraAudio": {
+    "enable": "开启摄像头音频",
+    "disable": "关闭摄像头音频"
+  },
+  "ptz": {
+    "move": {
+      "clickMove": {
+        "label": "点击画面以使摄像头居中",
+        "enable": "启用点击移动",
+        "disable": "禁用点击移动"
+      },
+      "left": {
+        "label": "PTZ摄像头向左移动"
+      },
+      "up": {
+        "label": "PTZ摄像头向上移动"
+      },
+      "down": {
+        "label": "PTZ摄像头向下移动"
+      },
+      "right": {
+        "label": "PTZ摄像头向右移动"
+      }
+    },
+    "zoom": {
+      "in": {
+        "label": "PTZ摄像头放大"
+      },
+      "out": {
+        "label": "PTZ摄像头缩小"
+      }
+    },
+    "frame": {
+      "center": {
+        "label": "点击将PTZ摄像头画面居中"
+      }
+    },
+    "presets": "PTZ摄像头预设"
+  },
+  "camera": {
+    "enable": "开启摄像头",
+    "disable": "关闭摄像头"
+  },
+  "muteCameras": {
+    "enable": "屏蔽所有摄像头",
+    "disable": "取消屏蔽所有摄像头"
+  },
+  "detect": {
+    "enable": "启用检测",
+    "disable": "关闭检测"
+  },
+  "recording": {
+    "enable": "启用录制",
+    "disable": "关闭录制"
+  },
+  "snapshots": {
+    "enable": "启用快照",
+    "disable": "关闭快照"
+  },
+  "audioDetect": {
+    "enable": "启用音频检测",
+    "disable": "关闭音频检测"
+  },
+  "autotracking": {
+    "enable": "启用自动追踪",
+    "disable": "关闭自动追踪"
+  },
+  "streamStats": {
+    "enable": "显示视频流统计信息",
+    "disable": "隐藏视频流统计信息"
+  },
+  "manualRecording": {
+    "title": "按需录制",
+    "tips": "根据此摄像机的录制保留设置，手动启动事件。",
+    "playInBackground": {
+      "label": "后台播放",
+      "desc": "启用此选项可在播放器隐藏时继续视频流播放。"
+    },
+    "showStats": {
+      "label": "显示统计信息",
+      "desc": "启用此选项可在摄像机画面上叠加显示视频流统计信息。"
+    },
+    "debugView": "调试视图",
+    "start": "开始手动按需录制",
+    "started": "已启用手动按需录制",
+    "failedToStart": "启动手动录制失败",
+    "recordDisabledTips": "由于此摄像头的配置中禁用了录制或对其进行了限制，将只会保存快照。",
+    "end": "停止手动按需录制",
+    "ended": "已完成手动按需录制",
+    "failedToEnd": "停止手动录制失败"
+  },
+  "streamingSettings": "视频流设置",
+  "notifications": "通知",
+  "audio": "音频",
+  "suspend": {
+    "forTime": "暂停时长："
+  },
+  "stream": {
+    "title": "视频流",
+    "audio": {
+      "tips": "音频必须从摄像机输出并在 go2rtc 中配置为此视频流使用。",
+      "tips.documentation": "阅读文档 ",
+      "available": "此视频流支持音频",
+      "unavailable": "此视频流不支持音频"
+    },
+    "twoWayTalk": {
+      "tips": "您的设备必须支持此功能，并且必须配置 WebRTC 以支持双向对讲。",
+      "tips.documentation": "阅读文档 ",
+      "available": "此视频流支持双向对讲",
+      "unavailable": "此视频流不支持双向对讲"
+    },
+    "lowBandwidth": {
+      "tips": "由于缓冲或视频流错误，实时视图处于低带宽模式。",
+      "resetStream": "重置视频流"
+    },
+    "playInBackground": {
+      "label": "后台播放",
+      "tips": "启用此选项可在播放器隐藏时继续视频流播放。"
+    }
+  },
+  "cameraSettings": {
+    "title": "{{camera}} 设置",
+    "cameraEnabled": "摄像机已启用",
+    "objectDetection": "对象检测",
+    "recording": "录制",
+    "snapshots": "快照",
+    "audioDetection": "音频检测",
+    "autotracking": "自动跟踪"
+  },
+  "history": {
+    "label": "显示历史录像"
+  },
+  "effectiveRetainMode": {
+    "modes": {
+      "all": "全部",
+      "motion": "运动",
+      "active_objects": "活动对象"
+    },
+    "notAllTips": "您的 {{source}} 录制保留配置设置为 <code>mode: {{effectiveRetainMode}}</code>，因此此按需录制将仅保留包含 {{effectiveRetainModeName}} 的片段。"
+  },
+  "editLayout": {
+    "label": "编辑布局",
+    "group.label": "编辑摄像机分组",
+    "exitEdit": "退出编辑"
+}
+}
--- a/web/public/locales/zh-CN/views/recording.json
+++ b/web/public/locales/zh-CN/views/recording.json
@@ -0,0 +1,12 @@
+{
+    "export": "导出",
+    "calendar": "日历",
+    "filter": "筛选",
+    "filters": "筛选条件",
+    "toast": {
+        "error": {
+            "noValidTimeSelected": "未选择有效的时间范围",
+            "endTimeMustAfterStartTime": "结束时间必须晚于开始时间"
+        }
+    }
+}
--- a/web/public/locales/zh-CN/views/search.json
+++ b/web/public/locales/zh-CN/views/search.json
@@ -0,0 +1,65 @@
+{
+    "search": "搜索",
+    "savedSearches": "已保存的搜索",
+    "searchFor": "搜索 {{inputValue}}",
+    "button": {
+        "clear": "清除搜索",
+        "save": "保存搜索",
+        "delete": "删除已保存的搜索",
+        "filterInformation": "筛选信息",
+        "filterActive": "筛选器已激活"
+    },
+    "trackedObjectId": "跟踪对象 ID",
+    "filter": {
+        "label": {
+            "cameras": "摄像机",
+            "labels": "标签",
+            "zones": "区域",
+            "sub_labels": "子标签",
+            "search_type": "搜索类型",
+            "time_range": "时间范围",
+            "before": "之前",
+            "after": "之后",
+            "min_score": "最低分数",
+            "max_score": "最高分数",
+            "min_speed": "最低速度",
+            "max_speed": "最高速度",
+            "recognized_license_plate": "识别的车牌",
+            "has_clip": "包含片段",
+            "has_snapshot": "包含快照"
+        },
+        "searchType": {
+            "thumbnail": "缩略图", 
+            "description": "描述"
+        },
+        "toast": {
+            "error": {
+                "beforeDateBeLaterAfter": "“之前”日期必须晚于“之后”日期。",
+                "afterDatebeEarlierBefore": "“之后”日期必须早于“之前”日期。",
+                "minScoreMustBeLessOrEqualMaxScore": "最小分值 必须小于或等于 最大分值。",
+                "maxScoreMustBeGreaterOrEqualMinScore": "最大分值 必须大于或等于 最小分值",
+                "minSpeedMustBeLessOrEqualMaxSpeed": "最低速度 必须小于或等于 最高速度",
+                "maxSpeedMustBeGreaterOrEqualMinSpeed": "最高速度 必须大于或等于 最低速度"
+            }
+        },
+        "tips": {
+            "title": "如何使用文本筛选器（英文）",
+            "desc": "筛选器可帮助您缩小搜索范围。注意，目前还暂不支持中文搜索。以下是在输入字段中使用筛选器的方法：",
+            "desc.step": "<ul className=\"list-disc pl-5 text-sm text-primary-variant\"><li>输入筛选器名称后跟一个冒号（例如：“cameras:”）。</li><li>从建议中选择一个值或输入您自己的值。</li><li>使用多个筛选器时，可以在它们之间用空格分隔。</li><li>日期筛选器（before: 和 after:）使用 <em>{{DateFormat}}</em> 格式。</li><li>时间范围筛选器使用 <em>{{exampleTime}}</em> 格式。</li><li>点击筛选器旁边的“x”即可移除筛选条件。</li></ul>",
+            "desc.example": "示例：<code className=\"text-primary\">cameras:front_door label:person before:01012024 time_range:3:00PM-4:00PM</code>"
+        },
+        "header": {
+            "currentFilterType": "筛选值",
+            "noFilters": "筛选条件",
+            "activeFilters": "激活的筛选项"
+        }
+    },
+    "similaritySearch": {
+        "title": "相似搜索",
+        "active": "相似搜索已激活",
+        "clear": "清除相似搜索"
+    },
+    "placeholder": {
+        "search": "搜索..."
+    }
+}
--- a/web/public/locales/zh-CN/views/settings.json
+++ b/web/public/locales/zh-CN/views/settings.json
@@ -0,0 +1,433 @@
+{
+  "documentTitle": {
+    "default": "设置 - Frigate",
+    "authentication": "身份验证设置 - Frigate",
+    "camera": "摄像头设置 - Frigate",
+    "classification": "分类设置 - Frigate",
+    "masksAndZones": "遮罩和区域编辑器 - Frigate",
+    "motionTuner": "运动调整器 - Frigate",
+    "object": "对象设置 - Frigate",
+    "general": "常规设置 - Frigate"
+  },
+  "dialog": {
+    "unsavedChanges": {
+      "title": "你有未保存的更改。",
+      "desc": "是否要在继续之前保存更改？"
+    }
+  },
+  "menu": {
+    "uiSettings": "界面设置",
+    "classificationSettings": "分类设置",
+    "cameraSettings": "摄像头设置",
+    "masksAndZones": "遮罩/ 区域",
+    "motionTuner": "运动调整器",
+    "debug": "调试",
+    "users": "用户",
+    "notifications": "通知"
+  },
+  "general": {
+    "title": "常规设置",
+    "liveDashboard": {
+      "title": "实时监控面板",
+      "automaticLiveView": {
+        "label": "自动实时预览",
+        "desc": "检测到画面活动时将自动切换至该摄像头实时画面。禁用此选项会导致实时监控页面的摄像头图像每分钟只更新一次。"
+      },
+      "playAlertVideos": {
+        "label": "播放警告视频",
+        "desc": "默认情况下，实时监控页面上的最新警告会以一小段循环的形式进行播放。禁用此选项将仅显示浏览器本地缓存的静态图片。"
+      }
+    },
+    "storedLayouts": {
+      "title": "存储监控面板布局",
+      "desc": "可以在监控面板调整或拖动摄像头的布局。这些设置将保存在浏览器的本地存储中。",
+      "clearAll": "清除所有布局"
+    },
+    "cameraGroupStreaming": {
+      "title": "摄像头组视频流设置",
+      "desc": "每个摄像头组的视频流设置将保存在浏览器的本地存储中。",
+      "clearAll": "清除所有视频流设置"
+    },
+    "recordingsViewer": {
+      "title": "回放查看",
+      "defaultPlaybackRate": {
+        "label": "默认播放速率",
+        "desc": "调整播放录像时默认的速率。"
+      }
+    },
+    "calendar": {
+      "title": "日历",
+      "firstWeekday": {
+        "label": "每周第一天",
+        "desc": "设置每周第一天是星期几。",
+        "sunday": "星期天",
+        "monday": "星期一"
+      }
+    },
+    "toast": {
+      "success": {
+        "clearStoredLayout": "已清除 {{cameraName}} 的存储布局",
+        "clearStreamingSettings": "已清除所有摄像头组的视频流设置。"
+      },
+      "error": {
+        "clearStoredLayoutFailed": "清除存储布局失败：{{errorMessage}}",
+        "clearStreamingSettingsFailed": "清除视频流设置失败：{{errorMessage}}"
+      }
+    }
+  },
+  "classification": {
+    "title": "分类设置",
+    "semanticSearch": {
+      "title": "语义搜索",
+      "desc": "Frigate的语义搜索能够让你使用自然语言根据图像本身、自定义的文本描述或自动生成的描述来搜索视频。",
+      "readTheDocumentation": "阅读文档（英文）",
+      "reindexOnStartup": {
+        "label": "启动时重新索引",
+        "desc": "每次启动将重新索引并重新处理所有缩略图和描述。<em>关闭该设置后不要忘记重启！</em>"
+      },
+      "modelSize": {
+        "label": "模型大小",
+        "desc": "用于语义搜索的语言模型大小",
+        "small": "小",
+        "large": "大",
+        "small.desc": "使用 <strong>小</strong>模型。该模型将使用较少的内存，在CPU上也能较快的运行。质量较好。",
+        "large.desc": "使用 <strong>大</strong>模型。该模型采用了完整的Jina模型，并在适用的情况下使用GPU。"
+      }
+    },
+    "faceRecognition": {
+      "title": "人脸识别",
+      "desc": "人脸识别功能允许为人物分配名称，当识别到他们的面孔时，Frigate 会将人物的名字作为子标签进行分配。这些信息会显示在界面、过滤器以及通知中。",
+      "readTheDocumentation": "阅读文档（英文）"
+    },
+    "licensePlateRecognition": {
+      "title": "车牌识别",
+      "desc": "Frigate 可以识别车辆的车牌，并自动将检测到的字符添加到 recognized_license_plate 字段中，或将已知名称作为子标签添加到汽车类型的对象中。常见的使用场景可能是读取驶入车道的汽车车牌或经过街道的汽车车牌。",
+      "readTheDocumentation": "阅读文档（英文）"
+    },
+    "toast": {
+      "success": "分类设置已保存。",
+      "error": "保存配置更改失败：{{errorMessage}}"
+    }
+  },
+  "camera": {
+    "title": "摄像头设置",
+    "streams": {
+      "title": "视频流",
+      "desc": "禁用摄像头将完全停止 Frigate 对该摄像头视频流的处理。检测、录制和调试功能都将不可用。<br /><em>注意：该选项不会禁用 go2rtc 转播。</em>"
+    },
+    "review": {
+      "title": "预览",
+      "desc": "启用/禁用摄像头的警报和检测。禁用后，不会生成新的预览项。",
+      "alerts": "警告 ",
+      "detections": "检测 "
+    },
+    "reviewClassification": {
+      "title": "预览分级",
+      "desc": "Frigate 将回放项目分为“警告”和“检测”。默认情况下，所有的 <em>人</em>、<em>汽车</em> 的对象都视为警告。你可以通过修改配置文件配置区域来细分。",
+      "readTheDocumentation": "阅读文档（英文）",
+      "noDefinedZones": "该摄像头没有设置区域。",
+      "objectAlertsTips": "所有的 {{alertsLabels}} 对象在 {{cameraName}} 都将显示为警告。",
+      "zoneObjectAlertsTips": "所有的 {{alertsLabels}} 对象在 {{cameraName}} 的 {{zone}} 区域都将显示为警告。",
+      "objectDetectionsTips": "所有未在 {{cameraName}} 归类的 {{detectionsLabels}} 对象，无论它位于哪个区域，都将显示为检测。",
+      "zoneObjectDetectionsTips": "所有未在 {{cameraName}} 上归类为 {{detectionsLabels}} 的对象在 {{zone}} 区域都将显示为检测。",
+      "zoneObjectDetectionsTips.notSelectDetections": "所有在 {{cameraName}} 的 {{zone}} 上检测到的未归类为警告的 {{detectionsLabels}} 对象，无论它位于哪个区域，都将显示为检测。",
+      "zoneObjectDetectionsTips.regardlessOfZoneObjectDetectionsTips": "所有未在 {{cameraName}} 归类的 {{detectionsLabels}} 对象，无论它位于哪个区域，都将显示为检测。",
+      "selectAlertsZones": "选择要显示为警告的区域",
+      "selectDetectionsZones": "选择检测区域",
+      "limitDetections": "限制仅在特定区域内进行检测",
+      "toast": {
+        "success": "预览分级配置已保存。请重启 Frigate 以应用更改。"
+      }
+    }
+  },
+  "masksAndZones": {
+    "filter": {
+      "all": "所有遮罩和区域"
+    },
+    "toast": {
+      "success": {
+        "copyCoordinates": "已复制 {{polyName}} 的坐标到剪贴板。"
+      },
+      "error": {
+        "copyCoordinatesFailed": "无法复制坐标到剪贴板。"
+      }
+    },
+    "form": {
+      "zoneName": {
+        "error": {
+          "mustBeAtLeastTwoCharacters": "区域名称必须至少包含 2 个字符。",
+          "mustNotBeSameWithCamera": "区域名称不能与摄像头名称相同。",
+          "alreadyExists": "该摄像头已有相同的区域名称。",
+          "mustNotContainPeriod": "区域名称不能包含句点。",
+          "hasIllegalCharacter": "区域名称包含非法字符。"
+        }
+      },
+      "distance.error": "距离必须大于或等于 0.1。",
+      "distance.error.mustBeFilled": "所有距离字段必须填写才能使用速度估算。",
+      "inertia.error.mustBeAboveZero": "惯性必须大于 0。",
+      "loiteringTime.error.mustBeGreaterOrEqualZero": "徘徊时间必须大于或等于 0。",
+      "polygonDrawing": {
+        "removeLastPoint": "删除最后一个点",
+        "reset.label": "清除所有点",
+        "snapPoints": {
+          "true": "启用点对齐",
+          "false": "禁用点对齐"
+        },
+        "delete": {
+          "title": "确认删除",
+          "desc": "你确定要删除{{type}} <em>{{name}}</em> 吗？",
+          "success": "{{name}} 已被删除。"
+        },
+        "error": {
+          "mustBeFinished": "多边形绘制必须完成闭合后才能保存。"
+        }
+      }
+    },
+    "zones": {
+      "label": "区域",
+      "documentTitle": "编辑区域 - Frigate",
+      "desc": "该功能允许你定义特定区域，以便你可以确定特定对象是否在该区域内。",
+      "desc.documentation": "文档（英文）",
+      "add": "添加区域",
+      "edit": "编辑区域",
+      "point_one": "{{count}} 点",
+      "point_other": "{{count}} 点",
+      "clickDrawPolygon": "在图像上点击添加点绘制多边形区域。",
+      "name": "区域名称",
+      "name.inputPlaceHolder": "请输入名称",
+      "name.tips": "名称至少包含两个字符，且不能和摄像头或其他区域同名。<br>当前仅支持英文与数字组合",
+      "inertia": "惯性",
+      "inertia.desc": "识别指定对象前该对象必须在这个区域内出现了多少帧。<em>默认值：3</em>",
+      "loiteringTime": "停留时间",
+      "loiteringTime.desc": "设置对象必须在区域中活动的最小时间（单位为秒）。<em>默认值：0</em>",
+      "objects": "对象",
+      "objects.desc": "将在此区域应用的对象列表。",
+      "allObjects": "所有对象",
+      "speedEstimation": "速度估算",
+      "speedEstimation.desc": "启用此区域内物体的速度估算。该区域必须恰好包含 4 个点。",
+      "speedThreshold": "速度阈值 ({{unit}})",
+      "speedThreshold.desc": "指定物体在此区域内被视为有效的最低速度。",
+      "speedThreshold.toast.error.pointLengthError": "此区域的速度估算已禁用。启用速度估算的区域必须恰好包含 4 个点。",
+      "speedThreshold.toast.error.loiteringTimeError": "徘徊时间大于 0 的区域不应与速度估算一起使用。",
+      "toast.success": "区域 ({{zoneName}}) 已保存。请重启 Frigate 以应用更改。"
+    },
+    "motionMasks": {
+      "label": "运动遮罩",
+      "documentTitle": "编辑运动遮罩 - Frigate",
+      "desc": "运动遮罩用于防止触发不必要的运动类型。过度的设置遮罩将使对象更加难以被追踪",
+      "desc.documentation": "文档（英文）",
+      "add": "添加运动遮罩",
+      "edit": "编辑运动遮罩",
+      "context": "运动遮罩用于防止不需要的运动类型触发检测（例如：树枝、摄像头显示的时间等）。运动遮罩需要<strong>谨慎使用</strong>，过度的遮罩会导致追踪对象变得更加困难。",
+      "context.documentation": "阅读文档（英文）",
+      "point_one": "{{count}} 点",
+      "point_other": "{{count}} 点",
+      "clickDrawPolygon": "在图像上点击添加点绘制多边形区域。",
+      "polygonAreaTooLarge": "运动遮罩的大小达到了摄像头画面的{{polygonArea}}%。不建议设置太大的运动遮罩。",
+      "polygonAreaTooLarge.tips": "运动遮罩不会阻止检测到对象，你应该使用区域来限制检测对象。",
+      "polygonAreaTooLarge.documentation": "阅读文档（英文）",
+      "toast.success": "{{polygonName}} 已保存。请重启 Frigate 以应用更改。",
+      "toast.success.noName": "运动遮罩已保存。请重启 Frigate 以应用更改。"
+    },
+    "objectMasks": {
+      "label": "对象遮罩",
+      "documentTitle": "编辑对象遮罩 - Frigate",
+      "desc": "对象过滤器用于防止特定位置的指定对象被误报。",
+      "documentation": "文档（英文）",
+      "add": "添加对象遮罩",
+      "edit": "编辑对象遮罩",
+      "context": "对象过滤器用于防止特定位置的指定对象被误报。",
+      "point_one": "{{count}} 点",
+      "point_other": "{{count}} 点",
+      "clickDrawPolygon": "在图像上点击添加点绘制多边形区域。",
+      "objects": "对象",
+      "objects.desc": "将应用于此对象遮罩的对象列表。",
+      "objects.allObjectTypes": "所有对象类型",
+      "toast.success": "{{polygonName}} 已保存。请重启 Frigate 以应用更改。",
+      "toast.success.noName": "对象遮罩已保存。请重启 Frigate 以应用更改。"
+    }
+  },
+  "motionDetectionTuner": {
+    "title": "运动检测调整器",
+    "desc": "Frigate 将使用运动检测作为首个步骤，以确认一帧画面中是否有对象需要使用对象检测。",
+    "desc.documentation": "阅读有关运动检测的文档（英文）",
+    "Threshold": "阈值",
+    "Threshold.desc": "阈值决定像素亮度高于多少时会被认为是运动。<em>默认值：30</em>",
+    "contourArea": "轮廓面积",
+    "contourArea.desc": "轮廓面积决定哪些变化的像素组符合运动条件。<em>默认值：10</em>",
+    "improveContrast": "提高对比度",
+    "improveContrast.desc": "提高较暗场景的对比度。默认值：开启",
+    "toast": {
+      "success": "运动设置已保存。"
+    }
+  },
+  "debug": {
+    "title": "调试",
+    "detectorDesc": "Frigate 将使用探测器（{{detectors}}）来检测摄像头视频流中的对象。",
+    "desc": "调试界面将实时显示被追踪的对象以及统计信息，对象列表将显示检测到的对象和延迟显示的概览。",
+    "debugging": "调试选项",
+    "objectList": "对象列表",
+    "noObjects": "没有对象",
+    "boundingBoxes": {
+      "title": "边界框",
+      "desc": "将在被追踪的对象周围显示边界框",
+      "colors": {
+        "label": "对象边界框颜色定义",
+        "info": "<li>启用后，将会为每个对象标签分配不同的颜色</li><li>深蓝色细线代表该对象在当前时间点未被检测到</li><li>灰色细线代表检测到的物体静止不动</li><li>粗线表示该对象为自动跟踪的主体（在启动时）</li>"
+      }
+    },
+    "timestamp": {
+      "title": "时间戳",
+      "desc": "在图像上显示时间戳"
+    },
+    "zones": {
+      "title": "区域",
+      "desc": "显示已定义的区域图层"
+    },
+    "mask": {
+      "title": "运动遮罩",
+      "desc": "显示运动遮罩图层"
+    },
+    "motion": {
+      "title": "运动区域框",
+      "desc": "在检测到运动的区域显示区域框",
+      "tips": "<p className=\"mb-2\"><strong>运动区域框</strong></p><br><p>将在当前检测到运动的区域内显示红色区域框。</p>"
+    },
+    "regions": {
+      "title": "范围",
+      "desc": "显示发送到运动检测器感兴趣范围的框。",
+      "tips": "<p className=\"mb-2\"><strong>范围框</strong></p><br><p>将在帧中发送到目标检测器的感兴趣范围上叠加绿色框。</p>"
+    },
+    "objectShapeFilterDrawing": {
+      "title": "允许绘制“对象形状过滤器”",
+      "desc": "在图像上绘制矩形，以查看区域和比例详细信息。",
+      "tips": "启用此选项，能够在摄像头图像上绘制矩形，将显示其区域和比例。然后，您可以使用这些值在配置中设置对象形状过滤器参数。",
+      "document": "阅读文档（英文）",
+      "score": "分数",
+      "ratio": "比例",
+      "area": "区域"
+    }
+  },
+  "users": {
+    "title": "用户",
+    "management": "用户管理",
+    "management.desc": "管理此 Frigate 实例的用户账户。",
+    "addUser": "添加用户",
+    "updatePassword": "修改密码",
+    "toast": {
+      "success": {
+        "createUser": "用户 {{user}} 创建成功",
+        "deleteUser": "用户 {{user}} 删除成功",
+        "updatePassword": "已成功修改密码",
+        "roleUpdated": "已更新 {{user}} 的权限组"
+      },
+      "error": {
+        "setPasswordFailed": "保存密码出现错误：{{errorMessage}}",
+        "createUserFailed": "创建用户失败：{{errorMessage}}",
+        "deleteUserFailed": "删除用户失败：{{errorMessage}}",
+        "roleUpdateFailed": "更新权限组失败：{{errorMessage}}"
+      }
+    },
+    "table": {
+      "username": "用户名",
+      "actions": "操作",
+      "role": "权限组",
+      "noUsers": "未找到用户。",
+      "changeRole": "更改用户角色",
+      "password": "密码",
+      "deleteUser": "删除用户"
+    },
+    "dialog": {
+      "form": {
+        "user": "用户名",
+        "user.desc": "仅允许使用字母、数字、句点和下划线。",
+        "user.placeholder": "请输入用户名",
+        "password": "密码",
+        "password.placeholder": "请输入密码",
+        "password.confirm": "确认密码",
+        "password.confirm.placeholder": "请再次输入密码",
+        "password.strength": "密码强度：",
+        "password.strength.weak": "弱",
+        "password.strength.medium": "中等",
+        "password.strength.strong": "强",
+        "password.strength.veryStrong": "非常强",
+        "password.match": "密码匹配",
+        "password.notMatch": "密码不匹配",
+        "newPassword": "新密码",
+        "newPassword.placeholder": "请输入新密码",
+        "newPassword.confirm.placeholder": "请再次输入新密码",
+        "usernameIsRequired": "用户名为必填项"
+      },
+      "createUser": {
+        "title": "创建新用户",
+        "desc": "创建一个新用户账户，并指定一个角色以控制访问 Frigate UI 的权限。",
+        "user": "用户",
+        "password": "密码",
+        "usernameOnlyInclude": "用户名只能包含字母、数字和 _"
+      },
+      "deleteUser": {
+        "title": "删除该用户",
+        "desc": "此操作无法撤销。这将永久删除用户账户并移除所有相关数据。",
+        "warn": "你确定要删除 <span className=\"font-bold\">{{username}}</span> 吗？"
+      },
+      "passwordSetting": {
+        "updatePassword": "更新 {{username}} 的密码",
+        "setPassword": "设置密码",
+        "desc": "创建一个强密码来保护此账户。"
+      },
+      "changeRole": {
+        "title": "更改用户权限组",
+        "desc": "更新 <span className=\"font-medium\">{{username}}</span> 的权限",
+        "roleInfo": "<p>请选择此用户的适当角色：</p><ul className=\"mt-2 space-y-1 pl-5\"><li> • <span className=\"font-medium\">管理员 (Admin)：</span> 拥有所有功能的完整访问权限。</li><li> • <span className=\"font-medium\">查看者 (Viewer)：</span> 仅限访问实时监控、回放、探测和导出功能。</li></ul>"
+      }
+    }
+  },
+  "notification": {
+    "title": "通知",
+    "notificationSettings": {
+      "title": "通知设置",
+      "desc": "Frigate 在浏览器中运行或作为 PWA 安装时，可以原生向您的设备发送推送通知。",
+      "documentation": "阅读文档（英文）"
+    },
+    "globalSettings": {
+      "title": "全局设置",
+      "desc": "临时暂停所有已注册设备上特定摄像头的通知。"
+    },
+    "notificationUnavailable": {
+      "title": "通知功能不可用",
+      "desc": "网页推送通知需要安全连接（<code>https://...</code>）。这是浏览器的限制。请通过安全方式访问 Frigate 以使用通知功能。",
+      "documentation": "阅读文档（英文）"
+    },
+    "email": "电子邮箱",
+    "email.placeholder": "例如：example@email.com",
+    "email.desc": "需要输入有效的电子邮件，在推送服务出现问题时，将使用此电子邮件进行通知。",
+    "cameras": "摄像头",
+    "cameras.noCameras": "没有可用的摄像头",
+    "cameras.desc": "选择要启用通知的摄像头。",
+    "deviceSpecific": "设备专用设置",
+    "registerDevice": "注册该设备",
+    "unregisterDevice": "取消注册该设备",
+    "sendTestNotification": "发送测试通知",
+    "active": "通知已启用",
+    "suspended": "通知已暂停 {{time}}",
+    "suspendTime": {
+      "5minutes": "暂停 5 分钟",
+      "10minutes": "暂停 10 分钟",
+      "30minutes": "暂停 30 分钟",
+      "1hour": "暂停 1 小时",
+      "12hours": "暂停 12 小时",
+      "24hours": "暂停 24 小时",
+      "untilRestart": "暂停直到重启"
+    },
+    "cancelSuspension": "取消暂停",
+    "toast": {
+      "success": {
+        "registered": "已成功注册通知。需要重启 Frigate 才能发送任何通知（包括测试通知）。",
+        "settingSaved": "通知设置已保存。"
+      },
+      "error": {
+        "registerFailed": "通知注册失败。"
+      }
+    }
+  }
+}
--- a/web/public/locales/zh-CN/views/system.json
+++ b/web/public/locales/zh-CN/views/system.json
@@ -0,0 +1,144 @@
+{
+  "documentTitle": {
+    "cameras": "摄像头统计 - Frigate",
+    "storage": "存储统计 - Frigate",
+    "general": "常规统计 - Frigate",
+    "features": "功能统计 - Frigate",
+    "logs": {
+      "frigate": "Frigate 日志 - Frigate",
+      "go2rtc": "Go2RTC 日志 - Frigate",
+      "nginx": "Nginx 日志 - Frigate"
+    }
+  },
+  "title": "系统",
+  "metrics": "系统指标",
+  "logs": {
+    "download": {
+      "label": "下载日志"
+    },
+    "copy": {
+      "label": "复制到剪贴板",
+      "success": "已复制日志到剪贴板",
+      "error": "无法复制日志到剪贴板"
+    },
+    "type": {
+      "label": "类型",
+      "timestamp": "时间戳",
+      "tag": "标签",
+      "message": "消息"
+    },
+    "tips": "日志正在从服务器流式传输",
+    "toast": {
+      "error": {
+        "fetchingLogsFailed": "获取日志出错：{{errorMessage}}",
+        "whileStreamingLogs": "流式传输日志时出错：{{errorMessage}}"
+      }
+    }
+  },
+  "general": {
+    "title": "常规",
+    "detector": {
+      "title": "探测器",
+      "inferenceSpeed": "探测器推理速度",
+      "cpuUsage": "探测器CPU使用率",
+      "memoryUsage": "探测器内存使用率"
+    },
+    "hardwareInfo": {
+      "title": "硬件信息",
+      "gpuUsage": "GPU使用率",
+      "gpuMemory": "GPU显存",
+      "gpuEncoder": "GPU编码",
+      "gpuDecoder": "GPU解码",
+      "gpuInfo": {
+        "vainfoOutput": {
+          "title": "Vainfo 输出",
+          "returnCode": "返回代码：{{code}}",
+          "processOutput": "进程输出：",
+          "processError": "进程错误："
+        },
+        "nvidiaSMIOutput": {
+          "title": "Nvidia SMI 输出",
+          "name": "名称：{{name}}",
+          "driver": "驱动：{{driver}}",
+          "cudaComputerCapability": "CUDA计算能力：{{cuda_compute}}",
+          "vbios": "VBios信息：{{vbios}}"
+        },
+        "closeInfo.label": "关闭GPU信息",
+        "copyInfo.label": "复制GPU信息",
+        "toast": {
+          "success": "已复制GPU信息到剪贴板"
+        }
+      }
+    },
+    "otherProcesses": {
+      "title": "其他进程",
+      "processCpuUsage": "主进程CPU使用率",
+      "processMemoryUsage": "主进程内存使用率"
+    }
+  },
+  "storage": {
+    "title": "存储",
+    "overview": "概览",
+    "recordings": {
+      "title": "录制内容",
+      "tips": "该值表示 Frigate 数据库中录制内容所使用的总存储空间。Frigate 不会追踪磁盘上所有文件的存储使用情况。",
+      "earliestRecording": "最早的可用录制："
+    },
+    "cameraStorage": {
+      "title": "摄像头存储",
+      "camera": "摄像头",
+      "unused": "未使用",
+      "unusedStorageInformation": "未使用存储信息",
+      "storageUsed": "存储使用",
+      "percentageOfTotalUsed": "总使用率",
+      "bandwidth": "带宽",
+      "unused.tips": "如果您的驱动器上存储了除 Frigate 录制内容之外的其他文件，该值可能无法准确反映 Frigate 可用的剩余空间。Frigate 不会追踪录制内容以外的存储使用情况。"
+    }
+  },
+  "cameras": {
+    "title": "摄像头",
+    "overview": "概览",
+    "info": {
+      "cameraProbeInfo": "{{camera}} 的摄像头信息",
+      "streamDataFromFFPROBE": "流数据信息通过<code>ffprobe</code>获取。",
+      "fetching": "正在获取摄像头数据",
+      "stream": "视频流{{idx}}",
+      "video": "视频：",
+      "codec": "编解码器：",
+      "resolution": "分辨率：",
+      "fps": "帧率：",
+      "unknown": "未知",
+      "audio": "音频：",
+      "error": "错误：{{error}}",
+      "tips": {
+        "title": "摄像头信息"
+      }
+    },
+    "framesAndDetections": "帧数/检测次数",
+    "label": {
+      "camera": "摄像头",
+      "detect": "探测",
+      "skipped": "跳过",
+      "ffmpeg": "ffmpeg编码器",
+      "capture": "捕获"
+    },
+    "toast": {
+      "success": {
+        "copyToClipboard": "已复制探测数据到剪贴板。"
+      },
+      "error": {
+        "unableToProbeCamera": "无法探测摄像头：{{errorMessage}}"
+      }
+    }
+  },
+  "lastRefreshed": "最后刷新时间：",
+  "stats": {
+    "ffmpegHighCpuUsage": "{{camera}} 的 FFMPEG CPU 使用率较高（{{ffmpegAvg}}%）",
+    "detectHighCpuUsage": "{{camera}} 的 探测 CPU 使用率较高（{{detectAvg}}%）",
+    "healthy": "系统运行正常",
+    "reindexingEmbeddings": "正在重新索引嵌入（已完成 {{processed}}%）"
+  },
+  "features": {
+    "title": "功能"
+  }
+}
--- a/web/src/components/Statusbar.tsx
+++ b/web/src/components/Statusbar.tsx
@@ -5,12 +5,16 @@ import {
 } from "@/context/statusbar-provider";
 import useStats, { useAutoFrigateStats } from "@/hooks/use-stats";
 import { useContext, useEffect, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+
 import { FaCheck } from "react-icons/fa";
 import { IoIosWarning } from "react-icons/io";
 import { MdCircle } from "react-icons/md";
 import { Link } from "react-router-dom";

 export default function Statusbar() {
+  const { t } = useTranslation(["views/system"]);
+
  const { messages, addMessage, clearMessages } = useContext(
    StatusBarMessagesContext,
  )!;
@@ -50,14 +54,19 @@ export default function Statusbar() {
        clearMessages("embeddings-reindex");
        addMessage(
          "embeddings-reindex",
-          `Reindexing embeddings (${Math.floor((reindexState.processed_objects / reindexState.total_objects) * 100)}% complete)`,
+          t("stats.reindexingEmbeddings", {
+            processed: Math.floor(
+              (reindexState.processed_objects / reindexState.total_objects) *
+                100,
+            ),
+          }),
        );
      }
      if (reindexState.status === "completed") {
        clearMessages("embeddings-reindex");
      }
    }
-  }, [reindexState, addMessage, clearMessages]);
+  }, [reindexState, addMessage, clearMessages, t]);

  return (
    <div className="absolute bottom-0 left-0 right-0 z-10 flex h-8 w-full items-center justify-between border-t border-secondary-highlight bg-background_alt px-4 dark:text-secondary-foreground">
@@ -129,7 +138,7 @@ export default function Statusbar() {
        {Object.entries(messages).length === 0 ? (
          <div className="flex items-center gap-2 text-sm">
            <FaCheck className="size-3 text-green-500" />
-            System is healthy
+            {t("stats.healthy")}
          </div>
        ) : (
          Object.entries(messages).map(([key, messageArray]) => (
--- a/web/src/components/auth/AuthForm.tsx
+++ b/web/src/components/auth/AuthForm.tsx
@@ -21,16 +21,18 @@ import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import { AuthContext } from "@/context/auth-context";
+import { useTranslation } from "react-i18next";

 interface UserAuthFormProps extends React.HTMLAttributes<HTMLDivElement> {}

 export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
+  const { t } = useTranslation(["components/auth"]);
  const [isLoading, setIsLoading] = React.useState<boolean>(false);
  const { login } = React.useContext(AuthContext);

  const formSchema = z.object({
-    user: z.string().min(1, "Username is required"),
-    password: z.string().min(1, "Password is required"),
+    user: z.string().min(1, t("form.errors.usernameRequired")),
+    password: z.string().min(1, t("form.errors.passwordRequired")),
  });

  const form = useForm<z.infer<typeof formSchema>>({
@@ -62,20 +64,20 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
      if (axios.isAxiosError(error)) {
        const err = error as AxiosError;
        if (err.response?.status === 429) {
-          toast.error("Exceeded rate limit. Try again later.", {
+          toast.error(t("form.errors.rateLimit"), {
            position: "top-center",
          });
        } else if (err.response?.status === 401) {
-          toast.error("Login failed", {
+          toast.error(t("form.errors.loginFailed"), {
            position: "top-center",
          });
        } else {
-          toast.error("Unknown error. Check logs.", {
+          toast.error(t("form.errors.unknownError"), {
            position: "top-center",
          });
        }
      } else {
-        toast.error("Unknown error. Check console logs.", {
+        toast.error(t("form.errors.webUnkownError"), {
          position: "top-center",
        });
      }
@@ -92,7 +94,7 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
            name="user"
            render={({ field }) => (
              <FormItem>
-                <FormLabel>User</FormLabel>
+                <FormLabel>{t("form.user")}</FormLabel>
                <FormControl>
                  <Input
                    className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
@@ -107,7 +109,7 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
            name="password"
            render={({ field }) => (
              <FormItem>
-                <FormLabel>Password</FormLabel>
+                <FormLabel>{t("form.password")}</FormLabel>
                <FormControl>
                  <Input
                    className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
@@ -123,10 +125,10 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
              variant="select"
              disabled={isLoading}
              className="flex flex-1"
-              aria-label="Login"
+              aria-label={t("form.login")}
            >
              {isLoading && <ActivityIndicator className="mr-2 h-4 w-4" />}
-              Login
+              {t("form.login")}
            </Button>
          </div>
        </form>
--- a/web/src/components/button/DownloadVideoButton.tsx
+++ b/web/src/components/button/DownloadVideoButton.tsx
@@ -3,6 +3,7 @@ import { toast } from "sonner";
 import { FaDownload } from "react-icons/fa";
 import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
 import { cn } from "@/lib/utils";
+import { useTranslation } from "react-i18next";

 type DownloadVideoButtonProps = {
  source: string;
@@ -17,6 +18,7 @@ export function DownloadVideoButton({
  startTime,
  className,
 }: DownloadVideoButtonProps) {
+  const { t } = useTranslation(["components/input"]);
  const formattedDate = formatUnixTimestampToDateTime(startTime, {
    strftime_fmt: "%D-%T",
    time_style: "medium",
@@ -25,7 +27,7 @@ export function DownloadVideoButton({
  const filename = `${camera}_${formattedDate}.mp4`;

  const handleDownloadStart = () => {
-    toast.success("Your review item video has started downloading.", {
+    toast.success(t("button.downloadVideo.toast.success"), {
      position: "top-center",
    });
  };
@@ -36,7 +38,7 @@ export function DownloadVideoButton({
        asChild
        className="flex items-center gap-2"
        size="sm"
-        aria-label="Download Video"
+        aria-label={t("button.downloadVideo.label")}
      >
        <a href={source} download={filename} onClick={handleDownloadStart}>
          <FaDownload
--- a/web/src/components/camera/DebugCameraImage.tsx
+++ b/web/src/components/camera/DebugCameraImage.tsx
@@ -7,6 +7,7 @@ import { useCallback, useMemo, useState } from "react";
 import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
 import { usePersistence } from "@/hooks/use-persistence";
 import AutoUpdatingCameraImage from "./AutoUpdatingCameraImage";
+import { useTranslation } from "react-i18next";

 type Options = { [key: string]: boolean };

@@ -21,6 +22,7 @@ export default function DebugCameraImage({
  className,
  cameraConfig,
 }: DebugCameraImageProps) {
+  const { t } = useTranslation(["components/camera"]);
  const [showSettings, setShowSettings] = useState(false);
  const [options, setOptions] = usePersistence<Options>(
    `${cameraConfig?.name}-feed`,
@@ -59,17 +61,21 @@ export default function DebugCameraImage({
        onClick={handleToggleSettings}
        variant="link"
        size="sm"
-        aria-label="Settings"
+        aria-label={t("debug.options.label")}
      >
        <span className="h-5 w-5">
          <LuSettings />
        </span>{" "}
-        <span>{showSettings ? "Hide" : "Show"} Options</span>
+        <span>
+          {showSettings
+            ? t("debug.options.hideOptions")
+            : t("debug.options.showOptions")}
+        </span>
      </Button>
      {showSettings ? (
        <Card>
          <CardHeader>
-            <CardTitle>Options</CardTitle>
+            <CardTitle>{t("debug.options.title")}</CardTitle>
          </CardHeader>
          <CardContent>
            <DebugSettings
@@ -89,6 +95,7 @@ type DebugSettingsProps = {
 };

 function DebugSettings({ handleSetOption, options }: DebugSettingsProps) {
+  const { t } = useTranslation(["components/camera"]);
  return (
    <div className="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4">
      <div className="flex items-center space-x-2">
@@ -99,7 +106,7 @@ function DebugSettings({ handleSetOption, options }: DebugSettingsProps) {
            handleSetOption("bbox", isChecked);
          }}
        />
-        <Label htmlFor="bbox">Bounding Box</Label>
+        <Label htmlFor="bbox">{t("debug.boundingBox")}</Label>
      </div>
      <div className="flex items-center space-x-2">
        <Switch
@@ -109,7 +116,7 @@ function DebugSettings({ handleSetOption, options }: DebugSettingsProps) {
            handleSetOption("timestamp", isChecked);
          }}
        />
-        <Label htmlFor="timestamp">Timestamp</Label>
+        <Label htmlFor="timestamp">{t("debug.timestamp")}</Label>
      </div>
      <div className="flex items-center space-x-2">
        <Switch
@@ -119,7 +126,7 @@ function DebugSettings({ handleSetOption, options }: DebugSettingsProps) {
            handleSetOption("zones", isChecked);
          }}
        />
-        <Label htmlFor="zones">Zones</Label>
+        <Label htmlFor="zones">{t("debug.zones")}</Label>
      </div>
      <div className="flex items-center space-x-2">
        <Switch
@@ -129,7 +136,7 @@ function DebugSettings({ handleSetOption, options }: DebugSettingsProps) {
            handleSetOption("mask", isChecked);
          }}
        />
-        <Label htmlFor="mask">Mask</Label>
+        <Label htmlFor="mask">{t("debug.mask")}</Label>
      </div>
      <div className="flex items-center space-x-2">
        <Switch
@@ -139,7 +146,7 @@ function DebugSettings({ handleSetOption, options }: DebugSettingsProps) {
            handleSetOption("motion", isChecked);
          }}
        />
-        <Label htmlFor="motion">Motion</Label>
+        <Label htmlFor="motion">{t("debug.motion")}</Label>
      </div>
      <div className="flex items-center space-x-2">
        <Switch
@@ -149,7 +156,7 @@ function DebugSettings({ handleSetOption, options }: DebugSettingsProps) {
            handleSetOption("regions", isChecked);
          }}
        />
-        <Label htmlFor="regions">Regions</Label>
+        <Label htmlFor="regions">{t("debug.regions")}</Label>
      </div>
    </div>
  );
--- a/web/src/components/card/AnimatedEventCard.tsx
+++ b/web/src/components/card/AnimatedEventCard.tsx
@@ -18,6 +18,7 @@ import { Skeleton } from "../ui/skeleton";
 import { Button } from "../ui/button";
 import { FaCircleCheck } from "react-icons/fa6";
 import { cn } from "@/lib/utils";
+import { useTranslation } from "react-i18next";

 type AnimatedEventCardProps = {
  event: ReviewSegment;
@@ -29,6 +30,7 @@ export function AnimatedEventCard({
  selectedGroup,
  updateEvents,
 }: AnimatedEventCardProps) {
+  const { t } = useTranslation(["views/events"]);
  const { data: config } = useSWR<FrigateConfig>("config");
  const apiHost = useApiHost();

@@ -121,7 +123,7 @@ export function AnimatedEventCard({
                <Button
                  className="absolute right-2 top-1 z-40 bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500"
                  size="xs"
-                  aria-label="Mark as Reviewed"
+                  aria-label={t("markAsReviewed")}
                  onClick={async () => {
                    await axios.post(`reviews/viewed`, { ids: [event.id] });
                    updateEvents();
@@ -130,7 +132,7 @@ export function AnimatedEventCard({
                  <FaCircleCheck className="size-3 text-white" />
                </Button>
              </TooltipTrigger>
-              <TooltipContent>Mark as Reviewed</TooltipContent>
+              <TooltipContent>{t("markAsReviewed")}</TooltipContent>
            </Tooltip>
          )}
          {previews != undefined && (
--- a/web/src/components/card/ExportCard.tsx
+++ b/web/src/components/card/ExportCard.tsx
@@ -20,6 +20,7 @@ import { MdEditSquare } from "react-icons/md";
 import { baseUrl } from "@/api/baseUrl";
 import { cn } from "@/lib/utils";
 import { shareOrCopy } from "@/utils/browserUtil";
+import { useTranslation } from "react-i18next";

 type ExportProps = {
  className: string;
@@ -36,6 +37,7 @@ export default function ExportCard({
  onRename,
  onDelete,
 }: ExportProps) {
+  const { t } = useTranslation(["views/exports"]);
  const [hovered, setHovered] = useState(false);
  const [loading, setLoading] = useState(
    exportedRecording.thumb_path.length > 0,
@@ -89,10 +91,8 @@ export default function ExportCard({
            }
          }}
        >
-          <DialogTitle>Rename Export</DialogTitle>
-          <DialogDescription>
-            Enter a new name for this export.
-          </DialogDescription>
+          <DialogTitle>{t("editExport.title")}</DialogTitle>
+          <DialogDescription>{t("editExport.desc")}</DialogDescription>
          {editName && (
            <>
              <Input
@@ -113,13 +113,13 @@ export default function ExportCard({
              />
              <DialogFooter>
                <Button
-                  aria-label="Save Export"
+                  aria-label={t("editExport.saveExport")}
                  size="sm"
                  variant="select"
                  disabled={(editName?.update?.length ?? 0) == 0}
                  onClick={() => submitRename()}
                >
-                  Save
+                  {t("button.save", { ns: "common" })}
                </Button>
              </DialogFooter>
            </>
@@ -207,7 +207,7 @@ export default function ExportCard({
            {!exportedRecording.in_progress && (
              <Button
                className="absolute left-1/2 top-1/2 h-20 w-20 -translate-x-1/2 -translate-y-1/2 cursor-pointer text-white hover:bg-transparent hover:text-white"
-                aria-label="Play"
+                aria-label={t("button.play", { ns: "common" })}
                variant="ghost"
                onClick={() => {
                  onSelect(exportedRecording);
--- a/web/src/components/card/ReviewCard.tsx
+++ b/web/src/components/card/ReviewCard.tsx
@@ -35,6 +35,7 @@ import useKeyboardListener from "@/hooks/use-keyboard-listener";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 import { capitalizeFirstLetter } from "@/utils/stringUtil";
 import { buttonVariants } from "../ui/button";
+import { Trans, useTranslation } from "react-i18next";

 type ReviewCardProps = {
  event: ReviewSegment;
@@ -46,6 +47,7 @@ export default function ReviewCard({
  currentTime,
  onClick,
 }: ReviewCardProps) {
+  const { t } = useTranslation(["components/dialog"]);
  const { data: config } = useSWR<FrigateConfig>("config");
  const [imgRef, imgLoaded, onImgLoad] = useImageLoaded();
  const formattedDate = useFormattedTimestamp(
@@ -82,26 +84,20 @@ export default function ReviewCard({
      )
      .then((response) => {
        if (response.status == 200) {
-          toast.success(
-            "Successfully started export. View the file in the /exports folder.",
-            { position: "top-center" },
-          );
-        }
-      })
-      .catch((error) => {
-        if (error.response?.data?.message) {
-          toast.error(
-            `Failed to start export: ${error.response.data.message}`,
-            { position: "top-center" },
-          );
-        } else {
-          toast.error(`Failed to start export: ${error.message}`, {
+          toast.success(t("export.toast.success"), {
            position: "top-center",
          });
        }
+      })
+      .catch((error) => {
+        const errorMessage =
+          error.response?.data?.message || error.message || "Unknown error";
+        toast.error(t("export.toast.error.failed", { error: errorMessage }), {
+          position: "top-center",
+        });
      });
    setOptionsOpen(false);
-  }, [event]);
+  }, [event, t]);

  const onDelete = useCallback(async () => {
    await axios.post(`reviews/delete`, { ids: [event.id] });
@@ -216,24 +212,24 @@ export default function ReviewCard({
        >
          <AlertDialogContent>
            <AlertDialogHeader>
-              <AlertDialogTitle>Confirm Delete</AlertDialogTitle>
+              <AlertDialogTitle>
+                {t("recording.confirmDelete.title")}
+              </AlertDialogTitle>
            </AlertDialogHeader>
            <AlertDialogDescription>
-              Are you sure you want to delete all recorded video associated with
-              this review item?
-              <br />
-              <br />
-              Hold the <em>Shift</em> key to bypass this dialog in the future.
+              <Trans ns="components/dialog">
+                recording.confirmDelete.title
+              </Trans>
            </AlertDialogDescription>
            <AlertDialogFooter>
              <AlertDialogCancel onClick={() => setOptionsOpen(false)}>
-                Cancel
+                {t("button.cancel", { ns: "common" })}
              </AlertDialogCancel>
              <AlertDialogAction
                className={buttonVariants({ variant: "destructive" })}
                onClick={onDelete}
              >
-                Delete
+                {t("button.delete", { ns: "common" })}
              </AlertDialogAction>
            </AlertDialogFooter>
          </AlertDialogContent>
@@ -247,7 +243,9 @@ export default function ReviewCard({
                onClick={onExport}
              >
                <FaCompactDisc className="text-secondary-foreground" />
-                <div className="text-primary">Export</div>
+                <div className="text-primary">
+                  {t("recording.button.export")}
+                </div>
              </div>
            </ContextMenuItem>
            {!event.has_been_reviewed && (
@@ -257,7 +255,9 @@ export default function ReviewCard({
                  onClick={onMarkAsReviewed}
                >
                  <FaCircleCheck className="text-secondary-foreground" />
-                  <div className="text-primary">Mark as reviewed</div>
+                  <div className="text-primary">
+                    {t("recording.button.markAsReviewed")}
+                  </div>
                </div>
              </ContextMenuItem>
            )}
@@ -268,7 +268,9 @@ export default function ReviewCard({
              >
                <HiTrash className="text-secondary-foreground" />
                <div className="text-primary">
-                  {bypassDialogRef.current ? "Delete Now" : "Delete"}
+                  {bypassDialogRef.current
+                    ? t("recording.button.deleteNow")
+                    : t("button.delete", { ns: "common" })}
                </div>
              </div>
            </ContextMenuItem>
@@ -286,24 +288,22 @@ export default function ReviewCard({
      >
        <AlertDialogContent>
          <AlertDialogHeader>
-            <AlertDialogTitle>Confirm Delete</AlertDialogTitle>
+            <AlertDialogTitle>
+              {t("recording.confirmDelete.title")}
+            </AlertDialogTitle>
          </AlertDialogHeader>
          <AlertDialogDescription>
-            Are you sure you want to delete all recorded video associated with
-            this review item?
-            <br />
-            <br />
-            Hold the <em>Shift</em> key to bypass this dialog in the future.
+            <Trans ns="components/dialog">recording.confirmDelete.desc</Trans>
          </AlertDialogDescription>
          <AlertDialogFooter>
            <AlertDialogCancel onClick={() => setOptionsOpen(false)}>
-              Cancel
+              {t("button.cancel", { ns: "common" })}
            </AlertDialogCancel>
            <AlertDialogAction
              className={buttonVariants({ variant: "destructive" })}
              onClick={onDelete}
            >
-              Delete
+              {t("button.delete", { ns: "common" })}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
@@ -316,7 +316,7 @@ export default function ReviewCard({
            onClick={onExport}
          >
            <FaCompactDisc className="text-secondary-foreground" />
-            <div className="text-primary">Export</div>
+            <div className="text-primary">{t("recording.button.export")}</div>
          </div>
          {!event.has_been_reviewed && (
            <div
@@ -324,7 +324,9 @@ export default function ReviewCard({
              onClick={onMarkAsReviewed}
            >
              <FaCircleCheck className="text-secondary-foreground" />
-              <div className="text-primary">Mark as reviewed</div>
+              <div className="text-primary">
+                {t("recording.button.markAsReviewed")}
+              </div>
            </div>
          )}
          <div
@@ -333,7 +335,9 @@ export default function ReviewCard({
          >
            <HiTrash className="text-secondary-foreground" />
            <div className="text-primary">
-              {bypassDialogRef.current ? "Delete Now" : "Delete"}
+              {bypassDialogRef.current
+                ? t("recording.button.deleteNow")
+                : t("button.delete", { ns: "common" })}
            </div>
          </div>
        </DrawerContent>
--- a/web/src/components/card/SearchThumbnail.tsx
+++ b/web/src/components/card/SearchThumbnail.tsx
@@ -8,11 +8,11 @@ import Chip from "@/components/indicators/Chip";
 import useImageLoaded from "@/hooks/use-image-loaded";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 import ImageLoadingIndicator from "../indicators/ImageLoadingIndicator";
-import { capitalizeFirstLetter } from "@/utils/stringUtil";
 import { SearchResult } from "@/types/search";
 import { cn } from "@/lib/utils";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
 import useContextMenu from "@/hooks/use-contextmenu";
+import { useTranslation } from "react-i18next";

 type SearchThumbnailProps = {
  searchResult: SearchResult;
@@ -23,6 +23,7 @@ export default function SearchThumbnail({
  searchResult,
  onClick,
 }: SearchThumbnailProps) {
+  const { t } = useTranslation(["views/search"]);
  const apiHost = useApiHost();
  const { data: config } = useSWR<FrigateConfig>("config");
  const [imgRef, imgLoaded, onImgLoad] = useImageLoaded();
@@ -113,7 +114,7 @@ export default function SearchThumbnail({
                  .filter(
                    (item) => item !== undefined && !item.includes("-verified"),
                  )
-                  .map((text) => capitalizeFirstLetter(text))
+                  .map((text) => t(text, { ns: "objects" }))
                  .sort()
                  .join(", ")
                  .replaceAll("-verified", "")}
--- a/web/src/components/card/SearchThumbnailFooter.tsx
+++ b/web/src/components/card/SearchThumbnailFooter.tsx
@@ -6,6 +6,7 @@ import { SearchResult } from "@/types/search";
 import ActivityIndicator from "../indicators/activity-indicator";
 import SearchResultActions from "../menu/SearchResultActions";
 import { cn } from "@/lib/utils";
+import { useTranslation } from "react-i18next";

 type SearchThumbnailProps = {
  searchResult: SearchResult;
@@ -24,12 +25,15 @@ export default function SearchThumbnailFooter({
  showObjectLifecycle,
  showSnapshot,
 }: SearchThumbnailProps) {
+  const { t } = useTranslation(["views/search"]);
  const { data: config } = useSWR<FrigateConfig>("config");

  // date
  const formattedDate = useFormattedTimestamp(
    searchResult.start_time,
-    config?.ui.time_format == "24hour" ? "%b %-d, %H:%M" : "%b %-d, %I:%M %p",
+    config?.ui.time_format == "24hour"
+      ? t("time.formattedTimestampExcludeSeconds.24hour", { ns: "common" })
+      : t("time.formattedTimestampExcludeSeconds", { ns: "common" }),
    config?.ui.timezone,
  );

--- a/web/src/components/dynamic/NewReviewData.tsx
+++ b/web/src/components/dynamic/NewReviewData.tsx
@@ -3,6 +3,7 @@ import { Button } from "../ui/button";
 import { LuRefreshCcw } from "react-icons/lu";
 import { MutableRefObject, useMemo } from "react";
 import { cn } from "@/lib/utils";
+import { useTranslation } from "react-i18next";

 type NewReviewDataProps = {
  className: string;
@@ -18,6 +19,7 @@ export default function NewReviewData({
  itemsToReview,
  pullLatestData,
 }: NewReviewDataProps) {
+  const { t } = useTranslation(["views/events"]);
  const hasUpdate = useMemo(() => {
    if (!reviewItems || !itemsToReview) {
      return false;
@@ -36,7 +38,7 @@ export default function NewReviewData({
              : "invisible",
            "mx-auto bg-gray-400 text-center text-white",
          )}
-          aria-label="View new review items"
+          aria-label={t("newReviewItems.label")}
          onClick={() => {
            pullLatestData();
            if (contentRef.current) {
@@ -48,7 +50,7 @@ export default function NewReviewData({
          }}
        >
          <LuRefreshCcw className="mr-2 h-4 w-4" />
-          New Items To Review
+          {t("newReviewItems.button")}
        </Button>
      </div>
    </div>
--- a/web/src/components/dynamic/TimeAgo.tsx
+++ b/web/src/components/dynamic/TimeAgo.tsx
@@ -1,3 +1,4 @@
+import { t } from "i18next";
 import { FunctionComponent, useEffect, useMemo, useState } from "react";

 interface IProp {
@@ -40,7 +41,7 @@ const timeAgo = ({

  const elapsed: number = elapsedTime / 1000;
  if (elapsed < 10) {
-    return "just now";
+    return t("time.justNow");
  }

  for (let i = 0; i < timeUnits.length; i++) {
@@ -64,11 +65,19 @@ const timeAgo = ({

      if (monthDiff > 0) {
        const unitAmount = monthDiff;
-        return `${unitAmount}${dense ? timeUnits[i].unit : ` ${timeUnits[i].full}`}${dense ? "" : "s"} ago`;
+        return t("time.ago", {
+          timeAgo: t(`time.${dense ? timeUnits[i].unit : timeUnits[i].full}`, {
+            time: unitAmount,
+          }),
+        });
      }
    } else if (elapsed >= timeUnits[i].value) {
      const unitAmount: number = Math.floor(elapsed / timeUnits[i].value);
-      return `${unitAmount}${dense ? timeUnits[i].unit : ` ${timeUnits[i].full}`}${dense ? "" : "s"} ago`;
+      return t("time.ago", {
+        timeAgo: t(`time.${dense ? timeUnits[i].unit : timeUnits[i].full}`, {
+          time: unitAmount,
+        }),
+      });
    }
  }
  return "Invalid Time";
--- a/web/src/components/filter/CalendarFilterButton.tsx
+++ b/web/src/components/filter/CalendarFilterButton.tsx
@@ -14,6 +14,7 @@ import { DateRangePicker } from "../ui/calendar-range";
 import { DateRange } from "react-day-picker";
 import { useState } from "react";
 import PlatformAwareDialog from "../overlay/dialog/PlatformAwareDialog";
+import { useTranslation } from "react-i18next";

 type CalendarFilterButtonProps = {
  reviewSummary?: ReviewSummary;
@@ -27,16 +28,17 @@ export default function CalendarFilterButton({
  day,
  updateSelectedDay,
 }: CalendarFilterButtonProps) {
+  const { t } = useTranslation(["components/filter"]);
  const [open, setOpen] = useState(false);
  const selectedDate = useFormattedTimestamp(
    day == undefined ? 0 : day?.getTime() / 1000 + 1,
-    "%b %-d",
+    t("time.formattedTimestampOnlyMonthAndDay", { ns: "common" }),
  );

  const trigger = (
    <Button
      className="flex items-center gap-2"
-      aria-label="Select a date to filter by"
+      aria-label={t("date.selectDateBy.label")}
      variant={day == undefined ? "default" : "select"}
      size="sm"
    >
@@ -46,7 +48,9 @@ export default function CalendarFilterButton({
      <div
        className={`hidden md:block ${day == undefined ? "text-primary" : "text-selected-foreground"}`}
      >
-        {day == undefined ? "Last 24 Hours" : selectedDate}
+        {day == undefined
+          ? t("calendarFilter.last24Hours", { ns: "views/events" })
+          : selectedDate}
      </div>
    </Button>
  );
@@ -61,12 +65,12 @@ export default function CalendarFilterButton({
      <DropdownMenuSeparator />
      <div className="flex items-center justify-center p-2">
        <Button
-          aria-label="Reset"
+          aria-label={t("button.reset", { ns: "common" })}
          onClick={() => {
            updateSelectedDay(undefined);
          }}
        >
-          Reset
+          {t("button.reset", { ns: "common" })}
        </Button>
      </div>
    </>
@@ -93,18 +97,19 @@ export function CalendarRangeFilterButton({
  defaultText,
  updateSelectedRange,
 }: CalendarRangeFilterButtonProps) {
+  const { t } = useTranslation(["components/filter"]);
  const [open, setOpen] = useState(false);

  const selectedDate = useFormattedRange(
    range?.from == undefined ? 0 : range.from.getTime() / 1000 + 1,
    range?.to == undefined ? 0 : range.to.getTime() / 1000 - 1,
-    "%b %-d",
+    t("time.formattedTimestampOnlyMonthAndDay", { ns: "common" }),
  );

  const trigger = (
    <Button
      className="flex items-center gap-2"
-      aria-label="Select a date to filter by"
+      aria-label={t("date.selectDateBy.label")}
      variant={range == undefined ? "default" : "select"}
      size="sm"
    >
--- a/web/src/components/filter/CameraGroupSelector.tsx
+++ b/web/src/components/filter/CameraGroupSelector.tsx
@@ -70,16 +70,20 @@ import {
  MobilePageHeader,
  MobilePageTitle,
 } from "../mobile/MobilePage";
+
 import { Label } from "../ui/label";
 import { Switch } from "../ui/switch";
 import { CameraStreamingDialog } from "../settings/CameraStreamingDialog";
 import { DialogTrigger } from "@radix-ui/react-dialog";
 import { useStreamingSettings } from "@/context/streaming-settings-provider";
+import { Trans, useTranslation } from "react-i18next";

 type CameraGroupSelectorProps = {
  className?: string;
 };
+
 export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
+  const { t } = useTranslation(["components/camera"]);
  const { data: config } = useSWR<FrigateConfig>("config");

  // tooltip
@@ -150,7 +154,7 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
                    ? "bg-blue-900 bg-opacity-60 text-selected focus:bg-blue-900 focus:bg-opacity-60"
                    : "bg-secondary text-secondary-foreground focus:bg-secondary focus:text-secondary-foreground"
                }
-                aria-label="All Cameras"
+                aria-label={t("menu.live.allCameras", { ns: "common" })}
                size="xs"
                onClick={() => (group ? setGroup("default", true) : null)}
                onMouseEnter={() => (isDesktop ? showTooltip("default") : null)}
@@ -160,8 +164,8 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
              </Button>
            </TooltipTrigger>
            <TooltipPortal>
-              <TooltipContent className="capitalize" side="right">
-                All Cameras
+              <TooltipContent className="" side="right">
+                {t("menu.live.allCameras", { ns: "common" })}
              </TooltipContent>
            </TooltipPortal>
          </Tooltip>
@@ -175,7 +179,7 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
                        ? "bg-blue-900 bg-opacity-60 text-selected focus:bg-blue-900 focus:bg-opacity-60"
                        : "bg-secondary text-secondary-foreground"
                    }
-                    aria-label="Camera Group"
+                    aria-label={t("group.label")}
                    size="xs"
                    onClick={() => setGroup(name, group != "default")}
                    onMouseEnter={() => (isDesktop ? showTooltip(name) : null)}
@@ -202,7 +206,7 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {

          <Button
            className="bg-secondary text-muted-foreground"
-            aria-label="Add camera group"
+            aria-label={t("group.add")}
            size="xs"
            onClick={() => setAddGroup(true)}
          >
@@ -231,6 +235,7 @@ function NewGroupDialog({
  setGroup,
  deleteGroup,
 }: NewGroupDialogProps) {
+  const { t } = useTranslation(["components/camera"]);
  const { mutate: updateConfig } = useSWR<FrigateConfig>("config");

  // editing group and state
@@ -273,9 +278,15 @@ function NewGroupDialog({
          } else {
            setOpen(false);
            setEditState("none");
-            toast.error(`Failed to save config changes: ${res.statusText}`, {
-              position: "top-center",
-            });
+            toast.error(
+              t("toast.save.error", {
+                errorMessage: res.statusText,
+                ns: "common",
+              }),
+              {
+                position: "top-center",
+              },
+            );
          }
        })
        .catch((error) => {
@@ -285,7 +296,7 @@ function NewGroupDialog({
            error.response?.data?.message ||
            error.response?.data?.detail ||
            "Unknown error";
-          toast.error(`Failed to save config changes: ${errorMessage}`, {
+          toast.error(t("toast.save.error", { errorMessage, ns: "common" }), {
            position: "top-center",
          });
        })
@@ -300,6 +311,7 @@ function NewGroupDialog({
      setOpen,
      deleteGroup,
      deleteGridLayout,
+      t,
    ],
  );

@@ -352,10 +364,8 @@ function NewGroupDialog({
                className={cn(isDesktop && "mt-5", "justify-center")}
                onClose={() => setOpen(false)}
              >
-                <Title>Camera Groups</Title>
-                <Description className="sr-only">
-                  Edit camera groups
-                </Description>
+                <Title>{t("group.label")}</Title>
+                <Description className="sr-only">{t("group.edit")}</Description>
                <div
                  className={cn(
                    "absolute",
@@ -370,7 +380,7 @@ function NewGroupDialog({
                        "size-6 rounded-md bg-secondary-foreground p-1 text-background",
                      isMobile && "text-secondary-foreground",
                    )}
-                    aria-label="Add camera group"
+                    aria-label={t("group.add")}
                    onClick={() => {
                      setEditState("add");
                    }}
@@ -402,11 +412,9 @@ function NewGroupDialog({
                }}
              >
                <Title>
-                  {editState == "add" ? "Add" : "Edit"} Camera Group
+                  {editState == "add" ? t("group.add") : t("group.edit")}
                </Title>
-                <Description className="sr-only">
-                  Edit camera groups
-                </Description>
+                <Description className="sr-only">{t("group.edit")}</Description>
              </Header>
              <CameraGroupEdit
                currentGroups={currentGroups}
@@ -436,6 +444,7 @@ export function EditGroupDialog({
  currentGroups,
  activeGroup,
 }: EditGroupDialogProps) {
+  const { t } = useTranslation(["components/camera"]);
  const Overlay = isDesktop ? Dialog : MobilePage;
  const Content = isDesktop ? DialogContent : MobilePageContent;
  const Header = isDesktop ? DialogHeader : MobilePageHeader;
@@ -475,8 +484,10 @@ export function EditGroupDialog({
        >
          <div className="scrollbar-container flex flex-col overflow-y-auto md:my-4">
            <Header className="mt-2" onClose={() => setOpen(false)}>
-              <Title>Edit Camera Group</Title>
-              <Description className="sr-only">Edit camera group</Description>
+              <Title>{t("group.edit")}</Title>
+              <Description className="sr-only">
+                {t("group.edit.desc")}
+              </Description>
            </Header>

            <CameraGroupEdit
@@ -505,6 +516,7 @@ export function CameraGroupRow({
  onDeleteGroup,
  onEditGroup,
 }: CameraGroupRowProps) {
+  const { t } = useTranslation(["components/camera"]);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);

  if (!group) {
@@ -526,19 +538,22 @@ export function CameraGroupRow({
        >
          <AlertDialogContent>
            <AlertDialogHeader>
-              <AlertDialogTitle>Confirm Delete</AlertDialogTitle>
+              <AlertDialogTitle>{t("group.delete.confirm")}</AlertDialogTitle>
            </AlertDialogHeader>
            <AlertDialogDescription>
-              Are you sure you want to delete the camera group{" "}
-              <em>{group[0]}</em>?
+              <Trans ns="components/camera" values={{ name: group[0] }}>
+                group.delete.confirm.desc
+              </Trans>
            </AlertDialogDescription>
            <AlertDialogFooter>
-              <AlertDialogCancel>Cancel</AlertDialogCancel>
+              <AlertDialogCancel>
+                {t("button.cancel", { ns: "common" })}
+              </AlertDialogCancel>
              <AlertDialogAction
                className={buttonVariants({ variant: "destructive" })}
                onClick={onDeleteGroup}
              >
-                Delete
+                {t("button.delete", { ns: "common" })}
              </AlertDialogAction>
            </AlertDialogFooter>
          </AlertDialogContent>
@@ -553,16 +568,16 @@ export function CameraGroupRow({
              <DropdownMenuPortal>
                <DropdownMenuContent>
                  <DropdownMenuItem
-                    aria-label="Edit group"
+                    aria-label={t("group.edit")}
                    onClick={onEditGroup}
                  >
-                    Edit
+                    {t("button.edit", { ns: "common" })}
                  </DropdownMenuItem>
                  <DropdownMenuItem
-                    aria-label="Delete group"
+                    aria-label={t("group.delete.label")}
                    onClick={() => setDeleteDialogOpen(true)}
                  >
-                    Delete
+                    {t("button.delete", { ns: "common" })}
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenuPortal>
@@ -579,7 +594,9 @@ export function CameraGroupRow({
                  onClick={onEditGroup}
                />
              </TooltipTrigger>
-              <TooltipContent>Edit</TooltipContent>
+              <TooltipContent>
+                {t("button.edit", { ns: "common" })}
+              </TooltipContent>
            </Tooltip>

            <Tooltip>
@@ -590,7 +607,9 @@ export function CameraGroupRow({
                  onClick={() => setDeleteDialogOpen(true)}
                />
              </TooltipTrigger>
-              <TooltipContent>Delete</TooltipContent>
+              <TooltipContent>
+                {t("button.delete", { ns: "common" })}
+              </TooltipContent>
            </Tooltip>
          </div>
        )}
@@ -616,6 +635,7 @@ export function CameraGroupEdit({
  onSave,
  onCancel,
 }: CameraGroupEditProps) {
+  const { t } = useTranslation(["components/camera"]);
  const { data: config, mutate: updateConfig } =
    useSWR<FrigateConfig>("config");

@@ -635,7 +655,7 @@ export function CameraGroupEdit({
    name: z
      .string()
      .min(2, {
-        message: "Camera group name must be at least 2 characters.",
+        message: t("group.name.errorMessage.mustLeastCharacters"),
      })
      .transform((val: string) => val.trim().replace(/\s+/g, "_"))
      .refine(
@@ -646,7 +666,7 @@ export function CameraGroupEdit({
          );
        },
        {
-          message: "Camera group name already exists.",
+          message: t("group.name.errorMessage.exists"),
        },
      )
      .refine(
@@ -654,11 +674,11 @@ export function CameraGroupEdit({
          return !value.includes(".");
        },
        {
-          message: "Camera group name must not contain a period.",
+          message: t("group.name.errorMessage.nameMustNotPeriod"),
        },
      )
      .refine((value: string) => value.toLowerCase() !== "default", {
-        message: "Invalid camera group name.",
+        message: t("group.name.errorMessage.invalid"),
      }),

    cameras: z.array(z.string()),
@@ -713,18 +733,29 @@ export function CameraGroupEdit({
        )
        .then(async (res) => {
          if (res.status === 200) {
-            toast.success(`Camera group (${values.name}) has been saved.`, {
-              position: "top-center",
-            });
+            toast.success(
+              t("group.toast.success", {
+                name: values.name,
+              }),
+              {
+                position: "top-center",
+              },
+            );
            updateConfig();
            if (onSave) {
              onSave();
            }
            setAllGroupsStreamingSettings(updatedSettings);
          } else {
-            toast.error(`Failed to save config changes: ${res.statusText}`, {
-              position: "top-center",
-            });
+            toast.error(
+              t("toast.save.error", {
+                errorMessage: res.statusText,
+                ns: "common",
+              }),
+              {
+                position: "top-center",
+              },
+            );
          }
        })
        .catch((error) => {
@@ -732,9 +763,13 @@ export function CameraGroupEdit({
            error.response?.data?.message ||
            error.response?.data?.detail ||
            "Unknown error";
-          toast.error(`Failed to save config changes: ${errorMessage}`, {
-            position: "top-center",
-          });
+          toast.error(
+            t("toast.save.error", {
+              errorMessage,
+              ns: "common",
+            }),
+            { position: "top-center" },
+          );
        })
        .finally(() => {
          setIsLoading(false);
@@ -749,6 +784,7 @@ export function CameraGroupEdit({
      groupStreamingSettings,
      allGroupsStreamingSettings,
      setAllGroupsStreamingSettings,
+      t,
    ],
  );

@@ -773,11 +809,11 @@ export function CameraGroupEdit({
          name="name"
          render={({ field }) => (
            <FormItem>
-              <FormLabel>Name</FormLabel>
+              <FormLabel>{t("group.name.label")}</FormLabel>
              <FormControl>
                <Input
                  className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
-                  placeholder="Enter a name..."
+                  placeholder={t("group.name.placeholder")}
                  {...field}
                />
              </FormControl>
@@ -793,10 +829,8 @@ export function CameraGroupEdit({
            name="cameras"
            render={({ field }) => (
              <FormItem>
-                <FormLabel>Cameras</FormLabel>
-                <FormDescription>
-                  Select cameras for this group.
-                </FormDescription>
+                <FormLabel>{t("group.cameras.label")}</FormLabel>
+                <FormDescription>{t("group.cameras.desc")}</FormDescription>
                <FormMessage />
                {[
                  ...(birdseyeConfig?.enabled ? ["birdseye"] : []),
@@ -826,7 +860,7 @@ export function CameraGroupEdit({
                            <DialogTrigger asChild>
                              <Button
                                className="flex h-auto items-center gap-1"
-                                aria-label="Camera streaming settings"
+                                aria-label={t("group.camera.setting.label")}
                                size="icon"
                                variant="ghost"
                                disabled={
@@ -880,7 +914,7 @@ export function CameraGroupEdit({
          name="icon"
          render={({ field }) => (
            <FormItem className="flex flex-col space-y-2">
-              <FormLabel>Icon</FormLabel>
+              <FormLabel>{t("group.icon")}</FormLabel>
              <FormControl>
                <IconPicker
                  selectedIcon={{
@@ -905,25 +939,25 @@ export function CameraGroupEdit({
          <Button
            type="button"
            className="flex flex-1"
-            aria-label="Cancel"
+            aria-label={t("button.cancel", { ns: "common" })}
            onClick={onCancel}
          >
-            Cancel
+            {t("button.cancel", { ns: "common" })}
          </Button>
          <Button
            variant="select"
            disabled={isLoading}
            className="flex flex-1"
-            aria-label="Save"
+            aria-label={t("button.save", { ns: "common" })}
            type="submit"
          >
            {isLoading ? (
              <div className="flex flex-row items-center gap-2">
                <ActivityIndicator />
-                <span>Saving...</span>
+                <span>{t("button.saving", { ns: "common" })}</span>
              </div>
            ) : (
-              "Save"
+              t("button.save", { ns: "common" })
            )}
          </Button>
        </div>
--- a/web/src/components/filter/CamerasFilterButton.tsx
+++ b/web/src/components/filter/CamerasFilterButton.tsx
@@ -12,6 +12,7 @@ import { isMobile } from "react-device-detect";
 import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
 import FilterSwitch from "./FilterSwitch";
 import { FaVideo } from "react-icons/fa";
+import { useTranslation } from "react-i18next";

 type CameraFilterButtonProps = {
  allCameras: string[];
@@ -29,6 +30,7 @@ export function CamerasFilterButton({
  mainCamera,
  updateCameraFilter,
 }: CameraFilterButtonProps) {
+  const { t } = useTranslation(["components/filter"]);
  const [open, setOpen] = useState(false);
  const [currentCameras, setCurrentCameras] = useState<string[] | undefined>(
    selectedCameras,
@@ -36,15 +38,19 @@ export function CamerasFilterButton({

  const buttonText = useMemo(() => {
    if (isMobile) {
-      return "Cameras";
+      return t("menu.live.cameras", { ns: "common" });
    }

    if (!selectedCameras || selectedCameras.length == 0) {
-      return "All Cameras";
+      return t("menu.live.allCameras", { ns: "common" });
    }
-
-    return `${selectedCameras.includes("birdseye") ? selectedCameras.length - 1 : selectedCameras.length} Camera${selectedCameras.length !== 1 ? "s" : ""}`;
-  }, [selectedCameras]);
+    return t("menu.live.cameras.count", {
+      count: selectedCameras.includes("birdseye")
+        ? selectedCameras.length - 1
+        : selectedCameras.length,
+      ns: "common",
+    });
+  }, [selectedCameras, t]);

  // ui

@@ -57,7 +63,7 @@ export function CamerasFilterButton({
  const trigger = (
    <Button
      className="flex items-center gap-2 capitalize"
-      aria-label="Cameras Filter"
+      aria-label={t("cameras.label")}
      variant={selectedCameras?.length == undefined ? "default" : "select"}
      size="sm"
    >
@@ -138,12 +144,13 @@ export function CamerasFilterContent({
  setOpen,
  updateCameraFilter,
 }: CamerasFilterContentProps) {
+  const { t } = useTranslation(["components/filter"]);
  return (
    <>
      {isMobile && (
        <>
          <DropdownMenuLabel className="flex justify-center">
-            Cameras
+            {t("cameras.all.short")}
          </DropdownMenuLabel>
          <DropdownMenuSeparator />
        </>
@@ -151,7 +158,7 @@ export function CamerasFilterContent({
      <div className="scrollbar-container flex h-auto max-h-[80dvh] flex-col gap-2 overflow-y-auto overflow-x-hidden p-4">
        <FilterSwitch
          isChecked={currentCameras == undefined}
-          label="All Cameras"
+          label={t("cameras.all")}
          onCheckedChange={(isChecked) => {
            if (isChecked) {
              setCurrentCameras(undefined);
@@ -225,7 +232,7 @@ export function CamerasFilterContent({
      <DropdownMenuSeparator />
      <div className="flex items-center justify-evenly p-2">
        <Button
-          aria-label="Apply"
+          aria-label={t("button.apply", { ns: "common" })}
          variant="select"
          disabled={currentCameras?.length === 0}
          onClick={() => {
@@ -233,16 +240,16 @@ export function CamerasFilterContent({
            setOpen(false);
          }}
        >
-          Apply
+          {t("button.apply", { ns: "common" })}
        </Button>
        <Button
-          aria-label="Reset"
+          aria-label={t("button.reset", { ns: "common" })}
          onClick={() => {
            setCurrentCameras(undefined);
            updateCameraFilter(undefined);
          }}
        >
-          Reset
+          {t("button.reset", { ns: "common" })}
        </Button>
      </div>
    </>
--- a/web/src/components/filter/LogSettingsButton.tsx
+++ b/web/src/components/filter/LogSettingsButton.tsx
@@ -9,6 +9,7 @@ import { Switch } from "../ui/switch";
 import { DropdownMenuSeparator } from "../ui/dropdown-menu";
 import { cn } from "@/lib/utils";
 import FilterSwitch from "./FilterSwitch";
+import { useTranslation } from "react-i18next";

 type LogSettingsButtonProps = {
  selectedLabels?: LogSeverity[];
@@ -22,23 +23,26 @@ export function LogSettingsButton({
  logSettings,
  setLogSettings,
 }: LogSettingsButtonProps) {
+  const { t } = useTranslation(["components/filter"]);
  const trigger = (
    <Button
      size="sm"
      className="flex items-center gap-2"
-      aria-label="Filter log level"
+      aria-label={t("logSettings.label")}
    >
      <FaCog className="text-secondary-foreground" />
-      <div className="hidden text-primary md:block">Settings</div>
+      <div className="hidden text-primary md:block">
+        {t("menu.settings", { ns: "common" })}
+      </div>
    </Button>
  );
  const content = (
    <div className={cn("my-3 space-y-3 py-3 md:mt-0 md:py-0")}>
      <div className="space-y-4">
        <div className="space-y-0.5">
-          <div className="text-md">Filter</div>
+          <div className="text-md">{t("filter")}</div>
          <div className="space-y-1 text-xs text-muted-foreground">
-            Filter logs by severity.
+            {t("logSettings.filterBySeverity")}
          </div>
        </div>
        <GeneralFilterContent
@@ -49,14 +53,13 @@ export function LogSettingsButton({
      <DropdownMenuSeparator />
      <div className="space-y-4">
        <div className="space-y-0.5">
-          <div className="text-md">Loading</div>
+          <div className="text-md">{t("logSettings.loading")}</div>
          <div className="mt-2.5 flex flex-col gap-2.5">
            <div className="space-y-1 text-xs text-muted-foreground">
-              When the log pane is scrolled to the bottom, new logs
-              automatically stream as they are added.
+              {t("logSettings.loading.desc")}
            </div>
            <FilterSwitch
-              label="Disable log streaming"
+              label={t("logSettings.disableLogStreaming")}
              isChecked={logSettings?.disableStreaming ?? false}
              onCheckedChange={(isChecked) => {
                setLogSettings({
@@ -97,6 +100,7 @@ export function GeneralFilterContent({
  selectedLabels,
  updateLabelFilter,
 }: GeneralFilterContentProps) {
+  const { t } = useTranslation(["components/filter"]);
  return (
    <>
      <div className="scrollbar-container h-auto overflow-y-auto overflow-x-hidden">
@@ -105,7 +109,7 @@ export function GeneralFilterContent({
            className="mx-2 cursor-pointer text-primary"
            htmlFor="allLabels"
          >
-            All Logs
+            {t("logSettings.allLogs")}
          </Label>
          <Switch
            className="ml-1"
--- a/web/src/components/filter/ReviewActionGroup.tsx
+++ b/web/src/components/filter/ReviewActionGroup.tsx
@@ -16,6 +16,7 @@ import {
  AlertDialogTitle,
 } from "../ui/alert-dialog";
 import useKeyboardListener from "@/hooks/use-keyboard-listener";
+import { Trans, useTranslation } from "react-i18next";

 type ReviewActionGroupProps = {
  selectedReviews: string[];
@@ -29,6 +30,7 @@ export default function ReviewActionGroup({
  onExport,
  pullLatestData,
 }: ReviewActionGroupProps) {
+  const { t } = useTranslation(["components/dialog"]);
  const onClearSelected = useCallback(() => {
    setSelectedReviews([]);
  }, [setSelectedReviews]);
@@ -68,22 +70,24 @@ export default function ReviewActionGroup({
      >
        <AlertDialogContent>
          <AlertDialogHeader>
-            <AlertDialogTitle>Confirm Delete</AlertDialogTitle>
+            <AlertDialogTitle>
+              {t("recording.confirmDelete.title")}
+            </AlertDialogTitle>
          </AlertDialogHeader>
          <AlertDialogDescription>
-            Are you sure you want to delete all recorded video associated with
-            the selected review items?
-            <br />
-            <br />
-            Hold the <em>Shift</em> key to bypass this dialog in the future.
+            <Trans ns="components/dialog">
+              recording.confirmDelete.desc.selected
+            </Trans>
          </AlertDialogDescription>
          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogCancel>
+              {t("button.cancel", { ns: "common" })}
+            </AlertDialogCancel>
            <AlertDialogAction
              className={buttonVariants({ variant: "destructive" })}
              onClick={onDelete}
            >
-              Delete
+              {t("button.delete", { ns: "common" })}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
@@ -97,14 +101,14 @@ export default function ReviewActionGroup({
            className="cursor-pointer p-2 text-primary hover:rounded-lg hover:bg-secondary"
            onClick={onClearSelected}
          >
-            Unselect
+            {t("button.unselect", { ns: "common" })}
          </div>
        </div>
        <div className="flex items-center gap-1 md:gap-2">
          {selectedReviews.length == 1 && (
            <Button
              className="flex items-center gap-2 p-2"
-              aria-label="Export"
+              aria-label={t("recording.button.export")}
              size="sm"
              onClick={() => {
                onExport(selectedReviews[0]);
@@ -112,28 +116,38 @@ export default function ReviewActionGroup({
              }}
            >
              <FaCompactDisc className="text-secondary-foreground" />
-              {isDesktop && <div className="text-primary">Export</div>}
+              {isDesktop && (
+                <div className="text-primary">
+                  {t("recording.button.export")}
+                </div>
+              )}
            </Button>
          )}
          <Button
            className="flex items-center gap-2 p-2"
-            aria-label="Mark as reviewed"
+            aria-label={t("recording.button.markAsReviewed")}
            size="sm"
            onClick={onMarkAsReviewed}
          >
            <FaCircleCheck className="text-secondary-foreground" />
-            {isDesktop && <div className="text-primary">Mark as reviewed</div>}
+            {isDesktop && (
+              <div className="text-primary">
+                {t("recording.button.markAsReviewed")}
+              </div>
+            )}
          </Button>
          <Button
            className="flex items-center gap-2 p-2"
-            aria-label="Delete"
+            aria-label={t("button.delete", { ns: "common" })}
            size="sm"
            onClick={handleDelete}
          >
            <HiTrash className="text-secondary-foreground" />
            {isDesktop && (
              <div className="text-primary">
-                {bypassDialog ? "Delete Now" : "Delete"}
+                {bypassDialog
+                  ? t("recording.button.deleteNow")
+                  : t("button.delete", { ns: "common" })}
              </div>
            )}
          </Button>
--- a/web/src/components/filter/ReviewFilterGroup.tsx
+++ b/web/src/components/filter/ReviewFilterGroup.tsx
@@ -23,6 +23,7 @@ import { FilterList, GeneralFilter } from "@/types/filter";
 import CalendarFilterButton from "./CalendarFilterButton";
 import { CamerasFilterButton } from "./CamerasFilterButton";
 import PlatformAwareDialog from "../overlay/dialog/PlatformAwareDialog";
+import { useTranslation } from "react-i18next";

 const REVIEW_FILTERS = [
  "cameras",
@@ -263,6 +264,7 @@ function ShowReviewFilter({
  showReviewed,
  setShowReviewed,
 }: ShowReviewedFilterProps) {
+  const { t } = useTranslation(["components/filter"]);
  const [showReviewedSwitch, setShowReviewedSwitch] = useOptimisticState(
    showReviewed,
    setShowReviewed,
@@ -278,13 +280,13 @@ function ShowReviewFilter({
          }
        />
        <Label className="ml-2 cursor-pointer text-primary" htmlFor="reviewed">
-          Show Reviewed
+          {t("review.showReviewed")}
        </Label>
      </div>

      <Button
        className="block duration-0 md:hidden"
-        aria-label="Show reviewed"
+        aria-label={t("review.showReviewed")}
        variant={showReviewedSwitch ? "select" : "default"}
        size="sm"
        onClick={() =>
@@ -320,6 +322,7 @@ function GeneralFilterButton({
  selectedZones,
  onUpdateFilter,
 }: GeneralFilterButtonProps) {
+  const { t } = useTranslation(["components/filter"]);
  const [open, setOpen] = useState(false);
  const [currentFilter, setCurrentFilter] = useState<GeneralFilter>({
    labels: selectedLabels,
@@ -348,7 +351,7 @@ function GeneralFilterButton({
        selectedLabels?.length || selectedZones?.length ? "select" : "default"
      }
      className="flex items-center gap-2 capitalize"
-      aria-label="Filter"
+      aria-label={t("filter")}
    >
      <FaFilter
        className={`${
@@ -364,7 +367,7 @@ function GeneralFilterButton({
            : "text-primary"
        }`}
      >
-        Filter
+        {t("filter")}
      </div>
    </Button>
  );
@@ -439,13 +442,14 @@ export function GeneralFilterContent({
  onReset,
  onClose,
 }: GeneralFilterContentProps) {
+  const { t } = useTranslation(["components/filter"]);
  return (
    <>
      <div className="scrollbar-container h-auto max-h-[80dvh] overflow-y-auto overflow-x-hidden">
        {currentSeverity && (
          <div className="my-2.5 flex flex-col gap-2.5">
            <FilterSwitch
-              label="Alerts"
+              label={t("alerts", { ns: "views/events" })}
              disabled={currentSeverity == "alert"}
              isChecked={
                currentSeverity == "alert" ? true : filter.showAll === true
@@ -455,7 +459,7 @@ export function GeneralFilterContent({
              }
            />
            <FilterSwitch
-              label="Detections"
+              label={t("detections", { ns: "views/events" })}
              disabled={currentSeverity == "detection"}
              isChecked={
                currentSeverity == "detection" ? true : filter.showAll === true
@@ -472,7 +476,7 @@ export function GeneralFilterContent({
            className="mx-2 cursor-pointer text-primary"
            htmlFor="allLabels"
          >
-            All Labels
+            {t("labels.all")}
          </Label>
          <Switch
            className="ml-1"
@@ -519,7 +523,7 @@ export function GeneralFilterContent({
                className="mx-2 cursor-pointer text-primary"
                htmlFor="allZones"
              >
-                All Zones
+                {t("zones.all")}
              </Label>
              <Switch
                className="ml-1"
@@ -568,17 +572,20 @@ export function GeneralFilterContent({
      <DropdownMenuSeparator />
      <div className="flex items-center justify-evenly p-2">
        <Button
-          aria-label="Apply"
+          aria-label={t("button.apply", { ns: "common" })}
          variant="select"
          onClick={() => {
            onApply();
            onClose();
          }}
        >
-          Apply
+          {t("button.apply", { ns: "common" })}
        </Button>
-        <Button aria-label="Reset" onClick={onReset}>
-          Reset
+        <Button
+          aria-label={t("button.reset", { ns: "common" })}
+          onClick={onReset}
+        >
+          {t("button.reset", { ns: "common" })}
        </Button>
      </div>
    </>
@@ -593,6 +600,7 @@ function ShowMotionOnlyButton({
  motionOnly,
  setMotionOnly,
 }: ShowMotionOnlyButtonProps) {
+  const { t } = useTranslation(["views/events"]);
  const [motionOnlyButton, setMotionOnlyButton] = useOptimisticState(
    motionOnly,
    setMotionOnly,
@@ -611,7 +619,7 @@ function ShowMotionOnlyButton({
          className="mx-2 cursor-pointer text-primary"
          htmlFor="collapse-motion"
        >
-          Motion only
+          {t("motion.only")}
        </Label>
      </div>

@@ -619,7 +627,7 @@ function ShowMotionOnlyButton({
        <Button
          size="sm"
          className="duration-0"
-          aria-label="Show Motion Only"
+          aria-label={t("motion.showMotionOnly", { ns: "components/filter" })}
          variant={motionOnlyButton ? "select" : "default"}
          onClick={() => setMotionOnlyButton(!motionOnlyButton)}
        >
--- a/web/src/components/filter/SearchActionGroup.tsx
+++ b/web/src/components/filter/SearchActionGroup.tsx
@@ -15,6 +15,7 @@ import {
 } from "../ui/alert-dialog";
 import useKeyboardListener from "@/hooks/use-keyboard-listener";
 import { toast } from "sonner";
+import { Trans, useTranslation } from "react-i18next";

 type SearchActionGroupProps = {
  selectedObjects: string[];
@@ -26,6 +27,7 @@ export default function SearchActionGroup({
  setSelectedObjects,
  pullLatestData,
 }: SearchActionGroupProps) {
+  const { t } = useTranslation(["views/filter"]);
  const onClearSelected = useCallback(() => {
    setSelectedObjects([]);
  }, [setSelectedObjects]);
@@ -37,7 +39,7 @@ export default function SearchActionGroup({
      })
      .then((resp) => {
        if (resp.status == 200) {
-          toast.success("Tracked objects deleted successfully.", {
+          toast.success(t("trackedObjectDelete.toast.success"), {
            position: "top-center",
          });
          setSelectedObjects([]);
@@ -49,11 +51,11 @@ export default function SearchActionGroup({
          error.response?.data?.message ||
          error.response?.data?.detail ||
          "Unknown error";
-        toast.error(`Failed to delete tracked objects.: ${errorMessage}`, {
+        toast.error(t("trackedObjectDelete.toast.error", { errorMessage }), {
          position: "top-center",
        });
      });
-  }, [selectedObjects, setSelectedObjects, pullLatestData]);
+  }, [selectedObjects, setSelectedObjects, pullLatestData, t]);

  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [bypassDialog, setBypassDialog] = useState(false);
@@ -78,27 +80,27 @@ export default function SearchActionGroup({
      >
        <AlertDialogContent>
          <AlertDialogHeader>
-            <AlertDialogTitle>Confirm Delete</AlertDialogTitle>
+            <AlertDialogTitle>
+              {t("trackedObjectDelete.title")}
+            </AlertDialogTitle>
          </AlertDialogHeader>
          <AlertDialogDescription>
-            Deleting these {selectedObjects.length} tracked objects removes the
-            snapshot, any saved embeddings, and any associated object lifecycle
-            entries. Recorded footage of these tracked objects in History view
-            will <em>NOT</em> be deleted.
-            <br />
-            <br />
-            Are you sure you want to proceed?
-            <br />
-            <br />
-            Hold the <em>Shift</em> key to bypass this dialog in the future.
+            <Trans
+              ns="components/filter"
+              values={{ objectLength: selectedObjects.length }}
+            >
+              trackedObjectDelete.desc
+            </Trans>
          </AlertDialogDescription>
          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogCancel>
+              {t("button.cancel", { ns: "common" })}
+            </AlertDialogCancel>
            <AlertDialogAction
              className={buttonVariants({ variant: "destructive" })}
              onClick={onDelete}
            >
-              Delete
+              {t("button.delete", { ns: "common" })}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
@@ -112,20 +114,22 @@ export default function SearchActionGroup({
            className="cursor-pointer p-2 text-primary hover:rounded-lg hover:bg-secondary"
            onClick={onClearSelected}
          >
-            Unselect
+            {t("button.unselect", { ns: "common" })}
          </div>
        </div>
        <div className="flex items-center gap-1 md:gap-2">
          <Button
            className="flex items-center gap-2 p-2"
-            aria-label="Delete"
+            aria-label={t("button.delete", { ns: "common" })}
            size="sm"
            onClick={handleDelete}
          >
            <HiTrash className="text-secondary-foreground" />
            {isDesktop && (
              <div className="text-primary">
-                {bypassDialog ? "Delete Now" : "Delete"}
+                {bypassDialog
+                  ? t("button.deleteNow", { ns: "common" })
+                  : t("button.delete", { ns: "common" })}
              </div>
            )}
          </Button>
--- a/web/src/components/filter/SearchFilterGroup.tsx
+++ b/web/src/components/filter/SearchFilterGroup.tsx
@@ -25,6 +25,8 @@ import SearchFilterDialog from "../overlay/dialog/SearchFilterDialog";
 import { CalendarRangeFilterButton } from "./CalendarFilterButton";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";

+import { useTranslation } from "react-i18next";
+
 type SearchFilterGroupProps = {
  className: string;
  filters?: SearchFilters[];
@@ -39,6 +41,7 @@ export default function SearchFilterGroup({
  filterList,
  onUpdateFilter,
 }: SearchFilterGroupProps) {
+  const { t } = useTranslation(["components/filter"]);
  const { data: config } = useSWR<FrigateConfig>("config", {
    revalidateOnFocus: false,
  });
@@ -195,7 +198,7 @@ export default function SearchFilterGroup({
                  to: new Date(filter.before * 1000),
                }
          }
-          defaultText={isMobile ? "Dates" : "All Dates"}
+          defaultText={isMobile ? t("dates.all.short") : t("dates.all")}
          updateSelectedRange={onUpdateSelectedRange}
        />
      )}
@@ -229,6 +232,7 @@ function GeneralFilterButton({
  selectedLabels,
  updateLabelFilter,
 }: GeneralFilterButtonProps) {
+  const { t } = useTranslation(["components/filter"]);
  const [open, setOpen] = useState(false);
  const [currentLabels, setCurrentLabels] = useState<string[] | undefined>(
    selectedLabels,
@@ -236,19 +240,21 @@ function GeneralFilterButton({

  const buttonText = useMemo(() => {
    if (isMobile) {
-      return "Labels";
+      return t("labels.all.short");
    }

    if (!selectedLabels || selectedLabels.length == 0) {
-      return "All Labels";
+      return t("labels.all");
    }

    if (selectedLabels.length == 1) {
-      return selectedLabels[0];
+      return t(selectedLabels[0], { ns: "objects" });
    }

-    return `${selectedLabels.length} Labels`;
-  }, [selectedLabels]);
+    return t("labels.count", {
+      count: selectedLabels.length,
+    });
+  }, [selectedLabels, t]);

  // ui

@@ -263,7 +269,7 @@ function GeneralFilterButton({
      size="sm"
      variant={selectedLabels?.length ? "select" : "default"}
      className="flex items-center gap-2 capitalize"
-      aria-label="Labels"
+      aria-label={t("labels.label")}
    >
      <MdLabel
        className={`${selectedLabels?.length ? "text-selected-foreground" : "text-secondary-foreground"}`}
@@ -323,6 +329,7 @@ export function GeneralFilterContent({
  setCurrentLabels,
  onClose,
 }: GeneralFilterContentProps) {
+  const { t } = useTranslation(["components/filter"]);
  return (
    <>
      <div className="overflow-x-hidden">
@@ -331,7 +338,7 @@ export function GeneralFilterContent({
            className="mx-2 cursor-pointer text-primary"
            htmlFor="allLabels"
          >
-            All Labels
+            {t("labels.all")}
          </Label>
          <Switch
            className="ml-1"
@@ -348,7 +355,7 @@ export function GeneralFilterContent({
          {allLabels.map((item) => (
            <FilterSwitch
              key={item}
-              label={item.replaceAll("_", " ")}
+              label={t(item, { ns: "objects" })}
              isChecked={currentLabels?.includes(item) ?? false}
              onCheckedChange={(isChecked) => {
                if (isChecked) {
@@ -373,7 +380,7 @@ export function GeneralFilterContent({
      <DropdownMenuSeparator />
      <div className="flex items-center justify-evenly p-2">
        <Button
-          aria-label="Apply"
+          aria-label={t("button.apply", { ns: "common" })}
          variant="select"
          onClick={() => {
            if (selectedLabels != currentLabels) {
@@ -383,16 +390,16 @@ export function GeneralFilterContent({
            onClose();
          }}
        >
-          Apply
+          {t("button.apply", { ns: "common" })}
        </Button>
        <Button
-          aria-label="Reset"
+          aria-label={t("button.reset", { ns: "common" })}
          onClick={() => {
            setCurrentLabels(undefined);
            updateLabelFilter(undefined);
          }}
        >
-          Reset
+          {t("button.reset", { ns: "common" })}
        </Button>
      </div>
    </>
@@ -411,6 +418,7 @@ function SortTypeButton({
  selectedSortType,
  updateSortType,
 }: SortTypeButtonProps) {
+  const { t } = useTranslation(["components/filter"]);
  const [open, setOpen] = useState(false);
  const [currentSortType, setCurrentSortType] = useState<
    SearchSortType | undefined
@@ -433,7 +441,7 @@ function SortTypeButton({
          : "default"
      }
      className="flex items-center gap-2 capitalize"
-      aria-label="Labels"
+      aria-label={t("labels.label")}
    >
      <MdSort
        className={`${selectedSortType != defaultSortType && selectedSortType != undefined ? "text-selected-foreground" : "text-secondary-foreground"}`}
@@ -441,7 +449,7 @@ function SortTypeButton({
      <div
        className={`${selectedSortType != defaultSortType && selectedSortType != undefined ? "text-selected-foreground" : "text-primary"}`}
      >
-        Sort
+        {t("sort.label")}
      </div>
    </Button>
  );
@@ -496,16 +504,16 @@ export function SortTypeContent({
  setCurrentSortType,
  onClose,
 }: SortTypeContentProps) {
+  const { t } = useTranslation(["components/filter"]);
  const sortLabels = {
-    date_asc: "Date (Ascending)",
-    date_desc: "Date (Descending)",
-    score_asc: "Object Score (Ascending)",
-    score_desc: "Object Score (Descending)",
-    speed_asc: "Estimated Speed (Ascending)",
-    speed_desc: "Estimated Speed (Descending)",
-    relevance: "Relevance",
+    date_asc: t("sort.dateAsc"),
+    date_desc: t("sort.dateDesc"),
+    score_asc: t("sort.scoreAsc"),
+    score_desc: t("sort.scoreDesc"),
+    speed_asc: t("sort.speedAsc"),
+    speed_desc: t("sort.speedDesc"),
+    relevance: t("sort.relevance"),
  };
-
  return (
    <>
      <div className="overflow-x-hidden">
@@ -548,7 +556,7 @@ export function SortTypeContent({
      <DropdownMenuSeparator />
      <div className="flex items-center justify-evenly p-2">
        <Button
-          aria-label="Apply"
+          aria-label={t("button.apply", { ns: "common" })}
          variant="select"
          onClick={() => {
            if (selectedSortType != currentSortType) {
@@ -558,16 +566,16 @@ export function SortTypeContent({
            onClose();
          }}
        >
-          Apply
+          {t("button.apply", { ns: "common" })}
        </Button>
        <Button
-          aria-label="Reset"
+          aria-label={t("button.reset", { ns: "common" })}
          onClick={() => {
            setCurrentSortType(undefined);
            updateSortType(undefined);
          }}
        >
-          Reset
+          {t("button.reset", { ns: "common" })}
        </Button>
      </div>
    </>
--- a/web/src/components/filter/ZoneMaskFilter.tsx
+++ b/web/src/components/filter/ZoneMaskFilter.tsx
@@ -7,6 +7,7 @@ import { PolygonType } from "@/types/canvas";
 import { Label } from "../ui/label";
 import { Switch } from "../ui/switch";
 import { DropdownMenuSeparator } from "../ui/dropdown-menu";
+import { useTranslation } from "react-i18next";

 type ZoneMaskFilterButtonProps = {
  selectedZoneMask?: PolygonType[];
@@ -16,12 +17,13 @@ export function ZoneMaskFilterButton({
  selectedZoneMask,
  updateZoneMaskFilter,
 }: ZoneMaskFilterButtonProps) {
+  const { t } = useTranslation(["components/filter"]);
  const trigger = (
    <Button
      size="sm"
      variant={selectedZoneMask?.length ? "select" : "default"}
      className="flex items-center gap-2 capitalize"
-      aria-label="Filter by zone mask"
+      aria-label={t("zoneMask.filterBy")}
    >
      <FaFilter
        className={`${selectedZoneMask?.length ? "text-selected-foreground" : "text-secondary-foreground"}`}
@@ -29,7 +31,7 @@ export function ZoneMaskFilterButton({
      <div
        className={`hidden md:block ${selectedZoneMask?.length ? "text-selected-foreground" : "text-primary"}`}
      >
-        Filter
+        {t("filter")}
      </div>
    </Button>
  );
@@ -67,6 +69,7 @@ export function GeneralFilterContent({
  selectedZoneMask,
  updateZoneMaskFilter,
 }: GeneralFilterContentProps) {
+  const { t } = useTranslation(["components/filter"]);
  return (
    <>
      <div className="h-auto overflow-y-auto overflow-x-hidden">
@@ -75,7 +78,7 @@ export function GeneralFilterContent({
            className="mx-2 cursor-pointer text-primary"
            htmlFor="allLabels"
          >
-            All Masks and Zones
+            {t("labels.all")}
          </Label>
          <Switch
            className="ml-1"
@@ -96,9 +99,14 @@ export function GeneralFilterContent({
                className="mx-2 w-full cursor-pointer capitalize text-primary"
                htmlFor={item}
              >
-                {item
-                  .replace(/_/g, " ")
-                  .replace(/\b\w/g, (char) => char.toUpperCase()) + "s"}
+                {t(
+                  "masksAndZones." +
+                    item
+                      .replace(/_([a-z])/g, (letter) => letter.toUpperCase())
+                      .replace("_", "") +
+                    "s.label",
+                  { ns: "views/settings" },
+                )}
              </Label>
              <Switch
                key={item}
--- a/web/src/components/graph/CameraGraph.tsx
+++ b/web/src/components/graph/CameraGraph.tsx
@@ -4,6 +4,7 @@ import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
 import { useCallback, useEffect, useMemo } from "react";
 import Chart from "react-apexcharts";
 import { isMobileOnly } from "react-device-detect";
+import { useTranslation } from "react-i18next";
 import { MdCircle } from "react-icons/md";
 import useSWR from "swr";

@@ -23,6 +24,7 @@ export function CameraLineGraph({
  updateTimes,
  data,
 }: CameraLineGraphProps) {
+  const { t } = useTranslation(["views/system"]);
  const { data: config } = useSWR<FrigateConfig>("config", {
    revalidateOnFocus: false,
  });
@@ -126,7 +128,9 @@ export function CameraLineGraph({
                className="size-2"
                style={{ color: GRAPH_COLORS[labelIdx] }}
              />
-              <div className="text-xs text-muted-foreground">{label}</div>
+              <div className="text-xs text-muted-foreground">
+                {t("cameras.label." + label)}
+              </div>
              <div className="text-xs text-primary">
                {lastValues[labelIdx]}
                {unit}
--- a/web/src/components/graph/CombinedStorageGraph.tsx
+++ b/web/src/components/graph/CombinedStorageGraph.tsx
@@ -16,7 +16,9 @@ import {
  PopoverTrigger,
 } from "@/components/ui/popover";
 import { getUnitSize } from "@/utils/storageUtil";
+
 import { CiCircleAlert } from "react-icons/ci";
+import { useTranslation } from "react-i18next";

 type CameraStorage = {
  [key: string]: {
@@ -41,6 +43,8 @@ export function CombinedStorageGraph({
  cameraStorage,
  totalStorage,
 }: CombinedStorageGraphProps) {
+  const { t } = useTranslation(["views/system"]);
+
  const { theme, systemTheme } = useTheme();

  const entities = Object.keys(cameraStorage);
@@ -176,10 +180,12 @@ export function CombinedStorageGraph({
        <Table>
          <TableHeader>
            <TableRow>
-              <TableHead>Camera</TableHead>
-              <TableHead>Storage Used</TableHead>
-              <TableHead>Percentage of Total Used</TableHead>
-              <TableHead>Bandwidth</TableHead>
+              <TableHead>{t("storage.cameraStorage.camera")}</TableHead>
+              <TableHead>{t("storage.cameraStorage.storageUsed")}</TableHead>
+              <TableHead>
+                {t("storage.cameraStorage.percentageOfTotalUsed")}
+              </TableHead>
+              <TableHead>{t("storage.cameraStorage.bandwidth")}</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
@@ -191,26 +197,29 @@ export function CombinedStorageGraph({
                    className="size-3 rounded-md"
                    style={{ backgroundColor: item.color }}
                  ></div>
-                  {item.name.replaceAll("_", " ")}
+                  {item.name === "Unused"
+                    ? t("storage.cameraStorage.unused")
+                    : item.name.replaceAll("_", " ")}
                  {item.name === "Unused" && (
                    <Popover>
                      <PopoverTrigger asChild>
                        <button
                          className="focus:outline-none"
-                          aria-label="Unused Storage Information"
+                          aria-label={t(
+                            "storage.cameraStorage.unusedStorageInformation",
+                          )}
                        >
                          <CiCircleAlert
                            className="size-5"
-                            aria-label="Unused Storage Information"
+                            aria-label={t(
+                              "storage.cameraStorage.unusedStorageInformation",
+                            )}
                          />
                        </button>
                      </PopoverTrigger>
                      <PopoverContent className="w-80">
                        <div className="space-y-2">
-                          This value may not accurately represent the free space
-                          available to Frigate if you have other files stored on
-                          your drive beyond Frigate's recordings. Frigate does
-                          not track storage usage outside of its recordings.
+                          {t("storage.cameraStorage.unused.tips")}
                        </div>
                      </PopoverContent>
                    </Popover>
--- a/web/src/components/icons/IconPicker.tsx
+++ b/web/src/components/icons/IconPicker.tsx
@@ -12,6 +12,8 @@ import Heading from "../ui/heading";
 import { cn } from "@/lib/utils";
 import { Button } from "../ui/button";

+import { useTranslation } from "react-i18next";
+
 export type IconName = keyof typeof LuIcons;

 export type IconElement = {
@@ -30,6 +32,7 @@ export default function IconPicker({
  selectedIcon,
  setSelectedIcon,
 }: IconPickerProps) {
+  const { t } = useTranslation(["components/icons"]);
  const [open, setOpen] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);
  const [searchTerm, setSearchTerm] = useState("");
@@ -68,9 +71,9 @@ export default function IconPicker({
          {!selectedIcon?.name || !selectedIcon?.Icon ? (
            <Button
              className="mt-2 w-full text-muted-foreground"
-              aria-label="Select an icon"
+              aria-label={t("iconPicker.selectIcon")}
            >
-              Select an icon
+              {t("iconPicker.selectIcon")}
            </Button>
          ) : (
            <div className="hover:cursor-pointer">
@@ -101,7 +104,7 @@ export default function IconPicker({
          className="flex max-h-[50dvh] flex-col overflow-y-hidden md:max-h-[30dvh]"
        >
          <div className="mb-3 flex flex-row items-center justify-between">
-            <Heading as="h4">Select an icon</Heading>
+            <Heading as="h4">{t("iconPicker.selectIcon")}</Heading>
            <span tabIndex={0} className="sr-only" />
            <IoClose
              size={15}
@@ -113,7 +116,9 @@ export default function IconPicker({
          </div>
          <Input
            type="text"
-            placeholder="Search for an icon..."
+            placeholder={t("iconPicker.search.placeholder", {
+              ns: "components/icons",
+            })}
            className="text-md mb-3 md:text-sm"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
--- a/web/src/components/input/InputWithTags.tsx
+++ b/web/src/components/input/InputWithTags.tsx
@@ -51,6 +51,7 @@ import { toast } from "sonner";
 import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { MdImageSearch } from "react-icons/md";
+import { Trans, useTranslation } from "react-i18next";

 type InputWithTagsProps = {
  inputFocused: boolean;
@@ -73,6 +74,7 @@ export default function InputWithTags({
  setSearch,
  allSuggestions,
 }: InputWithTagsProps) {
+  const { t } = useTranslation(["views/search"]);
  const { data: config } = useSWR<FrigateConfig>("config", {
    revalidateOnFocus: false,
  });
@@ -236,12 +238,9 @@ export default function InputWithTags({
                filters.after &&
                timestamp <= filters.after * 1000
              ) {
-                toast.error(
-                  "The 'before' date must be later than the 'after' date.",
-                  {
-                    position: "top-center",
-                  },
-                );
+                toast.error(t("filter.toast.error.beforeDateBeLaterAfter"), {
+                  position: "top-center",
+                });
                return;
              }
              if (
@@ -249,12 +248,9 @@ export default function InputWithTags({
                filters.before &&
                timestamp >= filters.before * 1000
              ) {
-                toast.error(
-                  "The 'after' date must be earlier than the 'before' date.",
-                  {
-                    position: "top-center",
-                  },
-                );
+                toast.error(t("afterDatebeEarlierBefore"), {
+                  position: "top-center",
+                });
                return;
              }
              if (type === "before") {
@@ -274,7 +270,7 @@ export default function InputWithTags({
                score > filters.max_score * 100
              ) {
                toast.error(
-                  "The 'min_score' must be less than or equal to the 'max_score'.",
+                  t("filter.toast.error.minScoreMustBeLessOrEqualMaxScore"),
                  {
                    position: "top-center",
                  },
@@ -287,7 +283,7 @@ export default function InputWithTags({
                score < filters.min_score * 100
              ) {
                toast.error(
-                  "The 'max_score' must be greater than or equal to the 'min_score'.",
+                  t("filter.toast.error.maxScoreMustBeGreaterOrEqualMinScore"),
                  {
                    position: "top-center",
                  },
@@ -308,7 +304,7 @@ export default function InputWithTags({
                speed > filters.max_speed
              ) {
                toast.error(
-                  "The 'min_speed' must be less than or equal to the 'max_speed'.",
+                  t("filter.toast.error.minSpeedMustBeLessOrEqualMaxSpeed"),
                  {
                    position: "top-center",
                  },
@@ -321,7 +317,7 @@ export default function InputWithTags({
                speed < filters.min_speed
              ) {
                toast.error(
-                  "The 'max_speed' must be greater than or equal to the 'min_speed'.",
+                  t("filter.toast.error.maxSpeedMustBeGreaterOrEqualMinSpeed"),
                  {
                    position: "top-center",
                  },
@@ -380,7 +376,7 @@ export default function InputWithTags({
        setCurrentFilterType(null);
      }
    },
-    [filters, setFilters, allSuggestions],
+    [filters, setFilters, allSuggestions, t],
  );

  function formatFilterValues(
@@ -408,16 +404,26 @@ export default function InputWithTags({
      return Math.round(Number(filterValues) * 100).toString() + "%";
    } else if (filterType === "min_speed" || filterType === "max_speed") {
      return (
-        filterValues + (config?.ui.unit_system == "metric" ? " kph" : " mph")
+        filterValues +
+        " " +
+        (config?.ui.unit_system == "metric"
+          ? t("unit.speed.kph", { ns: "common" })
+          : t("unit.speed.mph", { ns: "common" }))
      );
    } else if (
      filterType === "has_clip" ||
      filterType === "has_snapshot" ||
      filterType === "is_submitted"
    ) {
-      return filterValues ? "Yes" : "No";
+      return filterValues
+        ? t("button.yes", { ns: "common" })
+        : t("button.no", { ns: "common" });
+    } else if (filterType === "labels") {
+      return t(filterValues as string, { ns: "objects" });
+    } else if (filterType === "search_type") {
+      return t("filter.searchType." + (filterValues as string));
    } else {
-      return filterValues as string;
+      return (filterValues as string).replaceAll("_", " ");
    }
  }

@@ -653,7 +659,7 @@ export default function InputWithTags({
            onBlur={handleInputBlur}
            onKeyDown={handleInputKeyDown}
            className="text-md h-9 pr-32"
-            placeholder="Search..."
+            placeholder={t("placeholder.search")}
          />
          <div className="absolute right-3 top-0 flex h-full flex-row items-center justify-center gap-5">
            {(search || Object.keys(filters).length > 0) && (
@@ -665,7 +671,7 @@ export default function InputWithTags({
                  />
                </TooltipTrigger>
                <TooltipPortal>
-                  <TooltipContent>Clear search</TooltipContent>
+                  <TooltipContent>{t("button.clear")}</TooltipContent>
                </TooltipPortal>
              </Tooltip>
            )}
@@ -679,7 +685,7 @@ export default function InputWithTags({
                  />
                </TooltipTrigger>
                <TooltipPortal>
-                  <TooltipContent>Save search</TooltipContent>
+                  <TooltipContent>{t("button.save")}</TooltipContent>
                </TooltipPortal>
              </Tooltip>
            )}
@@ -688,12 +694,14 @@ export default function InputWithTags({
              <Tooltip>
                <TooltipTrigger className="cursor-default">
                  <MdImageSearch
-                    aria-label="Similarity search active"
+                    aria-label={t("similaritySearch.active")}
                    className="size-4 text-selected"
                  />
                </TooltipTrigger>
                <TooltipPortal>
-                  <TooltipContent>Similarity search active</TooltipContent>
+                  <TooltipContent>
+                    {t("similaritySearch.active")}
+                  </TooltipContent>
                </TooltipPortal>
              </Tooltip>
            )}
@@ -702,10 +710,10 @@ export default function InputWithTags({
              <PopoverTrigger asChild>
                <button
                  className="focus:outline-none"
-                  aria-label="Filter information"
+                  aria-label={t("button.filterInformation")}
                >
                  <LuFilter
-                    aria-label="Filters active"
+                    aria-label={t("button.filterActive")}
                    className={cn(
                      "size-4",
                      Object.keys(filters).length > 0
@@ -717,43 +725,24 @@ export default function InputWithTags({
              </PopoverTrigger>
              <PopoverContent className="w-80">
                <div className="space-y-2">
-                  <h3 className="font-medium">How to use text filters</h3>
+                  <h3 className="font-medium">{t("filter.tips.title")}</h3>
                  <p className="text-sm text-muted-foreground">
-                    Filters help you narrow down your search results. Here's how
-                    to use them in the input field:
+                    {t("filter.tips.desc")}
                  </p>
-                  <ul className="list-disc pl-5 text-sm text-primary-variant">
-                    <li>
-                      Type a filter name followed by a colon (e.g., "cameras:").
-                    </li>
-                    <li>
-                      Select a value from the suggestions or type your own.
-                    </li>
-                    <li>
-                      Use multiple filters by adding them one after another with
-                      a space in between.
-                    </li>
-                    <li>
-                      Date filters (before: and after:) use{" "}
-                      <em>{getIntlDateFormat()}</em> format.
-                    </li>
-                    <li>
-                      Time range filter uses{" "}
-                      <em>
-                        {config?.ui.time_format == "24hour"
+                  <Trans
+                    ns="views/search"
+                    values={{
+                      DateFormat: getIntlDateFormat(),
+                      exampleTime:
+                        config?.ui.time_format == "24hour"
                          ? "15:00-16:00"
-                          : "3:00PM-4:00PM"}{" "}
-                      </em>
-                      format.
-                    </li>
-                    <li>Remove filters by clicking the 'x' next to them.</li>
-                  </ul>
+                          : "3:00PM-4:00PM",
+                    }}
+                  >
+                    filter.tips.desc.step
+                  </Trans>
                  <p className="text-sm text-muted-foreground">
-                    Example:{" "}
-                    <code className="text-primary">
-                      cameras:front_door label:person before:01012024
-                      time_range:3:00PM-4:00PM
-                    </code>
+                    <Trans ns="views/search">filter.tips.desc.example</Trans>
                  </p>
                </div>
              </PopoverContent>
@@ -780,27 +769,27 @@ export default function InputWithTags({
          )}
        >
          {!currentFilterType && inputValue && (
-            <CommandGroup heading="Search">
+            <CommandGroup heading={t("search")}>
              <CommandItem
                className="cursor-pointer"
                onSelect={() => handleSearch(inputValue)}
              >
                <LuSearch className="mr-2 h-4 w-4" />
-                Search for "{inputValue}"
+                {t("searchFor", { inputValue })}
              </CommandItem>
            </CommandGroup>
          )}
          {(Object.keys(filters).filter((key) => key !== "query").length > 0 ||
            isSimilaritySearch) && (
-            <CommandGroup heading="Active Filters">
+            <CommandGroup heading={t("filter.header.activeFilters")}>
              <div className="my-2 flex flex-wrap gap-2 px-2">
                {isSimilaritySearch && (
                  <span className="inline-flex items-center whitespace-nowrap rounded-full bg-blue-100 px-2 py-0.5 text-sm text-blue-800">
-                    Similarity Search
+                    {t("similaritySearch.title")}
                    <button
                      onClick={handleClearSimilarity}
                      className="ml-1 focus:outline-none"
-                      aria-label="Clear similarity search"
+                      aria-label={t("similaritySearch.clear")}
                    >
                      <LuX className="h-3 w-3" />
                    </button>
@@ -816,8 +805,8 @@ export default function InputWithTags({
                            key={`${filterType}-${index}`}
                            className="inline-flex items-center whitespace-nowrap rounded-full bg-green-100 px-2 py-0.5 text-sm capitalize text-green-800"
                          >
-                            {filterType.replaceAll("_", " ")}:{" "}
-                            {value.replaceAll("_", " ")}
+                            {t("filter.label." + filterType)}:{" "}
+                            {formatFilterValues(filterType, value)}
                            <button
                              onClick={() =>
                                removeFilter(filterType as FilterType, value)
@@ -835,10 +824,12 @@ export default function InputWithTags({
                          className="inline-flex items-center whitespace-nowrap rounded-full bg-green-100 px-2 py-0.5 text-sm capitalize text-green-800"
                        >
                          {filterType === "event_id"
-                            ? "Tracked Object ID"
+                            ? t("trackedObjectId")
                            : filterType === "is_submitted"
-                              ? "Submitted to Frigate+"
-                              : filterType.replaceAll("_", " ")}
+                              ? t("features.submittedToFrigatePlus.label", {
+                                  ns: "components/filter",
+                                })
+                              : t("filter.label." + filterType)}
                          : {formatFilterValues(filterType, filterValues)}
                          <button
                            onClick={() =>
@@ -863,7 +854,7 @@ export default function InputWithTags({
            !inputValue &&
            searchHistoryLoaded &&
            (searchHistory?.length ?? 0) > 0 && (
-              <CommandGroup heading="Saved Searches">
+              <CommandGroup heading={t("savedSearches")}>
                {searchHistory?.map((suggestion, index) => (
                  <CommandItem
                    key={index}
@@ -884,7 +875,7 @@ export default function InputWithTags({
                        </button>
                      </TooltipTrigger>
                      <TooltipPortal>
-                        <TooltipContent>Delete saved search</TooltipContent>
+                        <TooltipContent>{t("button.delete")}</TooltipContent>
                      </TooltipPortal>
                    </Tooltip>
                  </CommandItem>
@@ -892,7 +883,11 @@ export default function InputWithTags({
              </CommandGroup>
            )}
          <CommandGroup
-            heading={currentFilterType ? "Filter Values" : "Filters"}
+            heading={
+              currentFilterType
+                ? t("filter.header.currentFilterType")
+                : t("filter.header.noFilters")
+            }
          >
            {filterSuggestions(suggestions)
              .filter(
@@ -905,7 +900,12 @@ export default function InputWithTags({
                  className="cursor-pointer"
                  onSelect={() => handleSuggestionClick(suggestion)}
                >
+                  {currentFilterType
+                    ? formatFilterValues(currentFilterType, suggestion)
+                    : t("filter.label." + suggestion)}
+                  {" ("}
                  {suggestion}
+                  {")"}
                </CommandItem>
              ))}
          </CommandGroup>
--- a/web/src/components/input/SaveSearchDialog.tsx
+++ b/web/src/components/input/SaveSearchDialog.tsx
@@ -12,6 +12,7 @@ import { Input } from "@/components/ui/input";
 import { useMemo, useState } from "react";
 import { isMobile } from "react-device-detect";
 import { toast } from "sonner";
+import { useTranslation } from "react-i18next";

 type SaveSearchDialogProps = {
  existingNames: string[];
@@ -26,15 +27,22 @@ export function SaveSearchDialog({
  onClose,
  onSave,
 }: SaveSearchDialogProps) {
+  const { t } = useTranslation(["components/dialog"]);
+
  const [searchName, setSearchName] = useState("");

  const handleSave = () => {
    if (searchName.trim()) {
      onSave(searchName.trim());
      setSearchName("");
-      toast.success(`Search (${searchName.trim()}) has been saved.`, {
-        position: "top-center",
-      });
+      toast.success(
+        t("search.saveSearch.success", {
+          searchName: searchName.trim(),
+        }),
+        {
+          position: "top-center",
+        },
+      );
      onClose();
    }
  };
@@ -54,34 +62,36 @@ export function SaveSearchDialog({
        }}
      >
        <DialogHeader>
-          <DialogTitle>Save Search</DialogTitle>
+          <DialogTitle>{t("search.saveSearch.label")}</DialogTitle>
          <DialogDescription className="sr-only">
-            Provide a name for this saved search.
+            {t("search.saveSearch.desc")}
          </DialogDescription>
        </DialogHeader>
        <Input
          value={searchName}
          className="text-md"
          onChange={(e) => setSearchName(e.target.value)}
-          placeholder="Enter a name for your search"
+          placeholder={t("search.saveSearch.placeholder")}
        />
        {overwrite && (
          <div className="ml-1 text-sm text-danger">
-            {searchName} already exists. Saving will overwrite the existing
-            value.
+            {t("search.saveSearch.overwrite", { searchName })}
          </div>
        )}
        <DialogFooter>
-          <Button aria-label="Cancel" onClick={onClose}>
-            Cancel
+          <Button
+            aria-label={t("button.cancel", { ns: "common" })}
+            onClick={onClose}
+          >
+            {t("button.cancel", { ns: "common" })}
          </Button>
          <Button
            onClick={handleSave}
            variant="select"
            className="mb-2 md:mb-0"
-            aria-label="Save this search"
+            aria-label={t("search.saveSearch.button.save.label")}
          >
-            Save
+            {t("button.save", { ns: "common" })}
          </Button>
        </DialogFooter>
      </DialogContent>
--- a/web/src/components/menu/AccountSettings.tsx
+++ b/web/src/components/menu/AccountSettings.tsx
@@ -20,16 +20,19 @@ import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
 import { DialogClose } from "../ui/dialog";
 import { LuLogOut, LuSquarePen } from "react-icons/lu";
 import useSWR from "swr";
+
 import { useState } from "react";
 import axios from "axios";
 import { toast } from "sonner";
 import SetPasswordDialog from "../overlay/SetPasswordDialog";
+import { useTranslation } from "react-i18next";

 type AccountSettingsProps = {
  className?: string;
 };

 export default function AccountSettings({ className }: AccountSettingsProps) {
+  const { t } = useTranslation(["views/settings"]);
  const { data: profile } = useSWR("profile");
  const { data: config } = useSWR("config");
  const logoutUrl = config?.proxy?.logout_url || `${baseUrl}api/logout`;
@@ -48,7 +51,7 @@ export default function AccountSettings({ className }: AccountSettingsProps) {
      .then((response) => {
        if (response.status === 200) {
          setPasswordDialogOpen(false);
-          toast.success("Password updated successfully.", {
+          toast.success(t("users.toast.success.updatePassword"), {
            position: "top-center",
          });
        }
@@ -58,9 +61,14 @@ export default function AccountSettings({ className }: AccountSettingsProps) {
          error.response?.data?.message ||
          error.response?.data?.detail ||
          "Unknown error";
-        toast.error(`Error setting password: ${errorMessage}`, {
-          position: "top-center",
-        });
+        toast.error(
+          t("users.toast.error.setPasswordFailed", {
+            errorMessage,
+          }),
+          {
+            position: "top-center",
+          },
+        );
      });
  };

@@ -83,7 +91,7 @@ export default function AccountSettings({ className }: AccountSettingsProps) {
          </TooltipTrigger>
          <TooltipPortal>
            <TooltipContent side="right">
-              <p>Account</p>
+              <p>{t("menu.user.account", { ns: "common" })}</p>
            </TooltipContent>
          </TooltipPortal>
        </Tooltip>
@@ -95,8 +103,13 @@ export default function AccountSettings({ className }: AccountSettingsProps) {
      >
        <div className="scrollbar-container w-full flex-col overflow-y-auto overflow-x-hidden">
          <DropdownMenuLabel>
-            Current User: {profile?.username || "anonymous"}{" "}
-            {profile?.role && `(${profile.role})`}
+            {t("menu.user.current", {
+              ns: "common",
+              user:
+                profile?.username || t("menu.user.anonymous", { ns: "common" }),
+            })}{" "}
+            {t("role." + profile?.role) &&
+              `(${t("role." + profile?.role, { ns: "common" })})`}
          </DropdownMenuLabel>
          <DropdownMenuSeparator className={isDesktop ? "mt-3" : "mt-1"} />
          {profile?.username && profile.username !== "anonymous" && (
@@ -104,22 +117,22 @@ export default function AccountSettings({ className }: AccountSettingsProps) {
              className={
                isDesktop ? "cursor-pointer" : "flex items-center p-2 text-sm"
              }
-              aria-label="Set Password"
+              aria-label={t("menu.user.setPassword", { ns: "common" })}
              onClick={() => setPasswordDialogOpen(true)}
            >
              <LuSquarePen className="mr-2 size-4" />
-              <span>Set Password</span>
+              <span>{t("menu.user.setPassword", { ns: "common" })}</span>
            </MenuItem>
          )}
          <MenuItem
            className={
              isDesktop ? "cursor-pointer" : "flex items-center p-2 text-sm"
            }
-            aria-label="Log out"
+            aria-label={t("menu.user.logout", { ns: "common" })}
          >
            <a className="flex" href={logoutUrl}>
              <LuLogOut className="mr-2 size-4" />
-              <span>Logout</span>
+              <span>{t("menu.user.logout", { ns: "common" })}</span>
            </a>
          </MenuItem>
        </div>
--- a/web/src/components/menu/GeneralSettings.tsx
+++ b/web/src/components/menu/GeneralSettings.tsx
@@ -1,6 +1,7 @@
 import {
  LuActivity,
  LuGithub,
+  LuLanguages,
  LuLifeBuoy,
  LuList,
  LuLogOut,
@@ -10,6 +11,7 @@ import {
  LuSettings,
  LuSun,
  LuSunMoon,
+  LuEarth,
 } from "react-icons/lu";
 import {
  DropdownMenu,
@@ -52,21 +54,28 @@ import { TooltipPortal } from "@radix-ui/react-tooltip";
 import { cn } from "@/lib/utils";
 import useSWR from "swr";
 import RestartDialog from "../overlay/dialog/RestartDialog";
+
+import { useLanguage } from "@/context/language-provider";
 import { useIsAdmin } from "@/hooks/use-is-admin";
 import SetPasswordDialog from "../overlay/SetPasswordDialog";
 import { toast } from "sonner";
 import axios from "axios";
 import { FrigateConfig } from "@/types/frigateConfig";
+import { useTranslation } from "react-i18next";

 type GeneralSettingsProps = {
  className?: string;
 };

 export default function GeneralSettings({ className }: GeneralSettingsProps) {
+  const { t } = useTranslation(["common"]);
  const { data: profile } = useSWR("profile");
  const { data: config } = useSWR<FrigateConfig>("config");
  const logoutUrl = config?.proxy?.logout_url || "/api/logout";

+  // settings
+
+  const { language, setLanguage, systemLanguage } = useLanguage();
  const { theme, colorScheme, setTheme, setColorScheme } = useTheme();
  const [restartDialogOpen, setRestartDialogOpen] = useState(false);
  const [passwordDialogOpen, setPasswordDialogOpen] = useState(false);
@@ -90,9 +99,12 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
      .then((response) => {
        if (response.status === 200) {
          setPasswordDialogOpen(false);
-          toast.success("Password updated successfully.", {
-            position: "top-center",
-          });
+          toast.success(
+            t("users.toast.success.updatePassword", { ns: "views/settings" }),
+            {
+              position: "top-center",
+            },
+          );
        }
      })
      .catch((error) => {
@@ -100,9 +112,15 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
          error.response?.data?.message ||
          error.response?.data?.detail ||
          "Unknown error";
-        toast.error(`Error setting password: ${errorMessage}`, {
-          position: "top-center",
-        });
+        toast.error(
+          t("users.toast.error.setPasswordFailed", {
+            ns: "views/settings",
+            errorMessage,
+          }),
+          {
+            position: "top-center",
+          },
+        );
      });
  };

@@ -126,7 +144,7 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
            </TooltipTrigger>
            <TooltipPortal>
              <TooltipContent side="right">
-                <p>Settings</p>
+                <p>{t("menu.settings")}</p>
              </TooltipContent>
            </TooltipPortal>
          </Tooltip>
@@ -150,8 +168,11 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
            {isMobile && (
              <div className="mb-2">
                <DropdownMenuLabel>
-                  Current User: {profile?.username || "anonymous"}{" "}
-                  {profile?.role && `(${profile.role})`}
+                  {t("menu.user.current", {
+                    user: profile?.username || t("menu.user.anonymous"),
+                  })}{" "}
+                  {t("role." + profile?.role) &&
+                    `(${t("role." + profile?.role)})`}
                </DropdownMenuLabel>
                <DropdownMenuSeparator
                  className={isDesktop ? "mt-3" : "mt-1"}
@@ -163,11 +184,11 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
                        ? "cursor-pointer"
                        : "flex items-center p-2 text-sm"
                    }
-                    aria-label="Set Password"
+                    aria-label={t("menu.user.setPassword")}
                    onClick={() => setPasswordDialogOpen(true)}
                  >
                    <LuSquarePen className="mr-2 size-4" />
-                    <span>Set Password</span>
+                    <span>{t("menu.user.setPassword")}</span>
                  </MenuItem>
                )}
                <MenuItem
@@ -176,18 +197,18 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
                      ? "cursor-pointer"
                      : "flex items-center p-2 text-sm"
                  }
-                  aria-label="Log out"
+                  aria-label={t("menu.user.logout", { ns: "common" })}
                >
                  <a className="flex" href={logoutUrl}>
                    <LuLogOut className="mr-2 size-4" />
-                    <span>Logout</span>
+                    <span>{t("menu.user.logout", { ns: "common" })}</span>
                  </a>
                </MenuItem>
              </div>
            )}
            {isAdmin && (
              <>
-                <DropdownMenuLabel>System</DropdownMenuLabel>
+                <DropdownMenuLabel>{t("menu.system")}</DropdownMenuLabel>
                <DropdownMenuSeparator />
                <DropdownMenuGroup className={isDesktop ? "" : "flex flex-col"}>
                  <Link to="/system#general">
@@ -197,10 +218,10 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
                          ? "cursor-pointer"
                          : "flex w-full items-center p-2 text-sm"
                      }
-                      aria-label="System metrics"
+                      aria-label={t("menu.systemMetrics")}
                    >
                      <LuActivity className="mr-2 size-4" />
-                      <span>System metrics</span>
+                      <span>{t("menu.systemMetrics")}</span>
                    </MenuItem>
                  </Link>
                  <Link to="/logs">
@@ -210,10 +231,10 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
                          ? "cursor-pointer"
                          : "flex w-full items-center p-2 text-sm"
                      }
-                      aria-label="System logs"
+                      aria-label={t("menu.systemLogs")}
                    >
                      <LuList className="mr-2 size-4" />
-                      <span>System logs</span>
+                      <span>{t("menu.systemLogs")}</span>
                    </MenuItem>
                  </Link>
                </DropdownMenuGroup>
@@ -222,7 +243,7 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
            <DropdownMenuLabel
              className={isDesktop && isAdmin ? "mt-3" : "mt-1"}
            >
-              Configuration
+              {t("menu.configuration")}
            </DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuGroup>
@@ -233,10 +254,10 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
                      ? "cursor-pointer"
                      : "flex w-full items-center p-2 text-sm"
                  }
-                  aria-label="Settings"
+                  aria-label={t("menu.settings")}
                >
                  <LuSettings className="mr-2 size-4" />
-                  <span>Settings</span>
+                  <span>{t("menu.settings")}</span>
                </MenuItem>
              </Link>
              {isAdmin && (
@@ -248,10 +269,10 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
                          ? "cursor-pointer"
                          : "flex w-full items-center p-2 text-sm"
                      }
-                      aria-label="Configuration editor"
+                      aria-label={t("menu.configurationEditor")}
                    >
                      <LuSquarePen className="mr-2 size-4" />
-                      <span>Configuration editor</span>
+                      <span>{t("menu.configurationEditor")}</span>
                    </MenuItem>
                  </Link>
                </>
@@ -271,7 +292,7 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
              )}
            </DropdownMenuGroup>
            <DropdownMenuLabel className={isDesktop ? "mt-3" : "mt-1"}>
-              Appearance
+              {t("menu.appearance")}
            </DropdownMenuLabel>
            <DropdownMenuSeparator />
            <SubItem>
@@ -280,8 +301,8 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
                  isDesktop ? "cursor-pointer" : "flex items-center p-2 text-sm"
                }
              >
-                <LuSunMoon className="mr-2 size-4" />
-                <span>Dark Mode</span>
+                <LuLanguages className="mr-2 size-4" />
+                <span>{t("menu.languages")}</span>
              </SubItemTrigger>
              <Portal>
                <SubItemContent
@@ -296,16 +317,16 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
                        ? "cursor-pointer"
                        : "flex items-center p-2 text-sm"
                    }
-                    aria-label="Light mode"
-                    onClick={() => setTheme("light")}
+                    aria-label={t("menu.language.en")}
+                    onClick={() => setLanguage("en")}
                  >
-                    {theme === "light" ? (
+                    {language.trim() === "en" ? (
                      <>
-                        <LuSun className="mr-2 size-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-                        Light
+                        <LuLanguages className="mr-2 size-4" />
+                        {t("menu.language.en")}
                      </>
                    ) : (
-                      <span className="ml-6 mr-2">Light</span>
+                      <span className="ml-6 mr-2">{t("menu.language.en")}</span>
                    )}
                  </MenuItem>
                  <MenuItem
@@ -314,16 +335,18 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
                        ? "cursor-pointer"
                        : "flex items-center p-2 text-sm"
                    }
-                    aria-label="Dark mode"
-                    onClick={() => setTheme("dark")}
+                    aria-label={t("menu.language.zhCN")}
+                    onClick={() => setLanguage("zh-CN")}
                  >
-                    {theme === "dark" ? (
+                    {language === "zh-CN" ? (
                      <>
-                        <LuMoon className="mr-2 size-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-                        Dark
+                        <LuLanguages className="mr-2 size-4" />
+                        {t("menu.language.zhCN")}
                      </>
                    ) : (
-                      <span className="ml-6 mr-2">Dark</span>
+                      <span className="ml-6 mr-2">
+                        {t("menu.language.zhCN")}
+                      </span>
                    )}
                  </MenuItem>
                  <MenuItem
@@ -332,16 +355,16 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
                        ? "cursor-pointer"
                        : "flex items-center p-2 text-sm"
                    }
-                    aria-label="Use the system settings for light or dark mode"
-                    onClick={() => setTheme("system")}
+                    aria-label={t("menu.language.withSystem.label")}
+                    onClick={() => setLanguage(systemLanguage)}
                  >
-                    {theme === "system" ? (
+                    {language === systemLanguage ? (
                      <>
-                        <CgDarkMode className="mr-2 size-4 scale-100 transition-all" />
-                        System
+                        <LuEarth className="mr-2 size-4 scale-100 transition-all" />
+                        {t("menu.withSystem")}
                      </>
                    ) : (
-                      <span className="ml-6 mr-2">System</span>
+                      <span className="ml-6 mr-2">{t("menu.withSystem")}</span>
                    )}
                  </MenuItem>
                </SubItemContent>
@@ -354,7 +377,84 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
                }
              >
                <LuSunMoon className="mr-2 size-4" />
-                <span>Theme</span>
+                <span>{t("menu.darkMode.label")}</span>
+              </SubItemTrigger>
+              <Portal>
+                <SubItemContent
+                  className={
+                    isDesktop ? "" : "w-[92%] rounded-lg md:rounded-2xl"
+                  }
+                >
+                  <span tabIndex={0} className="sr-only" />
+                  <MenuItem
+                    className={
+                      isDesktop
+                        ? "cursor-pointer"
+                        : "flex items-center p-2 text-sm"
+                    }
+                    aria-label={t("menu.darkMode.light")}
+                    onClick={() => setTheme("light")}
+                  >
+                    {theme === "light" ? (
+                      <>
+                        <LuSun className="mr-2 size-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+                        {t("menu.darkMode.light")}
+                      </>
+                    ) : (
+                      <span className="ml-6 mr-2">
+                        {t("menu.darkMode.light")}
+                      </span>
+                    )}
+                  </MenuItem>
+                  <MenuItem
+                    className={
+                      isDesktop
+                        ? "cursor-pointer"
+                        : "flex items-center p-2 text-sm"
+                    }
+                    aria-label={t("menu.darkMode.dark")}
+                    onClick={() => setTheme("dark")}
+                  >
+                    {theme === "dark" ? (
+                      <>
+                        <LuMoon className="mr-2 size-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+                        {t("menu.darkMode.dark")}
+                      </>
+                    ) : (
+                      <span className="ml-6 mr-2">
+                        {t("menu.darkMode.dark")}
+                      </span>
+                    )}
+                  </MenuItem>
+                  <MenuItem
+                    className={
+                      isDesktop
+                        ? "cursor-pointer"
+                        : "flex items-center p-2 text-sm"
+                    }
+                    aria-label={t("menu.darkMode.withSystem.label")}
+                    onClick={() => setTheme("system")}
+                  >
+                    {theme === "system" ? (
+                      <>
+                        <CgDarkMode className="mr-2 size-4 scale-100 transition-all" />
+                        {t("menu.withSystem")}
+                      </>
+                    ) : (
+                      <span className="ml-6 mr-2">{t("menu.withSystem")}</span>
+                    )}
+                  </MenuItem>
+                </SubItemContent>
+              </Portal>
+            </SubItem>
+            <SubItem>
+              <SubItemTrigger
+                className={
+                  isDesktop ? "cursor-pointer" : "flex items-center p-2 text-sm"
+                }
+              >
+                <LuSunMoon className="mr-2 size-4" />
+                <span>{t("menu.theme.label")}</span>
              </SubItemTrigger>
              <Portal>
                <SubItemContent
@@ -377,11 +477,11 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
                      {scheme === colorScheme ? (
                        <>
                          <IoColorPalette className="mr-2 size-4 rotate-0 scale-100 transition-all" />
-                          {friendlyColorSchemeName(scheme)}
+                          {t(friendlyColorSchemeName(scheme))}
                        </>
                      ) : (
                        <span className="ml-6 mr-2">
-                          {friendlyColorSchemeName(scheme)}
+                          {t(friendlyColorSchemeName(scheme))}
                        </span>
                      )}
                    </MenuItem>
@@ -390,7 +490,7 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
              </Portal>
            </SubItem>
            <DropdownMenuLabel className={isDesktop ? "mt-3" : "mt-1"}>
-              Help
+              {t("menu.help")}
            </DropdownMenuLabel>
            <DropdownMenuSeparator />
            <a href="https://docs.frigate.video" target="_blank">
@@ -398,10 +498,10 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
                className={
                  isDesktop ? "cursor-pointer" : "flex items-center p-2 text-sm"
                }
-                aria-label="Frigate documentation"
+                aria-label={t("menu.documentation.label")}
              >
                <LuLifeBuoy className="mr-2 size-4" />
-                <span>Documentation</span>
+                <span>{t("menu.documentation")}</span>
              </MenuItem>
            </a>
            <a
@@ -429,11 +529,11 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
                      ? "cursor-pointer"
                      : "flex items-center p-2 text-sm"
                  }
-                  aria-label="Restart Frigate"
+                  aria-label={t("menu.restart")}
                  onClick={() => setRestartDialogOpen(true)}
                >
                  <LuRotateCw className="mr-2 size-4" />
-                  <span>Restart Frigate</span>
+                  <span>{t("menu.restart")}</span>
                </MenuItem>
              </>
            )}
--- a/web/src/components/menu/LiveContextMenu.tsx
+++ b/web/src/components/menu/LiveContextMenu.tsx
@@ -44,6 +44,7 @@ import {
  useNotifications,
  useNotificationSuspend,
 } from "@/api/ws";
+import { useTranslation } from "react-i18next";

 type LiveContextMenuProps = {
  className?: string;
@@ -85,6 +86,7 @@ export default function LiveContextMenu({
  config,
  children,
 }: LiveContextMenuProps) {
+  const { t } = useTranslation("views/live");
  const [showSettings, setShowSettings] = useState(false);

  // camera enabled
@@ -209,7 +211,7 @@ export default function LiveContextMenu({
  // notifications

  const notificationsEnabledInConfig =
-    config?.cameras[camera].notifications.enabled_in_config;
+    config?.cameras[camera]?.notifications?.enabled_in_config;

  const { payload: notificationState, send: sendNotification } =
    useNotifications(camera);
@@ -234,14 +236,19 @@ export default function LiveContextMenu({
  };

  const formatSuspendedUntil = (timestamp: string) => {
-    if (timestamp === "0") return "Frigate restarts.";
+    // Some languages require a change in word order
+    if (timestamp === "0") return t("time.untilForRestart", { ns: "common" });

-    return formatUnixTimestampToDateTime(Number.parseInt(timestamp), {
+    const time = formatUnixTimestampToDateTime(Number.parseInt(timestamp), {
      time_style: "medium",
      date_style: "medium",
      timezone: config?.ui.timezone,
-      strftime_fmt: `%b %d, ${config?.ui.time_format == "24hour" ? "%H:%M" : "%I:%M %p"}`,
+      strftime_fmt:
+        config?.ui.time_format == "24hour"
+          ? t("time.formattedTimestampExcludeSeconds.24hour", { ns: "common" })
+          : t("time.formattedTimestampExcludeSeconds", { ns: "common" }),
    });
+    return t("time.untilForTime", { ns: "common", time });
  };

  return (
@@ -256,7 +263,7 @@ export default function LiveContextMenu({
            {preferredLiveMode == "jsmpeg" && isRestreamed && (
              <div className="flex flex-row items-center gap-1">
                <IoIosWarning className="mr-1 size-4 text-danger" />
-                <p className="mr-2 text-xs">Low-bandwidth mode</p>
+                <p className="mr-2 text-xs">{t("lowBandwidthMode")}</p>
              </div>
            )}
          </div>
@@ -265,7 +272,7 @@ export default function LiveContextMenu({
              <ContextMenuSeparator className="mb-1" />
              <div className="p-2 text-sm">
                <div className="flex w-full flex-col gap-1">
-                  <p>Audio</p>
+                  <p>{t("audio")}</p>
                  <div className="flex flex-row items-center gap-1">
                    <VolumeIcon
                      className="size-5"
@@ -292,7 +299,7 @@ export default function LiveContextMenu({
              onClick={() => sendEnabled(isEnabled ? "OFF" : "ON")}
            >
              <div className="text-primary">
-                {isEnabled ? "Disable" : "Enable"} Camera
+                {isEnabled ? t("camera.disable") : t("camera.enable")}
              </div>
            </div>
          </ContextMenuItem>
@@ -302,7 +309,7 @@ export default function LiveContextMenu({
              className="flex w-full cursor-pointer items-center justify-start gap-2"
              onClick={isEnabled ? muteAll : undefined}
            >
-              <div className="text-primary">Mute All Cameras</div>
+              <div className="text-primary">{t("muteCameras.enable")}</div>
            </div>
          </ContextMenuItem>
          <ContextMenuItem disabled={!isEnabled}>
@@ -310,7 +317,7 @@ export default function LiveContextMenu({
              className="flex w-full cursor-pointer items-center justify-start gap-2"
              onClick={isEnabled ? unmuteAll : undefined}
            >
-              <div className="text-primary">Unmute All Cameras</div>
+              <div className="text-primary">{t("muteCameras.disable")}</div>
            </div>
          </ContextMenuItem>
          <ContextMenuSeparator />
@@ -320,7 +327,9 @@ export default function LiveContextMenu({
              onClick={isEnabled ? toggleStats : undefined}
            >
              <div className="text-primary">
-                {statsState ? "Hide" : "Show"} Stream Stats
+                {statsState
+                  ? t("streamStats.disable")
+                  : t("streamStats.enable")}
              </div>
            </div>
          </ContextMenuItem>
@@ -333,7 +342,9 @@ export default function LiveContextMenu({
                  : undefined
              }
            >
-              <div className="text-primary">Debug View</div>
+              <div className="text-primary">
+                {t("streaming.debugView", { ns: "components/dialog" })}
+              </div>
            </div>
          </ContextMenuItem>
          {cameraGroup && cameraGroup !== "default" && (
@@ -344,7 +355,7 @@ export default function LiveContextMenu({
                  className="flex w-full cursor-pointer items-center justify-start gap-2"
                  onClick={isEnabled ? () => setShowSettings(true) : undefined}
                >
-                  <div className="text-primary">Streaming Settings</div>
+                  <div className="text-primary">{t("streamingSettings")}</div>
                </div>
              </ContextMenuItem>
            </>
@@ -357,7 +368,9 @@ export default function LiveContextMenu({
                  className="flex w-full cursor-pointer items-center justify-start gap-2"
                  onClick={isEnabled ? resetPreferredLiveMode : undefined}
                >
-                  <div className="text-primary">Reset</div>
+                  <div className="text-primary">
+                    {t("button.reset", { ns: "common" })}
+                  </div>
                </div>
              </ContextMenuItem>
            </>
@@ -368,7 +381,7 @@ export default function LiveContextMenu({
              <ContextMenuSub>
                <ContextMenuSubTrigger disabled={!isEnabled}>
                  <div className="flex items-center gap-2">
-                    <span>Notifications</span>
+                    <span>{t("notifications")}</span>
                  </div>
                </ContextMenuSubTrigger>
                <ContextMenuSubContent>
@@ -379,25 +392,29 @@ export default function LiveContextMenu({
                          {isSuspended ? (
                            <>
                              <IoIosNotificationsOff className="size-5 text-muted-foreground" />
-                              <span>Suspended</span>
+                              <span>
+                                {t("button.suspended", { ns: "common" })}
+                              </span>
                            </>
                          ) : (
                            <>
                              <IoIosNotifications className="size-5 text-muted-foreground" />
-                              <span>Enabled</span>
+                              <span>
+                                {t("button.enabled", { ns: "common" })}
+                              </span>
                            </>
                          )}
                        </>
                      ) : (
                        <>
                          <IoIosNotificationsOff className="size-5 text-danger" />
-                          <span>Disabled</span>
+                          <span>{t("button.disabled", { ns: "common" })}</span>
                        </>
                      )}
                    </div>
                    {isSuspended && (
                      <span className="text-xs text-primary-variant">
-                        Until {formatSuspendedUntil(notificationSuspendUntil)}
+                        {formatSuspendedUntil(notificationSuspendUntil)}
                      </span>
                    )}
                  </div>
@@ -418,9 +435,11 @@ export default function LiveContextMenu({
                      >
                        <div className="flex w-full flex-col gap-2">
                          {notificationState === "ON" ? (
-                            <span>Unsuspend</span>
+                            <span>
+                              {t("button.unsuspended", { ns: "common" })}
+                            </span>
                          ) : (
-                            <span>Enable</span>
+                            <span>{t("button.enable", { ns: "common" })}</span>
                          )}
                        </div>
                      </ContextMenuItem>
@@ -431,7 +450,7 @@ export default function LiveContextMenu({
                        <ContextMenuSeparator />
                        <div className="px-2 py-1.5">
                          <p className="mb-2 text-sm font-medium text-muted-foreground">
-                            Suspend for:
+                            {t("suspend.forTime")}
                          </p>
                          <div className="space-y-1">
                            <ContextMenuItem
@@ -440,7 +459,7 @@ export default function LiveContextMenu({
                                isEnabled ? () => handleSuspend("5") : undefined
                              }
                            >
-                              5 minutes
+                              {t("time.5minutes", { ns: "common" })}
                            </ContextMenuItem>
                            <ContextMenuItem
                              disabled={!isEnabled}
@@ -450,7 +469,7 @@ export default function LiveContextMenu({
                                  : undefined
                              }
                            >
-                              10 minutes
+                              {t("time.10minutes", { ns: "common" })}
                            </ContextMenuItem>
                            <ContextMenuItem
                              disabled={!isEnabled}
@@ -460,7 +479,7 @@ export default function LiveContextMenu({
                                  : undefined
                              }
                            >
-                              30 minutes
+                              {t("time.30minutes", { ns: "common" })}
                            </ContextMenuItem>
                            <ContextMenuItem
                              disabled={!isEnabled}
@@ -470,7 +489,7 @@ export default function LiveContextMenu({
                                  : undefined
                              }
                            >
-                              1 hour
+                              {t("time.1hour", { ns: "common" })}
                            </ContextMenuItem>
                            <ContextMenuItem
                              disabled={!isEnabled}
@@ -480,7 +499,7 @@ export default function LiveContextMenu({
                                  : undefined
                              }
                            >
-                              12 hours
+                              {t("time.12hours", { ns: "common" })}
                            </ContextMenuItem>
                            <ContextMenuItem
                              disabled={!isEnabled}
@@ -490,7 +509,7 @@ export default function LiveContextMenu({
                                  : undefined
                              }
                            >
-                              24 hours
+                              {t("time.24hours", { ns: "common" })}
                            </ContextMenuItem>
                            <ContextMenuItem
                              disabled={!isEnabled}
@@ -500,7 +519,7 @@ export default function LiveContextMenu({
                                  : undefined
                              }
                            >
-                              Until restart
+                              {t("time.untilRestart", { ns: "common" })}
                            </ContextMenuItem>
                          </div>
                        </div>
--- a/web/src/components/menu/SearchResultActions.tsx
+++ b/web/src/components/menu/SearchResultActions.tsx
@@ -40,6 +40,8 @@ import {
 } from "@/components/ui/tooltip";
 import useSWR from "swr";

+import { Trans, useTranslation } from "react-i18next";
+
 type SearchResultActionsProps = {
  searchResult: SearchResult;
  findSimilar: () => void;
@@ -59,6 +61,8 @@ export default function SearchResultActions({
  isContextMenu = false,
  children,
 }: SearchResultActionsProps) {
+  const { t } = useTranslation(["views/explore"]);
+
  const { data: config } = useSWR<FrigateConfig>("config");

  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
@@ -68,7 +72,7 @@ export default function SearchResultActions({
      .delete(`events/${searchResult.id}`)
      .then((resp) => {
        if (resp.status == 200) {
-          toast.success("Tracked object deleted successfully.", {
+          toast.success(t("searchResult.deleteTrackedObject.toast.success"), {
            position: "top-center",
          });
          refreshResults();
@@ -79,9 +83,12 @@ export default function SearchResultActions({
          error.response?.data?.message ||
          error.response?.data?.detail ||
          "Unknown error";
-        toast.error(`Failed to delete tracked object: ${errorMessage}`, {
-          position: "top-center",
-        });
+        toast.error(
+          t("searchResult.deleteTrackedObject.toast.error", { errorMessage }),
+          {
+            position: "top-center",
+          },
+        );
      });
  };

@@ -90,45 +97,45 @@ export default function SearchResultActions({
  const menuItems = (
    <>
      {searchResult.has_clip && (
-        <MenuItem aria-label="Download video">
+        <MenuItem aria-label={t("itemMenu.downloadVideo.aria")}>
          <a
            className="flex items-center"
            href={`${baseUrl}api/events/${searchResult.id}/clip.mp4`}
            download={`${searchResult.camera}_${searchResult.label}.mp4`}
          >
            <LuDownload className="mr-2 size-4" />
-            <span>Download video</span>
+            <span>{t("itemMenu.downloadVideo")}</span>
          </a>
        </MenuItem>
      )}
      {searchResult.has_snapshot && (
-        <MenuItem aria-label="Download snapshot">
+        <MenuItem aria-label={t("itemMenu.downloadSnapshot.aria")}>
          <a
            className="flex items-center"
            href={`${baseUrl}api/events/${searchResult.id}/snapshot.jpg`}
            download={`${searchResult.camera}_${searchResult.label}.jpg`}
          >
            <LuCamera className="mr-2 size-4" />
-            <span>Download snapshot</span>
+            <span>{t("itemMenu.downloadSnapshot.label")}</span>
          </a>
        </MenuItem>
      )}
      {searchResult.data.type == "object" && (
        <MenuItem
-          aria-label="Show the object lifecycle"
+          aria-label={t("itemMenu.viewObjectLifecycle.aria")}
          onClick={showObjectLifecycle}
        >
          <FaArrowsRotate className="mr-2 size-4" />
-          <span>View object lifecycle</span>
+          <span>{t("itemMenu.viewObjectLifecycle.label")}</span>
        </MenuItem>
      )}
      {config?.semantic_search?.enabled && isContextMenu && (
        <MenuItem
-          aria-label="Find similar tracked objects"
+          aria-label={t("itemMenu.findSimilar.aria")}
          onClick={findSimilar}
        >
          <MdImageSearch className="mr-2 size-4" />
-          <span>Find similar</span>
+          <span>{t("itemMenu.findSimilar.label")}</span>
        </MenuItem>
      )}
      {isMobileOnly &&
@@ -137,17 +144,20 @@ export default function SearchResultActions({
        searchResult.end_time &&
        searchResult.data.type == "object" &&
        !searchResult.plus_id && (
-          <MenuItem aria-label="Submit to Frigate Plus" onClick={showSnapshot}>
+          <MenuItem
+            aria-label={t("itemMenu.submitToPlus.aria")}
+            onClick={showSnapshot}
+          >
            <FrigatePlusIcon className="mr-2 size-4 cursor-pointer text-primary" />
-            <span>Submit to Frigate+</span>
+            <span>{t("itemMenu.submitToPlus")}</span>
          </MenuItem>
        )}
      <MenuItem
-        aria-label="Delete this tracked object"
+        aria-label={t("itemMenu.deleteTrackedObject.label")}
        onClick={() => setDeleteDialogOpen(true)}
      >
        <LuTrash2 className="mr-2 size-4" />
-        <span>Delete</span>
+        <span>{t("button.delete", { ns: "common" })}</span>
      </MenuItem>
    </>
  );
@@ -160,24 +170,20 @@ export default function SearchResultActions({
      >
        <AlertDialogContent>
          <AlertDialogHeader>
-            <AlertDialogTitle>Confirm Delete</AlertDialogTitle>
+            <AlertDialogTitle>{t("dialog.confirmDelete")}</AlertDialogTitle>
          </AlertDialogHeader>
          <AlertDialogDescription>
-            Deleting this tracked object removes the snapshot, any saved
-            embeddings, and any associated object lifecycle entries. Recorded
-            footage of this tracked object in History view will <em>NOT</em> be
-            deleted.
-            <br />
-            <br />
-            Are you sure you want to proceed?
+            <Trans ns="views/explore">dialog.confirmDelete.desc</Trans>
          </AlertDialogDescription>
          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogCancel>
+              {t("button.cancel", { ns: "common" })}
+            </AlertDialogCancel>
            <AlertDialogAction
              className={buttonVariants({ variant: "destructive" })}
              onClick={handleDelete}
            >
-              Delete
+              {t("button.delete", { ns: "common" })}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
@@ -198,7 +204,9 @@ export default function SearchResultActions({
                    onClick={findSimilar}
                  />
                </TooltipTrigger>
-                <TooltipContent>Find similar</TooltipContent>
+                <TooltipContent>
+                  {t("itemMenu.findSimilar.label")}
+                </TooltipContent>
              </Tooltip>
            )}

@@ -215,7 +223,9 @@ export default function SearchResultActions({
                    onClick={showSnapshot}
                  />
                </TooltipTrigger>
-                <TooltipContent>Submit to Frigate+</TooltipContent>
+                <TooltipContent>
+                  {t("itemMenu.submitToPlus.label")}
+                </TooltipContent>
              </Tooltip>
            )}

--- a/web/src/components/mobile/MobilePage.tsx
+++ b/web/src/components/mobile/MobilePage.tsx
@@ -5,6 +5,7 @@ import { IoMdArrowRoundBack } from "react-icons/io";
 import { cn } from "@/lib/utils";
 import { isPWA } from "@/utils/isPWA";
 import { Button } from "@/components/ui/button";
+import { useTranslation } from "react-i18next";

 const MobilePageContext = createContext<{
  open: boolean;
@@ -138,6 +139,7 @@ export function MobilePageHeader({
  onClose,
  ...props
 }: MobilePageHeaderProps) {
+  const { t } = useTranslation(["common"]);
  const context = useContext(MobilePageContext);
  if (!context)
    throw new Error("MobilePageHeader must be used within MobilePage");
@@ -160,7 +162,7 @@ export function MobilePageHeader({
    >
      <Button
        className="absolute left-0 rounded-lg"
-        aria-label="Go back"
+        aria-label={t("label.back", { ns: "common" })}
        size="sm"
        onClick={handleClose}
      >
--- a/web/src/components/navigation/NavItem.tsx
+++ b/web/src/components/navigation/NavItem.tsx
@@ -9,6 +9,7 @@ import { TooltipPortal } from "@radix-ui/react-tooltip";
 import { NavData } from "@/types/navigation";
 import { IconType } from "react-icons";
 import { cn } from "@/lib/utils";
+import { useTranslation } from "react-i18next";

 const variants = {
  primary: {
@@ -34,6 +35,7 @@ export default function NavItem({
  Icon,
  onClick,
 }: NavItemProps) {
+  const { t } = useTranslation(["common"]);
  if (item.enabled == false) {
    return;
  }
@@ -60,7 +62,7 @@ export default function NavItem({
        <TooltipTrigger>{content}</TooltipTrigger>
        <TooltipPortal>
          <TooltipContent side="right">
-            <p>{item.title}</p>
+            <p>{t(item.title)}</p>
          </TooltipContent>
        </TooltipPortal>
      </Tooltip>
--- a/web/src/components/overlay/CameraInfoDialog.tsx
+++ b/web/src/components/overlay/CameraInfoDialog.tsx
@@ -15,6 +15,7 @@ import { useEffect, useState } from "react";
 import axios from "axios";
 import { toast } from "sonner";
 import { Toaster } from "../ui/sonner";
+import { Trans, useTranslation } from "react-i18next";

 type CameraInfoDialogProps = {
  camera: CameraConfig;
@@ -26,6 +27,7 @@ export default function CameraInfoDialog({
  showCameraInfoDialog,
  setShowCameraInfoDialog,
 }: CameraInfoDialogProps) {
+  const { t } = useTranslation(["views/system"]);
  const [ffprobeInfo, setFfprobeInfo] = useState<Ffprobe[]>();

  useEffect(() => {
@@ -39,15 +41,25 @@ export default function CameraInfoDialog({
        if (res.status === 200) {
          setFfprobeInfo(res.data);
        } else {
-          toast.error(`Unable to probe camera: ${res.statusText}`, {
-            position: "top-center",
-          });
+          toast.error(
+            t("cameras.toast.success.copyToClipboard", {
+              errorMessage: res.statusText,
+            }),
+            {
+              position: "top-center",
+            },
+          );
        }
      })
      .catch((error) => {
-        toast.error(`Unable to probe camera: ${error.response.data.message}`, {
-          position: "top-center",
-        });
+        toast.error(
+          t("cameras.toast.success.copyToClipboard", {
+            errorMessage: error.response.data.message,
+          }),
+          {
+            position: "top-center",
+          },
+        );
      });
    // we know that these deps are correct
    // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -55,7 +67,7 @@ export default function CameraInfoDialog({

  const onCopyFfprobe = async () => {
    copy(JSON.stringify(ffprobeInfo));
-    toast.success("Copied probe data to clipboard.");
+    toast.success(t("cameras.toast.success.copyToClipboard"));
  };

  function gcd(a: number, b: number): number {
@@ -72,11 +84,13 @@ export default function CameraInfoDialog({
        <DialogContent>
          <DialogHeader>
            <DialogTitle className="capitalize">
-              {camera.name.replaceAll("_", " ")} Camera Probe Info
+              {t("cameras.info.cameraProbeInfo", {
+                camera: camera.name.replaceAll("_", " "),
+              })}
            </DialogTitle>
          </DialogHeader>
          <DialogDescription>
-            Stream data is obtained with <code>ffprobe</code>.
+            <Trans ns="views/system">cameras.info.streamDataFromFFPROBE</Trans>
          </DialogDescription>

          <div className="mb-2 p-4">
@@ -85,7 +99,9 @@ export default function CameraInfoDialog({
                {ffprobeInfo.map((stream, idx) => (
                  <div key={idx} className="mb-5">
                    <div className="mb-1 rounded-md bg-secondary p-2 text-lg text-primary">
-                      Stream {idx + 1}
+                      {t("cameras.info.stream", {
+                        idx: idx + 1,
+                      })}
                    </div>
                    {stream.return_code == 0 ? (
                      <div>
@@ -93,10 +109,12 @@ export default function CameraInfoDialog({
                          <div className="" key={idx}>
                            {codec.width ? (
                              <div className="text-muted-foreground">
-                                <div className="ml-2">Video:</div>
+                                <div className="ml-2">
+                                  {t("cameras.info.video")}
+                                </div>
                                <div className="ml-5">
                                  <div>
-                                    Codec:
+                                    {t("cameras.info.codec")}
                                    <span className="text-primary">
                                      {" "}
                                      {codec.codec_long_name}
@@ -105,7 +123,7 @@ export default function CameraInfoDialog({
                                  <div>
                                    {codec.width && codec.height ? (
                                      <>
-                                        Resolution:{" "}
+                                        {t("cameras.info.resolution")}{" "}
                                        <span className="text-primary">
                                          {" "}
                                          {codec.width}x{codec.height} (
@@ -119,7 +137,7 @@ export default function CameraInfoDialog({
                                      </>
                                    ) : (
                                      <span>
-                                        Resolution:{" "}
+                                        {t("cameras.info.resolution")}{" "}
                                        <span className="text-primary">
                                          Unknown
                                        </span>
@@ -127,10 +145,10 @@ export default function CameraInfoDialog({
                                    )}
                                  </div>
                                  <div>
-                                    FPS:{" "}
+                                    {t("cameras.info.fps")}{" "}
                                    <span className="text-primary">
                                      {codec.avg_frame_rate == "0/0"
-                                        ? "Unknown"
+                                        ? t("cameras.info.unknown")
                                        : codec.avg_frame_rate}
                                    </span>
                                  </div>
@@ -140,7 +158,7 @@ export default function CameraInfoDialog({
                              <div className="text-muted-foreground">
                                <div className="ml-2 mt-1">Audio:</div>
                                <div className="ml-4">
-                                  Codec:{" "}
+                                  {t("cameras.info.codec")}{" "}
                                  <span className="text-primary">
                                    {codec.codec_long_name}
                                  </span>
@@ -152,7 +170,11 @@ export default function CameraInfoDialog({
                      </div>
                    ) : (
                      <div className="px-2">
-                        <div>Error: {stream.stderr}</div>
+                        <div>
+                          {t("cameras.info.error", {
+                            error: stream.stderr,
+                          })}
+                        </div>
                      </div>
                    )}
                  </div>
@@ -161,7 +183,7 @@ export default function CameraInfoDialog({
            ) : (
              <div className="flex flex-col items-center">
                <ActivityIndicator />
-                <div className="mt-2">Fetching Camera Data</div>
+                <div className="mt-2">{t("cameras.info.fetching")}</div>
              </div>
            )}
          </div>
@@ -169,10 +191,10 @@ export default function CameraInfoDialog({
          <DialogFooter>
            <Button
              variant="select"
-              aria-label="Copy"
+              aria-label={t("button.copy", { ns: "common" })}
              onClick={() => onCopyFfprobe()}
            >
-              Copy
+              {t("button.copy", { ns: "common" })}
            </Button>
          </DialogFooter>
        </DialogContent>
--- a/web/src/components/overlay/CreateUserDialog.tsx
+++ b/web/src/components/overlay/CreateUserDialog.tsx
@@ -22,6 +22,7 @@ import {
  DialogHeader,
  DialogTitle,
 } from "../ui/dialog";
+
 import {
  Select,
  SelectContent,
@@ -31,6 +32,7 @@ import {
 } from "../ui/select";
 import { Shield, User } from "lucide-react";
 import { LuCheck, LuX } from "react-icons/lu";
+import { useTranslation } from "react-i18next";

 type CreateUserOverlayProps = {
  show: boolean;
@@ -43,22 +45,23 @@ export default function CreateUserDialog({
  onCreate,
  onCancel,
 }: CreateUserOverlayProps) {
+  const { t } = useTranslation(["views/settings"]);
  const [isLoading, setIsLoading] = useState<boolean>(false);

  const formSchema = z
    .object({
      user: z
        .string()
-        .min(1, "Username is required")
+        .min(1, t("users.dialog.form.usernameIsRequired"))
        .regex(/^[A-Za-z0-9._]+$/, {
-          message: "Username may only include letters, numbers, . or _",
+          message: t("users.dialog.createUser.usernameOnlyInclude"),
        }),
      password: z.string().min(1, "Password is required"),
      confirmPassword: z.string().min(1, "Please confirm your password"),
      role: z.enum(["admin", "viewer"]),
    })
    .refine((data) => data.password === data.confirmPassword, {
-      message: "Passwords don't match",
+      message: t("users.dialog.form.password.notMatch"),
      path: ["confirmPassword"],
    });

@@ -109,10 +112,9 @@ export default function CreateUserDialog({
    <Dialog open={show} onOpenChange={onCancel}>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
-          <DialogTitle>Create New User</DialogTitle>
+          <DialogTitle>{t("users.dialog.createUser.title")}</DialogTitle>
          <DialogDescription>
-            Add a new user account and specify an role for access to areas of
-            the Frigate UI.
+            {t("users.dialog.createUser.desc")}
          </DialogDescription>
        </DialogHeader>

@@ -126,17 +128,17 @@ export default function CreateUserDialog({
              render={({ field }) => (
                <FormItem>
                  <FormLabel className="text-sm font-medium">
-                    Username
+                    {t("users.dialog.form.user")}
                  </FormLabel>
                  <FormControl>
                    <Input
-                      placeholder="Enter username"
+                      placeholder={t("users.dialog.form.user.placeholder")}
                      className="h-10"
                      {...field}
                    />
                  </FormControl>
                  <FormDescription className="text-xs text-muted-foreground">
-                    Only letters, numbers, periods and underscores allowed.
+                    {t("users.dialog.form.user.desc")}
                  </FormDescription>
                  <FormMessage />
                </FormItem>
@@ -148,11 +150,11 @@ export default function CreateUserDialog({
              render={({ field }) => (
                <FormItem>
                  <FormLabel className="text-sm font-medium">
-                    Password
+                    {t("users.dialog.form.password")}
                  </FormLabel>
                  <FormControl>
                    <Input
-                      placeholder="Enter password"
+                      placeholder={t("users.dialog.form.password.placeholder")}
                      type="password"
                      className="h-10"
                      {...field}
@@ -168,11 +170,13 @@ export default function CreateUserDialog({
              render={({ field }) => (
                <FormItem>
                  <FormLabel className="text-sm font-medium">
-                    Confirm Password
+                    {t("users.dialog.form.password.confirm")}
                  </FormLabel>
                  <FormControl>
                    <Input
-                      placeholder="Confirm password"
+                      placeholder={t(
+                        "users.dialog.form.password.confirm.placeholder",
+                      )}
                      type="password"
                      className="h-10"
                      {...field}
@@ -184,14 +188,14 @@ export default function CreateUserDialog({
                        <>
                          <LuCheck className="size-3.5 text-green-500" />
                          <span className="text-green-600">
-                            Passwords match
+                            {t("users.dialog.form.password.match")}
                          </span>
                        </>
                      ) : (
                        <>
                          <LuX className="size-3.5 text-red-500" />
                          <span className="text-red-600">
-                            Passwords don't match
+                            {t("users.dialog.form.password.notMatch")}
                          </span>
                        </>
                      )}
@@ -206,7 +210,9 @@ export default function CreateUserDialog({
              name="role"
              render={({ field }) => (
                <FormItem>
-                  <FormLabel className="text-sm font-medium">Role</FormLabel>
+                  <FormLabel className="text-sm font-medium">
+                    {t("role.title", { ns: "common" })}
+                  </FormLabel>
                  <Select
                    onValueChange={field.onChange}
                    defaultValue={field.value}
@@ -223,7 +229,7 @@ export default function CreateUserDialog({
                      >
                        <div className="flex items-center gap-2">
                          <Shield className="h-4 w-4 text-primary" />
-                          <span>Admin</span>
+                          <span>{t("role.admin", { ns: "common" })}</span>
                        </div>
                      </SelectItem>
                      <SelectItem
@@ -232,15 +238,13 @@ export default function CreateUserDialog({
                      >
                        <div className="flex items-center gap-2">
                          <User className="h-4 w-4 text-muted-foreground" />
-                          <span>Viewer</span>
+                          <span>{t("role.viewer", { ns: "common" })}</span>
                        </div>
                      </SelectItem>
                    </SelectContent>
                  </Select>
                  <FormDescription className="text-xs text-muted-foreground">
-                    Admins have full access to all features in the Frigate UI.
-                    Viewers are limited to viewing cameras, review items, and
-                    historical footage in the UI.
+                    {t("role.desc", { ns: "common" })}
                  </FormDescription>
                  <FormMessage />
                </FormItem>
@@ -252,16 +256,16 @@ export default function CreateUserDialog({
                <div className="flex flex-row gap-2 pt-5">
                  <Button
                    className="flex flex-1"
-                    aria-label="Cancel"
+                    aria-label={t("button.cancel", { ns: "common" })}
                    disabled={isLoading}
                    onClick={handleCancel}
                    type="button"
                  >
-                    Cancel
+                    {t("button.cancel", { ns: "common" })}
                  </Button>
                  <Button
                    variant="select"
-                    aria-label="Save"
+                    aria-label={t("button.save", { ns: "common" })}
                    disabled={isLoading || !form.formState.isValid}
                    className="flex flex-1"
                    type="submit"
@@ -269,10 +273,10 @@ export default function CreateUserDialog({
                    {isLoading ? (
                      <div className="flex flex-row items-center gap-2">
                        <ActivityIndicator />
-                        <span>Saving...</span>
+                        <span>{t("button.saving", { ns: "common" })}</span>
                      </div>
                    ) : (
-                      "Save"
+                      t("button.save", { ns: "common" })
                    )}
                  </Button>
                </div>
--- a/web/src/components/overlay/DeleteUserDialog.tsx
+++ b/web/src/components/overlay/DeleteUserDialog.tsx
@@ -1,10 +1,10 @@
+import { useTranslation } from "react-i18next";
 import { Button } from "../ui/button";
 import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
-  DialogTitle,
 } from "../ui/dialog";
 import { DialogDescription } from "@radix-ui/react-dialog";

@@ -20,23 +20,22 @@ export default function DeleteUserDialog({
  onDelete,
  onCancel,
 }: DeleteUserDialogProps) {
+  const { t } = useTranslation(["views/settings"]);
  return (
    <Dialog open={show} onOpenChange={onCancel}>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader className="flex flex-col items-center gap-2 sm:items-start">
          <div className="space-y-1 text-center sm:text-left">
-            <DialogTitle>Delete User</DialogTitle>
+            {t("users.dialog.deleteUser.title")}
            <DialogDescription>
-              This action cannot be undone. This will permanently delete the
-              user account and remove all associated data.
+              {t("users.dialog.deleteUser.desc")}
            </DialogDescription>
          </div>
        </DialogHeader>

        <div className="my-4 rounded-md border border-destructive/20 bg-destructive/5 p-4 text-center text-sm">
          <p className="font-medium text-destructive">
-            Are you sure you want to delete{" "}
-            <span className="font-bold">{username}</span>?
+            {t("users.dialog.deleteUser.warn", { username })}
          </p>
        </div>

@@ -45,19 +44,19 @@ export default function DeleteUserDialog({
            <div className="flex flex-row gap-2 pt-5">
              <Button
                className="flex flex-1"
-                aria-label="Cancel"
+                aria-label={t("button.cancel", { ns: "common" })}
                onClick={onCancel}
                type="button"
              >
-                Cancel
+                {t("button.cancel", { ns: "common" })}
              </Button>
              <Button
                variant="destructive"
-                aria-label="Delete"
+                aria-label={t("button.delete", { ns: "common" })}
                className="flex flex-1"
                onClick={onDelete}
              >
-                Delete User
+                {t("button.delete", { ns: "common" })}
              </Button>
            </div>
          </div>
--- a/web/src/components/overlay/ExportDialog.tsx
+++ b/web/src/components/overlay/ExportDialog.tsx
@@ -30,6 +30,7 @@ import { getUTCOffset } from "@/utils/dateUtil";
 import { baseUrl } from "@/api/baseUrl";
 import { cn } from "@/lib/utils";
 import { GenericVideoPlayer } from "../player/GenericVideoPlayer";
+import { useTranslation } from "react-i18next";

 const EXPORT_OPTIONS = [
  "1",
@@ -64,16 +65,19 @@ export default function ExportDialog({
  setMode,
  setShowPreview,
 }: ExportDialogProps) {
+  const { t } = useTranslation(["components/dialog"]);
  const [name, setName] = useState("");

  const onStartExport = useCallback(() => {
    if (!range) {
-      toast.error("No valid time range selected", { position: "top-center" });
+      toast.error(t("export.toast.error.noVaildTimeSelected"), {
+        position: "top-center",
+      });
      return;
    }

    if (range.before < range.after) {
-      toast.error("End time must be after start time", {
+      toast.error(t("export.toast.error.endTimeMustAfterStartTime"), {
        position: "top-center",
      });
      return;
@@ -89,10 +93,9 @@ export default function ExportDialog({
      )
      .then((response) => {
        if (response.status == 200) {
-          toast.success(
-            "Successfully started export. View the file in the /exports folder.",
-            { position: "top-center" },
-          );
+          toast.success(t("export.toast.success"), {
+            position: "top-center",
+          });
          setName("");
          setRange(undefined);
          setMode("none");
@@ -103,11 +106,14 @@ export default function ExportDialog({
          error.response?.data?.message ||
          error.response?.data?.detail ||
          "Unknown error";
-        toast.error(`Failed to start export: ${errorMessage}`, {
-          position: "top-center",
-        });
+        toast.error(
+          t("export.toast.error.failed", {
+            error: errorMessage,
+          }),
+          { position: "top-center" },
+        );
      });
-  }, [camera, name, range, setRange, setName, setMode]);
+  }, [camera, name, range, setRange, setName, setMode, t]);

  const handleCancel = useCallback(() => {
    setName("");
@@ -145,7 +151,7 @@ export default function ExportDialog({
        <Trigger asChild>
          <Button
            className="flex items-center gap-2"
-            aria-label="Export"
+            aria-label={t("menu.export", { ns: "common" })}
            size="sm"
            onClick={() => {
              const now = new Date(latestTime * 1000);
@@ -160,7 +166,11 @@ export default function ExportDialog({
            }}
          >
            <FaArrowDown className="rounded-md bg-secondary-foreground fill-secondary p-1" />
-            {isDesktop && <div className="text-primary">Export</div>}
+            {isDesktop && (
+              <div className="text-primary">
+                {t("menu.export", { ns: "common" })}
+              </div>
+            )}
          </Button>
        </Trigger>
        <Content
@@ -209,6 +219,7 @@ export function ExportContent({
  setMode,
  onCancel,
 }: ExportContentProps) {
+  const { t } = useTranslation(["components/dialog"]);
  const [selectedOption, setSelectedOption] = useState<ExportOption>("1");

  const onSelectTime = useCallback(
@@ -256,7 +267,7 @@ export function ExportContent({
      {isDesktop && (
        <>
          <DialogHeader>
-            <DialogTitle>Export</DialogTitle>
+            <DialogTitle>{t("menu.export")}</DialogTitle>
          </DialogHeader>
          <SelectSeparator className="my-4 bg-secondary" />
        </>
@@ -280,9 +291,11 @@ export function ExportContent({
              <Label className="cursor-pointer capitalize" htmlFor={opt}>
                {isNaN(parseInt(opt))
                  ? opt == "timeline"
-                    ? "Select from Timeline"
-                    : `${opt}`
-                  : `Last ${opt > "1" ? `${opt} Hours` : "Hour"}`}
+                    ? t("export.time.fromTimeline")
+                    : t("export.time." + opt)
+                  : t("export.time.lastHour", {
+                      count: parseInt(opt),
+                    })}
              </Label>
            </div>
          );
@@ -298,7 +311,7 @@ export function ExportContent({
      <Input
        className="text-md my-6"
        type="search"
-        placeholder="Name the Export"
+        placeholder={t("export.name.placeholder")}
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
@@ -310,11 +323,11 @@ export function ExportContent({
          className={`cursor-pointer p-2 text-center ${isDesktop ? "" : "w-full"}`}
          onClick={onCancel}
        >
-          Cancel
+          {t("button.cancel", { ns: "common" })}
        </div>
        <Button
          className={isDesktop ? "" : "w-full"}
-          aria-label="Select or export"
+          aria-label={t("export.selectOrExport")}
          variant="select"
          size="sm"
          onClick={() => {
@@ -328,7 +341,9 @@ export function ExportContent({
            }
          }}
        >
-          {selectedOption == "timeline" ? "Select" : "Export"}
+          {selectedOption == "timeline"
+            ? t("export.select")
+            : t("export.export")}
        </Button>
      </DialogFooter>
    </div>
@@ -345,6 +360,7 @@ function CustomTimeSelector({
  range,
  setRange,
 }: CustomTimeSelectorProps) {
+  const { t } = useTranslation(["components/dialog"]);
  const { data: config } = useSWR<FrigateConfig>("config");

  // times
@@ -388,14 +404,14 @@ function CustomTimeSelector({
  const formattedStart = useFormattedTimestamp(
    startTime,
    config?.ui.time_format == "24hour"
-      ? "%b %-d, %H:%M:%S"
-      : "%b %-d, %I:%M:%S %p",
+      ? t("time.formattedTimestamp.24hour")
+      : t("time.formattedTimestamp"),
  );
  const formattedEnd = useFormattedTimestamp(
    endTime,
    config?.ui.time_format == "24hour"
-      ? "%b %-d, %H:%M:%S"
-      : "%b %-d, %I:%M:%S %p",
+      ? t("time.formattedTimestamp.24hour")
+      : t("time.formattedTimestamp"),
  );

  const startClock = useMemo(() => {
@@ -428,7 +444,7 @@ function CustomTimeSelector({
        <PopoverTrigger asChild>
          <Button
            className={`text-primary ${isDesktop ? "" : "text-xs"}`}
-            aria-label="Start time"
+            aria-label={t("export.time.start")}
            variant={startOpen ? "select" : "default"}
            size="sm"
            onClick={() => {
@@ -494,7 +510,7 @@ function CustomTimeSelector({
        <PopoverTrigger asChild>
          <Button
            className={`text-primary ${isDesktop ? "" : "text-xs"}`}
-            aria-label="End time"
+            aria-label={t("export.time.end")}
            variant={endOpen ? "select" : "default"}
            size="sm"
            onClick={() => {
@@ -565,6 +581,7 @@ export function ExportPreviewDialog({
  showPreview,
  setShowPreview,
 }: ExportPreviewDialogProps) {
+  const { t } = useTranslation(["components/dialog"]);
  if (!range) {
    return null;
  }
@@ -582,9 +599,9 @@ export function ExportPreviewDialog({
        )}
      >
        <DialogHeader>
-          <DialogTitle>Preview Export</DialogTitle>
+          <DialogTitle>{t("export.fromTimeline.previewExport")}</DialogTitle>
          <DialogDescription className="sr-only">
-            Preview Export
+            {t("export.fromTimeline.previewExport")}
          </DialogDescription>
        </DialogHeader>
        <GenericVideoPlayer source={source} />
--- a/web/src/components/overlay/GPUInfoDialog.tsx
+++ b/web/src/components/overlay/GPUInfoDialog.tsx
@@ -11,6 +11,7 @@ import { GpuInfo, Nvinfo, Vainfo } from "@/types/stats";
 import { Button } from "../ui/button";
 import copy from "copy-to-clipboard";
 import { toast } from "sonner";
+import { useTranslation } from "react-i18next";

 type GPUInfoDialogProps = {
  showGpuInfo: boolean;
@@ -22,6 +23,8 @@ export default function GPUInfoDialog({
  gpuType,
  setShowGpuInfo,
 }: GPUInfoDialogProps) {
+  const { t } = useTranslation(["views/system"]);
+
  const { data: vainfo } = useSWR<Vainfo>(
    showGpuInfo && gpuType == "vainfo" ? "vainfo" : null,
  );
@@ -35,7 +38,7 @@ export default function GPUInfoDialog({
        .replace(/\\t/g, "\t")
        .replace(/\\n/g, "\n"),
    );
-    toast.success("Copied GPU info to clipboard.");
+    toast.success(t("general.hardwareInfo.gpuInfo.toast.success"));
  };

  if (gpuType == "vainfo") {
@@ -43,13 +46,23 @@ export default function GPUInfoDialog({
      <Dialog open={showGpuInfo} onOpenChange={setShowGpuInfo}>
        <DialogContent>
          <DialogHeader>
-            <DialogTitle>Vainfo Output</DialogTitle>
+            <DialogTitle>
+              {t("general.hardwareInfo.gpuInfo.vainfoOutput.title")}
+            </DialogTitle>
          </DialogHeader>
          {vainfo ? (
            <div className="scrollbar-container mb-2 max-h-96 overflow-y-scroll whitespace-pre-line">
-              <div>Return Code: {vainfo.return_code}</div>
+              <div>
+                {t("general.hardwareInfo.gpuInfo.vainfoOutput.returnCode", {
+                  code: vainfo.return_code,
+                })}
+              </div>
              <br />
-              <div>Process {vainfo.return_code == 0 ? "Output" : "Error"}:</div>
+              <div>
+                {vainfo.return_code == 0
+                  ? t("general.hardwareInfo.gpuInfo.vainfoOutput.processOutput")
+                  : t("general.hardwareInfo.gpuInfo.vainfoOutput.processError")}
+              </div>
              <br />
              <div>
                {vainfo.return_code == 0 ? vainfo.stdout : vainfo.stderr}
@@ -60,17 +73,17 @@ export default function GPUInfoDialog({
          )}
          <DialogFooter>
            <Button
-              aria-label="Close GPU info"
+              aria-label={t("general.hardwareInfo.gpuInfo.closeInfo.label")}
              onClick={() => setShowGpuInfo(false)}
            >
-              Close
+              {t("button.close", { ns: "common" })}
            </Button>
            <Button
-              aria-label="Copy GPU info"
+              aria-label={t("general.hardwareInfo.gpuInfo.copyInfo.label")}
              variant="select"
              onClick={() => onCopyInfo()}
            >
-              Copy
+              {t("button.copy", { ns: "common" })}
            </Button>
          </DialogFooter>
        </DialogContent>
@@ -81,34 +94,52 @@ export default function GPUInfoDialog({
      <Dialog open={showGpuInfo} onOpenChange={setShowGpuInfo}>
        <DialogContent>
          <DialogHeader>
-            <DialogTitle>Nvidia SMI Output</DialogTitle>
+            <DialogTitle>
+              {t("general.hardwareInfo.gpuInfo.nvidiaSMIOutput.title")}
+            </DialogTitle>
          </DialogHeader>
          {nvinfo ? (
            <div className="scrollbar-container mb-2 max-h-96 overflow-y-scroll whitespace-pre-line">
-              <div>Name: {nvinfo["0"].name}</div>
+              <div>
+                {t("general.hardwareInfo.gpuInfo.nvidiaSMIOutput.name", {
+                  name: nvinfo["0"].name,
+                })}
+              </div>
              <br />
-              <div>Driver: {nvinfo["0"].driver}</div>
+              <div>
+                {t("general.hardwareInfo.gpuInfo.nvidiaSMIOutput.name", {
+                  name: nvinfo["0"].driver,
+                })}
+              </div>
              <br />
-              <div>Cuda Compute Capability: {nvinfo["0"].cuda_compute}</div>
+              <div>
+                {t("general.hardwareInfo.gpuInfo.nvidiaSMIOutput.name", {
+                  name: nvinfo["0"].cuda_compute,
+                })}
+              </div>
              <br />
-              <div>VBios Info: {nvinfo["0"].vbios}</div>
+              <div>
+                {t("general.hardwareInfo.gpuInfo.nvidiaSMIOutput.name", {
+                  name: nvinfo["0"].vbios,
+                })}
+              </div>
            </div>
          ) : (
            <ActivityIndicator />
          )}
          <DialogFooter>
            <Button
-              aria-label="Close GPU info"
+              aria-label={t("general.hardwareInfo.gpuInfo.closeInfo.label")}
              onClick={() => setShowGpuInfo(false)}
            >
-              Close
+              {t("button.close", { ns: "common" })}
            </Button>
            <Button
-              aria-label="Copy GPU info"
+              aria-label={t("general.hardwareInfo.gpuInfo.copyInfo.label")}
              variant="select"
              onClick={() => onCopyInfo()}
            >
-              Copy
+              {t("button.copy", { ns: "common" })}
            </Button>
          </DialogFooter>
        </DialogContent>
--- a/web/src/components/overlay/MobileCameraDrawer.tsx
+++ b/web/src/components/overlay/MobileCameraDrawer.tsx
@@ -3,6 +3,7 @@ import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
 import { Button } from "../ui/button";
 import { FaVideo } from "react-icons/fa";
 import { isMobile } from "react-device-detect";
+import { useTranslation } from "react-i18next";

 type MobileCameraDrawerProps = {
  allCameras: string[];
@@ -14,6 +15,7 @@ export default function MobileCameraDrawer({
  selected,
  onSelectCamera,
 }: MobileCameraDrawerProps) {
+  const { t } = useTranslation(["common"]);
  const [cameraDrawer, setCameraDrawer] = useState(false);

  if (!isMobile) {
@@ -25,7 +27,7 @@ export default function MobileCameraDrawer({
      <DrawerTrigger asChild>
        <Button
          className="rounded-lg capitalize"
-          aria-label="Cameras"
+          aria-label={t("menu.live.cameras")}
          size="sm"
        >
          <FaVideo className="text-secondary-foreground" />
--- a/web/src/components/overlay/MobileReviewSettingsDrawer.tsx
+++ b/web/src/components/overlay/MobileReviewSettingsDrawer.tsx
@@ -20,6 +20,8 @@ import axios from "axios";
 import SaveExportOverlay from "./SaveExportOverlay";
 import { isIOS, isMobile } from "react-device-detect";

+import { useTranslation } from "react-i18next";
+
 type DrawerMode = "none" | "select" | "export" | "calendar" | "filter";

 const DRAWER_FEATURES = ["export", "calendar", "filter"] as const;
@@ -68,6 +70,7 @@ export default function MobileReviewSettingsDrawer({
  setMode,
  setShowExportPreview,
 }: MobileReviewSettingsDrawerProps) {
+  const { t } = useTranslation(["views/recording"]);
  const [drawerMode, setDrawerMode] = useState<DrawerMode>("none");

  // exports
@@ -75,12 +78,14 @@ export default function MobileReviewSettingsDrawer({
  const [name, setName] = useState("");
  const onStartExport = useCallback(() => {
    if (!range) {
-      toast.error("No valid time range selected", { position: "top-center" });
+      toast.error(t("toast.error.noValidTimeSelected"), {
+        position: "top-center",
+      });
      return;
    }

    if (range.before < range.after) {
-      toast.error("End time must be after start time", {
+      toast.error(t("toast.error.endTimeMustAfterStartTime"), {
        position: "top-center",
      });
      return;
@@ -97,8 +102,10 @@ export default function MobileReviewSettingsDrawer({
      .then((response) => {
        if (response.status == 200) {
          toast.success(
-            "Successfully started export. View the file in the /exports folder.",
-            { position: "top-center" },
+            t("export.toast.success", { ns: "components/dialog" }),
+            {
+              position: "top-center",
+            },
          );
          setName("");
          setRange(undefined);
@@ -110,11 +117,17 @@ export default function MobileReviewSettingsDrawer({
          error.response?.data?.message ||
          error.response?.data?.detail ||
          "Unknown error";
-        toast.error(`Failed to start export: ${errorMessage}`, {
-          position: "top-center",
-        });
+        toast.error(
+          t("export.toast.error.failed", {
+            ns: "components/dialog",
+            errorMessage,
+          }),
+          {
+            position: "top-center",
+          },
+        );
      });
-  }, [camera, name, range, setRange, setName, setMode]);
+  }, [camera, name, range, setRange, setName, setMode, t]);

  // filters

@@ -136,40 +149,40 @@ export default function MobileReviewSettingsDrawer({
        {features.includes("export") && (
          <Button
            className="flex w-full items-center justify-center gap-2"
-            aria-label="Export"
+            aria-label={t("export")}
            onClick={() => {
              setDrawerMode("export");
              setMode("select");
            }}
          >
            <FaArrowDown className="rounded-md bg-secondary-foreground fill-secondary p-1" />
-            Export
+            {t("export")}
          </Button>
        )}
        {features.includes("calendar") && (
          <Button
            className="flex w-full items-center justify-center gap-2"
-            aria-label="Calendar"
+            aria-label={t("calendar")}
            variant={filter?.after ? "select" : "default"}
            onClick={() => setDrawerMode("calendar")}
          >
            <FaCalendarAlt
              className={`${filter?.after ? "text-selected-foreground" : "text-secondary-foreground"}`}
            />
-            Calendar
+            {t("calendar")}
          </Button>
        )}
        {features.includes("filter") && (
          <Button
            className="flex w-full items-center justify-center gap-2"
-            aria-label="Filter"
+            aria-label={t("filter")}
            variant={filter?.labels || filter?.zones ? "select" : "default"}
            onClick={() => setDrawerMode("filter")}
          >
            <FaFilter
              className={`${filter?.labels || filter?.zones ? "text-selected-foreground" : "text-secondary-foreground"}`}
            />
-            Filter
+            {t("filter")}
          </Button>
        )}
      </div>
@@ -206,10 +219,10 @@ export default function MobileReviewSettingsDrawer({
            className="absolute left-0 text-selected"
            onClick={() => setDrawerMode("select")}
          >
-            Back
+            {t("button.back", { ns: "common" })}
          </div>
          <div className="absolute left-1/2 -translate-x-1/2 text-muted-foreground">
-            Calendar
+            {t("calendar")}
          </div>
        </div>
        <div className="flex w-full flex-row justify-center">
@@ -234,7 +247,7 @@ export default function MobileReviewSettingsDrawer({
        <SelectSeparator />
        <div className="flex items-center justify-center p-2">
          <Button
-            aria-label="Reset"
+            aria-label={t("button.reset", { ns: "common" })}
            onClick={() => {
              onUpdateFilter({
                ...filter,
@@ -243,7 +256,7 @@ export default function MobileReviewSettingsDrawer({
              });
            }}
          >
-            Reset
+            {t("button.reset", { ns: "common" })}
          </Button>
        </div>
      </div>
@@ -256,10 +269,10 @@ export default function MobileReviewSettingsDrawer({
            className="absolute left-0 text-selected"
            onClick={() => setDrawerMode("select")}
          >
-            Back
+            {t("button.back", { ns: "common" })}
          </div>
          <div className="absolute left-1/2 -translate-x-1/2 text-muted-foreground">
-            Filter
+            {t("filter")}
          </div>
        </div>
        <GeneralFilterContent
@@ -313,7 +326,7 @@ export default function MobileReviewSettingsDrawer({
        <DrawerTrigger asChild>
          <Button
            className="rounded-lg capitalize"
-            aria-label="Filters"
+            aria-label={t("filters")}
            variant={
              filter?.labels || filter?.after || filter?.zones
                ? "select"
--- a/web/src/components/overlay/RoleChangeDialog.tsx
+++ b/web/src/components/overlay/RoleChangeDialog.tsx
@@ -1,3 +1,4 @@
+import { Trans, useTranslation } from "react-i18next";
 import { Button } from "../ui/button";
 import {
  Dialog,
@@ -32,6 +33,7 @@ export default function RoleChangeDialog({
  onSave,
  onCancel,
 }: RoleChangeDialogProps) {
+  const { t } = useTranslation(["views/settings"]);
  const [selectedRole, setSelectedRole] = useState<"admin" | "viewer">(
    currentRole,
  );
@@ -41,27 +43,16 @@ export default function RoleChangeDialog({
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle className="text-xl font-semibold">
-            Change User Role
+            {t("users.dialog.changeRole.title")}
          </DialogTitle>
          <DialogDescription>
-            Update permissions for{" "}
-            <span className="font-medium">{username}</span>
+            {t("users.dialog.changeRole.desc", { username })}
          </DialogDescription>
        </DialogHeader>

        <div className="py-6">
          <div className="mb-4 text-sm text-muted-foreground">
-            <p>Select the appropriate role for this user:</p>
-            <ul className="mt-2 space-y-1 pl-5">
-              <li>
-                • <span className="font-medium">Admin:</span> Full access to all
-                features.
-              </li>
-              <li>
-                • <span className="font-medium">Viewer:</span> Limited to Live
-                dashboards, Review, Explore, and Exports only.
-              </li>
-            </ul>
+            <Trans ns="views/settings">users.dialog.changeRole.roleInfo</Trans>
          </div>

          <Select
@@ -77,13 +68,13 @@ export default function RoleChangeDialog({
              <SelectItem value="admin" className="flex items-center gap-2">
                <div className="flex items-center gap-2">
                  <LuShield className="size-4 text-primary" />
-                  <span>Admin</span>
+                  <span>{t("role.admin")}</span>
                </div>
              </SelectItem>
              <SelectItem value="viewer" className="flex items-center gap-2">
                <div className="flex items-center gap-2">
                  <LuUser className="size-4 text-primary" />
-                  <span>Viewer</span>
+                  <span>{t("role.viewer")}</span>
                </div>
              </SelectItem>
            </SelectContent>
@@ -95,20 +86,20 @@ export default function RoleChangeDialog({
            <div className="flex flex-row gap-2 pt-5">
              <Button
                className="flex flex-1"
-                aria-label="Cancel"
+                aria-label={t("button.cancel", { ns: "common" })}
                onClick={onCancel}
                type="button"
              >
-                Cancel
+                {t("button.cancel", { ns: "common" })}
              </Button>
              <Button
                variant="select"
-                aria-label="Save"
+                aria-label={t("button.save", { ns: "common" })}
                className="flex flex-1"
                onClick={() => onSave(selectedRole)}
                disabled={selectedRole === currentRole}
              >
-                Save
+                {t("button.save", { ns: "common" })}
              </Button>
            </div>
          </div>
--- a/web/src/components/overlay/SaveExportOverlay.tsx
+++ b/web/src/components/overlay/SaveExportOverlay.tsx
@@ -2,6 +2,7 @@ import { LuVideo, LuX } from "react-icons/lu";
 import { Button } from "../ui/button";
 import { FaCompactDisc } from "react-icons/fa";
 import { cn } from "@/lib/utils";
+import { useTranslation } from "react-i18next";

 type SaveExportOverlayProps = {
  className: string;
@@ -17,6 +18,7 @@ export default function SaveExportOverlay({
  onSave,
  onCancel,
 }: SaveExportOverlayProps) {
+  const { t } = useTranslation("components/dialog");
  return (
    <div className={className}>
      <div
@@ -28,31 +30,31 @@ export default function SaveExportOverlay({
      >
        <Button
          className="flex items-center gap-1 text-primary"
-          aria-label="Cancel"
+          aria-label={t("button.cancel", { ns: "common" })}
          size="sm"
          onClick={onCancel}
        >
          <LuX />
-          Cancel
+          {t("button.cancel", { ns: "common" })}
        </Button>
        <Button
          className="flex items-center gap-1"
-          aria-label="Preview export"
+          aria-label={t("export.fromTimeline.previewExport")}
          size="sm"
          onClick={onPreview}
        >
          <LuVideo />
-          Preview Export
+          {t("export.fromTimeline.previewExport")}
        </Button>
        <Button
          className="flex items-center gap-1"
-          aria-label="Save export"
+          aria-label={t("export.fromTimeline.saveExport")}
          variant="select"
          size="sm"
          onClick={onSave}
        >
          <FaCompactDisc />
-          Save Export
+          {t("export.fromTimeline.saveExport")}
        </Button>
      </div>
    </div>
--- a/web/src/components/overlay/SetPasswordDialog.tsx
+++ b/web/src/components/overlay/SetPasswordDialog.tsx
@@ -11,8 +11,10 @@ import {
  DialogHeader,
  DialogTitle,
 } from "../ui/dialog";
+
 import { Label } from "../ui/label";
 import { LuCheck, LuX } from "react-icons/lu";
+import { useTranslation } from "react-i18next";

 type SetPasswordProps = {
  show: boolean;
@@ -27,6 +29,7 @@ export default function SetPasswordDialog({
  onCancel,
  username,
 }: SetPasswordProps) {
+  const { t } = useTranslation(["views/settings"]);
  const [password, setPassword] = useState<string>("");
  const [confirmPassword, setConfirmPassword] = useState<string>("");
  const [passwordStrength, setPasswordStrength] = useState<number>(0);
@@ -77,10 +80,13 @@ export default function SetPasswordDialog({

  const getStrengthLabel = () => {
    if (!password) return "";
-    if (passwordStrength <= 1) return "Weak";
-    if (passwordStrength === 2) return "Medium";
-    if (passwordStrength === 3) return "Strong";
-    return "Very Strong";
+    if (passwordStrength <= 1)
+      return t("users.dialog.form.password.strength.weak");
+    if (passwordStrength === 2)
+      return t("users.dialog.form.password.strength.medium");
+    if (passwordStrength === 3)
+      return t("users.dialog.form.password.strength.strong");
+    return t("users.dialog.form.password.strength.veryStrong");
  };

  const getStrengthColor = () => {
@@ -96,16 +102,23 @@ export default function SetPasswordDialog({
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader className="space-y-2">
          <DialogTitle>
-            {username ? `Update Password for ${username}` : "Set Password"}
+            {username
+              ? t("users.dialog.passwordSetting.updatePassword", {
+                  username,
+                  ns: "views/settings",
+                })
+              : t("users.dialog.passwordSetting.setPassword")}
          </DialogTitle>
          <DialogDescription>
-            Create a strong password to secure this account.
+            {t("users.dialog.passwordSetting.desc")}
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-4 py-4">
          <div className="space-y-2">
-            <Label htmlFor="password">New Password</Label>
+            <Label htmlFor="password">
+              {t("users.dialog.form.newPassword")}
+            </Label>
            <Input
              id="password"
              className="h-10"
@@ -115,7 +128,7 @@ export default function SetPasswordDialog({
                setPassword(event.target.value);
                setError(null);
              }}
-              placeholder="Enter new password"
+              placeholder={t("users.dialog.form.newPassword.placeholder")}
              autoFocus
            />

@@ -129,7 +142,7 @@ export default function SetPasswordDialog({
                  />
                </div>
                <p className="text-xs text-muted-foreground">
-                  Password strength:{" "}
+                  {t("users.dialog.form.password.strength")}
                  <span className="font-medium">{getStrengthLabel()}</span>
                </p>
              </div>
@@ -137,7 +150,9 @@ export default function SetPasswordDialog({
          </div>

          <div className="space-y-2">
-            <Label htmlFor="confirm-password">Confirm Password</Label>
+            <Label htmlFor="confirm-password">
+              {t("users.dialog.form.password.confirm")}
+            </Label>
            <Input
              id="confirm-password"
              className="h-10"
@@ -147,7 +162,9 @@ export default function SetPasswordDialog({
                setConfirmPassword(event.target.value);
                setError(null);
              }}
-              placeholder="Confirm new password"
+              placeholder={t(
+                "users.dialog.form.newPassword.confirm.placeholder",
+              )}
            />

            {/* Password match indicator */}
@@ -156,12 +173,16 @@ export default function SetPasswordDialog({
                {password === confirmPassword ? (
                  <>
                    <LuCheck className="size-3.5 text-green-500" />
-                    <span className="text-green-600">Passwords match</span>
+                    <span className="text-green-600">
+                      {t("users.dialog.form.password.match")}
+                    </span>
                  </>
                ) : (
                  <>
                    <LuX className="size-3.5 text-red-500" />
-                    <span className="text-red-600">Passwords don't match</span>
+                    <span className="text-red-600">
+                      {t("users.dialog.form.password.notMatch")}
+                    </span>
                  </>
                )}
              </div>
@@ -180,20 +201,20 @@ export default function SetPasswordDialog({
            <div className="flex flex-row gap-2 pt-5">
              <Button
                className="flex flex-1"
-                aria-label="Cancel"
+                aria-label={t("button.cancel", { ns: "common" })}
                onClick={onCancel}
                type="button"
              >
-                Cancel
+                {t("button.cancel", { ns: "common" })}
              </Button>
              <Button
                variant="select"
-                aria-label="Save"
+                aria-label={t("button.save", { ns: "common" })}
                className="flex flex-1"
                onClick={handleSave}
                disabled={!password || password !== confirmPassword}
              >
-                Save
+                {t("button.save", { ns: "common" })}
              </Button>
            </div>
          </div>
--- a/web/src/components/overlay/detail/AnnotationSettingsPane.tsx
+++ b/web/src/components/overlay/detail/AnnotationSettingsPane.tsx
@@ -26,6 +26,7 @@ import { Button } from "@/components/ui/button";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
 import { Input } from "@/components/ui/input";
 import { Separator } from "@/components/ui/separator";
+import { Trans, useTranslation } from "react-i18next";

 type AnnotationSettingsPaneProps = {
  event: Event;
@@ -41,6 +42,8 @@ export function AnnotationSettingsPane({
  annotationOffset,
  setAnnotationOffset,
 }: AnnotationSettingsPaneProps) {
+  const { t } = useTranslation(["views/explore"]);
+
  const { data: config, mutate: updateConfig } =
    useSWR<FrigateConfig>("config");

@@ -81,9 +84,15 @@ export function AnnotationSettingsPane({
            );
            updateConfig();
          } else {
-            toast.error(`Failed to save config changes: ${res.statusText}`, {
-              position: "top-center",
-            });
+            toast.error(
+              t("toast.save.error", {
+                errorMessage: res.statusText,
+                ns: "common",
+              }),
+              {
+                position: "top-center",
+              },
+            );
          }
        })
        .catch((error) => {
@@ -91,7 +100,7 @@ export function AnnotationSettingsPane({
            error.response?.data?.message ||
            error.response?.data?.detail ||
            "Unknown error";
-          toast.error(`Failed to save config changes: ${errorMessage}`, {
+          toast.error(t("toast.save.error", { errorMessage, ns: "common" }), {
            position: "top-center",
          });
        })
@@ -99,7 +108,7 @@ export function AnnotationSettingsPane({
          setIsLoading(false);
        });
    },
-    [updateConfig, config, event],
+    [updateConfig, config, event, t],
  );

  function onSubmit(values: z.infer<typeof formSchema>) {
@@ -126,7 +135,7 @@ export function AnnotationSettingsPane({
  return (
    <div className="mb-3 space-y-3 rounded-lg border border-secondary-foreground bg-background_alt p-2">
      <Heading as="h4" className="my-2">
-        Annotation Settings
+        {t("objectLifecycle.annotationSettings.title")}
      </Heading>
      <div className="flex flex-col">
        <div className="flex flex-row items-center justify-start gap-2 p-3">
@@ -136,11 +145,11 @@ export function AnnotationSettingsPane({
            onCheckedChange={setShowZones}
          />
          <Label className="cursor-pointer" htmlFor="show-zones">
-            Show All Zones
+            {t("objectLifecycle.annotationSettings.showAllZones")}
          </Label>
        </div>
        <div className="text-sm text-muted-foreground">
-          Always show zones on frames where objects have entered a zone.
+          {t("objectLifecycle.annotationSettings.showAllZones.desc")}
        </div>
      </div>
      <Separator className="my-2 flex bg-secondary" />
@@ -154,17 +163,16 @@ export function AnnotationSettingsPane({
            name="annotationOffset"
            render={({ field }) => (
              <FormItem>
-                <FormLabel>Annotation Offset</FormLabel>
+                <FormLabel>
+                  {t("objectLifecycle.annotationSettings.offset.label")}
+                </FormLabel>
                <div className="flex flex-col gap-3 md:flex-row-reverse md:gap-8">
                  <div className="flex flex-row items-center gap-3 rounded-lg bg-destructive/50 p-3 text-sm text-primary-variant md:my-0 md:my-5">
                    <PiWarningCircle className="size-24" />
                    <div>
-                      This data comes from your camera's detect feed but is
-                      overlayed on images from the the record feed. It is
-                      unlikely that the two streams are perfectly in sync. As a
-                      result, the bounding box and the footage will not line up
-                      perfectly. However, the <code>annotation_offset</code>{" "}
-                      field can be used to adjust this.
+                      <Trans ns="views/explore">
+                        objectLifecycle.annotationSettings.offset.desc
+                      </Trans>
                      <div className="mt-2 flex items-center text-primary">
                        <Link
                          to="https://docs.frigate.video/configuration/reference"
@@ -172,7 +180,9 @@ export function AnnotationSettingsPane({
                          rel="noopener noreferrer"
                          className="inline"
                        >
-                          Read the documentation{" "}
+                          {t(
+                            "objectLifecycle.annotationSettings.offset.documentation",
+                          )}
                          <LuExternalLink className="ml-2 inline-flex size-3" />
                        </Link>
                      </div>
@@ -187,16 +197,11 @@ export function AnnotationSettingsPane({
                      />
                    </FormControl>
                    <FormDescription>
-                      Milliseconds to offset detect annotations by.{" "}
-                      <em>Default: 0</em>
+                      {t(
+                        "objectLifecycle.annotationSettings.offset.millisecondsToOffset",
+                      )}
                      <div className="mt-2">
-                        TIP: Imagine there is an event clip with a person
-                        walking from left to right. If the event timeline
-                        bounding box is consistently to the left of the person
-                        then the value should be decreased. Similarly, if a
-                        person is walking from left to right and the bounding
-                        box is consistently ahead of the person then the value
-                        should be increased.
+                        {t("objectLifecycle.annotationSettings.offset.tips")}
                      </div>
                    </FormDescription>
                  </div>
@@ -210,14 +215,14 @@ export function AnnotationSettingsPane({
            <div className="flex flex-row gap-2 pt-5">
              <Button
                className="flex flex-1"
-                aria-label="Apply"
+                aria-label={t("button.apply", { ns: "common" })}
                onClick={form.handleSubmit(onApply)}
              >
-                Apply
+                {t("button.apply", { ns: "common" })}
              </Button>
              <Button
                variant="select"
-                aria-label="Save"
+                aria-label={t("button.save", { ns: "common" })}
                disabled={isLoading}
                className="flex flex-1"
                type="submit"
@@ -225,10 +230,10 @@ export function AnnotationSettingsPane({
                {isLoading ? (
                  <div className="flex flex-row items-center gap-2">
                    <ActivityIndicator />
-                    <span>Saving...</span>
+                    <span>{t("button.saving", { ns: "common" })}</span>
                  </div>
                ) : (
-                  "Save"
+                  t("button.save", { ns: "common" })
                )}
              </Button>
            </div>
--- a/web/src/components/overlay/detail/ObjectLifecycle.tsx
+++ b/web/src/components/overlay/detail/ObjectLifecycle.tsx
@@ -54,6 +54,7 @@ import { useNavigate } from "react-router-dom";
 import { ObjectPath } from "./ObjectPath";
 import { getLifecycleItemDescription } from "@/utils/lifecycleUtil";
 import { IoPlayCircleOutline } from "react-icons/io5";
+import { useTranslation } from "react-i18next";

 type ObjectLifecycleProps = {
  className?: string;
@@ -68,6 +69,8 @@ export default function ObjectLifecycle({
  fullscreen = false,
  setPane,
 }: ObjectLifecycleProps) {
+  const { t } = useTranslation(["views/explore"]);
+
  const { data: eventSequence } = useSWR<ObjectLifecycleSequence[]>([
    "timeline",
    {
@@ -334,12 +337,16 @@ export default function ObjectLifecycle({
        <div className={cn("flex items-center gap-2")}>
          <Button
            className="mb-2 mt-3 flex items-center gap-2.5 rounded-lg md:mt-0"
-            aria-label="Go back"
+            aria-label={t("label.back", { ns: "common" })}
            size="sm"
            onClick={() => setPane("overview")}
          >
            <IoMdArrowRoundBack className="size-5 text-secondary-foreground" />
-            {isDesktop && <div className="text-primary">Back</div>}
+            {isDesktop && (
+              <div className="text-primary">
+                {t("button.back", { ns: "common" })}
+              </div>
+            )}
          </Button>
        </div>
      )}
@@ -361,7 +368,7 @@ export default function ObjectLifecycle({
          <div className="relative aspect-video">
            <div className="flex flex-col items-center justify-center p-20 text-center">
              <LuFolderX className="size-16" />
-              No image found for this timestamp.
+              {t("objectLifecycle.noImageFound")}
            </div>
          </div>
        )}
@@ -464,11 +471,13 @@ export default function ObjectLifecycle({
                  className="flex w-full cursor-pointer items-center justify-start gap-2 p-2"
                  onClick={() =>
                    navigate(
-                      `/settings?page=masks%20/%20zones&camera=${event.camera}&object_mask=${eventSequence?.[current].data.box}`,
+                      `/settings?page=masksAndZones&camera=${event.camera}&object_mask=${eventSequence?.[current].data.box}`,
                    )
                  }
                >
-                  <div className="text-primary">Create Object Mask</div>
+                  <div className="text-primary">
+                    {t("objectLifecycle.createObjectMask")}
+                  </div>
                </div>
              </ContextMenuItem>
            </ContextMenuContent>
@@ -477,7 +486,7 @@ export default function ObjectLifecycle({
      </div>

      <div className="mt-3 flex flex-row items-center justify-between">
-        <Heading as="h4">Object Lifecycle</Heading>
+        <Heading as="h4">{t("objectLifecycle.title")}</Heading>

        <div className="flex flex-row gap-2">
          <Tooltip>
@@ -485,7 +494,7 @@ export default function ObjectLifecycle({
              <Button
                variant={showControls ? "select" : "default"}
                className="size-7 p-1.5"
-                aria-label="Adjust annotation settings"
+                aria-label={t("objectLifecycle.adjustAnnotationSettings")}
              >
                <LuSettings
                  className="size-5"
@@ -494,14 +503,16 @@ export default function ObjectLifecycle({
              </Button>
            </TooltipTrigger>
            <TooltipPortal>
-              <TooltipContent>Adjust annotation settings</TooltipContent>
+              <TooltipContent>
+                {t("objectLifecycle.adjustAnnotationSettings")}
+              </TooltipContent>
            </TooltipPortal>
          </Tooltip>
        </div>
      </div>
      <div className="flex flex-row items-center justify-between">
        <div className="mb-2 text-sm text-muted-foreground">
-          Scroll to view the significant moments of this object's lifecycle.
+          {t("objectLifecycle.scrollViewTips")}
        </div>
        <div className="min-w-20 text-right text-sm text-muted-foreground">
          {current + 1} of {eventSequence.length}
@@ -509,7 +520,7 @@ export default function ObjectLifecycle({
      </div>
      {config?.cameras[event.camera]?.onvif.autotracking.enabled_in_config && (
        <div className="-mt-2 mb-2 text-sm text-danger">
-          Bounding box positions will be inaccurate for autotracking cameras.
+          {t("objectLifecycle.autoTrackingTips")}
        </div>
      )}
      {showControls && (
@@ -559,8 +570,8 @@ export default function ObjectLifecycle({
                            timezone: config.ui.timezone,
                            strftime_fmt:
                              config.ui.time_format == "24hour"
-                                ? "%d %b %H:%M:%S"
-                                : "%m/%d %I:%M:%S%P",
+                                ? t("time.formattedTimestamp2.24hour")
+                                : t("time.formattedTimestamp2"),
                            time_style: "medium",
                            date_style: "medium",
                          })}
--- a/web/src/components/overlay/detail/ReviewDetailDialog.tsx
+++ b/web/src/components/overlay/detail/ReviewDetailDialog.tsx
@@ -42,6 +42,7 @@ import { DownloadVideoButton } from "@/components/button/DownloadVideoButton";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
 import { LuSearch } from "react-icons/lu";
 import useKeyboardListener from "@/hooks/use-keyboard-listener";
+import { Trans, useTranslation } from "react-i18next";

 type ReviewDetailDialogProps = {
  review?: ReviewSegment;
@@ -51,6 +52,7 @@ export default function ReviewDetailDialog({
  review,
  setReview,
 }: ReviewDetailDialogProps) {
+  const { t } = useTranslation(["views/explore"]);
  const { data: config } = useSWR<FrigateConfig>("config", {
    revalidateOnFocus: false,
  });
@@ -95,8 +97,8 @@ export default function ReviewDetailDialog({
  const formattedDate = useFormattedTimestamp(
    review?.start_time ?? 0,
    config?.ui.time_format == "24hour"
-      ? "%b %-d %Y, %H:%M"
-      : "%b %-d %Y, %I:%M %p",
+      ? t("time.formattedTimestampWithYear.24hour", { ns: "common" })
+      : t("time.formattedTimestampWithYear", { ns: "common" }),
    config?.ui.timezone,
  );

@@ -177,8 +179,10 @@ export default function ReviewDetailDialog({
          <span tabIndex={0} className="sr-only" />
          {pane == "overview" && (
            <Header className="justify-center">
-              <Title>Review Item Details</Title>
-              <Description className="sr-only">Review item details</Description>
+              <Title>{t("details.item.title")}</Title>
+              <Description className="sr-only">
+                {t("details.item.desc")}
+              </Description>
              <div
                className={cn(
                  "absolute flex gap-2 lg:flex-col",
@@ -189,7 +193,7 @@ export default function ReviewDetailDialog({
                <Tooltip>
                  <TooltipTrigger asChild>
                    <Button
-                      aria-label="Share this review item"
+                      aria-label={t("details.item.button.share")}
                      size="sm"
                      onClick={() =>
                        shareOrCopy(`${baseUrl}review?id=${review.id}`)
@@ -199,7 +203,9 @@ export default function ReviewDetailDialog({
                    </Button>
                  </TooltipTrigger>
                  <TooltipPortal>
-                    <TooltipContent>Share this review item</TooltipContent>
+                    <TooltipContent>
+                      {t("details.item.button.share")}
+                    </TooltipContent>
                  </TooltipPortal>
                </Tooltip>
                <Tooltip>
@@ -211,7 +217,9 @@ export default function ReviewDetailDialog({
                    />
                  </TooltipTrigger>
                  <TooltipPortal>
-                    <TooltipContent>Download</TooltipContent>
+                    <TooltipContent>
+                      {t("button.download", { ns: "common" })}
+                    </TooltipContent>
                  </TooltipPortal>
                </Tooltip>
              </div>
@@ -222,19 +230,25 @@ export default function ReviewDetailDialog({
              <div className="flex w-full flex-row">
                <div className="flex w-full flex-col gap-3">
                  <div className="flex flex-col gap-1.5">
-                    <div className="text-sm text-primary/40">Camera</div>
+                    <div className="text-sm text-primary/40">
+                      {t("details.camera")}
+                    </div>
                    <div className="text-sm capitalize">
                      {review.camera.replaceAll("_", " ")}
                    </div>
                  </div>
                  <div className="flex flex-col gap-1.5">
-                    <div className="text-sm text-primary/40">Timestamp</div>
+                    <div className="text-sm text-primary/40">
+                      {t("details.timestamp")}
+                    </div>
                    <div className="text-sm">{formattedDate}</div>
                  </div>
                </div>
                <div className="flex w-full flex-col items-center gap-2">
                  <div className="flex w-full flex-col gap-1.5 lg:pr-8">
-                    <div className="text-sm text-primary/40">Objects</div>
+                    <div className="text-sm text-primary/40">
+                      {t("details.objects")}
+                    </div>
                    <div className="scrollbar-container flex max-h-32 flex-col items-start gap-2 overflow-y-auto text-sm capitalize">
                      {events?.map((event) => {
                        return (
@@ -260,7 +274,9 @@ export default function ReviewDetailDialog({
                                </div>
                              </TooltipTrigger>
                              <TooltipPortal>
-                                <TooltipContent>View in Explore</TooltipContent>
+                                <TooltipContent>
+                                  {t("details.item.button.viewInExplore")}
+                                </TooltipContent>
                              </TooltipPortal>
                            </Tooltip>
                          </div>
@@ -270,7 +286,9 @@ export default function ReviewDetailDialog({
                  </div>
                  {review.data.zones.length > 0 && (
                    <div className="scrollbar-container flex max-h-32 w-full flex-col gap-1.5">
-                      <div className="text-sm text-primary/40">Zones</div>
+                      <div className="text-sm text-primary/40">
+                        {t("details.zones")}
+                      </div>
                      <div className="flex flex-col items-start gap-2 text-sm capitalize">
                        {review.data.zones.map((zone) => {
                          return (
@@ -294,18 +312,23 @@ export default function ReviewDetailDialog({
                      (events?.length ?? 0) -
                        (review?.data.detections.length ?? 0),
                    );
-                    const objectLabel =
-                      detectedCount === 1 ? "object was" : "objects were";

-                    return `${detectedCount} unavailable ${objectLabel} detected and included in this review item.`;
-                  })()}{" "}
-                  Those objects either did not qualify as an alert or detection
-                  or have already been cleaned up/deleted.
+                    return t("details.item.tips.mismatch", {
+                      count: detectedCount,
+                    });
+                  })()}
                  {missingObjects.length > 0 && (
                    <div className="mt-2">
-                      Adjust your configuration if you want Frigate to save
-                      tracked objects for the following labels:{" "}
-                      {missingObjects.join(", ")}
+                      <Trans
+                        ns="views/explore"
+                        values={{
+                          objects: missingObjects
+                            .map((x) => t(x, { ns: "objects" }))
+                            .join(", "),
+                        }}
+                      >
+                        details.item.tips.hasMissingObjects
+                      </Trans>
                    </div>
                  )}
                </div>
@@ -348,6 +371,8 @@ function EventItem({
  setSelectedEvent,
  setUpload,
 }: EventItemProps) {
+  const { t } = useTranslation(["views/explore"]);
+
  const { data: config } = useSWR<FrigateConfig>("config", {
    revalidateOnFocus: false,
  });
@@ -417,7 +442,9 @@ function EventItem({
                    </Chip>
                  </a>
                </TooltipTrigger>
-                <TooltipContent>Download</TooltipContent>
+                <TooltipContent>
+                  {t("button.download", { ns: "common" })}
+                </TooltipContent>
              </Tooltip>

              {event.has_snapshot &&
@@ -435,7 +462,9 @@ function EventItem({
                        <FrigatePlusIcon className="size-4 text-white" />
                      </Chip>
                    </TooltipTrigger>
-                    <TooltipContent>Submit to Frigate+</TooltipContent>
+                    <TooltipContent>
+                      {t("itemMenu.submitToPlus.label")}
+                    </TooltipContent>
                  </Tooltip>
                )}

@@ -452,7 +481,9 @@ function EventItem({
                      <FaArrowsRotate className="size-4 text-white" />
                    </Chip>
                  </TooltipTrigger>
-                  <TooltipContent>View Object Lifecycle</TooltipContent>
+                  <TooltipContent>
+                    {t("itemMenu.viewObjectLifecycle.label")}
+                  </TooltipContent>
                </Tooltip>
              )}

@@ -470,7 +501,9 @@ function EventItem({
                      <FaImages className="size-4 text-white" />
                    </Chip>
                  </TooltipTrigger>
-                  <TooltipContent>Find Similar</TooltipContent>
+                  <TooltipContent>
+                    {t("itemMenu.findSimilar.label")}
+                  </TooltipContent>
                </Tooltip>
              )}
            </div>
--- a/web/src/components/overlay/detail/SearchDetailDialog.tsx
+++ b/web/src/components/overlay/detail/SearchDetailDialog.tsx
@@ -73,12 +73,13 @@ import { LuInfo } from "react-icons/lu";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
 import { FaPencilAlt } from "react-icons/fa";
 import TextEntryDialog from "@/components/overlay/dialog/TextEntryDialog";
+import { useTranslation } from "react-i18next";

 const SEARCH_TABS = [
  "details",
  "snapshot",
  "video",
-  "object lifecycle",
+  "object_lifecycle",
 ] as const;
 export type SearchTab = (typeof SEARCH_TABS)[number];

@@ -98,6 +99,7 @@ export default function SearchDetailDialog({
  setSimilarity,
  setInputFocused,
 }: SearchDetailDialogProps) {
+  const { t } = useTranslation(["views/explore"]);
  const { data: config } = useSWR<FrigateConfig>("config", {
    revalidateOnFocus: false,
  });
@@ -152,7 +154,7 @@ export default function SearchDetailDialog({
    }

    if (search.data.type != "object" || !search.has_clip) {
-      const index = views.indexOf("object lifecycle");
+      const index = views.indexOf("object_lifecycle");
      views.splice(index, 1);
    }

@@ -192,8 +194,8 @@ export default function SearchDetailDialog({
        )}
      >
        <Header>
-          <Title>Tracked Object Details</Title>
-          <Description className="sr-only">Tracked object details</Description>
+          <Title>{t("trackedObjectDetails")}</Title>
+          <Description className="sr-only">{t("details")}</Description>
        </Header>
        <ScrollArea
          className={cn("w-full whitespace-nowrap", isMobile && "my-2")}
@@ -221,10 +223,10 @@ export default function SearchDetailDialog({
                  {item == "details" && <FaRegListAlt className="size-4" />}
                  {item == "snapshot" && <FaImage className="size-4" />}
                  {item == "video" && <FaVideo className="size-4" />}
-                  {item == "object lifecycle" && (
+                  {item == "object_lifecycle" && (
                    <FaRotate className="size-4" />
                  )}
-                  <div className="capitalize">{item}</div>
+                  <div className="capitalize">{t("type.{item}")}</div>
                </ToggleGroupItem>
              ))}
            </ToggleGroup>
@@ -254,7 +256,7 @@ export default function SearchDetailDialog({
          />
        )}
        {page == "video" && <VideoTab search={search} />}
-        {page == "object lifecycle" && (
+        {page == "object_lifecycle" && (
          <ObjectLifecycle
            className="w-full overflow-x-hidden"
            event={search as unknown as Event}
@@ -281,6 +283,8 @@ function ObjectDetailsTab({
  setSimilarity,
  setInputFocused,
 }: ObjectDetailsTabProps) {
+  const { t } = useTranslation(["views/explore"]);
+
  const apiHost = useApiHost();

  // mutation / revalidation
@@ -306,8 +310,8 @@ function ObjectDetailsTab({
  const formattedDate = useFormattedTimestamp(
    search?.start_time ?? 0,
    config?.ui.time_format == "24hour"
-      ? "%b %-d %Y, %H:%M"
-      : "%b %-d %Y, %I:%M %p",
+      ? t("time.formattedTimestampWithYear.24hour")
+      : t("time.formattedTimestampWithYear"),
    config?.ui.timezone,
  );

@@ -383,7 +387,7 @@ function ObjectDetailsTab({
      .post(`events/${search.id}/description`, { description: desc })
      .then((resp) => {
        if (resp.status == 200) {
-          toast.success("Successfully saved description", {
+          toast.success(t("details.tips.descriptionSaved"), {
            position: "top-center",
          });
        }
@@ -416,12 +420,17 @@ function ObjectDetailsTab({
          error.response?.data?.message ||
          error.response?.data?.detail ||
          "Unknown error";
-        toast.error(`Failed to update the description: ${errorMessage}`, {
-          position: "top-center",
-        });
+        toast.error(
+          t("details.tips.saveDescriptionFailed", {
+            errorMessage,
+          }),
+          {
+            position: "top-center",
+          },
+        );
        setDesc(search.data.description);
      });
-  }, [desc, search, mutate]);
+  }, [desc, search, mutate, t]);

  const regenerateDescription = useCallback(
    (source: "snapshot" | "thumbnails") => {
@@ -434,7 +443,12 @@ function ObjectDetailsTab({
        .then((resp) => {
          if (resp.status == 200) {
            toast.success(
-              `A new description has been requested from ${capitalizeAll(config?.genai.provider.replaceAll("_", " ") ?? "Generative AI")}. Depending on the speed of your provider, the new description may take some time to regenerate.`,
+              t("details.item.toast.success.regenerate", {
+                provider: capitalizeAll(
+                  config?.genai.provider.replaceAll("_", " ") ??
+                    t("generativeAI"),
+                ),
+              }),
              {
                position: "top-center",
                duration: 7000,
@@ -448,12 +462,18 @@ function ObjectDetailsTab({
            error.response?.data?.detail ||
            "Unknown error";
          toast.error(
-            `Failed to call ${capitalizeAll(config?.genai.provider.replaceAll("_", " ") ?? "Generative AI")} for a new description: ${errorMessage}`,
+            t("details.item.toast.error.regenerate", {
+              provider: capitalizeAll(
+                config?.genai.provider.replaceAll("_", " ") ??
+                  t("generativeAI"),
+              ),
+              errorMessage,
+            }),
            { position: "top-center" },
          );
        });
    },
-    [search, config],
+    [search, config, t],
  );

  const handleSubLabelSave = useCallback(
@@ -472,7 +492,7 @@ function ObjectDetailsTab({
        })
        .then((response) => {
          if (response.status === 200) {
-            toast.success("Successfully updated sub label.", {
+            toast.success(t("details.item.toast.success.updatedSublabel"), {
              position: "top-center",
            });

@@ -520,12 +540,17 @@ function ObjectDetailsTab({
            error.response?.data?.message ||
            error.response?.data?.detail ||
            "Unknown error";
-          toast.error(`Failed to update sub label: ${errorMessage}`, {
-            position: "top-center",
-          });
+          toast.error(
+            t("details.item.toast.error.updatedSublabelFailed", {
+              errorMessage,
+            }),
+            {
+              position: "top-center",
+            },
+          );
        });
    },
-    [search, apiHost, mutate, setSearch],
+    [search, apiHost, mutate, setSearch, t],
  );

  return (
@@ -533,10 +558,10 @@ function ObjectDetailsTab({
      <div className="flex w-full flex-row">
        <div className="flex w-full flex-col gap-3">
          <div className="flex flex-col gap-1.5">
-            <div className="text-sm text-primary/40">Label</div>
+            <div className="text-sm text-primary/40">{t("details.label")}</div>
            <div className="flex flex-row items-center gap-2 text-sm capitalize">
              {getIconForLabel(search.label, "size-4 text-primary")}
-              {search.label}
+              {t("{search.label}", { ns: "objects" })}
              {search.sub_label && ` (${search.sub_label})`}
              <Tooltip>
                <TooltipTrigger asChild>
@@ -550,7 +575,7 @@ function ObjectDetailsTab({
                  </span>
                </TooltipTrigger>
                <TooltipPortal>
-                  <TooltipContent>Edit sub label</TooltipContent>
+                  <TooltipContent>{t("details.editSubLable")}</TooltipContent>
                </TooltipPortal>
              </Tooltip>
            </div>
@@ -572,7 +597,7 @@ function ObjectDetailsTab({
          <div className="flex flex-col gap-1.5">
            <div className="text-sm text-primary/40">
              <div className="flex flex-row items-center gap-1">
-                Top Score
+                {t("details.topScore")}
                <Popover>
                  <PopoverTrigger asChild>
                    <div className="cursor-pointer p-0">
@@ -581,9 +606,7 @@ function ObjectDetailsTab({
                    </div>
                  </PopoverTrigger>
                  <PopoverContent className="w-80">
-                    The top score is the highest median score for the tracked
-                    object, so this may differ from the score shown on the
-                    search result thumbnail.
+                    {t("details.topScore.info")}
                  </PopoverContent>
                </Popover>
              </div>
@@ -594,12 +617,16 @@ function ObjectDetailsTab({
          </div>
          {averageEstimatedSpeed && (
            <div className="flex flex-col gap-1.5">
-              <div className="text-sm text-primary/40">Estimated Speed</div>
+              <div className="text-sm text-primary/40">
+                {t("details.estimatedSpeed")}
+              </div>
              <div className="flex flex-col space-y-0.5 text-sm">
                {averageEstimatedSpeed && (
                  <div className="flex flex-row items-center gap-2">
                    {averageEstimatedSpeed}{" "}
-                    {config?.ui.unit_system == "imperial" ? "mph" : "kph"}{" "}
+                    {config?.ui.unit_system == "imperial"
+                      ? t("unit.speed.mph", { ns: "common" })
+                      : t("unit.speed.kph", { ns: "common" })}{" "}
                    {velocityAngle != undefined && (
                      <span className="text-primary/40">
                        <FaArrowRight
@@ -616,13 +643,15 @@ function ObjectDetailsTab({
            </div>
          )}
          <div className="flex flex-col gap-1.5">
-            <div className="text-sm text-primary/40">Camera</div>
+            <div className="text-sm text-primary/40">{t("details.camera")}</div>
            <div className="text-sm capitalize">
              {search.camera.replaceAll("_", " ")}
            </div>
          </div>
          <div className="flex flex-col gap-1.5">
-            <div className="text-sm text-primary/40">Timestamp</div>
+            <div className="text-sm text-primary/40">
+              {t("details.timestamp")}
+            </div>
            <div className="text-sm">{formattedDate}</div>
          </div>
        </div>
@@ -642,7 +671,7 @@ function ObjectDetailsTab({
          />
          {config?.semantic_search.enabled && search.data.type == "object" && (
            <Button
-              aria-label="Find similar tracked objects"
+              aria-label={t("itemMenu.findSimilar.aria")}
              onClick={() => {
                setSearch(undefined);

@@ -651,7 +680,7 @@ function ObjectDetailsTab({
                }
              }}
            >
-              Find Similar
+              {t("itemMenu.findSimilar.label")}
            </Button>
          )}
        </div>
@@ -673,18 +702,15 @@ function ObjectDetailsTab({
              <div className="flex">
                <ActivityIndicator />
              </div>
-              <div className="flex">
-                Frigate will not request a description from your Generative AI
-                provider until the tracked object's lifecycle has ended.
-              </div>
+              <div className="flex">{t("details.description.aiTips")}</div>
            </div>
          </>
        ) : (
          <>
-            <div className="text-sm text-primary/40">Description</div>
+            <div className="text-sm text-primary/40"></div>
            <Textarea
              className="h-64"
-              placeholder="Description of the tracked object"
+              placeholder={t("details.description.placeholder")}
              value={desc}
              onChange={(e) => setDesc(e.target.value)}
              onFocus={handleDescriptionFocus}
@@ -698,17 +724,17 @@ function ObjectDetailsTab({
            <div className="flex items-start">
              <Button
                className="rounded-r-none border-r-0"
-                aria-label="Regenerate tracked object description"
+                aria-label={t("details.button.regenerate.label")}
                onClick={() => regenerateDescription("thumbnails")}
              >
-                Regenerate
+                {t("details.button.regenerate")}
              </Button>
              {search.has_snapshot && (
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button
                      className="rounded-l-none border-l-0 px-2"
-                      aria-label="Expand regeneration menu"
+                      aria-label={t("details.expandRegenerationMenu")}
                    >
                      <FaChevronDown className="size-3" />
                    </Button>
@@ -716,17 +742,17 @@ function ObjectDetailsTab({
                  <DropdownMenuContent>
                    <DropdownMenuItem
                      className="cursor-pointer"
-                      aria-label="Regenerate from snapshot"
+                      aria-label={t("details.regenerateFromSnapshot")}
                      onClick={() => regenerateDescription("snapshot")}
                    >
-                      Regenerate from Snapshot
+                      {t("details.regenerateFromSnapshot")}
                    </DropdownMenuItem>
                    <DropdownMenuItem
                      className="cursor-pointer"
-                      aria-label="Regenerate from thumbnails"
+                      aria-label={t("details.regenerateFromThumbnails")}
                      onClick={() => regenerateDescription("thumbnails")}
                    >
-                      Regenerate from Thumbnails
+                      {t("details.regenerateFromThumbnails")}
                    </DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
@@ -737,17 +763,23 @@ function ObjectDetailsTab({
            !config?.cameras[search.camera].genai.enabled) && (
            <Button
              variant="select"
-              aria-label="Save"
+              aria-label={t("button.save", { ns: "common" })}
              onClick={updateDescription}
            >
-              Save
+              {t("button.save", { ns: "common" })}
            </Button>
          )}
          <TextEntryDialog
            open={isSubLabelDialogOpen}
            setOpen={setIsSubLabelDialogOpen}
-            title="Edit Sub Label"
-            description={`Enter a new sub label for this ${search.label ?? "tracked object"}.`}
+            title={t("details.editSubLable")}
+            description={
+              search.label
+                ? t("details.editSubLable.desc", {
+                    label: t(search.label, { ns: "objects" }),
+                  })
+                : t("details.editSubLable.desc.noLabel")
+            }
            onSave={handleSubLabelSave}
            defaultValue={search?.sub_label || ""}
            allowEmpty={true}
@@ -766,6 +798,7 @@ export function ObjectSnapshotTab({
  search,
  onEventUploaded,
 }: ObjectSnapshotTabProps) {
+  const { t } = useTranslation(["components/dialog"]);
  type SubmissionState = "reviewing" | "uploading" | "submitted";

  const [imgRef, imgLoaded, onImgLoad] = useImageLoaded();
@@ -848,7 +881,9 @@ export function ObjectSnapshotTab({
                        </a>
                      </TooltipTrigger>
                      <TooltipPortal>
-                        <TooltipContent>Download</TooltipContent>
+                        <TooltipContent>
+                          {t("button.download", { ns: "common" })}
+                        </TooltipContent>
                      </TooltipPortal>
                    </Tooltip>
                  </div>
@@ -867,12 +902,10 @@ export function ObjectSnapshotTab({
                          "text-lg font-semibold leading-none tracking-tight"
                        }
                      >
-                        Submit To Frigate+
+                        {t("explore.submitToPlus.label")}
                      </div>
                      <div className="text-sm text-muted-foreground">
-                        Objects in locations you want to avoid are not false
-                        positives. Submitting them as false positives will
-                        confuse the model.
+                        {t("explore.submitToPlus.desc")}
                      </div>
                    </div>

@@ -881,28 +914,36 @@ export function ObjectSnapshotTab({
                        <>
                          <Button
                            className="bg-success"
-                            aria-label="Confirm this label for Frigate Plus"
+                            aria-label={t("explore.plus.review.true.label")}
                            onClick={() => {
                              setState("uploading");
                              onSubmitToPlus(false);
                            }}
                          >
-                            This is{" "}
-                            {/^[aeiou]/i.test(search?.label || "") ? "an" : "a"}{" "}
-                            {search?.label}
+                            {/^[aeiou]/i.test(search?.label || "")
+                              ? t("explore.plus.review.true_other", {
+                                  label: search?.label,
+                                })
+                              : t("explore.plus.review.true_one", {
+                                  label: search?.label,
+                                })}
                          </Button>
                          <Button
                            className="text-white"
-                            aria-label="Do not confirm this label for Frigate Plus"
+                            aria-label={t("explore.plus.review.false.label")}
                            variant="destructive"
                            onClick={() => {
                              setState("uploading");
                              onSubmitToPlus(true);
                            }}
                          >
-                            This is not{" "}
-                            {/^[aeiou]/i.test(search?.label || "") ? "an" : "a"}{" "}
-                            {search?.label}
+                            {/^[aeiou]/i.test(search?.label || "")
+                              ? t("explore.plus.review.false_other", {
+                                  label: search?.label,
+                                })
+                              : t("explore.plus.review.false_one", {
+                                  label: search?.label,
+                                })}
                          </Button>
                        </>
                      )}
@@ -910,7 +951,7 @@ export function ObjectSnapshotTab({
                      {state == "submitted" && (
                        <div className="flex flex-row items-center justify-center gap-2">
                          <FaCheckCircle className="text-success" />
-                          Submitted
+                          {t("explore.plus.review.state.submitted")}
                        </div>
                      )}
                    </div>
@@ -929,6 +970,7 @@ type VideoTabProps = {
 };

 export function VideoTab({ search }: VideoTabProps) {
+  const { t } = useTranslation(["views/explore"]);
  const navigate = useNavigate();
  const { data: reviewItem } = useSWR<ReviewSegment>([
    `review/event/${search.id}`,
@@ -963,7 +1005,9 @@ export function VideoTab({ search }: VideoTabProps) {
              </Chip>
            </TooltipTrigger>
            <TooltipPortal>
-              <TooltipContent>View in History</TooltipContent>
+              <TooltipContent>
+                {t("itemMenu.viewInHistory.label")}
+              </TooltipContent>
            </TooltipPortal>
          </Tooltip>
          <Tooltip>
@@ -978,7 +1022,9 @@ export function VideoTab({ search }: VideoTabProps) {
              </a>
            </TooltipTrigger>
            <TooltipPortal>
-              <TooltipContent>Download</TooltipContent>
+              <TooltipContent>
+                {t("button.download", { ns: "common" })}
+              </TooltipContent>
            </TooltipPortal>
          </Tooltip>
        </div>
--- a/web/src/components/overlay/dialog/RestartDialog.tsx
+++ b/web/src/components/overlay/dialog/RestartDialog.tsx
@@ -19,6 +19,8 @@ import { Button } from "@/components/ui/button";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
 import { baseUrl } from "@/api/baseUrl";

+import { useTranslation } from "react-i18next";
+
 type RestartDialogProps = {
  isOpen: boolean;
  onClose: () => void;
@@ -30,6 +32,7 @@ export default function RestartDialog({
  onClose,
  onRestart,
 }: RestartDialogProps) {
+  const { t } = useTranslation("components/dialog");
  const [restartDialogOpen, setRestartDialogOpen] = useState(isOpen);
  const [restartingSheetOpen, setRestartingSheetOpen] = useState(false);
  const [countdown, setCountdown] = useState(60);
@@ -78,14 +81,14 @@ export default function RestartDialog({
      >
        <AlertDialogContent>
          <AlertDialogHeader>
-            <AlertDialogTitle>
-              Are you sure you want to restart Frigate?
-            </AlertDialogTitle>
+            <AlertDialogTitle>{t("restart.title")}</AlertDialogTitle>
          </AlertDialogHeader>
          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogCancel>
+              {t("button.cancel", { ns: "common" })}
+            </AlertDialogCancel>
            <AlertDialogAction onClick={handleRestart}>
-              Restart
+              {t("restart.button")}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
@@ -100,19 +103,23 @@ export default function RestartDialog({
            <ActivityIndicator />
            <SheetHeader className="mt-5 text-center">
              <SheetTitle className="text-center">
-                Frigate is Restarting
+                {t("restart.restarting.title")}
              </SheetTitle>
              <SheetDescription className="text-center">
-                <div>This page will reload in {countdown} seconds.</div>
+                <div>
+                  {t("restart.restarting.content", {
+                    countdown,
+                  })}
+                </div>
              </SheetDescription>
            </SheetHeader>
            <Button
              size="lg"
              className="mt-5"
-              aria-label="Force reload now"
+              aria-label={t("restart.restarting.button")}
              onClick={handleForceReload}
            >
-              Force Reload Now
+              {t("restart.restarting.button")}
            </Button>
          </div>
        </SheetContent>
--- a/web/src/components/overlay/dialog/SearchFilterDialog.tsx
+++ b/web/src/components/overlay/dialog/SearchFilterDialog.tsx
@@ -33,6 +33,7 @@ import {
  TooltipProvider,
  TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { Trans, useTranslation } from "react-i18next";
 import {
  Command,
  CommandEmpty,
@@ -60,7 +61,7 @@ export default function SearchFilterDialog({
  onUpdateFilter,
 }: SearchFilterDialogProps) {
  // data
-
+  const { t } = useTranslation(["components/filter"]);
  const [currentFilter, setCurrentFilter] = useState(filter ?? {});
  const { data: allSubLabels } = useSWR(["sub_labels", { split_joined: 1 }]);

@@ -93,7 +94,7 @@ export default function SearchFilterDialog({
  const trigger = (
    <Button
      className="flex items-center gap-2"
-      aria-label="More Filters"
+      aria-label={t("more")}
      size="sm"
      variant={moreFiltersSelected ? "select" : "default"}
    >
@@ -102,7 +103,7 @@ export default function SearchFilterDialog({
          moreFiltersSelected ? "text-white" : "text-secondary-foreground",
        )}
      />
-      More Filters
+      {t("more")}
    </Button>
  );
  const content = (
@@ -184,7 +185,7 @@ export default function SearchFilterDialog({
      <div className="flex items-center justify-evenly p-2">
        <Button
          variant="select"
-          aria-label="Apply"
+          aria-label={t("button.apply", { ns: "common" })}
          onClick={() => {
            if (currentFilter != filter) {
              onUpdateFilter(currentFilter);
@@ -193,10 +194,10 @@ export default function SearchFilterDialog({
            setOpen(false);
          }}
        >
-          Apply
+          {t("button.apply", { ns: "common" })}
        </Button>
        <Button
-          aria-label="Reset filters to default values"
+          aria-label={t("reset.label")}
          onClick={() => {
            setCurrentFilter((prevFilter) => ({
              ...prevFilter,
@@ -214,7 +215,7 @@ export default function SearchFilterDialog({
            }));
          }}
        >
-          Reset
+          {t("button.reset", { ns: "common" })}
        </Button>
      </div>
    </div>
@@ -250,6 +251,7 @@ function TimeRangeFilterContent({
  timeRange,
  updateTimeRange,
 }: TimeRangeFilterContentProps) {
+  const { t } = useTranslation(["components/filter"]);
  const [startOpen, setStartOpen] = useState(false);
  const [endOpen, setEndOpen] = useState(false);

@@ -293,7 +295,7 @@ function TimeRangeFilterContent({

  return (
    <div className="overflow-x-hidden">
-      <div className="text-lg">Time Range</div>
+      <div className="text-lg">{t("timeRange")}</div>
      <div className="mt-3 flex flex-row items-center justify-center gap-2">
        <Popover
          open={startOpen}
@@ -306,7 +308,9 @@ function TimeRangeFilterContent({
          <PopoverTrigger asChild>
            <Button
              className={`text-primary ${isDesktop ? "" : "text-xs"} `}
-              aria-label="Select Start Time"
+              aria-label={t("export.time.start.label", {
+                ns: "components/dialog",
+              })}
              variant={startOpen ? "select" : "default"}
              size="sm"
              onClick={() => {
@@ -344,7 +348,9 @@ function TimeRangeFilterContent({
          <PopoverTrigger asChild>
            <Button
              className={`text-primary ${isDesktop ? "" : "text-xs"}`}
-              aria-label="Select End Time"
+              aria-label={t("export.time.end.label", {
+                ns: "components/dialog",
+              })}
              variant={endOpen ? "select" : "default"}
              size="sm"
              onClick={() => {
@@ -387,11 +393,12 @@ export function ZoneFilterContent({
  zones,
  updateZones,
 }: ZoneFilterContentProps) {
+  const { t } = useTranslation(["components/filter"]);
  return (
    <>
      <div className="overflow-x-hidden">
        <DropdownMenuSeparator className="mb-3" />
-        <div className="text-lg">Zones</div>
+        <div className="text-lg">{t("zones.label")}</div>
        {allZones && (
          <>
            <div className="mb-5 mt-2.5 flex items-center justify-between">
@@ -399,7 +406,7 @@ export function ZoneFilterContent({
                className="mx-2 cursor-pointer text-primary"
                htmlFor="allZones"
              >
-                All Zones
+                {t("zones.all")}
              </Label>
              <Switch
                className="ml-1"
@@ -454,13 +461,14 @@ export function SubFilterContent({
  subLabels,
  setSubLabels,
 }: SubFilterContentProps) {
+  const { t } = useTranslation(["components/filter"]);
  return (
    <div className="overflow-x-hidden">
      <DropdownMenuSeparator className="mb-3" />
-      <div className="text-lg">Sub Labels</div>
+      <div className="text-lg">{t("subLabels.label")}</div>
      <div className="mb-5 mt-2.5 flex items-center justify-between">
        <Label className="mx-2 cursor-pointer text-primary" htmlFor="allLabels">
-          All Sub Labels
+          {t("subLabels.all")}
        </Label>
        <Switch
          className="ml-1"
@@ -512,10 +520,11 @@ export function ScoreFilterContent({
  maxScore,
  setScoreRange,
 }: ScoreFilterContentProps) {
+  const { t } = useTranslation(["components/filter"]);
  return (
    <div className="overflow-x-hidden">
      <DropdownMenuSeparator className="mb-3" />
-      <div className="mb-3 text-lg">Score</div>
+      <div className="mb-3 text-lg">{t("score")}</div>
      <div className="flex items-center gap-1">
        <Input
          className="w-14 text-center"
@@ -566,11 +575,17 @@ export function SpeedFilterContent({
  maxSpeed,
  setSpeedRange,
 }: SpeedFilterContentProps) {
+  const { t } = useTranslation(["components/filter"]);
  return (
    <div className="overflow-x-hidden">
      <DropdownMenuSeparator className="mb-3" />
      <div className="mb-3 text-lg">
-        Estimated Speed ({config?.ui.unit_system == "metric" ? "kph" : "mph"})
+        {t("estimatedSpeed", {
+          unit:
+            config?.ui.unit_system == "metric"
+              ? t("unit.speed.kph", { ns: "common" })
+              : t("unit.speed.mph", { ns: "common" }),
+        })}
      </div>
      <div className="flex items-center gap-1">
        <Input
@@ -629,6 +644,7 @@ export function SnapshotClipFilterContent({
  submittedToFrigatePlus,
  setSnapshotClip,
 }: SnapshotClipContentProps) {
+  const { t } = useTranslation(["components/filter"]);
  const [isSnapshotFilterActive, setIsSnapshotFilterActive] = useState(
    hasSnapshot !== undefined,
  );
@@ -657,7 +673,7 @@ export function SnapshotClipFilterContent({
  return (
    <div className="overflow-x-hidden">
      <DropdownMenuSeparator className="mb-3" />
-      <div className="mb-3 text-lg">Features</div>
+      <div className="mb-3 text-lg">{t("features.label")}</div>

      <div className="my-2.5 space-y-1">
        <div className="flex items-center justify-between">
@@ -679,7 +695,7 @@ export function SnapshotClipFilterContent({
              htmlFor="snapshot-filter"
              className="cursor-pointer text-sm font-medium leading-none"
            >
-              Has a snapshot
+              {t("features.hasSnapshot")}
            </Label>
          </div>
          <ToggleGroup
@@ -697,17 +713,17 @@ export function SnapshotClipFilterContent({
          >
            <ToggleGroupItem
              value="yes"
-              aria-label="Yes"
+              aria-label={t("button.yes", { ns: "common" })}
              className="data-[state=on]:bg-selected data-[state=on]:text-white data-[state=on]:hover:bg-selected data-[state=on]:hover:text-white"
            >
-              Yes
+              {t("button.yes", { ns: "common" })}
            </ToggleGroupItem>
            <ToggleGroupItem
              value="no"
-              aria-label="No"
+              aria-label={t("button.no", { ns: "common" })}
              className="data-[state=on]:bg-selected data-[state=on]:text-white data-[state=on]:hover:bg-selected data-[state=on]:hover:text-white"
            >
-              No
+              {t("button.no", { ns: "common" })}
            </ToggleGroupItem>
          </ToggleGroup>
        </div>
@@ -741,12 +757,9 @@ export function SnapshotClipFilterContent({
                      side="left"
                      sideOffset={5}
                    >
-                      You must first filter on tracked objects that have a
-                      snapshot.
-                      <br />
-                      <br />
-                      Tracked objects without a snapshot cannot be submitted to
-                      Frigate+.
+                      <Trans ns="components/filter">
+                        features.submittedToFrigatePlus.tips
+                      </Trans>
                    </TooltipContent>
                  )}
                </Tooltip>
@@ -755,7 +768,7 @@ export function SnapshotClipFilterContent({
                htmlFor="plus-filter"
                className="cursor-pointer text-sm font-medium leading-none"
              >
-                Submitted to Frigate+
+                {t("features.submittedToFrigatePlus.label")}
              </Label>
            </div>
            <ToggleGroup
@@ -778,17 +791,17 @@ export function SnapshotClipFilterContent({
            >
              <ToggleGroupItem
                value="yes"
-                aria-label="Yes"
+                aria-label={t("button.yes", { ns: "common" })}
                className="data-[state=on]:bg-selected data-[state=on]:text-white data-[state=on]:hover:bg-selected data-[state=on]:hover:text-white"
              >
-                Yes
+                {t("button.yes", { ns: "common" })}
              </ToggleGroupItem>
              <ToggleGroupItem
                value="no"
-                aria-label="No"
+                aria-label={t("button.no", { ns: "common" })}
                className="data-[state=on]:bg-selected data-[state=on]:text-white data-[state=on]:hover:bg-selected data-[state=on]:hover:text-white"
              >
-                No
+                {t("button.no", { ns: "common" })}
              </ToggleGroupItem>
            </ToggleGroup>
          </div>
@@ -817,7 +830,7 @@ export function SnapshotClipFilterContent({
              htmlFor="clip-filter"
              className="cursor-pointer text-sm font-medium leading-none"
            >
-              Has a video clip
+              {t("features.hasVideoClip")}
            </Label>
          </div>
          <ToggleGroup
@@ -833,17 +846,17 @@ export function SnapshotClipFilterContent({
          >
            <ToggleGroupItem
              value="yes"
-              aria-label="Yes"
+              aria-label={t("button.yes", { ns: "common" })}
              className="data-[state=on]:bg-selected data-[state=on]:text-white data-[state=on]:hover:bg-selected data-[state=on]:hover:text-white"
            >
-              Yes
+              {t("button.yes", { ns: "common" })}
            </ToggleGroupItem>
            <ToggleGroupItem
              value="no"
-              aria-label="No"
+              aria-label={t("button.no", { ns: "common" })}
              className="data-[state=on]:bg-selected data-[state=on]:text-white data-[state=on]:hover:bg-selected data-[state=on]:hover:text-white"
            >
-              No
+              {t("button.no", { ns: "common" })}
            </ToggleGroupItem>
          </ToggleGroup>
        </div>
@@ -863,6 +876,8 @@ export function RecognizedLicensePlatesFilterContent({
  recognizedLicensePlates,
  setRecognizedLicensePlates,
 }: RecognizedLicensePlatesFilterContentProps) {
+  const { t } = useTranslation(["components/filter"]);
+
  const { data: allRecognizedLicensePlates, error } = useSWR<string[]>(
    "recognized_license_plates",
    {
@@ -911,26 +926,28 @@ export function RecognizedLicensePlatesFilterContent({
  return (
    <div className="overflow-x-hidden">
      <DropdownMenuSeparator className="mb-3" />
-      <div className="mb-3 text-lg">Recognized License Plates</div>
+      <div className="mb-3 text-lg">{t("recognizedLicensePlates.title")}</div>
      {error ? (
        <p className="text-sm text-red-500">
-          Failed to load recognized license plates.
+          {t("recognizedLicensePlates.loadFailed")}
        </p>
      ) : !allRecognizedLicensePlates ? (
        <p className="text-sm text-muted-foreground">
-          Loading recognized license plates...
+          {t("recognizedLicensePlates.loading")}
        </p>
      ) : (
        <>
          <Command className="border border-input bg-background">
            <CommandInput
-              placeholder="Type to search license plates..."
+              placeholder={t("recognizedLicensePlates.placeholder")}
              value={inputValue}
              onValueChange={setInputValue}
            />
            <CommandList className="max-h-[200px] overflow-auto">
              {filteredRecognizedLicensePlates.length === 0 && inputValue && (
-                <CommandEmpty>No license plates found.</CommandEmpty>
+                <CommandEmpty>
+                  {t("recognizedLicensePlates.noLicensePlatesFound")}
+                </CommandEmpty>
              )}
              {filteredRecognizedLicensePlates.map((plate) => (
                <CommandItem
@@ -973,7 +990,7 @@ export function RecognizedLicensePlatesFilterContent({
        </>
      )}
      <p className="mt-1 text-sm text-muted-foreground">
-        Select one or more plates from the list.
+        {t("recognizedLicensePlates.selectPlatesFromList")}
      </p>
    </div>
  );
--- a/web/src/components/overlay/dialog/TextEntryDialog.tsx
+++ b/web/src/components/overlay/dialog/TextEntryDialog.tsx
@@ -12,6 +12,8 @@ import { Input } from "@/components/ui/input";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useCallback, useEffect } from "react";
 import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+
 import { z } from "zod";

 type TextEntryDialogProps = {
@@ -37,6 +39,8 @@ export default function TextEntryDialog({
    text: z.string(),
  });

+  const { t } = useTranslation("components/dialog");
+
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: { text: defaultValue },
@@ -87,10 +91,10 @@ export default function TextEntryDialog({
            />
            <DialogFooter className="pt-4">
              <Button type="button" onClick={() => setOpen(false)}>
-                Cancel
+                {t("button.cancel", { ns: "common" })}
              </Button>
              <Button variant="select" type="submit">
-                Save
+                {t("button.save", { ns: "common" })}
              </Button>
            </DialogFooter>
          </form>
--- a/web/src/components/player/HlsVideoPlayer.tsx
+++ b/web/src/components/player/HlsVideoPlayer.tsx
@@ -18,6 +18,7 @@ import { useOverlayState } from "@/hooks/use-overlay-state";
 import { usePersistence } from "@/hooks/use-persistence";
 import { cn } from "@/lib/utils";
 import { ASPECT_VERTICAL_LAYOUT, RecordingPlayerError } from "@/types/record";
+import { useTranslation } from "react-i18next";

 // Android native hls does not seek correctly
 const USE_NATIVE_HLS = !isAndroid;
@@ -63,6 +64,7 @@ export default function HlsVideoPlayer({
  toggleFullscreen,
  onError,
 }: HlsVideoPlayerProps) {
+  const { t } = useTranslation("components/player");
  const { data: config } = useSWR<FrigateConfig>("config");

  // playback
@@ -236,11 +238,11 @@ export default function HlsVideoPlayer({
              const resp = await onUploadFrame(videoRef.current.currentTime);

              if (resp && resp.status == 200) {
-                toast.success("Successfully submitted frame to Frigate+", {
+                toast.success(t("toast.success.submittedFrigatePlus"), {
                  position: "top-center",
                });
              } else {
-                toast.success("Failed to submit frame to Frigate+", {
+                toast.success(t("toast.error.submitFrigatePlusFailed"), {
                  position: "top-center",
                });
              }
--- a/web/src/components/player/LivePlayer.tsx
+++ b/web/src/components/player/LivePlayer.tsx
@@ -23,6 +23,7 @@ import { TooltipPortal } from "@radix-ui/react-tooltip";
 import { baseUrl } from "@/api/baseUrl";
 import { PlayerStats } from "./PlayerStats";
 import { LuVideoOff } from "react-icons/lu";
+import { Trans, useTranslation } from "react-i18next";

 type LivePlayerProps = {
  cameraRef?: (ref: HTMLDivElement | null) => void;
@@ -71,6 +72,8 @@ export default function LivePlayer({
  onError,
  onResetLiveMode,
 }: LivePlayerProps) {
+  const { t } = useTranslation(["components/player"]);
+
  const internalContainerRef = useRef<HTMLDivElement | null>(null);

  // stats
@@ -272,7 +275,7 @@ export default function LivePlayer({
    } else {
      player = (
        <div className="w-5xl text-center text-sm">
-          iOS 17.1 or greater is required for this live stream type.
+          {t("livePlayerRequiredIOSVersion")}
        </div>
      );
    }
@@ -400,12 +403,17 @@ export default function LivePlayer({
      {offline && !showStillWithoutActivity && cameraEnabled && (
        <div className="absolute inset-0 left-1/2 top-1/2 flex h-96 w-96 -translate-x-1/2 -translate-y-1/2">
          <div className="flex flex-col items-center justify-center rounded-lg bg-background/50 p-5">
-            <p className="my-5 text-lg">Stream offline</p>
+            <p className="my-5 text-lg">{t("streamOffline.title")}</p>
            <TbExclamationCircle className="mb-3 size-10" />
            <p className="max-w-96 text-center">
-              No frames have been received on the{" "}
-              {capitalizeFirstLetter(cameraConfig.name)} <code>detect</code>{" "}
-              stream, check error logs
+              <Trans
+                values={{
+                  cameraName: capitalizeFirstLetter(cameraConfig.name),
+                  ns: "components/player",
+                }}
+              >
+                streamOffline.desc
+              </Trans>
            </p>
          </div>
        </div>
@@ -416,7 +424,7 @@ export default function LivePlayer({
          <div className="flex h-32 flex-col items-center justify-center rounded-lg p-4 md:h-48 md:w-48">
            <LuVideoOff className="mb-2 size-8 md:size-10" />
            <p className="max-w-32 text-center text-sm md:max-w-40 md:text-base">
-              Camera is disabled
+              {t("cameraDisabled")}
            </p>
          </div>
        </div>
--- a/web/src/components/player/PlayerStats.tsx
+++ b/web/src/components/player/PlayerStats.tsx
@@ -1,5 +1,6 @@
 import { cn } from "@/lib/utils";
 import { PlayerStatsType } from "@/types/live";
+import { useTranslation } from "react-i18next";

 type PlayerStatsProps = {
  stats: PlayerStatsType;
@@ -7,45 +8,46 @@ type PlayerStatsProps = {
 };

 export function PlayerStats({ stats, minimal }: PlayerStatsProps) {
+  const { t } = useTranslation(["components/player"]);
  const fullStatsContent = (
    <>
      <p>
-        <span className="text-white/70">Stream Type:</span>{" "}
+        <span className="text-white/70">{t("stats.streamType")}</span>{" "}
        <span className="text-white">{stats.streamType}</span>
      </p>
      <p>
-        <span className="text-white/70">Bandwidth:</span>{" "}
+        <span className="text-white/70">{t("stats.bandwidth")}</span>{" "}
        <span className="text-white">{stats.bandwidth.toFixed(2)} kbps</span>
      </p>
      {stats.latency != undefined && (
        <p>
-          <span className="text-white/70">Latency:</span>{" "}
+          <span className="text-white/70">{t("stats.latency")}</span>{" "}
          <span
            className={`text-white ${stats.latency > 2 ? "text-danger" : ""}`}
          >
-            {stats.latency.toFixed(2)} seconds
+            {t("stats.latency.value", { secounds: stats.latency.toFixed(2) })}
          </span>
        </p>
      )}
      <p>
-        <span className="text-white/70">Total Frames:</span>{" "}
+        <span className="text-white/70">{t("stats.totalFrames")}</span>{" "}
        <span className="text-white">{stats.totalFrames}</span>
      </p>
      {stats.droppedFrames != undefined && (
        <p>
-          <span className="text-white/70">Dropped Frames:</span>{" "}
+          <span className="text-white/70">{t("stats.droppedFrames")}</span>{" "}
          <span className="text-white">{stats.droppedFrames}</span>
        </p>
      )}
      {stats.decodedFrames != undefined && (
        <p>
-          <span className="text-white/70">Decoded Frames:</span>{" "}
+          <span className="text-white/70">{t("stats.decodedFrames")}</span>{" "}
          <span className="text-white">{stats.decodedFrames}</span>
        </p>
      )}
      {stats.droppedFrameRate != undefined && (
        <p>
-          <span className="text-white/70">Dropped Frame Rate:</span>{" "}
+          <span className="text-white/70">{t("stats.droppedFrameRate")}</span>{" "}
          <span className="text-white">
            {stats.droppedFrameRate.toFixed(2)}%
          </span>
@@ -57,27 +59,35 @@ export function PlayerStats({ stats, minimal }: PlayerStatsProps) {
  const minimalStatsContent = (
    <div className="flex flex-row items-center justify-center gap-4">
      <div className="flex flex-col items-center justify-start gap-1">
-        <span className="text-white/70">Type</span>
+        <span className="text-white/70">{t("stats.streamType.short")}</span>
        <span className="text-white">{stats.streamType}</span>
      </div>
      <div className="flex flex-col items-center gap-1">
-        <span className="text-white/70">Bandwidth</span>{" "}
+        <span className="text-white/70">{t("stats.bandwidth.short")}</span>{" "}
        <span className="text-white">{stats.bandwidth.toFixed(2)} kbps</span>
      </div>
      {stats.latency != undefined && (
        <div className="hidden flex-col items-center gap-1 md:flex">
-          <span className="text-white/70">Latency</span>
+          <span className="text-white/70">{t("stats.latency.short")}</span>
          <span
            className={`text-white ${stats.latency >= 2 ? "text-danger" : ""}`}
          >
-            {stats.latency.toFixed(2)} sec
+            {t("stats.latency.short.value", {
+              secounds: stats.latency.toFixed(2),
+            })}
          </span>
        </div>
      )}
      {stats.droppedFrames != undefined && (
        <div className="flex flex-col items-center justify-end gap-1">
-          <span className="text-white/70">Dropped</span>
-          <span className="text-white">{stats.droppedFrames} frames</span>
+          <span className="text-white/70">
+            {t("stats.droppedFrames.short")}
+          </span>
+          <span className="text-white">
+            {t("stats.droppedFrames.short.value", {
+              droppedFrames: stats.droppedFrames,
+            })}
+          </span>
        </div>
      )}
    </div>
--- a/web/src/components/player/PreviewPlayer.tsx
+++ b/web/src/components/player/PreviewPlayer.tsx
@@ -20,6 +20,7 @@ import {
  getPreviewForTimeRange,
  usePreviewForTimeRange,
 } from "@/hooks/use-camera-previews";
+import { useTranslation } from "react-i18next";

 type PreviewPlayerProps = {
  className?: string;
@@ -42,6 +43,7 @@ export default function PreviewPlayer({
  onControllerReady,
  onClick,
 }: PreviewPlayerProps) {
+  const { t } = useTranslation(["components/player"]);
  const [currentHourFrame, setCurrentHourFrame] = useState<string>();
  const currentPreview = usePreviewForTimeRange(
    cameraPreviews,
@@ -88,7 +90,7 @@ export default function PreviewPlayer({
        className,
      )}
    >
-      No Preview Found
+      {t("noPreviewFound")}
    </div>
  );
 }
@@ -133,6 +135,7 @@ function PreviewVideoPlayer({
  onClick,
  setCurrentHourFrame,
 }: PreviewVideoPlayerProps) {
+  const { t } = useTranslation(["components/player"]);
  const { data: config } = useSWR<FrigateConfig>("config");

  // controlling playback
@@ -324,7 +327,7 @@ function PreviewVideoPlayer({
      </video>
      {cameraPreviews && !currentPreview && (
        <div className="absolute inset-0 flex items-center justify-center rounded-lg bg-background_alt text-primary dark:bg-black md:rounded-2xl">
-          No Preview Found for {camera.replaceAll("_", " ")}
+          {t("noPreviewFoundFor", { camera: camera.replaceAll("_", " ") })}
        </div>
      )}
      {firstLoad && <Skeleton className="absolute aspect-video size-full" />}
@@ -444,6 +447,8 @@ function PreviewFramesPlayer({
  onControllerReady,
  onClick,
 }: PreviewFramesPlayerProps) {
+  const { t } = useTranslation(["components/player"]);
+
  // frames data

  const { data: previewFrames } = useSWR<string[]>(
@@ -544,7 +549,7 @@ function PreviewFramesPlayer({
      />
      {previewFrames?.length === 0 && (
        <div className="-y-translate-1/2 align-center absolute inset-x-0 top-1/2 rounded-lg bg-background_alt text-center text-primary dark:bg-black md:rounded-2xl">
-          No Preview Found for {camera.replaceAll("_", " ")}
+          {t("noPreviewFoundFor", { cameraName: camera.replaceAll("_", " ") })}
        </div>
      )}
      {firstLoad && <Skeleton className="absolute aspect-video size-full" />}
--- a/web/src/components/player/PreviewThumbnailPlayer.tsx
+++ b/web/src/components/player/PreviewThumbnailPlayer.tsx
@@ -21,6 +21,7 @@ import { cn } from "@/lib/utils";
 import { InProgressPreview, VideoPreview } from "../preview/ScrubbablePreview";
 import { Preview } from "@/types/preview";
 import { baseUrl } from "@/api/baseUrl";
+import { useTranslation } from "react-i18next";

 type PreviewPlayerProps = {
  review: ReviewSegment;
@@ -41,6 +42,7 @@ export default function PreviewThumbnailPlayer({
  onClick,
  onTimeUpdate,
 }: PreviewPlayerProps) {
+  const { t } = useTranslation(["components/player"]);
  const apiHost = useApiHost();
  const { data: config } = useSWR<FrigateConfig>("config");
  const [imgRef, imgLoaded, onImgLoad] = useImageLoaded();
@@ -167,7 +169,9 @@ export default function PreviewThumbnailPlayer({

  const formattedDate = useFormattedTimestamp(
    review.start_time,
-    config?.ui.time_format == "24hour" ? "%b %-d, %H:%M" : "%b %-d, %I:%M %p",
+    config?.ui.time_format == "24hour"
+      ? t("time.formattedTimestampExcludeSeconds.24hour", { ns: "common" })
+      : t("time.formattedTimestampExcludeSeconds", { ns: "common" }),
    config?.ui?.timezone,
  );

--- a/web/src/components/player/VideoControls.tsx
+++ b/web/src/components/player/VideoControls.tsx
@@ -33,6 +33,7 @@ import {
 } from "../ui/alert-dialog";
 import { cn } from "@/lib/utils";
 import { FaCompress, FaExpand } from "react-icons/fa";
+import { useTranslation } from "react-i18next";

 type VideoControls = {
  volume?: boolean;
@@ -309,6 +310,8 @@ function FrigatePlusUploadButton({
  onUploadFrame,
  containerRef,
 }: FrigatePlusUploadButtonProps) {
+  const { t } = useTranslation(["components/player"]);
+
  const [videoImg, setVideoImg] = useState<string>();

  return (
@@ -346,14 +349,16 @@ function FrigatePlusUploadButton({
        className="md:max-w-2xl lg:max-w-3xl xl:max-w-4xl"
      >
        <AlertDialogHeader>
-          <AlertDialogTitle>Submit this frame to Frigate+?</AlertDialogTitle>
+          <AlertDialogTitle>{t("submitFrigatePlus.title")}</AlertDialogTitle>
        </AlertDialogHeader>
        <img className="aspect-video w-full object-contain" src={videoImg} />
        <AlertDialogFooter>
          <AlertDialogAction className="bg-selected" onClick={onUploadFrame}>
-            Submit
+            {t("submitFrigatePlus.submit")}
          </AlertDialogAction>
-          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogCancel>
+            {t("button.cancel", { ns: "common" })}
+          </AlertDialogCancel>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
--- a/web/src/components/player/dynamic/DynamicVideoPlayer.tsx
+++ b/web/src/components/player/dynamic/DynamicVideoPlayer.tsx
@@ -12,6 +12,7 @@ import ActivityIndicator from "@/components/indicators/activity-indicator";
 import { VideoResolutionType } from "@/types/live";
 import axios from "axios";
 import { cn } from "@/lib/utils";
+import { useTranslation } from "react-i18next";

 /**
 * Dynamically switches between video playback and scrubbing preview player.
@@ -50,6 +51,7 @@ export default function DynamicVideoPlayer({
  toggleFullscreen,
  containerRef,
 }: DynamicVideoPlayerProps) {
+  const { t } = useTranslation(["components/player"]);
  const apiHost = useApiHost();
  const { data: config } = useSWR<FrigateConfig>("config");

@@ -247,7 +249,7 @@ export default function DynamicVideoPlayer({
      )}
      {!isScrubbing && !isLoading && noRecording && (
        <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
-          No recordings found for this time
+          {t("noRecordingsFoundForThisTime")}
        </div>
      )}
    </>
--- a/web/src/components/settings/CameraStreamingDialog.tsx
+++ b/web/src/components/settings/CameraStreamingDialog.tsx
@@ -31,6 +31,7 @@ import useSWR from "swr";
 import { LuCheck, LuExternalLink, LuInfo, LuX } from "react-icons/lu";
 import { Link } from "react-router-dom";
 import { LiveStreamMetadata } from "@/types/live";
+import { Trans, useTranslation } from "react-i18next";

 type CameraStreamingDialogProps = {
  camera: string;
@@ -49,6 +50,7 @@ export function CameraStreamingDialog({
  setIsDialogOpen,
  onSave,
 }: CameraStreamingDialogProps) {
+  const { t } = useTranslation(["components/camera"]);
  const { data: config } = useSWR<FrigateConfig>("config");

  const [isLoading, setIsLoading] = useState(false);
@@ -167,30 +169,36 @@ export function CameraStreamingDialog({
    <DialogContent className="sm:max-w-[425px]">
      <DialogHeader className="mb-4">
        <DialogTitle className="capitalize">
-          {camera.replaceAll("_", " ")} Streaming Settings
+          {t("group.camera.setting.title", {
+            cameraName: camera.replaceAll("_", " "),
+          })}
        </DialogTitle>
        <DialogDescription>
-          Change the live streaming options for this camera group's dashboard.{" "}
-          <em>These settings are device/browser-specific.</em>
+          <Trans ns="components/camera">group.camera.setting.desc</Trans>
        </DialogDescription>
      </DialogHeader>
      <div className="flex flex-col space-y-8">
        {!isRestreamed && (
          <div className="flex flex-col gap-2">
-            <Label>Stream</Label>
+            <Label></Label>
            <div className="flex flex-row items-center gap-1 text-sm text-muted-foreground">
              <LuX className="size-4 text-danger" />
-              <div>Restreaming is not enabled for this camera.</div>
+              <div>
+                {t("streaming.restreaming.disabled", {
+                  ns: "components/dialog",
+                })}
+              </div>
              <Popover>
                <PopoverTrigger asChild>
                  <div className="cursor-pointer p-0">
                    <LuInfo className="size-4" />
-                    <span className="sr-only">Info</span>
+                    <span className="sr-only">
+                      {t("button.info", { ns: "common" })}
+                    </span>
                  </div>
                </PopoverTrigger>
                <PopoverContent className="w-80 text-xs">
-                  Set up go2rtc for additional live view options and audio for
-                  this camera.
+                  {t("streaming.restreaming.desc", { ns: "components/dialog" })}
                  <div className="mt-2 flex items-center text-primary">
                    <Link
                      to="https://docs.frigate.video/configuration/live"
@@ -198,7 +206,9 @@ export function CameraStreamingDialog({
                      rel="noopener noreferrer"
                      className="inline"
                    >
-                      Read the documentation{" "}
+                      {t("streaming.restreaming.readTheDocumentation", {
+                        ns: "components/dialog",
+                      })}
                      <LuExternalLink className="ml-2 inline-flex size-3" />
                    </Link>
                  </div>
@@ -231,22 +241,23 @@ export function CameraStreamingDialog({
                  {supportsAudioOutput ? (
                    <>
                      <LuCheck className="size-4 text-success" />
-                      <div>Audio is available for this stream</div>
+                      <div>{t("group.camera.setting.audioIsAvailable")}</div>
                    </>
                  ) : (
                    <>
                      <LuX className="size-4 text-danger" />
-                      <div>Audio is unavailable for this stream</div>
+                      <div>{t("group.camera.setting.audioIsUnavailable")}</div>
                      <Popover>
                        <PopoverTrigger asChild>
                          <div className="cursor-pointer p-0">
                            <LuInfo className="size-4" />
-                            <span className="sr-only">Info</span>
+                            <span className="sr-only">
+                              {t("button.info", { ns: "common" })}
+                            </span>
                          </div>
                        </PopoverTrigger>
                        <PopoverContent className="w-80 text-xs">
-                          Audio must be output from your camera and configured
-                          in go2rtc for this stream.
+                          {t("group.camera.setting.audio.desc")}
                          <div className="mt-2 flex items-center text-primary">
                            <Link
                              to="https://docs.frigate.video/configuration/live"
@@ -254,7 +265,7 @@ export function CameraStreamingDialog({
                              rel="noopener noreferrer"
                              className="inline"
                            >
-                              Read the documentation{" "}
+                              {t("group.camera.setting.audio.desc.document")}
                              <LuExternalLink className="ml-2 inline-flex size-3" />
                            </Link>
                          </div>
@@ -268,7 +279,7 @@ export function CameraStreamingDialog({
          )}
        <div className="flex flex-col items-start gap-2">
          <Label htmlFor="streaming-method" className="text-right">
-            Streaming Method
+            {t("group.camera.setting.streamMethod.label")}
          </Label>
          <Select
            value={streamType}
@@ -278,38 +289,44 @@ export function CameraStreamingDialog({
              <SelectValue placeholder="Choose a streaming option" />
            </SelectTrigger>
            <SelectContent>
-              <SelectItem value="no-streaming">No Streaming</SelectItem>
-              <SelectItem value="smart">
-                Smart Streaming (recommended)
+              <SelectItem value="no-streaming">
+                {t("group.camera.setting.streamMethod.method.noStreaming")}
+              </SelectItem>
+              <SelectItem value="smart">
+                {t("group.camera.setting.streamMethod.method.smartStreaming")}
+              </SelectItem>
+              <SelectItem value="continuous">
+                {t(
+                  "group.camera.setting.streamMethod.method.continuousStreaming",
+                )}
              </SelectItem>
-              <SelectItem value="continuous">Continuous Streaming</SelectItem>
            </SelectContent>
          </Select>
          {streamType === "no-streaming" && (
            <p className="text-sm text-muted-foreground">
-              Camera images will only update once per minute and no live
-              streaming will occur.
+              {t("group.camera.setting.streamMethod.method.noStreaming.desc")}
            </p>
          )}
          {streamType === "smart" && (
            <p className="text-sm text-muted-foreground">
-              Smart streaming will update your camera image once per minute when
-              no detectable activity is occurring to conserve bandwidth and
-              resources. When activity is detected, the image seamlessly
-              switches to a live stream.
+              {t(
+                "group.camera.setting.streamMethod.method.smartStreaming.desc",
+              )}
            </p>
          )}
          {streamType === "continuous" && (
            <>
              <p className="text-sm text-muted-foreground">
-                Camera image will always be a live stream when visible on the
-                dashboard, even if no activity is being detected.
+                {t(
+                  "group.camera.setting.streamMethod.method.continuousStreaming.desc",
+                )}
              </p>
              <div className="flex items-center gap-2">
                <IoIosWarning className="mr-2 size-5 text-danger" />
                <div className="max-w-[85%] text-sm">
-                  Continuous streaming may cause high bandwidth usage and
-                  performance issues. Use with caution.
+                  {t(
+                    "group.camera.setting.streamMethod.method.continuousStreaming.desc.warning",
+                  )}
                </div>
              </div>
            </>
@@ -327,14 +344,12 @@ export function CameraStreamingDialog({
              htmlFor="compatibility"
              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
            >
-              Compatibility mode
+              {t("group.camera.setting.compatibilityMode")}
            </Label>
          </div>
          <div className="flex flex-col gap-2 leading-none">
            <p className="text-sm text-muted-foreground">
-              Enable this option only if your camera's live stream is displaying
-              color artifacts and has a diagonal line on the right side of the
-              image.
+              {t("group.camera.setting.compatibilityMode.desc")}
            </p>
          </div>
        </div>
@@ -343,14 +358,14 @@ export function CameraStreamingDialog({
        <div className="flex flex-row gap-2 pt-5">
          <Button
            className="flex flex-1"
-            aria-label="Cancel"
+            aria-label={t("button.cancel", { ns: "common" })}
            onClick={handleCancel}
          >
-            Cancel
+            {t("button.cancel", { ns: "common" })}
          </Button>
          <Button
            variant="select"
-            aria-label="Save"
+            aria-label={t("button.save", { ns: "common" })}
            disabled={isLoading}
            className="flex flex-1"
            onClick={handleSave}
@@ -358,10 +373,10 @@ export function CameraStreamingDialog({
            {isLoading ? (
              <div className="flex flex-row items-center gap-2">
                <ActivityIndicator />
-                <span>Saving...</span>
+                <span>{t("button.saving", { ns: "common" })}</span>
              </div>
            ) : (
-              "Save"
+              t("button.save", { ns: "common" })
            )}
          </Button>
        </div>
--- a/web/src/components/settings/MotionMaskEditPane.tsx
+++ b/web/src/components/settings/MotionMaskEditPane.tsx
@@ -22,6 +22,7 @@ import { Toaster } from "../ui/sonner";
 import ActivityIndicator from "../indicators/activity-indicator";
 import { Link } from "react-router-dom";
 import { LuExternalLink } from "react-icons/lu";
+import { Trans, useTranslation } from "react-i18next";

 type MotionMaskEditPaneProps = {
  polygons?: Polygon[];
@@ -50,6 +51,7 @@ export default function MotionMaskEditPane({
  snapPoints,
  setSnapPoints,
 }: MotionMaskEditPaneProps) {
+  const { t } = useTranslation(["views/settings"]);
  const { data: config, mutate: updateConfig } =
    useSWR<FrigateConfig>("config");

@@ -105,7 +107,7 @@ export default function MotionMaskEditPane({
      polygon: z.object({ name: z.string(), isFinished: z.boolean() }),
    })
    .refine(() => polygon?.isFinished === true, {
-      message: "The polygon drawing must be finished before saving.",
+      message: t("masksAndZones.polygonDrawing.error.mustBeFinished"),
      path: ["polygon.isFinished"],
    });

@@ -163,16 +165,26 @@ export default function MotionMaskEditPane({
      .then((res) => {
        if (res.status === 200) {
          toast.success(
-            `${polygon.name || "Motion Mask"} has been saved. Restart Frigate to apply changes.`,
+            polygon.name
+              ? t("masksAndZones.motionMasks.toast.success", {
+                  polygonName: polygon.name,
+                })
+              : t("masksAndZones.motionMasks.toast.success.noName"),
            {
              position: "top-center",
            },
          );
          updateConfig();
        } else {
-          toast.error(`Failed to save config changes: ${res.statusText}`, {
-            position: "top-center",
-          });
+          toast.error(
+            t("toast.save.error", {
+              errorMessage: res.statusText,
+              ns: "common",
+            }),
+            {
+              position: "top-center",
+            },
+          );
        }
      })
      .catch((error) => {
@@ -180,7 +192,7 @@ export default function MotionMaskEditPane({
          error.response?.data?.message ||
          error.response?.data?.detail ||
          "Unknown error";
-        toast.error(`Failed to save config changes: ${errorMessage}`, {
+        toast.error(t("toast.save.error", { errorMessage, ns: "common" }), {
          position: "top-center",
        });
      })
@@ -194,6 +206,7 @@ export default function MotionMaskEditPane({
    scaledHeight,
    setIsLoading,
    cameraConfig,
+    t,
  ]);

  function onSubmit(values: z.infer<typeof formSchema>) {
@@ -209,8 +222,8 @@ export default function MotionMaskEditPane({
  }

  useEffect(() => {
-    document.title = "Edit Motion Mask - Frigate";
-  }, []);
+    document.title = t("masksAndZones.motionMasks.documentTitle");
+  }, [t]);

  if (!polygon) {
    return;
@@ -220,14 +233,13 @@ export default function MotionMaskEditPane({
    <>
      <Toaster position="top-center" closeButton={true} />
      <Heading as="h3" className="my-2">
-        {polygon.name.length ? "Edit" : "New"} Motion Mask
+        {polygon.name.length
+          ? t("masksAndZones.motionMasks.edit")
+          : t("masksAndZones.motionMasks.add")}
      </Heading>
      <div className="my-3 space-y-3 text-sm text-muted-foreground">
        <p>
-          Motion masks are used to prevent unwanted types of motion from
-          triggering detection (example: tree branches, camera timestamps).
-          Motion masks should be used <em>very sparingly</em>, over-masking will
-          make it more difficult for objects to be tracked.
+          <Trans ns="views/settings">masksAndZones.motionMasks.context</Trans>
        </p>

        <div className="flex items-center text-primary">
@@ -237,7 +249,7 @@ export default function MotionMaskEditPane({
            rel="noopener noreferrer"
            className="inline"
          >
-            Read the documentation{" "}
+            {t("masksAndZones.motionMasks.context.documentation")}{" "}
            <LuExternalLink className="ml-2 inline-flex size-3" />
          </Link>
        </div>
@@ -246,11 +258,9 @@ export default function MotionMaskEditPane({
      {polygons && activePolygonIndex !== undefined && (
        <div className="my-2 flex w-full flex-row justify-between text-sm">
          <div className="my-1 inline-flex">
-            {polygons[activePolygonIndex].points.length}{" "}
-            {polygons[activePolygonIndex].points.length > 1 ||
-            polygons[activePolygonIndex].points.length == 0
-              ? "points"
-              : "point"}
+            {t("masksAndZones.motionMasks.point", {
+              count: polygons[activePolygonIndex].points.length,
+            })}
            {polygons[activePolygonIndex].isFinished && (
              <FaCheckCircle className="ml-2 size-5" />
            )}
@@ -265,7 +275,7 @@ export default function MotionMaskEditPane({
        </div>
      )}
      <div className="mb-3 text-sm text-muted-foreground">
-        Click to draw a polygon on the image.
+        {t("masksAndZones.motionMasks.clickDrawPolygon")}
      </div>

      <Separator className="my-3 bg-secondary" />
@@ -273,19 +283,19 @@ export default function MotionMaskEditPane({
      {polygonArea && polygonArea >= 0.35 && (
        <>
          <div className="mb-3 text-sm text-danger">
-            The motion mask is covering {Math.round(polygonArea * 100)}% of the
-            camera frame. Large motion masks are not recommended.
+            {t("masksAndZones.motionMasks.polygonAreaTooLarge", {
+              polygonArea: Math.round(polygonArea * 100),
+            })}
          </div>
          <div className="mb-3 text-sm text-primary">
-            Motion masks do not prevent objects from being detected. You should
-            use a required zone instead.
+            {t("masksAndZones.motionMasks.polygonAreaTooLarge.tips")}
            <Link
              to="https://github.com/blakeblackshear/frigate/discussions/13040"
              target="_blank"
              rel="noopener noreferrer"
              className="my-3 block"
            >
-              Read the documentation{" "}
+              {t("masksAndZones.motionMasks.polygonAreaTooLarge.documentation")}{" "}
              <LuExternalLink className="ml-2 inline-flex size-3" />
            </Link>
          </div>
@@ -319,14 +329,14 @@ export default function MotionMaskEditPane({
            <div className="flex flex-row gap-2 pt-5">
              <Button
                className="flex flex-1"
-                aria-label="Cancel"
+                aria-label={t("button.cancel", { ns: "common" })}
                onClick={onCancel}
              >
-                Cancel
+                {t("button.cancel", { ns: "common" })}
              </Button>
              <Button
                variant="select"
-                aria-label="Save"
+                aria-label={t("button.save", { ns: "common" })}
                disabled={isLoading}
                className="flex flex-1"
                type="submit"
@@ -334,10 +344,10 @@ export default function MotionMaskEditPane({
                {isLoading ? (
                  <div className="flex flex-row items-center gap-2">
                    <ActivityIndicator />
-                    <span>Saving...</span>
+                    <span>{t("button.saving", { ns: "common" })}</span>
                  </div>
                ) : (
-                  "Save"
+                  t("button.save", { ns: "common" })
                )}
              </Button>
            </div>
--- a/web/src/components/settings/ObjectMaskEditPane.tsx
+++ b/web/src/components/settings/ObjectMaskEditPane.tsx
@@ -38,6 +38,7 @@ import { toast } from "sonner";
 import { Toaster } from "../ui/sonner";
 import ActivityIndicator from "../indicators/activity-indicator";
 import { getAttributeLabels } from "@/utils/iconUtil";
+import { useTranslation } from "react-i18next";

 type ObjectMaskEditPaneProps = {
  polygons?: Polygon[];
@@ -66,6 +67,7 @@ export default function ObjectMaskEditPane({
  snapPoints,
  setSnapPoints,
 }: ObjectMaskEditPaneProps) {
+  const { t } = useTranslation(["views/settings"]);
  const { data: config, mutate: updateConfig } =
    useSWR<FrigateConfig>("config");

@@ -107,7 +109,7 @@ export default function ObjectMaskEditPane({
      polygon: z.object({ isFinished: z.boolean(), name: z.string() }),
    })
    .refine(() => polygon?.isFinished === true, {
-      message: "The polygon drawing must be finished before saving.",
+      message: t("masksAndZones.polygonDrawing.error.mustBeFinished"),
      path: ["polygon.isFinished"],
    });

@@ -195,16 +197,26 @@ export default function ObjectMaskEditPane({
        .then((res) => {
          if (res.status === 200) {
            toast.success(
-              `${polygon.name || "Object Mask"} has been saved. Restart Frigate to apply changes.`,
+              polygon.name
+                ? t("masksAndZones.objectMasks.toast.success", {
+                    polygonName: polygon.name,
+                  })
+                : t("masksAndZones.objectMasks.toast.success.noName"),
              {
                position: "top-center",
              },
            );
            updateConfig();
          } else {
-            toast.error(`Failed to save config changes: ${res.statusText}`, {
-              position: "top-center",
-            });
+            toast.error(
+              t("toast.save.error", {
+                errorMessage: res.statusText,
+                ns: "common",
+              }),
+              {
+                position: "top-center",
+              },
+            );
          }
        })
        .catch((error) => {
@@ -212,9 +224,15 @@ export default function ObjectMaskEditPane({
            error.response?.data?.message ||
            error.response?.data?.detail ||
            "Unknown error";
-          toast.error(`Failed to save config changes: ${errorMessage}`, {
-            position: "top-center",
-          });
+          toast.error(
+            t("toast.save.error", {
+              errorMessage,
+              ns: "common",
+            }),
+            {
+              position: "top-center",
+            },
+          );
        })
        .finally(() => {
          setIsLoading(false);
@@ -227,6 +245,7 @@ export default function ObjectMaskEditPane({
      scaledHeight,
      setIsLoading,
      cameraConfig,
+      t,
    ],
  );

@@ -243,8 +262,8 @@ export default function ObjectMaskEditPane({
  }

  useEffect(() => {
-    document.title = "Edit Object Mask - Frigate";
-  }, []);
+    document.title = t("masksAndZones.objectMasks.documentTitle");
+  }, [t]);

  if (!polygon) {
    return;
@@ -254,23 +273,20 @@ export default function ObjectMaskEditPane({
    <>
      <Toaster position="top-center" closeButton={true} />
      <Heading as="h3" className="my-2">
-        {polygon.name.length ? "Edit" : "New"} Object Mask
+        {polygon.name.length
+          ? t("masksAndZones.objectMasks.edit")
+          : t("masksAndZones.objectMasks.add")}
      </Heading>
      <div className="my-2 text-sm text-muted-foreground">
-        <p>
-          Object filter masks are used to filter out false positives for a given
-          object type based on location.
-        </p>
+        <p>{t("masksAndZones.objectMasks.context")}</p>
      </div>
      <Separator className="my-3 bg-secondary" />
      {polygons && activePolygonIndex !== undefined && (
        <div className="my-2 flex w-full flex-row justify-between text-sm">
          <div className="my-1 inline-flex">
-            {polygons[activePolygonIndex].points.length}{" "}
-            {polygons[activePolygonIndex].points.length > 1 ||
-            polygons[activePolygonIndex].points.length == 0
-              ? "points"
-              : "point"}
+            {t("masksAndZones.objectMasks.point", {
+              count: polygons[activePolygonIndex].points.length,
+            })}
            {polygons[activePolygonIndex].isFinished && (
              <FaCheckCircle className="ml-2 size-5" />
            )}
@@ -285,7 +301,7 @@ export default function ObjectMaskEditPane({
        </div>
      )}
      <div className="mb-3 text-sm text-muted-foreground">
-        Click to draw a polygon on the image.
+        {t("masksAndZones.objectMasks.clickDrawPolygon")}
      </div>

      <Separator className="my-3 bg-secondary" />
@@ -310,7 +326,9 @@ export default function ObjectMaskEditPane({
              name="objects"
              render={({ field }) => (
                <FormItem>
-                  <FormLabel>Objects</FormLabel>
+                  <FormLabel>
+                    {t("masksAndZones.objectMasks.objects")}
+                  </FormLabel>
                  <Select
                    onValueChange={field.onChange}
                    defaultValue={field.value}
@@ -326,7 +344,7 @@ export default function ObjectMaskEditPane({
                    </SelectContent>
                  </Select>
                  <FormDescription>
-                    The object type that that applies to this object mask.
+                    {t("masksAndZones.objectMasks.objects.desc")}
                  </FormDescription>
                  <FormMessage />
                </FormItem>
@@ -346,25 +364,25 @@ export default function ObjectMaskEditPane({
            <div className="flex flex-row gap-2 pt-5">
              <Button
                className="flex flex-1"
-                aria-label="Cancel"
+                aria-label={t("button.cancel", { ns: "common" })}
                onClick={onCancel}
              >
-                Cancel
+                {t("button.cancel", { ns: "common" })}
              </Button>
              <Button
                variant="select"
                disabled={isLoading}
                className="flex flex-1"
-                aria-label="Save"
+                aria-label={t("button.save", { ns: "common" })}
                type="submit"
              >
                {isLoading ? (
                  <div className="flex flex-row items-center gap-2">
                    <ActivityIndicator />
-                    <span>Saving...</span>
+                    <span>{t("button.saving", { ns: "common" })}</span>
                  </div>
                ) : (
-                  "Save"
+                  t("button.save", { ns: "common" })
                )}
              </Button>
            </div>
@@ -380,6 +398,7 @@ type ZoneObjectSelectorProps = {
 };

 export function ZoneObjectSelector({ camera }: ZoneObjectSelectorProps) {
+  const { t } = useTranslation(["views/settings"]);
  const { data: config } = useSWR<FrigateConfig>("config");

  const attributeLabels = useMemo(() => {
@@ -423,11 +442,13 @@ export function ZoneObjectSelector({ camera }: ZoneObjectSelectorProps) {
  return (
    <>
      <SelectGroup>
-        <SelectItem value="all_labels">All object types</SelectItem>
+        <SelectItem value="all_labels">
+          {t("masksAndZones.objectMasks.objects.allObjectTypes")}
+        </SelectItem>
        <SelectSeparator className="bg-secondary" />
        {allLabels.map((item) => (
          <SelectItem key={item} value={item}>
-            {item.replaceAll("_", " ").charAt(0).toUpperCase() + item.slice(1)}
+            {t(item, { ns: "objects" })}
          </SelectItem>
        ))}
      </SelectGroup>
--- a/Show More
+++ b/Show More