diff --git a/web/src/components/ButtonsTabbed.jsx b/web/src/components/ButtonsTabbed.jsx
index b7318d6bf..e72d18a5b 100644
--- a/web/src/components/ButtonsTabbed.jsx
+++ b/web/src/components/ButtonsTabbed.jsx
@@ -1,5 +1,6 @@
 import { h } from 'preact';
 import { useCallback, useState } from 'preact/hooks';
+import { useTranslation } from 'react-i18next';
 
 export default function ButtonsTabbed({
   viewModes = [''],
@@ -9,6 +10,7 @@ export default function ButtonsTabbed({
   className = 'text-gray-600 py-0 px-4 block hover:text-gray-500',
   selectedClassName = `${className} focus:outline-none border-b-2 font-medium border-gray-500`,
 }) {
+  const { t } = useTranslation();
   const [selected, setSelected] = useState(0);
   const captitalize = (str) => {
     return `${str.charAt(0).toUpperCase()}${str.slice(1)}`;
@@ -16,9 +18,9 @@ export default function ButtonsTabbed({
 
   const getHeader = useCallback(
     (i) => {
-      return headers.length === viewModes.length ? headers[i] : captitalize(viewModes[i]);
+      return headers.length === viewModes.length ? headers[i] : t(viewModes[i]);
     },
-    [headers, viewModes]
+    [headers, viewModes, t]
   );
 
   const handleClick = useCallback(