diff --git a/src/client/index.html b/src/client/index.html
index 4cbf00259..831c4201c 100644
--- a/src/client/index.html
+++ b/src/client/index.html
@@ -8,7 +8,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
     <meta name="theme-color" content="#000000" />
     <link rel="shortcut icon" href="/favicon.ico" />
-    <link href="/fonts/fonts.css" rel="stylesheet" />
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet" />
 
     <style>
diff --git a/src/client/public/fonts/OFL.txt b/src/client/public/fonts/OFL.txt
deleted file mode 100644
index 98383e3d8..000000000
--- a/src/client/public/fonts/OFL.txt
+++ /dev/null
@@ -1,93 +0,0 @@
-Copyright (c) 2010-2014 by tyPoland Lukasz Dziedzic (team@latofonts.com) with Reserved Font Name "Lato"
-
-This Font Software is licensed under the SIL Open Font License, Version 1.1.
-This license is copied below, and is also available with a FAQ at:
-http://scripts.sil.org/OFL
-
-
------------------------------------------------------------
-SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
------------------------------------------------------------
-
-PREAMBLE
-The goals of the Open Font License (OFL) are to stimulate worldwide
-development of collaborative font projects, to support the font creation
-efforts of academic and linguistic communities, and to provide a free and
-open framework in which fonts may be shared and improved in partnership
-with others.
-
-The OFL allows the licensed fonts to be used, studied, modified and
-redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded, 
-redistributed and/or sold with any software provided that any reserved
-names are not used by derivative works. The fonts and derivatives,
-however, cannot be released under any other type of license. The
-requirement for fonts to remain under this license does not apply
-to any document created using the fonts or their derivatives.
-
-DEFINITIONS
-"Font Software" refers to the set of files released by the Copyright
-Holder(s) under this license and clearly marked as such. This may
-include source files, build scripts and documentation.
-
-"Reserved Font Name" refers to any names specified as such after the
-copyright statement(s).
-
-"Original Version" refers to the collection of Font Software components as
-distributed by the Copyright Holder(s).
-
-"Modified Version" refers to any derivative made by adding to, deleting,
-or substituting -- in part or in whole -- any of the components of the
-Original Version, by changing formats or by porting the Font Software to a
-new environment.
-
-"Author" refers to any designer, engineer, programmer, technical
-writer or other person who contributed to the Font Software.
-
-PERMISSION & CONDITIONS
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of the Font Software, to use, study, copy, merge, embed, modify,
-redistribute, and sell modified and unmodified copies of the Font
-Software, subject to the following conditions:
-
-1) Neither the Font Software nor any of its individual components,
-in Original or Modified Versions, may be sold by itself.
-
-2) Original or Modified Versions of the Font Software may be bundled,
-redistributed and/or sold with any software, provided that each copy
-contains the above copyright notice and this license. These can be
-included either as stand-alone text files, human-readable headers or
-in the appropriate machine-readable metadata fields within text or
-binary files as long as those fields can be easily viewed by the user.
-
-3) No Modified Version of the Font Software may use the Reserved Font
-Name(s) unless explicit written permission is granted by the corresponding
-Copyright Holder. This restriction only applies to the primary font name as
-presented to the users.
-
-4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
-Software shall not be used to promote, endorse or advertise any
-Modified Version, except to acknowledge the contribution(s) of the
-Copyright Holder(s) and the Author(s) or with their explicit written
-permission.
-
-5) The Font Software, modified or unmodified, in part or in whole,
-must be distributed entirely under this license, and must not be
-distributed under any other license. The requirement for fonts to
-remain under this license does not apply to any document created
-using the Font Software.
-
-TERMINATION
-This license becomes null and void if any of the above conditions are
-not met.
-
-DISCLAIMER
-THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
-OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
-COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
-DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
-OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/src/client/public/fonts/fonts.css b/src/client/public/fonts/fonts.css
deleted file mode 100644
index d65061947..000000000
--- a/src/client/public/fonts/fonts.css
+++ /dev/null
@@ -1,40 +0,0 @@
-/* lato-regular - latin */
-@font-face {
-    font-family: 'Lato';
-    font-style: normal;
-    font-weight: 400;
-    src: local('Lato Regular'), local('Lato-Regular'),
-         url('./lato-v17-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-         url('./lato-v17-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-  }
-  
-  /* lato-italic - latin */
-  @font-face {
-    font-family: 'Lato';
-    font-style: italic;
-    font-weight: 400;
-    src: local('Lato Italic'), local('Lato-Italic'),
-         url('./lato-v17-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-         url('./lato-v17-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-  }
-  
-  /* lato-700italic - latin */
-  @font-face {
-    font-family: 'Lato';
-    font-style: italic;
-    font-weight: 700;
-    src: local('Lato Bold Italic'), local('Lato-BoldItalic'),
-         url('./lato-v17-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-         url('./lato-v17-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-  }
-  
-  /* lato-700 - latin */
-  @font-face {
-    font-family: 'Lato';
-    font-style: normal;
-    font-weight: 700;
-    src: local('Lato Bold'), local('Lato-Bold'),
-         url('./lato-v17-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-         url('./lato-v17-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-  }
-  
\ No newline at end of file
diff --git a/src/client/public/fonts/lato-v17-latin-700.woff b/src/client/public/fonts/lato-v17-latin-700.woff
deleted file mode 100644
index abf0196d8..000000000
Binary files a/src/client/public/fonts/lato-v17-latin-700.woff and /dev/null differ
diff --git a/src/client/public/fonts/lato-v17-latin-700.woff2 b/src/client/public/fonts/lato-v17-latin-700.woff2
deleted file mode 100644
index f8c37ecde..000000000
Binary files a/src/client/public/fonts/lato-v17-latin-700.woff2 and /dev/null differ
diff --git a/src/client/public/fonts/lato-v17-latin-700italic.woff b/src/client/public/fonts/lato-v17-latin-700italic.woff
deleted file mode 100644
index cdf0d86ae..000000000
Binary files a/src/client/public/fonts/lato-v17-latin-700italic.woff and /dev/null differ
diff --git a/src/client/public/fonts/lato-v17-latin-700italic.woff2 b/src/client/public/fonts/lato-v17-latin-700italic.woff2
deleted file mode 100644
index 5b3f882d8..000000000
Binary files a/src/client/public/fonts/lato-v17-latin-700italic.woff2 and /dev/null differ
diff --git a/src/client/public/fonts/lato-v17-latin-italic.woff b/src/client/public/fonts/lato-v17-latin-italic.woff
deleted file mode 100644
index 95251da09..000000000
Binary files a/src/client/public/fonts/lato-v17-latin-italic.woff and /dev/null differ
diff --git a/src/client/public/fonts/lato-v17-latin-italic.woff2 b/src/client/public/fonts/lato-v17-latin-italic.woff2
deleted file mode 100644
index 3246c1286..000000000
Binary files a/src/client/public/fonts/lato-v17-latin-italic.woff2 and /dev/null differ
diff --git a/src/client/public/fonts/lato-v17-latin-regular.woff b/src/client/public/fonts/lato-v17-latin-regular.woff
deleted file mode 100644
index 189a0feb5..000000000
Binary files a/src/client/public/fonts/lato-v17-latin-regular.woff and /dev/null differ
diff --git a/src/client/public/fonts/lato-v17-latin-regular.woff2 b/src/client/public/fonts/lato-v17-latin-regular.woff2
deleted file mode 100644
index 6904b6649..000000000
Binary files a/src/client/public/fonts/lato-v17-latin-regular.woff2 and /dev/null differ
diff --git a/src/client/src/components/buttons/buttons.tsx b/src/client/src/components/buttons/buttons.tsx
index 6e88326c1..4677786e1 100644
--- a/src/client/src/components/buttons/buttons.tsx
+++ b/src/client/src/components/buttons/buttons.tsx
@@ -1,5 +1,4 @@
 import { forwardRef } from "react";
-import TranslationText from "../legacyComponents/translationText";
 import { Button } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
 import EditIcon from "../../assets/icons/edit.svg?react";
@@ -9,11 +8,14 @@ import SaveIcon from "@mui/icons-material/Save";
 import TrashIcon from "../../assets/icons/trash.svg?react";
 import CheckmarkIcon from "../../assets/icons/checkmark.svg?react";
 import { ButtonProps } from "./buttonsInterface";
+import { capitalizeFirstLetter } from "../../utils.ts";
+import { useTranslation } from "react-i18next";
 
 export const BdmsBaseButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+  const { t } = useTranslation();
   return (
     <Button ref={ref} {...props} data-cy={props.label?.toLowerCase() + "-button"} startIcon={props.icon}>
-      <TranslationText firstUpperCase id={props.label} />
+      {props.label && capitalizeFirstLetter(t(props.label))}
     </Button>
   );
 });
diff --git a/src/client/src/components/legacyComponents/domain/dropdown/domainDropdown.jsx b/src/client/src/components/legacyComponents/domain/dropdown/domainDropdown.jsx
index efa44b5e0..6ef1ef993 100644
--- a/src/client/src/components/legacyComponents/domain/dropdown/domainDropdown.jsx
+++ b/src/client/src/components/legacyComponents/domain/dropdown/domainDropdown.jsx
@@ -7,7 +7,6 @@ import _ from "lodash";
 import { loadDomains } from "../../../../api-lib/index.js";
 
 import { Form, Header } from "semantic-ui-react";
-import TranslationText from "../../translationText.jsx";
 
 class DomainDropdown extends React.Component {
   constructor(props) {
@@ -115,7 +114,7 @@ class DomainDropdown extends React.Component {
   }
 
   render() {
-    const { domains, schema, search, multiple, additionalValues, readOnly } = this.props,
+    const { domains, schema, search, multiple, additionalValues, readOnly, t } = this.props,
       { selected } = this.state;
     if (!Object.prototype.hasOwnProperty.call(domains.data, schema)) {
       if (domains.isFetching === true) {
@@ -134,7 +133,7 @@ class DomainDropdown extends React.Component {
             style={{
               color: "red",
             }}>
-            <TranslationText id="reset" />
+            {t("reset")}
           </span>
         ),
       });
diff --git a/src/client/src/components/legacyComponents/domain/tree/domainTree.jsx b/src/client/src/components/legacyComponents/domain/tree/domainTree.jsx
index 01bb50345..33ba0e261 100644
--- a/src/client/src/components/legacyComponents/domain/tree/domainTree.jsx
+++ b/src/client/src/components/legacyComponents/domain/tree/domainTree.jsx
@@ -5,7 +5,6 @@ import { withTranslation } from "react-i18next";
 import _ from "lodash";
 import { loadDomains } from "../../../../api-lib/index.js";
 import { Dropdown, Form, Header, Icon, Input, List, Modal } from "semantic-ui-react";
-import TranslationText from "../../translationText.jsx";
 import DomainText from "../domainText.jsx";
 
 class DomainTree extends React.Component {
@@ -157,7 +156,7 @@ class DomainTree extends React.Component {
   }
 
   render() {
-    const { domains, schema, isEditable } = this.props;
+    const { domains, schema, isEditable, t } = this.props;
     if (!Object.prototype.hasOwnProperty.call(domains.data, schema)) {
       if (domains.isFetching === true) {
         return "loading translations";
@@ -173,7 +172,7 @@ class DomainTree extends React.Component {
             style={{
               color: "red",
             }}>
-            <TranslationText id="reset" />
+            {t("reset")}
           </span>
         ),
       },
@@ -215,7 +214,7 @@ class DomainTree extends React.Component {
                     style={{
                       color: "red",
                     }}>
-                    <TranslationText id="reset" />
+                    {t("reset")}
                   </span>
                 ),
               },
@@ -367,9 +366,7 @@ class DomainTree extends React.Component {
                     flex: "1 1 100%",
                   }}>
                   <Form.Field>
-                    <label>
-                      <TranslationText id="filterByHierarchicalUnits" />
-                    </label>
+                    <label>{t("filterByHierarchicalUnits")}</label>
                   </Form.Field>
                 </Form>
                 {this.state.levels.map((lev, idx) => {
@@ -465,9 +462,7 @@ class DomainTree extends React.Component {
                     flex: "1 1 100%",
                   }}>
                   <Form.Field>
-                    <label>
-                      <TranslationText id="filterByName" />
-                    </label>
+                    <label>{t("filterByName")}</label>
                     <Input
                       fluid
                       icon="search"
diff --git a/src/client/src/components/legacyComponents/multiple/multipleForm.jsx b/src/client/src/components/legacyComponents/multiple/multipleForm.jsx
index 1d5bbea38..ad93cd75c 100644
--- a/src/client/src/components/legacyComponents/multiple/multipleForm.jsx
+++ b/src/client/src/components/legacyComponents/multiple/multipleForm.jsx
@@ -339,7 +339,7 @@ class MultipleForm extends React.Component {
               <Form.Field key={"workgroup"}>
                 <label>{t("workgroup")}</label>
                 {workgroups.length === 0 ? (
-                  <TranslationText id="disabled" />
+                  t("disabled")
                 ) : workgroups.length === 1 ? (
                   workgroups[0].workgroup
                 ) : (
diff --git a/src/client/src/index.css b/src/client/src/index.css
index 006a22b8d..251b756d0 100644
--- a/src/client/src/index.css
+++ b/src/client/src/index.css
@@ -1,8 +1,4 @@
-/* body {
-  margin: 0;
-  padding: 0;
-  font-family: sans-serif;
-} */
+
 .ol-popup {
   position: absolute;
   background-color: white;
@@ -138,7 +134,7 @@
   cursor: default !important;
 }
 
-.selectable:hover { 
+.selectable:hover {
   background-color: rgb(233, 233, 233);
 }
 
@@ -149,4 +145,4 @@
 
 .Mui-checked {
   color: black !important;
-}
\ No newline at end of file
+}
diff --git a/src/client/src/pages/detail/attachments/table/filesTableComponent.jsx b/src/client/src/pages/detail/attachments/table/filesTableComponent.jsx
index d03ca1f3e..0a697f67e 100644
--- a/src/client/src/pages/detail/attachments/table/filesTableComponent.jsx
+++ b/src/client/src/pages/detail/attachments/table/filesTableComponent.jsx
@@ -3,10 +3,10 @@ import { withTranslation } from "react-i18next";
 import { Button, Checkbox, Icon, Table, TextArea } from "semantic-ui-react";
 import DateText from "../../../../components/legacyComponents/dateText.js";
 import DownloadLink from "../downloadlink.jsx";
-import TranslationText from "../../../../components/legacyComponents/translationText.jsx";
 import { downloadBoreholeAttachment } from "../../../../api/fetchApiV2.js";
 
 const FilesTableComponent = props => {
+  const { t } = props;
   return (
     <div
       className="flex_col flex_fill"
@@ -16,23 +16,11 @@ const FilesTableComponent = props => {
       <Table singleLine>
         <Table.Header>
           <Table.Row>
-            {props.editor === true && (
-              <Table.HeaderCell>
-                <TranslationText id="public" />
-              </Table.HeaderCell>
-            )}
-            <Table.HeaderCell>
-              <TranslationText id="name" />
-            </Table.HeaderCell>
-            <Table.HeaderCell>
-              <TranslationText id="description" />
-            </Table.HeaderCell>
-            <Table.HeaderCell>
-              <TranslationText id="type" />
-            </Table.HeaderCell>
-            <Table.HeaderCell>
-              <TranslationText id="uploaded" />
-            </Table.HeaderCell>
+            {props.editor === true && <Table.HeaderCell>{t("public")}</Table.HeaderCell>}
+            <Table.HeaderCell>{t("name")}</Table.HeaderCell>
+            <Table.HeaderCell>{t("description")}</Table.HeaderCell>
+            <Table.HeaderCell>{t("type")}</Table.HeaderCell>
+            <Table.HeaderCell>{t("uploaded")}</Table.HeaderCell>
             {props.unlocked === true ? <Table.HeaderCell /> : null}
           </Table.Row>
         </Table.Header>
diff --git a/src/client/src/pages/detail/detailPageContent.jsx b/src/client/src/pages/detail/detailPageContent.jsx
index 24880e321..1dc98d9a4 100644
--- a/src/client/src/pages/detail/detailPageContent.jsx
+++ b/src/client/src/pages/detail/detailPageContent.jsx
@@ -6,7 +6,6 @@ import _ from "lodash";
 import { Redirect, Route, Switch, withRouter } from "react-router-dom";
 import { loadBorehole, patchBorehole, updateBorehole } from "../../api-lib";
 import EditorBoreholeFilesTable from "./attachments/table/editorBoreholeFilesTable.tsx";
-import TranslationText from "../../components/legacyComponents/translationText.jsx";
 import { Dimmer, Loader } from "semantic-ui-react";
 import Lithology from "./form/stratigraphy/lithology";
 import IdentifierSegment from "./form/location/indentifierSegment.jsx";
@@ -273,9 +272,9 @@ class DetailPageContent extends React.Component {
               <Loader>
                 {(() => {
                   if (borehole.isFetching || this.state.loadingFetch === true) {
-                    return <TranslationText id="layer_loading_fetch" />;
+                    return t("layer_loading_fetch");
                   } else if (this.state.creationFetch === true) {
-                    return <TranslationText id="layer_creation_fetch" />;
+                    return t("layer_creation_fetch");
                   }
                 })()}
               </Loader>
diff --git a/src/client/src/pages/detail/detailSideNav.jsx b/src/client/src/pages/detail/detailSideNav.jsx
index e3f6b5a42..780cee3c4 100644
--- a/src/client/src/pages/detail/detailSideNav.jsx
+++ b/src/client/src/pages/detail/detailSideNav.jsx
@@ -1,14 +1,14 @@
 import { useEffect, useState } from "react";
 import { connect } from "react-redux";
-import { withTranslation } from "react-i18next";
+import { useTranslation } from "react-i18next";
 import { useLocation, withRouter } from "react-router-dom";
 import { List } from "semantic-ui-react";
 import ListItem from "@mui/material/ListItem";
 import Box from "@mui/material/Box";
 import { styled } from "@mui/material/styles";
-import TranslationText from "../../components/legacyComponents/translationText.jsx";
 import { theme } from "../../AppTheme.ts";
 import { Typography } from "@mui/material";
+import { capitalizeFirstLetter } from "../../utils";
 
 /**
  * A component that renders the side navigation for a borehole detail. The component is used without explicitly passing props.
@@ -25,6 +25,7 @@ const DetailSideNav = ({ borehole, history, match }) => {
   const [stratigraphyIsVisible, setStratigraphyIsVisible] = useState(false);
   const [hydrogeologyIsVisible, setHydrogeologyIsVisible] = useState(false);
   const location = useLocation();
+  const { t } = useTranslation();
 
   const id = match?.params?.id;
 
@@ -81,9 +82,7 @@ const DetailSideNav = ({ borehole, history, match }) => {
             }}>
             <List.Content>
               <List.Header as="h3" data-cy="location-menu-item">
-                <Typography>
-                  <TranslationText firstUpperCase id="location" />
-                </Typography>
+                <Typography>{capitalizeFirstLetter(t("location"))}</Typography>
               </List.Header>
             </List.Content>
           </ParentListItem>
@@ -94,9 +93,7 @@ const DetailSideNav = ({ borehole, history, match }) => {
             }}>
             <List.Content>
               <List.Header as="h3" data-cy="borehole-menu-item">
-                <Typography>
-                  <TranslationText firstUpperCase id="borehole" />
-                </Typography>
+                <Typography>{capitalizeFirstLetter(t("borehole"))}</Typography>
               </List.Header>
             </List.Content>
           </ParentListItem>
@@ -106,9 +103,7 @@ const DetailSideNav = ({ borehole, history, match }) => {
             }}>
             <List.Content>
               <List.Header as="h3" data-cy="stratigraphy-menu-item">
-                <Typography>
-                  <TranslationText firstUpperCase id="stratigraphy" />
-                </Typography>
+                <Typography>{capitalizeFirstLetter(t("stratigraphy"))}</Typography>
               </List.Header>
             </List.Content>
           </ParentListItem>
@@ -121,9 +116,7 @@ const DetailSideNav = ({ borehole, history, match }) => {
                 }}>
                 <List.Content>
                   <List.Header as="h3" data-cy="lithology-menu-item">
-                    <Typography>
-                      <TranslationText firstUpperCase id="lithology" />
-                    </Typography>
+                    <Typography>{capitalizeFirstLetter(t("lithology"))}</Typography>
                   </List.Header>
                 </List.Content>
               </ChildListItem>
@@ -134,9 +127,7 @@ const DetailSideNav = ({ borehole, history, match }) => {
                 }}>
                 <List.Content>
                   <List.Header as="h3" data-cy="chronostratigraphy-menu-item">
-                    <Typography>
-                      <TranslationText firstUpperCase id="chronostratigraphy" />
-                    </Typography>
+                    <Typography>{capitalizeFirstLetter(t("chronostratigraphy"))}</Typography>
                   </List.Header>
                 </List.Content>
               </ChildListItem>
@@ -147,9 +138,7 @@ const DetailSideNav = ({ borehole, history, match }) => {
                 }}>
                 <List.Content>
                   <List.Header as="h3" data-cy="lithostratigraphy-menu-item">
-                    <Typography>
-                      <TranslationText firstUpperCase id="lithostratigraphy" />
-                    </Typography>
+                    <Typography>{capitalizeFirstLetter(t("lithostratigraphy"))}</Typography>
                   </List.Header>
                 </List.Content>
               </ChildListItem>
@@ -162,9 +151,7 @@ const DetailSideNav = ({ borehole, history, match }) => {
             }}>
             <List.Content>
               <List.Header as="h3" data-cy="completion-menu-item">
-                <Typography>
-                  <TranslationText firstUpperCase id="completion" />
-                </Typography>
+                <Typography>{capitalizeFirstLetter(t("completion"))}</Typography>
               </List.Header>
             </List.Content>
           </ParentListItem>
@@ -174,9 +161,7 @@ const DetailSideNav = ({ borehole, history, match }) => {
             }}>
             <List.Content>
               <List.Header as="h3" data-cy="hydrogeology-menu-item">
-                <Typography>
-                  <TranslationText firstUpperCase id="hydrogeology" />
-                </Typography>
+                <Typography>{capitalizeFirstLetter(t("hydrogeology"))}</Typography>
               </List.Header>
             </List.Content>
           </ParentListItem>
@@ -189,9 +174,7 @@ const DetailSideNav = ({ borehole, history, match }) => {
                 }}>
                 <List.Content>
                   <List.Header as="h3" data-cy="wateringress-menu-item">
-                    <Typography>
-                      <TranslationText firstUpperCase id="waterIngress" />
-                    </Typography>
+                    <Typography>{capitalizeFirstLetter(t("waterIngress"))}</Typography>
                   </List.Header>
                 </List.Content>
               </ChildListItem>
@@ -202,9 +185,7 @@ const DetailSideNav = ({ borehole, history, match }) => {
                 }}>
                 <List.Content>
                   <List.Header as="h3" data-cy="groundwaterlevelmeasurement-menu-item">
-                    <Typography>
-                      <TranslationText firstUpperCase id="groundwaterLevelMeasurement" />
-                    </Typography>
+                    <Typography>{capitalizeFirstLetter(t("groundwaterLevelMeasurement"))}</Typography>
                   </List.Header>
                 </List.Content>
               </ChildListItem>
@@ -215,9 +196,7 @@ const DetailSideNav = ({ borehole, history, match }) => {
                 }}>
                 <List.Content>
                   <List.Header as="h3" data-cy="fieldmeasurement-menu-item">
-                    <Typography>
-                      <TranslationText firstUpperCase id="fieldMeasurement" />
-                    </Typography>
+                    <Typography>{capitalizeFirstLetter(t("fieldMeasurement"))}</Typography>
                   </List.Header>
                 </List.Content>
               </ChildListItem>
@@ -228,9 +207,7 @@ const DetailSideNav = ({ borehole, history, match }) => {
                 }}>
                 <List.Content>
                   <List.Header as="h3" data-cy="hydrotest-menu-item">
-                    <Typography>
-                      <TranslationText firstUpperCase id="hydrotest" />
-                    </Typography>
+                    <Typography>{capitalizeFirstLetter(t("hydrotest"))}</Typography>
                   </List.Header>
                 </List.Content>
               </ChildListItem>
@@ -243,9 +220,7 @@ const DetailSideNav = ({ borehole, history, match }) => {
             }}>
             <List.Content>
               <List.Header as="h3" data-cy="attachments-menu-item">
-                <Typography>
-                  <TranslationText firstUpperCase id="attachments" />
-                </Typography>
+                <Typography>{capitalizeFirstLetter(t("attachments"))}</Typography>
               </List.Header>
             </List.Content>
           </ParentListItem>
@@ -257,9 +232,7 @@ const DetailSideNav = ({ borehole, history, match }) => {
             }}>
             <List.Content>
               <List.Header as="h3" data-cy="status-menu-item">
-                <Typography>
-                  <TranslationText firstUpperCase id="flowPublicationStatus" />
-                </Typography>
+                <Typography>{capitalizeFirstLetter(t("flowPublicationStatus"))}</Typography>
               </List.Header>
             </List.Content>
           </ParentListItem>
@@ -275,6 +248,6 @@ const mapStateToProps = state => {
   };
 };
 
-const ConnectedDetailSideNav = withRouter(connect(mapStateToProps)(withTranslation(["common"])(DetailSideNav)));
+const ConnectedDetailSideNav = withRouter(connect(mapStateToProps)(DetailSideNav));
 
 export default ConnectedDetailSideNav;
diff --git a/src/client/src/pages/detail/form/borehole/boreholeDetailSegment.jsx b/src/client/src/pages/detail/form/borehole/boreholeDetailSegment.jsx
index f347aba37..86c4f021b 100644
--- a/src/client/src/pages/detail/form/borehole/boreholeDetailSegment.jsx
+++ b/src/client/src/pages/detail/form/borehole/boreholeDetailSegment.jsx
@@ -1,5 +1,4 @@
 import _ from "lodash";
-
 import DomainDropdown from "../../../../components/legacyComponents/domain/dropdown/domainDropdown.jsx";
 import DomainTree from "../../../../components/legacyComponents/domain/tree/domainTree.jsx";
 import TranslationText from "../../../../components/legacyComponents/translationText.jsx";
@@ -10,9 +9,11 @@ import { parseIfString } from "../../../../components/legacyComponents/formUtils
 import { DisabledRadio } from "../styledComponents.jsx";
 import { getBoreholeGeometryDepthTVD } from "../../../../api/fetchApiV2.js";
 import { useCallback, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 
 const BoreholeDetailSegment = props => {
   const { size, borehole, updateChange, updateNumber, isEditable } = props;
+  const { t } = useTranslation();
 
   const [depthTVD, setDepthTVD] = useState(null);
 
@@ -61,9 +62,7 @@ const BoreholeDetailSegment = props => {
       <Form autoComplete="off" error size={size}>
         <Form.Group widths="equal">
           <Form.Field required>
-            <label>
-              <TranslationText id="totaldepth" />
-            </label>
+            <label>{t("totaldepth")}</label>
             <NumericFormat
               autoCapitalize="off"
               autoComplete="off"
@@ -77,9 +76,7 @@ const BoreholeDetailSegment = props => {
           </Form.Field>
 
           <Form.Field required>
-            <label>
-              <TranslationText id="qt_depth" />
-            </label>
+            <label>{t("qt_depth")}</label>
             <DomainDropdown
               onSelected={selected => {
                 updateChange("custom.qt_depth", selected.id, false);
@@ -94,9 +91,7 @@ const BoreholeDetailSegment = props => {
               opacity: 0.6,
               pointerEvents: "none",
             }}>
-            <label>
-              <TranslationText id="total_depth_tvd" />
-            </label>
+            <label>{t("total_depth_tvd")}</label>
             <NumericFormat
               autoCapitalize="off"
               autoComplete="off"
@@ -110,9 +105,7 @@ const BoreholeDetailSegment = props => {
         </Form.Group>
         <Form.Group widths="equal">
           <Form.Field required>
-            <label>
-              <TranslationText id="top_bedrock_fresh_md" />
-            </label>
+            <label>{t("top_bedrock_fresh_md")}</label>
             <NumericFormat
               autoCapitalize="off"
               autoComplete="off"
@@ -131,9 +124,7 @@ const BoreholeDetailSegment = props => {
               opacity: 0.6,
               pointerEvents: "none",
             }}>
-            <label>
-              <TranslationText id="top_bedrock_fresh_tvd" />
-            </label>
+            <label>{t("top_bedrock_fresh_tvd")}</label>
             <NumericFormat
               autoCapitalize="off"
               autoComplete="off"
@@ -147,9 +138,7 @@ const BoreholeDetailSegment = props => {
         </Form.Group>
         <Form.Group widths="equal">
           <Form.Field required>
-            <label>
-              <TranslationText id="top_bedrock_weathered_md" />
-            </label>
+            <label>{t("top_bedrock_weathered_md")}</label>
             <NumericFormat
               autoCapitalize="off"
               autoComplete="off"
@@ -166,9 +155,7 @@ const BoreholeDetailSegment = props => {
               opacity: 0.6,
               pointerEvents: "none",
             }}>
-            <label>
-              <TranslationText id="top_bedrock_weathered_tvd" />
-            </label>
+            <label>{t("top_bedrock_weathered_tvd")}</label>
             <NumericFormat
               autoCapitalize="off"
               autoComplete="off"
@@ -181,23 +168,19 @@ const BoreholeDetailSegment = props => {
           </Form.Field>
         </Form.Group>
         <Form.Field required>
-          <label>
-            <TranslationText id="lithology_top_bedrock" />
-          </label>
+          <label>{t("lithology_top_bedrock")}</label>
           <DomainTree
             onSelected={selected => {
               updateChange("custom.lithology_top_bedrock", selected.id, false);
             }}
             schema="custom.lithology_top_bedrock"
             selected={borehole.data.custom.lithology_top_bedrock}
-            title={<TranslationText id="lithology_top_bedrock" />}
+            title={t("lithology_top_bedrock")}
             isEditable={isEditable}
           />
         </Form.Field>
         <Form.Field required>
-          <label>
-            <TranslationText id="lithostratigraphy_top_bedrock" />
-          </label>
+          <label>{t("lithostratigraphy_top_bedrock")}</label>
           <DomainTree
             levels={{
               1: "super",
@@ -211,14 +194,12 @@ const BoreholeDetailSegment = props => {
             }}
             schema="custom.lithostratigraphy_top_bedrock"
             selected={borehole.data.custom.lithostratigraphy_top_bedrock}
-            title={<TranslationText id="lithostratigraphy_top_bedrock" />}
+            title={t("lithostratigraphy_top_bedrock")}
             isEditable={isEditable}
           />
         </Form.Field>
         <Form.Field required>
-          <label>
-            <TranslationText id="chronostratigraphy_top_bedrock" />
-          </label>
+          <label>{t("chronostratigraphy_top_bedrock")}</label>
           <DomainTree
             levels={{
               1: "1st_order_eon",
@@ -233,14 +214,12 @@ const BoreholeDetailSegment = props => {
             }}
             schema="custom.chronostratigraphy_top_bedrock"
             selected={borehole.data.custom.chronostratigraphy_top_bedrock}
-            title={<TranslationText id="chronostratigraphy_top_bedrock" />}
+            title={t("chronostratigraphy_top_bedrock")}
             isEditable={isEditable}
           />
         </Form.Field>
         <Form.Field required>
-          <label>
-            <TranslationText id="groundwater" />
-          </label>
+          <label>{t("groundwater")}</label>
           <FormControl className="radio-group">
             <RadioGroup
               row
diff --git a/src/client/src/pages/detail/form/borehole/boreholeGeneralSegment.jsx b/src/client/src/pages/detail/form/borehole/boreholeGeneralSegment.jsx
index ca329773c..25ab20855 100644
--- a/src/client/src/pages/detail/form/borehole/boreholeGeneralSegment.jsx
+++ b/src/client/src/pages/detail/form/borehole/boreholeGeneralSegment.jsx
@@ -1,9 +1,12 @@
 import DomainDropdown from "../../../../components/legacyComponents/domain/dropdown/domainDropdown.jsx";
-import TranslationText from "../../../../components/legacyComponents/translationText.jsx";
 import { Form, Segment, TextArea } from "semantic-ui-react";
+import { useTranslation } from "react-i18next";
+import { capitalizeFirstLetter } from "../../../../utils";
 
 const BoreholeGeneralSegment = props => {
   const { size, borehole, updateChange, isEditable } = props;
+  const { t } = useTranslation();
+
   return (
     <Segment>
       <div
@@ -19,9 +22,7 @@ const BoreholeGeneralSegment = props => {
             <Form.Group widths="equal">
               {/* drilling type in Borehole */}
               <Form.Field error={borehole.data.borehole_type === null} required>
-                <label>
-                  <TranslationText id="borehole_type" />
-                </label>
+                <label>{t("borehole_type")}</label>
                 <DomainDropdown
                   onSelected={selected => {
                     updateChange("borehole_type", selected.id, false);
@@ -34,9 +35,7 @@ const BoreholeGeneralSegment = props => {
             </Form.Group>
             <Form.Group widths="equal">
               <Form.Field required>
-                <label>
-                  <TranslationText id="purpose" />
-                </label>
+                <label>{t("purpose")}</label>
                 <DomainDropdown
                   onSelected={selected => {
                     updateChange("extended.purpose", selected.id, false);
@@ -49,9 +48,7 @@ const BoreholeGeneralSegment = props => {
             </Form.Group>
             <Form.Group widths="equal">
               <Form.Field required>
-                <label>
-                  <TranslationText firstUpperCase id="boreholestatus" />
-                </label>
+                <label>{capitalizeFirstLetter(t("boreholestatus"))}</label>
                 <DomainDropdown
                   onSelected={selected => {
                     updateChange("extended.status", selected.id, false);
@@ -71,7 +68,7 @@ const BoreholeGeneralSegment = props => {
           }}>
           <Form autoComplete="off" error size={size}>
             <Form.Field>
-              <TranslationText id="remarks" />
+              {t("remarks")}
               <TextArea
                 onChange={e => {
                   updateChange("custom.remarks", e.target.value);
diff --git a/src/client/src/pages/detail/form/location/cantonMunicipalitySegment.jsx b/src/client/src/pages/detail/form/location/cantonMunicipalitySegment.jsx
index a17e4f08b..464f00110 100644
--- a/src/client/src/pages/detail/form/location/cantonMunicipalitySegment.jsx
+++ b/src/client/src/pages/detail/form/location/cantonMunicipalitySegment.jsx
@@ -1,9 +1,9 @@
-import TranslationText from "../../../../components/legacyComponents/translationText.jsx";
-
 import { Form, Icon, Input, Segment } from "semantic-ui-react";
+import { useTranslation } from "react-i18next";
 
 const CantonMunicipalitySegment = props => {
   const { size, country, canton, municipality, isEditable } = props;
+  const { t } = useTranslation();
 
   return (
     <Segment>
@@ -11,7 +11,7 @@ const CantonMunicipalitySegment = props => {
         <Form.Group widths="equal">
           <Form.Field>
             <label>
-              <TranslationText id="country" />
+              {t("country")}
               &nbsp;
               <Icon name="map marker" />
             </label>
@@ -19,7 +19,7 @@ const CantonMunicipalitySegment = props => {
           </Form.Field>
           <Form.Field>
             <label>
-              <TranslationText id="canton" />
+              {t("canton")}
               &nbsp;
               <Icon name="map marker" />
             </label>
@@ -27,7 +27,7 @@ const CantonMunicipalitySegment = props => {
           </Form.Field>
           <Form.Field>
             <label>
-              <TranslationText id="city" />
+              {t("city")}
               &nbsp;
               <Icon name="map marker" />
             </label>
diff --git a/src/client/src/pages/detail/form/location/indentifierSegment.jsx b/src/client/src/pages/detail/form/location/indentifierSegment.jsx
index f67e57313..d2c676239 100644
--- a/src/client/src/pages/detail/form/location/indentifierSegment.jsx
+++ b/src/client/src/pages/detail/form/location/indentifierSegment.jsx
@@ -3,7 +3,6 @@ import _ from "lodash";
 
 import DomainDropdown from "../../../../components/legacyComponents/domain/dropdown/domainDropdown.jsx";
 import DomainText from "../../../../components/legacyComponents/domain/domainText.jsx";
-import TranslationText from "../../../../components/legacyComponents/translationText.jsx";
 import { Form, Icon, Input, Segment } from "semantic-ui-react";
 import { addIdentifier, removeIdentifier } from "../../../../api-lib";
 import { useTranslation } from "react-i18next";
@@ -25,13 +24,9 @@ const IdentifierSegment = props => {
           borderBottom: "thin solid #d2d2d2",
           paddingBottom: "0.4em",
         }}>
-        <div className="flex_fill">
-          <TranslationText id="borehole_identifier" />
-        </div>
-        <div className="flex_fill">
-          <TranslationText id="borehole_identifier_value" />
-        </div>
-        <div>{borehole.data.lock !== null ? <TranslationText id="delete" /> : null}</div>
+        <div className="flex_fill">{t("borehole_identifier")}</div>
+        <div className="flex_fill">{t("borehole_identifier_value")}</div>
+        <div>{borehole.data.lock !== null ? t("delete") : null}</div>
       </div>
       <div
         className="flex_row"
@@ -47,7 +42,7 @@ const IdentifierSegment = props => {
               style={{
                 visibility: "hidden",
               }}>
-              <TranslationText id="delete" />
+              {t("delete")}
             </div>
           ) : null}
         </div>
@@ -82,7 +77,7 @@ const IdentifierSegment = props => {
                         }
                       });
                     }}>
-                    <TranslationText id="delete" />
+                    {t("delete")}
                   </div>
                 ) : null}
               </div>
diff --git a/src/client/src/pages/detail/form/location/nameSegment.jsx b/src/client/src/pages/detail/form/location/nameSegment.jsx
index d20d7e906..c4b3d952a 100644
--- a/src/client/src/pages/detail/form/location/nameSegment.jsx
+++ b/src/client/src/pages/detail/form/location/nameSegment.jsx
@@ -1,8 +1,9 @@
-import TranslationText from "../../../../components/legacyComponents/translationText.jsx";
 import { Form, Input, Segment } from "semantic-ui-react";
+import { useTranslation } from "react-i18next";
 
 const NameSegment = props => {
   const { size, borehole, updateChange, user } = props;
+  const { t } = useTranslation();
 
   const isEditable =
     borehole?.data.role === "EDIT" && borehole?.data.lock !== null && borehole?.data.lock?.id === user?.data.id;
@@ -12,9 +13,7 @@ const NameSegment = props => {
       <Form autoComplete="off" error size={size}>
         <Form.Group widths="equal">
           <Form.Field error={borehole.data.extended.original_name === ""} required>
-            <label>
-              <TranslationText id="original_name" />
-            </label>
+            <label>{t("original_name")}</label>
             <Input
               autoCapitalize="off"
               autoComplete="off"
@@ -28,9 +27,7 @@ const NameSegment = props => {
             />
           </Form.Field>
           <Form.Field>
-            <label>
-              <TranslationText id="project_name" />
-            </label>
+            <label>{t("project_name")}</label>
             <Input
               autoCapitalize="off"
               autoComplete="off"
@@ -46,9 +43,7 @@ const NameSegment = props => {
         </Form.Group>
         <Form.Group widths="equal">
           <Form.Field>
-            <label>
-              <TranslationText id="alternate_name" />
-            </label>
+            <label>{t("alternate_name")}</label>
             <Input
               autoCapitalize="off"
               autoComplete="off"
diff --git a/src/client/src/pages/detail/form/location/restrictionSegment.jsx b/src/client/src/pages/detail/form/location/restrictionSegment.jsx
index 12ba32dbd..b6b4e50ed 100644
--- a/src/client/src/pages/detail/form/location/restrictionSegment.jsx
+++ b/src/client/src/pages/detail/form/location/restrictionSegment.jsx
@@ -2,6 +2,7 @@ import TranslationText from "../../../../components/legacyComponents/translation
 import { Form, Segment } from "semantic-ui-react";
 import { FormControl, FormControlLabel, RadioGroup } from "@mui/material";
 import { DisabledRadio } from "../styledComponents.jsx";
+import { useTranslation } from "react-i18next";
 
 import _ from "lodash";
 import moment from "moment";
@@ -12,7 +13,7 @@ import DateField from "../../../../components/legacyComponents/dateField.jsx";
 
 const RestrictionSegment = props => {
   const { size, borehole, updateChange, user } = props;
-
+  const { t } = useTranslation();
   const isEditable =
     borehole?.data.role === "EDIT" && borehole?.data.lock !== null && borehole?.data.lock?.id === user?.data.id;
 
@@ -21,9 +22,7 @@ const RestrictionSegment = props => {
       <Form size={size}>
         <Form.Group widths="equal">
           <Form.Field error={borehole.data.restriction === null} required>
-            <label>
-              <TranslationText id="restriction" />
-            </label>
+            <label>{t("restriction")}</label>
             <DomainDropdown
               onSelected={selected => {
                 updateChange("restriction", selected.id, false);
@@ -42,9 +41,7 @@ const RestrictionSegment = props => {
                 moment(borehole.data.restriction_until).isValid())
             }
             required={borehole.data.restriction === 20111003}>
-            <label>
-              <TranslationText id="restriction_until" />
-            </label>
+            <label>{t("restriction_until")}</label>
             <DateField
               date={borehole.data.restriction_until}
               onChange={selected => {
@@ -56,9 +53,7 @@ const RestrictionSegment = props => {
         </Form.Group>
         <Form.Group widths="equal">
           <Form.Field required>
-            <label>
-              <TranslationText id="national_interest" />
-            </label>
+            <label>{t("national_interest")}</label>
             <FormControl className="radio-group">
               <RadioGroup
                 row
diff --git a/src/client/src/pages/detail/form/stratigraphy/hierarchicalDataSearch.jsx b/src/client/src/pages/detail/form/stratigraphy/hierarchicalDataSearch.jsx
index e8347b243..f40e0b267 100644
--- a/src/client/src/pages/detail/form/stratigraphy/hierarchicalDataSearch.jsx
+++ b/src/client/src/pages/detail/form/stratigraphy/hierarchicalDataSearch.jsx
@@ -6,7 +6,7 @@ import * as Styled from "../../../overview/sidePanelContent/filter/listFilterSty
 import TranslationText from "../../../../components/legacyComponents/translationText.jsx";
 
 const HierarchicalDataSearch = ({ schema, labels, selected, onSelected }) => {
-  const { i18n } = useTranslation();
+  const { i18n, t } = useTranslation();
   const { data: schemaData } = useDomainSchema(schema);
 
   const [levels, setLevels] = useState([]);
@@ -83,7 +83,7 @@ const HierarchicalDataSearch = ({ schema, labels, selected, onSelected }) => {
                 style={{
                   color: "red",
                 }}>
-                <TranslationText id="reset" />
+                {t("reset")}
               </span>
             ),
           });
@@ -134,7 +134,7 @@ const HierarchicalDataSearch = ({ schema, labels, selected, onSelected }) => {
       });
       setLevels(levels);
     }
-  }, [i18n.language, labels, reset, schemaData, selectedIds]);
+  }, [i18n.language, labels, reset, schemaData, selectedIds, t]);
 
   return (
     <>
diff --git a/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyAttributes/lithologyAttributes.jsx b/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyAttributes/lithologyAttributes.jsx
index 8969fb21c..c21947ee1 100644
--- a/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyAttributes/lithologyAttributes.jsx
+++ b/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyAttributes/lithologyAttributes.jsx
@@ -1,7 +1,6 @@
 import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import * as Styled from "./styles.js";
 import { Checkbox } from "semantic-ui-react";
-import TranslationText from "../../../../../../components/legacyComponents/translationText.jsx";
 import _ from "lodash";
 import { useTranslation } from "react-i18next";
 import LithologyAttributeList from "./lithologyAttributeList/lithologyAttributeList.jsx";
@@ -156,7 +155,7 @@ const LithologyAttributes = props => {
     <Styled.Container disable={!id}>
       {showCheckbox() && (
         <Styled.CheckboxContainer>
-          <TranslationText id="showallfields" />
+          {t("showallfields")}
           <Checkbox checked={showAll} onChange={() => setShowAll(!showAll)} toggle />
         </Styled.CheckboxContainer>
       )}
diff --git a/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyHeader/profileHeader.jsx b/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyHeader/profileHeader.jsx
index 8615bc603..58232c958 100644
--- a/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyHeader/profileHeader.jsx
+++ b/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyHeader/profileHeader.jsx
@@ -1,15 +1,15 @@
 import { useCallback, useEffect, useState } from "react";
 import * as Styled from "./styles.js";
 import { Button } from "semantic-ui-react";
-import TranslationText from "../../../../../../components/legacyComponents/translationText.jsx";
 import { createNewStratigraphy } from "./api";
 import { fetchStratigraphyByBoreholeId } from "../../../../../../api/fetchApiV2.js";
 import ProfileHeaderList from "./profileHeaderList";
+import { useTranslation } from "react-i18next";
 
 const ProfileHeader = props => {
   const { boreholeID, isEditable, reloadHeader, selectedStratigraphy, setSelectedStratigraphy, setIsLoadingData } =
     props;
-
+  const { t } = useTranslation();
   const [profiles, setProfiles] = useState([]);
 
   const setStratigraphy = useCallback(
@@ -58,7 +58,7 @@ const ProfileHeader = props => {
         {isEditable && (
           <Button
             data-cy="add-stratigraphy-button"
-            content={<TranslationText id="stratigraphy" />}
+            content={t("stratigraphy")}
             icon="add"
             onClick={createStratigraphy}
             secondary
diff --git a/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyInfo/infoCheckBox/infoCheckBox.jsx b/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyInfo/infoCheckBox/infoCheckBox.jsx
index 56c449400..5b1bcb82b 100644
--- a/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyInfo/infoCheckBox/infoCheckBox.jsx
+++ b/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyInfo/infoCheckBox/infoCheckBox.jsx
@@ -1,10 +1,11 @@
 import * as Styled from "./styles.js";
 import { Button, Checkbox, Icon, Popup } from "semantic-ui-react";
-import TranslationText from "../../../../../../../components/legacyComponents/translationText.jsx";
 import { copyStratigraphy, deleteStratigraphy } from "../../../../../../../api/fetchApiV2.js";
+import { useTranslation } from "react-i18next";
 
 const InfoCheckBox = props => {
   const { profileInfo, updateChange, isEditable, onUpdated } = props.data;
+  const { t } = useTranslation();
 
   return (
     <Styled.CheckBoxContainer>
@@ -19,7 +20,7 @@ const InfoCheckBox = props => {
           }}
           toggle
         />
-        <TranslationText id="mainStratigraphy" />
+        {t("mainStratigraphy")}
       </Styled.FormContainer>
       {isEditable && (
         <div style={{ display: "flex" }} data-cy="clone-and-delete-buttons">
@@ -44,7 +45,7 @@ const InfoCheckBox = props => {
                 <Icon name="trash alternate" />
               </Button>
             }>
-            <TranslationText id="deleteForever" />?
+            {t("deleteForever")}?
             <br />
             <Button
               icon
@@ -55,7 +56,7 @@ const InfoCheckBox = props => {
               }}
               secondary
               size="tiny">
-              <TranslationText id="yes" />
+              {t("yes")}
             </Button>
           </Popup>
         </div>
diff --git a/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyLayers/lithologyLayersList/lithologyLayersList.jsx b/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyLayers/lithologyLayersList/lithologyLayersList.jsx
index 1b749f851..077f90a14 100644
--- a/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyLayers/lithologyLayersList/lithologyLayersList.jsx
+++ b/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyLayers/lithologyLayersList/lithologyLayersList.jsx
@@ -4,7 +4,6 @@ import DeleteIcon from "@mui/icons-material/Delete";
 import ModeEditIcon from "@mui/icons-material/ModeEdit";
 import ClearIcon from "@mui/icons-material/Clear";
 import { Stack, Tooltip } from "@mui/material";
-import TranslationText from "../../../../../../../components/legacyComponents/translationText.jsx";
 import { NumericFormat } from "react-number-format";
 import { withTranslation } from "react-i18next";
 import * as Styled from "./styles.js";
@@ -168,13 +167,7 @@ const LithologyLayersList = props => {
                 {showTopPopup ? (
                   <Popup
                     basic
-                    content={
-                      itemWithValidation?.validation?.invertedDepth ? (
-                        <TranslationText id="invertedDepth" />
-                      ) : (
-                        <TranslationText id="errrorStartPoint" />
-                      )
-                    }
+                    content={itemWithValidation?.validation?.invertedDepth ? t("invertedDepth") : t("errrorStartPoint")}
                     position="bottom left"
                     trigger={
                       <div>{itemWithValidation?.validation?.invertedDepth && itemWithValidation?.depth_from} m MD</div>
@@ -219,13 +212,7 @@ const LithologyLayersList = props => {
                 {showBottomPopup ? (
                   <Popup
                     basic
-                    content={
-                      itemWithValidation?.validation?.invertedDepth ? (
-                        <TranslationText id="invertedDepth" />
-                      ) : (
-                        <TranslationText id="errorEndPoint" />
-                      )
-                    }
+                    content={itemWithValidation?.validation?.invertedDepth ? t("invertedDepth") : t("errorEndPoint")}
                     hoverable
                     position="bottom left"
                     trigger={
diff --git a/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyLayers/profileLayers.jsx b/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyLayers/profileLayers.jsx
index 1b9473f81..f5e133a4e 100644
--- a/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyLayers/profileLayers.jsx
+++ b/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyLayers/profileLayers.jsx
@@ -1,6 +1,5 @@
 import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import * as Styled from "./styles.js";
-import TranslationText from "../../../../../../components/legacyComponents/translationText.jsx";
 import ProfileLayersValidation from "./lithologyLayersValidation";
 import { createLayerApi, getData } from "./api";
 import {
@@ -312,11 +311,7 @@ const ProfileLayers = props => {
           </TableBody>
         </Table>
       </TableContainer>
-      {!hasLayers && (
-        <Styled.Empty>
-          <TranslationText id="nothingToShow" />
-        </Styled.Empty>
-      )}
+      {!hasLayers && <Styled.Empty>{t("nothingToShow")}</Styled.Empty>}
     </Styled.Container>
   );
 };
diff --git a/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyLayersError/lithologyLayersError.jsx b/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyLayersError/lithologyLayersError.jsx
index edd56b2d1..9d629be1d 100644
--- a/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyLayersError/lithologyLayersError.jsx
+++ b/src/client/src/pages/detail/form/stratigraphy/lithology/lithologyLayersError/lithologyLayersError.jsx
@@ -6,6 +6,7 @@ import { deleteLayer, gapLayer } from "../../../../../../api-lib";
 import { addBedrock, fetchLayerById } from "../../../../../../api/fetchApiV2.js";
 import ErrorTypes from "./errorTypes";
 import { AlertContext } from "../../../../../../components/alert/alertContext.tsx";
+import { useTranslation } from "react-i18next";
 
 const LithologyLayersError = props => {
   const { title, isEditable, id, isInside, onUpdated, layerIndex, layerLength, closeDelete } = props.data;
@@ -15,6 +16,7 @@ const LithologyLayersError = props => {
   const [resolvingAction, setResolvingAction] = useState(null);
   const [isDelete, setIsDelete] = useState(false);
   const { showAlert } = useContext(AlertContext);
+  const { t } = useTranslation();
 
   useEffect(() => {
     let e;
@@ -147,11 +149,7 @@ const LithologyLayersError = props => {
 
       {showSolution === id && !isDelete && (
         <Styled.SolutionContainer>
-          {error.id !== 5 && (
-            <Styled.HowToResolveContainer>
-              <TranslationText id="errorHowToResolve" />
-            </Styled.HowToResolveContainer>
-          )}
+          {error.id !== 5 && <Styled.HowToResolveContainer>{t("errorHowToResolve")}</Styled.HowToResolveContainer>}
           {error?.solutions?.map((e, index) => (
             <div key={index} style={{ marginTop: 2 }}>
               {error.solutions.length > 1 && (
@@ -175,7 +173,7 @@ const LithologyLayersError = props => {
                 onCancelClicked();
               }}>
               <Icon name="cancel" />
-              <TranslationText id="cancel" />
+              {t("cancel")}
             </Styled.CardButton>
             {error?.id !== 5 && (
               <Styled.CardButton
@@ -187,13 +185,13 @@ const LithologyLayersError = props => {
                 {error?.id !== 0 && (
                   <>
                     <Icon name="check" />
-                    <TranslationText id="confirm" />
+                    {t("confirm")}
                   </>
                 )}
                 {error?.id === 0 && (
                   <>
                     <Icon name="add" />
-                    <TranslationText id="add" />
+                    {t("add")}
                   </>
                 )}
               </Styled.CardButton>
@@ -209,9 +207,7 @@ const LithologyLayersError = props => {
             <TranslationText id={error?.messageId} />
           </Styled.ErrorMessageContainer>
 
-          <Styled.HowToResolveContainer>
-            <TranslationText id="deletelayerconfirmation" />
-          </Styled.HowToResolveContainer>
+          <Styled.HowToResolveContainer>{t("deletelayerconfirmation")}</Styled.HowToResolveContainer>
           {error?.solutions?.map((e, index) => (
             <div key={index} style={{ marginTop: 2 }}>
               {(index === 0 ||
@@ -240,11 +236,11 @@ const LithologyLayersError = props => {
               }}
               size="mini">
               <Icon name="cancel" />
-              <TranslationText id="cancel" />
+              {t("cancel")}
             </Styled.CardButton>
             <Styled.CardButton disabled={resolvingAction === null} icon negative onClick={sendDataToServer} size="mini">
               <Icon name="trash" />
-              <TranslationText id="confirm" />
+              {t("confirm")}
             </Styled.CardButton>
           </Styled.CardButtonContainer>
         </Styled.SolutionContainer>
diff --git a/src/client/src/pages/detail/form/workflow/workflowForm.jsx b/src/client/src/pages/detail/form/workflow/workflowForm.jsx
index 6bba4b694..41bf95503 100644
--- a/src/client/src/pages/detail/form/workflow/workflowForm.jsx
+++ b/src/client/src/pages/detail/form/workflow/workflowForm.jsx
@@ -168,7 +168,7 @@ class WorkflowForm extends React.Component {
                         style={{
                           color: "#787878",
                         }}>
-                        <TranslationText id="you" />
+                        {t("you")}
                       </span>
                     ) : null}
                   </div>
@@ -193,7 +193,7 @@ class WorkflowForm extends React.Component {
                           color: theme.palette.error.main,
                           fontStyle: "italic",
                         }}>
-                        <TranslationText id="noComments" />
+                        {t("noComments")}
                       </div>
                     )}
                   </div>
@@ -202,7 +202,7 @@ class WorkflowForm extends React.Component {
               {workflow.data === null || (readOnly === true && workflows.data.length > 1) ? null : (
                 <div>
                   <span>
-                    <TranslationText id="yourcomments" />
+                    {t("yourcomments")}
                     &nbsp;
                     {readOnly ? <TranslationText append=")" id="disabled" prepend="(" /> : null}:
                   </span>
@@ -216,7 +216,7 @@ class WorkflowForm extends React.Component {
                     <div>
                       <Icon loading name="spinner" size="small" />
                       &nbsp;
-                      <TranslationText id="saving" />
+                      {t("saving")}
                     </div>
                   ) : null}
                 </div>
@@ -295,7 +295,7 @@ class WorkflowForm extends React.Component {
                                     color: theme.palette.success.main,
                                     fontSize: "0.9em",
                                   }}>
-                                  <TranslationText id="rejected" />
+                                  {t("rejected")}
                                   <br />
                                   <DateText date={status[role].finished} hours />
                                 </span>
@@ -304,7 +304,7 @@ class WorkflowForm extends React.Component {
                                   style={{
                                     fontSize: "0.9em",
                                   }}>
-                                  <TranslationText id="submitted" />
+                                  {t("submitted")}
                                   <br />
                                   <DateText date={status[role].finished} hours />
                                 </span>
@@ -348,7 +348,7 @@ class WorkflowForm extends React.Component {
                                       });
                                     }}
                                     size="mini">
-                                    <TranslationText id="flowRestart" />
+                                    {t("flowRestart")}
                                   </Button>
                                 )}
                               {status[role].finished === null &&
@@ -368,7 +368,7 @@ class WorkflowForm extends React.Component {
                                           });
                                         }}
                                         size="mini">
-                                        <TranslationText id="reject" />
+                                        {t("reject")}
                                       </Button>
                                     )}
 
@@ -383,7 +383,7 @@ class WorkflowForm extends React.Component {
                                       }}
                                       secondary
                                       size="mini">
-                                      <TranslationText id="submit" />
+                                      {t("submit")}
                                     </Button>
                                     <Modal
                                       // basic
@@ -397,9 +397,7 @@ class WorkflowForm extends React.Component {
                                       size="mini">
                                       <Header content={t(`status-submit-msg-${role.toLowerCase()}`)} />
                                       <Modal.Content>
-                                        <p>
-                                          <TranslationText id="sure" />
-                                        </p>
+                                        <p>{t("sure")}</p>
                                       </Modal.Content>
                                       <Modal.Actions>
                                         {this.state.modal < 3 ? (
@@ -419,7 +417,7 @@ class WorkflowForm extends React.Component {
                                             secondary>
                                             <Icon name="checkmark" />
                                             &nbsp;
-                                            <TranslationText id="submit" />
+                                            {t("submit")}
                                           </Button>
                                         ) : (
                                           <Button
@@ -435,7 +433,7 @@ class WorkflowForm extends React.Component {
                                             }}>
                                             <Icon name="checkmark" />
                                             &nbsp;
-                                            <TranslationText id="reject" />
+                                            {t("reject")}
                                           </Button>
                                         )}
                                       </Modal.Actions>
@@ -503,9 +501,7 @@ class WorkflowForm extends React.Component {
             size="mini">
             <Header content={t(`flowRestart`)} />
             <Modal.Content>
-              <p>
-                <TranslationText id="sure" />
-              </p>
+              <p>{t("sure")}</p>
             </Modal.Content>
             <Modal.Actions>
               <Button
@@ -529,7 +525,7 @@ class WorkflowForm extends React.Component {
                 }}>
                 <Icon name="checkmark" />
                 &nbsp;
-                <TranslationText id="yes" />
+                {t("yes")}
               </Button>
               <Button
                 negative
@@ -538,7 +534,7 @@ class WorkflowForm extends React.Component {
                     modalRestart: false,
                   });
                 }}>
-                <TranslationText id="cancel" />
+                {t("cancel")}
               </Button>
             </Modal.Actions>
           </Modal>
diff --git a/src/client/src/pages/overview/boreholeTable/boreholeNumbersPreview.tsx b/src/client/src/pages/overview/boreholeTable/boreholeNumbersPreview.tsx
index 986c41695..7449d1567 100644
--- a/src/client/src/pages/overview/boreholeTable/boreholeNumbersPreview.tsx
+++ b/src/client/src/pages/overview/boreholeTable/boreholeNumbersPreview.tsx
@@ -1,7 +1,8 @@
 import { NumericFormat } from "react-number-format";
 import { FC } from "react";
-import { CircularProgress } from "@mui/material";
-import TranslationText from "../../../components/legacyComponents/translationText";
+import { CircularProgress, Typography } from "@mui/material";
+import { capitalizeFirstLetter } from "../../../utils.ts";
+import { useTranslation } from "react-i18next";
 
 interface BoreholeNumbersPreviewProps {
   isFetching: boolean;
@@ -9,19 +10,22 @@ interface BoreholeNumbersPreviewProps {
 }
 
 export const BoreholeNumbersPreview: FC<BoreholeNumbersPreviewProps> = ({ isFetching, boreholeCount }) => {
+  const { t } = useTranslation();
   return (
     <>
-      <TranslationText firstUpperCase id="boreholes" />:{" "}
+      <Typography>{capitalizeFirstLetter(t("boreholes"))}: </Typography>
       {isFetching ? (
         <CircularProgress sx={{ marginLeft: "15px", width: "15px !important", height: "15px !important" }} />
       ) : (
-        <NumericFormat
-          data-cy="boreholes-number-preview"
-          value={boreholeCount}
-          thousandSeparator="'"
-          displayType="text"
-          style={{ marginLeft: "0.5em" }}
-        />
+        <Typography>
+          <NumericFormat
+            data-cy="boreholes-number-preview"
+            value={boreholeCount}
+            thousandSeparator="'"
+            displayType="text"
+            style={{ marginLeft: "0.5em" }}
+          />
+        </Typography>
       )}
     </>
   );
diff --git a/src/client/src/pages/overview/sidePanelContent/commons/workgroupSelect.tsx b/src/client/src/pages/overview/sidePanelContent/commons/workgroupSelect.tsx
index e362f1e7d..beda0d208 100644
--- a/src/client/src/pages/overview/sidePanelContent/commons/workgroupSelect.tsx
+++ b/src/client/src/pages/overview/sidePanelContent/commons/workgroupSelect.tsx
@@ -1,8 +1,9 @@
-import TranslationText from "../../../../components/legacyComponents/translationText";
 import { Box, FormControl, MenuItem, Select } from "@mui/material/";
 import { WorkgroupSelectProps } from "./actionsInterfaces.ts";
+import { useTranslation } from "react-i18next";
 
 const WorkgroupSelect = ({ workgroup, enabledWorkgroups, setWorkgroup }: WorkgroupSelectProps) => {
+  const { t } = useTranslation();
   return (
     <>
       <Box
@@ -15,7 +16,7 @@ const WorkgroupSelect = ({ workgroup, enabledWorkgroups, setWorkgroup }: Workgro
             return;
           }
           if (wg?.length === 0) {
-            return <TranslationText id="disabled" />;
+            return t("disabled");
           } else if (wg?.length === 1) {
             return wg[0].workgroup;
           }
diff --git a/src/client/src/pages/overview/sidePanelContent/filter/filterReset.tsx b/src/client/src/pages/overview/sidePanelContent/filter/filterReset.tsx
index 4d2b01b53..63a369963 100644
--- a/src/client/src/pages/overview/sidePanelContent/filter/filterReset.tsx
+++ b/src/client/src/pages/overview/sidePanelContent/filter/filterReset.tsx
@@ -1,11 +1,13 @@
-import TranslationText from "../../../../components/legacyComponents/translationText";
 import { Button, Stack } from "@mui/material";
+import { capitalizeFirstLetter } from "../../../../utils.ts";
+import { useTranslation } from "react-i18next";
 
 interface FilterResetProps {
   reset: () => void;
 }
 
 export const FilterReset = ({ reset }: FilterResetProps) => {
+  const { t } = useTranslation();
   return (
     <Stack direction="row" justifyContent="space-around" sx={{ marginTop: "24px" }}>
       <Button
@@ -15,7 +17,7 @@ export const FilterReset = ({ reset }: FilterResetProps) => {
         onClick={() => {
           reset();
         }}>
-        <TranslationText firstUpperCase id="reset" />
+        {capitalizeFirstLetter(t("reset"))}
       </Button>
     </Stack>
   );
diff --git a/src/client/src/pages/overview/sidePanelContent/filter/listFilter.jsx b/src/client/src/pages/overview/sidePanelContent/filter/listFilter.jsx
index f77583ae6..ba8f28414 100644
--- a/src/client/src/pages/overview/sidePanelContent/filter/listFilter.jsx
+++ b/src/client/src/pages/overview/sidePanelContent/filter/listFilter.jsx
@@ -46,7 +46,7 @@ const ListFilter = props => {
     <Styled.Container>
       {showCheckbox() && (
         <Styled.CheckboxContainer>
-          <TranslationText id="showallfields" />
+          {t("showallfields")}
           <Checkbox checked={showAll} onChange={() => setShowAll(!showAll)} toggle />
         </Styled.CheckboxContainer>
       )}
diff --git a/src/client/src/pages/overview/sidePanelContent/filter/statusFilter.jsx b/src/client/src/pages/overview/sidePanelContent/filter/statusFilter.jsx
index 4c6cf6ab8..917c5e6d1 100644
--- a/src/client/src/pages/overview/sidePanelContent/filter/statusFilter.jsx
+++ b/src/client/src/pages/overview/sidePanelContent/filter/statusFilter.jsx
@@ -4,7 +4,7 @@ import { connect } from "react-redux";
 import { withTranslation } from "react-i18next";
 import _ from "lodash";
 import { Form, Radio } from "semantic-ui-react";
-import TranslationText from "../../../../components/legacyComponents/translationText.jsx";
+import { capitalizeFirstLetter } from "../../../../utils";
 
 class StatusFilter extends Component {
   isVisible(filter) {
@@ -12,7 +12,7 @@ class StatusFilter extends Component {
     return _.get(settings, filter) === true;
   }
   render() {
-    const { search } = this.props;
+    const { search, t } = this.props;
     return (
       <Form
         size="tiny"
@@ -34,7 +34,7 @@ class StatusFilter extends Component {
               fontSize: "1.1em",
               fontWeight: "bold",
             }}>
-            <TranslationText firstUpperCase id="alls" />
+            {capitalizeFirstLetter(t("alls"))}
           </span>
         </Form.Field>
         {["statusedit", "statuscontrol", "statusvalid", "statuspublic"].map(role => (
@@ -52,7 +52,7 @@ class StatusFilter extends Component {
                 color: "black",
                 fontSize: "1.1em",
               }}>
-              <TranslationText firstUpperCase id={role} />
+              {capitalizeFirstLetter(t({ role }))}
             </span>
           </Form.Field>
         ))}
diff --git a/src/client/src/pages/overview/sidePanelContent/importer/importModal.tsx b/src/client/src/pages/overview/sidePanelContent/importer/importModal.tsx
index fd24d3cc8..9ae2ad477 100644
--- a/src/client/src/pages/overview/sidePanelContent/importer/importModal.tsx
+++ b/src/client/src/pages/overview/sidePanelContent/importer/importModal.tsx
@@ -1,5 +1,4 @@
 import { useContext } from "react";
-import { t } from "i18next";
 import { Button, Header, Icon, Modal, Segment } from "semantic-ui-react";
 import TranslationText from "../../../../components/legacyComponents/translationText.jsx";
 import { importBoreholes } from "../../../../api/fetchApiV2.js";
@@ -7,6 +6,8 @@ import { AlertContext } from "../../../../components/alert/alertContext.tsx";
 import WorkgroupSelect from "../commons/workgroupSelect.js";
 import ImportModalContent from "./importModalContent.js";
 import { ImportModalProps } from "../commons/actionsInterfaces.ts";
+import { capitalizeFirstLetter } from "../../../../utils.ts";
+import { useTranslation } from "react-i18next";
 
 const ImportModal = ({
   setCreating,
@@ -28,6 +29,7 @@ const ImportModal = ({
   refresh,
 }: ImportModalProps) => {
   const { showAlert } = useContext(AlertContext);
+  const { t } = useTranslation();
 
   const handleBoreholeImport = () => {
     const combinedFormData = new FormData();
@@ -103,7 +105,7 @@ const ImportModal = ({
         <Header as="h4" floated="right">
           <span>
             <a href={`/help/import`} rel="noopener noreferrer" target="_BLANK">
-              <TranslationText id="header_help" />
+              {t("header_help")}
             </a>
           </span>
         </Header>
@@ -115,9 +117,7 @@ const ImportModal = ({
           setSelectedLithologyFile={setSelectedLithologyFile}
           selectedFile={selectedFile}
         />
-        <h3>
-          <TranslationText firstUpperCase id="workgroup" />
-        </h3>
+        <h3>{capitalizeFirstLetter(t("workgroup"))}</h3>
         <WorkgroupSelect workgroup={workgroup} enabledWorkgroups={enabledWorkgroups} setWorkgroup={setWorkgroup} />
       </Modal.Content>
       <Modal.Actions>
@@ -127,7 +127,7 @@ const ImportModal = ({
           loading={creating}
           onClick={handleFormSubmit}
           secondary>
-          <Icon name={"upload"} /> {<TranslationText id="import" />}
+          <Icon name={"upload"} /> {t("import")}
         </Button>
       </Modal.Actions>
     </Modal>
diff --git a/src/client/src/pages/overview/sidePanelContent/importer/importModalContent.tsx b/src/client/src/pages/overview/sidePanelContent/importer/importModalContent.tsx
index 353d1a802..a54709a0d 100644
--- a/src/client/src/pages/overview/sidePanelContent/importer/importModalContent.tsx
+++ b/src/client/src/pages/overview/sidePanelContent/importer/importModalContent.tsx
@@ -1,11 +1,12 @@
 import { useCallback } from "react";
 import { Box, Stack } from "@mui/material/";
-import TranslationText from "../../../../components/legacyComponents/translationText.jsx";
 import { FileDropzone } from "../../../detail/attachments/fileDropzone.jsx";
 import { StackHalfWidth } from "../../../../components/styledComponents.js";
 import { downloadCodelistCsv } from "../../../../api/fetchApiV2.js";
 import { ImportContentProps } from "../commons/actionsInterfaces.js";
 import Downloadlink from "../../../detail/attachments/downloadlink.jsx";
+import { useTranslation } from "react-i18next";
+import { capitalizeFirstLetter } from "../../../../utils.ts";
 
 const SeparatorLine = () => {
   return (
@@ -40,6 +41,8 @@ const ImportModalContent = ({
   setSelectedLithologyFile,
   selectedFile,
 }: ImportContentProps) => {
+  const { t } = useTranslation();
+
   const handleBoreholeAttachmentChange = useCallback(
     (attachmentsFromDropzone: Blob[]) => {
       setSelectedBoreholeAttachments(attachmentsFromDropzone);
@@ -65,17 +68,15 @@ const ImportModalContent = ({
     <>
       <p>
         <Box>
-          <TranslationText id="csvCodeListReferenceExplanation" />
+          {t("csvCodeListReferenceExplanation")}
           <Downloadlink style={{ marginLeft: "0.2em" }} caption="Codelist" onDownload={downloadCodelistCsv} />
         </Box>
       </p>
       {SeparatorLine()}
-      <h3>
-        <TranslationText firstUpperCase id="boreholes" />
-      </h3>
+      <h3>{capitalizeFirstLetter(t("boreholes"))}</h3>
       <Stack direction="row" alignItems="flex-start">
         <StackHalfWidth direction="column">
-          <TranslationText id="csvFormatExplanation" />
+          {t("csvFormatExplanation")}
           {ExampleHeadings(
             "import_id;id_geodin_shortname;id_info_geol;id_original;" +
               "id_canton;id_geo_quat;id_geo_mol;id_geo_therm;id_top_fels;" +
@@ -100,13 +101,9 @@ const ImportModalContent = ({
           dataCy={"import-boreholeFile-input"}
         />
       </Stack>
-      <h3>
-        <TranslationText firstUpperCase id="attachments" />
-      </h3>
+      <h3>{capitalizeFirstLetter(t("attachments"))}</h3>
       <Stack direction="row" alignItems="flex-start">
-        <StackHalfWidth>
-          <TranslationText id="importBoreholeAttachment" />
-        </StackHalfWidth>
+        <StackHalfWidth>{t("importBoreholeAttachment")}</StackHalfWidth>
         <FileDropzone
           onHandleFileChange={handleBoreholeAttachmentChange}
           defaultText={"dropZoneAttachmentsText"}
@@ -118,12 +115,10 @@ const ImportModalContent = ({
         />
       </Stack>
       {SeparatorLine()}
-      <h3>
-        <TranslationText firstUpperCase id="lithology" />
-      </h3>
+      <h3>{capitalizeFirstLetter(t("lithology"))}</h3>
       <Stack direction="row" alignItems="flex-start">
         <StackHalfWidth>
-          <TranslationText id="csvFormatExplanation" />
+          {t("csvFormatExplanation")}
           {ExampleHeadings(
             "import_id;strati_import_id;strati_date;strati_name;from_depth;to_depth;" +
               "is_last;description_quality_id;lithology_id;" +
diff --git a/src/client/src/pages/settings/aboutSettings.jsx b/src/client/src/pages/settings/aboutSettings.jsx
index ea6af5997..dc0983d94 100644
--- a/src/client/src/pages/settings/aboutSettings.jsx
+++ b/src/client/src/pages/settings/aboutSettings.jsx
@@ -1,6 +1,5 @@
 import React from "react";
 import { withTranslation } from "react-i18next";
-import TranslationText from "../../components/legacyComponents/translationText.jsx";
 import { Header } from "semantic-ui-react";
 
 class AboutSettings extends React.Component {
@@ -20,6 +19,7 @@ class AboutSettings extends React.Component {
   }
 
   render() {
+    const { t } = this.props;
     return (
       <div
         style={{
@@ -33,7 +33,7 @@ class AboutSettings extends React.Component {
             textDecoration: "none",
             paddingBottom: "1em",
           }}>
-          {this.props.t("common:about")}
+          {t("common:about")}
         </Header>
         <div
           style={{
@@ -43,7 +43,7 @@ class AboutSettings extends React.Component {
             style={{
               fontWeight: "bold",
             }}>
-            <TranslationText id="sourceCode" />
+            {t("sourceCode")}
             :&nbsp;
           </span>
           <span>
@@ -60,7 +60,7 @@ class AboutSettings extends React.Component {
             style={{
               fontWeight: "bold",
             }}>
-            <TranslationText id="version" />
+            {t("version")}
             :&nbsp;
           </span>
           <span>
@@ -83,7 +83,7 @@ class AboutSettings extends React.Component {
             style={{
               fontWeight: "bold",
             }}>
-            <TranslationText id="license" />
+            {t("version")}
             :&nbsp;
           </span>
           <span>
@@ -102,7 +102,7 @@ class AboutSettings extends React.Component {
             textDecoration: "none",
             paddingTop: "2em",
           }}>
-          {this.props.t("common:licenseInformation")}
+          {t("common:licenseInformation")}
         </Header>
         {Object.keys(this.state.license).map(key => (
           <div key={key} data-cy={"credits-" + key}>
diff --git a/src/client/src/pages/settings/admin/adminSettings.jsx b/src/client/src/pages/settings/admin/adminSettings.jsx
index c619ab834..a55b07d3e 100644
--- a/src/client/src/pages/settings/admin/adminSettings.jsx
+++ b/src/client/src/pages/settings/admin/adminSettings.jsx
@@ -152,9 +152,7 @@ class AdminSettings extends React.Component {
           <Form>
             <Form.Group widths="equal">
               <Form.Field>
-                <label>
-                  <TranslationText id="username" />
-                </label>
+                <label>{t("username")}</label>
                 <div
                   data-cy="administration-username-label"
                   className="ui fluid input"
@@ -168,9 +166,7 @@ class AdminSettings extends React.Component {
                 </div>
               </Form.Field>
               <Form.Field>
-                <label>
-                  <TranslationText id="firstname" />
-                </label>
+                <label>{t("firstname")}</label>
                 <div
                   data-cy="administration-firstname-label"
                   className="ui fluid input"
@@ -184,9 +180,7 @@ class AdminSettings extends React.Component {
                 </div>
               </Form.Field>
               <Form.Field>
-                <label>
-                  <TranslationText id="lastname" />
-                </label>
+                <label>{t("lastname")}</label>
                 <div
                   data-cy="administration-lastname-label"
                   className="ui fluid input"
@@ -200,9 +194,7 @@ class AdminSettings extends React.Component {
                 </div>
               </Form.Field>
               <Form.Field>
-                <label>
-                  <TranslationText id="admin" />
-                </label>
+                <label>{t("admin")}</label>
                 <div
                   className="ui fluid input"
                   style={{
@@ -351,9 +343,7 @@ class AdminSettings extends React.Component {
                   </Modal.Description>
                 ) : this.state.deleteUser.deletable ? (
                   <Modal.Description>
-                    <p>
-                      <TranslationText id="msgDeleteUser" />
-                    </p>
+                    <p>{t("msgDeleteUser")}</p>
                     <ul>
                       <li>
                         <span
@@ -361,10 +351,10 @@ class AdminSettings extends React.Component {
                             fontWeight: "bold",
                             textTransform: "capitalize",
                           }}>
-                          <TranslationText id="disable" />:
+                          {t("disable")}:
                         </span>
                         <br />
-                        <TranslationText id="msgReenablingTip" />
+                        {t("msgReenablingTip")}
                         <br />
                         &nbsp;
                       </li>
@@ -374,18 +364,16 @@ class AdminSettings extends React.Component {
                             fontWeight: "bold",
                             textTransform: "capitalize",
                           }}>
-                          <TranslationText id="deleteForever" />
+                          {t("deleteForever")}
                         </span>
                         <br />
-                        <TranslationText id="msgDeletingUserTip" />
+                        {t("msgDeletingUserTip")}
                       </li>
                     </ul>
                   </Modal.Description>
                 ) : (
                   <Modal.Description>
-                    <p>
-                      <TranslationText id="msgDisablingUser" />
-                    </p>
+                    <p>{t("msgDisablingUser")}</p>
                     <ul>
                       <li>
                         <span
@@ -393,10 +381,11 @@ class AdminSettings extends React.Component {
                             fontWeight: "bold",
                             textTransform: "capitalize",
                           }}>
-                          <TranslationText id="disable" />:
+                          {t("msgDisablingUser")}
+                          {t("disable")}:
                         </span>
                         <br />
-                        <TranslationText id="msgReenablingTip" />
+                        {t("msgReenablingTip")}
                       </li>
                     </ul>
                   </Modal.Description>
@@ -421,7 +410,7 @@ class AdminSettings extends React.Component {
                         textTransform: "capitalize",
                         whiteSpace: "nowrap",
                       }}>
-                      <TranslationText id="cancel" />
+                      {t("cancel")}
                     </span>
                   </Button>
                   <div style={{ flex: "1 1 100%" }} />
@@ -448,7 +437,7 @@ class AdminSettings extends React.Component {
                           textTransform: "capitalize",
                           whiteSpace: "nowrap",
                         }}>
-                        <TranslationText id="enable" />
+                        {t("enable")}
                       </span>
                     </Button>
                   ) : (
@@ -472,7 +461,7 @@ class AdminSettings extends React.Component {
                           textTransform: "capitalize",
                           whiteSpace: "nowrap",
                         }}>
-                        <TranslationText id="disable" />
+                        {t("disable")}
                       </span>
                     </Button>
                   )}
@@ -497,7 +486,7 @@ class AdminSettings extends React.Component {
                           textTransform: "capitalize",
                           whiteSpace: "nowrap",
                         }}>
-                        <TranslationText id="deleteForever" />
+                        {t("deleteForever")}
                       </span>
                     </Button>
                   ) : null}
@@ -508,21 +497,15 @@ class AdminSettings extends React.Component {
               <Table celled compact selectable size="small">
                 <Table.Header>
                   <Table.Row>
-                    <Table.HeaderCell>
-                      <TranslationText id="username" />
-                    </Table.HeaderCell>
-                    <Table.HeaderCell>
-                      <TranslationText id="firstname" />
-                    </Table.HeaderCell>
-                    <Table.HeaderCell>
-                      <TranslationText id="lastname" />
-                    </Table.HeaderCell>
+                    <Table.HeaderCell>{t("username")}</Table.HeaderCell>
+                    <Table.HeaderCell>{t("firstname")}</Table.HeaderCell>
+                    <Table.HeaderCell>{t("lastname")}</Table.HeaderCell>
                     <Table.HeaderCell
                       colSpan="2"
                       style={{
                         width: "4em",
                       }}>
-                      <TranslationText id="admin" />
+                      {t("admin")}
                     </Table.HeaderCell>
                   </Table.Row>
                 </Table.Header>
@@ -575,7 +558,7 @@ class AdminSettings extends React.Component {
                                   fontStyle: "italic",
                                   marginLeft: "0.5em",
                                 }}>
-                                <TranslationText id="disabled" />
+                                {t("disabled")}
                                 &nbsp;
                                 <DateText date={currentUser.disabledAt} fromnow />
                                 &nbsp;(
@@ -586,7 +569,7 @@ class AdminSettings extends React.Component {
                           <Table.Cell>{currentUser.firstName}</Table.Cell>
                           <Table.Cell>{currentUser.lastName}</Table.Cell>
                           <Table.Cell textAlign="center">
-                            {currentUser.isAdmin === true ? <TranslationText id="yes" /> : <TranslationText id="no" />}
+                            {currentUser.isAdmin === true ? t("yes") : t("no")}
                           </Table.Cell>
                           <Table.Cell
                             style={{
@@ -601,11 +584,7 @@ class AdminSettings extends React.Component {
                                   deleteUser: currentUser,
                                 });
                               }}>
-                              {currentUser.disabledAt !== null ? (
-                                <TranslationText id="enable" />
-                              ) : (
-                                <TranslationText id="disable" />
-                              )}
+                              {currentUser.disabledAt !== null ? t("enable") : t("disable")}
                             </span>
                           </Table.Cell>
                         </Table.Row>
@@ -645,7 +624,7 @@ class AdminSettings extends React.Component {
                 <Form.Group autoComplete="off" widths="equal">
                   <Form.Input
                     fluid
-                    label={<TranslationText id="workgroup" />}
+                    label={t("workgroup")}
                     onChange={e => {
                       this.setState({
                         wName: e.target.value,
@@ -781,9 +760,7 @@ class AdminSettings extends React.Component {
                       </Modal.Description>
                     ) : this.state.deleteWorkgroup.boreholeCount === 0 ? (
                       <Modal.Description>
-                        <p>
-                          <TranslationText id="msgDeleteWorkgroup" />
-                        </p>
+                        <p>{t("msgDeleteWorkgroup")}</p>
                         <ul>
                           <li>
                             <span
@@ -791,10 +768,10 @@ class AdminSettings extends React.Component {
                                 fontWeight: "bold",
                                 textTransform: "capitalize",
                               }}>
-                              <TranslationText id="disable" />
+                              {t("disable")}
                             </span>
                             <br />
-                            <TranslationText id="msgReenablingTip" />
+                            {t("msgReenablingTip")}
                             <br />
                             &nbsp;
                           </li>
@@ -804,18 +781,16 @@ class AdminSettings extends React.Component {
                                 fontWeight: "bold",
                                 textTransform: "capitalize",
                               }}>
-                              <TranslationText id="deleteForever" />:
+                              {t("deleteForever")}:
                             </span>
                             <br />
-                            <TranslationText id="msgDeletingWorkgroupTip" />
+                            {t("msgDeletingWorkgroupTip")}
                           </li>
                         </ul>
                       </Modal.Description>
                     ) : (
                       <Modal.Description>
-                        <p>
-                          <TranslationText id="msgDisablingWorkgroup" />
-                        </p>
+                        <p>{t("msgDisablingWorkgroup")}</p>
                         <ul>
                           <li>
                             <span
@@ -823,10 +798,10 @@ class AdminSettings extends React.Component {
                                 fontWeight: "bold",
                                 textTransform: "capitalize",
                               }}>
-                              <TranslationText id="disable" />:
+                              {t("disable")}:
                             </span>
                             <br />
-                            <TranslationText id="msgReenablingTip" />
+                            {t("msgReenablingTip")}
                           </li>
                         </ul>
                       </Modal.Description>
@@ -849,7 +824,7 @@ class AdminSettings extends React.Component {
                             textTransform: "capitalize",
                             whiteSpace: "nowrap",
                           }}>
-                          <TranslationText id="cancel" />
+                          {t("cancel")}
                         </span>
                       </Button>
                       <div style={{ flex: "1 1 100%" }} />
@@ -875,7 +850,7 @@ class AdminSettings extends React.Component {
                               textTransform: "capitalize",
                               whiteSpace: "nowrap",
                             }}>
-                            <TranslationText id="enable" />
+                            {t("enable")}
                           </span>
                         </Button>
                       ) : (
@@ -900,7 +875,7 @@ class AdminSettings extends React.Component {
                               textTransform: "capitalize",
                               whiteSpace: "nowrap",
                             }}>
-                            <TranslationText id="disable" />
+                            {t("disable")}
                           </span>
                         </Button>
                       )}
@@ -926,7 +901,7 @@ class AdminSettings extends React.Component {
                               textTransform: "capitalize",
                               whiteSpace: "nowrap",
                             }}>
-                            <TranslationText id="deleteForever" />
+                            {t("deleteForever")}
                           </span>
                         </Button>
                       ) : null}
@@ -940,21 +915,21 @@ class AdminSettings extends React.Component {
                         style={{
                           whiteSpace: "nowrap",
                         }}>
-                        <TranslationText id="workgroup" />
+                        {t("workgroup")}
                       </Table.HeaderCell>
                       <Table.HeaderCell
                         style={{
                           textTransform: "capitalize",
                           whiteSpace: "nowrap",
                         }}>
-                        <TranslationText id="boreholes" />
+                        {t("boreholes")}
                       </Table.HeaderCell>
                       <Table.HeaderCell
                         style={{
                           textTransform: "capitalize",
                           whiteSpace: "nowrap",
                         }}>
-                        <TranslationText id="roles" />
+                        {t("roles")}
                       </Table.HeaderCell>
                       <Table.HeaderCell />
                     </Table.Row>
@@ -1016,7 +991,7 @@ class AdminSettings extends React.Component {
                                     fontStyle: "italic",
                                     marginLeft: "0.5em",
                                   }}>
-                                  <TranslationText id="disabled" />
+                                  {t("disabled")}
                                   &nbsp;
                                   <DateText date={workgroup.disabledAt} fromnow />
                                   &nbsp;(
@@ -1033,11 +1008,7 @@ class AdminSettings extends React.Component {
                                     deleteWorkgroup: workgroup,
                                   });
                                 }}>
-                                {workgroup.disabledAt !== null ? (
-                                  <TranslationText id="enableWorkgroup" />
-                                ) : (
-                                  <TranslationText id="disableWorkgroup" />
-                                )}
+                                {workgroup.disabledAt !== null ? t("enableWorkgroup") : t("disableWorkgroup")}
                               </span>
                             </Table.Cell>
                           </Table.Row>
diff --git a/src/client/src/pages/settings/components/editorSettingList/editorSettingList.jsx b/src/client/src/pages/settings/components/editorSettingList/editorSettingList.jsx
index 16eb7308c..d4b416bb7 100644
--- a/src/client/src/pages/settings/components/editorSettingList/editorSettingList.jsx
+++ b/src/client/src/pages/settings/components/editorSettingList/editorSettingList.jsx
@@ -2,6 +2,7 @@ import * as Styled from "./styles";
 import { Button, Segment } from "semantic-ui-react";
 import TranslationText from "../../../../components/legacyComponents/translationText.jsx";
 import _ from "lodash";
+import { useTranslation } from "react-i18next";
 
 const EditorSettingList = props => {
   const {
@@ -17,6 +18,8 @@ const EditorSettingList = props => {
     type,
   } = props;
 
+  const { t } = useTranslation();
+
   const isChecked = item => {
     return listName === "lithologyfields"
       ? isVisible(item.value)
@@ -62,13 +65,13 @@ const EditorSettingList = props => {
             onClick={() => {
               sendSelectAll(true);
             }}>
-            <TranslationText id="selectAll" />
+            {t("selectAll")}
           </Button>
           <Button
             onClick={() => {
               sendSelectAll(false);
             }}>
-            <TranslationText id="unselectAll" />
+            {t("unselectAll")}
           </Button>
         </Button.Group>
       </Segment>
diff --git a/src/client/src/pages/settings/components/editorSettingList/mapSettings.jsx b/src/client/src/pages/settings/components/editorSettingList/mapSettings.jsx
index 0aba9cc96..63429ebaf 100644
--- a/src/client/src/pages/settings/components/editorSettingList/mapSettings.jsx
+++ b/src/client/src/pages/settings/components/editorSettingList/mapSettings.jsx
@@ -5,14 +5,15 @@ import Highlighter from "react-highlight-words";
 import { Button, Divider, Dropdown, Input, Label, Popup, Segment } from "semantic-ui-react";
 import { getWms } from "../../../../api-lib/index";
 import { AlertContext } from "../../../../components/alert/alertContext";
-import TranslationText from "../../../../components/legacyComponents/translationText.jsx";
 import WMTSCapabilities from "ol/format/WMTSCapabilities";
 import WMSCapabilities from "ol/format/WMSCapabilities";
 import { theme } from "../../../../AppTheme";
+import { useTranslation } from "react-i18next";
 
 const MapSettings = props => {
   const { showAlert } = useContext(AlertContext);
   const { setting, i18n, rmExplorerMap, addExplorerMap, handleAddItem, handleOnChange, state, setState } = props;
+  const { t } = useTranslation();
 
   return (
     <>
@@ -36,7 +37,7 @@ const MapSettings = props => {
             fontSize: 18,
             fontWeight: "bold",
           }}>
-          <TranslationText id="map" />
+          {t("map")}
         </div>
         <div
           style={{
@@ -44,7 +45,7 @@ const MapSettings = props => {
             textAlign: "right",
           }}>
           <Button color="red" size="small">
-            {state.map === true ? <TranslationText id="collapse" /> : <TranslationText id="expand" />}
+            {state.map === true ? t("collapse") : t("expand")}
           </Button>
         </div>
       </div>
@@ -137,7 +138,7 @@ const MapSettings = props => {
                     }}
                     // size='mini'
                   >
-                    <TranslationText id="load" />
+                    {t("load")}
                   </Button>
                 </div>
                 {state.wmts !== null ? (
@@ -346,7 +347,7 @@ const MapSettings = props => {
                     style={{
                       flex: 1,
                     }}>
-                    <TranslationText id="usersMap" />
+                    {t("usersMap")}
                   </div>
                   <div>
                     <Input
diff --git a/src/client/src/pages/settings/editorSettings.jsx b/src/client/src/pages/settings/editorSettings.jsx
index cb7379026..03f524ce3 100644
--- a/src/client/src/pages/settings/editorSettings.jsx
+++ b/src/client/src/pages/settings/editorSettings.jsx
@@ -135,6 +135,7 @@ class EditorSettings extends React.Component {
       toggleFieldArray,
       toggleFilterArray,
       toggleField,
+      t,
     } = this.props;
     return (
       <div
@@ -210,7 +211,7 @@ class EditorSettings extends React.Component {
                   textAlign: "right",
                 }}>
                 <Button color="red" size="small">
-                  {filter.isSelected === true ? <TranslationText id="collapse" /> : <TranslationText id="expand" />}
+                  {filter.isSelected === true ? t("collapse") : t("expand")}
                 </Button>
               </div>
             </div>
diff --git a/src/client/src/utils.ts b/src/client/src/utils.ts
new file mode 100644
index 000000000..e32c4a5c9
--- /dev/null
+++ b/src/client/src/utils.ts
@@ -0,0 +1,4 @@
+export function capitalizeFirstLetter(text: string) {
+  if (!text) return "";
+  return text.charAt(0).toUpperCase() + text.slice(1);
+}