diff --git a/apps/OpenSign/public/locales/en/translation.json b/apps/OpenSign/public/locales/en/translation.json
index 0ec717b36..5511ae483 100644
--- a/apps/OpenSign/public/locales/en/translation.json
+++ b/apps/OpenSign/public/locales/en/translation.json
@@ -95,8 +95,17 @@
       "Note": "Note", 
       "Folder": "Folder",
       "Reason":  "Reason"
-
-    },
+      },
+      "report-help":{
+        "Draft Documents": "These are documents you have started but have not finalized for sending.",
+        "Need your sign":"This is a list of documents that are waiting for your signature",
+        "In-progress documents": "This is a list of documents you've sent to other parties for signature.",
+        "Completed Documents":"This is a list of documents that have been signed by all parties.",
+        "Declined Documents": "This is a list of documents that have been declined by one of the signers.",
+        "Expired Documents":"This is a list of documents that have reached their expiration date.",
+        "Contactbook":"This is a list of contacts/signers added by you. These will appear as suggestions when you try to add signers to a new document.",
+        "Templates" :"This is a list of templates that are available to you for creating documents. You can click the 'use' button to create a new document using a template, modify the document & add signers in the next step."
+        },
     "form-name":{
       "Sign Yourself":"Sign Yourself",
       "Request Signatures":"Request Signatures",
@@ -119,7 +128,63 @@
     "no":"No",
     "auto-reminder":"Auto reminder",
     "remind-once":" Remind once in every (Days)",
-    "next":"Next"
+    "next":"Next",
+    "select-folder":"Select Folder",
+    "OpenSign-drive":"OpenSign™ Drive",
+    "select-folder-help" :"If you do not select a folder, your signed document will be saved in the Main OpenSign drive folder.",
+    "no-data":"No data found",
+    "save-here":"Save Here",
+    "back":"Back",
+    "add-folder":"Add folder",
+    "create-folder":"Create Folder",
+    "parent-folder":"Parent Folder",
+    "create":"Create",
+    "Signers":"Signers",
+    "signers-help":"Begin typing a contact's name to see suggested signers from your saved contacts or add new ones. Arrange the signing order by adding signers in the desired sequence. Use the '+' button to include signers and the 'x' to remove them. Each signer will receive an email prompt to sign the document in the order listed.",
+    "add-signer":"Add Signer",
+    "contact-not-found":"Contact not found",
+    "add-yourself":"Add Yourself",
+    "submit":"Submit",
+    "reset":"Reset",
+    "my-signature":"My Signature",
+    "signature":"Signature",
+    "upload-image":" Upload image",
+    "clear":"Clear",
+     "upload-signature/Image":"Please upload signature/Image",
+     "initials":"Initials",
+      "API" :"API",
+      "api-token":"API Token",
+     "regenerate-token":"Regenerate Token",
+     "generate-token":"Generate Token",
+     "view-docs":"View Docs",
+     "generate-token-alert" :"Are you sure you want to regenerate token it will expire old token?",
+     "yes":"Yes",
+     "copied":"Copied",
+     "wrong-mssg":"Something went wrong.",
+     "token-generated":"Token generated successfully.",
+     "webhook":"Webhook",
+     "update-webhook":"Update Webhook",
+     "add-webhook":"Add Webhook",
+     "webhook-added" :"Webhook added successfully.",
+    "document-signature":{
+      "loader":" This might take some time",
+      "pages":"Pages",
+      "document-signed":"Document signed",
+      "close":"Close",
+      "validation-alert":"Validation alert",
+      "validate-alert-mssg" :" The input does not meet the criteria set by the regular expression.",
+      "otp-verification":"OTP verification",
+      "enter-otp":"Enter OTP",
+      "verify":"Verify",
+      "resend":"Resend",
+      "verify-email":"Please verify your email !",
+      "send-otp":" Send OTP",
+      "otp-placeholder":"Enter OTP received over email",
+      "loading-doc":"Loading Document.."
+     }
+    
+    
+    
   
  
  
diff --git a/apps/OpenSign/public/locales/fr/translation.json b/apps/OpenSign/public/locales/fr/translation.json
index c97910054..a71bca04d 100644
--- a/apps/OpenSign/public/locales/fr/translation.json
+++ b/apps/OpenSign/public/locales/fr/translation.json
@@ -1,4 +1,4 @@
-{
+ {
     "create-account": "Créer un compte",
     "login": "se connecter",
     "language":"Langue",
@@ -96,6 +96,16 @@
       "Folder":"Dossier",
       "Reason": "Raison"
       },
+      "report-help":{
+        "Draft Documents": "Il s'agit de documents que vous avez commencés mais que vous n'avez pas finalisés pour envoi.",
+        "Need your sign": "Voici une liste de documents qui attendent votre signature",
+        "In-progress documents": "Il s'agit d'une liste de documents que vous avez envoyés à d'autres parties pour signature.",
+        "Completed Documents": "Il s'agit d'une liste de documents signés par toutes les parties.",
+        "Declined Documents": "Il s'agit d'une liste de documents qui ont été refusés par l'un des signataires.",
+        "Expired Documents": "Il s'agit d'une liste de documents qui ont atteint leur date d'expiration.",
+        "Contactbook": "Il s'agit d'une liste de contacts/signataires que vous avez ajoutés. Ceux-ci apparaîtront sous forme de suggestions lorsque vous tenterez d'ajouter des signataires à un nouveau document.",
+        "Templates" : "Il s'agit d'une liste de modèles à votre disposition pour créer des documents. Vous pouvez cliquer sur le bouton 'Utiliser' pour créer un nouveau document à l'aide d'un modèle, modifier le document et ajouter des signataires à l'étape suivante."
+        },
       "form-name":{
         "Sign Yourself":"Signez-vous",
         "Request Signatures":"Demander des signatures",
@@ -118,8 +128,62 @@
      "no":"Non",
      "auto-reminder":"Rappel automatique",
      "remind-once":"Rappeler une fois tous les (jours)",
-     "next":"suivant"
+     "next":"Suivant",
+     "select-folder" :"Sélectionner le dossier",
+     "OpenSign-drive":"Lecteur OpenSign™",
+     "select-folder-help" :"Si vous ne sélectionnez pas de dossier, votre document signé sera enregistré dans le dossier du lecteur principal OpenSign.",
+     "no-data"  :"Aucune donnée disponible",
+     "save-here":"Enregistrer ici",
+     "back" :"Dos",
+     "add-folder" :"Ajouter le dossier",
+      "create-folder":"Créer le dossier",
+      "parent-folder" :"Dossier parent",
+      "create":"Créer",
+      "Signers" :"Signataires",
+      "signers-help" :"Commencez à saisir le nom d'un contact pour voir les signataires suggérés par vos contacts enregistrés ou en ajouter de nouveaux. Organisez l'ordre de signature en ajoutant des signataires dans l'ordre souhaité. Utilisez le bouton « + » pour inclure les signataires et le « x » pour les supprimer. Chaque signataire recevra un e-mail invité à signer le document dans l'ordre indiqué.",
+     "add-signer":"Ajouter un signataire",
+     "contact-not-found" :"Contact introuvable",
+     "add-yourself"  :"Ajoutez-vous",
+     "submit" :"Soumettre",
+     "reset" :"Réinitialiser",
+     "my-signature"  :"Ma signature",
+     "signature":"Signature",
+     "upload-image" :"Télécharger une image",
+     "clear" :"clair",
+     "upload-signature/Image" :"Veuillez télécharger la signature/l'image",
+     "initials" :"Initiales",
+     "API" :"API",
+     "api-token":"Jeton API",
+     "regenerate-token":"Régénérer le jeton",
+     "generate-token" :"Générer un jeton",
+     "view-docs" :"Afficher les documents" ,
+     "generate-token-alert"  :"Êtes-vous sûr de vouloir régénérer le jeton, il expirera à l'ancienne jeton?",
+     "yes" :"Oui",
+     "copied" :"Copié",
+     "wrong-mssg"  :"Quelque chose s'est mal passé.",
+     "token-generated"  :"Jeton généré avec succès.",
+     "webhook":"Webhook",
+     "update-webhook" :"Mettre à jour le webhook",
+     "add-webhook" :"Ajouter un webhook",
+     "webhook-added" :"Webhook ajouté avec succès.",
 
+      "document-signature":{
+      "loader":"Cela pourrait prendre un certain temps",
+      "pages":"Pages",
+      "document-signed":"Document signé",
+      "close":"Close",
+      "validation-alert":"Alerte de validation",
+      "validate-alert-mssg" :"L'entrée ne répond pas aux critères définis par l'expression régulière.",
+      "otp-verification":"Vérification OTP",
+      "enter-otp":"Entrez OTP",
+      "verify":"Vérifier",
+      "resend":"Renvoyer",
+      "verify-email":"Veuillez vérifier votre email!",
+      "send-otp":"Envoyer OTP",
+      "otp-placeholder":"Saisissez l'OTP reçu par e-mail",
+      "loading-doc":"Chargement du document.."
+     }
+    
 
 }
   
\ No newline at end of file
diff --git a/apps/OpenSign/src/components/AddSigner.js b/apps/OpenSign/src/components/AddSigner.js
index 3a3a8cf3b..9b85ebb13 100644
--- a/apps/OpenSign/src/components/AddSigner.js
+++ b/apps/OpenSign/src/components/AddSigner.js
@@ -1,8 +1,10 @@
 import React, { useState, useEffect } from "react";
 import Parse from "parse";
 import Loader from "../primitives/Loader";
+import { useTranslation } from "react-i18next";
 
 const AddSigner = (props) => {
+  const { t } = useTranslation();
   const [name, setName] = useState("");
   const [phone, setPhone] = useState("");
   const [email, setEmail] = useState("");
@@ -214,14 +216,14 @@ const AddSigner = (props) => {
               className="op-checkbox op-checkbox-sm"
             />
             <label htmlFor="addYourself" className="ml-2 mb-0">
-              Add Yourself
+              {t("add-yourself")}
             </label>
           </div>
         )}
         <form onSubmit={handleSubmit}>
           <div className="mb-3">
             <label htmlFor="name" className="block text-xs font-semibold">
-              Name
+              {t("name")}
               <span className="text-[red] text-[13px]"> *</span>
             </label>
             <input
@@ -236,7 +238,7 @@ const AddSigner = (props) => {
           </div>
           <div className="mb-3">
             <label htmlFor="email" className="block text-xs font-semibold">
-              Email
+              {t("email")}
               <span className="text-[red] text-[13px]"> *</span>
             </label>
             <input
@@ -251,7 +253,7 @@ const AddSigner = (props) => {
           </div>
           <div className="mb-3">
             <label htmlFor="phone" className="block text-xs font-semibold">
-              Phone
+              {t("phone")}
             </label>
             <input
               type="text"
@@ -264,14 +266,14 @@ const AddSigner = (props) => {
           </div>
           <div className="mt-4 flex gap-x-2 justify-start">
             <button type="submit" className="op-btn op-btn-primary">
-              Submit
+              {t("submit")}
             </button>
             <button
               type="button"
               onClick={() => handleReset()}
               className="op-btn op-btn-secondary"
             >
-              Reset
+              {t("reset")}
             </button>
           </div>
         </form>
diff --git a/apps/OpenSign/src/components/pdf/RenderAllPdfPage.js b/apps/OpenSign/src/components/pdf/RenderAllPdfPage.js
index f8b76adcc..68ac073ed 100644
--- a/apps/OpenSign/src/components/pdf/RenderAllPdfPage.js
+++ b/apps/OpenSign/src/components/pdf/RenderAllPdfPage.js
@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { Document, Page } from "react-pdf";
 import { useSelector } from "react-redux";
 
@@ -13,6 +14,7 @@ function RenderAllPdfPage({
   signerObjectId,
   containerWH
 }) {
+  const { t } = useTranslation();
   const [signPageNumber, setSignPageNumber] = useState([]);
   const [bookmarkColor, setBookmarkColor] = useState("");
   //set all number of pages after load pdf
@@ -67,14 +69,14 @@ function RenderAllPdfPage({
   return (
     <div ref={pageContainer} className="hidden w-[20%] bg-base-100 md:block">
       <div className="mx-2 pr-2 pt-2 pb-1 text-[15px] text-base-content font-semibold border-b-[1px] border-base-300">
-        Pages
+        {t("document-signature.pages")}
       </div>
       <div
         className={`flex h-[90%] flex-col items-center m-2  
          autoSignScroll hide-scrollbar max-h-[100vh] `}
       >
         <Document
-          loading={"Loading Document.."}
+          loading={t("document-signature.loading-doc")}
           onLoadSuccess={onDocumentLoad}
           file={signPdfUrl}
         >
diff --git a/apps/OpenSign/src/components/pdf/VerifyEmail.js b/apps/OpenSign/src/components/pdf/VerifyEmail.js
index 59607f844..b001dfa67 100644
--- a/apps/OpenSign/src/components/pdf/VerifyEmail.js
+++ b/apps/OpenSign/src/components/pdf/VerifyEmail.js
@@ -1,12 +1,14 @@
 import React from "react";
 import Loader from "../../primitives/Loader";
+import { useTranslation } from "react-i18next";
 
 function VerifyEmail(props) {
+  const { t } = useTranslation();
   return (
     <dialog className="op-modal op-modal-open absolute z-[1999]">
       <div className="md:w-[40%] w-[80%] op-modal-box p-0 overflow-y-auto hide-scrollbar text-sm">
         <h3 className="font-bold text-lg pt-[15px] px-[20px] text-base-content">
-          OTP verification
+          {t("document-signature.otp-verification")}
         </h3>
         {props.isVerifyModal ? (
           <form
@@ -16,26 +18,26 @@ function VerifyEmail(props) {
             }}
           >
             <div className="px-6 py-3 text-base-content">
-              <label className="mb-2">Enter OTP</label>
+              <label className="mb-2">{t("enter-otp")}</label>
               <input
                 required
                 type="tel"
                 pattern="[0-9]{4}"
                 className="w-full op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content text-xs"
-                placeholder="Enter OTP received over email"
+                placeholder={t("otp-placeholder")}
                 value={props.otp}
                 onChange={(e) => props.setOtp(e.target.value)}
               />
             </div>
             <div className="px-6 my-3">
               <button type="submit" className="op-btn op-btn-primary">
-                Verify
+                {t("document-signature.verify")}
               </button>
               <button
                 className="op-btn op-btn-secondary ml-2"
                 onClick={(e) => props.handleResend(e)}
               >
-                Resend
+                {t("document-signature.resend")}
               </button>
             </div>
           </form>
@@ -45,7 +47,7 @@ function VerifyEmail(props) {
           </div>
         ) : (
           <div className="px-6 py-3 text-base-content">
-            <p className="mb-2 text-sm">Please verify your email !</p>
+            <p className="mb-2 text-sm">{t("verify-email")}</p>
             <div className="px-0 mt-3">
               <button
                 className="op-btn op-btn-primary"
@@ -54,7 +56,7 @@ function VerifyEmail(props) {
                   props.handleVerifyBtn();
                 }}
               >
-                Send OTP
+                {t("document-signature.send-otp")}
               </button>
             </div>
           </div>
diff --git a/apps/OpenSign/src/components/shared/fields/CreateFolder.js b/apps/OpenSign/src/components/shared/fields/CreateFolder.js
index f9ffcc9b1..20c253996 100644
--- a/apps/OpenSign/src/components/shared/fields/CreateFolder.js
+++ b/apps/OpenSign/src/components/shared/fields/CreateFolder.js
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import Parse from "parse";
 import Alert from "../../../primitives/Alert";
 import Loader from "../../../primitives/Loader";
+import { useTranslation } from "react-i18next";
 
 const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
   const folderPtr = {
@@ -9,6 +10,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
     className: folderCls,
     objectId: parentFolderId
   };
+  const { t } = useTranslation();
   const [name, setName] = useState("");
   const [folderList, setFolderList] = useState([]);
   const [isAlert, setIsAlert] = useState(false);
@@ -120,10 +122,13 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
             <Loader />
           </div>
         )}
-        <h1 className="text-base font-semibold mt-[0.4rem]">Create Folder</h1>
+        <h1 className="text-base font-semibold mt-[0.4rem]">
+          {t("create-folder")}
+        </h1>
         <div className="text-xs mt-2">
           <label className="block">
-            Name<span className="text-red-500 text-[13px]">*</span>
+            {t("name")}
+            <span className="text-red-500 text-[13px]">*</span>
           </label>
           <input
             className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
@@ -133,7 +138,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
           />
         </div>
         <div className="text-xs mt-2">
-          <label className="block">Parent Folder</label>
+          <label className="block">{t("parent-folder")}</label>
           <select
             value={selectedParent}
             onChange={handleOptions}
@@ -155,7 +160,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
             className="op-btn op-btn-primary op-btn-sm mt-3"
           >
             <i className="fa-light fa-plus"></i>
-            <span>Create</span>
+            <span>{t("create")}</span>
           </button>
         </div>
       </div>
diff --git a/apps/OpenSign/src/components/shared/fields/SelectFolder.js b/apps/OpenSign/src/components/shared/fields/SelectFolder.js
index b1293a87f..8b21262b9 100644
--- a/apps/OpenSign/src/components/shared/fields/SelectFolder.js
+++ b/apps/OpenSign/src/components/shared/fields/SelectFolder.js
@@ -3,8 +3,10 @@ import Parse from "parse";
 import CreateFolder from "./CreateFolder";
 import ModalUi from "../../../primitives/ModalUi";
 import Tooltip from "../../../primitives/Tooltip";
+import { useTranslation } from "react-i18next";
 
 const SelectFolder = ({ required, onSuccess, folderCls, isReset }) => {
+  const { t } = useTranslation();
   const [isOpen, SetIsOpen] = useState(false);
   const [clickFolder, setClickFolder] = useState("");
   const [selectFolder, setSelectedFolder] = useState({});
@@ -169,7 +171,7 @@ const SelectFolder = ({ required, onSuccess, folderCls, isReset }) => {
     <div className="text-xs mt-2 ">
       <div>
         <label className="block">
-          Select Folder
+          {t("select-folder")}
           {required && <span className="text-red-500 text-[13px]">*</span>}
         </label>
       </div>
@@ -192,12 +194,12 @@ const SelectFolder = ({ required, onSuccess, folderCls, isReset }) => {
               <p>
                 {selectFolder && selectFolder.Name
                   ? selectFolder.Name
-                  : "OpenSign™ Drive"}
+                  : t("OpenSign-drive")}
               </p>
               <div className="text-black text-sm">
                 <i
                   className="fa-light fa-pencil cursor-pointer"
-                  title="Select Folder"
+                  title={t("select-folder")}
                   aria-hidden="true"
                 ></i>
               </div>
@@ -208,15 +210,11 @@ const SelectFolder = ({ required, onSuccess, folderCls, isReset }) => {
           </div>
         </div>
         <div className="absolute top-2 right-1 cursor-pointer">
-          <Tooltip
-            message={
-              "If you do not select a folder, your signed document will be saved in the Main OpenSign drive folder."
-            }
-          />
+          <Tooltip message={t("select-folder-help")} />
         </div>
       </div>
       <ModalUi
-        title={"Select Folder"}
+        title={t("select-folder")}
         isOpen={isOpen}
         handleClose={handleCancel}
       >
@@ -227,7 +225,7 @@ const SelectFolder = ({ required, onSuccess, folderCls, isReset }) => {
               title="OpenSign™ Drive"
               onClick={(e) => removeTabListItem(e)}
             >
-              OpenSign™ Drive /{" "}
+              {t("OpenSign-drive")} /{" "}
             </span>
             {tabList &&
               tabList.map((tab, i) => (
@@ -283,7 +281,7 @@ const SelectFolder = ({ required, onSuccess, folderCls, isReset }) => {
                   ))
                 : !isLoader && (
                     <div className="text-base-content text-center my-2">
-                      No data found
+                      {t("no-data")}
                     </div>
                   )}
             </div>
@@ -305,27 +303,28 @@ const SelectFolder = ({ required, onSuccess, folderCls, isReset }) => {
         <div className="flex justify-between items-center py-[.75rem] px-[1.25rem]">
           <div
             className="op-btn op-btn-seconday op-btn-sm"
-            title="Save Here"
+            title={t("save-here")}
             onClick={handleCreate}
           >
             {isAdd ? (
               <>
                 <i className="fa-light fa-arrow-left" aria-hidden="true"></i>
-                <span className="text-xs">Back</span>
+                <span className="text-xs">{t("back")}</span>
               </>
             ) : (
               <>
                 <i className="fa-light fa-square-plus" aria-hidden="true"></i>
-                <span className="">Add folder</span>
+                <span className="">{t("add-folder")}</span>
               </>
             )}
           </div>
           <div
             className="op-btn op-btn-primary op-btn-sm"
-            title="Save Here"
+            title={t("save-here")}
             onClick={handleSubmit}
           >
-            <i className="fa-light fa-save" aria-hidden="true"></i>Save here
+            <i className="fa-light fa-save" aria-hidden="true"></i>
+            {t("save-here")}
           </div>
         </div>
       </ModalUi>
diff --git a/apps/OpenSign/src/components/shared/fields/SignersInput.js b/apps/OpenSign/src/components/shared/fields/SignersInput.js
index a19cc49f4..1ed5109a3 100644
--- a/apps/OpenSign/src/components/shared/fields/SignersInput.js
+++ b/apps/OpenSign/src/components/shared/fields/SignersInput.js
@@ -4,6 +4,7 @@ import AddSigner from "../../AddSigner";
 import Parse from "parse";
 import Tooltip from "../../../primitives/Tooltip";
 import { createPortal } from "react-dom";
+import { useTranslation } from "react-i18next";
 function arrayMove(array, from, to) {
   array = array.slice();
   array.splice(to < 0 ? array.length + to : to, 0, array.splice(from, 1)[0]);
@@ -32,6 +33,7 @@ const AddSignerModal = ({ isOpen, children }) => {
  */
 
 const SignersInput = (props) => {
+  const { t } = useTranslation();
   const [state, setState] = useState(undefined);
   // const [editFormData, setEditFormData] = useState([]);
   const [selected, setSelected] = useState([]);
@@ -120,15 +122,10 @@ const SignersInput = (props) => {
   return (
     <div className="text-xs mt-2 ">
       <label className="block relative">
-        Signers
+        {t("Signers")}
         {props.required && <span className="text-red-500 text-[13px]">*</span>}
         <span className="absolute ml-1 text-xs z-30">
-          <Tooltip
-            id={"signer-tooltip"}
-            message={
-              "Begin typing a contact's name to see suggested signers from your saved contacts or add new ones. Arrange the signing order by adding signers in the desired sequence. Use the '+' button to include signers and the 'x' to remove them. Each signer will receive an email prompt to sign the document in the order listed."
-            }
-          />
+          <Tooltip id={"signer-tooltip"} message={t("signers-help")} />
         </span>
       </label>
       <div className="flex gap-x-[5px]">
@@ -142,7 +139,7 @@ const SignersInput = (props) => {
             onChange={onChange}
             closeMenuOnSelect={false}
             required={props.required}
-            noOptionsMessage={() => "Contact not found"}
+            noOptionsMessage={() => t("contact-not-found")}
             unstyled
             classNames={{
               control: () =>
@@ -171,7 +168,7 @@ const SignersInput = (props) => {
         </div>
         <AddSignerModal isOpen={modalIsOpen}>
           <h3 className="text-base-content font-bold text-lg pt-[15px] px-[20px]">
-            Add Signer
+            {t("add-signer")}
           </h3>
           <button
             onClick={handleModalCloseClick}
diff --git a/apps/OpenSign/src/pages/GenerateToken.js b/apps/OpenSign/src/pages/GenerateToken.js
index 4b1a31927..c65984325 100644
--- a/apps/OpenSign/src/pages/GenerateToken.js
+++ b/apps/OpenSign/src/pages/GenerateToken.js
@@ -9,6 +9,7 @@ import Tooltip from "../primitives/Tooltip";
 import Loader from "../primitives/Loader";
 import SubscribeCard from "../primitives/SubscribeCard";
 import Tour from "reactour";
+import { useTranslation } from "react-i18next";
 const tourSteps = [
   {
     selector: '[data-tut="apisubscribe"]',
@@ -17,6 +18,7 @@ const tourSteps = [
 ];
 
 function GenerateToken() {
+  const { t } = useTranslation();
   const [parseBaseUrl] = useState(localStorage.getItem("baseUrl"));
   const [parseAppId] = useState(localStorage.getItem("parseAppId"));
   const [apiToken, SetApiToken] = useState("");
@@ -70,13 +72,13 @@ function GenerateToken() {
         const res = await axios.post(url, {}, { headers: headers });
         if (res) {
           SetApiToken(res.data.result.token);
-          setIsAlert({ type: "success", msg: "Token generated successfully." });
+          setIsAlert({ type: "success", msg: t("token-generated") });
         } else {
           console.error("Error while generating Token");
-          setIsAlert({ type: "danger", msg: "Something went wrong." });
+          setIsAlert({ type: "danger", msg: t("wrong-mssg") });
         }
       } catch (error) {
-        setIsAlert({ type: "danger", msg: "Something went wrong." });
+        setIsAlert({ type: "danger", msg: t("wrong-mssg") });
         console.log("while generating Token", error);
       } finally {
         setIsLoader(false);
@@ -89,7 +91,7 @@ function GenerateToken() {
 
   const copytoclipboard = (text) => {
     copytoData(text);
-    setIsAlert({ type: "success", msg: "Copied" });
+    setIsAlert({ type: "success", msg: t("copied") });
     setTimeout(() => {
       setIsAlert({ type: "success", msg: "" });
     }, 1500); // Reset copied state after 1.5 seconds
@@ -112,7 +114,7 @@ function GenerateToken() {
         <>
           <div className="bg-base-100 text-base-content flex flex-col justify-center shadow-md rounded-box mb-3">
             <h1 className={"ml-4 mt-3 mb-2 font-semibold"}>
-              OpenSign™ API{" "}
+              OpenSign™ {t("API")}{" "}
               <Tooltip
                 url={
                   "https://docs.opensignlabs.com/docs/API-docs/opensign-api-v-1"
@@ -123,7 +125,7 @@ function GenerateToken() {
             <ul className="w-full flex flex-col p-2 text-sm">
               <li className="flex flex-col md:flex-row justify-between items-center border-y-[1px] border-gray-300 break-all py-2">
                 <div className="w-full md:w-[70%] flex-col md:flex-row text-xs md:text-[15px] flex items-center gap-x-5">
-                  <span className="ml-1">API Token:</span>{" "}
+                  <span className="ml-1">{t("api-token")}:</span>{" "}
                   <span
                     id="token"
                     className={`${
@@ -150,7 +152,7 @@ function GenerateToken() {
                   onClick={apiToken ? handleModal : handleSubmit}
                   className="op-btn op-btn-primary"
                 >
-                  {apiToken ? "Regenerate Token" : "Generate Token"}
+                  {apiToken ? t("regenerate-token") : t("generate-token")}
                 </button>
               </li>
             </ul>
@@ -164,18 +166,17 @@ function GenerateToken() {
                 }
                 className="op-btn op-btn-secondary mt-2 mb-3 px-8"
               >
-                View Docs
+                {t("view-docs")}
               </button>
             </div>
             <ModalUi
               isOpen={isModal}
-              title={apiToken ? "Regenerate Token" : "Generate Token"}
+              title={apiToken ? t("regenerate-token") : t("generate-token")}
               handleClose={handleModal}
             >
               <div className="m-[20px]">
                 <div className="text-lg font-normal text-base-content">
-                  Are you sure you want to regenerate token it will expire old
-                  token?
+                  {t("generate-token-alert")}
                 </div>
                 <hr className="bg-[#ccc] mt-4" />
                 <div className="flex items-center mt-3 gap-2 text-white">
@@ -183,13 +184,13 @@ function GenerateToken() {
                     onClick={handleSubmit}
                     className="op-btn op-btn-primary ml-[2px]"
                   >
-                    Yes
+                    {t("yes")}
                   </button>
                   <button
                     onClick={handleModal}
                     className="op-btn op-btn-secondary"
                   >
-                    No
+                    {t("no")}
                   </button>
                 </div>
               </div>
diff --git a/apps/OpenSign/src/pages/Managesign.js b/apps/OpenSign/src/pages/Managesign.js
index ba540ad1a..f5a0a8cfe 100644
--- a/apps/OpenSign/src/pages/Managesign.js
+++ b/apps/OpenSign/src/pages/Managesign.js
@@ -7,7 +7,9 @@ import Parse from "parse";
 import { SaveFileSize } from "../constant/saveFileSize";
 import Alert from "../primitives/Alert";
 import Loader from "../primitives/Loader";
+import { useTranslation } from "react-i18next";
 const ManageSign = () => {
+  const { t } = useTranslation();
   const [penColor, setPenColor] = useState("blue");
   const [initialPen, setInitialPen] = useState("blue");
   const [image, setImage] = useState();
@@ -245,12 +247,12 @@ const ManageSign = () => {
       <div className="relative w-full">
         <div className="ml-[5px] my-[20px] md:m-[20px]">
           <div className="text-[20px] font-semibold m-[10px] md:m-0 mb-2">
-            My Signature
+            {t("my-signature")}
           </div>
           <div className="flex flex-col md:flex-row gap-0 md:gap-[12px]">
             <div className="relative">
               <span className="font-medium select-none flex mb-[10px] pl-[10px]">
-                Signature
+                {t("signature")}
               </span>
               <input
                 type="file"
@@ -330,14 +332,14 @@ const ManageSign = () => {
                         className="op-link"
                         onClick={() => handleUploadBtn()}
                       >
-                        Upload image
+                        {t("upload-image")}
                       </div>
                       <div
                         type="button"
                         className="op-link"
                         onClick={() => handleClear()}
                       >
-                        Clear
+                        {t("clear")}
                       </div>
                     </div>
                   </div>
@@ -345,14 +347,14 @@ const ManageSign = () => {
                 {warning && (
                   <span className="customwarning signWarning text-[12px] w-[220px] md:w-[300px]">
                     <i className="fa-light fa-exclamation-circle text-[#fab005] text-[15px] mr-[4px]"></i>
-                    Please upload signature/Image
+                    {t("upload-signature/Image")}
                   </span>
                 )}
               </div>
             </div>
             <div className="relative">
               <span className="font-medium select-none flex mb-[10px] pl-[10px]">
-                Initials
+                {t("initials")}
               </span>
               <div>
                 {isInitials ? (
@@ -425,7 +427,7 @@ const ManageSign = () => {
                       className="op-link text-sm md:text-base mr-1"
                       onClick={() => handleClearInitials()}
                     >
-                      Clear
+                      {t("clear")}
                     </div>
                   </div>
                 </div>
@@ -437,7 +439,7 @@ const ManageSign = () => {
               className="op-btn op-btn-primary"
               onClick={(e) => handleSubmit(e)}
             >
-              save
+              {t("save")}
             </button>
           </div>
         </div>
diff --git a/apps/OpenSign/src/pages/SignyourselfPdf.js b/apps/OpenSign/src/pages/SignyourselfPdf.js
index d52286f31..a91188bbd 100644
--- a/apps/OpenSign/src/pages/SignyourselfPdf.js
+++ b/apps/OpenSign/src/pages/SignyourselfPdf.js
@@ -51,8 +51,10 @@ import TextFontSetting from "../components/pdf/TextFontSetting";
 import VerifyEmail from "../components/pdf/VerifyEmail";
 import PdfZoom from "../components/pdf/PdfZoom";
 import Loader from "../primitives/Loader";
+import { useTranslation } from "react-i18next";
 //For signYourself inProgress section signer can add sign and complete doc sign.
 function SignYourSelf() {
+  const { t } = useTranslation();
   const [pdfDetails, setPdfDetails] = useState([]);
   const [isSignPad, setIsSignPad] = useState(false);
   const [allPages, setAllPages] = useState(null);
@@ -1175,7 +1177,7 @@ function SignYourSelf() {
             <div className="absolute h-[100vh] w-full z-[999] flex flex-col justify-center items-center bg-[#e6f2f2] bg-opacity-80">
               <Loader />
               <span style={{ fontSize: "13px", fontWeight: "bold" }}>
-                This might take some time
+                {t("document-signature.loader")}
               </span>
             </div>
           )}
@@ -1249,7 +1251,7 @@ function SignYourSelf() {
                 {/* this modal is used show this document is already sign */}
                 <ModalUi
                   isOpen={showAlreadySignDoc.status}
-                  title={"Document signed"}
+                  title={t("document-signature.document-signed")}
                   handleClose={() => {
                     setShowAlreadySignDoc({ status: false });
                   }}
@@ -1262,7 +1264,7 @@ function SignYourSelf() {
                       className="op-btn op-btn-ghost shadow-md"
                       onClick={() => setShowAlreadySignDoc({ status: false })}
                     >
-                      Close
+                      {t("close")}
                     </button>
                   </div>
                 </ModalUi>
@@ -1417,15 +1419,13 @@ function SignYourSelf() {
       )}
       <ModalUi
         isOpen={validateAlert}
-        title={"Validation alert"}
+        title={t("validation-alert")}
         handleClose={() => {
           setValidateAlert(false);
         }}
       >
         <div className="p-[20px] h-full">
-          <p>
-            The input does not meet the criteria set by the regular expression.
-          </p>
+          <p>{t("document-signature.validate-alert-mssg")}</p>
 
           <div className="h-[1px] w-full my-[15px] bg-[#9f9f9f]"></div>
           <button
@@ -1433,7 +1433,7 @@ function SignYourSelf() {
             type="button"
             className="op-btn op-btn-ghost shadow-md"
           >
-            Close
+            {t("close")}
           </button>
         </div>
       </ModalUi>
diff --git a/apps/OpenSign/src/pages/UserProfile.js b/apps/OpenSign/src/pages/UserProfile.js
index 0781094af..8accaa439 100644
--- a/apps/OpenSign/src/pages/UserProfile.js
+++ b/apps/OpenSign/src/pages/UserProfile.js
@@ -406,7 +406,10 @@ function UserProfile() {
                     onChange={(e) => SetName(e.target.value)}
                   />
                 ) : (
-                  <span>{localStorage.getItem("username")}</span>
+                  <span>
+                    {/* {localStorage.getItem("username")} */}
+                    <p>{t("greeting", { name })}</p>
+                  </span>
                 )}
               </li>
               <li
diff --git a/apps/OpenSign/src/pages/Webhook.js b/apps/OpenSign/src/pages/Webhook.js
index 9b6668dad..3a9cf49e0 100644
--- a/apps/OpenSign/src/pages/Webhook.js
+++ b/apps/OpenSign/src/pages/Webhook.js
@@ -10,6 +10,7 @@ import Tooltip from "../primitives/Tooltip";
 import Loader from "../primitives/Loader";
 import SubscribeCard from "../primitives/SubscribeCard";
 import Tour from "reactour";
+import { useTranslation } from "react-i18next";
 const tourSteps = [
   {
     selector: '[data-tut="webhooksubscribe"]',
@@ -17,6 +18,7 @@ const tourSteps = [
   }
 ];
 function Webhook() {
+  const { t } = useTranslation();
   const [parseBaseUrl] = useState(localStorage.getItem("baseUrl"));
   const [parseAppId] = useState(localStorage.getItem("parseAppId"));
   const [webhook, setWebhook] = useState();
@@ -66,13 +68,13 @@ function Webhook() {
         const res = await axios.post(url, params, { headers: headers });
         if (res.data && res.data.result && res.data.result.Webhook) {
           setWebhook(res.data.result.Webhook);
-          setIsAlert({ type: "success", msg: "Webhook added successfully." });
+          setIsAlert({ type: "success", msg: t("webhook-added") });
         } else {
           console.error("Error while generating webhook");
-          setIsAlert({ type: "danger", msg: "Something went wrong." });
+          setIsAlert({ type: "danger", msg: t("wrong-mssg") });
         }
       } catch (error) {
-        setIsAlert({ type: "danger", msg: "Something went wrong." });
+        setIsAlert({ type: "danger", msg: t("wrong-mssg") });
         console.log("err while generating webhook", error);
       } finally {
         setIsLoader(false);
@@ -107,7 +109,7 @@ function Webhook() {
         <>
           <div className="bg-base-100 text-base-content flex flex-col justify-center shadow-md rounded-box mb-3">
             <h1 className={"ml-4 mt-3 mb-2 font-semibold"}>
-              OpenSign™ Webhook{" "}
+              OpenSign™ {t("webhook")}{" "}
               <Tooltip
                 url={"https://docs.opensignlabs.com/docs/API-docs/get-webhook"}
                 isSubscribe={true}
@@ -116,7 +118,7 @@ function Webhook() {
             <ul className={"w-full flex flex-col p-2 text-sm"}>
               <li className="flex flex-col md:flex-row justify-between items-center border-y-[1px] border-gray-300 break-all py-2">
                 <div className="w-[70%] flex-col md:flex-row flex items-center gap-5">
-                  <span className="">Webhook:</span>{" "}
+                  <span className="">{t("webhook")}:</span>{" "}
                   <span id="token" className=" md:text-end cursor-pointer">
                     {webhook ? webhook : "_____"}
                   </span>
@@ -126,7 +128,7 @@ function Webhook() {
                   onClick={handleModal}
                   className="op-btn op-btn-primary"
                 >
-                  {webhook ? "Update Webhook" : "Add Webhook"}
+                  {webhook ? t("update-webhook") : t("add-webhook")}
                 </button>
               </li>
             </ul>
@@ -140,7 +142,7 @@ function Webhook() {
                 }
                 className="op-btn op-btn-secondary mt-2 mb-3 px-7"
               >
-                View Docs
+                {t("view-docs")}
               </button>
             </div>
             <ModalUi
@@ -151,7 +153,7 @@ function Webhook() {
               {error && <Alert type="danger">{error}</Alert>}
               <div className="m-[20px]">
                 <div className="text-lg font-normal text-base-content">
-                  <label className="text-sm ml-2">Webhook</label>
+                  <label className="text-sm ml-2">{t("webhook")}</label>
                   <input
                     value={webhook}
                     onChange={(e) => setWebhook(e.target.value)}
@@ -165,13 +167,13 @@ function Webhook() {
                     onClick={handleSubmit}
                     className="op-btn op-btn-primary ml-[2px]"
                   >
-                    Yes
+                    {t("yes")}
                   </button>
                   <button
                     onClick={handleModal}
                     className="op-btn op-btn-secondary"
                   >
-                    No
+                    {t("no")}
                   </button>
                 </div>
               </div>
diff --git a/apps/OpenSign/src/primitives/GetReportDisplay.js b/apps/OpenSign/src/primitives/GetReportDisplay.js
index fea0e0f82..dde156ee3 100644
--- a/apps/OpenSign/src/primitives/GetReportDisplay.js
+++ b/apps/OpenSign/src/primitives/GetReportDisplay.js
@@ -1076,7 +1076,7 @@ const ReportTable = (props) => {
             {t(`report-name.${props.ReportName}`)}
             {props.report_help && (
               <span className="text-xs md:text-[13px] font-normal">
-                <Tooltip message={props.report_help} />
+                <Tooltip message={t(`report-help.${props.ReportName}`)} />
               </span>
             )}
           </div>