diff --git a/packages/features/package.json b/packages/features/package.json
index 6edb4f80..388e1a99 100644
--- a/packages/features/package.json
+++ b/packages/features/package.json
@@ -50,6 +50,8 @@
     "cmdk": "1.0.0",
     "dayjs": "1.11.12",
     "easy-mesh-gradient": "0.0.5",
+    "i18next": "^23.14.0",
+    "i18next-browser-languagedetector": "^8.0.0",
     "immer": "10.1.1",
     "js-beautify": "1.15.1",
     "lucide-react": "0.417.0",
@@ -62,6 +64,7 @@
     "react-dom": "18.3.1",
     "react-error-boundary": "4.0.13",
     "react-hook-form": "7.52.1",
+    "react-i18next": "^15.0.1",
     "react-mixpanel-browser": "4.1.0",
     "react-qr-code": "2.0.15",
     "react-router": "6.25.1",
diff --git a/packages/features/src/@types/i18next.d.ts b/packages/features/src/@types/i18next.d.ts
new file mode 100644
index 00000000..d76f574f
--- /dev/null
+++ b/packages/features/src/@types/i18next.d.ts
@@ -0,0 +1,13 @@
+import "i18next"
+import resources from "./resources"
+const { ns1, ns2 } = resources
+
+declare module "i18next" {
+  interface CustomTypeOptions {
+    defaultNS: "ns1"
+    resources: {
+      ns1: typeof ns1
+      ns2: typeof ns2
+    }
+  }
+}
diff --git a/packages/features/src/@types/resources.ts b/packages/features/src/@types/resources.ts
new file mode 100644
index 00000000..f2aa9c24
--- /dev/null
+++ b/packages/features/src/@types/resources.ts
@@ -0,0 +1,9 @@
+import ns1 from "../i18n/locales/en/en.json"
+import ns2 from "../i18n/locales/tr/tr.json"
+
+const resources = {
+  ns1,
+  ns2,
+} as const
+
+export default resources
diff --git a/packages/features/src/address-book/components/new-address-form.tsx b/packages/features/src/address-book/components/new-address-form.tsx
index da9837e5..915cda71 100644
--- a/packages/features/src/address-book/components/new-address-form.tsx
+++ b/packages/features/src/address-book/components/new-address-form.tsx
@@ -3,6 +3,8 @@ import { PlusIcon } from "lucide-react"
 import { useForm } from "react-hook-form"
 import { useNavigate } from "react-router-dom"
 
+import i18next from "i18next"
+
 import { useAddressBookStore } from "@/common/store/address-book"
 import { FormError } from "@/components/form-error"
 
@@ -26,6 +28,8 @@ export const NewAddressForm = () => {
     addContact(data)
     return navigate("/contacts")
   }
+
+  const { t } = i18next
   return (
     <form
       className="flex flex-col flex-1 gap-4"
@@ -36,7 +40,7 @@ export const NewAddressForm = () => {
           htmlFor="contactName"
           className={cn(errors.name && "text-destructive")}
         >
-          Contact's Name
+          {t("contactName")}
         </label>
         <input
           id="contactName"
@@ -52,7 +56,7 @@ export const NewAddressForm = () => {
           htmlFor="contactAddress"
           className={cn(errors.address && "text-destructive")}
         >
-          Receiver Address
+          {t("receiverAddress")}
         </label>
         <input
           id="contactAddress"
@@ -69,7 +73,7 @@ export const NewAddressForm = () => {
         data-testid="newAddress/createButton"
       >
         <PlusIcon size={16} />
-        <span>Create Contact</span>
+        <span>{t("createContact")}</span>
       </button>
     </form>
   )
diff --git a/packages/features/src/address-book/views/address-book.tsx b/packages/features/src/address-book/views/address-book.tsx
index 50bc2156..c1b64760 100644
--- a/packages/features/src/address-book/views/address-book.tsx
+++ b/packages/features/src/address-book/views/address-book.tsx
@@ -1,10 +1,10 @@
+import { truncateString } from "@/common/lib/string"
 import type { Contact } from "@/common/types"
 import { AppLayout } from "@/components/app-layout"
-
-import { truncateString } from "@/common/lib/string"
 import { MenuBar } from "@/components/menu-bar"
 import { Copy, Plus, TrashIcon } from "lucide-react"
 import type { MouseEvent } from "react"
+import { useTranslation } from "react-i18next"
 import { Link } from "react-router-dom"
 import { toast } from "sonner"
 
@@ -25,11 +25,12 @@ export const AddressBookView = ({
     navigator.clipboard.writeText(address)
     toast.success("Address copied")
   }
+  const { t } = useTranslation()
   return (
     <AppLayout>
       <div className="pb-12 bg-secondary rounded-b-2xl">
         <MenuBar variant="dashboard" />
-        <h2 className="ml-8 mt-1 text-3xl">Address book</h2>
+        <h2 className="ml-8 mt-1 text-3xl">{t("addressBook")}</h2>
       </div>
       <div className="py-6 px-8 space-y-2">
         <Link
@@ -38,7 +39,7 @@ export const AddressBookView = ({
           data-testid="addressBook/addAddressButton"
         >
           <Plus width={16} height={16} className="text-[#F6C177]" />
-          <p>Add new contact</p>
+          <p>{t("addNewContact")}</p>
         </Link>
         <div className="space-y-2">
           {contacts.map((contact, index) => {
diff --git a/packages/features/src/address-book/views/new-address.tsx b/packages/features/src/address-book/views/new-address.tsx
index 2157637c..0d6461d2 100644
--- a/packages/features/src/address-book/views/new-address.tsx
+++ b/packages/features/src/address-book/views/new-address.tsx
@@ -5,6 +5,7 @@ import { MenuBar } from "@/components/menu-bar"
 import { zodResolver } from "@hookform/resolvers/zod"
 import clsx from "clsx"
 import { useForm } from "react-hook-form"
+import { useTranslation } from "react-i18next"
 import { useLocation } from "react-router-dom"
 import { NewAddressFormSchema } from "../components/new-address-form.schema"
 
@@ -30,11 +31,14 @@ export const NewAddressView = ({ onGoBack, onSubmit }: NewAddressViewProps) => {
   useEffect(() => {
     setValue("address", location.state?.address || "")
   }, [])
+
+  const { t } = useTranslation()
+
   return (
     <AppLayout>
       <div className="pb-12 bg-secondary rounded-b-2xl">
         <MenuBar variant="back" onBackClicked={onGoBack} />
-        <h2 className="ml-8 mt-1 text-3xl">New contact</h2>
+        <h2 className="ml-8 mt-1 text-3xl">{t("newContact")}</h2>
       </div>
       <div className="pt-6 pb-8 px-8 flex flex-col flex-1">
         <form
@@ -79,7 +83,7 @@ export const NewAddressView = ({ onGoBack, onSubmit }: NewAddressViewProps) => {
             disabled={disableSubmit}
             data-testid="submitForm"
           >
-            Add contact
+            {t("addContact")}
           </button>
         </form>
       </div>
diff --git a/packages/features/src/components/address-dropdown.tsx b/packages/features/src/components/address-dropdown.tsx
index 51d2074d..c0f5a602 100644
--- a/packages/features/src/components/address-dropdown.tsx
+++ b/packages/features/src/components/address-dropdown.tsx
@@ -2,6 +2,7 @@ import { truncateString } from "@/common/lib/string"
 import { useVault } from "@palladxyz/vault"
 import clsx from "clsx"
 import { CopyIcon, ExternalLinkIcon, UserPlusIcon } from "lucide-react"
+import { useTranslation } from "react-i18next"
 import { Link } from "react-router-dom"
 import { toast } from "sonner"
 
@@ -34,6 +35,8 @@ export const AddressDropdown = ({
     )
     window.open(url, "_blank")?.focus()
   }
+  const { t } = useTranslation()
+
   return (
     <div className={clsx("dropdown", dropdownEnd && "dropdown-end")}>
       <div
@@ -55,13 +58,13 @@ export const AddressDropdown = ({
         <li onClick={handleClick}>
           <button type="button" onClick={copyAddress} className="flex gap-2">
             <CopyIcon />
-            <span>Copy Address</span>
+            <span>{t("copyAddress")}</span>
           </button>
         </li>
         <li onClick={handleClick}>
           <button type="button" onClick={openInExplorer} className="flex gap-2">
             <ExternalLinkIcon />
-            <span>Open in Minascan</span>
+            <span>{t("openInMinascan")}</span>
           </button>
         </li>
         <li onClick={handleClick}>
@@ -71,7 +74,7 @@ export const AddressDropdown = ({
             className="flex gap-2"
           >
             <UserPlusIcon />
-            <span>Create Contact</span>
+            <span>{t("createContact")}</span>
           </Link>
         </li>
       </ul>
diff --git a/packages/features/src/components/fee-picker.tsx b/packages/features/src/components/fee-picker.tsx
index bb6cede2..e242f628 100644
--- a/packages/features/src/components/fee-picker.tsx
+++ b/packages/features/src/components/fee-picker.tsx
@@ -1,5 +1,6 @@
 import { TransactionFee } from "@/common/lib/const"
 import { clsx } from "clsx"
+import { useTranslation } from "react-i18next"
 
 type TransactionFeeShortProps = {
   feeValue: keyof typeof TransactionFee
@@ -10,13 +11,14 @@ export const TransactionFeeShort = ({
   feeValue,
   onClick,
 }: TransactionFeeShortProps) => {
+  const { t } = useTranslation()
   return (
     <button
       type="button"
       className="btn btn-link text-base-content no-underline hover:no-underline"
       onClick={onClick}
     >
-      <span className="underline">Transaction fee:</span>
+      <span className="underline">{t("transactionFee")}</span>
       <span>{TransactionFee[feeValue]} MINA</span>
     </button>
   )
@@ -28,6 +30,7 @@ type FeePickerProps = {
 }
 
 export const FeePicker = ({ feeValue, setValue }: FeePickerProps) => {
+  const { t } = useTranslation()
   return (
     <div className="join w-full">
       <button
@@ -38,7 +41,7 @@ export const FeePicker = ({ feeValue, setValue }: FeePickerProps) => {
         )}
         onClick={() => setValue("fee", "slow")}
       >
-        <div>Slow</div>
+        <div>{t("slow")}</div>
         <div className="text-nowrap">{TransactionFee.slow} MINA</div>
       </button>
       <button
@@ -49,7 +52,7 @@ export const FeePicker = ({ feeValue, setValue }: FeePickerProps) => {
         )}
         onClick={() => setValue("fee", "default")}
       >
-        <div>Normal</div>
+        <div>{t("normal")}</div>
         <div className="text-nowrap">{TransactionFee.default} MINA</div>
       </button>
       <button
@@ -60,7 +63,7 @@ export const FeePicker = ({ feeValue, setValue }: FeePickerProps) => {
         )}
         onClick={() => setValue("fee", "fast")}
       >
-        <div>Fast</div>
+        <div>{t("fast")}</div>
         <div className="text-nowrap">{TransactionFee.fast} MINA</div>
       </button>
     </div>
diff --git a/packages/features/src/components/from-to.tsx b/packages/features/src/components/from-to.tsx
index 4e3d239b..1f0e70da 100644
--- a/packages/features/src/components/from-to.tsx
+++ b/packages/features/src/components/from-to.tsx
@@ -1,4 +1,5 @@
 import { ArrowRightIcon } from "lucide-react"
+import { useTranslation } from "react-i18next"
 import { AddressDropdown } from "./address-dropdown"
 
 type FromToProps = {
@@ -9,17 +10,18 @@ type FromToProps = {
 }
 
 export const FromTo = ({ tx }: FromToProps) => {
+  const { t } = useTranslation()
   return (
     <div className="card bg-secondary py-3 px-4 flex flex-row justify-between mt-1">
       <div className="flex flex-col">
-        <div className="text-[#7D7A9C]">From</div>
+        <div className="text-[#7D7A9C]">{t("from")}</div>
         <AddressDropdown publicKey={tx.from} className="before:ml-20" />
       </div>
       <div className="btn btn-circle btn-neutral text-mint">
         <ArrowRightIcon size={24} />
       </div>
       <div className="flex flex-col">
-        <div className="text-[#7D7A9C]">To</div>
+        <div className="text-[#7D7A9C]">{t("to")}</div>
         <AddressDropdown
           publicKey={tx.to}
           className="before:-ml-20"
diff --git a/packages/features/src/components/hash-dropdown.tsx b/packages/features/src/components/hash-dropdown.tsx
index 720cca78..5b8042db 100644
--- a/packages/features/src/components/hash-dropdown.tsx
+++ b/packages/features/src/components/hash-dropdown.tsx
@@ -1,6 +1,7 @@
 import { useVault } from "@palladxyz/vault"
 import clsx from "clsx"
 import { CopyIcon, ExternalLinkIcon } from "lucide-react"
+import { useTranslation } from "react-i18next"
 import { toast } from "sonner"
 
 type HashDropdownProps = {
@@ -9,6 +10,8 @@ type HashDropdownProps = {
 }
 
 export const HashDropdown = ({ hash, className }: HashDropdownProps) => {
+  const { t } = useTranslation()
+
   const currentNetworkInfo = useVault((state) => state.getCurrentNetworkInfo())
   const handleClick = () => {
     const elem = document.activeElement as HTMLLIElement
@@ -40,13 +43,13 @@ export const HashDropdown = ({ hash, className }: HashDropdownProps) => {
         <li onClick={handleClick}>
           <button type="button" onClick={copyHash} className="flex gap-2">
             <CopyIcon />
-            <span>Copy Hash</span>
+            <span>{t("copyHash")}</span>
           </button>
         </li>
         <li onClick={handleClick}>
           <button type="button" onClick={openInExplorer} className="flex gap-2">
             <ExternalLinkIcon />
-            <span>Open in Minascan</span>
+            <span>{t("openInMinascan")}</span>
           </button>
         </li>
       </ul>
diff --git a/packages/features/src/components/menu-drawer.tsx b/packages/features/src/components/menu-drawer.tsx
index cd46e031..a522ad77 100644
--- a/packages/features/src/components/menu-drawer.tsx
+++ b/packages/features/src/components/menu-drawer.tsx
@@ -2,11 +2,13 @@ import Logo from "@/common/assets/logo.svg?react"
 import MenuIcon from "@/common/assets/menu.svg?react"
 import { useVault } from "@palladxyz/vault"
 import { ChevronDownIcon, XIcon } from "lucide-react"
+import { useTranslation } from "react-i18next"
 import { Link, useNavigate } from "react-router-dom"
 
 export const MenuDrawer = () => {
   const navigate = useNavigate()
   const currentNetworkName = useVault((state) => state.currentNetworkName)
+  const { t } = useTranslation()
   return (
     <div className="drawer drawer-end">
       <input id="menu-drawer" type="checkbox" className="drawer-toggle" />
@@ -64,7 +66,7 @@ export const MenuDrawer = () => {
               onClick={() => navigate("/")}
               data-testid="menu/activity"
             >
-              Dashboard
+              {t("dashboard")}
             </button>
             <button
               type="button"
@@ -72,7 +74,7 @@ export const MenuDrawer = () => {
               onClick={() => navigate("/transactions")}
               data-testid="menu/activity"
             >
-              Activity
+              {t("activity")}
             </button>
             <button
               type="button"
@@ -80,7 +82,7 @@ export const MenuDrawer = () => {
               onClick={() => navigate("/staking")}
               data-testid="menu/staking"
             >
-              Staking
+              {t("staking")}
             </button>
             <button
               type="button"
@@ -88,7 +90,7 @@ export const MenuDrawer = () => {
               onClick={() => navigate("/contacts")}
               data-testid="menu/addressBook"
             >
-              Address Book
+              {t("adressBook")}
             </button>
             <button
               type="button"
@@ -96,7 +98,7 @@ export const MenuDrawer = () => {
               onClick={() => navigate("/settings")}
               data-testid="menu/settings"
             >
-              Settings
+              {t("settings")}
             </button>
           </div>
         </div>
diff --git a/packages/features/src/error-renderer/views/error.tsx b/packages/features/src/error-renderer/views/error.tsx
index fe7b6c67..659766f1 100644
--- a/packages/features/src/error-renderer/views/error.tsx
+++ b/packages/features/src/error-renderer/views/error.tsx
@@ -1,4 +1,5 @@
 import type { FallbackProps } from "react-error-boundary"
+import { useTranslation } from "react-i18next"
 import { useMixpanel } from "react-mixpanel-browser"
 
 export const ErrorView = ({ error, resetErrorBoundary }: FallbackProps) => {
@@ -11,19 +12,21 @@ export const ErrorView = ({ error, resetErrorBoundary }: FallbackProps) => {
     await mixpanel.track("Boundary Error", { error: stringifiedError })
     resetErrorBoundary()
   }
+  const { t } = useTranslation()
+
   return (
     <div className="flex flex-1 flex-col justify-center items-center min-h-screen w-full p-8">
       <div className="card flex flex-col flex-1 bg-secondary w-full">
         <div className="card-body flex-1 flex flex-col gap-4 p-4">
           <h1 className="text-xl">Woops</h1>
-          <p className="flex-[0] text-gray-400">An error happened.</p>
+          <p className="flex-[0] text-gray-400">{t("errorHappend")}</p>
           <a
             href="https://get.pallad.co/status"
             target="_blank"
             rel="noopener noreferrer"
             className="underline"
           >
-            Check services status.
+            {t("checkServiceStatus")}
           </a>
           <textarea
             className="textarea textarea-bordered rounded-xl resize-none flex-1"
@@ -36,14 +39,14 @@ export const ErrorView = ({ error, resetErrorBoundary }: FallbackProps) => {
               className="btn bg-neutral flex-1"
               onClick={resetErrorBoundary}
             >
-              Try Again
+              {t("tryAgain")}
             </button>
             <button
               type="button"
               className="btn btn-primary flex-1"
               onClick={report}
             >
-              Send Report
+              {t("sendReport")}
             </button>
           </div>
         </div>
diff --git a/packages/features/src/i18n/index.ts b/packages/features/src/i18n/index.ts
new file mode 100644
index 00000000..2c2c45f0
--- /dev/null
+++ b/packages/features/src/i18n/index.ts
@@ -0,0 +1,23 @@
+import i18next from "i18next"
+import { initReactI18next } from "react-i18next"
+import ns1 from "./locales/en/en.json"
+import ns2 from "./locales/tr/tr.json"
+
+const defaultNS = "ns1"
+
+const resources = {
+  en: {
+    ns1,
+  },
+  tr: {
+    ns2,
+  },
+}
+
+i18next.use(initReactI18next).init({
+  debug: true,
+
+  fallbackLng: ["en", "tr"],
+  resources: resources,
+  defaultNS,
+})
diff --git a/packages/features/src/i18n/locales/en/en.json b/packages/features/src/i18n/locales/en/en.json
new file mode 100644
index 00000000..94c9dfa3
--- /dev/null
+++ b/packages/features/src/i18n/locales/en/en.json
@@ -0,0 +1,116 @@
+{
+  "contactName": "Contact's Name",
+  "receiverAddress": "Receiver Address",
+  "createContact": "Create Contact",
+  "addressBook": "Address book",
+  "addNewContact": "Add new contact",
+  "newContact": "New contact",
+  "addContact": "Add contact",
+  "copyAddress": "Copy Address",
+  "openInMinascan": "Open in Minascan",
+  "transactionFee": "Transaction fee:",
+  "slow": "Slow",
+  "normal": "Normal",
+  "fast": "Fast",
+  "from": "from",
+  "to": "to",
+  "copyHash": "Copy Hash",
+  "dashboard": "Dashboard",
+  "activity": "Activity",
+  "staking": "Staking",
+  "adressBook": "Address Book",
+  "settings": "Settings",
+  "errorHappend": "An error happened.",
+  "checkServiceStatus": "Check services status.",
+  "tryAgain": "Try Again",
+  "sendReport": "Send Report",
+  "unlock": "Unlock",
+  "spendingPassword": "Spending Password",
+  "couldntFindPage": "Sorry, but we couldn't find this page",
+  "goToDashboard": "Go to Dashboard",
+  "confirm": "Confirm",
+  "youreAlone": "Make sure you are alone when doing this",
+  "screenNotRecording": "Confirm that your screen is not being recorded and no one else is currently looking.",
+  "termService": "I accept Terms of Service.",
+  "next": "Next",
+  "walletName": "Wallet name",
+  "password": "Password",
+  "yourPassword": "Your password is...",
+  "wordNumber": "Word number",
+  "confirmSavedSeed": "Confirm you saved the seed by typing this random word",
+  "savedIt": "I saved it",
+  "keepThisSafe": "Keep this in a safe place, never share them with anyone",
+  "backedUp": "I have backed up the seed phrase and acknowledge they will not be shown to me again",
+  "enter12Word": "Enter your 12-word seed phrase in the right order in the inputs below",
+  "yourGateway": "Your gateway to the Minaverse.",
+  "comingSoon": "Coming soon!",
+  "yourAddress": "Your address",
+  "allDone": "All done!",
+  "copyClipboard": "Copy to clipboard",
+  "followUs": "Follow us to stay up to date with updates and communications",
+  "send": "Send",
+  "close": "Close",
+  "advanced": "Advanced",
+  "summary": "Summary",
+  "kind": "Kind",
+  "amount": "Amount",
+  "fee": "Fee",
+  "total": "Total",
+  "faq": "FAQ",
+  "support": "Support",
+  "termOfServices": "Terms of Service",
+  "version": "Version",
+  "currency": "Currency",
+  "language": "Language",
+  "sharedData": "Share data",
+  "darkMode": "Dark mode",
+  "anomymousData": "Anonymous data only",
+  "wallet": "Wallet",
+  "display": "Display",
+  "privacy": "Privacy",
+  "buyUsACoffee": "Buy us a coffee!",
+  "dataSharing": "Data sharing",
+  "about": "About",
+  "everythingAbout": "Everything about us",
+  "logOut": "Log out",
+  "needHelp": "Need help?",
+  "contactSupport": "Contact support",
+  "delegators": "Delegators",
+  "selectValidator": "Select a validator",
+  "findValidator": "Find a validator",
+  "edit": "Edit",
+  "enjoySeamless": "Enjoy seamless staking and start earning rewards.",
+  "stake": "Stake",
+  "blockRewards": "Block rewards",
+  "lastReward": "Last reward",
+  "avgReward": "Avg. reward",
+  "totalReward": "Total reward",
+  "received": "Received",
+  "sent": "Sent",
+  "staked": "Staked",
+  "portfolio": "Portfolio",
+  "transactionDetail": "Transaction detail",
+  "type": "Type",
+  "dateTime": "Date and time",
+  "hash": "Hash",
+  "pendingTransactions": "There are pending transactions.",
+  "preview": "Preview",
+  "nothingHere": "Nothing here yet :",
+  "detailsGetStarted": "Here you'll find details about your transactions. Fund your wallet to get started!",
+  "receive": "Receive",
+  "openBeta": "Open Beta version",
+  "onlyWorksForDevnet": "Only works for Devnet before Mainnet launch",
+  "available": "Available",
+  "networks": "Networks",
+  "use": "Use",
+  "recent": "Recent",
+  "portfolioValue": "Portfolio value",
+  "transactions": "Transactions",
+  "seeAll": "See all",
+  "noTransactionsYet": "No transactions yet.",
+  "approve": "Approve",
+  "deny": "Deny",
+  "sign": "Sign",
+  "reject": "Reject",
+  "enterYourPassword": "Enter your password"
+}
diff --git a/packages/features/src/i18n/locales/tr/tr.json b/packages/features/src/i18n/locales/tr/tr.json
new file mode 100644
index 00000000..9d13a14b
--- /dev/null
+++ b/packages/features/src/i18n/locales/tr/tr.json
@@ -0,0 +1,116 @@
+{
+  "contactName": "Kişinin Adı",
+  "receiverAddress": "Alıcı Adresi",
+  "createContact": "Kişi Oluştur",
+  "addressBook": "Adres defteri",
+  "addNewContact": "Yeni kişi ekle",
+  "newContact": "Yeni kişi",
+  "addContact": "Kişi ekle",
+  "copyAddress": "Adresi kopyala",
+  "openInMinascan": "Minascan'da aç",
+  "transactionFee": "İşlem ücreti:",
+  "slow": "Yavaş",
+  "normal": "Normal",
+  "fast": "Hızlı",
+  "from": "from",
+  "to": "to",
+  "copyHash": "Karmayı Kopyala",
+  "dashboard": "Gösterge Tablosu",
+  "activity": "Etkinlik",
+  "staking": "Stake Etme",
+  "adressBook": "Adres Defteri",
+  "settings": "Ayarlar",
+  "errorHappend": "Bir hata oluştu.",
+  "checkServiceStatus": "Hizmet durumunu kontrol edin.",
+  "tryAgain": "Tekrar Dene",
+  "sendReport": "Rapor Gönder",
+  "unlock": "Kilidi Aç",
+  "spendingPassword": "Harcama Şifresi",
+  "couldntFindPage": "Üzgünüz, ancak bu sayfayı bulamadık",
+  "goToDashboard": "Panoya Git",
+  "confirm": "Onayla",
+  "youreAlone": "Bunu yaparken yalnız olduğunuzdan emin olun",
+  "screenNotRecording": "Ekranınızın kaydedilmediğini ve şu anda başka kimsenin bakmadığını onaylayın.",
+  "termService": "Hizmet Şartlarını kabul ediyorum.",
+  "next": "Sonraki",
+  "walletName": "Cüzdan adı",
+  "password": "Şifre",
+  "yourPassword": "Şifreniz...",
+  "wordNumber": "Kelime numarası",
+  "confirmSavedSeed": "Bu rastgele kelimeyi yazarak tohumu kaydettiğinizi onaylayın",
+  "savedIt": "Kaydettim",
+  "keepThisSafe": "Bunu güvenli bir yerde saklayın, asla kimseyle paylaşmayın",
+  "backedUp": "Tohum ifadesini yedekledim ve bana bir daha gösterilmeyeceğini kabul ediyorum",
+  "enter12Word": "Aşağıdaki girdilere 12 kelimelik tohum ifadenizi doğru sırayla girin",
+  "yourGateway": "Minaverse'e açılan kapınız.",
+  "comingSoon": "Yakında geliyor!",
+  "yourAddress": "Adresiniz",
+  "allDone": "Tamamlandı!",
+  "copyClipboard": "Panoya kopyala",
+  "followUs": "Güncellemeler ve iletişimler hakkında bilgi sahibi olmak için bizi takip edin",
+  "send": "Gönder",
+  "close": "Kapat",
+  "advanced": "Gelişmiş",
+  "summary": "Özet",
+  "kind": "Tür",
+  "amount": "Tutar",
+  "fee": "Ücret",
+  "total": "Toplam",
+  "faq": "SSS",
+  "support": "Destek",
+  "termOfServices": "Hizmet Şartları",
+  "version": "Sürüm",
+  "currency": "Para Birimi",
+  "language": "Dil",
+  "sharedData": "Verileri paylaş",
+  "darkMode": "Koyu mod",
+  "anonymousData": "Yalnızca anonim veriler",
+  "wallet": "Cüzdan",
+  "display": "Görüntüle",
+  "privacy": "Gizlilik",
+  "buyUsACoffee": "Bize bir kahve ısmarla!",
+  "dataSharing": "Veri paylaşımı",
+  "about": "Hakkımızda",
+  "everythingAbout": "Hakkımızdaki her şey",
+  "logOut": "Çıkış yap",
+  "needHelp": "Yardıma mı ihtiyacınız var?",
+  "contactSupport": "Desteğe ulaşın",
+  "delegators": "Delegators",
+  "selectValidator": "Bir doğrulayıcı seçin",
+  "findValidator": "Bir doğrulayıcı bulun",
+  "edit": "Düzenle",
+  "enjoySeamless": "Kusursuz bahis oynamanın tadını çıkarın ve ödüller kazanmaya başlayın.",
+  "stake": "Stake",
+  "blockRewards": "Ödülleri engelle",
+  "lastReward": "Son ödül",
+  "avgReward": "Ort. ödül",
+  "totalReward": "Toplam ödül",
+  "received": "Alındı",
+  "sent": "Gönderildi",
+  "staked": "Stake edildi",
+  "portfolio": "Portföy",
+  "transactionDetail": "İşlem ayrıntısı",
+  "type": "Tür",
+  "dateTime": "Tarih ve saat",
+  "hash": "Karma",
+  "pendingTransactions": "Bekleyen işlemler var.",
+  "preview": "Önizleme",
+  "nothingHere": "Henüz burada bir şey yok :",
+  "detailsGetStarted": "İşlemlerinizle ilgili ayrıntıları burada bulabilirsiniz. Başlamak için cüzdanınıza para yatırın!",
+  "receive": "Al",
+  "openBeta": "Açık Beta sürümü",
+  "onlyWorksForDevnet": "Yalnızca Mainnet lansmanından önceki Devnet için çalışır",
+  "available": "Kullanılabilir",
+  "networks": "Ağlar",
+  "use": "Kullanım",
+  "recent": "Son",
+  "portfolioValue": "Portföy değeri",
+  "transactions": "İşlemler",
+  "seeAll": "Tümünü gör",
+  "noTransactionsYet": "Henüz işlem yok.",
+  "approve": "Onay",
+  "deny": "Reddet",
+  "sign": "İmzala",
+  "reject": "Reddet",
+  "enterYourPassword": "Şifrenizi girin"
+}
diff --git a/packages/features/src/index.ts b/packages/features/src/index.ts
index 68656a3b..abb4b656 100644
--- a/packages/features/src/index.ts
+++ b/packages/features/src/index.ts
@@ -1,5 +1,5 @@
 import "@total-typescript/ts-reset"
-
+import "./i18n/"
 import type {} from "graphql-request"
 import type {} from "swr"
 export { useAppStore } from "./common/store/app"
diff --git a/packages/features/src/lock/views/unlock-wallet.tsx b/packages/features/src/lock/views/unlock-wallet.tsx
index 8be3e744..f4d41fe7 100644
--- a/packages/features/src/lock/views/unlock-wallet.tsx
+++ b/packages/features/src/lock/views/unlock-wallet.tsx
@@ -5,6 +5,7 @@ import { RestartWalletAlert } from "@/components/restart-wallet-alert"
 import { WizardLayout } from "@/components/wizard-layout"
 import clsx from "clsx"
 import { EyeIcon, EyeOffIcon } from "lucide-react"
+import { useTranslation } from "react-i18next"
 
 type UnlockWalletData = {
   spendingPassword: string
@@ -38,7 +39,7 @@ export const UnlockWalletView = ({
         data-testid="submitForm"
         disabled={!form.formState.dirtyFields.spendingPassword}
       >
-        <span>Unlock</span>
+        <span>{useTranslation().t("unlock")}</span>
       </button>
     }
   >
@@ -56,7 +57,7 @@ export const UnlockWalletView = ({
           htmlFor="spendingPassword"
           className={clsx("label cursor-pointer")}
         >
-          Spending Password
+          {useTranslation().t("spendingPassword")}
         </label>
         <label className="input flex items-center gap-2 w-full">
           <input
diff --git a/packages/features/src/not-found/views/not-found.tsx b/packages/features/src/not-found/views/not-found.tsx
index 6b11d703..316a72c7 100644
--- a/packages/features/src/not-found/views/not-found.tsx
+++ b/packages/features/src/not-found/views/not-found.tsx
@@ -1,3 +1,5 @@
+import { useTranslation } from "react-i18next"
+
 import { AppLayout } from "@/components/app-layout"
 import { MenuBar } from "@/components/menu-bar"
 
@@ -10,19 +12,20 @@ export const NotFoundView = ({
   onGoBack,
   onGoToDashboard,
 }: NotFoundViewProps) => {
+  const { t } = useTranslation()
   return (
     <AppLayout>
       <MenuBar variant="back" onBackClicked={onGoBack} />
       <div className="flex flex-col flex-1 gap-4 p-4 items-center">
         <div className="flex flex-1 justify-center items-center">
-          <div>Sorry, but we couldn't find this page</div>
+          <div>{t("couldntFindPage")}</div>
         </div>
         <button
           type="button"
           className="btn btn-primary max-w-48 w-full"
           onClick={onGoToDashboard}
         >
-          Go to Dashboard
+          {t("goToDashboard")}
         </button>
       </div>
     </AppLayout>
diff --git a/packages/features/src/onboarding/components/security-check.tsx b/packages/features/src/onboarding/components/security-check.tsx
index 3a78281c..00ead02f 100644
--- a/packages/features/src/onboarding/components/security-check.tsx
+++ b/packages/features/src/onboarding/components/security-check.tsx
@@ -1,3 +1,5 @@
+import { useTranslation } from "react-i18next"
+
 import NoLookIcon from "@/common/assets/nolook.svg?react"
 import { WizardLayout } from "@/components/wizard-layout"
 
@@ -17,18 +19,17 @@ export const SecurityCheck = ({ title, onConfirm }: SecurityCheckProps) => (
         onClick={onConfirm}
         data-testid="formSubmit"
       >
-        Confirm
+        {useTranslation().t("confirm")}
       </button>
     }
   >
     <div className="flex flex-1 flex-col justify-center items-center gap-4 text-center">
       <NoLookIcon />
       <h1 className="text-2xl max-w-[260px]">
-        Make sure you are alone when doing this
+        {useTranslation().t("youreAlone")}
       </h1>
       <p className="max-w-[260px]">
-        Confirm that your screen is not being recorded and no one else is
-        currently looking.
+        {useTranslation().t("screenNotRecording")}
       </p>
     </div>
   </WizardLayout>
diff --git a/packages/features/src/onboarding/components/wallet-info-form.tsx b/packages/features/src/onboarding/components/wallet-info-form.tsx
index 3dd1ec66..9fdef4ea 100644
--- a/packages/features/src/onboarding/components/wallet-info-form.tsx
+++ b/packages/features/src/onboarding/components/wallet-info-form.tsx
@@ -1,3 +1,5 @@
+import { useTranslation } from "react-i18next"
+
 import { zodResolver } from "@hookform/resolvers/zod"
 import { zxcvbn } from "@zxcvbn-ts/core"
 import { ExternalLinkIcon, EyeIcon, EyeOffIcon } from "lucide-react"
@@ -56,6 +58,7 @@ export const WalletInfoForm = ({ title, onSubmit }: WalletInfoFormProps) => {
   const [strengthLabel, strengthColor] = getPasswordStrengthConfig(
     zxcvbn(watch("spendingPassword")).score,
   )
+  const { t } = useTranslation()
 
   return (
     <WizardLayout
@@ -73,7 +76,7 @@ export const WalletInfoForm = ({ title, onSubmit }: WalletInfoFormProps) => {
               id="tosCheckbox"
             />
             <label htmlFor="tosCheckbox" className="label">
-              I accept Terms of Service.
+              {t("termService")}
             </label>
             <a
               href="https://get.pallad.co/terms"
@@ -94,7 +97,7 @@ export const WalletInfoForm = ({ title, onSubmit }: WalletInfoFormProps) => {
             onClick={handleSubmit(onSubmit)}
             data-testid="formSubmit"
           >
-            <span>Next</span>
+            <span>{t("next")}</span>
           </button>
         </>
       }
@@ -102,7 +105,7 @@ export const WalletInfoForm = ({ title, onSubmit }: WalletInfoFormProps) => {
       <div className="flex flex-col flex-1 gap-4">
         <div className="flex flex-col">
           <label htmlFor="walletNameInput" className="label">
-            Wallet name
+            {t("walletName")}
           </label>
           <input
             id="walletNameInput"
@@ -118,7 +121,7 @@ export const WalletInfoForm = ({ title, onSubmit }: WalletInfoFormProps) => {
         </div>
         <div className="flex flex-col">
           <label htmlFor="spendingPassword" className="label">
-            Password
+            {t("password")}
           </label>
           <label className="input flex items-center gap-2">
             <input
@@ -140,7 +143,7 @@ export const WalletInfoForm = ({ title, onSubmit }: WalletInfoFormProps) => {
           <label className="text-[#7D7A9C] text-sm my-2 h-px">
             {dirtyFields.spendingPassword && (
               <span>
-                Your password is...
+                {t("yourPassword")}
                 <span style={{ color: strengthColor }} className="px-2">
                   {strengthLabel}
                 </span>
diff --git a/packages/features/src/onboarding/views/seed-backup-confirmation.tsx b/packages/features/src/onboarding/views/seed-backup-confirmation.tsx
index 052d07f2..5009df5b 100644
--- a/packages/features/src/onboarding/views/seed-backup-confirmation.tsx
+++ b/packages/features/src/onboarding/views/seed-backup-confirmation.tsx
@@ -1,5 +1,6 @@
 import { Loader2Icon } from "lucide-react"
 import type { UseFormReturn } from "react-hook-form"
+import { useTranslation } from "react-i18next"
 
 import { WizardLayout } from "@/components/wizard-layout"
 
@@ -32,7 +33,7 @@ export const SeedBackupConfirmationView = ({
         data-testid="formSubmit"
       >
         {restoring && <Loader2Icon size={16} className="animate-spin" />}
-        <span>Next</span>
+        <span>{useTranslation().t("next")}</span>
       </button>
     }
   >
@@ -48,7 +49,7 @@ export const SeedBackupConfirmationView = ({
         data-testid="onboarding/writedownIndex"
         data-word-index={confirmationIndex}
       >
-        Word number {confirmationIndex + 1}
+        {useTranslation().t("wordNumber")} {confirmationIndex + 1}
       </label>
       <input
         id="confirmation"
@@ -57,9 +58,7 @@ export const SeedBackupConfirmationView = ({
         data-testid="onboarding/mnemonicConfirmationInput"
         {...form.register("mnemonicWord")}
       />
-      <p className="text-mint mt-4">
-        Confirm you saved the seed by typing this random word
-      </p>
+      <p className="text-mint mt-4">{useTranslation().t("confirmSavedSeed")}</p>
     </form>
   </WizardLayout>
 )
diff --git a/packages/features/src/onboarding/views/seed-backup.tsx b/packages/features/src/onboarding/views/seed-backup.tsx
index d9a3b4fa..e344c242 100644
--- a/packages/features/src/onboarding/views/seed-backup.tsx
+++ b/packages/features/src/onboarding/views/seed-backup.tsx
@@ -1,3 +1,5 @@
+import { useTranslation } from "react-i18next"
+
 import { WizardLayout } from "@/components/wizard-layout"
 
 type MnemonicWritedownViewProps = {
@@ -24,13 +26,13 @@ export const SeedBackupView = ({
         onClick={onConfirm}
         data-testid="formSubmit"
       >
-        I saved it
+        {useTranslation().t("savedIt")}
       </button>
     }
   >
     <div className="flex flex-col justify-center items-center flex-1 gap-8">
       <p className="text-mint text-center max-w-[240px]">
-        Keep this in a safe place, never share them with anyone
+        {useTranslation().t("keepThisSafe")}
       </p>
       <div className="grid grid-cols-3 gap-2">
         {mnemonicWords.map((word, i) => (
@@ -54,8 +56,7 @@ export const SeedBackupView = ({
           data-testid="onboarding/mnemonicWrittenCheckbox"
         />
         <label htmlFor="mnemonicWrittenCheckbox" className="leading-5">
-          I have backed up the seed phrase and acknowledge they will not be
-          shown to me again
+          {useTranslation().t("backedUp")}
         </label>
       </div>
     </div>
diff --git a/packages/features/src/onboarding/views/seed-import.tsx b/packages/features/src/onboarding/views/seed-import.tsx
index 63ea3856..7b94f3ce 100644
--- a/packages/features/src/onboarding/views/seed-import.tsx
+++ b/packages/features/src/onboarding/views/seed-import.tsx
@@ -1,6 +1,7 @@
 import { wordlist } from "@palladxyz/key-management"
 import { Loader2Icon } from "lucide-react"
 import type { UseFormReturn } from "react-hook-form"
+import { useTranslation } from "react-i18next"
 
 import { Autocomplete } from "@/components/autocomplete"
 import { WizardLayout } from "@/components/wizard-layout"
@@ -38,14 +39,12 @@ export const SeedImportView = ({
         data-testid="formSubmit"
       >
         {restoring && <Loader2Icon size={16} className="animate-spin" />}
-        <span>Next</span>
+        <span>{useTranslation().t("next")}</span>
       </button>
     }
   >
     <div className="flex flex-1 flex-col gap-4">
-      <p className="text-mint">
-        Enter your 12-word seed phrase in the right order in the inputs below
-      </p>
+      <p className="text-mint">{useTranslation().t("enter12Word")}</p>
       <div className="grid grid-cols-3 gap-2 mt-4">
         {mnemonicIterator.map((wordLabel, i) => (
           <Autocomplete
diff --git a/packages/features/src/onboarding/views/start.tsx b/packages/features/src/onboarding/views/start.tsx
index d37ed10b..f03b59df 100644
--- a/packages/features/src/onboarding/views/start.tsx
+++ b/packages/features/src/onboarding/views/start.tsx
@@ -1,3 +1,5 @@
+import { useTranslation } from "react-i18next"
+
 import HardwareIcon from "@/common/assets/hardware.svg?react"
 import Logo from "@/common/assets/logo.svg?react"
 import Plus from "@/common/assets/plus.svg?react"
@@ -22,6 +24,7 @@ const OptionCard = ({
   onClick,
   testId,
 }: OptionCardProps) => {
+  const { t } = useTranslation()
   return (
     <button
       type="button"
@@ -34,7 +37,7 @@ const OptionCard = ({
     >
       <div className="btn btn-circle bg-neutral">{icon}</div>
       <div className="flex flex-col items-start">
-        {disabled && <p className="text-sm text-mint">Coming soon!</p>}
+        {disabled && <p className="text-sm text-mint">{t("comingSoon")}</p>}
         <p>{title}</p>
         <p className="text-sm">{description}</p>
       </div>
diff --git a/packages/features/src/onboarding/views/stay-connected.tsx b/packages/features/src/onboarding/views/stay-connected.tsx
index 57177c4b..a08812b7 100644
--- a/packages/features/src/onboarding/views/stay-connected.tsx
+++ b/packages/features/src/onboarding/views/stay-connected.tsx
@@ -1,3 +1,5 @@
+import { useTranslation } from "react-i18next"
+
 import HeartIcon from "@/common/assets/heart.svg?react"
 import SocialDiscordIcon from "@/common/assets/social-discord.svg?react"
 import SocialXIcon from "@/common/assets/social-x.svg?react"
@@ -21,15 +23,15 @@ export const StayConnectedView = ({ onGoToDashboard }: StayConnectedRoute) => (
         onClick={onGoToDashboard}
         data-testid="formSubmit"
       >
-        Go to dashboard
+        {useTranslation().t("goToDashboard")}
       </button>
     }
   >
     <div className="flex flex-col justify-center items-center gap-4 flex-1">
       <HeartIcon />
-      <h1 className="text-2xl text-center">All done!</h1>
+      <h1 className="text-2xl text-center">{useTranslation().t("allDone")}</h1>
       <div className="leading-8 text-center">
-        Follow us to stay up to date with updates and communications
+        {useTranslation().t("followUs")}
       </div>
       <div className="flex w-full gap-2">
         <a
diff --git a/packages/features/src/receive/views/receive.tsx b/packages/features/src/receive/views/receive.tsx
index 663735bb..bb396b3c 100644
--- a/packages/features/src/receive/views/receive.tsx
+++ b/packages/features/src/receive/views/receive.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next"
 import QRCode from "react-qr-code"
 
 import { AppLayout } from "@/components/app-layout"
@@ -20,7 +21,7 @@ export const ReceiveView = ({
     <div className="flex flex-col flex-1">
       <MenuBar variant="card" onCloseClicked={onGoBack} />
       <div className="animate-in fade-in slide-in-from-bottom-8 px-8 pb-8">
-        <h1 className="text-3xl mb-4">Your address</h1>
+        <h1 className="text-3xl mb-4">{useTranslation().t("yourAddress")}</h1>
         <div className="flex flex-col text-center justify-center items-center space-y-8 card bg-accent p-8">
           <QRCode
             value={publicKey}
@@ -36,7 +37,7 @@ export const ReceiveView = ({
               className="btn btn-link text-secondary text-sm"
               onClick={onCopyWalletAddress}
             >
-              Copy to clipboard
+              {useTranslation().t("copyClipboard")}
             </button>
           </div>
         </div>
diff --git a/packages/features/src/router.tsx b/packages/features/src/router.tsx
index 659ff9ef..ab7b61ca 100644
--- a/packages/features/src/router.tsx
+++ b/packages/features/src/router.tsx
@@ -41,6 +41,7 @@ import { TransactionDetailsRoute } from "./transactions/routes/transaction-detai
 import { TransactionsRoute } from "./transactions/routes/transactions"
 import { NetworksRoute } from "./wallet/routes/networks"
 import { OverviewRoute } from "./wallet/routes/overview"
+import "./i18n"
 
 dayjs.extend(relativeTime)
 
diff --git a/packages/features/src/send/components/confirm-transaction-form.tsx b/packages/features/src/send/components/confirm-transaction-form.tsx
index 6c882dd5..afeea750 100644
--- a/packages/features/src/send/components/confirm-transaction-form.tsx
+++ b/packages/features/src/send/components/confirm-transaction-form.tsx
@@ -1,5 +1,6 @@
 import { EyeIcon, EyeOffIcon, Loader2Icon } from "lucide-react"
 import type { SubmitHandler, UseFormReturn } from "react-hook-form"
+import { useTranslation } from "react-i18next"
 
 import { FormError } from "@/components/form-error"
 import { useState } from "react"
@@ -50,7 +51,7 @@ export const ConfirmTransactionForm = ({
         {confirmationForm.formState.isSubmitting && (
           <Loader2Icon size={16} className="animate-spin" />
         )}
-        <span>Send</span>
+        <span>{useTranslation().t("send")}</span>
       </button>
     </form>
   )
diff --git a/packages/features/src/send/components/send-form.tsx b/packages/features/src/send/components/send-form.tsx
index 72c476a6..b94eda20 100644
--- a/packages/features/src/send/components/send-form.tsx
+++ b/packages/features/src/send/components/send-form.tsx
@@ -1,6 +1,7 @@
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useEffect } from "react"
 import { useForm } from "react-hook-form"
+import { useTranslation } from "react-i18next"
 import { useLocation, useNavigate } from "react-router-dom"
 
 import { TransactionFee } from "@/common/lib/const"
@@ -31,6 +32,7 @@ export const SendForm = ({
   const location = useLocation()
   const setTransactionDetails = useTransactionStore((state) => state.set)
   const setType = useTransactionStore((state) => state.setType)
+  const { t } = useTranslation()
   const {
     register,
     handleSubmit,
@@ -77,10 +79,10 @@ export const SendForm = ({
       onSubmit={handleSubmit(onSubmit)}
     >
       <div className="flex justify-between items-center w-full">
-        <h1 className="text-3xl">Send</h1>
+        <h1 className="text-3xl">{t("send")}</h1>
         <div className="form-control">
           <label className="label cursor-pointer gap-2">
-            <span className="label-text">Advanced</span>
+            <span className="label-text">{t("advanced")}</span>
             <input
               type="checkbox"
               className="toggle toggle-primary border-none"
@@ -181,7 +183,7 @@ export const SendForm = ({
         data-testid="formSubmit"
         disabled={!isValid}
       >
-        Next
+        {t("next")}
       </button>
     </form>
   )
diff --git a/packages/features/src/send/views/transaction-summary.tsx b/packages/features/src/send/views/transaction-summary.tsx
index 70b11295..747e93da 100644
--- a/packages/features/src/send/views/transaction-summary.tsx
+++ b/packages/features/src/send/views/transaction-summary.tsx
@@ -1,3 +1,5 @@
+import { useTranslation } from "react-i18next"
+
 import { AppLayout } from "@/components/app-layout"
 
 import { FromTo } from "@/components/from-to"
@@ -27,6 +29,8 @@ export const TransactionSummaryView = ({
   onGoBack,
   onClose,
 }: TransactionSummaryViewProps) => {
+  const { t } = useTranslation()
+
   return (
     <AppLayout>
       <MenuBar
@@ -35,25 +39,25 @@ export const TransactionSummaryView = ({
         onCloseClicked={onClose}
       />
       <div className="flex flex-1 flex-col px-8 pb-8 gap-2">
-        <h1 className="text-3xl">Summary</h1>
+        <h1 className="text-3xl">{t("summary")}</h1>
         <FromTo tx={transaction} />
         <div className="card bg-secondary px-4 py-2 grid grid-cols-2">
           <div className="text-[#7D7A9C] py-2">Kind</div>
           <div className="capitalize text-right py-2">{transaction.type}</div>
           {transaction.type !== "delegation" && (
             <>
-              <div className="text-[#7D7A9C] py-2">Amount</div>
+              <div className="text-[#7D7A9C] py-2">{t("amount")}</div>
               <div className="capitalize text-right py-2">
                 {transaction.amount} MINA
               </div>
             </>
           )}
-          <div className="text-[#7D7A9C] py-2">Fee</div>
+          <div className="text-[#7D7A9C] py-2">{t("fee")}</div>
           <div className="capitalize text-right py-2">
             {transaction.fee} MINA
           </div>
           <div className="divider col-span-2 my-0" />
-          <div className="text-[#7D7A9C] py-2">Total</div>
+          <div className="text-[#7D7A9C] py-2">{t("total")}</div>
           <div className="capitalize text-right py-2">
             {transaction.total} MINA
           </div>
diff --git a/packages/features/src/settings/views/about.tsx b/packages/features/src/settings/views/about.tsx
index ba6125cc..fbccf571 100644
--- a/packages/features/src/settings/views/about.tsx
+++ b/packages/features/src/settings/views/about.tsx
@@ -1,3 +1,5 @@
+import { useTranslation } from "react-i18next"
+
 import { AppLayout } from "@/components/app-layout"
 
 import { SettingsPageLayout } from "@/components/settings-page-layout"
@@ -10,19 +12,19 @@ const ButtonWrapperStyles =
 
 const Links = [
   {
-    label: "FAQ",
+    label: useTranslation().t("faq"),
     href: "https://get.pallad.co/faq",
   },
   {
-    label: "Support",
+    label: useTranslation().t("support"),
     href: "https://get.pallad.co/support",
   },
   {
-    label: "Terms of Service",
+    label: useTranslation().t("termOfServices"),
     href: "https://get.pallad.co/terms",
   },
   {
-    label: "Version",
+    label: useTranslation().t("version"),
     content: packageJson.version,
   },
 ]
diff --git a/packages/features/src/settings/views/display.tsx b/packages/features/src/settings/views/display.tsx
index 3fa32e77..b9687d52 100644
--- a/packages/features/src/settings/views/display.tsx
+++ b/packages/features/src/settings/views/display.tsx
@@ -1,3 +1,5 @@
+import { useTranslation } from "react-i18next"
+
 import { AppLayout } from "@/components/app-layout"
 import { SettingsPageLayout } from "@/components/settings-page-layout"
 import { ChevronRight } from "lucide-react"
@@ -8,7 +10,7 @@ const ButtonWrapperStyles =
 
 const Links = [
   {
-    label: "Currency",
+    label: useTranslation().t("currency"),
     value: "$USD",
     href: "/settings/display/currency",
   },
@@ -24,12 +26,13 @@ type DisplayViewProps = {
 }
 
 export const DisplayView = ({ onCloseClicked }: DisplayViewProps) => {
+  const { t } = useTranslation()
   return (
     <AppLayout>
       <SettingsPageLayout title="Display" onCloseClicked={onCloseClicked}>
         <div className="space-y-2">
           <div className={ButtonWrapperStyles}>
-            <p>Dark mode</p>
+            <p>{t("darkMode")}</p>
             <input
               type="checkbox"
               className="toggle [--tglbg:#F6C177] bg-white hover:bg-white border-[#F6C177]"
diff --git a/packages/features/src/settings/views/privacy.tsx b/packages/features/src/settings/views/privacy.tsx
index 36de7122..3ffa25fe 100644
--- a/packages/features/src/settings/views/privacy.tsx
+++ b/packages/features/src/settings/views/privacy.tsx
@@ -1,3 +1,5 @@
+import { useTranslation } from "react-i18next"
+
 import { AppLayout } from "@/components/app-layout"
 import { SettingsPageLayout } from "@/components/settings-page-layout"
 import clsx from "clsx"
@@ -13,13 +15,14 @@ export const PrivacyView = ({
   shareData,
   setShareData,
 }: PrivacyViewProps) => {
+  const { t } = useTranslation()
   return (
     <AppLayout>
       <SettingsPageLayout title="Privacy" onCloseClicked={onCloseClicked}>
         <div className="pl-6 pr-4 py-4 flex items-center justify-between bg-secondary rounded-2xl">
           <div>
-            <p>Share data</p>
-            <p className="text-sm">Anonymous data only</p>
+            <p>{t("sharedData")}</p>
+            <p className="text-sm">{t("anomymousData")}</p>
           </div>
           <input
             type="checkbox"
diff --git a/packages/features/src/settings/views/settings.tsx b/packages/features/src/settings/views/settings.tsx
index ca37271e..0284222e 100644
--- a/packages/features/src/settings/views/settings.tsx
+++ b/packages/features/src/settings/views/settings.tsx
@@ -1,4 +1,5 @@
 import { AppWindowMac, Eye, Info } from "lucide-react"
+import { useTranslation } from "react-i18next"
 
 import { AppLayout } from "@/components/app-layout"
 import { SettingsPageLayout } from "@/components/settings-page-layout"
@@ -7,7 +8,7 @@ import { Link } from "react-router-dom"
 const Links = [
   // TODO: Uncomment when we add multi-account
   // {
-  //   label: "Wallet",
+  //   label: useTranslation().t('wallet'),
   //   description: "Management and networks",
   //   href: "/settings/wallet",
   //   Icon: WalletMinimal,
@@ -19,20 +20,20 @@ const Links = [
     Icon: AppWindowMac,
   },
   {
-    label: "Privacy",
+    label: useTranslation().t("privacy"),
     description: "Data sharing",
     href: "/settings/privacy",
     Icon: Eye,
   },
   // TODO: Uncomment when we add multiple locales
   // {
-  //   label: "Display",
+  //   label: useTranslation().t('display'),
   //   description: "Languages and currencies",
   //   href: "/settings/display",
   //   Icon: Globe,
   // },
   {
-    label: "About",
+    label: useTranslation().t("about"),
     description: "Everything about us",
     href: "/settings/about",
     Icon: Info,
@@ -50,6 +51,8 @@ export const SettingsView = ({
   onDonateClicked,
   onLogOut,
 }: SettingsViewProps) => {
+  const { t } = useTranslation()
+
   return (
     <AppLayout>
       <SettingsPageLayout
@@ -57,13 +60,13 @@ export const SettingsView = ({
         onCloseClicked={onCloseClicked}
         headerContent={
           <div className="mt-6 px-6 py-4 flex items-center justify-between bg-neutral rounded-2xl">
-            <p>Buy us a coffee!</p>
+            <p>{t("buyUsACoffee")}</p>
             <button
               type="button"
               className="px-8 btn btn-primary"
               onClick={onDonateClicked}
             >
-              Send
+              {t("send")}
             </button>
           </div>
         }
@@ -98,7 +101,7 @@ export const SettingsView = ({
             data-testid="settings/logOut"
             onClick={onLogOut}
           >
-            Log out
+            {t("logOut")}
           </button>
         </div>
       </SettingsPageLayout>
diff --git a/packages/features/src/settings/views/support.tsx b/packages/features/src/settings/views/support.tsx
index 0630585c..3cf0126e 100644
--- a/packages/features/src/settings/views/support.tsx
+++ b/packages/features/src/settings/views/support.tsx
@@ -1,3 +1,5 @@
+import { useTranslation } from "react-i18next"
+
 import { AppLayout } from "@/components/app-layout"
 import { SettingsPageLayout } from "@/components/settings-page-layout"
 
@@ -6,18 +8,19 @@ type SupportViewProps = {
 }
 
 export const SupportView = ({ onCloseClicked }: SupportViewProps) => {
+  const { t } = useTranslation()
   return (
     <AppLayout>
       <SettingsPageLayout title="Support" onCloseClicked={onCloseClicked}>
         <div className="flex flex-col items-center p-6 space-y-6 bg-secondary rounded-2xl">
-          <p>Need help?</p>
+          <p>{t("needHelp")}</p>
           <a
             href="https://pallad.co/support"
             target="_blank"
             rel="noreferrer"
             className="btn btn-primary px-10"
           >
-            Contact support
+            {t("contactSupport")}
           </a>
         </div>
       </SettingsPageLayout>
diff --git a/packages/features/src/staking/components/block-producer-tile.tsx b/packages/features/src/staking/components/block-producer-tile.tsx
index 6baecbfc..cf1c91a0 100644
--- a/packages/features/src/staking/components/block-producer-tile.tsx
+++ b/packages/features/src/staking/components/block-producer-tile.tsx
@@ -1,3 +1,5 @@
+import { useTranslation } from "react-i18next"
+
 import PlaceholderImage from "@/common/assets/placeholder.svg?react"
 import { useNavigate } from "react-router-dom"
 
@@ -32,6 +34,7 @@ interface BlockProducerTileProps {
 export const BlockProducerTile = ({ producer }: BlockProducerTileProps) => {
   const [showPlaceholder, setShowPlaceholder] = useState(false)
   const navigate = useNavigate()
+  const { t } = useTranslation()
   return (
     <button
       type="button"
@@ -65,7 +68,7 @@ export const BlockProducerTile = ({ producer }: BlockProducerTileProps) => {
           {formatCompact({ value: producer.amountStaked })} MINA
         </div>
         <div className="text-right text-sm">
-          {formatCompact({ value: producer.delegators })} Delegators
+          {formatCompact({ value: producer.delegators })} {t("delegators")}
         </div>
       </div>
     </button>
diff --git a/packages/features/src/staking/components/delegate-form.tsx b/packages/features/src/staking/components/delegate-form.tsx
index f52b9900..63f1b774 100644
--- a/packages/features/src/staking/components/delegate-form.tsx
+++ b/packages/features/src/staking/components/delegate-form.tsx
@@ -1,6 +1,7 @@
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useEffect } from "react"
 import { useForm } from "react-hook-form"
+import { useTranslation } from "react-i18next"
 import { Link, useLocation, useNavigate } from "react-router-dom"
 
 import { TransactionFee } from "@/common/lib/const"
@@ -23,6 +24,7 @@ export const DelegateForm = ({ advanced, setAdvanced }: DelegateFormProps) => {
   const navigate = useNavigate()
   const setTransactionDetails = useTransactionStore((state) => state.set)
   const setType = useTransactionStore((state) => state.setType)
+  const { t } = useTranslation()
   const {
     register,
     handleSubmit,
@@ -59,12 +61,12 @@ export const DelegateForm = ({ advanced, setAdvanced }: DelegateFormProps) => {
       className="flex flex-col flex-1 gap-4 px-8 pb-8 items-center"
       onSubmit={handleSubmit(onSubmit)}
     >
-      <h1 className="text-3xl w-full">Select a validator</h1>
+      <h1 className="text-3xl w-full">{t("selectValidator")}</h1>
       <Link
         to="/staking/producers"
         className="card bg-secondary w-full flex-row py-2 px-4 items-center justify-between"
       >
-        <h2 className="text-mint">Find a validator</h2>
+        <h2 className="text-mint">{t("findValidator")}</h2>
         <div className="bg-neutral rounded-full p-2">
           <ExternalLinkIcon />
         </div>
@@ -93,7 +95,7 @@ export const DelegateForm = ({ advanced, setAdvanced }: DelegateFormProps) => {
         className="btn btn-primary max-w-48 w-full"
         data-testid="formSubmit"
       >
-        <span>Next</span>
+        <span>{t("next")}</span>
       </button>
     </form>
   )
diff --git a/packages/features/src/staking/views/block-producers.tsx b/packages/features/src/staking/views/block-producers.tsx
index 25696b15..c3f2161c 100644
--- a/packages/features/src/staking/views/block-producers.tsx
+++ b/packages/features/src/staking/views/block-producers.tsx
@@ -1,4 +1,5 @@
 import { AppLayout } from "@/components/app-layout"
+import { useTranslation } from "react-i18next"
 
 import { MenuBar } from "@/components/menu-bar"
 import arrayShuffle from "array-shuffle"
@@ -16,11 +17,12 @@ export const BlockProducersView = ({
   blockProducers,
 }: BlockProducersViewProps) => {
   const randomTwentyProducers = arrayShuffle(take(20, blockProducers))
+  const { t } = useTranslation()
   return (
     <AppLayout>
       <MenuBar variant="back" onBackClicked={onGoBack} />
       <div className="flex flex-col gap-3 px-8 pb-8">
-        <h1 className="text-3xl w-full">Select a validator</h1>
+        <h1 className="text-3xl w-full">{t("selectValidator")}</h1>
         {randomTwentyProducers.map((producer) => (
           <BlockProducerTile key={producer.pk} producer={producer} />
         ))}
diff --git a/packages/features/src/staking/views/staking-overview.tsx b/packages/features/src/staking/views/staking-overview.tsx
index 3190d44c..9ee14823 100644
--- a/packages/features/src/staking/views/staking-overview.tsx
+++ b/packages/features/src/staking/views/staking-overview.tsx
@@ -1,3 +1,5 @@
+import { useTranslation } from "react-i18next"
+
 import type { useAccount } from "@/common/hooks/use-account"
 import { AddressDropdown } from "@/components/address-dropdown"
 import { AppLayout } from "@/components/app-layout"
@@ -47,7 +49,7 @@ export const StakingOverviewView = ({
     <div className="card flex-col bg-secondary rounded-t-none pb-6">
       <MenuBar variant="dashboard" />
       <div className="flex flex-col gap-6 px-8">
-        <h1 className="text-3xl">Staking</h1>
+        <h1 className="text-3xl">{useTranslation().t("staking")}</h1>
         {stakeDelegated ? (
           <div className="flex flex-row justify-between items-center card bg-neutral p-6">
             <div className="flex flex-col">
@@ -63,15 +65,13 @@ export const StakingOverviewView = ({
               className="btn btn-primary px-7"
               data-testid="staking/start"
             >
-              Edit
+              {useTranslation().t("edit")}
             </Link>
           </div>
         ) : (
           <EmptyState
             heading={
-              <h2 className="text-lg">
-                Enjoy seamless staking and start earning rewards.
-              </h2>
+              <h2 className="text-lg">{useTranslation().t("enjoySeamless")}</h2>
             }
             button={{
               label: "Stake",
@@ -83,19 +83,19 @@ export const StakingOverviewView = ({
       </div>
     </div>
     <div className="flex flex-1 justify-between flex-col px-8 pt-8 gap-4">
-      <h2 className="text-2xl">Block rewards</h2>
+      <h2 className="text-2xl">{useTranslation().t("blockRewards")}</h2>
       <div className="flex justify-between items-center">
         <div className="flex justify-center items-center flex-col">
           <p className="text-2xl">{stats.lastReward}</p>
-          <h3 className="text-sm">Last reward</h3>
+          <h3 className="text-sm">{useTranslation().t("lastReward")}</h3>
         </div>
         <div className="flex justify-center items-center flex-col">
           <p className="text-2xl">{stats.avgReward}</p>
-          <h3 className="text-sm">Avg. reward</h3>
+          <h3 className="text-sm">{useTranslation().t("avgReward")}</h3>
         </div>
         <div className="flex justify-center items-center flex-col">
           <p className="text-2xl">{stats.totalReward}</p>
-          <h3 className="text-sm">Total reward</h3>
+          <h3 className="text-sm">{useTranslation().t("totalReward")}</h3>
         </div>
       </div>
       <ResponsiveContainer width="100%" aspect={2.5}>
diff --git a/packages/features/src/transactions/components/tx-tile.tsx b/packages/features/src/transactions/components/tx-tile.tsx
index d97c4ba5..18115229 100644
--- a/packages/features/src/transactions/components/tx-tile.tsx
+++ b/packages/features/src/transactions/components/tx-tile.tsx
@@ -1,3 +1,5 @@
+import { useTranslation } from "react-i18next"
+
 import { getTxKind } from "@/common/lib/tx"
 import { TxIcon } from "@/components/tx-icon"
 import type { Mina } from "@palladxyz/mina-core"
@@ -11,6 +13,7 @@ type TxTileProps = {
 
 export const TxTile = ({ tx, currentWalletAddress }: TxTileProps) => {
   const kind = getTxKind({ tx, currentWalletAddress })
+  const { t } = useTranslation()
   return (
     <Link
       key={tx.hash}
@@ -22,15 +25,15 @@ export const TxTile = ({ tx, currentWalletAddress }: TxTileProps) => {
           <TxIcon tx={tx} currentWalletAddress={currentWalletAddress} />
         </div>
         <div>
-          {kind === "incoming" && <p>Received</p>}
-          {kind === "outgoing" && <p>Sent</p>}
-          {kind === "delegation" && <p>Staked</p>}
+          {kind === "incoming" && <p>{t("received")}</p>}
+          {kind === "outgoing" && <p>{t("sent")}</p>}
+          {kind === "delegation" && <p>{t("staked")}</p>}
           <p className="text-[#7D7A9C]">{tx.time}</p>
         </div>
       </div>
       <div className="text-right">
         {kind === "delegation" ? (
-          <p>Portfolio</p>
+          <p>{t("portfolio")}</p>
         ) : (
           <p>{`${tx.minaAmount} MINA`}</p>
         )}
diff --git a/packages/features/src/wallet/components/info-bar.tsx b/packages/features/src/wallet/components/info-bar.tsx
index 6e3b4834..9e28f726 100644
--- a/packages/features/src/wallet/components/info-bar.tsx
+++ b/packages/features/src/wallet/components/info-bar.tsx
@@ -1,10 +1,12 @@
 import { InfoIcon, XIcon } from "lucide-react"
+import { useTranslation } from "react-i18next"
 
 type InfoBarProps = {
   onClose: () => void
 }
 
 export const InfoBar = ({ onClose }: InfoBarProps) => {
+  const { t } = useTranslation()
   return (
     <div className="px-8">
       <div className="flex gap-2 items-center w-full bg-secondary p-4 rounded-xl">
@@ -12,10 +14,8 @@ export const InfoBar = ({ onClose }: InfoBarProps) => {
           <InfoIcon className="text-primary" />
         </div>
         <div className="flex flex-col">
-          <h2>Open Beta version</h2>
-          <p className="text-gray-400 text-sm">
-            Only works for Devnet before Mainnet launch
-          </p>
+          <h2>{t("openBeta")}</h2>
+          <p className="text-gray-400 text-sm">{t("onlyWorksForDevnet")}</p>
         </div>
         <button type="button" onClick={onClose}>
           <XIcon size={20} className="text-gray-400" />
diff --git a/packages/features/src/wallet/views/networks.tsx b/packages/features/src/wallet/views/networks.tsx
index 76216383..1acf3cd4 100644
--- a/packages/features/src/wallet/views/networks.tsx
+++ b/packages/features/src/wallet/views/networks.tsx
@@ -1,3 +1,5 @@
+import { useTranslation } from "react-i18next"
+
 import MinaIcon from "@/common/assets/mina.svg?react"
 import ZekoIcon from "@/common/assets/zeko.svg?react"
 import { MenuBar } from "@/components/menu-bar"
@@ -34,6 +36,7 @@ export const NetworksView = ({
   onNetworkSwitch,
   currentNetwork,
 }: NetworksViewProps) => {
+  const { t } = useTranslation()
   return (
     <div className="flex flex-col flex-1">
       <MenuBar
@@ -46,9 +49,9 @@ export const NetworksView = ({
         <div className="flex justify-between">
           <div className="flex flex-col gap-2">
             <h1>
-              <span className="text-mint">Available</span>
+              <span className="text-mint">{t("available")}</span>
               <br />
-              <span className="text-2xl">Networks</span>
+              <span className="text-2xl">{t("networks")}</span>
             </h1>
           </div>
         </div>
diff --git a/packages/features/src/wallet/views/overview.tsx b/packages/features/src/wallet/views/overview.tsx
index 45fa40d6..71a319b6 100644
--- a/packages/features/src/wallet/views/overview.tsx
+++ b/packages/features/src/wallet/views/overview.tsx
@@ -1,3 +1,5 @@
+import { useTranslation } from "react-i18next"
+
 import ArrowRightIcon from "@/common/assets/arrow-right.svg?react"
 import { AppLayout } from "@/components/app-layout"
 import { MenuBar } from "@/components/menu-bar"
@@ -39,6 +41,7 @@ export const OverviewView = ({
   useFiatBalance,
   setUseFiatBalance,
 }: OverviewViewProps) => {
+  const { t } = useTranslation()
   const [bucks, cents] = (useFiatBalance ? fiatBalance : minaBalance)
     .toFixed(2)
     .toString()
@@ -55,13 +58,13 @@ export const OverviewView = ({
       </Skeleton>
       <div className="card flex-col bg-secondary rounded-t-none px-8 pb-6 gap-4">
         <div className="flex justify-between items-center">
-          <h1 className="text-primary">Portfolio value</h1>
+          <h1 className="text-primary">{t("portfolioValue")}</h1>
           <button
             type="button"
             className="btn btn-sm"
             onClick={() => setUseFiatBalance(!useFiatBalance)}
           >
-            Use {useFiatBalance ? "Mina" : "Fiat"}
+            {t("use")} {useFiatBalance ? "Mina" : "Fiat"}
           </button>
         </div>
         <Skeleton loading={loading} h="65px">
@@ -86,7 +89,7 @@ export const OverviewView = ({
             onClick={onSend}
             data-testid="dashboard/send"
           >
-            Send
+            {t("send")}
           </button>
           <button
             type="button"
@@ -94,18 +97,18 @@ export const OverviewView = ({
             onClick={onReceive}
             data-testid="dashboard/receive"
           >
-            Receive
+            {t("receive")}
           </button>
         </div>
       </div>
       <div className="flex flex-col px-8 py-4 gap-3 pb-16">
         <div className="flex justify-between items-end">
           <div className="flex flex-col gap-1">
-            <p className="text-mint">Recent</p>
-            <h2 className="text-xl">Transactions</h2>
+            <p className="text-mint">{t("recent")}</p>
+            <h2 className="text-xl">{t("transactions")}</h2>
           </div>
           <Link to="/transactions" className="flex items-center mb-[2px]">
-            <span>See all</span>
+            <span>{t("seeAll")}</span>
             <ArrowRightIcon />
           </Link>
         </div>
@@ -124,7 +127,7 @@ export const OverviewView = ({
               />
             ))
           ) : (
-            <p className="col-span-2">No transactions yet.</p>
+            <p className="col-span-2">{t("noTransactionsYet")}</p>
           )}
         </div>
       </div>
diff --git a/packages/features/src/web-connector/components/confirmation-form.tsx b/packages/features/src/web-connector/components/confirmation-form.tsx
index c2a86ba5..4ac0e745 100644
--- a/packages/features/src/web-connector/components/confirmation-form.tsx
+++ b/packages/features/src/web-connector/components/confirmation-form.tsx
@@ -1,3 +1,5 @@
+import { useTranslation } from "react-i18next"
+
 type ConfirmationFormProps = {
   onConfirm: () => void
   onDecline: () => void
@@ -9,6 +11,7 @@ export const ConfirmationForm = ({
   onDecline,
   loading,
 }: ConfirmationFormProps) => {
+  const { t } = useTranslation()
   return (
     <form
       id="confirm-section"
@@ -20,7 +23,7 @@ export const ConfirmationForm = ({
         disabled={loading}
         onClick={onConfirm}
       >
-        Approve
+        {t("approve")}
       </button>
       <button
         className="btn max-w-48 w-full"
@@ -28,7 +31,7 @@ export const ConfirmationForm = ({
         onClick={onDecline}
         disabled={loading}
       >
-        Deny
+        {t("deny")}
       </button>
     </form>
   )
diff --git a/packages/features/src/web-connector/components/input-form.tsx b/packages/features/src/web-connector/components/input-form.tsx
index 3d79ab35..7a65196e 100644
--- a/packages/features/src/web-connector/components/input-form.tsx
+++ b/packages/features/src/web-connector/components/input-form.tsx
@@ -1,6 +1,7 @@
 import { EyeIcon, EyeOffIcon } from "lucide-react"
 import { useState } from "react"
 import { type SubmitHandler, useForm } from "react-hook-form"
+import { useTranslation } from "react-i18next"
 import type { UserInputForm } from "../types"
 
 export const InputForm = ({
@@ -16,6 +17,7 @@ export const InputForm = ({
 }) => {
   const [showPassword, setShowPassword] = useState(false)
   const { register, handleSubmit } = useForm<UserInputForm>()
+  const { t } = useTranslation()
   return (
     <form
       onSubmit={handleSubmit(onSubmit)}
@@ -32,7 +34,7 @@ export const InputForm = ({
               : "text"
           }
           data-testid="webConnector/password"
-          placeholder="Enter your password"
+          placeholder={t("enterYourPassword")}
           className="grow"
           disabled={loading}
           {...register("userInput")}
@@ -52,7 +54,7 @@ export const InputForm = ({
         className="btn btn-primary max-w-48 w-full"
         disabled={loading}
       >
-        Sign
+        {t("sign")}
       </button>
       <button
         type="button"
@@ -60,7 +62,7 @@ export const InputForm = ({
         onClick={onReject}
         disabled={loading}
       >
-        Reject
+        {t("reject")}
       </button>
     </form>
   )
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 424a0c3a..56e9b0a3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -19,7 +19,7 @@ importers:
         version: 2.0.5
       '@turbo/gen':
         specifier: 2.0.9
-        version: 2.0.9(@swc/core@1.7.3(@swc/helpers@0.5.12))(@types/node@22.0.0)(typescript@5.5.4)
+        version: 2.0.9(@swc/core@1.7.3)(@types/node@22.0.0)(typescript@5.5.4)
       '@vitest/coverage-v8':
         specifier: 2.0.5
         version: 2.0.5(vitest@2.0.4(@types/node@22.0.0)(happy-dom@14.12.3)(jsdom@24.1.1))
@@ -43,13 +43,13 @@ importers:
         version: 2.4.0
       tailwindcss:
         specifier: 3.4.7
-        version: 3.4.7(ts-node@10.9.2(@swc/core@1.7.3(@swc/helpers@0.5.12))(@types/node@22.0.0)(typescript@5.5.4))
+        version: 3.4.7(ts-node@10.9.2(@swc/core@1.7.3)(@types/node@22.0.0)(typescript@5.5.4))
       tailwindcss-animate:
         specifier: 1.0.7
-        version: 1.0.7(tailwindcss@3.4.7(ts-node@10.9.2(@swc/core@1.7.3(@swc/helpers@0.5.12))(@types/node@22.0.0)(typescript@5.5.4)))
+        version: 1.0.7(tailwindcss@3.4.7(ts-node@10.9.2(@swc/core@1.7.3)(@types/node@22.0.0)(typescript@5.5.4)))
       tsup:
         specifier: 8.2.3
-        version: 8.2.3(@swc/core@1.7.3(@swc/helpers@0.5.12))(jiti@1.21.6)(postcss@8.4.40)(typescript@5.5.4)(yaml@2.5.0)
+        version: 8.2.3(@swc/core@1.7.3)(jiti@1.21.6)(postcss@8.4.40)(typescript@5.5.4)(yaml@2.5.0)
       turbo:
         specifier: 2.0.9
         version: 2.0.9
@@ -106,7 +106,7 @@ importers:
         version: 11.0.3
       tailwindcss-animate:
         specifier: 1.0.7
-        version: 1.0.7(tailwindcss@3.4.7(ts-node@10.9.2(@swc/core@1.7.3(@swc/helpers@0.5.12))(@types/node@22.0.0)(typescript@5.5.4)))
+        version: 1.0.7(tailwindcss@3.4.7(ts-node@10.9.2(@swc/core@1.7.3)(@types/node@22.0.0)(typescript@5.5.4)))
       vite-plugin-node-stdlib-browser:
         specifier: 0.2.1
         version: 0.2.1(node-stdlib-browser@1.2.0)(rollup@4.19.1)(vite@5.3.5(@types/node@22.0.0))
@@ -269,6 +269,12 @@ importers:
       easy-mesh-gradient:
         specifier: 0.0.5
         version: 0.0.5
+      i18next:
+        specifier: ^23.14.0
+        version: 23.14.0
+      i18next-browser-languagedetector:
+        specifier: ^8.0.0
+        version: 8.0.0
       immer:
         specifier: 10.1.1
         version: 10.1.1
@@ -305,6 +311,9 @@ importers:
       react-hook-form:
         specifier: 7.52.1
         version: 7.52.1(react@18.3.1)
+      react-i18next:
+        specifier: ^15.0.1
+        version: 15.0.1(i18next@23.14.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-mixpanel-browser:
         specifier: 4.1.0
         version: 4.1.0(react@18.3.1)
@@ -337,7 +346,7 @@ importers:
         version: 2.4.0
       tailwindcss-animate:
         specifier: 1.0.7
-        version: 1.0.7
+        version: 1.0.7(tailwindcss@3.4.7(ts-node@10.9.2(@swc/core@1.7.3)(@types/node@22.0.0)(typescript@5.5.4)))
       webext-bridge:
         specifier: 6.0.1
         version: 6.0.1
@@ -4701,6 +4710,9 @@ packages:
   html-escaper@3.0.3:
     resolution: {integrity: sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==}
 
+  html-parse-stringify@3.0.1:
+    resolution: {integrity: sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==}
+
   html-void-elements@3.0.0:
     resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
 
@@ -4754,6 +4766,12 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
+  i18next-browser-languagedetector@8.0.0:
+    resolution: {integrity: sha512-zhXdJXTTCoG39QsrOCiOabnWj2jecouOqbchu3EfhtSHxIB5Uugnm9JaizenOy39h7ne3+fLikIjeW88+rgszw==}
+
+  i18next@23.14.0:
+    resolution: {integrity: sha512-Y5GL4OdA8IU2geRrt2+Uc1iIhsjICdHZzT9tNwQ3TVqdNzgxHToGCKf/TPRP80vTCAP6svg2WbbJL+Gx5MFQVA==}
+
   iconv-lite@0.4.24:
     resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
     engines: {node: '>=0.10.0'}
@@ -6268,6 +6286,19 @@ packages:
       react: '>=16.8.1'
       react-dom: '>=16.8.1'
 
+  react-i18next@15.0.1:
+    resolution: {integrity: sha512-NwxLqNM6CLbeGA9xPsjits0EnXdKgCRSS6cgkgOdNcPXqL+1fYNl8fBg1wmnnHvFy812Bt4IWTPE9zjoPmFj3w==}
+    peerDependencies:
+      i18next: '>= 23.2.3'
+      react: '>= 16.8.0'
+      react-dom: '*'
+      react-native: '*'
+    peerDependenciesMeta:
+      react-dom:
+        optional: true
+      react-native:
+        optional: true
+
   react-inspector@6.0.2:
     resolution: {integrity: sha512-x+b7LxhmHXjHoU/VrFAzw5iutsILRoYyDq97EDYdFpPLcvqtEzk4ZSZSQjnFPbr5T57tLXnHcqFYoN1pI6u8uQ==}
     peerDependencies:
@@ -7500,6 +7531,10 @@ packages:
   vm-browserify@1.1.2:
     resolution: {integrity: sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==}
 
+  void-elements@3.1.0:
+    resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==}
+    engines: {node: '>=0.10.0'}
+
   w3c-xmlserializer@5.0.0:
     resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
     engines: {node: '>=18'}
@@ -9727,7 +9762,7 @@ snapshots:
 
   '@tsconfig/vite-react@3.0.2': {}
 
-  '@turbo/gen@2.0.9(@swc/core@1.7.3(@swc/helpers@0.5.12))(@types/node@22.0.0)(typescript@5.5.4)':
+  '@turbo/gen@2.0.9(@swc/core@1.7.3)(@types/node@22.0.0)(typescript@5.5.4)':
     dependencies:
       '@turbo/workspaces': 2.0.9
       commander: 10.0.1
@@ -9737,7 +9772,7 @@ snapshots:
       node-plop: 0.26.3
       picocolors: 1.0.1
       proxy-agent: 6.4.0
-      ts-node: 10.9.2(@swc/core@1.7.3(@swc/helpers@0.5.12))(@types/node@22.0.0)(typescript@5.5.4)
+      ts-node: 10.9.2(@swc/core@1.7.3)(@types/node@22.0.0)(typescript@5.5.4)
       update-check: 1.5.4
       validate-npm-package-name: 5.0.1
     transitivePeerDependencies:
@@ -12102,6 +12137,10 @@ snapshots:
 
   html-escaper@3.0.3: {}
 
+  html-parse-stringify@3.0.1:
+    dependencies:
+      void-elements: 3.1.0
+
   html-void-elements@3.0.0: {}
 
   htmlparser2@8.0.2:
@@ -12157,6 +12196,14 @@ snapshots:
 
   husky@9.1.4: {}
 
+  i18next-browser-languagedetector@8.0.0:
+    dependencies:
+      '@babel/runtime': 7.25.0
+
+  i18next@23.14.0:
+    dependencies:
+      '@babel/runtime': 7.25.0
+
   iconv-lite@0.4.24:
     dependencies:
       safer-buffer: 2.1.2
@@ -13797,13 +13844,13 @@ snapshots:
       camelcase-css: 2.0.1
       postcss: 8.4.40
 
-  postcss-load-config@4.0.2(postcss@8.4.40)(ts-node@10.9.2(@swc/core@1.7.3(@swc/helpers@0.5.12))(@types/node@22.0.0)(typescript@5.5.4)):
+  postcss-load-config@4.0.2(postcss@8.4.40)(ts-node@10.9.2(@swc/core@1.7.3)(@types/node@22.0.0)(typescript@5.5.4)):
     dependencies:
       lilconfig: 3.1.2
       yaml: 2.5.0
     optionalDependencies:
       postcss: 8.4.40
-      ts-node: 10.9.2(@swc/core@1.7.3(@swc/helpers@0.5.12))(@types/node@22.0.0)(typescript@5.5.4)
+      ts-node: 10.9.2(@swc/core@1.7.3)(@types/node@22.0.0)(typescript@5.5.4)
 
   postcss-load-config@6.0.1(jiti@1.21.6)(postcss@8.4.40)(yaml@2.5.0):
     dependencies:
@@ -13979,6 +14026,15 @@ snapshots:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
+  react-i18next@15.0.1(i18next@23.14.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      '@babel/runtime': 7.25.0
+      html-parse-stringify: 3.0.1
+      i18next: 23.14.0
+      react: 18.3.1
+    optionalDependencies:
+      react-dom: 18.3.1(react@18.3.1)
+
   react-inspector@6.0.2(react@18.3.1):
     dependencies:
       react: 18.3.1
@@ -14710,13 +14766,11 @@ snapshots:
 
   tailwind-merge@2.4.0: {}
 
-  tailwindcss-animate@1.0.7: {}
-
-  tailwindcss-animate@1.0.7(tailwindcss@3.4.7(ts-node@10.9.2(@swc/core@1.7.3(@swc/helpers@0.5.12))(@types/node@22.0.0)(typescript@5.5.4))):
+  tailwindcss-animate@1.0.7(tailwindcss@3.4.7(ts-node@10.9.2(@swc/core@1.7.3)(@types/node@22.0.0)(typescript@5.5.4))):
     dependencies:
-      tailwindcss: 3.4.7(ts-node@10.9.2(@swc/core@1.7.3(@swc/helpers@0.5.12))(@types/node@22.0.0)(typescript@5.5.4))
+      tailwindcss: 3.4.7(ts-node@10.9.2(@swc/core@1.7.3)(@types/node@22.0.0)(typescript@5.5.4))
 
-  tailwindcss@3.4.7(ts-node@10.9.2(@swc/core@1.7.3(@swc/helpers@0.5.12))(@types/node@22.0.0)(typescript@5.5.4)):
+  tailwindcss@3.4.7(ts-node@10.9.2(@swc/core@1.7.3)(@types/node@22.0.0)(typescript@5.5.4)):
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2
@@ -14735,7 +14789,7 @@ snapshots:
       postcss: 8.4.40
       postcss-import: 15.1.0(postcss@8.4.40)
       postcss-js: 4.0.1(postcss@8.4.40)
-      postcss-load-config: 4.0.2(postcss@8.4.40)(ts-node@10.9.2(@swc/core@1.7.3(@swc/helpers@0.5.12))(@types/node@22.0.0)(typescript@5.5.4))
+      postcss-load-config: 4.0.2(postcss@8.4.40)(ts-node@10.9.2(@swc/core@1.7.3)(@types/node@22.0.0)(typescript@5.5.4))
       postcss-nested: 6.2.0(postcss@8.4.40)
       postcss-selector-parser: 6.1.1
       resolve: 1.22.8
@@ -14839,7 +14893,7 @@ snapshots:
 
   ts-interface-checker@0.1.13: {}
 
-  ts-node@10.9.2(@swc/core@1.7.3(@swc/helpers@0.5.12))(@types/node@22.0.0)(typescript@5.5.4):
+  ts-node@10.9.2(@swc/core@1.7.3)(@types/node@22.0.0)(typescript@5.5.4):
     dependencies:
       '@cspotcode/source-map-support': 0.8.1
       '@tsconfig/node10': 1.0.11
@@ -14873,7 +14927,7 @@ snapshots:
 
   tsscmp@1.0.6: {}
 
-  tsup@8.2.3(@swc/core@1.7.3(@swc/helpers@0.5.12))(jiti@1.21.6)(postcss@8.4.40)(typescript@5.5.4)(yaml@2.5.0):
+  tsup@8.2.3(@swc/core@1.7.3)(jiti@1.21.6)(postcss@8.4.40)(typescript@5.5.4)(yaml@2.5.0):
     dependencies:
       bundle-require: 5.0.0(esbuild@0.23.0)
       cac: 6.7.14
@@ -15370,6 +15424,8 @@ snapshots:
 
   vm-browserify@1.1.2: {}
 
+  void-elements@3.1.0: {}
+
   w3c-xmlserializer@5.0.0:
     dependencies:
       xml-name-validator: 5.0.0