diff --git a/package-lock.json b/package-lock.json
index 7b11e0c2..e43343e3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,8 +9,12 @@
       "version": "0.0.0",
       "dependencies": {
         "@dts-stn/service-canada-design-system": "^1.67.3",
+        "@types/i18next": "^13.0.0",
+        "i18n": "^0.15.1",
+        "i18next": "^23.11.5",
         "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "react-i18next": "^14.1.2"
       },
       "devDependencies": {
         "@types/react": "^18.2.66",
@@ -1986,6 +1990,45 @@
         "node": ">= 10.18.0"
       }
     },
+    "node_modules/@messageformat/core": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/@messageformat/core/-/core-3.3.0.tgz",
+      "integrity": "sha512-YcXd3remTDdeMxAlbvW6oV9d/01/DZ8DHUFwSttO3LMzIZj3iO0NRw+u1xlsNNORFI+u0EQzD52ZX3+Udi0T3g==",
+      "dependencies": {
+        "@messageformat/date-skeleton": "^1.0.0",
+        "@messageformat/number-skeleton": "^1.0.0",
+        "@messageformat/parser": "^5.1.0",
+        "@messageformat/runtime": "^3.0.1",
+        "make-plural": "^7.0.0",
+        "safe-identifier": "^0.4.1"
+      }
+    },
+    "node_modules/@messageformat/date-skeleton": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@messageformat/date-skeleton/-/date-skeleton-1.0.1.tgz",
+      "integrity": "sha512-jPXy8fg+WMPIgmGjxSlnGJn68h/2InfT0TNSkVx0IGXgp4ynnvYkbZ51dGWmGySEK+pBiYUttbQdu5XEqX5CRg=="
+    },
+    "node_modules/@messageformat/number-skeleton": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@messageformat/number-skeleton/-/number-skeleton-1.2.0.tgz",
+      "integrity": "sha512-xsgwcL7J7WhlHJ3RNbaVgssaIwcEyFkBqxHdcdaiJzwTZAWEOD8BuUFxnxV9k5S0qHN3v/KzUpq0IUpjH1seRg=="
+    },
+    "node_modules/@messageformat/parser": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@messageformat/parser/-/parser-5.1.0.tgz",
+      "integrity": "sha512-jKlkls3Gewgw6qMjKZ9SFfHUpdzEVdovKFtW1qRhJ3WI4FW5R/NnGDqr8SDGz+krWDO3ki94boMmQvGke1HwUQ==",
+      "dependencies": {
+        "moo": "^0.5.1"
+      }
+    },
+    "node_modules/@messageformat/runtime": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@messageformat/runtime/-/runtime-3.0.1.tgz",
+      "integrity": "sha512-6RU5ol2lDtO8bD9Yxe6CZkl0DArdv0qkuoZC+ZwowU+cdRlVE1157wjCmlA5Rsf1Xc/brACnsZa5PZpEDfTFFg==",
+      "dependencies": {
+        "make-plural": "^7.0.0"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2804,6 +2847,15 @@
         "@types/unist": "^2"
       }
     },
+    "node_modules/@types/i18next": {
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/@types/i18next/-/i18next-13.0.0.tgz",
+      "integrity": "sha512-gp/SIShAuf4WOqi8ey0nuI7qfWaVpMNCcs/xLygrh/QTQIXmlDC1E0TtVejweNW+7SGDY7g0lyxyKZIJuCKIJw==",
+      "deprecated": "This is a stub types definition. i18next provides its own type definitions, so you do not need this installed.",
+      "dependencies": {
+        "i18next": "*"
+      }
+    },
     "node_modules/@types/istanbul-lib-coverage": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz",
@@ -3629,6 +3681,11 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
     },
+    "node_modules/boolean": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/boolean/-/boolean-3.2.0.tgz",
+      "integrity": "sha512-d0II/GO9uf9lfUHH2BQsjxzRJZBdsjgsBiW4BvhWk/3qoKwQFjIDVN19PfX8F2D/r9PCMTtLWjYVCFrpeYUzsw=="
+    },
     "node_modules/brace-expansion": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
@@ -5024,6 +5081,17 @@
       "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
       "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw=="
     },
+    "node_modules/fast-printf": {
+      "version": "1.6.9",
+      "resolved": "https://registry.npmjs.org/fast-printf/-/fast-printf-1.6.9.tgz",
+      "integrity": "sha512-FChq8hbz65WMj4rstcQsFB0O7Cy++nmbNfLYnD9cYv2cRn8EG6k/MGn9kO/tjO66t09DLDugj3yL+V2o6Qftrg==",
+      "dependencies": {
+        "boolean": "^3.1.4"
+      },
+      "engines": {
+        "node": ">=10.0"
+      }
+    },
     "node_modules/fastq": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
@@ -5531,6 +5599,14 @@
       "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
       "peer": true
     },
+    "node_modules/html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "dependencies": {
+        "void-elements": "3.1.0"
+      }
+    },
     "node_modules/http-proxy-agent": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz",
@@ -5564,6 +5640,47 @@
         "node": ">=10.17.0"
       }
     },
+    "node_modules/i18n": {
+      "version": "0.15.1",
+      "resolved": "https://registry.npmjs.org/i18n/-/i18n-0.15.1.tgz",
+      "integrity": "sha512-yue187t8MqUPMHdKjiZGrX+L+xcUsDClGO0Cz4loaKUOK9WrGw5pgan4bv130utOwX7fHE9w2iUeHFalVQWkXA==",
+      "dependencies": {
+        "@messageformat/core": "^3.0.0",
+        "debug": "^4.3.3",
+        "fast-printf": "^1.6.9",
+        "make-plural": "^7.0.0",
+        "math-interval-parser": "^2.0.1",
+        "mustache": "^4.2.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mashpie"
+      }
+    },
+    "node_modules/i18next": {
+      "version": "23.11.5",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.11.5.tgz",
+      "integrity": "sha512-41pvpVbW9rhZPk5xjCX2TPJi2861LEig/YRhUkY+1FQ2IQPS0bKUDYnEqY8XPPbB48h1uIwLnP9iiEfuSl20CA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://locize.com"
+        },
+        {
+          "type": "individual",
+          "url": "https://locize.com/i18next.html"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        }
+      ],
+      "dependencies": {
+        "@babel/runtime": "^7.23.2"
+      }
+    },
     "node_modules/identity-obj-proxy": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz",
@@ -6732,6 +6849,11 @@
       "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
       "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw=="
     },
+    "node_modules/make-plural": {
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/make-plural/-/make-plural-7.4.0.tgz",
+      "integrity": "sha512-4/gC9KVNTV6pvYg2gFeQYTW3mWaoJt7WZE5vrp1KnQDgW92JtYZnzmZT81oj/dUTqAIu0ufI2x3dkgu3bB1tYg=="
+    },
     "node_modules/makeerror": {
       "version": "1.0.12",
       "resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.12.tgz",
@@ -6752,6 +6874,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/math-interval-parser": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/math-interval-parser/-/math-interval-parser-2.0.1.tgz",
+      "integrity": "sha512-VmlAmb0UJwlvMyx8iPhXUDnVW1F9IrGEd9CIOmv+XL8AErCUUuozoDMrgImvnYt2A+53qVX/tPW6YJurMKYsvA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/memoize-one": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
@@ -6899,11 +7029,24 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/moo": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/moo/-/moo-0.5.2.tgz",
+      "integrity": "sha512-iSAJLHYKnX41mKcJKjqvnAN9sf0LMDTXDEvFv+ffuRR9a1MIuXLjMNL6EsnDHSkKLTWNqQQ5uo61P4EbU4NU+Q=="
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
+    "node_modules/mustache": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/mustache/-/mustache-4.2.0.tgz",
+      "integrity": "sha512-71ippSywq5Yb7/tVYyGbkBggbU8H3u5Rz56fH60jGFgr8uHwxs+aSKeqmluIVzM0m0kB7xQjKS6qPfd0b2ZoqQ==",
+      "bin": {
+        "mustache": "bin/mustache"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
@@ -7693,6 +7836,27 @@
         "react": ">= 16.8.0"
       }
     },
+    "node_modules/react-i18next": {
+      "version": "14.1.2",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-14.1.2.tgz",
+      "integrity": "sha512-FSIcJy6oauJbGEXfhUgVeLzvWBhIBIS+/9c6Lj4niwKZyGaGb4V4vUbATXSlsHJDXXB+ociNxqFNiFuV1gmoqg==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "html-parse-stringify": "^3.0.1"
+      },
+      "peerDependencies": {
+        "i18next": ">= 23.2.3",
+        "react": ">= 16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-is": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
@@ -8227,6 +8391,11 @@
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
       "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
     },
+    "node_modules/safe-identifier": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/safe-identifier/-/safe-identifier-0.4.2.tgz",
+      "integrity": "sha512-6pNbSMW6OhAi9j+N8V+U715yBQsaWJ7eyEUaOrawX+isg5ZxhUlV1NipNtgaKHmFGiABwt+ZF04Ii+3Xjkg+8w=="
+    },
     "node_modules/sass": {
       "version": "1.77.2",
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.2.tgz",
@@ -9211,6 +9380,14 @@
         }
       }
     },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/walker": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz",
diff --git a/package.json b/package.json
index b31f3ea7..beda97e5 100644
--- a/package.json
+++ b/package.json
@@ -13,8 +13,12 @@
   },
   "dependencies": {
     "@dts-stn/service-canada-design-system": "^1.67.3",
+    "@types/i18next": "^13.0.0",
+    "i18n": "^0.15.1",
+    "i18next": "^23.11.5",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-i18next": "^14.1.2"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",
diff --git a/src/Components/DragDropFileInput/DragDropFileInput.tsx b/src/Components/DragDropFileInput/DragDropFileInput.tsx
index 84d5070f..ac82972b 100644
--- a/src/Components/DragDropFileInput/DragDropFileInput.tsx
+++ b/src/Components/DragDropFileInput/DragDropFileInput.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useRef, useEffect } from "react";
 import "./DragDropFileInput.css";
+import { useTranslation } from "react-i18next";
 interface FileInputProps {
   sendChange: (files: File[]) => void;
   file: string;
@@ -53,9 +54,11 @@ const DragDropFileInput: React.FC<FileInputProps> = ({ sendChange, file }) => {
     sendChange([]);
   };
 
+  const { t } = useTranslation();
+
   return (
     <div className="drag-drop-container">
-      <h3 className="title">Attach a document</h3>
+      <h3 className="title">{t("attach_doc")}</h3>
       <input
         id="file-input"
         ref={fileInput}
@@ -74,12 +77,12 @@ const DragDropFileInput: React.FC<FileInputProps> = ({ sendChange, file }) => {
         <embed id="preview" src={file} className={file ? "active" : ""}></embed>
       </label>
       <div className="drag-drop-inner">
-        <p>Drag & drop your files here or</p>
+        <p>{t("drag_and_drop")}</p>
         <button type="button" onClick={handleClick}>
-          Browse Files
+          {t("browse")}
         </button>
         <button type="button" onClick={handleCancel}>
-          Cancel
+          {t("cancel")}
         </button>
       </div>
     </div>
diff --git a/src/Components/FileList/FileList.tsx b/src/Components/FileList/FileList.tsx
index 8d76b123..9e1877a3 100644
--- a/src/Components/FileList/FileList.tsx
+++ b/src/Components/FileList/FileList.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import "./FileList.css";
 import FileElement from "./FileElement/FileElement";
+import { useTranslation } from "react-i18next";
 
 interface FileListProps {
   files: File[];
@@ -28,11 +29,11 @@ const FileList: React.FC<FileListProps> = ({
       propagateDelete(file, files[files.length - 1] === file);
     }
   };
-
+  const { t } = useTranslation();
   return (
     <div className={`file-list ${files.length === 0 ? "empty" : ""}`}>
       <div className={`no-element ${files.length === 0 ? "active" : ""}`}>
-        No element to show
+        {t("no_element")}
       </div>
       {[...files].map((file: File, index: number) => (
         <FileElement
diff --git a/src/Components/Header/Header.tsx b/src/Components/Header/Header.tsx
index a7aca6c1..7e542e60 100644
--- a/src/Components/Header/Header.tsx
+++ b/src/Components/Header/Header.tsx
@@ -1,26 +1,28 @@
 import cfia from "../../assets/CFIA_Banner.png";
 import "./Header.css";
+import { useTranslation } from "react-i18next";
 const environment = {
   version: "0.0.1",
 };
 
 function Header() {
+  const { t } = useTranslation();
   return (
     <header role={"banner"}>
       <nav>
         <ul>
           <li>
-            <a href="https://inspection.canada.ca/" title="ACIA | CFIA">
+            <a href="https://inspection.canada.ca/" title={t("title_link")}>
               <img
                 src={cfia}
                 id="header-img"
-                alt="CFIA logo"
-                aria-label="Link to CFIA | Lien à l'ACIA"
+                alt={t("logo")}
+                aria-label="Link to CFIA | Lien à l'ACIA" // not sure if i need to make the traduction here.
               />
             </a>
           </li>
           <li id="version">
-            Alpha Version{" "}
+            {t("Version")}{" "}
             {environment.version !== "" ? "v" + environment.version : ""}
           </li>
         </ul>
@@ -28,5 +30,4 @@ function Header() {
     </header>
   );
 }
-
 export default Header;
diff --git a/src/Components/LanguageChanger/LanguageChanger.tsx b/src/Components/LanguageChanger/LanguageChanger.tsx
new file mode 100644
index 00000000..dd250d03
--- /dev/null
+++ b/src/Components/LanguageChanger/LanguageChanger.tsx
@@ -0,0 +1,26 @@
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Button } from "react-bootstrap";
+
+const LanguageSwitcherButton = () => {
+  const { t, i18n } = useTranslation();
+  const [selectedLanguage, setSelectedLanguage] = useState("en");
+
+  const handleChangeLanguage = (newLang: string | undefined) => {
+    setSelectedLanguage(newLang ?? "en");
+    i18n.changeLanguage(newLang ?? "en");
+  };
+
+  return (
+    <Button
+      variant="primary"
+      onClick={() =>
+        handleChangeLanguage(selectedLanguage === "en" ? "fr" : "en")
+      }
+    >
+      {t(selectedLanguage)}
+    </Button>
+  );
+};
+
+export default LanguageSwitcherButton;
diff --git a/src/Pages/HomePage/HomePage.tsx b/src/Pages/HomePage/HomePage.tsx
index 6600123a..c0e3fe59 100644
--- a/src/Pages/HomePage/HomePage.tsx
+++ b/src/Pages/HomePage/HomePage.tsx
@@ -3,9 +3,12 @@ import "./HomePage.css";
 import DragDropFileInput from "../../Components/DragDropFileInput/DragDropFileInput";
 import FileList from "../../Components/FileList/FileList";
 import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import LanguageSwitcherButton from "../../Components/LanguageChanger/LanguageChanger";
 
 function HomePage() {
   const [files, setFiles] = useState<File[]>([]);
+  const { t } = useTranslation(["translation", "common"]);
 
   const [toShow, setShow] = useState("");
 
@@ -18,7 +21,8 @@ function HomePage() {
   /**
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const field = e.target! as HTMLInputElement;
-    setForm({ ...form, [field.name]: field.value });
+    const translatedFieldName = t("field.name"); // Translate the field name
+    setForm({ ...form, [translatedFieldName]: field.value });
   };
   */
   const handlePhotoChange = (newFiles: File[]) => {
@@ -52,10 +56,11 @@ function HomePage() {
 
   return (
     <div className="App">
+      <LanguageSwitcherButton />
       <div className="container">
         <DragDropFileInput sendChange={handlePhotoChange} file={toShow} />
         <button className="submit-btn" type="submit" onClick={Submit}>
-          Submit
+          {t("submit")}
         </button>
         <FileList
           files={files}
diff --git a/src/Pages/JsonPage/Json.tsx b/src/Pages/JsonPage/Json.tsx
index 43b0e304..ad078af1 100644
--- a/src/Pages/JsonPage/Json.tsx
+++ b/src/Pages/JsonPage/Json.tsx
@@ -1,16 +1,19 @@
 import { useEffect, useState } from "react";
 import { useLocation } from "react-router-dom";
 import "./Json.css";
+import { Trans } from "react-i18next";
 
 function JsonPage() {
   const [loading, setLoading] = useState(true);
   const [form, setForm] = useState({});
-  const [fetchError, setError] = useState<Error | null>(null);
+  const [fetchError] = useState<Error | null>(null);
   const location = useLocation();
   const files: File[] = location.state.data;
   const [uploadStarted, startUpload] = useState(false);
 
-  const api_url = "https://shiny-goggles-75q6p5xj4wwfp6gg-5000.app.github.dev/";
+  const api_url =
+    "https://silver-space-parakeet-p9xgrj9j6v7fr6p5-5000.app.github.dev/";
+
   const upload_all = async () => {
     const res = [];
     for (let i = 0; i < files.length; i++) {
@@ -28,6 +31,7 @@ function JsonPage() {
     }
     return res;
   };
+
   useEffect(() => {
     if (!uploadStarted) {
       startUpload(true);
@@ -36,17 +40,10 @@ function JsonPage() {
           method: "GET",
           headers: {},
         }).then((response: Response) => {
-          response
-            .json()
-            .then((data) => {
-              setForm(data);
-              setLoading(false);
-            })
-            .catch((e) => {
-              setLoading(false);
-              setError(e);
-              console.log(e);
-            });
+          response.json().then((data) => {
+            setForm(data);
+            setLoading(false);
+          });
         });
       });
     }
@@ -55,7 +52,9 @@ function JsonPage() {
     <div>
       <div className={`loader-container ${loading ? "active" : ""}`}>
         <div className="spinner"></div>
-        <p>Votre fichier est en cours d'analyse Your file is being analyzed</p>
+        <p>
+          <Trans>file_analyse</Trans>
+        </p>
       </div>
       <pre>
         {fetchError ? (
diff --git a/src/Pages/NoPage/NoPage.tsx b/src/Pages/NoPage/NoPage.tsx
index 9c1f4688..6039598a 100644
--- a/src/Pages/NoPage/NoPage.tsx
+++ b/src/Pages/NoPage/NoPage.tsx
@@ -1,9 +1,8 @@
 import "./NoPage.css";
-
 function NoPage() {
   return (
     <>
-      <p>404</p>
+      <p>404 page not found</p>
     </>
   );
 }
diff --git a/src/en.json b/src/en.json
new file mode 100644
index 00000000..f6a1ce78
--- /dev/null
+++ b/src/en.json
@@ -0,0 +1,55 @@
+{
+        "submit":"Submit",
+        "404":"Page not found",
+        "version":"Alpha Version",
+        "logo":"CFIA logo",
+        "title_link":"CFIA",
+        "drag_and_drop":"Drag & drop your files here or",
+        "attach_doc": "Attach a document",
+        "browse":"Browse Files",
+        "cancel":"Cancel",
+        "no_element": " No element to show",
+        "file_analyse":"Your file is being analyzed",
+
+        "file_analyse_error":"An error occurred while analyzing the file",
+        "file_analyse_success":"File analyzed successfully",
+
+        "company_name": "Your Company Name",
+        "company_address": "Your Company Address",
+        "company_website": "Your Company Website (Optional)",
+        "company_phone_number": "Your Company Phone Number (Optional)",
+        "manufacturer_name": "Fertilizer Manufacturer Name",
+        "manufacturer_address": "Fertilizer Manufacturer Address",
+        "manufacturer_website": "Fertilizer Manufacturer Website (Optional)",
+        "manufacturer_phone_number": "Fertilizer Manufacturer Phone Number (Optional)",
+        "fertiliser_name": "Fertilizer Product Name",
+        "fertiliser_registration_number": "Registration Number (if applicable)",
+        "fertiliser_lot_number": "Lot Number",
+        "fertiliser_npk": "NPK Ratio (e.g., 10-20-10)",
+        "fertiliser_precautionary_fr": "Precautions (French)",
+        "fertiliser_precautionary_en": "Precautions (English)",
+        "fertiliser_instructions_fr": "Instructions (French)",
+        "fertiliser_instructions_en": "Instructions (English)",
+        "fertiliser_ingredients_fr": "Ingredients (French)",
+        "fertiliser_ingredients_en": "Ingredients (English)",
+        "fertiliser_specifications_fr": "Specifications (French)",
+        "fertiliser_specifications_en": "Specifications (English)",
+        "fertiliser_cautions_fr": "Cautions (French)",
+        "fertiliser_cautions_en": "Cautions (English)",
+        "fertiliser_recommendation_fr": "Recommendations (French)",
+        "fertiliser_recommendation_en": "Recommendations (English)",
+        "fertiliser_first_aid_fr": "First Aid (French)",
+        "fertiliser_first_aid_en": "First Aid (English)",
+        "fertiliser_warranty_fr": "Warranty (French)",
+        "fertiliser_warranty_en": "Warranty (English)",
+        "fertiliser_danger_fr": "Danger (French)",
+        "fertiliser_danger_en": "Danger (English)",
+        "fertiliser_guaranteed_analysis": "Guaranteed Analysis",
+        "nutrient_in_guaranteed_analysis": "Nutrient (e.g., Nitrogen, Phosphorus, Potassium)",
+        "percentage_in_guaranteed_analysis": "Percentage (e.g., 10%)",
+        "fertiliser_weight": "Weight (e.g., 10 kg)",
+        "fertiliser_density": "Density (if applicable)",
+        "fertiliser_volume": "Volume (if applicable)",
+        "fertiliser_label_all_other_text_fr": "Other Label Text (French)",
+        "fertiliser_label_all_other_text_en": "Other Label Text (English)"
+        }
diff --git a/src/fr.json b/src/fr.json
new file mode 100644
index 00000000..7d147ce6
--- /dev/null
+++ b/src/fr.json
@@ -0,0 +1,55 @@
+{
+        "submit":"Soumettre",
+        "404":"Page indisponible",
+        "version":"Version Alpha ",
+        "logo":"logo ACIA",
+        "title_link":"ACIA",
+        "drag_and_drop":"Faites glisser et déposez vos fichiers ici ou",
+        "attach_doc": "Attacher un document",
+        "browse":"Parcourir les fichiers",
+        "cancel":"Annuler",
+        "no_element": " Aucun element à afficher",
+        "file_analyse":"Votre fichier est en cours d'analyse",
+
+        "file_analyse_error":"Erreur lors de l'analyse du fichier",
+        "file_analyse_success":"Analyse du fichier réussie",
+
+        "company_name": "Nom de votre entreprise",
+        "company_address": "Adresse de votre entreprise",
+        "company_website": "Site Web de votre entreprise (facultatif)",
+        "company_phone_number": "Numéro de téléphone de votre entreprise (facultatif)",
+        "manufacturer_name": "Nom du fabricant d'engrais",
+        "manufacturer_address": "Adresse du fabricant d'engrais",
+        "manufacturer_website": "Site Web du fabricant d'engrais (facultatif)",
+        "manufacturer_phone_number": "Numéro de téléphone du fabricant d'engrais (facultatif)",
+        "fertiliser_name": "Nom du produit d'engrais",
+        "fertiliser_registration_number": "Numéro d'enregistrement (si applicable)",
+        "fertiliser_lot_number": "Numéro de lot",
+        "fertiliser_npk": "Ratio NPK (par exemple, 10-20-10)",
+        "fertiliser_precautionary_fr": "Précautions (français)",
+        "fertiliser_precautionary_en": "Précautions (anglais)",
+        "fertiliser_instructions_fr": "Instructions d'emploi (français)",
+        "fertiliser_instructions_en": "Instructions (anglais)",
+        "fertiliser_ingredients_fr": "Ingrédients (français)",
+        "fertiliser_ingredients_en": "Ingrédients (anglais)",
+        "fertiliser_specifications_fr": "Spécifications (français)",
+        "fertiliser_specifications_en": "Spécifications (anglais)",
+        "fertiliser_cautions_fr": "Mises en garde (français)",
+        "fertiliser_cautions_en": "Mises en garde (anglais)",
+        "fertiliser_recommendation_fr": "Recommandations (français)",
+        "fertiliser_recommendation_en": "Recommandations (anglais)",
+        "fertiliser_first_aid_fr": "Premiers soins (français)",
+        "fertiliser_first_aid_en": "Premiers soins (anglais)",
+        "fertiliser_warranty_fr": "Garantie (français)",
+        "fertiliser_warranty_en": "Garantie (anglais)",
+        "fertiliser_danger_fr": "Danger (français)",
+        "fertiliser_danger_en": "Danger (anglais)",
+        "fertiliser_guaranteed_analysis": "Analyse garantie",
+        "nutrient_in_guaranteed_analysis": "Nutriment (par exemple, azote, phosphore, potassium)",
+        "percentage_in_guaranteed_analysis": "Pourcentage (par exemple, 10%)",
+        "fertiliser_weight": "Poids (par exemple, 10 kg)",
+        "fertiliser_density": "Densité (si applicable)",
+        "fertiliser_volume": "Volume (si applicable)",
+        "fertiliser_label_all_other_text_fr": "Autre texte sur l'étiquette (français)",
+        "fertiliser_label_all_other_text_en": "Autre texte sur l'étiquette (anglais)"
+}
diff --git a/src/i18n.ts b/src/i18n.ts
new file mode 100644
index 00000000..d87d82a8
--- /dev/null
+++ b/src/i18n.ts
@@ -0,0 +1,20 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+
+import enTranslations from "./en.json";
+import frTranslations from "./fr.json";
+
+const resources = {
+  en: { translation: enTranslations },
+  fr: { translation: frTranslations },
+};
+
+i18n.use(initReactI18next).init({
+  resources,
+  lng: "fr",
+  interpolation: {
+    escapeValue: false,
+  },
+});
+
+export default i18n;
diff --git a/src/main.tsx b/src/main.tsx
index f25366e5..d92f6df4 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -2,9 +2,13 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.tsx";
 import "./index.css";
+import { I18nextProvider } from "react-i18next";
+import i18n from "./i18n.ts";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
+  <I18nextProvider i18n={i18n}>
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>
+  </I18nextProvider>,
 );
diff --git a/tsconfig.json b/tsconfig.json
index a7fc6fbf..8efe9794 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -20,6 +20,6 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src"],
+  "include": ["src", "src/i18n.ts"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }