diff --git a/api/src/i18n/services/translation.service.spec.ts b/api/src/i18n/services/translation.service.spec.ts
index 12ad3de0..0db4de37 100644
--- a/api/src/i18n/services/translation.service.spec.ts
+++ b/api/src/i18n/services/translation.service.spec.ts
@@ -4,7 +4,6 @@
  * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
  * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
  * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
- * 3. SaaS Restriction: This software, or any derivative of it, may not be used to offer a competing product or service (SaaS) without prior written consent from Hexastack. Offering the software as a service or using it in a commercial cloud environment without express permission is strictly prohibited.
  */
 
 import { EventEmitter2 } from '@nestjs/event-emitter';
diff --git a/frontend/src/app-components/attachment/AttachmentDialog.tsx b/frontend/src/app-components/attachment/AttachmentDialog.tsx
index 139b7629..0ddc30ec 100644
--- a/frontend/src/app-components/attachment/AttachmentDialog.tsx
+++ b/frontend/src/app-components/attachment/AttachmentDialog.tsx
@@ -9,11 +9,11 @@
 import { Button, Dialog, DialogActions, DialogContent } from "@mui/material";
 import { GridEventListener } from "@mui/x-data-grid";
 import { FC, useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
 
 import { DialogTitle } from "@/app-components/dialogs/DialogTitle";
 import { MediaLibrary } from "@/components/media-library";
 import { DialogControlProps } from "@/hooks/useDialog";
+import { useTranslate } from "@/hooks/useTranslate";
 import { IAttachment } from "@/types/attachment.types";
 
 export type AttachmentDialogProps = DialogControlProps<
@@ -28,7 +28,7 @@ export const AttachmentDialog: FC<AttachmentDialogProps> = ({
   accept,
   ...rest
 }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const [selected, setSelected] = useState<IAttachment | null>(null);
   const handleSelection: GridEventListener<"rowClick"> = (data) => {
     setSelected(data.row);
diff --git a/frontend/src/app-components/attachment/AttachmentInput.tsx b/frontend/src/app-components/attachment/AttachmentInput.tsx
index e718e1ee..82f3938b 100644
--- a/frontend/src/app-components/attachment/AttachmentInput.tsx
+++ b/frontend/src/app-components/attachment/AttachmentInput.tsx
@@ -8,7 +8,6 @@
 
 import { Box, FormHelperText, FormLabel } from "@mui/material";
 import { forwardRef } from "react";
-import { useTranslation } from "react-i18next";
 
 import { useGet } from "@/hooks/crud/useGet";
 import { useHasPermission } from "@/hooks/useHasPermission";
@@ -47,7 +46,6 @@ const AttachmentInput = forwardRef<HTMLDivElement, AttachmentThumbnailProps>(
     ref,
   ) => {
     const hasPermission = useHasPermission();
-    const { t } = useTranslation();
     const handleChange = (attachment: IAttachment | null) => {
       onChange && onChange(attachment?.id || null, attachment?.type || null);
     };
@@ -84,9 +82,7 @@ const AttachmentInput = forwardRef<HTMLDivElement, AttachmentThumbnailProps>(
             enableMediaLibrary={enableMediaLibrary}
             onChange={handleChange}
           />
-        ) : (
-          t("message.no_attachment")
-        )}
+        ) : null}
         {helperText ? (
           <FormHelperText error={error}>{helperText}</FormHelperText>
         ) : null}
diff --git a/frontend/src/app-components/attachment/AttachmentThumbnail.tsx b/frontend/src/app-components/attachment/AttachmentThumbnail.tsx
index c211d080..6075b67c 100644
--- a/frontend/src/app-components/attachment/AttachmentThumbnail.tsx
+++ b/frontend/src/app-components/attachment/AttachmentThumbnail.tsx
@@ -20,7 +20,6 @@ import {
   Typography,
 } from "@mui/material";
 import { FC } from "react";
-import { useTranslation } from "react-i18next";
 
 import { useDelete } from "@/hooks/crud/useDelete";
 import { useGet } from "@/hooks/crud/useGet";
@@ -28,6 +27,7 @@ import { useDialog } from "@/hooks/useDialog";
 import useFormattedFileSize from "@/hooks/useFormattedFileSize";
 import { useHasPermission } from "@/hooks/useHasPermission";
 import { useToast } from "@/hooks/useToast";
+import { useTranslate } from "@/hooks/useTranslate";
 import { EntityType } from "@/services/types";
 import { IAttachment } from "@/types/attachment.types";
 import { PermissionAction } from "@/types/permission.types";
@@ -84,7 +84,7 @@ const AttachmentThumbnail: FC<AttachmentThumbnailProps> = ({
     entity: EntityType.ATTACHMENT,
   });
   const { toast } = useToast();
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const deleteDialogCtl = useDialog<string>(false);
   const { mutateAsync: deleteAttachment } = useDelete(EntityType.ATTACHMENT, {
     onError: () => {
diff --git a/frontend/src/app-components/attachment/AttachmentUploader.tsx b/frontend/src/app-components/attachment/AttachmentUploader.tsx
index 498474a1..915ff657 100644
--- a/frontend/src/app-components/attachment/AttachmentUploader.tsx
+++ b/frontend/src/app-components/attachment/AttachmentUploader.tsx
@@ -10,11 +10,11 @@ import CloudUploadIcon from "@mui/icons-material/CloudUpload";
 import FolderCopyIcon from "@mui/icons-material/FolderCopy";
 import { Box, Button, Divider, Grid, styled, Typography } from "@mui/material";
 import { ChangeEvent, DragEvent, FC, useState } from "react";
-import { useTranslation } from "react-i18next";
 
 import { useUpload } from "@/hooks/crud/useUpload";
 import { getDisplayDialogs, useDialog } from "@/hooks/useDialog";
 import { useToast } from "@/hooks/useToast";
+import { useTranslate } from "@/hooks/useTranslate";
 import { EntityType } from "@/services/types";
 import { IAttachment } from "@/types/attachment.types";
 
@@ -76,7 +76,7 @@ const AttachmentUploader: FC<FileUploadProps> = ({
   const [attachment, setAttachment] = useState<IAttachment | undefined>(
     undefined,
   );
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const [isDragOver, setIsDragOver] = useState<boolean>(false);
   const { toast } = useToast();
   const { mutateAsync: uploadAttachment } = useUpload(EntityType.ATTACHMENT, {
diff --git a/frontend/src/app-components/auth/Login.tsx b/frontend/src/app-components/auth/Login.tsx
index 8c22aca6..1fbdba3e 100755
--- a/frontend/src/app-components/auth/Login.tsx
+++ b/frontend/src/app-components/auth/Login.tsx
@@ -14,11 +14,11 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
 
 import { useConfirmAccount, useLogin } from "@/hooks/entities/auth-hooks";
 import { useAuth } from "@/hooks/useAuth";
 import { useToast } from "@/hooks/useToast";
+import { useTranslate } from "@/hooks/useTranslate";
 import { useValidationRules } from "@/hooks/useValidationRules";
 import { ILoginAttributes } from "@/types/auth/login.types";
 
@@ -33,7 +33,7 @@ const DEFAULT_VALUES: ILoginAttributes = {
 };
 
 export const Login = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const { toast } = useToast();
   const router = useRouter();
   const { authenticate } = useAuth();
@@ -91,59 +91,57 @@ export const Login = () => {
   return (
     <Grid container justifyContent="center">
       <Paper sx={{ width: { xs: "100%", md: "33%" }, p: 2 }}>
-          <form onSubmit={handleSubmit(onSubmitForm)}>
-            <ContentContainer gap={2}>
-              <Typography variant="h1" fontSize="19px" fontWeight={700}>
-                {t("title.login")}
-              </Typography>
-              <Input
-                label={t("placeholder.email")}
-                error={!!errors.identifier}
-                required
-                autoFocus
-                InputProps={{
-                  startAdornment: <Adornment Icon={EmailIcon} />,
-                }}
-                helperText={
-                  errors.identifier ? errors.identifier.message : null
-                }
-                {...register("identifier", validationRules.email)}
-              />
+        <form onSubmit={handleSubmit(onSubmitForm)}>
+          <ContentContainer gap={2}>
+            <Typography variant="h1" fontSize="19px" fontWeight={700}>
+              {t("title.login")}
+            </Typography>
+            <Input
+              label={t("placeholder.email")}
+              error={!!errors.identifier}
+              required
+              autoFocus
+              InputProps={{
+                startAdornment: <Adornment Icon={EmailIcon} />,
+              }}
+              helperText={errors.identifier ? errors.identifier.message : null}
+              {...register("identifier", validationRules.email)}
+            />
 
-              <PasswordInput
-                label={t("placeholder.password")}
-                error={!!errors.password}
-                required
-                InputProps={{
-                  startAdornment: <Adornment Icon={KeyIcon} />,
-                }}
-                helperText={errors.password ? errors.password.message : null}
-                {...register("password", validationRules.password)}
-              />
-              <Grid container gap={2} justifyContent="space-between">
-                <Grid alignContent="center">
-                  <Link href="/reset">
-                    <Button variant="text" sx={{ textDecoration: "underline" }}>
-                      {t("link.reset")}
-                    </Button>
-                  </Link>
-                </Grid>
-                <Grid>
-                  <Button
-                    color="primary"
-                    variant="contained"
-                    type="submit"
-                    endIcon={<KeyboardArrowRightIcon />}
-                    onClick={handleSubmit(onSubmitForm)}
-                    disabled={isLoading}
-                  >
-                    {t("button.login")}
+            <PasswordInput
+              label={t("placeholder.password")}
+              error={!!errors.password}
+              required
+              InputProps={{
+                startAdornment: <Adornment Icon={KeyIcon} />,
+              }}
+              helperText={errors.password ? errors.password.message : null}
+              {...register("password", validationRules.password)}
+            />
+            <Grid container gap={2} justifyContent="space-between">
+              <Grid alignContent="center">
+                <Link href="/reset">
+                  <Button variant="text" sx={{ textDecoration: "underline" }}>
+                    {t("link.reset")}
                   </Button>
-                </Grid>
+                </Link>
               </Grid>
-            </ContentContainer>
-          </form>
-        </Paper>
+              <Grid>
+                <Button
+                  color="primary"
+                  variant="contained"
+                  type="submit"
+                  endIcon={<KeyboardArrowRightIcon />}
+                  onClick={handleSubmit(onSubmitForm)}
+                  disabled={isLoading}
+                >
+                  {t("button.login")}
+                </Button>
+              </Grid>
+            </Grid>
+          </ContentContainer>
+        </form>
+      </Paper>
     </Grid>
   );
 };
diff --git a/frontend/src/app-components/auth/Register.tsx b/frontend/src/app-components/auth/Register.tsx
index e8eadb10..deedd7e8 100644
--- a/frontend/src/app-components/auth/Register.tsx
+++ b/frontend/src/app-components/auth/Register.tsx
@@ -22,10 +22,10 @@ import {
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
 
 import { useAcceptInvite } from "@/hooks/entities/auth-hooks";
 import { useToast } from "@/hooks/useToast";
+import { useTranslate } from "@/hooks/useTranslate";
 import { useValidationRules } from "@/hooks/useValidationRules";
 import { IRegisterAttributes } from "@/types/auth/register.types";
 import { JWT } from "@/utils/Jwt";
@@ -49,7 +49,7 @@ const DEFAULT_VALUES: IRegisterAttributes = {
 type TRegisterExtendedPayload = IRegisterAttributes & { password2: string };
 
 export const Register = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const router = useRouter();
   const { toast } = useToast();
   const { mutateAsync: acceptInvite, isLoading } = useAcceptInvite({
diff --git a/frontend/src/app-components/auth/ResetPassword.tsx b/frontend/src/app-components/auth/ResetPassword.tsx
index 2eb284be..f68a4466 100644
--- a/frontend/src/app-components/auth/ResetPassword.tsx
+++ b/frontend/src/app-components/auth/ResetPassword.tsx
@@ -11,10 +11,10 @@ import { Button, Grid, Paper, Typography } from "@mui/material";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
 
 import { useResetPassword } from "@/hooks/entities/reset-hooks";
 import { useToast } from "@/hooks/useToast";
+import { useTranslate } from "@/hooks/useTranslate";
 import { useValidationRules } from "@/hooks/useValidationRules";
 
 import { ContentContainer } from "../dialogs";
@@ -22,7 +22,7 @@ import { Adornment } from "../inputs/Adornment";
 import { PasswordInput } from "../inputs/PasswordInput";
 
 export const ResetPassword = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const { toast } = useToast();
   const rules = useValidationRules();
   const validationRules = {
diff --git a/frontend/src/app-components/auth/resetPasswordRequest.tsx b/frontend/src/app-components/auth/resetPasswordRequest.tsx
index 704b9b20..a5d13135 100644
--- a/frontend/src/app-components/auth/resetPasswordRequest.tsx
+++ b/frontend/src/app-components/auth/resetPasswordRequest.tsx
@@ -9,16 +9,16 @@
 import { Button, Grid, Paper, Typography } from "@mui/material";
 import Link from "next/link";
 import { useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
 
 import { useRequestResetPassword } from "@/hooks/entities/reset-hooks";
 import { useToast } from "@/hooks/useToast";
+import { useTranslate } from "@/hooks/useTranslate";
 
 import { ContentContainer } from "../dialogs";
 import { Input } from "../inputs/Input";
 
 export const ResetPasswordRequest = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const { toast } = useToast();
   const {
     register,
diff --git a/frontend/src/app-components/buttons/DialogButtons.tsx b/frontend/src/app-components/buttons/DialogButtons.tsx
index 2ff94a61..36fbe909 100644
--- a/frontend/src/app-components/buttons/DialogButtons.tsx
+++ b/frontend/src/app-components/buttons/DialogButtons.tsx
@@ -9,7 +9,8 @@
 import CheckIcon from "@mui/icons-material/Check";
 import CloseIcon from "@mui/icons-material/Close";
 import { Button } from "@mui/material";
-import { useTranslation } from "react-i18next";
+
+import { useTranslate } from "@/hooks/useTranslate";
 
 interface DialogButtonsProps {
   closeDialog?: () => void;
@@ -20,7 +21,7 @@ const DialogButtons: React.FC<DialogButtonsProps> = ({
   closeDialog,
   handleSubmit,
 }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
 
   return (
     <>
diff --git a/frontend/src/app-components/dialogs/DeleteDialog.tsx b/frontend/src/app-components/dialogs/DeleteDialog.tsx
index 6fc9dcd1..f9114992 100644
--- a/frontend/src/app-components/dialogs/DeleteDialog.tsx
+++ b/frontend/src/app-components/dialogs/DeleteDialog.tsx
@@ -16,10 +16,10 @@ import {
   Button,
 } from "@mui/material";
 import { FC } from "react";
-import { useTranslation } from "react-i18next";
 
 import { DialogTitle } from "@/app-components/dialogs/DialogTitle";
 import { DialogControl } from "@/hooks/useDialog";
+import { useTranslate } from "@/hooks/useTranslate";
 
 export type DeleteDialogProps = DialogControl<string>;
 export const DeleteDialog: FC<DeleteDialogProps> = ({
@@ -27,7 +27,7 @@ export const DeleteDialog: FC<DeleteDialogProps> = ({
   callback,
   closeDialog: closeFunction,
 }: DeleteDialogProps) => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
 
   return (
     <Dialog open={open} fullWidth onClose={closeFunction}>
diff --git a/frontend/src/app-components/inputs/FilterTextfield.tsx b/frontend/src/app-components/inputs/FilterTextfield.tsx
index ef77e43d..cd58df06 100644
--- a/frontend/src/app-components/inputs/FilterTextfield.tsx
+++ b/frontend/src/app-components/inputs/FilterTextfield.tsx
@@ -8,13 +8,14 @@
 
 import SearchIcon from "@mui/icons-material/Search";
 import { TextFieldProps } from "@mui/material";
-import { useTranslation } from "react-i18next";
+
+import { useTranslate } from "@/hooks/useTranslate";
 
 import { Adornment } from "./Adornment";
 import { Input } from "./Input";
 
 export const FilterTextfield = (props: TextFieldProps) => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
 
   //TODO: replace the native delete text button by a styled custom button
   return (
diff --git a/frontend/src/app-components/inputs/MultipleInput.tsx b/frontend/src/app-components/inputs/MultipleInput.tsx
index 62751e72..17c73a38 100644
--- a/frontend/src/app-components/inputs/MultipleInput.tsx
+++ b/frontend/src/app-components/inputs/MultipleInput.tsx
@@ -24,7 +24,8 @@ import {
   useEffect,
   useState,
 } from "react";
-import { useTranslation } from "react-i18next";
+
+import { useTranslate } from "@/hooks/useTranslate";
 
 import { Input } from "./Input";
 
@@ -54,7 +55,7 @@ const MultipleInput = forwardRef<HTMLDivElement, MultipleInputProps>(
     },
     ref,
   ) => {
-    const { t } = useTranslation();
+    const { t } = useTranslate();
     const [inputs, setInputs] = useState<Array<{ id: number; value: string }>>(
       value
         ? value.length >= minInput
diff --git a/frontend/src/app-components/menus/Sidebar.tsx b/frontend/src/app-components/menus/Sidebar.tsx
index 59c77730..ca621817 100644
--- a/frontend/src/app-components/menus/Sidebar.tsx
+++ b/frontend/src/app-components/menus/Sidebar.tsx
@@ -26,8 +26,9 @@ import {
 import { OverridableComponent } from "@mui/material/OverridableComponent";
 import Link from "next/link";
 import { useState, useEffect } from "react";
-import { useTranslation } from "react-i18next";
 
+import { useTranslate } from "@/hooks/useTranslate";
+import { TTranslationKeys } from "@/i18n/i18n.types";
 import { theme } from "@/layout/themes/theme";
 import { SXStyleOptions } from "@/utils/SXStyleOptions";
 
@@ -160,7 +161,7 @@ const VerticalMenuItem = ({
   isNested?: boolean;
   isToggled?: boolean;
 }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const linkProps = {
     href,
     onClick,
@@ -173,7 +174,11 @@ const VerticalMenuItem = ({
       : theme.palette.text.secondary;
 
   return (
-    <Tooltip title={t(text)} disableHoverListener={isToggled} {...tooltip}>
+    <Tooltip
+      title={String(t(text as TTranslationKeys))}
+      disableHoverListener={isToggled}
+      {...tooltip}
+    >
       <StyledListItemButton
         selected={!!(!(isToggled && !href && isSubmenuOpen) && isSelected)}
         {...linkProps}
@@ -196,7 +201,7 @@ const VerticalMenuItem = ({
         ) : null}
         {isToggled ? (
           <StyledListItemText
-            primary={t(text)}
+            primary={String(t(text as TTranslationKeys))}
             isNested={isNested}
             isSelected={isSelected}
           />
@@ -221,7 +226,7 @@ export const Sidebar = ({
   isToggled,
   toggleFunction,
 }: TSidebarProps) => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const [openItems, setOpenItems] = useState<string[]>([]);
   const toggleCollapse = (menuItem: string) => () => {
     if (isToggled || !openItems.includes(menuItem))
@@ -301,7 +306,9 @@ export const Sidebar = ({
         return (
           <StyledDivider key={`divider_${text}`}>
             {isToggled && text ? (
-              <StyledListSubheader>{t(text)}</StyledListSubheader>
+              <StyledListSubheader>
+                {String(t(text as TTranslationKeys))}
+              </StyledListSubheader>
             ) : null}
           </StyledDivider>
         );
diff --git a/frontend/src/app-components/tables/NoDataOverlay.tsx b/frontend/src/app-components/tables/NoDataOverlay.tsx
index 5d0b7b0f..78b15dbc 100644
--- a/frontend/src/app-components/tables/NoDataOverlay.tsx
+++ b/frontend/src/app-components/tables/NoDataOverlay.tsx
@@ -7,12 +7,13 @@
  */
 
 import { Grid, Typography } from "@mui/material";
-import { useTranslation } from "react-i18next";
+
+import { useTranslate } from "@/hooks/useTranslate";
 
 import NoDataIcon from "../svg/NoDataIcon";
 
 export const NoDataOverlay = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
 
   return (
     <Grid
diff --git a/frontend/src/app-components/tables/columns/getColumns.tsx b/frontend/src/app-components/tables/columns/getColumns.tsx
index 6a266a54..ca758d55 100644
--- a/frontend/src/app-components/tables/columns/getColumns.tsx
+++ b/frontend/src/app-components/tables/columns/getColumns.tsx
@@ -23,25 +23,38 @@ import {
   GridTreeNodeWithRender,
   GridValidRowModel,
 } from "@mui/x-data-grid";
-import { useTranslation } from "react-i18next";
 
 import { useHasPermission } from "@/hooks/useHasPermission";
+import { useTranslate } from "@/hooks/useTranslate";
+import { TTranslationKeys } from "@/i18n/i18n.types";
 import { theme } from "@/layout/themes/theme";
 import { EntityType } from "@/services/types";
 import { PermissionAction } from "@/types/permission.types";
 
 export enum ActionColumnLabel {
-  Edit = "button.edit",
-  Delete = "button.delete",
-  Values = "button.values",
-  Manage_Roles = "button.manage_roles",
-  Permissions = "button.permissions",
-  Content = "button.content",
-  Fields = "button.fields",
-  Manage_Labels = "title.manage_labels",
-  Toggle = "button.toggle",
+  Edit = "Edit",
+  Delete = "Delete",
+  Values = "Values",
+  Manage_Roles = "Manage_Roles",
+  Permissions = "Permissions",
+  Content = "Content",
+  Fields = "Fields",
+  Manage_Labels = "Manage_Labels",
+  Toggle = "Toggle",
 }
 
+const ACTION_COLUMN_LABEL_MAP: Record<ActionColumnLabel, TTranslationKeys> = {
+  [ActionColumnLabel.Edit]: "button.edit",
+  [ActionColumnLabel.Delete]: "button.delete",
+  [ActionColumnLabel.Values]: "button.values",
+  [ActionColumnLabel.Manage_Roles]: "button.manage_roles",
+  [ActionColumnLabel.Permissions]: "button.permissions",
+  [ActionColumnLabel.Content]: "button.content",
+  [ActionColumnLabel.Fields]: "button.fields",
+  [ActionColumnLabel.Manage_Labels]: "title.manage_labels",
+  [ActionColumnLabel.Toggle]: "button.toggle",
+} as const;
+
 export interface ActionColumn<T extends GridValidRowModel> {
   label: ActionColumnLabel;
   action?: (row: T) => void;
@@ -99,7 +112,7 @@ function StackComponent<T extends GridValidRowModel>({
   actions: ActionColumn<T>[];
   params: GridRenderCellParams<T, any, any, GridTreeNodeWithRender>;
 }) {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
 
   return (
     <Stack height="100%" alignItems="center" direction="row" spacing={0.5}>
@@ -116,9 +129,13 @@ function StackComponent<T extends GridValidRowModel>({
             key={label}
             className="actionButton"
             icon={
-              <Tooltip title={helperText || t(label)}>{getIcon(label)}</Tooltip>
+              <Tooltip
+                title={helperText || String(t(ACTION_COLUMN_LABEL_MAP[label]))}
+              >
+                {getIcon(label)}
+              </Tooltip>
             }
-            label={helperText || t(label)}
+            label={helperText || t(ACTION_COLUMN_LABEL_MAP[label])}
             showInMenu={false}
             sx={{
               color:
diff --git a/frontend/src/components/Menu/MenuAccordion.tsx b/frontend/src/components/Menu/MenuAccordion.tsx
index 962e380b..46d3b6ac 100644
--- a/frontend/src/components/Menu/MenuAccordion.tsx
+++ b/frontend/src/components/Menu/MenuAccordion.tsx
@@ -25,13 +25,13 @@ import {
   styled,
 } from "@mui/material";
 import React, { FC, useState } from "react";
-import { useTranslation } from "react-i18next";
 
 import { AnimatedChevron } from "@/app-components/icons/AnimatedChevron";
 import { UnifiedIcon } from "@/app-components/icons/UnifiedIcon";
 import { TMenuItem } from "@/app-components/menus/Sidebar";
 import { useGetFromCache } from "@/hooks/crud/useGet";
 import { useHasPermission } from "@/hooks/useHasPermission";
+import { useTranslate } from "@/hooks/useTranslate";
 import { theme } from "@/layout/themes/theme";
 import { EntityType } from "@/services/types";
 import { IMenuNode } from "@/types/menu-tree.types";
@@ -103,7 +103,7 @@ const MenuItem: FC<MenuAccordionProps> = ({
   onUpdate,
   onDelete,
 }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const hasPermission = useHasPermission();
 
   return (
diff --git a/frontend/src/components/Menu/MenuDialog.tsx b/frontend/src/components/Menu/MenuDialog.tsx
index 0483c0a1..1a417d68 100644
--- a/frontend/src/components/Menu/MenuDialog.tsx
+++ b/frontend/src/components/Menu/MenuDialog.tsx
@@ -15,7 +15,6 @@ import {
 } from "@mui/material";
 import { useEffect, FC } from "react";
 import { useForm, Controller } from "react-hook-form";
-import { useTranslation } from "react-i18next";
 
 import DialogButtons from "@/app-components/buttons/DialogButtons";
 import { DialogTitle } from "@/app-components/dialogs/DialogTitle";
@@ -23,6 +22,8 @@ import { ContentContainer } from "@/app-components/dialogs/layouts/ContentContai
 import { ContentItem } from "@/app-components/dialogs/layouts/ContentItem";
 import { Input } from "@/app-components/inputs/Input";
 import { ToggleableInput } from "@/app-components/inputs/ToggleableInput";
+import { useTranslate } from "@/hooks/useTranslate";
+import { TNestedTranslation } from "@/i18n/i18n.types";
 import { IMenuItem, IMenuItemAttributes, MenuType } from "@/types/menu.types";
 import { isAbsoluteUrl } from "@/utils/URL";
 
@@ -45,7 +46,7 @@ export const MenuDialog: FC<MenuDialogProps> = ({
   parentId,
   ...rest
 }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const {
     reset,
     resetField,
@@ -123,9 +124,11 @@ export const MenuDialog: FC<MenuDialogProps> = ({
                         helperText={errors.type ? errors.type.message : null}
                         {...rest}
                       >
-                        {Object.keys(MenuType).map((value, key) => (
+                        {(
+                          Object.keys(MenuType) as TNestedTranslation<"label">[]
+                        ).map((value, key) => (
                           <MenuItem value={value} key={key}>
-                            {t(`label.${value}`)}
+                            {t("label", value)}
                           </MenuItem>
                         ))}
                       </Input>
diff --git a/frontend/src/components/Menu/index.tsx b/frontend/src/components/Menu/index.tsx
index ead52812..bab6d447 100644
--- a/frontend/src/components/Menu/index.tsx
+++ b/frontend/src/components/Menu/index.tsx
@@ -10,7 +10,6 @@ import { faBars } from "@fortawesome/free-solid-svg-icons";
 import AddIcon from "@mui/icons-material/Add";
 import { Grid, Paper, Button, Box, debounce } from "@mui/material";
 import React, { useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
 
 import { DeleteDialog } from "@/app-components/dialogs/DeleteDialog";
 import { NoDataOverlay } from "@/app-components/tables/NoDataOverlay";
@@ -19,6 +18,7 @@ import { useDelete } from "@/hooks/crud/useDelete";
 import { useFind } from "@/hooks/crud/useFind";
 import { useUpdate } from "@/hooks/crud/useUpdate";
 import { useHasPermission } from "@/hooks/useHasPermission";
+import { useTranslate } from "@/hooks/useTranslate";
 import { PageHeader } from "@/layout/content/PageHeader";
 import { EntityType } from "@/services/types";
 import { IMenuItem } from "@/types/menu.types";
@@ -28,7 +28,7 @@ import MenuAccordion from "./MenuAccordion";
 import { MenuDialog } from "./MenuDialog";
 
 export const Menu = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const [addDialogOpened, setAddDialogOpened] = useState(false);
   const [editDialogOpened, setEditDialogOpened] = useState(false);
   const [selectedMenuId, setSelectedMenuId] = useState<string | undefined>(
diff --git a/frontend/src/components/categories/CategoryDialog.tsx b/frontend/src/components/categories/CategoryDialog.tsx
index af27e349..f6baa5e9 100644
--- a/frontend/src/components/categories/CategoryDialog.tsx
+++ b/frontend/src/components/categories/CategoryDialog.tsx
@@ -9,7 +9,6 @@
 import { Dialog, DialogActions, DialogContent } from "@mui/material";
 import { FC, useEffect } from "react";
 import { useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
 
 import DialogButtons from "@/app-components/buttons/DialogButtons";
 import { DialogTitle } from "@/app-components/dialogs/DialogTitle";
@@ -20,6 +19,7 @@ import { useCreate } from "@/hooks/crud/useCreate";
 import { useUpdate } from "@/hooks/crud/useUpdate";
 import { DialogControlProps } from "@/hooks/useDialog";
 import { useToast } from "@/hooks/useToast";
+import { useTranslate } from "@/hooks/useTranslate";
 import { EntityType } from "@/services/types";
 import { ICategory, ICategoryAttributes } from "@/types/category.types";
 
@@ -31,7 +31,7 @@ export const CategoryDialog: FC<CategoryDialogProps> = ({
   closeDialog,
   ...rest
 }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const { toast } = useToast();
   const { mutateAsync: createCategory } = useCreate(EntityType.CATEGORY, {
     onError: () => {
diff --git a/frontend/src/components/categories/index.tsx b/frontend/src/components/categories/index.tsx
index b3c152f1..93b5d5af 100644
--- a/frontend/src/components/categories/index.tsx
+++ b/frontend/src/components/categories/index.tsx
@@ -10,7 +10,6 @@ import AddIcon from "@mui/icons-material/Add";
 import FolderIcon from "@mui/icons-material/Folder";
 import { Button, Grid, Paper } from "@mui/material";
 import { GridColDef } from "@mui/x-data-grid";
-import { useTranslation } from "react-i18next";
 
 import { DeleteDialog } from "@/app-components/dialogs/DeleteDialog";
 import { FilterTextfield } from "@/app-components/inputs/FilterTextfield";
@@ -26,6 +25,7 @@ import { getDisplayDialogs, useDialog } from "@/hooks/useDialog";
 import { useHasPermission } from "@/hooks/useHasPermission";
 import { useSearch } from "@/hooks/useSearch";
 import { useToast } from "@/hooks/useToast";
+import { useTranslate } from "@/hooks/useTranslate";
 import { PageHeader } from "@/layout/content/PageHeader";
 import { EntityType } from "@/services/types";
 import { PermissionAction } from "@/types/permission.types";
@@ -35,7 +35,7 @@ import { CategoryDialog } from "./CategoryDialog";
 import { ICategory } from "../../types/category.types";
 
 export const Categories = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const { toast } = useToast();
   const addDialogCtl = useDialog<ICategory>(false);
   const editDialogCtl = useDialog<ICategory>(false);
diff --git a/frontend/src/components/content-types/ContentTypeDialog.tsx b/frontend/src/components/content-types/ContentTypeDialog.tsx
index a278662e..f1e5ec08 100644
--- a/frontend/src/components/content-types/ContentTypeDialog.tsx
+++ b/frontend/src/components/content-types/ContentTypeDialog.tsx
@@ -9,7 +9,6 @@
 import { Dialog, DialogActions, DialogContent } from "@mui/material";
 import { FC, useEffect } from "react";
 import { useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
 
 import DialogButtons from "@/app-components/buttons/DialogButtons";
 import { DialogTitle } from "@/app-components/dialogs/DialogTitle";
@@ -20,6 +19,7 @@ import { useCreate } from "@/hooks/crud/useCreate";
 import { useUpdate } from "@/hooks/crud/useUpdate";
 import { DialogControlProps } from "@/hooks/useDialog";
 import { useToast } from "@/hooks/useToast";
+import { useTranslate } from "@/hooks/useTranslate";
 import { EntityType } from "@/services/types";
 import {
   IContentType,
@@ -33,7 +33,7 @@ export const ContentTypeDialog: FC<ContentTypeDialogProps> = ({
   closeDialog,
 }) => {
   const { toast } = useToast();
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const {
     handleSubmit,
     register,
diff --git a/frontend/src/components/content-types/EditContentTypeFieldsDialog.tsx b/frontend/src/components/content-types/EditContentTypeFieldsDialog.tsx
index af9186aa..95ba915f 100644
--- a/frontend/src/components/content-types/EditContentTypeFieldsDialog.tsx
+++ b/frontend/src/components/content-types/EditContentTypeFieldsDialog.tsx
@@ -17,7 +17,6 @@ import {
 } from "@mui/material";
 import { useEffect } from "react";
 import { useFieldArray, useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
 
 import DialogButtons from "@/app-components/buttons/DialogButtons";
 import {
@@ -30,6 +29,7 @@ import { useGet } from "@/hooks/crud/useGet";
 import { useUpdate } from "@/hooks/crud/useUpdate";
 import { DialogControlProps } from "@/hooks/useDialog";
 import { useToast } from "@/hooks/useToast";
+import { useTranslate } from "@/hooks/useTranslate";
 import { EntityType } from "@/services/types";
 import { ContentFieldType, IContentType } from "@/types/content-type.types";
 
@@ -43,7 +43,7 @@ export const EditContentTypeFieldsDialog = ({
   closeDialog,
   open,
 }: EditContentTypeDialogFieldsProps) => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const { isLoading, data, refetch } = useGet(contentType?.id || "", {
     entity: EntityType.CONTENT_TYPE,
   });
diff --git a/frontend/src/components/content-types/components/FieldInput.tsx b/frontend/src/components/content-types/components/FieldInput.tsx
index c8c1c1c3..5d5d5b3c 100644
--- a/frontend/src/components/content-types/components/FieldInput.tsx
+++ b/frontend/src/components/content-types/components/FieldInput.tsx
@@ -16,10 +16,10 @@ import {
   UseFormSetValue,
   useWatch,
 } from "react-hook-form";
-import { useTranslation } from "react-i18next";
 
 import { IconButton } from "@/app-components/buttons/IconButton";
 import { Input } from "@/app-components/inputs/Input";
+import { useTranslate } from "@/hooks/useTranslate";
 import { ContentFieldType, IContentType } from "@/types/content-type.types";
 import { slugify } from "@/utils/string";
 
@@ -34,7 +34,7 @@ export const FieldInput = ({
   control: Control<Partial<IContentType>>;
   setValue: UseFormSetValue<Partial<IContentType>>;
 }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const label = useWatch({
     control: props.control,
     name: `fields.${index}.label`,
diff --git a/frontend/src/components/content-types/index.tsx b/frontend/src/components/content-types/index.tsx
index 79f0a9e7..23e8e9fb 100644
--- a/frontend/src/components/content-types/index.tsx
+++ b/frontend/src/components/content-types/index.tsx
@@ -10,7 +10,6 @@ import { faAlignLeft } from "@fortawesome/free-solid-svg-icons";
 import AddIcon from "@mui/icons-material/Add";
 import { Button, Grid, Paper } from "@mui/material";
 import { useRouter } from "next/router";
-import { useTranslation } from "react-i18next";
 
 import { DeleteDialog } from "@/app-components/dialogs";
 import { FilterTextfield } from "@/app-components/inputs/FilterTextfield";
@@ -26,6 +25,7 @@ import { getDisplayDialogs, useDialog } from "@/hooks/useDialog";
 import { useHasPermission } from "@/hooks/useHasPermission";
 import { useSearch } from "@/hooks/useSearch";
 import { useToast } from "@/hooks/useToast";
+import { useTranslate } from "@/hooks/useTranslate";
 import { PageHeader } from "@/layout/content/PageHeader";
 import { EntityType } from "@/services/types";
 import { IContentType } from "@/types/content-type.types";
@@ -36,7 +36,7 @@ import { ContentTypeDialog } from "./ContentTypeDialog";
 import { EditContentTypeFieldsDialog } from "./EditContentTypeFieldsDialog";
 
 export const ContentTypes = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const { toast } = useToast();
   const router = useRouter();
   // Dialog Controls
diff --git a/frontend/src/components/contents/ContentDialog.tsx b/frontend/src/components/contents/ContentDialog.tsx
index 1c845762..4d1b27d1 100644
--- a/frontend/src/components/contents/ContentDialog.tsx
+++ b/frontend/src/components/contents/ContentDialog.tsx
@@ -23,7 +23,6 @@ import {
   FieldErrors,
   useForm,
 } from "react-hook-form";
-import { useTranslation } from "react-i18next";
 
 import AttachmentInput from "@/app-components/attachment/AttachmentInput";
 import DialogButtons from "@/app-components/buttons/DialogButtons";
@@ -36,6 +35,8 @@ import { useCreate } from "@/hooks/crud/useCreate";
 import { useUpdate } from "@/hooks/crud/useUpdate";
 import { DialogControlProps } from "@/hooks/useDialog";
 import { useToast } from "@/hooks/useToast";
+import { useTranslate } from "@/hooks/useTranslate";
+import { TNestedTranslation } from "@/i18n/i18n.types";
 import { EntityType } from "@/services/types";
 import {
   ContentField,
@@ -60,7 +61,7 @@ const ContentFieldInput: React.FC<ContentFieldInput> = ({
   field,
   errors,
 }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
 
   switch (contentField.type) {
     case ContentFieldType.TEXT:
@@ -70,7 +71,7 @@ const ContentFieldInput: React.FC<ContentFieldInput> = ({
         <Input
           multiline={contentField.type === ContentFieldType.TEXTAREA}
           rows={contentField.type === ContentFieldType.TEXTAREA ? 5 : 1}
-          label={t(`label.${contentField.name}`, {
+          label={t("label", contentField.name as TNestedTranslation<"label">, {
             defaultValue: contentField.label,
           })}
           InputProps={
@@ -92,7 +93,7 @@ const ContentFieldInput: React.FC<ContentFieldInput> = ({
     case ContentFieldType.CHECKBOX:
       return (
         <FormControlLabel
-          label={t(`label.${contentField.name}`, {
+          label={t("label", contentField.name as TNestedTranslation<"label">, {
             defaultValue: contentField.label,
           })}
           {...field}
@@ -102,7 +103,7 @@ const ContentFieldInput: React.FC<ContentFieldInput> = ({
     case ContentFieldType.FILE:
       return (
         <AttachmentInput
-          label={t(`label.${contentField.name}`, {
+          label={t("label", contentField.name as TNestedTranslation<"label">, {
             defaultValue: contentField.label,
           })}
           {...field}
@@ -133,7 +134,7 @@ export const ContentDialog: FC<ContentDialogProps> = ({
     content: undefined,
     contentType: undefined,
   };
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const { toast } = useToast();
   const {
     reset,
diff --git a/frontend/src/components/contents/index.tsx b/frontend/src/components/contents/index.tsx
index 0634b5a1..c2c104bc 100644
--- a/frontend/src/components/contents/index.tsx
+++ b/frontend/src/components/contents/index.tsx
@@ -12,7 +12,6 @@ import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import { Button, Chip, Grid, Paper, Switch, Typography } from "@mui/material";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { useTranslation } from "react-i18next";
 
 import { DeleteDialog } from "@/app-components/dialogs";
 import { FilterTextfield } from "@/app-components/inputs/FilterTextfield";
@@ -30,6 +29,7 @@ import { getDisplayDialogs, useDialog } from "@/hooks/useDialog";
 import { useHasPermission } from "@/hooks/useHasPermission";
 import { useSearch } from "@/hooks/useSearch";
 import { useToast } from "@/hooks/useToast";
+import { useTranslate } from "@/hooks/useTranslate";
 import { PageHeader } from "@/layout/content/PageHeader";
 import { EntityType, Format } from "@/services/types";
 import { IContentType } from "@/types/content-type.types";
@@ -40,7 +40,7 @@ import { getDateTimeFormatter } from "@/utils/date";
 import { ContentDialog } from "./ContentDialog";
 
 export const Contents = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const { toast } = useToast();
   const { query } = useRouter();
   // Dialog Controls
diff --git a/frontend/src/components/context-vars/ContextVarDialog.tsx b/frontend/src/components/context-vars/ContextVarDialog.tsx
index e19c8903..05f5e0f3 100644
--- a/frontend/src/components/context-vars/ContextVarDialog.tsx
+++ b/frontend/src/components/context-vars/ContextVarDialog.tsx
@@ -16,7 +16,6 @@ import {
 } from "@mui/material";
 import { FC, useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
 
 import DialogButtons from "@/app-components/buttons/DialogButtons";
 import { DialogTitle } from "@/app-components/dialogs/DialogTitle";
@@ -27,6 +26,7 @@ import { useCreate } from "@/hooks/crud/useCreate";
 import { useUpdate } from "@/hooks/crud/useUpdate";
 import { DialogControlProps } from "@/hooks/useDialog";
 import { useToast } from "@/hooks/useToast";
+import { useTranslate } from "@/hooks/useTranslate";
 import { EntityType } from "@/services/types";
 import { IContextVar, IContextVarAttributes } from "@/types/context-var.types";
 import { slugify } from "@/utils/string";
@@ -38,7 +38,7 @@ export const ContextVarDialog: FC<ContextVarDialogProps> = ({
   closeDialog,
   ...rest
 }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const { toast } = useToast();
   const { mutateAsync: createContextVar } = useCreate(EntityType.CONTEXT_VAR, {
     onError: () => {
diff --git a/frontend/src/components/context-vars/index.tsx b/frontend/src/components/context-vars/index.tsx
index 8037c466..3cb5e1c5 100644
--- a/frontend/src/components/context-vars/index.tsx
+++ b/frontend/src/components/context-vars/index.tsx
@@ -11,7 +11,6 @@ import AddIcon from "@mui/icons-material/Add";
 import { Button, Grid, Paper, Switch } from "@mui/material";
 import { GridColDef } from "@mui/x-data-grid";
 import React from "react";
-import { useTranslation } from "react-i18next";
 
 import { DeleteDialog } from "@/app-components/dialogs/DeleteDialog";
 import { FilterTextfield } from "@/app-components/inputs/FilterTextfield";
@@ -28,6 +27,7 @@ import { getDisplayDialogs, useDialog } from "@/hooks/useDialog";
 import { useHasPermission } from "@/hooks/useHasPermission";
 import { useSearch } from "@/hooks/useSearch";
 import { useToast } from "@/hooks/useToast";
+import { useTranslate } from "@/hooks/useTranslate";
 import { PageHeader } from "@/layout/content/PageHeader";
 import { EntityType } from "@/services/types";
 import { IContextVar } from "@/types/context-var.types";
@@ -37,7 +37,7 @@ import { getDateTimeFormatter } from "@/utils/date";
 import { ContextVarDialog } from "./ContextVarDialog";
 
 export const ContextVars = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const { toast } = useToast();
   const addDialogCtl = useDialog<IContextVar>(false);
   const editDialogCtl = useDialog<IContextVar>(false);
diff --git a/frontend/src/components/dashboard/AudienceChart.tsx b/frontend/src/components/dashboard/AudienceChart.tsx
index 67042ed2..589f2c41 100644
--- a/frontend/src/components/dashboard/AudienceChart.tsx
+++ b/frontend/src/components/dashboard/AudienceChart.tsx
@@ -8,17 +8,17 @@
 
 import { Card, CardContent, Divider } from "@mui/material";
 import { MultiLineChart, ResponsiveChartContainer } from "eazychart-react";
-import { useTranslation } from "react-i18next";
 
 import { StyledCardHeader } from "@/app-components/card/StyledCardHeader";
 import { useFindStats } from "@/hooks/entities/bot-stat-hooks";
+import { useTranslate } from "@/hooks/useTranslate";
 import { LineChartStats } from "@/types/bot-stat.types";
 import { buildMultiLineChartConfig, transformToLine } from "@/utils/chart";
 
 import { NoDataChart } from "./NoDataChart";
 
 const AudienceChart = () => {
-  const { t, i18n } = useTranslation();
+  const { t, i18n } = useTranslate();
   const { data: stats } = useFindStats<LineChartStats>("audiance");
   const { data, domainKeys } = transformToLine(stats);
 
diff --git a/frontend/src/components/dashboard/ConversationChart.tsx b/frontend/src/components/dashboard/ConversationChart.tsx
index 8a7940b4..5c6b7bf9 100644
--- a/frontend/src/components/dashboard/ConversationChart.tsx
+++ b/frontend/src/components/dashboard/ConversationChart.tsx
@@ -8,17 +8,17 @@
 
 import { Card, CardContent, Divider } from "@mui/material";
 import { MultiLineChart, ResponsiveChartContainer } from "eazychart-react";
-import { useTranslation } from "react-i18next";
 
 import { StyledCardHeader } from "@/app-components/card/StyledCardHeader";
 import { useFindStats } from "@/hooks/entities/bot-stat-hooks";
+import { useTranslate } from "@/hooks/useTranslate";
 import { LineChartStats } from "@/types/bot-stat.types";
 import { buildMultiLineChartConfig, transformToLine } from "@/utils/chart";
 
 import { NoDataChart } from "./NoDataChart";
 
 const ConversationChart = () => {
-  const { t, i18n } = useTranslation();
+  const { t, i18n } = useTranslate();
   const { data: conversations } = useFindStats<LineChartStats>("conversation");
   const { data: conversationData, domainKeys: conversationDomains } =
     transformToLine(conversations);
diff --git a/frontend/src/components/dashboard/MessageChart.tsx b/frontend/src/components/dashboard/MessageChart.tsx
index fc70cde0..53a27944 100644
--- a/frontend/src/components/dashboard/MessageChart.tsx
+++ b/frontend/src/components/dashboard/MessageChart.tsx
@@ -8,17 +8,17 @@
 
 import { Card, CardContent, Divider } from "@mui/material";
 import { MultiLineChart, ResponsiveChartContainer } from "eazychart-react";
-import { useTranslation } from "react-i18next";
 
 import { StyledCardHeader } from "@/app-components/card/StyledCardHeader";
 import { useFindStats } from "@/hooks/entities/bot-stat-hooks";
+import { useTranslate } from "@/hooks/useTranslate";
 import { LineChartStats } from "@/types/bot-stat.types";
 import { buildMultiLineChartConfig, transformToLine } from "@/utils/chart";
 
 import { NoDataChart } from "./NoDataChart";
 
 const MessageChart = () => {
-  const { t, i18n } = useTranslation();
+  const { t, i18n } = useTranslate();
   const { data: stats } = useFindStats<LineChartStats>("messages");
   const { data, domainKeys: domains } = transformToLine(stats);
 
diff --git a/frontend/src/components/dashboard/NoDataChart.tsx b/frontend/src/components/dashboard/NoDataChart.tsx
index 28dba0a3..e4728709 100644
--- a/frontend/src/components/dashboard/NoDataChart.tsx
+++ b/frontend/src/components/dashboard/NoDataChart.tsx
@@ -9,8 +9,8 @@
 import { faChartLine } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { styled, Typography } from "@mui/material";
-import { useTranslation } from "react-i18next";
 
+import { useTranslate } from "@/hooks/useTranslate";
 import { SXStyleOptions } from "@/utils/SXStyleOptions";
 
 export const StyledMessage = styled(Typography)(
@@ -24,7 +24,7 @@ export const StyledMessage = styled(Typography)(
 );
 
 export const NoDataChart = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
 
   return (
     <StyledMessage>
diff --git a/frontend/src/components/dashboard/PopularChart.tsx b/frontend/src/components/dashboard/PopularChart.tsx
index c3568cc1..b8aa141d 100644
--- a/frontend/src/components/dashboard/PopularChart.tsx
+++ b/frontend/src/components/dashboard/PopularChart.tsx
@@ -8,17 +8,17 @@
 
 import { Card, CardContent, Divider } from "@mui/material";
 import { ColumnChart, ResponsiveChartContainer } from "eazychart-react";
-import { useTranslation } from "react-i18next";
 
 import { StyledCardHeader } from "@/app-components/card/StyledCardHeader";
 import { useFindStats } from "@/hooks/entities/bot-stat-hooks";
+import { useTranslate } from "@/hooks/useTranslate";
 import { ColumnChartStats } from "@/types/bot-stat.types";
 import { buildColumnChartConfig } from "@/utils/chart";
 
 import { NoDataChart } from "./NoDataChart";
 
 const PopularChart = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const { data } = useFindStats<ColumnChartStats>("popularBlocks");
 
   return (
diff --git a/frontend/src/components/dashboard/index.tsx b/frontend/src/components/dashboard/index.tsx
index 7cc6fd10..bd69b8fc 100644
--- a/frontend/src/components/dashboard/index.tsx
+++ b/frontend/src/components/dashboard/index.tsx
@@ -9,8 +9,8 @@
 import Home from "@mui/icons-material/Home";
 import { Grid, GridProps } from "@mui/material";
 import { PropsWithChildren } from "react";
-import { useTranslation } from "react-i18next";
 
+import { useTranslate } from "@/hooks/useTranslate";
 import { PageHeader } from "@/layout/content/PageHeader";
 
 import AudienceChart from "./AudienceChart";
@@ -23,7 +23,7 @@ const DashboardContent = (props: PropsWithChildren<GridProps>) => (
 );
 
 export const Dashboard = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
 
   return (
     <Grid container gap={3} flexDirection="column">
diff --git a/frontend/src/components/inbox/components/AttachmentViewer.tsx b/frontend/src/components/inbox/components/AttachmentViewer.tsx
index 76da28a4..59a4e18a 100644
--- a/frontend/src/components/inbox/components/AttachmentViewer.tsx
+++ b/frontend/src/components/inbox/components/AttachmentViewer.tsx
@@ -9,10 +9,10 @@
 import DownloadIcon from "@mui/icons-material/Download";
 import { Button, Dialog, DialogContent } from "@mui/material";
 import { FC } from "react";
-import { useTranslation } from "react-i18next";
 
 import { DialogTitle } from "@/app-components/dialogs";
 import { useDialog } from "@/hooks/useDialog";
+import { useTranslate } from "@/hooks/useTranslate";
 import {
   AttachmentAttrs,
   FileType,
@@ -68,7 +68,7 @@ const componentMap: { [key in FileType]: FC<AttachmentInterface> } = {
     return <audio controls src={props.url} />;
   },
   [FileType.file]: (props: AttachmentInterface) => {
-    const { t } = useTranslation();
+    const { t } = useTranslate();
 
     return (
       <div>
diff --git a/frontend/src/components/inbox/components/Chat.tsx b/frontend/src/components/inbox/components/Chat.tsx
index ad3ae692..42216e49 100644
--- a/frontend/src/components/inbox/components/Chat.tsx
+++ b/frontend/src/components/inbox/components/Chat.tsx
@@ -16,11 +16,11 @@ import {
 } from "@chatscope/chat-ui-kit-react";
 import QuestionAnswerTwoToneIcon from "@mui/icons-material/QuestionAnswerTwoTone";
 import { debounce, Grid } from "@mui/material";
-import { useTranslation } from "react-i18next";
 
 import { useCreate } from "@/hooks/crud/useCreate";
 import { useAuth } from "@/hooks/useAuth";
 import { useConfig } from "@/hooks/useConfig";
+import { useTranslate } from "@/hooks/useTranslate";
 import { EntityType } from "@/services/types";
 
 import { ChatActions } from "./ChatActions";
@@ -35,7 +35,7 @@ import { useInfinitedLiveMessages } from "../hooks/useInfiniteLiveMessages";
 
 export function Chat() {
   const { apiUrl } = useConfig();
-  const { t, i18n } = useTranslation();
+  const { t, i18n } = useTranslate();
   const { subscriber } = useChat();
   const { user } = useAuth();
   const { mutateAsync: createMessage } = useCreate(EntityType.MESSAGE);
diff --git a/frontend/src/components/inbox/components/ChatActions.tsx b/frontend/src/components/inbox/components/ChatActions.tsx
index dc9b7036..63e269f3 100644
--- a/frontend/src/components/inbox/components/ChatActions.tsx
+++ b/frontend/src/components/inbox/components/ChatActions.tsx
@@ -10,7 +10,6 @@ import { Avatar } from "@chatscope/chat-ui-kit-react";
 import { faHandPointRight } from "@fortawesome/free-solid-svg-icons";
 import { Button, Grid, IconButton, MenuItem, Typography } from "@mui/material";
 import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
 
 import { UnifiedIcon } from "@/app-components/icons/UnifiedIcon";
 import { Input } from "@/app-components/inputs/Input";
@@ -18,6 +17,7 @@ import { useFind } from "@/hooks/crud/useFind";
 import { useUpdate } from "@/hooks/crud/useUpdate";
 import { useAuth } from "@/hooks/useAuth";
 import { useConfig } from "@/hooks/useConfig";
+import { useTranslate } from "@/hooks/useTranslate";
 import { EntityType } from "@/services/types";
 
 import { getAvatarSrc } from "../helpers/mapMessages";
@@ -25,7 +25,7 @@ import { useChat } from "../hooks/ChatContext";
 
 export const ChatActions = () => {
   const { apiUrl } = useConfig();
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const { subscriber: activeChat } = useChat();
   const [takeoverBy, setTakeoverBy] = useState<string>(
     activeChat?.assignedTo ?? "",
diff --git a/frontend/src/components/inbox/components/ConversationsList.tsx b/frontend/src/components/inbox/components/ConversationsList.tsx
index 55c701c9..b0c25d0a 100644
--- a/frontend/src/components/inbox/components/ConversationsList.tsx
+++ b/frontend/src/components/inbox/components/ConversationsList.tsx
@@ -13,9 +13,9 @@ import {
 } from "@chatscope/chat-ui-kit-react";
 import InboxIcon from "@mui/icons-material/MoveToInbox";
 import { Chip, debounce, Grid } from "@mui/material";
-import { useTranslation } from "react-i18next";
 
 import { useConfig } from "@/hooks/useConfig";
+import { useTranslate } from "@/hooks/useTranslate";
 import { Title } from "@/layout/content/Title";
 import { EntityType } from "@/services/types";
 
@@ -30,7 +30,7 @@ export const SubscribersList = (props: {
   assignedTo: AssignedTo;
 }) => {
   const { apiUrl } = useConfig();
-  const { t, i18n } = useTranslation();
+  const { t, i18n } = useTranslate();
   const chat = useChat();
   const { fetchNextPage, isFetching, subscribers, hasNextPage } =
     useInfiniteLiveSubscribers(props);
diff --git a/frontend/src/components/inbox/index.tsx b/frontend/src/components/inbox/index.tsx
index a6190a3b..6a56e84a 100644
--- a/frontend/src/components/inbox/index.tsx
+++ b/frontend/src/components/inbox/index.tsx
@@ -10,11 +10,11 @@ import { MainContainer, Search, Sidebar } from "@chatscope/chat-ui-kit-react";
 import "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
 import { Grid, MenuItem } from "@mui/material";
 import { useState } from "react";
-import { useTranslation } from "react-i18next";
 
 import AutoCompleteEntitySelect from "@/app-components/inputs/AutoCompleteEntitySelect";
 import { Input } from "@/app-components/inputs/Input";
 import { useSearch } from "@/hooks/useSearch";
+import { useTranslate } from "@/hooks/useTranslate";
 import { EntityType, Format } from "@/services/types";
 import { IChannel } from "@/types/channel.types";
 import { ISubscriber } from "@/types/subscriber.types";
@@ -25,7 +25,7 @@ import { ChatProvider } from "./hooks/ChatContext";
 import { AssignedTo } from "./types";
 
 export const Inbox = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const { onSearch, searchPayload } = useSearch<ISubscriber>({
     $or: ["first_name", "last_name"],
   });
diff --git a/frontend/src/components/labels/LabelDialog.tsx b/frontend/src/components/labels/LabelDialog.tsx
index 5048fc24..3c9b50a5 100644
--- a/frontend/src/components/labels/LabelDialog.tsx
+++ b/frontend/src/components/labels/LabelDialog.tsx
@@ -9,7 +9,6 @@
 import { Dialog, DialogActions, DialogContent } from "@mui/material";
 import { FC, useEffect } from "react";
 import { useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
 
 import DialogButtons from "@/app-components/buttons/DialogButtons";
 import { DialogTitle } from "@/app-components/dialogs/DialogTitle";
@@ -20,6 +19,7 @@ import { useCreate } from "@/hooks/crud/useCreate";
 import { useUpdate } from "@/hooks/crud/useUpdate";
 import { DialogControlProps } from "@/hooks/useDialog";
 import { useToast } from "@/hooks/useToast";
+import { useTranslate } from "@/hooks/useTranslate";
 import { EntityType } from "@/services/types";
 import { ILabel, ILabelAttributes } from "@/types/label.types";
 import { slugify } from "@/utils/string";
@@ -31,7 +31,7 @@ export const LabelDialog: FC<LabelDialogProps> = ({
   closeDialog,
   ...rest
 }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const { toast } = useToast();
   const { mutateAsync: createLabel } = useCreate(EntityType.LABEL, {
     onError: () => {
diff --git a/frontend/src/components/labels/index.tsx b/frontend/src/components/labels/index.tsx
index 958027a4..2f529d96 100644
--- a/frontend/src/components/labels/index.tsx
+++ b/frontend/src/components/labels/index.tsx
@@ -11,7 +11,6 @@ import AddIcon from "@mui/icons-material/Add";
 import { Button, Grid, Paper } from "@mui/material";
 import { GridColDef } from "@mui/x-data-grid";
 import React from "react";
-import { useTranslation } from "react-i18next";
 
 import { DeleteDialog } from "@/app-components/dialogs/DeleteDialog";
 import { FilterTextfield } from "@/app-components/inputs/FilterTextfield";
@@ -27,6 +26,7 @@ import { getDisplayDialogs, useDialog } from "@/hooks/useDialog";
 import { useHasPermission } from "@/hooks/useHasPermission";
 import { useSearch } from "@/hooks/useSearch";
 import { useToast } from "@/hooks/useToast";
+import { useTranslate } from "@/hooks/useTranslate";
 import { PageHeader } from "@/layout/content/PageHeader";
 import { EntityType, Format } from "@/services/types";
 import { ILabel } from "@/types/label.types";
@@ -36,7 +36,7 @@ import { getDateTimeFormatter } from "@/utils/date";
 import { LabelDialog } from "./LabelDialog";
 
 export const Labels = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const { toast } = useToast();
   const addDialogCtl = useDialog<ILabel>(false);
   const editDialogCtl = useDialog<ILabel>(false);
diff --git a/frontend/src/components/languages/LanguageDialog.tsx b/frontend/src/components/languages/LanguageDialog.tsx
index 28194164..14012bc9 100644
--- a/frontend/src/components/languages/LanguageDialog.tsx
+++ b/frontend/src/components/languages/LanguageDialog.tsx
@@ -15,7 +15,6 @@ import {
 } from "@mui/material";
 import { FC, useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
 
 import DialogButtons from "@/app-components/buttons/DialogButtons";
 import { DialogTitle } from "@/app-components/dialogs/DialogTitle";
@@ -26,6 +25,7 @@ import { useCreate } from "@/hooks/crud/useCreate";
 import { useUpdate } from "@/hooks/crud/useUpdate";
 import { DialogControlProps } from "@/hooks/useDialog";
 import { useToast } from "@/hooks/useToast";
+import { useTranslate } from "@/hooks/useTranslate";
 import { EntityType } from "@/services/types";
 import { ILanguage, ILanguageAttributes } from "@/types/language.types";
 
@@ -36,7 +36,7 @@ export const LanguageDialog: FC<LanguageDialogProps> = ({
   closeDialog,
   ...rest
 }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const { toast } = useToast();
   const { mutateAsync: createLanguage } = useCreate(EntityType.LANGUAGE, {
     onError: () => {
diff --git a/frontend/src/components/languages/index.tsx b/frontend/src/components/languages/index.tsx
index 78b3d84e..2b59a49e 100644
--- a/frontend/src/components/languages/index.tsx
+++ b/frontend/src/components/languages/index.tsx
@@ -10,7 +10,6 @@ import { Flag } from "@mui/icons-material";
 import AddIcon from "@mui/icons-material/Add";
 import { Button, Grid, Paper, Switch } from "@mui/material";
 import { GridColDef } from "@mui/x-data-grid";
-import { useTranslation } from "react-i18next";
 import { useQueryClient } from "react-query";
 
 import { DeleteDialog } from "@/app-components/dialogs/DeleteDialog";
@@ -29,6 +28,7 @@ import { getDisplayDialogs, useDialog } from "@/hooks/useDialog";
 import { useHasPermission } from "@/hooks/useHasPermission";
 import { useSearch } from "@/hooks/useSearch";
 import { useToast } from "@/hooks/useToast";
+import { useTranslate } from "@/hooks/useTranslate";
 import { PageHeader } from "@/layout/content/PageHeader";
 import { EntityType } from "@/services/types";
 import { ILanguage } from "@/types/language.types";
@@ -38,7 +38,7 @@ import { getDateTimeFormatter } from "@/utils/date";
 import { LanguageDialog } from "./LanguageDialog";
 
 export const Languages = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const { toast } = useToast();
   const addDialogCtl = useDialog<ILanguage>(false);
   const editDialogCtl = useDialog<ILanguage>(false);
diff --git a/frontend/src/components/media-library/index.tsx b/frontend/src/components/media-library/index.tsx
index a52ce355..51a2213d 100644
--- a/frontend/src/components/media-library/index.tsx
+++ b/frontend/src/components/media-library/index.tsx
@@ -9,7 +9,6 @@
 import DriveFolderUploadIcon from "@mui/icons-material/DriveFolderUpload";
 import { Box, Grid, Paper } from "@mui/material";
 import { GridColDef, GridEventListener } from "@mui/x-data-grid";
-import { useTranslation } from "react-i18next";
 
 import AttachmentThumbnail from "@/app-components/attachment/AttachmentThumbnail";
 import { DeleteDialog } from "@/app-components/dialogs/DeleteDialog";
@@ -26,6 +25,7 @@ import { useDialog } from "@/hooks/useDialog";
 import useFormattedFileSize from "@/hooks/useFormattedFileSize";
 import { useSearch } from "@/hooks/useSearch";
 import { useToast } from "@/hooks/useToast";
+import { useTranslate } from "@/hooks/useTranslate";
 import { PageHeader } from "@/layout/content/PageHeader";
 import { EntityType } from "@/services/types";
 import { PermissionAction } from "@/types/permission.types";
@@ -41,7 +41,7 @@ type MediaLibraryProps = {
 };
 
 export const MediaLibrary = ({ onSelect, accept }: MediaLibraryProps) => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const { toast } = useToast();
   const deleteDialogCtl = useDialog<string>(false);
   const formatFileSize = useFormattedFileSize();
diff --git a/frontend/src/components/nlp/NlpEntityDialog.tsx b/frontend/src/components/nlp/NlpEntityDialog.tsx
index 0e5e9ae1..f330588a 100644
--- a/frontend/src/components/nlp/NlpEntityDialog.tsx
+++ b/frontend/src/components/nlp/NlpEntityDialog.tsx
@@ -18,7 +18,6 @@ import {
 } from "@mui/material";
 import { FC, useEffect } from "react";
 import { useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
 
 import DialogButtons from "@/app-components/buttons/DialogButtons";
 import { DialogTitle } from "@/app-components/dialogs/DialogTitle";
@@ -29,6 +28,7 @@ import { useCreate } from "@/hooks/crud/useCreate";
 import { useUpdate } from "@/hooks/crud/useUpdate";
 import { DialogControlProps } from "@/hooks/useDialog";
 import { useToast } from "@/hooks/useToast";
+import { useTranslate } from "@/hooks/useTranslate";
 import { EntityType } from "@/services/types";
 import {
   INlpEntity,
@@ -43,7 +43,7 @@ export const NlpEntityDialog: FC<NlpEntityDialogProps> = ({
   data,
   ...rest
 }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const { toast } = useToast();
   const { mutateAsync: createNlpEntity } = useCreate(EntityType.NLP_ENTITY, {
     onError: () => {
diff --git a/frontend/src/components/nlp/NlpImportDialog.tsx b/frontend/src/components/nlp/NlpImportDialog.tsx
index 32b8a1f1..d62e0bd7 100644
--- a/frontend/src/components/nlp/NlpImportDialog.tsx
+++ b/frontend/src/components/nlp/NlpImportDialog.tsx
@@ -9,7 +9,6 @@
 import CloseIcon from "@mui/icons-material/Close";
 import { Button, Dialog, DialogActions, DialogContent } from "@mui/material";
 import { FC, useState } from "react";
-import { useTranslation } from "react-i18next";
 import { useMutation, useQueryClient } from "react-query";
 
 import AttachmentInput from "@/app-components/attachment/AttachmentInput";
@@ -20,6 +19,7 @@ import { isSameEntity } from "@/hooks/crud/helpers";
 import { useApiClient } from "@/hooks/useApiClient";
 import { DialogControlProps } from "@/hooks/useDialog";
 import { useToast } from "@/hooks/useToast";
+import { useTranslate } from "@/hooks/useTranslate";
 import { EntityType, QueryType } from "@/services/types";
 
 export type NlpImportDialogProps = DialogControlProps<never>;
@@ -30,7 +30,7 @@ export const NlpImportDialog: FC<NlpImportDialogProps> = ({
   ...rest
 }) => {
   const [attachmentId, setAttachementId] = useState<string | null>(null);
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const queryClient = useQueryClient();
   const { toast } = useToast();
   const { apiClient } = useApiClient();
diff --git a/frontend/src/components/nlp/NlpSampleDialog.tsx b/frontend/src/components/nlp/NlpSampleDialog.tsx
index a755fa35..3a14ce11 100644
--- a/frontend/src/components/nlp/NlpSampleDialog.tsx
+++ b/frontend/src/components/nlp/NlpSampleDialog.tsx
@@ -8,12 +8,12 @@
 
 import { Dialog, DialogContent } from "@mui/material";
 import { FC } from "react";
-import { useTranslation } from "react-i18next";
 
 import { DialogTitle } from "@/app-components/dialogs/DialogTitle";
 import { useUpdate } from "@/hooks/crud/useUpdate";
 import { DialogControlProps } from "@/hooks/useDialog";
 import { useToast } from "@/hooks/useToast";
+import { useTranslate } from "@/hooks/useTranslate";
 import { EntityType } from "@/services/types";
 import {
   INlpDatasetSample,
@@ -30,7 +30,7 @@ export const NlpSampleDialog: FC<NlpSampleDialogProps> = ({
   closeDialog,
   ...rest
 }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const { toast } = useToast();
   const { mutateAsync: updateSample } = useUpdate<
     EntityType.NLP_SAMPLE,
diff --git a/frontend/src/components/nlp/NlpValueDialog.tsx b/frontend/src/components/nlp/NlpValueDialog.tsx
index 72d60de2..1b5e51c2 100644
--- a/frontend/src/components/nlp/NlpValueDialog.tsx
+++ b/frontend/src/components/nlp/NlpValueDialog.tsx
@@ -10,7 +10,6 @@ import { Dialog, DialogActions, DialogContent } from "@mui/material";
 import { useRouter } from "next/router";
 import { FC, useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
 
 import DialogButtons from "@/app-components/buttons/DialogButtons";
 import { DialogTitle } from "@/app-components/dialogs/DialogTitle";
@@ -23,6 +22,7 @@ import { useGet } from "@/hooks/crud/useGet";
 import { useUpdate } from "@/hooks/crud/useUpdate";
 import { DialogControlProps } from "@/hooks/useDialog";
 import { useToast } from "@/hooks/useToast";
+import { useTranslate } from "@/hooks/useTranslate";
 import { EntityType, Format } from "@/services/types";
 import { INlpValue, INlpValueAttributes } from "@/types/nlp-value.types";
 
@@ -41,7 +41,7 @@ export const NlpValueDialog: FC<NlpValueDialogProps> = ({
   canHaveSynonyms,
   callback,
 }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const { toast } = useToast();
   const { query } = useRouter();
   const { refetch: refetchEntity } = useGet(data?.entity || String(query.id), {
diff --git a/frontend/src/components/nlp/components/NlpDatasetCounter.tsx b/frontend/src/components/nlp/components/NlpDatasetCounter.tsx
index 9abbc764..d0b10e9c 100644
--- a/frontend/src/components/nlp/components/NlpDatasetCounter.tsx
+++ b/frontend/src/components/nlp/components/NlpDatasetCounter.tsx
@@ -8,15 +8,15 @@
 
 import { Box } from "@mui/material";
 import React from "react";
-import { useTranslation } from "react-i18next";
 
 import { StyledCardHeader } from "@/app-components/card/StyledCardHeader";
 import { useCount } from "@/hooks/crud/useCount";
+import { useTranslate } from "@/hooks/useTranslate";
 import { EntityType } from "@/services/types";
 import { NlpSampleType } from "@/types/nlp-sample.types";
 
 const NlpDatasetCounter: React.FC = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const train = useCount(EntityType.NLP_SAMPLE, { type: NlpSampleType.train });
   const test = useCount(EntityType.NLP_SAMPLE, { type: NlpSampleType.test });
   const entity = useCount(EntityType.NLP_ENTITY, {});
diff --git a/frontend/src/components/nlp/components/NlpEntity.tsx b/frontend/src/components/nlp/components/NlpEntity.tsx
index 3dad6631..ae366440 100644
--- a/frontend/src/components/nlp/components/NlpEntity.tsx
+++ b/frontend/src/components/nlp/components/NlpEntity.tsx
@@ -10,7 +10,6 @@ import AddIcon from "@mui/icons-material/Add";
 import { Button, Chip, Grid } from "@mui/material";
 import { GridColDef } from "@mui/x-data-grid";
 import { useRouter } from "next/router";
-import { useTranslation } from "react-i18next";
 
 import { DeleteDialog } from "@/app-components/dialogs";
 import { FilterTextfield } from "@/app-components/inputs/FilterTextfield";
@@ -26,6 +25,7 @@ import { getDisplayDialogs, useDialog } from "@/hooks/useDialog";
 import { useHasPermission } from "@/hooks/useHasPermission";
 import { useSearch } from "@/hooks/useSearch";
 import { useToast } from "@/hooks/useToast";
+import { useTranslate } from "@/hooks/useTranslate";
 import { EntityType, Format } from "@/services/types";
 import { INlpEntity } from "@/types/nlp-entity.types";
 import { PermissionAction } from "@/types/permission.types";
@@ -48,7 +48,7 @@ const NlpEntity = () => {
     },
   });
   const addDialogCtl = useDialog<INlpEntity>(false);
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const { toast } = useToast();
   const { onSearch, searchPayload } = useSearch<INlpEntity>({
     $or: ["name", "doc"],
diff --git a/frontend/src/components/nlp/components/NlpSample.tsx b/frontend/src/components/nlp/components/NlpSample.tsx
index b25c2a74..4afe4722 100644
--- a/frontend/src/components/nlp/components/NlpSample.tsx
+++ b/frontend/src/components/nlp/components/NlpSample.tsx
@@ -22,7 +22,6 @@ import {
 } from "@mui/material";
 import { GridColDef } from "@mui/x-data-grid";
 import { useState } from "react";
-import { useTranslation } from "react-i18next";
 
 import { DeleteDialog } from "@/app-components/dialogs";
 import { ChipEntity } from "@/app-components/displays/ChipEntity";
@@ -43,6 +42,8 @@ import { getDisplayDialogs, useDialog } from "@/hooks/useDialog";
 import { useHasPermission } from "@/hooks/useHasPermission";
 import { useSearch } from "@/hooks/useSearch";
 import { useToast } from "@/hooks/useToast";
+import { useTranslate } from "@/hooks/useTranslate";
+import { TNestedTranslation } from "@/i18n/i18n.types";
 import { EntityType, Format } from "@/services/types";
 import { ILanguage } from "@/types/language.types";
 import {
@@ -67,7 +68,7 @@ const NLP_SAMPLE_TYPE_COLORS = {
 export default function NlpSample() {
   const { apiUrl } = useConfig();
   const { toast } = useToast();
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const [type, setType] = useState<NlpSampleType | undefined>(undefined);
   const [language, setLanguage] = useState<string | undefined>(undefined);
   const hasPermission = useHasPermission();
@@ -296,7 +297,9 @@ export default function NlpSample() {
                   </IconButton>
                 ),
               }),
-              renderValue: (value) => <Box>{t(`label.${value}`)}</Box>,
+              renderValue: (value) => (
+                <Box>{t("label", value as TNestedTranslation<"label">)}</Box>
+              ),
             }}
           >
             {Object.values(NlpSampleType).map((nlpSampleType, index) => (
diff --git a/frontend/src/components/nlp/components/NlpTrainForm.tsx b/frontend/src/components/nlp/components/NlpTrainForm.tsx
index 89350b8c..e157f71c 100644
--- a/frontend/src/components/nlp/components/NlpTrainForm.tsx
+++ b/frontend/src/components/nlp/components/NlpTrainForm.tsx
@@ -24,7 +24,6 @@ import {
 } from "@mui/material";
 import { FC, useCallback, useEffect, useMemo, useState } from "react";
 import { Controller, useFieldArray, useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
 import { useQuery } from "react-query";
 
 import { ContentContainer, ContentItem } from "@/app-components/dialogs";
@@ -34,6 +33,7 @@ import Selectable from "@/app-components/inputs/Selectable";
 import { useFind } from "@/hooks/crud/useFind";
 import { useGetFromCache } from "@/hooks/crud/useGet";
 import { useApiClient } from "@/hooks/useApiClient";
+import { useTranslate } from "@/hooks/useTranslate";
 import { EntityType, Format } from "@/services/types";
 import { ILanguage } from "@/types/language.types";
 import { INlpEntity } from "@/types/nlp-entity.types";
@@ -55,7 +55,7 @@ const NlpDatasetSample: FC<NlpDatasetSampleProps> = ({
   sample,
   submitForm,
 }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const { data: entities, refetch: refetchEntities } = useFind(
     {
       entity: EntityType.NLP_ENTITY,
@@ -435,7 +435,7 @@ const NlpDatasetSample: FC<NlpDatasetSampleProps> = ({
           >
             {!selection?.value
               ? t("button.select_some_text")
-              : t("button.add_nlp_entity", { 0: selection.value })}
+              : t("button.add_nlp_entity", { defaultValue: selection.value })}
           </Button>
 
           <Button
diff --git a/frontend/src/components/nlp/components/NlpValues.tsx b/frontend/src/components/nlp/components/NlpValues.tsx
index 314f4916..7996654b 100644
--- a/frontend/src/components/nlp/components/NlpValues.tsx
+++ b/frontend/src/components/nlp/components/NlpValues.tsx
@@ -13,7 +13,6 @@ import { Box, Button, Chip, Grid, Slide } from "@mui/material";
 import { GridColDef } from "@mui/x-data-grid";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
 
 import { DeleteDialog } from "@/app-components/dialogs";
 import { FilterTextfield } from "@/app-components/inputs/FilterTextfield";
@@ -30,6 +29,7 @@ import { useDialog } from "@/hooks/useDialog";
 import { useHasPermission } from "@/hooks/useHasPermission";
 import { useSearch } from "@/hooks/useSearch";
 import { useToast } from "@/hooks/useToast";
+import { useTranslate } from "@/hooks/useTranslate";
 import { PageHeader } from "@/layout/content/PageHeader";
 import { EntityType, Format } from "@/services/types";
 import { NlpLookups } from "@/types/nlp-entity.types";
@@ -46,7 +46,7 @@ export const NlpValues = ({ entityId }: { entityId: string }) => {
   const addNlpValueDialogCtl = useDialog<INlpValue>(false);
   const hasPermission = useHasPermission();
   const router = useRouter();
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const { toast } = useToast();
   const { data: nlpEntity, refetch: refetchEntity } = useGet(entityId, {
     entity: EntityType.NLP_ENTITY,
diff --git a/frontend/src/components/nlp/index.tsx b/frontend/src/components/nlp/index.tsx
index 62b752d0..96f0f08e 100644
--- a/frontend/src/components/nlp/index.tsx
+++ b/frontend/src/components/nlp/index.tsx
@@ -11,12 +11,12 @@ import { Grid, Paper, Tab, Tabs } from "@mui/material";
 import dynamic from "next/dynamic";
 import { useRouter } from "next/router";
 import React from "react";
-import { useTranslation } from "react-i18next";
 
 import { TabPanel } from "@/app-components/tabs/TabPanel";
 import { useCreate } from "@/hooks/crud/useCreate";
 import { useFind } from "@/hooks/crud/useFind";
 import { useToast } from "@/hooks/useToast";
+import { useTranslate } from "@/hooks/useTranslate";
 import { PageHeader } from "@/layout/content/PageHeader";
 import { EntityType, Format } from "@/services/types";
 import {
@@ -60,7 +60,7 @@ export const Nlp = ({
       },
     );
   };
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const { toast } = useToast();
   const { mutateAsync: createSample } = useCreate<
     EntityType.NLP_SAMPLE,
diff --git a/frontend/src/components/profile/index.tsx b/frontend/src/components/profile/index.tsx
index 80c2a4d8..05a1b313 100644
--- a/frontend/src/components/profile/index.tsx
+++ b/frontend/src/components/profile/index.tsx
@@ -9,15 +9,15 @@
 import { faUser } from "@fortawesome/free-solid-svg-icons";
 import { Grid, Paper } from "@mui/material";
 import React from "react";
-import { useTranslation } from "react-i18next";
 
 import { useAuth } from "@/hooks/useAuth";
+import { useTranslate } from "@/hooks/useTranslate";
 import { PageHeader } from "@/layout/content/PageHeader";
 
 import { ProfileForm } from "./profile";
 
 export const Profile = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const { user } = useAuth();
 
   return (
diff --git a/frontend/src/components/profile/profile.tsx b/frontend/src/components/profile/profile.tsx
index b9f441e8..16d17c84 100644
--- a/frontend/src/components/profile/profile.tsx
+++ b/frontend/src/components/profile/profile.tsx
@@ -14,7 +14,6 @@ import LanguageIcon from "@mui/icons-material/Language";
 import { Box, Button, Grid, MenuItem, Typography } from "@mui/material";
 import { FC } from "react";
 import { Controller, useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
 import { useQueryClient } from "react-query";
 
 import AttachmentInput from "@/app-components/attachment/AttachmentInput";
@@ -26,6 +25,7 @@ import { PasswordInput } from "@/app-components/inputs/PasswordInput";
 import { useUpdateProfile } from "@/hooks/entities/auth-hooks";
 import { CURRENT_USER_KEY } from "@/hooks/useAuth";
 import { useToast } from "@/hooks/useToast";
+import { useTranslate } from "@/hooks/useTranslate";
 import { useValidationRules } from "@/hooks/useValidationRules";
 import { IUser, IUserAttributes } from "@/types/user.types";
 import { MIME_TYPES } from "@/utils/attachment";
@@ -35,7 +35,7 @@ type TUserProfileExtendedPayload = IUserAttributes & { password2: string };
 type ProfileFormProps = { user: IUser };
 
 export const ProfileForm: FC<ProfileFormProps> = ({ user }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const queryClient = useQueryClient();
   const { toast } = useToast();
   const { mutateAsync: updateProfile, isLoading } = useUpdateProfile({
diff --git a/frontend/src/components/roles/PermissionsDialog.tsx b/frontend/src/components/roles/PermissionsDialog.tsx
index 5a0572f1..dca38329 100644
--- a/frontend/src/components/roles/PermissionsDialog.tsx
+++ b/frontend/src/components/roles/PermissionsDialog.tsx
@@ -24,7 +24,6 @@ import {
   Divider,
 } from "@mui/material";
 import { useState, FC, useEffect } from "react";
-import { useTranslation } from "react-i18next";
 
 import { IconButton } from "@/app-components/buttons/IconButton";
 import { DialogTitle } from "@/app-components/dialogs/DialogTitle";
@@ -35,6 +34,7 @@ import { useFind } from "@/hooks/crud/useFind";
 import { useGetFromCache } from "@/hooks/crud/useGet";
 import { DialogControlProps } from "@/hooks/useDialog";
 import { useToast } from "@/hooks/useToast";
+import { useTranslate } from "@/hooks/useTranslate";
 import { EntityType, Format } from "@/services/types";
 import { IPermission, IPermissionAttributes } from "@/types/permission.types";
 import { IRole } from "@/types/role.types";
@@ -70,7 +70,7 @@ export const PermissionsDialog: FC<PermissionsDialogProps> = ({
   data,
   closeDialog: closeFunction,
 }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const { toast } = useToast();
   const { data: models, refetch: modelRefetch } = useFind(
     { entity: EntityType.MODEL, format: Format.FULL },
diff --git a/frontend/src/components/roles/RoleDialog.tsx b/frontend/src/components/roles/RoleDialog.tsx
index fdaca8d3..798d19c9 100644
--- a/frontend/src/components/roles/RoleDialog.tsx
+++ b/frontend/src/components/roles/RoleDialog.tsx
@@ -9,7 +9,6 @@
 import { Dialog, DialogActions, DialogContent } from "@mui/material";
 import { FC, useEffect } from "react";
 import { useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
 
 import DialogButtons from "@/app-components/buttons/DialogButtons";
 import { DialogTitle } from "@/app-components/dialogs/DialogTitle";
@@ -20,6 +19,7 @@ import { useCreate } from "@/hooks/crud/useCreate";
 import { useUpdate } from "@/hooks/crud/useUpdate";
 import { DialogControlProps } from "@/hooks/useDialog";
 import { useToast } from "@/hooks/useToast";
+import { useTranslate } from "@/hooks/useTranslate";
 import { EntityType } from "@/services/types";
 import { IRole, IRoleAttributes } from "@/types/role.types";
 
@@ -30,7 +30,7 @@ export const RoleDialog: FC<RoleDialogProps> = ({
   closeDialog,
   ...rest
 }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const { toast } = useToast();
   const { mutateAsync: createRole } = useCreate(EntityType.ROLE, {
     onError: () => {
diff --git a/frontend/src/components/roles/index.tsx b/frontend/src/components/roles/index.tsx
index d4b2911f..e790bf74 100644
--- a/frontend/src/components/roles/index.tsx
+++ b/frontend/src/components/roles/index.tsx
@@ -11,7 +11,6 @@ import AddIcon from "@mui/icons-material/Add";
 import { Button, Grid, Paper } from "@mui/material";
 import { GridColDef } from "@mui/x-data-grid";
 import React from "react";
-import { useTranslation } from "react-i18next";
 
 import { DeleteDialog } from "@/app-components/dialogs/DeleteDialog";
 import { FilterTextfield } from "@/app-components/inputs/FilterTextfield";
@@ -27,6 +26,8 @@ import { getDisplayDialogs, useDialog } from "@/hooks/useDialog";
 import { useHasPermission } from "@/hooks/useHasPermission";
 import { useSearch } from "@/hooks/useSearch";
 import { useToast } from "@/hooks/useToast";
+import { useTranslate } from "@/hooks/useTranslate";
+import { TTranslationKeys } from "@/i18n/i18n.types";
 import { PageHeader } from "@/layout/content/PageHeader";
 import { EntityType } from "@/services/types";
 import { PermissionAction } from "@/types/permission.types";
@@ -37,7 +38,7 @@ import { PermissionsDialog } from "./PermissionsDialog";
 import { RoleDialog } from "./RoleDialog";
 
 export const Roles = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const { toast } = useToast();
   const addDialogCtl = useDialog<IRole>(false);
   const editDialogCtl = useDialog<IRole>(false);
@@ -57,7 +58,12 @@ export const Roles = () => {
   );
   const { mutateAsync: deleteRole } = useDelete(EntityType.ROLE, {
     onError: (error) => {
-      toast.error(t(error.message || "message.internal_server_error"));
+      toast.error(
+        t(
+          (error.message as TTranslationKeys) ||
+            "message.internal_server_error",
+        ),
+      );
     },
     onSuccess() {
       deleteDialogCtl.closeDialog();
diff --git a/frontend/src/components/settings/SettingInput.tsx b/frontend/src/components/settings/SettingInput.tsx
index 8740b57e..bd14e7da 100644
--- a/frontend/src/components/settings/SettingInput.tsx
+++ b/frontend/src/components/settings/SettingInput.tsx
@@ -9,7 +9,6 @@
 import KeyIcon from "@mui/icons-material/Key";
 import { FormControlLabel, MenuItem, Switch } from "@mui/material";
 import { ControllerRenderProps } from "react-hook-form";
-import { useTranslation } from "react-i18next";
 
 import AttachmentInput from "@/app-components/attachment/AttachmentInput";
 import { Adornment } from "@/app-components/inputs/Adornment";
@@ -17,6 +16,8 @@ import AutoCompleteEntitySelect from "@/app-components/inputs/AutoCompleteEntity
 import { Input } from "@/app-components/inputs/Input";
 import MultipleInput from "@/app-components/inputs/MultipleInput";
 import { PasswordInput } from "@/app-components/inputs/PasswordInput";
+import { useTranslate } from "@/hooks/useTranslate";
+import { TNestedTranslation } from "@/i18n/i18n.types";
 import { EntityType, Format } from "@/services/types";
 import { IBlock } from "@/types/block.types";
 import { ISetting } from "@/types/setting.types";
@@ -33,13 +34,11 @@ const SettingInput: React.FC<RenderSettingInputProps> = ({
   field,
   isDisabled = () => false,
 }) => {
-  const { t } = useTranslation();
-  const label = t(`label.${setting.label}`, {
-    defaultValue: setting.title || setting.label,
-  });
-  const helperText = t(`help.${setting.label}`, {
-    defaultValue: "",
-  });
+  const { t } = useTranslate();
+  const nestedLabel = setting.label as TNestedTranslation<"label">;
+  const nestedHelp = setting.label as TNestedTranslation<"help">;
+  const label = t("label", nestedLabel);
+  const helperText = t("help", nestedHelp);
 
   switch (setting.type) {
     case "text":
diff --git a/frontend/src/components/settings/index.tsx b/frontend/src/components/settings/index.tsx
index b3e05bd7..d40ce7ce 100644
--- a/frontend/src/components/settings/index.tsx
+++ b/frontend/src/components/settings/index.tsx
@@ -18,12 +18,13 @@ import {
 } from "@mui/material";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
 
 import { a11yProps, TabPanel } from "@/app-components/tabs/TabPanel";
 import { useFind } from "@/hooks/crud/useFind";
 import { useUpdate } from "@/hooks/crud/useUpdate";
 import { useToast } from "@/hooks/useToast";
+import { useTranslate } from "@/hooks/useTranslate";
+import { TNestedTranslation } from "@/i18n/i18n.types";
 import { PageHeader } from "@/layout/content/PageHeader";
 import { EntityType } from "@/services/types";
 import { ISetting } from "@/types/setting.types";
@@ -67,7 +68,7 @@ function groupBy(array: ISetting[]) {
 }
 
 export const Settings = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const { toast } = useToast();
   const [selectedTab, setSelectedTab] = useState("live-chat-tester");
   const { control, watch } = useForm();
@@ -156,14 +157,16 @@ export const Settings = () => {
                 },
               }}
             >
-              {Object.keys(groups).map((group, index) => (
-                <StyledTab
-                  value={group}
-                  key={group}
-                  label={t(`title.${group}`)}
-                  {...a11yProps(index)}
-                />
-              ))}
+              {(Object.keys(groups) as TNestedTranslation<"title">[]).map(
+                (group, index) => (
+                  <StyledTab
+                    value={group}
+                    key={group}
+                    label={t("title", group)}
+                    {...a11yProps(index)}
+                  />
+                ),
+              )}
             </Tabs>
             <StyledForm sx={{ width: "100%", px: 3, paddingY: 2 }}>
               {Object.entries(groups).map(([group, settings]) => (
diff --git a/frontend/src/components/subscribers/EditSubscriberDialog.tsx b/frontend/src/components/subscribers/EditSubscriberDialog.tsx
index 6904f77b..0b2897bf 100644
--- a/frontend/src/components/subscribers/EditSubscriberDialog.tsx
+++ b/frontend/src/components/subscribers/EditSubscriberDialog.tsx
@@ -16,7 +16,6 @@ import {
 import Link from "next/link";
 import { useEffect, FC, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
 
 import DialogButtons from "@/app-components/buttons/DialogButtons";
 import { DialogTitle } from "@/app-components/dialogs/DialogTitle";
@@ -27,6 +26,7 @@ import { Input } from "@/app-components/inputs/Input";
 import { useUpdate } from "@/hooks/crud/useUpdate";
 import { DialogControlProps } from "@/hooks/useDialog";
 import { useToast } from "@/hooks/useToast";
+import { useTranslate } from "@/hooks/useTranslate";
 import { EntityType, Format } from "@/services/types";
 import { ILabel } from "@/types/label.types";
 import { ISubscriber, ISubscriberAttributes } from "@/types/subscriber.types";
@@ -43,7 +43,7 @@ export const EditSubscriberDialog: FC<EditSubscriberDialogProps> = ({
   closeDialog,
   ...rest
 }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const { toast } = useToast();
   const [fullName, setFullName] = useState<string>("");
   const { mutateAsync: updateSubscriber } = useUpdate(EntityType.SUBSCRIBER, {
diff --git a/frontend/src/components/subscribers/index.tsx b/frontend/src/components/subscribers/index.tsx
index fe56ef0b..ebf4daa0 100644
--- a/frontend/src/components/subscribers/index.tsx
+++ b/frontend/src/components/subscribers/index.tsx
@@ -11,7 +11,6 @@ import DeleteIcon from "@mui/icons-material/Close";
 import { Grid, IconButton, MenuItem, Paper } from "@mui/material";
 import { GridColDef } from "@mui/x-data-grid";
 import React, { useState } from "react";
-import { useTranslation } from "react-i18next";
 
 import { ChipEntity } from "@/app-components/displays/ChipEntity";
 import { FilterTextfield } from "@/app-components/inputs/FilterTextfield";
@@ -26,6 +25,7 @@ import { DataGrid } from "@/app-components/tables/DataGrid";
 import { useFind } from "@/hooks/crud/useFind";
 import { getDisplayDialogs, useDialog } from "@/hooks/useDialog";
 import { useSearch } from "@/hooks/useSearch";
+import { useTranslate } from "@/hooks/useTranslate";
 import { PageHeader } from "@/layout/content/PageHeader";
 import { EntityType, Format } from "@/services/types";
 import { ILabel } from "@/types/label.types";
@@ -35,7 +35,7 @@ import { getDateTimeFormatter } from "@/utils/date";
 import { EditSubscriberDialog } from "./EditSubscriberDialog";
 
 export const Subscribers = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const editDialogCtl = useDialog<{
     labels: ILabel[];
     subscriber: ISubscriber;
diff --git a/frontend/src/components/translations/EditTranslationDialog.tsx b/frontend/src/components/translations/EditTranslationDialog.tsx
index 72436c9b..f3d3fcbe 100644
--- a/frontend/src/components/translations/EditTranslationDialog.tsx
+++ b/frontend/src/components/translations/EditTranslationDialog.tsx
@@ -15,7 +15,6 @@ import {
 } from "@mui/material";
 import { FC, useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
 
 import DialogButtons from "@/app-components/buttons/DialogButtons";
 import { DialogTitle } from "@/app-components/dialogs/DialogTitle";
@@ -25,6 +24,7 @@ import { useFind } from "@/hooks/crud/useFind";
 import { useUpdate } from "@/hooks/crud/useUpdate";
 import { DialogControlProps } from "@/hooks/useDialog";
 import { useToast } from "@/hooks/useToast";
+import { useTranslate } from "@/hooks/useTranslate";
 import { EntityType } from "@/services/types";
 import {
   ITranslation,
@@ -47,7 +47,7 @@ export const EditTranslationDialog: FC<EditTranslationDialogProps> = ({
       hasCount: false,
     },
   );
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const { toast } = useToast();
   const { mutateAsync: updateTranslation } = useUpdate(EntityType.TRANSLATION, {
     onError: () => {
diff --git a/frontend/src/components/translations/index.tsx b/frontend/src/components/translations/index.tsx
index a871e445..a4e3bb0a 100644
--- a/frontend/src/components/translations/index.tsx
+++ b/frontend/src/components/translations/index.tsx
@@ -10,7 +10,6 @@ import { faLanguage } from "@fortawesome/free-solid-svg-icons";
 import AutorenewIcon from "@mui/icons-material/Autorenew";
 import { Button, Chip, Grid, Paper, Stack } from "@mui/material";
 import { GridColDef } from "@mui/x-data-grid";
-import { useTranslation } from "react-i18next";
 
 import { DeleteDialog } from "@/app-components/dialogs";
 import { FilterTextfield } from "@/app-components/inputs/FilterTextfield";
@@ -25,6 +24,7 @@ import { useRefreshTranslations } from "@/hooks/entities/translation-hooks";
 import { getDisplayDialogs, useDialog } from "@/hooks/useDialog";
 import { useSearch } from "@/hooks/useSearch";
 import { useToast } from "@/hooks/useToast";
+import { useTranslate } from "@/hooks/useTranslate";
 import { PageHeader } from "@/layout/content/PageHeader";
 import { EntityType } from "@/services/types";
 import { ILanguage } from "@/types/language.types";
@@ -35,7 +35,7 @@ import { getDateTimeFormatter } from "@/utils/date";
 import { EditTranslationDialog } from "./EditTranslationDialog";
 
 export const Translations = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const { toast } = useToast();
   const { data: languages } = useFind(
     { entity: EntityType.LANGUAGE },
diff --git a/frontend/src/components/users/EditUserDialog.tsx b/frontend/src/components/users/EditUserDialog.tsx
index 14a1b236..092bad94 100644
--- a/frontend/src/components/users/EditUserDialog.tsx
+++ b/frontend/src/components/users/EditUserDialog.tsx
@@ -16,7 +16,6 @@ import {
 import Link from "next/link";
 import { FC, useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
 
 import DialogButtons from "@/app-components/buttons/DialogButtons";
 import { DialogTitle } from "@/app-components/dialogs/DialogTitle";
@@ -27,6 +26,7 @@ import { Input } from "@/app-components/inputs/Input";
 import { useUpdate } from "@/hooks/crud/useUpdate";
 import { DialogControlProps } from "@/hooks/useDialog";
 import { useToast } from "@/hooks/useToast";
+import { useTranslate } from "@/hooks/useTranslate";
 import { EntityType, Format } from "@/services/types";
 import { IRole } from "@/types/role.types";
 import { IUser, IUserAttributes } from "@/types/user.types";
@@ -44,7 +44,7 @@ export const EditUserDialog: FC<EditUserDialogProps> = ({
   closeDialog,
   ...rest
 }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const { toast } = useToast();
   const [fullName, setFullName] = useState<string>("");
   const { mutateAsync: updateUser } = useUpdate(EntityType.USER, {
diff --git a/frontend/src/components/users/InvitationDialog.tsx b/frontend/src/components/users/InvitationDialog.tsx
index 461cf85d..77458710 100644
--- a/frontend/src/components/users/InvitationDialog.tsx
+++ b/frontend/src/components/users/InvitationDialog.tsx
@@ -11,7 +11,6 @@ import SendIcon from "@mui/icons-material/Send";
 import { Button, Dialog, DialogActions, DialogContent } from "@mui/material";
 import { FC, useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
 
 import { DialogTitle } from "@/app-components/dialogs/DialogTitle";
 import { ContentContainer } from "@/app-components/dialogs/layouts/ContentContainer";
@@ -21,6 +20,7 @@ import { Input } from "@/app-components/inputs/Input";
 import { useSendInvitation } from "@/hooks/entities/invitation-hooks";
 import { DialogControlProps } from "@/hooks/useDialog";
 import { useToast } from "@/hooks/useToast";
+import { useTranslate } from "@/hooks/useTranslate";
 import { useValidationRules } from "@/hooks/useValidationRules";
 import { EntityType, Format } from "@/services/types";
 import { IInvitationAttributes } from "@/types/invitation.types";
@@ -34,7 +34,7 @@ export const InvitationDialog: FC<InvitationDialogProps> = ({
   closeDialog,
   ...rest
 }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const { toast } = useToast();
   const { mutateAsync: sendInvitation } = useSendInvitation({
     onSuccess: () => {
diff --git a/frontend/src/components/users/index.tsx b/frontend/src/components/users/index.tsx
index fc2eeea0..fd16366e 100644
--- a/frontend/src/components/users/index.tsx
+++ b/frontend/src/components/users/index.tsx
@@ -10,7 +10,6 @@ import { faUsers } from "@fortawesome/free-solid-svg-icons";
 import PersonAddAlt1Icon from "@mui/icons-material/PersonAddAlt1";
 import { Button, Grid, Paper, Switch } from "@mui/material";
 import { GridColDef } from "@mui/x-data-grid";
-import { useTranslation } from "react-i18next";
 
 import { ChipEntity } from "@/app-components/displays/ChipEntity";
 import { FilterTextfield } from "@/app-components/inputs/FilterTextfield";
@@ -29,6 +28,7 @@ import { getDisplayDialogs, useDialog } from "@/hooks/useDialog";
 import { useHasPermission } from "@/hooks/useHasPermission";
 import { useSearch } from "@/hooks/useSearch";
 import { useToast } from "@/hooks/useToast";
+import { useTranslate } from "@/hooks/useTranslate";
 import { PageHeader } from "@/layout/content/PageHeader";
 import { EntityType, Format } from "@/services/types";
 import { PermissionAction } from "@/types/permission.types";
@@ -41,7 +41,7 @@ import { InvitationDialog } from "./InvitationDialog";
 
 export const Users = () => {
   const { ssoEnabled } = useConfig();
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const { toast } = useToast();
   const { user } = useAuth();
   const { mutateAsync: updateUser } = useUpdate(EntityType.USER, {
diff --git a/frontend/src/components/visual-editor/Aside.tsx b/frontend/src/components/visual-editor/Aside.tsx
index 0b8ff1d2..a001475a 100644
--- a/frontend/src/components/visual-editor/Aside.tsx
+++ b/frontend/src/components/visual-editor/Aside.tsx
@@ -8,13 +8,13 @@
 
 import { Grid, IconButton, Paper, Typography, styled } from "@mui/material";
 import { FC, SVGProps } from "react";
-import { useTranslation } from "react-i18next";
 
 import AttachmentIcon from "@/app-components/svg/toolbar/AttachmentIcon";
 import ButtonsIcon from "@/app-components/svg/toolbar/ButtonsIcon";
 import ListIcon from "@/app-components/svg/toolbar/ListIcon";
 import QuickRepliesIcon from "@/app-components/svg/toolbar/QuickRepliesIcon";
 import SimpleTextIcon from "@/app-components/svg/toolbar/SimpleTextIcon";
+import { useTranslate } from "@/hooks/useTranslate";
 import { IBlockAttributes } from "@/types/block.types";
 import { SXStyleOptions } from "@/utils/SXStyleOptions";
 
@@ -116,7 +116,7 @@ export const Block = ({
 };
 
 const Aside = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
 
   return (
     <Grid
diff --git a/frontend/src/components/visual-editor/BlockDialog.tsx b/frontend/src/components/visual-editor/BlockDialog.tsx
index dc016a88..3a5e3e41 100644
--- a/frontend/src/components/visual-editor/BlockDialog.tsx
+++ b/frontend/src/components/visual-editor/BlockDialog.tsx
@@ -20,7 +20,6 @@ import {
 } from "@mui/material";
 import { FC, useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
 
 import DialogButtons from "@/app-components/buttons/DialogButtons";
 import { DialogTitle } from "@/app-components/dialogs/DialogTitle";
@@ -32,6 +31,7 @@ import { TabPanel } from "@/app-components/tabs/TabPanel";
 import { useUpdate } from "@/hooks/crud/useUpdate";
 import { DialogControlProps } from "@/hooks/useDialog";
 import { useToast } from "@/hooks/useToast";
+import { useTranslate } from "@/hooks/useTranslate";
 import { EntityType } from "@/services/types";
 import { OutgoingMessageFormat } from "@/types/message.types";
 
@@ -49,7 +49,7 @@ const BlockDialog: FC<BlockDialogProps> = ({
   closeDialog,
   ...rest
 }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const [selectedTab, setSelectedTab] = useState("triggers");
   const handleChange = (_event: React.SyntheticEvent, newValue: string) => {
     setSelectedTab(newValue);
diff --git a/frontend/src/components/visual-editor/CustomBlocks.tsx b/frontend/src/components/visual-editor/CustomBlocks.tsx
index 039e24fb..27921080 100644
--- a/frontend/src/components/visual-editor/CustomBlocks.tsx
+++ b/frontend/src/components/visual-editor/CustomBlocks.tsx
@@ -7,16 +7,16 @@
  */
 
 import { Grid } from "@mui/material";
-import { useTranslation } from "react-i18next";
 
 import PluginIcon from "@/app-components/svg/toolbar/PluginIcon";
 import { useFind } from "@/hooks/crud/useFind";
+import { useTranslate } from "@/hooks/useTranslate";
 import { EntityType } from "@/services/types";
 
 import { Block, StyledTitle } from "./Aside";
 
 export const CustomBlocks = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const { data: customBlocks } = useFind(
     { entity: EntityType.CUSTOM_BLOCK },
     { hasCount: false },
diff --git a/frontend/src/components/visual-editor/form/AttachmentMessageForm.tsx b/frontend/src/components/visual-editor/form/AttachmentMessageForm.tsx
index 015fd4e6..99bc1031 100644
--- a/frontend/src/components/visual-editor/form/AttachmentMessageForm.tsx
+++ b/frontend/src/components/visual-editor/form/AttachmentMessageForm.tsx
@@ -7,11 +7,11 @@
  */
 
 import { Controller, useFormContext } from "react-hook-form";
-import { useTranslation } from "react-i18next";
 
 import AttachmentInput from "@/app-components/attachment/AttachmentInput";
 import { ContentItem } from "@/app-components/dialogs";
 import AttachmentIcon from "@/app-components/svg/toolbar/AttachmentIcon";
+import { useTranslate } from "@/hooks/useTranslate";
 import { IBlockAttributes } from "@/types/block.types";
 import { FileType } from "@/types/message.types";
 import { MIME_TYPES, getFileType } from "@/utils/attachment";
@@ -21,7 +21,7 @@ import { FormSectionTitle } from "./FormSectionTitle";
 
 const AttachmentMessageForm = () => {
   const block = useBlock();
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const {
     control,
     formState: { errors },
diff --git a/frontend/src/components/visual-editor/form/ButtonsMessageForm.tsx b/frontend/src/components/visual-editor/form/ButtonsMessageForm.tsx
index 9d00eb66..0a362bec 100644
--- a/frontend/src/components/visual-editor/form/ButtonsMessageForm.tsx
+++ b/frontend/src/components/visual-editor/form/ButtonsMessageForm.tsx
@@ -7,12 +7,12 @@
  */
 
 import { Controller, useFormContext } from "react-hook-form";
-import { useTranslation } from "react-i18next";
 
 import { ContentItem } from "@/app-components/dialogs";
 import { Input } from "@/app-components/inputs/Input";
 import ButtonsIcon from "@/app-components/svg/toolbar/ButtonsIcon";
 import SimpleTextIcon from "@/app-components/svg/toolbar/SimpleTextIcon";
+import { useTranslate } from "@/hooks/useTranslate";
 import { IBlockAttributes } from "@/types/block.types";
 
 import { useBlock } from "./BlockFormProvider";
@@ -21,7 +21,7 @@ import ButtonsInput from "./inputs/message/ButtonsInput";
 
 const ButtonsMessageForm = () => {
   const block = useBlock();
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const {
     control,
     formState: { errors },
diff --git a/frontend/src/components/visual-editor/form/ListMessageForm.tsx b/frontend/src/components/visual-editor/form/ListMessageForm.tsx
index 9c5dbfee..7e1eb195 100644
--- a/frontend/src/components/visual-editor/form/ListMessageForm.tsx
+++ b/frontend/src/components/visual-editor/form/ListMessageForm.tsx
@@ -16,7 +16,6 @@ import {
   RadioGroup,
 } from "@mui/material";
 import { Controller, useFormContext } from "react-hook-form";
-import { useTranslation } from "react-i18next";
 
 import { ContentItem } from "@/app-components/dialogs";
 import AutoCompleteEntitySelect from "@/app-components/inputs/AutoCompleteEntitySelect";
@@ -25,6 +24,8 @@ import { Input } from "@/app-components/inputs/Input";
 import ButtonsIcon from "@/app-components/svg/toolbar/ButtonsIcon";
 import ListIcon from "@/app-components/svg/toolbar/ListIcon";
 import { useGet } from "@/hooks/crud/useGet";
+import { useTranslate } from "@/hooks/useTranslate";
+import { TNestedTranslation } from "@/i18n/i18n.types";
 import { EntityType, Format } from "@/services/types";
 import {
   ContentField,
@@ -39,7 +40,7 @@ import ButtonsInput from "./inputs/message/ButtonsInput";
 
 const ListMessageForm = () => {
   const block = useBlock();
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const {
     control,
     register,
@@ -67,10 +68,12 @@ const ListMessageForm = () => {
               name="options.content.display_mode"
               render={({ field }) => (
                 <RadioGroup row {...field}>
-                  {[
-                    OutgoingMessageFormat.list,
-                    OutgoingMessageFormat.carousel,
-                  ].map((display) => (
+                  {(
+                    [
+                      OutgoingMessageFormat.list,
+                      OutgoingMessageFormat.carousel,
+                    ] as TNestedTranslation<"label">[]
+                  ).map((display) => (
                     <FormControlLabel
                       key={display}
                       value={display}
@@ -80,7 +83,7 @@ const ListMessageForm = () => {
                           {...register("options.content.display")}
                         />
                       }
-                      label={t(`label.${display}`)}
+                      label={t("label", display)}
                     />
                   ))}
                 </RadioGroup>
@@ -98,12 +101,12 @@ const ListMessageForm = () => {
               name="options.content.top_element_style"
               render={({ field }) => (
                 <RadioGroup row {...field}>
-                  {["large", "compact"].map((style) => (
+                  {(["large", "compact"] as const).map((style) => (
                     <FormControlLabel
                       key={style}
                       value={style}
                       control={<Radio />}
-                      label={t(`label.${style}`)}
+                      label={t("label", style)}
                     />
                   ))}
                 </RadioGroup>
diff --git a/frontend/src/components/visual-editor/form/OptionsForm.tsx b/frontend/src/components/visual-editor/form/OptionsForm.tsx
index 1d7e049f..b5c3f704 100644
--- a/frontend/src/components/visual-editor/form/OptionsForm.tsx
+++ b/frontend/src/components/visual-editor/form/OptionsForm.tsx
@@ -8,12 +8,12 @@
 
 import { Typography } from "@mui/material";
 import { Controller, useFormContext } from "react-hook-form";
-import { useTranslation } from "react-i18next";
 
 import { ContentContainer } from "@/app-components/dialogs/layouts/ContentContainer";
 import { ContentItem } from "@/app-components/dialogs/layouts/ContentItem";
 import AutoCompleteEntitySelect from "@/app-components/inputs/AutoCompleteEntitySelect";
 import { Input } from "@/app-components/inputs/Input";
+import { useTranslate } from "@/hooks/useTranslate";
 import { EntityType, Format } from "@/services/types";
 import { IBlockAttributes, ICustomBlockTemplate } from "@/types/block.types";
 import { ILabelFull } from "@/types/label.types";
@@ -24,7 +24,7 @@ import ContextVarsInput from "./inputs/options/ContextVarsInput";
 import LocalFallbackInput from "./inputs/options/LocalFallbackInput";
 
 export const OptionsForm = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const block = useBlock();
   const { control, register, watch } = useFormContext<IBlockAttributes>();
   const computed = watch("options.typing");
diff --git a/frontend/src/components/visual-editor/form/QuickRepliesMessageForm.tsx b/frontend/src/components/visual-editor/form/QuickRepliesMessageForm.tsx
index 037611df..fff277d2 100644
--- a/frontend/src/components/visual-editor/form/QuickRepliesMessageForm.tsx
+++ b/frontend/src/components/visual-editor/form/QuickRepliesMessageForm.tsx
@@ -7,12 +7,12 @@
  */
 
 import { Controller, useFormContext } from "react-hook-form";
-import { useTranslation } from "react-i18next";
 
 import { ContentItem } from "@/app-components/dialogs";
 import { Input } from "@/app-components/inputs/Input";
 import QuickRepliesIcon from "@/app-components/svg/toolbar/QuickRepliesIcon";
 import SimpleTextIcon from "@/app-components/svg/toolbar/SimpleTextIcon";
+import { useTranslate } from "@/hooks/useTranslate";
 import { IBlockAttributes } from "@/types/block.types";
 
 import { useBlock } from "./BlockFormProvider";
@@ -21,7 +21,7 @@ import QuickRepliesInput from "./inputs/message/QuickRepliesInput";
 
 const QuickRepliesMessageForm = () => {
   const block = useBlock();
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const {
     control,
     register,
diff --git a/frontend/src/components/visual-editor/form/TextMessageForm.tsx b/frontend/src/components/visual-editor/form/TextMessageForm.tsx
index a2345894..b9b6eb4c 100644
--- a/frontend/src/components/visual-editor/form/TextMessageForm.tsx
+++ b/frontend/src/components/visual-editor/form/TextMessageForm.tsx
@@ -7,11 +7,11 @@
  */
 
 import { Controller, useFormContext } from "react-hook-form";
-import { useTranslation } from "react-i18next";
 
 import { ContentItem } from "@/app-components/dialogs";
 import MultipleInput from "@/app-components/inputs/MultipleInput";
 import SimpleTextIcon from "@/app-components/svg/toolbar/SimpleTextIcon";
+import { useTranslate } from "@/hooks/useTranslate";
 import { IBlockAttributes } from "@/types/block.types";
 
 import { useBlock } from "./BlockFormProvider";
@@ -20,7 +20,7 @@ import ReplacementTokens from "./inputs/ReplacementTokens";
 
 const TextMessageForm = () => {
   const block = useBlock();
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const {
     control,
     register,
diff --git a/frontend/src/components/visual-editor/form/TriggersForm.tsx b/frontend/src/components/visual-editor/form/TriggersForm.tsx
index 19ef4d8d..517b78dc 100644
--- a/frontend/src/components/visual-editor/form/TriggersForm.tsx
+++ b/frontend/src/components/visual-editor/form/TriggersForm.tsx
@@ -8,11 +8,11 @@
 
 import { Divider } from "@mui/material";
 import { Controller, useFormContext } from "react-hook-form";
-import { useTranslation } from "react-i18next";
 
 import { ContentContainer } from "@/app-components/dialogs/layouts/ContentContainer";
 import { ContentItem } from "@/app-components/dialogs/layouts/ContentItem";
 import AutoCompleteEntitySelect from "@/app-components/inputs/AutoCompleteEntitySelect";
+import { useTranslate } from "@/hooks/useTranslate";
 import { EntityType, Format } from "@/services/types";
 import { IBlockAttributes } from "@/types/block.types";
 import { IChannel } from "@/types/channel.types";
@@ -23,7 +23,7 @@ import PatternsInput from "./inputs/triggers/PatternsInput";
 
 export const TriggersForm = () => {
   const block = useBlock();
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const { control } = useFormContext<IBlockAttributes>();
 
   return (
diff --git a/frontend/src/components/visual-editor/form/inputs/ReplacementTokens.tsx b/frontend/src/components/visual-editor/form/inputs/ReplacementTokens.tsx
index ebaaff93..26ebdf6a 100644
--- a/frontend/src/components/visual-editor/form/inputs/ReplacementTokens.tsx
+++ b/frontend/src/components/visual-editor/form/inputs/ReplacementTokens.tsx
@@ -16,13 +16,14 @@ import {
   ListItemText,
   Typography,
 } from "@mui/material";
-import { useTranslation } from "react-i18next";
 
 import { useFind } from "@/hooks/crud/useFind";
+import { useTranslate } from "@/hooks/useTranslate";
+import { TNestedTranslation } from "@/i18n/i18n.types";
 import { EntityType } from "@/services/types";
 
 function ReplacementTokens() {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const userInfos = [
     { name: "first_name", label: t("label.user_first_name") },
     { name: "last_name", label: t("label.user_last_name") },
@@ -99,7 +100,7 @@ function ReplacementTokens() {
             <ListItem key={index}>
               <ListItemText
                 primary={`{contact.${v.label}}`}
-                secondary={t("label." + v.label)}
+                secondary={t("label", v.label as TNestedTranslation<"label">)}
               />
             </ListItem>
           ))}
diff --git a/frontend/src/components/visual-editor/form/inputs/message/ButtonInput.tsx b/frontend/src/components/visual-editor/form/inputs/message/ButtonInput.tsx
index 61e8c14d..067c08a3 100644
--- a/frontend/src/components/visual-editor/form/inputs/message/ButtonInput.tsx
+++ b/frontend/src/components/visual-editor/form/inputs/message/ButtonInput.tsx
@@ -9,10 +9,10 @@
 import { Grid, MenuItem } from "@mui/material";
 import { FC } from "react";
 import { FieldPath, useFormContext } from "react-hook-form";
-import { useTranslation } from "react-i18next";
 
 import { Input } from "@/app-components/inputs/Input";
 import { ToggleableInput } from "@/app-components/inputs/ToggleableInput";
+import { useTranslate } from "@/hooks/useTranslate";
 import { useValidationRules } from "@/hooks/useValidationRules";
 import { IBlockAttributes } from "@/types/block.types";
 import {
@@ -44,7 +44,7 @@ const ButtonInput: FC<ButtonInputProps> = ({
   disablePayload = false,
   fieldPath,
 }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const types: { value: ButtonType; label: string }[] = [
     { value: ButtonType.postback, label: t("label.postback") },
     { value: ButtonType.web_url, label: t("label.web_url") },
diff --git a/frontend/src/components/visual-editor/form/inputs/message/ButtonsInput.tsx b/frontend/src/components/visual-editor/form/inputs/message/ButtonsInput.tsx
index 7758e441..2a622afd 100644
--- a/frontend/src/components/visual-editor/form/inputs/message/ButtonsInput.tsx
+++ b/frontend/src/components/visual-editor/form/inputs/message/ButtonsInput.tsx
@@ -11,8 +11,8 @@ import DeleteIcon from "@mui/icons-material/Delete";
 import { Box, Button, Grid, IconButton } from "@mui/material";
 import { FC, Fragment, useEffect, useState } from "react";
 import { FieldPath } from "react-hook-form";
-import { useTranslation } from "react-i18next";
 
+import { useTranslate } from "@/hooks/useTranslate";
 import { IBlockAttributes } from "@/types/block.types";
 import { AnyButton, ButtonType } from "@/types/message.types";
 import { ValueWithId, createValueWithId } from "@/utils/valueWithId";
@@ -36,7 +36,7 @@ const ButtonsInput: FC<ButtonsInput> = ({
   disablePayload = false,
   fieldPath,
 }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const [buttons, setButtons] = useState<ValueWithId<AnyButton>[]>(
     value.map((button) => createValueWithId(button)),
   );
diff --git a/frontend/src/components/visual-editor/form/inputs/message/QuickRepliesInput.tsx b/frontend/src/components/visual-editor/form/inputs/message/QuickRepliesInput.tsx
index a35e58ba..8057ec96 100644
--- a/frontend/src/components/visual-editor/form/inputs/message/QuickRepliesInput.tsx
+++ b/frontend/src/components/visual-editor/form/inputs/message/QuickRepliesInput.tsx
@@ -10,8 +10,8 @@ import AddIcon from "@mui/icons-material/Add";
 import DeleteIcon from "@mui/icons-material/Delete";
 import { Box, Button, Grid, IconButton } from "@mui/material";
 import { FC, Fragment, useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
 
+import { useTranslate } from "@/hooks/useTranslate";
 import { QuickReplyType, StdQuickReply } from "@/types/message.types";
 import { ValueWithId, createValueWithId } from "@/utils/valueWithId";
 
@@ -28,7 +28,7 @@ const QuickRepliesInput: FC<QuickRepliesInput> = ({
   onChange,
   minInput = 1,
 }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const [quickReplies, setQuickReplies] = useState<
     ValueWithId<StdQuickReply>[]
   >(value.map((quickReplie) => createValueWithId(quickReplie)));
diff --git a/frontend/src/components/visual-editor/form/inputs/message/QuickReplyInput.tsx b/frontend/src/components/visual-editor/form/inputs/message/QuickReplyInput.tsx
index b205ce38..87f89f7c 100644
--- a/frontend/src/components/visual-editor/form/inputs/message/QuickReplyInput.tsx
+++ b/frontend/src/components/visual-editor/form/inputs/message/QuickReplyInput.tsx
@@ -9,10 +9,10 @@
 import { Grid, MenuItem } from "@mui/material";
 import { FC, useState } from "react";
 import { useFormContext } from "react-hook-form";
-import { useTranslation } from "react-i18next";
 
 import { Input } from "@/app-components/inputs/Input";
 import { ToggleableInput } from "@/app-components/inputs/ToggleableInput";
+import { useTranslate } from "@/hooks/useTranslate";
 import { IBlockAttributes } from "@/types/block.types";
 import { QuickReplyType, StdQuickReply } from "@/types/message.types";
 
@@ -27,7 +27,7 @@ const QuickReplyInput: FC<QuickReplyInputProps> = ({
   onChange,
   idx,
 }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const [quickReplyType, setQuickReplyType] = useState(value.content_type);
   const {
     register,
diff --git a/frontend/src/components/visual-editor/form/inputs/options/ContextVarInput.tsx b/frontend/src/components/visual-editor/form/inputs/options/ContextVarInput.tsx
index a042f0f7..cfc0e91b 100644
--- a/frontend/src/components/visual-editor/form/inputs/options/ContextVarInput.tsx
+++ b/frontend/src/components/visual-editor/form/inputs/options/ContextVarInput.tsx
@@ -10,11 +10,11 @@ import ArrowLeftOutlinedIcon from "@mui/icons-material/ArrowLeftOutlined";
 import { Grid } from "@mui/material";
 import { FC } from "react";
 import { useFormContext } from "react-hook-form";
-import { useTranslation } from "react-i18next";
 
 import AutoCompleteEntitySelect from "@/app-components/inputs/AutoCompleteEntitySelect";
 import AutoCompleteSelect from "@/app-components/inputs/AutoCompleteSelect";
 import { useFind } from "@/hooks/crud/useFind";
+import { useTranslate } from "@/hooks/useTranslate";
 import { EntityType, Format } from "@/services/types";
 import { CaptureVar, IBlockAttributes, IBlockFull } from "@/types/block.types";
 import { IContextVar } from "@/types/context-var.types";
@@ -37,7 +37,7 @@ const ContextVarInput: FC<ContextVarInputProps> = ({
   value,
   onChange,
 }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const {
     register,
     formState: { errors },
diff --git a/frontend/src/components/visual-editor/form/inputs/options/ContextVarsInput.tsx b/frontend/src/components/visual-editor/form/inputs/options/ContextVarsInput.tsx
index a828ee3f..0885014c 100644
--- a/frontend/src/components/visual-editor/form/inputs/options/ContextVarsInput.tsx
+++ b/frontend/src/components/visual-editor/form/inputs/options/ContextVarsInput.tsx
@@ -19,8 +19,8 @@ import {
   IconButton,
 } from "@mui/material";
 import { FC, Fragment, useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
 
+import { useTranslate } from "@/hooks/useTranslate";
 import { CaptureVar } from "@/types/block.types";
 import { ValueWithId, createValueWithId } from "@/utils/valueWithId";
 
@@ -32,7 +32,7 @@ type ContextVarsInputProps = {
 };
 
 const ContextVarsInput: FC<ContextVarsInputProps> = ({ value, onChange }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const [vars, setVars] = useState<ValueWithId<CaptureVar>[]>(
     value.map((v) => createValueWithId(v)),
   );
diff --git a/frontend/src/components/visual-editor/form/inputs/options/LocalFallbackInput.tsx b/frontend/src/components/visual-editor/form/inputs/options/LocalFallbackInput.tsx
index d3638c79..de00c0db 100644
--- a/frontend/src/components/visual-editor/form/inputs/options/LocalFallbackInput.tsx
+++ b/frontend/src/components/visual-editor/form/inputs/options/LocalFallbackInput.tsx
@@ -11,11 +11,11 @@ import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import { Accordion, AccordionDetails, AccordionSummary } from "@mui/material";
 import { FC, useEffect, useState } from "react";
 import { useFormContext } from "react-hook-form";
-import { useTranslation } from "react-i18next";
 
 import { ContentContainer, ContentItem } from "@/app-components/dialogs";
 import { Input } from "@/app-components/inputs/Input";
 import MultipleInput from "@/app-components/inputs/MultipleInput";
+import { useTranslate } from "@/hooks/useTranslate";
 import { BlockFallbackOptions, IBlockAttributes } from "@/types/block.types";
 
 type LocalFallbackProps = {
@@ -31,7 +31,7 @@ const LocalFallbackInput: FC<LocalFallbackProps> = ({ value, onChange }) => {
       message: [""],
     },
   );
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const {
     register,
     formState: { errors },
diff --git a/frontend/src/components/visual-editor/form/inputs/triggers/ContentPostbackInput.tsx b/frontend/src/components/visual-editor/form/inputs/triggers/ContentPostbackInput.tsx
index 3744593b..a297d12e 100644
--- a/frontend/src/components/visual-editor/form/inputs/triggers/ContentPostbackInput.tsx
+++ b/frontend/src/components/visual-editor/form/inputs/triggers/ContentPostbackInput.tsx
@@ -8,11 +8,11 @@
 
 import { Box, Typography } from "@mui/material";
 import { useMemo } from "react";
-import { useTranslation } from "react-i18next";
 
 import AutoCompleteSelect from "@/app-components/inputs/AutoCompleteSelect";
 import { useFind } from "@/hooks/crud/useFind";
 import { useGetFromCache } from "@/hooks/crud/useGet";
+import { useTranslate } from "@/hooks/useTranslate";
 import { EntityType, Format } from "@/services/types";
 import { IBlock, PayloadPattern } from "@/types/block.types";
 
@@ -32,7 +32,7 @@ export const ContentPostbackInput = ({
   value,
   onChange,
 }: ContentPostbackInputProps) => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const block = useBlock();
   const { data: contents } = useFind(
     { entity: EntityType.CONTENT, format: Format.FULL },
diff --git a/frontend/src/components/visual-editor/form/inputs/triggers/PatternInput.tsx b/frontend/src/components/visual-editor/form/inputs/triggers/PatternInput.tsx
index dbd049b4..5ef217ae 100644
--- a/frontend/src/components/visual-editor/form/inputs/triggers/PatternInput.tsx
+++ b/frontend/src/components/visual-editor/form/inputs/triggers/PatternInput.tsx
@@ -9,12 +9,12 @@
 import { Box, Grid, MenuItem, TextFieldProps, Typography } from "@mui/material";
 import { FC, useEffect, useState } from "react";
 import { RegisterOptions, useFormContext } from "react-hook-form";
-import { useTranslation } from "react-i18next";
 
 import AutoCompleteEntitySelect from "@/app-components/inputs/AutoCompleteEntitySelect";
 import { Input } from "@/app-components/inputs/Input";
 import { RegexInput } from "@/app-components/inputs/RegexInput";
 import { useGetFromCache } from "@/hooks/crud/useGet";
+import { useTranslate } from "@/hooks/useTranslate";
 import { EntityType, Format } from "@/services/types";
 import {
   IBlockAttributes,
@@ -66,7 +66,7 @@ const PatternInput: FC<PatternInputProps> = ({
   idx,
   getInputProps,
 }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const {
     register,
     formState: { errors },
diff --git a/frontend/src/components/visual-editor/form/inputs/triggers/PatternsInput.tsx b/frontend/src/components/visual-editor/form/inputs/triggers/PatternsInput.tsx
index efa5098f..8ffbcf95 100644
--- a/frontend/src/components/visual-editor/form/inputs/triggers/PatternsInput.tsx
+++ b/frontend/src/components/visual-editor/form/inputs/triggers/PatternsInput.tsx
@@ -11,8 +11,8 @@ import DeleteIcon from "@mui/icons-material/Delete";
 import { Box, Button, Grid, IconButton, styled } from "@mui/material";
 import { FC, Fragment, useEffect, useState } from "react";
 import { useFormContext } from "react-hook-form";
-import { useTranslation } from "react-i18next";
 
+import { useTranslate } from "@/hooks/useTranslate";
 import { Pattern } from "@/types/block.types";
 import { SXStyleOptions } from "@/utils/SXStyleOptions";
 import { createValueWithId, ValueWithId } from "@/utils/valueWithId";
@@ -34,7 +34,7 @@ const StyledNoPatternsDiv = styled("div")(
   }),
 );
 const PatternsInput: FC<PatternsInputProps> = ({ value, onChange }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const [patterns, setPatterns] = useState<ValueWithId<Pattern>[]>(
     value.map((pattern) => createValueWithId(pattern)),
   );
diff --git a/frontend/src/components/visual-editor/form/inputs/triggers/PostbackInput.tsx b/frontend/src/components/visual-editor/form/inputs/triggers/PostbackInput.tsx
index ceb95ec2..5fbd96b1 100644
--- a/frontend/src/components/visual-editor/form/inputs/triggers/PostbackInput.tsx
+++ b/frontend/src/components/visual-editor/form/inputs/triggers/PostbackInput.tsx
@@ -8,10 +8,10 @@
 
 import { Box, Typography } from "@mui/material";
 import { useMemo } from "react";
-import { useTranslation } from "react-i18next";
 
 import AutoCompleteSelect from "@/app-components/inputs/AutoCompleteSelect";
 import { useGetFromCache } from "@/hooks/crud/useGet";
+import { useTranslate } from "@/hooks/useTranslate";
 import { EntityType } from "@/services/types";
 import { IBlock, PayloadPattern } from "@/types/block.types";
 import {
@@ -37,7 +37,7 @@ type PostbackInputProps = {
 export const PostbackInput = ({ value, onChange }: PostbackInputProps) => {
   const block = useBlock();
   const getBlockFromCache = useGetFromCache(EntityType.BLOCK);
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   //  General options
   const generalOptions = [
     {
diff --git a/frontend/src/components/visual-editor/index.tsx b/frontend/src/components/visual-editor/index.tsx
index 8d298a8e..8929bdf9 100644
--- a/frontend/src/components/visual-editor/index.tsx
+++ b/frontend/src/components/visual-editor/index.tsx
@@ -9,7 +9,6 @@
 import { Grid } from "@mui/material";
 import dynamic from "next/dynamic";
 
-
 const Diagrams = dynamic(() => import("./v2/Diagrams"), { ssr: false });
 const VisualEditorProvider = dynamic(() => import("./hooks/useVisualEditor"), {
   ssr: false,
diff --git a/frontend/src/components/visual-editor/v2/Diagrams.tsx b/frontend/src/components/visual-editor/v2/Diagrams.tsx
index 3c4b68f2..9172eac5 100644
--- a/frontend/src/components/visual-editor/v2/Diagrams.tsx
+++ b/frontend/src/components/visual-editor/v2/Diagrams.tsx
@@ -36,7 +36,6 @@ import {
   useRef,
   useState,
 } from "react";
-import { useTranslation } from "react-i18next";
 
 import { DeleteDialog } from "@/app-components/dialogs";
 import { CategoryDialog } from "@/components/categories/CategoryDialog";
@@ -47,6 +46,7 @@ import { useUpdate, useUpdateCache } from "@/hooks/crud/useUpdate";
 import useDebouncedUpdate from "@/hooks/useDebouncedUpdate";
 import { getDisplayDialogs, useDialog } from "@/hooks/useDialog";
 import { useSearch } from "@/hooks/useSearch";
+import { useTranslate } from "@/hooks/useTranslate";
 import { EntityType, Format } from "@/services/types";
 import { IBlock } from "@/types/block.types";
 import { ICategory } from "@/types/category.types";
@@ -58,7 +58,7 @@ import { ZOOM_LEVEL } from "../constants";
 import { useVisualEditor } from "../hooks/useVisualEditor";
 
 const Diagrams = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const [model, setModel] = useState<
     DiagramModel<DiagramModelGenerics> | undefined
   >();
diff --git a/frontend/src/contexts/auth.context.tsx b/frontend/src/contexts/auth.context.tsx
index f908a065..2c7e39d5 100644
--- a/frontend/src/contexts/auth.context.tsx
+++ b/frontend/src/contexts/auth.context.tsx
@@ -9,7 +9,6 @@
 import getConfig from "next/config";
 import { useRouter } from "next/router";
 import { useState, useEffect, createContext, ReactNode } from "react";
-import { useTranslation } from "react-i18next";
 import {
   useQueryClient,
   useQuery,
@@ -27,6 +26,7 @@ import {
   PUBLIC_PATHS,
 } from "@/hooks/useAuth";
 import { useToast } from "@/hooks/useToast";
+import { useTranslate } from "@/hooks/useTranslate";
 import { RouterType } from "@/services/types";
 import { IUser } from "@/types/user.types";
 import { getFromQuery } from "@/utils/URL";
@@ -58,7 +58,7 @@ export const AuthProvider = ({ children }: AuthProviderProps): JSX.Element => {
   const { logoutRedirection } = useLogoutRedirection();
   const [search, setSearch] = useState("");
   const hasPublicPath = PUBLIC_PATHS.includes(router.pathname);
-  const { i18n, t } = useTranslation();
+  const { i18n, t } = useTranslate();
   const { toast } = useToast();
   const [isReady, setIsReady] = useState(false);
   const queryClient = useQueryClient();
diff --git a/frontend/src/hooks/useApiClient.ts b/frontend/src/hooks/useApiClient.ts
index 6144d6b3..ca7fc2b1 100644
--- a/frontend/src/hooks/useApiClient.ts
+++ b/frontend/src/hooks/useApiClient.ts
@@ -9,9 +9,9 @@
 import axios from "axios";
 import { stringify } from "qs";
 import { useContext, useMemo } from "react";
-import { useTranslation } from "react-i18next";
 
 import { ApiClientContext } from "@/contexts/apiClient.context";
+import { useTranslate } from "@/hooks/useTranslate";
 import { ApiClient, EntityApiClient } from "@/services/api.class";
 import { EntityType } from "@/services/types";
 import { IBaseSchema } from "@/types/base.types";
@@ -24,7 +24,7 @@ export const useAxiosInstance = () => {
   const { apiUrl } = useConfig();
   const { logoutRedirection } = useLogoutRedirection();
   const { toast } = useToast();
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const axiosInstance = useMemo(() => {
     const instance = axios.create({
       baseURL: apiUrl,
diff --git a/frontend/src/hooks/useFormattedFileSize.tsx b/frontend/src/hooks/useFormattedFileSize.tsx
index 992ac1df..c07d6eb9 100644
--- a/frontend/src/hooks/useFormattedFileSize.tsx
+++ b/frontend/src/hooks/useFormattedFileSize.tsx
@@ -6,10 +6,10 @@
  * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
  */
 
-import { useTranslation } from "react-i18next";
+import { useTranslate } from "@/hooks/useTranslate";
 
 function useFormattedFileSize() {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const formatBytes = (bytes: number, decimals = 2) => {
     if (bytes === 0) return "0 " + t("label.bytes");
 
diff --git a/frontend/src/hooks/useTranslate.tsx b/frontend/src/hooks/useTranslate.tsx
new file mode 100644
index 00000000..bd622a02
--- /dev/null
+++ b/frontend/src/hooks/useTranslate.tsx
@@ -0,0 +1,42 @@
+/*
+ * Copyright © 2024 Hexastack. All rights reserved.
+ *
+ * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
+ * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
+ * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
+ */
+
+import { TOptionsBase } from "i18next";
+import { useTranslation } from "react-i18next";
+
+import { TTranslateProps, TTranslationKeys } from "@/i18n/i18n.types";
+
+export const useTranslate = () => {
+  const { t, i18n } = useTranslation();
+  const translate: TTranslateProps = (
+    prop1: unknown,
+    prop2?: unknown,
+    prop3?: unknown,
+  ): string => {
+    // full key. For example: prop1 = label.buttons
+    if (typeof prop1 === "string" && prop1.includes(".")) {
+      const key = prop1 as TTranslationKeys;
+      const options = (prop2 || {}) as TOptionsBase;
+
+      return t(key, { defaultValue: "", ...options });
+    }
+
+    // key with nested key. For example: prop1=label prop2=buttons
+    const options = (prop3 || {}) as TOptionsBase;
+
+    return t([prop1, prop2].join(".") as TTranslationKeys, {
+      defaultValue: "",
+      ...options,
+    });
+  };
+
+  return {
+    t: translate,
+    i18n,
+  };
+};
diff --git a/frontend/src/hooks/useValidationRules.tsx b/frontend/src/hooks/useValidationRules.tsx
index 7e051f48..6dd06e6d 100644
--- a/frontend/src/hooks/useValidationRules.tsx
+++ b/frontend/src/hooks/useValidationRules.tsx
@@ -6,10 +6,10 @@
  * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
  */
 
-import { useTranslation } from "react-i18next";
+import { useTranslate } from "@/hooks/useTranslate";
 
 export const useValidationRules = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const validationRules = {
     first_name: {},
     last_name: {},
diff --git a/frontend/src/i18n/en/translation.json b/frontend/src/i18n/en/translation.json
index 492c3399..a6ccc9dc 100644
--- a/frontend/src/i18n/en/translation.json
+++ b/frontend/src/i18n/en/translation.json
@@ -90,6 +90,7 @@
     "labels_are_required": "You need to add at least one Label",
     "type_is_required": "Type is required",
     "permission_already_exists": "Permission already exists",
+    "button_block_message_label": "What would you like to know about us?",
     "network_error": "Network error. Please try again later",
     "content_is_required": "Content is required",
     "message_is_required": "Message is required",
@@ -545,7 +546,7 @@
     "gb": "GB",
     "or": "OR",
     "click_or_dragndrop_to_upload": "Click or Drag & Drop to upload a file",
-    "button_block_message_label": "What would you like to know about us",
+    "button_block_message_label": "What would you like to know about us ?",
     "menu": "Menu",
     "total": "Total",
     "general": "General",
@@ -554,7 +555,9 @@
     "code": "Code",
     "is_default": "Default",
     "is_rtl": "RTL",
-    "original_text": "Original Text"
+    "original_text": "Original Text",
+    "inputs": "Inputs",
+    "outputs": "Outputs"
   },
   "placeholder": {
     "your_username": "Your username",
@@ -590,7 +593,8 @@
     "start_date": "Start Date",
     "end_date": "End Date",
     "nlp_value": "Value",
-    "type_message_here": "Type message here ...."
+    "type_message_here": "Type message here ....",
+    "mark_as_default": "By Default"
   },
   "button": {
     "login": "Sign In",
@@ -653,7 +657,8 @@
     "manage_roles": "Manage Roles",
     "connect_with_sso": "Connect with SSO",
     "add_pattern": "Add pattern",
-    "mark_as_default": "Mark as Default"
+    "mark_as_default": "Mark as Default",
+    "toggle": "Toggle button"
   },
   "input": {
     "search": "Search"
diff --git a/frontend/src/i18n/fr/translation.json b/frontend/src/i18n/fr/translation.json
index d8ba103b..ad20c435 100644
--- a/frontend/src/i18n/fr/translation.json
+++ b/frontend/src/i18n/fr/translation.json
@@ -546,6 +546,7 @@
     "gb": "Go",
     "or": "Ou",
     "click_or_dragndrop_to_upload": "Cliquez ou faîtes un Drag & Drop pour charger un fichier",
+    "button_block_message_label": "Que souhaitez-vous savoir sur nous ?",
     "menu": "Menu",
     "total": "Totale",
     "general": "Général",
@@ -554,7 +555,9 @@
     "code": "Code",
     "is_default": "Par Défaut",
     "is_rtl": "RTL",
-    "original_text": "Texte par défaut"
+    "original_text": "Texte par défaut",
+    "inputs": "Port d'entré",
+    "outputs": "Port de sorti"
   },
   "placeholder": {
     "your_username": "Votre nom d'utilisateur",
@@ -574,10 +577,12 @@
     "type_message": "Composez votre message ...",
     "keywords": "Mot-clés",
     "label": "Libellé",
+    "type": "Type",
     "name": "Nom",
     "entities": "Entités",
     "block_name": "Nom du bloc",
     "select": "Sélectionner",
+    "unselect": "Non sélectionner",
     "title": "Titre",
     "url": "URL",
     "payload": "Payload",
@@ -651,7 +656,9 @@
     "media_library": "Bibliothéque Media",
     "manage_roles": "Gérer les rôles",
     "connect_with_sso": "Se connecter avec SSO",
-    "add_pattern": "Ajouter un motif"
+    "add_pattern": "Ajouter un motif",
+    "mark_as_default": "Par Défaut",
+    "toggle": "Bouton de bascule"
   },
   "input": {
     "search": "Recherche"
diff --git a/frontend/src/i18n/i18n.types.ts b/frontend/src/i18n/i18n.types.ts
new file mode 100644
index 00000000..ad504175
--- /dev/null
+++ b/frontend/src/i18n/i18n.types.ts
@@ -0,0 +1,32 @@
+import { TOptionsBase } from "i18next";
+
+/*
+ * Copyright © 2024 Hexastack. All rights reserved.
+ *
+ * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
+ * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
+ * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
+ */
+
+import { translations } from ".";
+
+import { TFilterNestedKeysOfType } from "@/types/common/object.types";
+
+type TEnTranslation = (typeof translations)["en"];
+type TFrTranslation = (typeof translations)["fr"];
+
+export type TTranslation = TEnTranslation & TFrTranslation;
+export type TTranslationKeys = TFilterNestedKeysOfType<TEnTranslation> &
+  TFilterNestedKeysOfType<TFrTranslation>;
+
+export type TNestedTranslation<T extends keyof TTranslation> =
+  TFilterNestedKeysOfType<TTranslation[T]>;
+
+export type TTranslateProps = {
+  <K extends TTranslationKeys>(prop1: K, prop2?: TOptionsBase & object): string;
+  <K extends keyof TTranslation, N = TNestedTranslation<K>>(
+    prop1: K,
+    prop2: N & TNestedTranslation<K>,
+    prop3?: TOptionsBase & object,
+  ): string;
+};
diff --git a/frontend/src/i18n/index.ts b/frontend/src/i18n/index.ts
new file mode 100644
index 00000000..c3d6f95f
--- /dev/null
+++ b/frontend/src/i18n/index.ts
@@ -0,0 +1,12 @@
+/*
+ * Copyright © 2024 Hexastack. All rights reserved.
+ *
+ * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
+ * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
+ * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
+ */
+
+import en from "@/i18n/en/translation.json";
+import fr from "@/i18n/fr/translation.json";
+
+export const translations = { en, fr } as const;
diff --git a/frontend/src/layout/Header.tsx b/frontend/src/layout/Header.tsx
index 53297a2d..6f773062 100644
--- a/frontend/src/layout/Header.tsx
+++ b/frontend/src/layout/Header.tsx
@@ -18,13 +18,13 @@ import {
 } from "@mui/material";
 import MuiAppBar, { AppBarProps as MuiAppBarProps } from "@mui/material/AppBar";
 import { FC, useEffect, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
 
 import { HexabotLogo } from "@/app-components/logos/HexabotLogo";
 import { PopoverMenu } from "@/app-components/menus/PopoverMenu";
 import { getAvatarSrc } from "@/components/inbox/helpers/mapMessages";
 import { useAuth } from "@/hooks/useAuth";
 import { useConfig } from "@/hooks/useConfig";
+import { useTranslate } from "@/hooks/useTranslate";
 import { EntityType } from "@/services/types";
 import { getRandom } from "@/utils/safeRandom";
 
@@ -74,7 +74,7 @@ export type HeaderProps = {
 };
 export const Header: FC<HeaderProps> = ({ isSideBarOpen, onToggleSidebar }) => {
   const { apiUrl, ssoEnabled } = useConfig();
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const anchorRef = useRef(null);
   const [isMenuPopoverOpen, setIsMenuPopoverOpen] = useState(false);
   const { user, logout, isAuthenticated } = useAuth();
diff --git a/frontend/src/layout/VerticalMenu.tsx b/frontend/src/layout/VerticalMenu.tsx
index a06bc7c4..0f823c3f 100644
--- a/frontend/src/layout/VerticalMenu.tsx
+++ b/frontend/src/layout/VerticalMenu.tsx
@@ -33,13 +33,13 @@ import MuiDrawer from "@mui/material/Drawer";
 import { OverridableComponent } from "@mui/material/OverridableComponent";
 import { useRouter } from "next/router";
 import { FC, useMemo } from "react";
-import { useTranslation } from "react-i18next";
 
 import { HexabotLogo } from "@/app-components/logos/HexabotLogo";
 import { Sidebar } from "@/app-components/menus/Sidebar";
 import { useAuth } from "@/hooks/useAuth";
 import { useConfig } from "@/hooks/useConfig";
 import { useHasPermission } from "@/hooks/useHasPermission";
+import { useTranslate } from "@/hooks/useTranslate";
 import { EntityType } from "@/services/types";
 import { PermissionAction } from "@/types/permission.types";
 import { getLayout } from "@/utils/laylout";
@@ -285,7 +285,7 @@ export const VerticalMenu: FC<VerticalMenuProps> = ({
   onToggleOut,
 }) => {
   const { ssoEnabled } = useConfig();
-  const { t } = useTranslation();
+  const { t } = useTranslate();
   const { isAuthenticated } = useAuth();
   const router = useRouter();
   const hasPermission = useHasPermission();
diff --git a/frontend/src/pages/visual-editor.tsx b/frontend/src/pages/visual-editor.tsx
index 7d48708c..107959b9 100644
--- a/frontend/src/pages/visual-editor.tsx
+++ b/frontend/src/pages/visual-editor.tsx
@@ -10,17 +10,17 @@ import ChatIcon from "@mui/icons-material/Chat";
 import { Avatar, Box, Typography } from "@mui/material";
 import UiChatWidget from "hexabot-widget/src/UiChatWidget";
 import { ReactElement } from "react";
-import { useTranslation } from "react-i18next";
 
 import { getAvatarSrc } from "@/components/inbox/helpers/mapMessages";
 import { VisualEditor } from "@/components/visual-editor";
 import { useConfig } from "@/hooks/useConfig";
+import { useTranslate } from "@/hooks/useTranslate";
 import i18n from "@/i18n/config";
 import { Layout } from "@/layout";
 import { EntityType } from "@/services/types";
 
 const CustomWidgetHeader = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslate();
 
   return (
     <Box display="flex" alignItems="center" ml={2}>
diff --git a/frontend/src/types/common/object.types.ts b/frontend/src/types/common/object.types.ts
new file mode 100644
index 00000000..ccf9d8f9
--- /dev/null
+++ b/frontend/src/types/common/object.types.ts
@@ -0,0 +1,19 @@
+/*
+ * Copyright © 2024 Hexastack. All rights reserved.
+ *
+ * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
+ * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
+ * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
+ */
+
+export type TFilterNestedKeysOfType<T, U = string> = T extends object
+  ? {
+      [K in keyof T]: T[K] extends U
+        ? `${K & string}`
+        : T[K] extends object
+        ? Array<any> extends T[K]
+          ? never
+          : `${K & string}.${TFilterNestedKeysOfType<T[K], U>}`
+        : never;
+    }[keyof T]
+  : never;