diff --git a/web/src/AppBar.jsx b/web/src/AppBar.jsx
index 80bc00756..09fc2e9d8 100644
--- a/web/src/AppBar.jsx
+++ b/web/src/AppBar.jsx
@@ -10,10 +10,8 @@ import Prompt from './components/Prompt';
 import { useDarkMode } from './context';
 import { useCallback, useRef, useState } from 'preact/hooks';
 import { useRestart } from './api/mqtt';
-import { useTranslation } from 'react-i18next';
 
 export default function AppBar() {
-  const { t } = useTranslation();
   const [showMoreMenu, setShowMoreMenu] = useState(false);
   const [showDialog, setShowDialog] = useState(false);
   const [showDialogWait, setShowDialogWait] = useState(false);
@@ -58,29 +56,29 @@ export default function AppBar() {
       <BaseAppBar title={LinkedLogo} overflowRef={moreRef} onOverflowClick={handleShowMenu} />
       {showMoreMenu ? (
         <Menu onDismiss={handleDismissMoreMenu} relativeTo={moreRef}>
-          <MenuItem icon={AutoAwesomeIcon} label={t('auto_dark_mode')} value="media" onSelect={handleSelectDarkMode} />
+          <MenuItem icon={AutoAwesomeIcon} label="Auto dark mode" value="media" onSelect={handleSelectDarkMode} />
           <MenuSeparator />
-          <MenuItem icon={LightModeIcon} label={t('light')} value="light" onSelect={handleSelectDarkMode} />
-          <MenuItem icon={DarkModeIcon} label={t('dark')} value="dark" onSelect={handleSelectDarkMode} />
+          <MenuItem icon={LightModeIcon} label="Light" value="light" onSelect={handleSelectDarkMode} />
+          <MenuItem icon={DarkModeIcon} label="Dark" value="dark" onSelect={handleSelectDarkMode} />
           <MenuSeparator />
-          <MenuItem icon={FrigateRestartIcon} label={t('restart_frigate')} onSelect={handleRestart} />
+          <MenuItem icon={FrigateRestartIcon} label="Restart Frigate" onSelect={handleRestart} />
         </Menu>
       ) : null}
       {showDialog ? (
         <Prompt
           onDismiss={handleDismissRestartDialog}
-          title={t('restart_frigate')}
-          text={t('are_you_sure')}
+          title="Restart Frigate"
+          text="Are you sure?"
           actions={[
-            { text: `${t('yes')}`, color: 'red', onClick: handleClickRestartDialog },
-            { text: `${t('cancel')}`, onClick: handleDismissRestartDialog },
+            { text: 'Yes', color: 'red', onClick: handleClickRestartDialog },
+            { text: 'Cancel', onClick: handleDismissRestartDialog },
           ]}
         />
       ) : null}
       {showDialogWait ? (
         <Prompt
-          title={t('restart_in_progress')}
-          text={t('wait_for_restart')}
+          title="Restart in progress"
+          text="Please wait a few seconds for the restart to complete before reloading the page."
         />
       ) : null}
     </Fragment>
diff --git a/web/src/routes/Recording.jsx b/web/src/routes/Recording.jsx
index 3c8607833..a35531fe9 100644
--- a/web/src/routes/Recording.jsx
+++ b/web/src/routes/Recording.jsx
@@ -7,8 +7,10 @@ import RecordingPlaylist from '../components/RecordingPlaylist';
 import VideoPlayer from '../components/VideoPlayer';
 import { useApiHost } from '../api';
 import useSWR from 'swr';
+import { useTranslation } from 'react-i18next';
 
 export default function Recording({ camera, date, hour = '00', minute = '00', second = '00' }) {
+  const { t } = useTranslation();
   const currentDate = useMemo(
     () => (date ? parseISO(`${date}T${hour || '00'}:${minute || '00'}:${second || '00'}`) : new Date()),
     [date, hour, minute, second]