diff --git a/src/functions/translate.ts b/src/functions/translate.ts
index 63f100e..32a42f8 100644
--- a/src/functions/translate.ts
+++ b/src/functions/translate.ts
@@ -1,5 +1,11 @@
-import { IntlShape } from "react-intl";
+import { useIntl } from "react-intl";
 
-export const translate = (id: string, intl: IntlShape) => {
-  return intl.formatMessage({ id });
+export const useTranslation = () => {
+  const intl = useIntl();
+
+  return {
+    translate: (id: string) => {
+      return intl.formatMessage({ id });
+    },
+  };
 };
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 240d398..dae4094 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,17 +1,16 @@
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import { FiltersCard } from "../ui/FiltersCard";
-import { useIntl } from "react-intl";
 import { HomeTableCard } from "../ui/HomeTableCard";
-import { translate } from "../functions/translate";
+import { useTranslation } from "../functions/translate";
 
 export const Home = () => {
-  const intl = useIntl();
+  const { translate } = useTranslation();
 
   return (
     <Stack px={4} py={2} gap={2}>
       <Typography variant="headlineLarge" fontWeight={"400"} pb={2} pt={1} alignSelf={"center"}>
-        {translate("homepageTitle", intl)}
+        {translate("homepageTitle")}
       </Typography>
       <FiltersCard />
       <HomeTableCard />
diff --git a/src/ui/AccountNavigation.tsx b/src/ui/AccountNavigation.tsx
index 3f97e92..88b1a8d 100644
--- a/src/ui/AccountNavigation.tsx
+++ b/src/ui/AccountNavigation.tsx
@@ -9,11 +9,10 @@ import { useLogout, useUser } from "../hooks/useAuth";
 import { Link } from "./Link";
 import { Row } from "./Row";
 import { theme } from "../theme";
-import { translate } from "../functions/translate";
-import { useIntl } from "react-intl";
+import { useTranslation } from "../functions/translate";
 
 export const AccountNavigation = () => {
-  const intl = useIntl();
+  const { translate } = useTranslation();
   const { name } = useUser();
 
   const logout = useLogout();
@@ -37,7 +36,7 @@ export const AccountNavigation = () => {
         startIcon={<AccountCircleIcon fontSize="large" style={{ color: theme.palette.text.tertiary }} />}
         endIcon={<KeyboardArrowDownIcon />}
       >
-        <Typography variant="bodyMedium">{translate("myProfile", intl)}</Typography>
+        <Typography variant="bodyMedium">{translate("myProfile")}</Typography>
       </Button>
       <Menu
         id="account-menu"
@@ -68,7 +67,7 @@ export const AccountNavigation = () => {
             color: "primary.main",
           }}
         >
-          {translate("selectFavoriteSurveys", intl).toLocaleUpperCase()}
+          {translate("selectFavoriteSurveys").toLocaleUpperCase()}
         </MenuItem>
         {/* TODO: change link */}
         <MenuItem
@@ -80,9 +79,7 @@ export const AccountNavigation = () => {
         >
           <Row gap={0.5}>
             <OpenInNewIcon fontSize="littleIcon" />
-            <Typography variant={"bodyMedium"}>
-              {translate("goToHelp", intl).toLocaleUpperCase()}
-            </Typography>
+            <Typography variant={"bodyMedium"}>{translate("goToHelp").toLocaleUpperCase()}</Typography>
           </Row>
         </MenuItem>
         <MenuItem
@@ -94,7 +91,7 @@ export const AccountNavigation = () => {
             })
           }
         >
-          {translate("logout", intl)}
+          {translate("logout")}
         </MenuItem>
       </Menu>
     </Box>
diff --git a/src/ui/CommentDialog.tsx b/src/ui/CommentDialog.tsx
index 284a70d..10ba449 100644
--- a/src/ui/CommentDialog.tsx
+++ b/src/ui/CommentDialog.tsx
@@ -8,9 +8,8 @@ import { theme } from "../theme";
 import { ChangeEvent, useState } from "react";
 import { Box, Divider, InputAdornment, Stack, Typography } from "@mui/material";
 import { Row } from "./Row";
-import { translate } from "../functions/translate";
-import { useIntl } from "react-intl";
 import { useFetchMutation } from "../hooks/useFetchQuery";
+import { useTranslation } from "../functions/translate";
 type Props = {
   open: boolean;
   onClose: () => void;
@@ -19,7 +18,7 @@ type Props = {
 };
 
 export const CommentDialog = ({ open, onClose, comment = "", surveyUnitId }: Props) => {
-  const intl = useIntl();
+  const { translate } = useTranslation();
   const [newComment, setNewComment] = useState(comment);
 
   const { mutateAsync, isPending } = useFetchMutation("/api/survey-unit/{id}/comment", "put");
@@ -65,11 +64,11 @@ export const CommentDialog = ({ open, onClose, comment = "", surveyUnitId }: Pro
       <form onSubmit={handleSubmit}>
         <DialogTitle>
           <Row justifyContent={"space-between"}>
-            <Box>{translate("comment", intl)}</Box>
+            <Box>{translate("comment")}</Box>
             <Row gap={1}>
               <Divider orientation="vertical" variant="middle" sx={{ height: "20px" }} />
               <Box>
-                {translate("surveyUnitNumber", intl)} {surveyUnitId}
+                {translate("surveyUnitNumber")} {surveyUnitId}
               </Box>
             </Row>
           </Row>
@@ -94,8 +93,8 @@ export const CommentDialog = ({ open, onClose, comment = "", surveyUnitId }: Pro
               }}
               id="comment"
               name="comment"
-              label={translate("comment", intl)}
-              placeholder={translate("commentPlaceholder", intl)}
+              label={translate("comment")}
+              placeholder={translate("commentPlaceholder")}
               type="text"
               fullWidth
               variant="outlined"
@@ -105,24 +104,24 @@ export const CommentDialog = ({ open, onClose, comment = "", surveyUnitId }: Pro
               onChange={onChange}
             />
             <Typography variant="bodySmall" color={"text.tertiary"}>
-              {translate("commentDialogHelpText", intl)}
+              {translate("commentDialogHelpText")}
             </Typography>
           </Stack>
         </DialogContent>
         {comment === "" || isModified ? (
           <DialogActions>
-            <Button onClick={handleCancel}>{translate("cancel", intl)}</Button>
+            <Button onClick={handleCancel}>{translate("cancel")}</Button>
             <Button type="submit" variant="contained" disabled={!isModified || isPending}>
-              {translate("validate", intl)}
+              {translate("validate")}
             </Button>
           </DialogActions>
         ) : (
           <DialogActions>
             <Button onClick={handleDelete} disabled={isPending}>
-              {translate("delete", intl)}
+              {translate("delete")}
             </Button>
             <Button onClick={handleCancel} variant="contained">
-              {translate("closeButtonLabel", intl)}
+              {translate("closeButtonLabel")}
             </Button>
           </DialogActions>
         )}
diff --git a/src/ui/FiltersCard.tsx b/src/ui/FiltersCard.tsx
index 3979ba3..eb90c2f 100644
--- a/src/ui/FiltersCard.tsx
+++ b/src/ui/FiltersCard.tsx
@@ -7,9 +7,8 @@ import { SelectWithCheckbox, Option } from "./SelectWithCheckbox";
 import ClearIcon from "@mui/icons-material/Clear";
 import { useGetSearchFilter, useSearchForm, useToggleSearchFilter } from "../hooks/useSearchFilter";
 import Chip from "@mui/material/Chip";
-import { useIntl } from "react-intl";
 import { surveyUnitStatesEnum } from "../constants/surveyUnitStates";
-import { translate } from "../functions/translate";
+import { useTranslation } from "../functions/translate";
 
 const styles = {
   Grid: {
@@ -62,48 +61,46 @@ const subsampleMock = [
 ];
 
 export const FiltersCard = () => {
-  const intl = useIntl();
+  const { translate } = useTranslation();
   const filters = useGetSearchFilter();
   const { onReset } = useSearchForm(filters);
   const toggleSearchFilter = useToggleSearchFilter();
 
   // TODO: find enum
   const resultOptions = [].map(c => {
-    return { label: translate(c, intl), value: c };
+    return { label: translate(c), value: c };
   });
 
   const statesOptions = surveyUnitStatesEnum.map(s => {
-    return { label: translate(s, intl), value: s };
+    return { label: translate(s), value: s };
   });
 
   return (
     <Card sx={{ p: 2 }} elevation={2} variant="general">
       <Stack gap={2}>
         <Row justifyContent={"space-between"}>
-          <Typography variant="titleMedium">{translate("filterUnitsBy", intl)}</Typography>
+          <Typography variant="titleMedium">{translate("filterUnitsBy")}</Typography>
           <Button variant="text" color="inherit" onClick={onReset}>
-            <Typography sx={{ textDecoration: "underline" }}>
-              {translate("resetFilters", intl)}
-            </Typography>
+            <Typography sx={{ textDecoration: "underline" }}>{translate("resetFilters")}</Typography>
           </Button>
         </Row>
         <Row style={styles.Grid} sx={{ color: "text.tertiary" }}>
           <SelectWithCheckbox
-            label={translate("surveyFilterLabel", intl)}
+            label={translate("surveyFilterLabel")}
             options={surveysMock}
             name="campaigns"
             toggleSearchFilter={toggleSearchFilter}
             filters={filters}
           />
           <SelectWithCheckbox
-            label={translate("subSampleFilterLabel", intl)}
+            label={translate("subSampleFilterLabel")}
             options={subsampleMock}
             name="ssech"
             toggleSearchFilter={toggleSearchFilter}
             filters={filters}
           />
           <SelectWithCheckbox
-            label={translate("interviewerFilterLabel", intl)}
+            label={translate("interviewerFilterLabel")}
             options={interviewerMock}
             name="interviewer"
             toggleSearchFilter={toggleSearchFilter}
@@ -111,21 +108,21 @@ export const FiltersCard = () => {
             canSearch={true}
           />
           <SelectWithCheckbox
-            label={translate("statesFilterLabel", intl)}
+            label={translate("statesFilterLabel")}
             options={statesOptions}
             name="states"
             toggleSearchFilter={toggleSearchFilter}
             filters={filters}
           />
           <SelectWithCheckbox
-            label={translate("resultFilterLabel", intl)}
+            label={translate("resultFilterLabel")}
             options={resultOptions}
             name="result"
             toggleSearchFilter={toggleSearchFilter}
             filters={filters}
           />
           <SelectWithCheckbox
-            label={translate("priorityFilterLabel", intl)}
+            label={translate("priorityFilterLabel")}
             options={priorityOptions}
             name="priority"
             toggleSearchFilter={toggleSearchFilter}
diff --git a/src/ui/Header.tsx b/src/ui/Header.tsx
index 521ae55..5c7edf3 100644
--- a/src/ui/Header.tsx
+++ b/src/ui/Header.tsx
@@ -5,15 +5,14 @@ import { PropsWithChildren } from "react";
 import packageInfo from "../../package.json";
 import NotificationsIcon from "@mui/icons-material/Notifications";
 import { AccountNavigation } from "./AccountNavigation.tsx";
-import { translate } from "../functions/translate.ts";
-import { useIntl } from "react-intl";
+import { useTranslation } from "../functions/translate.ts";
 
 const style = {
   "&.MuiLink-root:hover": { color: "primary.main" },
 };
 
 export function Header() {
-  const intl = useIntl();
+  const { translate } = useTranslation();
 
   return (
     <Box sx={{ flexGrow: 1 }}>
@@ -42,16 +41,16 @@ export function Header() {
           <Row gap={8}>
             <Row gap={4} typography={"titleMedium"} color={"text.tertiary"}>
               <Link sx={style} color="inherit" component={RouterLink} underline="none" to="/follow">
-                {translate("goToFollowPage", intl)}
+                {translate("goToFollowPage")}
               </Link>
               <Link sx={style} color="inherit" component={RouterLink} underline="none" to="/read">
-                {translate("goToReadPage", intl)}
+                {translate("goToReadPage")}
               </Link>
               <Link sx={style} color="inherit" component={RouterLink} underline="none" to="/close">
-                {translate("goToClosePage", intl)}
+                {translate("goToClosePage")}
               </Link>
               <Link sx={style} color="inherit" component={RouterLink} underline="none" to="/notify">
-                {translate("goToNotifyPage", intl)}
+                {translate("goToNotifyPage")}
               </Link>
               <Link
                 sx={style}
@@ -60,7 +59,7 @@ export function Header() {
                 underline="none"
                 to="/collectOrganization"
               >
-                {translate("goToCollectOrganization", intl)}
+                {translate("goToCollectOrganization")}
               </Link>
               <Link
                 sx={style}
@@ -69,7 +68,7 @@ export function Header() {
                 underline="none"
                 to="/reassignment"
               >
-                {translate("goToReassignment", intl)}
+                {translate("goToReassignment")}
               </Link>
             </Row>
             <Row gap={1}>
diff --git a/src/ui/HomeTable.tsx b/src/ui/HomeTable.tsx
index c7d3f0b..efe212c 100644
--- a/src/ui/HomeTable.tsx
+++ b/src/ui/HomeTable.tsx
@@ -54,13 +54,7 @@ function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {
   if (orderBy === "contactOutcome") {
     const typeA = (a[orderBy] as SurveyUnitTemporaryType["contactOutcome"]).type;
     const typeB = (b[orderBy] as SurveyUnitTemporaryType["contactOutcome"]).type;
-    if (typeB < typeA) {
-      return -1;
-    }
-    if (typeB > typeA) {
-      return 1;
-    }
-    return 0;
+    return typeA.localeCompare(typeB);
   }
   if (b[orderBy] < a[orderBy]) {
     return -1;
diff --git a/src/ui/HomeTableCard.tsx b/src/ui/HomeTableCard.tsx
index 5116239..aeb6ec5 100644
--- a/src/ui/HomeTableCard.tsx
+++ b/src/ui/HomeTableCard.tsx
@@ -1,12 +1,11 @@
 import Card from "@mui/material/Card";
 import Stack from "@mui/material/Stack";
 import { SearchField } from "./SearchField";
-import { useIntl } from "react-intl";
 import { useDebouncedState } from "../hooks/useDebouncedState";
 import { HomeTable } from "./HomeTable";
 import { Filter, useGetSearchFilter } from "../hooks/useSearchFilter";
 import { SurveyUnitTemporaryType } from "../types/temporaryTypes";
-import { translate } from "../functions/translate";
+import { useTranslation } from "../functions/translate";
 
 export const surveyUnitsMock = [
   {
@@ -38,7 +37,7 @@ export const surveyUnitsMock = [
 ];
 
 export const HomeTableCard = () => {
-  const intl = useIntl();
+  const { translate } = useTranslation();
   const [search, setSearch] = useDebouncedState("", 500);
   const filters = useGetSearchFilter();
 
@@ -50,8 +49,8 @@ export const HomeTableCard = () => {
         <SearchField
           sx={{ maxWidth: "330px" }}
           onChange={e => setSearch(e.target.value)}
-          label={translate("toSearchLabel", intl)}
-          placeholder={translate("searchSurveyUnitPlaceholder", intl)}
+          label={translate("toSearchLabel")}
+          placeholder={translate("searchSurveyUnitPlaceholder")}
         />
         <HomeTable surveyUnits={filteredSurveyUnits} />
       </Stack>
diff --git a/src/ui/HomeTableRow.tsx b/src/ui/HomeTableRow.tsx
index 00b897a..c3a9ce1 100644
--- a/src/ui/HomeTableRow.tsx
+++ b/src/ui/HomeTableRow.tsx
@@ -1,6 +1,5 @@
 import TableRow from "@mui/material/TableRow";
 import TableCell from "@mui/material/TableCell";
-import { useIntl } from "react-intl";
 import { styled } from "@mui/material/styles";
 import { Row } from "./Row";
 import Tooltip from "@mui/material/Tooltip";
@@ -13,7 +12,7 @@ import { CommentDialog } from "./CommentDialog";
 import { Link } from "./Link";
 import { StateChip } from "./StateChip";
 import ClearIcon from "@mui/icons-material/Clear";
-import { translate } from "../functions/translate";
+import { useTranslation } from "../functions/translate";
 
 type Props = {
   surveyUnit: SurveyUnitTemporaryType; // TODO change type after backend rework
@@ -26,7 +25,7 @@ const StyledTableRow = styled(TableRow)(({ theme }) => ({
 }));
 
 export const HomeTableRow = ({ surveyUnit }: Props) => {
-  const intl = useIntl();
+  const { translate } = useTranslation();
 
   const [isDialogOpen, toggleDialog] = useToggle(false);
 
@@ -44,31 +43,31 @@ export const HomeTableRow = ({ surveyUnit }: Props) => {
         <StateChip value={surveyUnit.states} />
       </TableCell>
       <TableCell sx={{ typography: "itemSmall" }}>
-        {surveyUnit.result ? translate(surveyUnit.result, intl) : "-"}
+        {surveyUnit.result ? translate(surveyUnit.result) : "-"}
       </TableCell>
       <TableCell sx={{ typography: "itemSmall" }}>
-        {surveyUnit.contactOutcome ? translate(surveyUnit.contactOutcome.type, intl) : "-"}
+        {surveyUnit.contactOutcome ? translate(surveyUnit.contactOutcome.type) : "-"}
       </TableCell>
       <TableCell sx={{ typography: "itemSmall" }}>
-        {surveyUnit.priority ? translate("yes", intl) : translate("no", intl)}
+        {surveyUnit.priority ? translate("yes") : translate("no")}
       </TableCell>
       <TableCell>
         <Row gap={0.5}>
-          <Tooltip title={translate("readQuestionnaire", intl)} placement="bottom-start" arrow>
+          <Tooltip title={translate("readQuestionnaire")} placement="bottom-start" arrow>
             <IconButton color="inherit">
               <InsertDriveFileIcon fontSize="small" />
             </IconButton>
           </Tooltip>
           <Divider orientation="vertical" variant="middle" sx={{ height: "24px" }} />
 
-          <Tooltip title={translate("comment", intl)} placement="bottom-start" arrow>
+          <Tooltip title={translate("comment")} placement="bottom-start" arrow>
             <IconButton color="inherit" onClick={toggleDialog}>
               <InsertCommentIcon fontSize="small" />
             </IconButton>
           </Tooltip>
           <Divider orientation="vertical" variant="middle" sx={{ height: "24px" }} />
 
-          <Tooltip title={translate("close", intl)} placement="bottom-start" arrow>
+          <Tooltip title={translate("close")} placement="bottom-start" arrow>
             <IconButton color="inherit">
               <ClearIcon fontSize="small" />
             </IconButton>
diff --git a/src/ui/SelectWithCheckbox.tsx b/src/ui/SelectWithCheckbox.tsx
index 1d6f1c6..4b5537b 100644
--- a/src/ui/SelectWithCheckbox.tsx
+++ b/src/ui/SelectWithCheckbox.tsx
@@ -6,9 +6,8 @@ import shadows from "@mui/material/styles/shadows";
 import { Filter, emptyFilter } from "../hooks/useSearchFilter";
 import { useDebouncedState } from "../hooks/useDebouncedState";
 import { SearchField } from "./SearchField";
-import { useIntl } from "react-intl";
 import { StateChip } from "./StateChip";
-import { translate } from "../functions/translate";
+import { useTranslation } from "../functions/translate";
 
 const style = {
   root: {
@@ -37,7 +36,7 @@ export const SelectWithCheckbox = ({
   toggleSearchFilter,
   canSearch = false,
 }: Props) => {
-  const intl = useIntl();
+  const { translate } = useTranslation();
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const [debouncedSearch, setDebouncedSearch] = useDebouncedState("", 500);
 
@@ -82,8 +81,8 @@ export const SelectWithCheckbox = ({
           <SearchField
             sx={{ m: 2 }}
             onChange={e => setDebouncedSearch(e.target.value)}
-            label={translate("searchLabel", intl)}
-            placeholder={translate("searchInterviewerPlaceholder", intl)}
+            label={translate("searchLabel")}
+            placeholder={translate("searchInterviewerPlaceholder")}
           />
         )}
         <Box sx={{ overflow: "auto", maxHeight: "calc(100vh - 420px)" }}>
diff --git a/src/ui/StateChip.tsx b/src/ui/StateChip.tsx
index 7721006..9b7ad61 100644
--- a/src/ui/StateChip.tsx
+++ b/src/ui/StateChip.tsx
@@ -1,14 +1,13 @@
 import { Chip } from "@mui/material";
-import { translate } from "../functions/translate";
-import { useIntl } from "react-intl";
+import { useTranslation } from "../functions/translate";
 
 type Props = {
   value: string;
 };
 
 export const StateChip = ({ value }: Props) => {
-  const intl = useIntl();
-  return <Chip label={translate(value, intl)} variant="filled" color={getChipColor(value)} />;
+  const { translate } = useTranslation();
+  return <Chip label={translate(value)} variant="filled" color={getChipColor(value)} />;
 };
 
 const getChipColor = (value: string) => {
diff --git a/src/ui/TableFooter.tsx b/src/ui/TableFooter.tsx
index d8264c3..e35aaf6 100644
--- a/src/ui/TableFooter.tsx
+++ b/src/ui/TableFooter.tsx
@@ -1,6 +1,5 @@
 import { TableFooter as MuiTableFooter, TablePagination, TableRow } from "@mui/material";
-import { translate } from "../functions/translate";
-import { useIntl } from "react-intl";
+import { useTranslation } from "../functions/translate";
 
 const style = {
   root: {
@@ -33,17 +32,16 @@ export const TableFooter = ({
   onChangePage,
   onChangeRowsPerPage,
 }: TableFooterProps) => {
-  const intl = useIntl();
-
+  const { translate } = useTranslation();
   return (
     <MuiTableFooter>
       <TableRow>
         <TablePagination
           sx={style.root}
           rowsPerPageOptions={[10, 20, 50]}
-          labelRowsPerPage={translate("labelRowsPerPage", intl)}
+          labelRowsPerPage={translate("labelRowsPerPage")}
           labelDisplayedRows={page =>
-            `${page.from}-${page.to === -1 ? page.count : page.to} ${translate("on", intl)} ${page.count} ${translate("labelDisplayedRows", intl)}`
+            `${page.from}-${page.to === -1 ? page.count : page.to} ${translate("on")} ${page.count} ${translate("labelDisplayedRows")}`
           }
           count={count}
           rowsPerPage={rowsPerPage}
diff --git a/src/ui/TableHeadCell.tsx b/src/ui/TableHeadCell.tsx
index b5f5872..be0b2fb 100644
--- a/src/ui/TableHeadCell.tsx
+++ b/src/ui/TableHeadCell.tsx
@@ -1,6 +1,5 @@
 import { TableCell as MuiTableCell, TableCellProps, TableSortLabel } from "@mui/material";
-import { useIntl } from "react-intl";
-import { translate } from "../functions/translate";
+import { useTranslation } from "../functions/translate";
 
 type Props = {
   columnId: string;
@@ -20,7 +19,7 @@ export const TableHeadCell = ({
   onRequestSort,
   sx,
 }: Props) => {
-  const intl = useIntl();
+  const { translate } = useTranslation();
 
   const createSortHandler = (property: string) => (event: React.MouseEvent<unknown>) => {
     onRequestSort?.(event, property);
@@ -35,10 +34,10 @@ export const TableHeadCell = ({
           direction={orderBy === columnId ? order : "desc"}
           onClick={createSortHandler(columnId)}
         >
-          {translate(label, intl)}
+          {translate(label)}
         </TableSortLabel>
       ) : (
-        translate(label, intl)
+        translate(label)
       )}
     </MuiTableCell>
   );