diff --git a/src/vva-fe/src/components/atoms/CopyButton.tsx b/src/vva-fe/src/components/atoms/CopyButton.tsx
index f2277a5ec..28feecad4 100644
--- a/src/vva-fe/src/components/atoms/CopyButton.tsx
+++ b/src/vva-fe/src/components/atoms/CopyButton.tsx
@@ -2,7 +2,7 @@ import { useMemo } from "react";
 
 import { ICONS } from "@consts";
 import { useSnackbar } from "@context";
-import { usei18n } from "@translations";
+import { useTranslation } from "react-i18next";
 
 interface Props {
   isChecked?: boolean;
@@ -12,7 +12,7 @@ interface Props {
 
 export const CopyButton = ({ isChecked, text, variant }: Props) => {
   const { addSuccessAlert } = useSnackbar();
-  const { t } = usei18n();
+  const { t } = useTranslation();
 
   const iconSrc = useMemo(() => {
     if (variant === "blue") {
diff --git a/src/vva-fe/src/hooks/index.ts b/src/vva-fe/src/hooks/index.ts
index 04d84bc47..e17b56d3a 100644
--- a/src/vva-fe/src/hooks/index.ts
+++ b/src/vva-fe/src/hooks/index.ts
@@ -1,3 +1,4 @@
+export { useTranslation } from "react-i18next";
 export * from "./useScreenDimension";
 export * from "./useSlider";
 export * from "./useSaveScrollPosition";
diff --git a/src/vva-fe/src/translations/i18n.ts b/src/vva-fe/src/translations/i18n.ts
index beaf8a4b6..aa3a28745 100644
--- a/src/vva-fe/src/translations/i18n.ts
+++ b/src/vva-fe/src/translations/i18n.ts
@@ -4,7 +4,7 @@ import { en } from "./locales/en";
 
 i18n.use(initReactI18next).init({
   resources: {
-    en: en,
+    en,
   },
   fallbackLng: "en",
   interpolation: {
diff --git a/src/vva-fe/src/types/i18next.d.ts b/src/vva-fe/src/types/i18next.d.ts
new file mode 100644
index 000000000..80d7588d2
--- /dev/null
+++ b/src/vva-fe/src/types/i18next.d.ts
@@ -0,0 +1,11 @@
+import { en } from "@/translations/locales/en";
+
+declare module "i18next" {
+  interface CustomTypeOptions {
+    defaultNS: "en";
+
+    resources: {
+      en: (typeof en)["translation"];
+    };
+  }
+}