diff --git a/src/features/Apiexplorer/Dropdown/DropdownList/index.tsx b/src/features/Apiexplorer/Dropdown/DropdownList/index.tsx
index f0883e32..3ce0f493 100644
--- a/src/features/Apiexplorer/Dropdown/DropdownList/index.tsx
+++ b/src/features/Apiexplorer/Dropdown/DropdownList/index.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { playground_requests } from '@site/src/utils/playground_requests';
 import clsx from 'clsx';
 import styles from './DropdownList.module.scss';
+import Translate from '@docusaurus/Translate';
 
 type TDropdownList = {
   selected: string;
@@ -35,10 +36,14 @@ const DropdownList = ({
       />
       <div className={styles.dropdownList}>
         <div className={styles.dropdownSelect}>
-          <span>Select API Call - Version 3</span>
+          <span>
+            <Translate>Select API Call - Version 3</Translate>
+          </span>
         </div>
         <div className={styles.dropdownStart}>
-          <span>ALL CALLS</span>
+          <span>
+            <Translate>ALL CALLS</Translate>
+          </span>
         </div>
         {playground_requests
           .filter((option) => {
diff --git a/src/features/Apiexplorer/LoginDialog/index.tsx b/src/features/Apiexplorer/LoginDialog/index.tsx
index 48f14d9b..a720f93e 100644
--- a/src/features/Apiexplorer/LoginDialog/index.tsx
+++ b/src/features/Apiexplorer/LoginDialog/index.tsx
@@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
 import { Modal, Button } from '@deriv/ui';
 import useLoginUrl from '@site/src/hooks/useLoginUrl';
 import styles from './LoginDialog.module.scss';
+import Translate from '@docusaurus/Translate';
 
 type TLoginDialog = {
   setToggleModal: React.Dispatch<React.SetStateAction<boolean>>;
@@ -34,13 +35,15 @@ export const LoginDialog = ({ setToggleModal }: TLoginDialog) => {
             has_close_button
             className={styles.wrapper}
           >
-            <div className={styles.modal}>Log in or sign up to continue.</div>
+            <div className={styles.modal}>
+              <Translate>Log in or sign up to continue.</Translate>
+            </div>
             <div className={styles.buttonWrapper}>
               <Button color='tertiary' onClick={handleSignUp} className={styles.btn}>
-                Sign up
+                <Translate>Sign up</Translate>
               </Button>
               <Button color='primary' onClick={handleClick} className={styles.btn}>
-                Log in
+                <Translate>Log in</Translate>
               </Button>
             </div>
           </Modal.PageContent>
diff --git a/src/features/Apiexplorer/SubscribeRenderer/index.tsx b/src/features/Apiexplorer/SubscribeRenderer/index.tsx
index a2dee172..49102d42 100644
--- a/src/features/Apiexplorer/SubscribeRenderer/index.tsx
+++ b/src/features/Apiexplorer/SubscribeRenderer/index.tsx
@@ -11,6 +11,7 @@ import useDisableSendRequest from '@site/src/hooks/useDisableSendRequest';
 import LoginDialog from '../LoginDialog';
 import PlaygroundSection from '../RequestResponseRenderer/PlaygroundSection';
 import ValidDialog from '../ValidDialog';
+import Translate from '@docusaurus/Translate';
 
 export interface IResponseRendererProps<T extends TSocketSubscribableEndpointNames> {
   name: T;
@@ -60,10 +61,10 @@ function SubscribeRenderer<T extends TSocketSubscribableEndpointNames>({
     <div>
       <div className={styles.btnWrapper}>
         <Button color='primary' disabled={disableSendRequest(auth)} onClick={handleClick}>
-          Send Request
+          <Translate>Send Request</Translate>
         </Button>
         <Button color='secondary' onClick={handleClear}>
-          Clear
+          <Translate>Clear</Translate>
         </Button>
       </div>
       {is_valid ? (
diff --git a/src/features/Apiexplorer/ValidDialog/index.tsx b/src/features/Apiexplorer/ValidDialog/index.tsx
index 9a9a439d..06296522 100644
--- a/src/features/Apiexplorer/ValidDialog/index.tsx
+++ b/src/features/Apiexplorer/ValidDialog/index.tsx
@@ -1,6 +1,7 @@
 import React, { useCallback } from 'react';
 import { Modal } from '@deriv/ui';
 import styles from '../LoginDialog/LoginDialog.module.scss';
+import Translate from '@docusaurus/Translate';
 
 type TValidDialog = {
   setIsValid: React.Dispatch<React.SetStateAction<boolean>>;
@@ -28,8 +29,10 @@ export const ValidDialog = ({ setIsValid, setToggleModal }: TValidDialog) => {
             className={styles.validwrapper}
           >
             <div className={styles.validmodal}>
-              Your JSON object is invalid. Please make sure you provide the correct syntax for your
-              JSON object.
+              <Translate>
+                Your JSON object is invalid. Please make sure you provide the correct syntax for
+                your JSON object.
+              </Translate>
             </div>
           </Modal.PageContent>
         </div>
diff --git a/src/features/Auth/Login/Login.tsx b/src/features/Auth/Login/Login.tsx
index 9816dc6c..4ea78e3d 100644
--- a/src/features/Auth/Login/Login.tsx
+++ b/src/features/Auth/Login/Login.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import styles from './Login.module.scss';
 import useLoginUrl from '@site/src/hooks/useLoginUrl';
 import Footer from '@site/src/components/Footer';
+import Translate from '@docusaurus/Translate';
 
 export const Login = () => {
   const { getUrl } = useLoginUrl();
@@ -16,10 +17,12 @@ export const Login = () => {
         <div className={styles.loginsection}>
           <div className={styles.loginImage} role='image' />
           <Text type='paragraph-1' as={'h1'} align='center' bold role='heading'>
-            Log in to your Deriv account to get the API token and start using our API.
+            <Translate>
+              Log in to your Deriv account to get the API token and start using our API.
+            </Translate>
           </Text>
           <Button color='primary' onClick={handleClick}>
-            Log In
+            <Translate>Log In</Translate>
           </Button>
         </div>
         <div className={styles.footer}>
diff --git a/src/features/Endpoint/Endpoint.tsx b/src/features/Endpoint/Endpoint.tsx
index 0600810b..a6bec1be 100644
--- a/src/features/Endpoint/Endpoint.tsx
+++ b/src/features/Endpoint/Endpoint.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { useForm } from 'react-hook-form';
 import { Button, Text } from '@deriv/ui';
 import styles from './Endpoint.module.scss';
+import Translate from '@docusaurus/Translate';
 
 const default_endpoint = {
   app_id: '35014',
@@ -45,7 +46,7 @@ const EndPoint = () => {
       <form onSubmit={handleSubmit(onSubmit)} aria-label='form'>
         <div className={styles.pageContent}>
           <Text type='heading-2' as={'h2'} align='center' bold role='heading'>
-            Change API endpoint
+            <Translate>Change API endpoint</Translate>
           </Text>
           <div className={styles.content}>
             <div className={styles.customTextInput} id='custom-text-input'>
@@ -66,7 +67,9 @@ const EndPoint = () => {
                   className={styles.textInput}
                   required
                 />
-                <label className={styles.inlineLabel}>Server URL</label>
+                <label className={styles.inlineLabel}>
+                  <Translate>Server URL</Translate>
+                </label>
                 {errors.server_url && (
                   <div data-testid='server_error' className={styles.errorMessage}>
                     {errors.server_url.message}
@@ -90,7 +93,9 @@ const EndPoint = () => {
                   placeholder='e.g. 9999'
                   required
                 />
-                <label className={styles.inlineLabel}>App ID</label>
+                <label className={styles.inlineLabel}>
+                  <Translate>App ID </Translate>
+                </label>
                 {errors.app_id && (
                   <div data-testid='app_id_error' className={styles.errorMessage}>
                     {errors.app_id.message}
@@ -99,12 +104,14 @@ const EndPoint = () => {
               </div>
             </div>
             <div className={styles.currentUrl}>
-              <span className={styles.urlLabel}>Connected to :</span>
+              <span className={styles.urlLabel}>
+                <Translate>Connected to :</Translate>
+              </span>
               <div className={styles.urlLink}>{current_url}</div>
             </div>
             <div className={styles.buttons}>
               <Button type='submit' color='primary' disabled={Object.keys(errors).length > 0}>
-                Submit
+                <Translate>Submit</Translate>
               </Button>
               <span style={{ marginLeft: '1.6rem' }} />
               <Button
@@ -113,7 +120,7 @@ const EndPoint = () => {
                 onClick={onResetClicked}
                 className={styles.resetButton}
               >
-                Reset to original settings
+                <Translate>Reset to original settings</Translate>
               </Button>
             </div>
           </div>
diff --git a/src/features/Home/ApiFeatures/ApiFeatures.tsx b/src/features/Home/ApiFeatures/ApiFeatures.tsx
index 9475ce60..5183848b 100644
--- a/src/features/Home/ApiFeatures/ApiFeatures.tsx
+++ b/src/features/Home/ApiFeatures/ApiFeatures.tsx
@@ -1,17 +1,20 @@
 import React from 'react';
 import { Text } from '@deriv/ui';
 import styles from './ApiFeatures.module.scss';
+import Translate from '@docusaurus/Translate';
 export const ApiFeatures = () => {
   return (
     <article className={styles.FeaturesContainer} data-testid='api-features'>
       <section className={styles.FeatureText}>
         <header>
           <Text type='heading-2' as={'h2'} bold aria-level={1}>
-            Deriv API features
+            <Translate> Deriv API features</Translate>
           </Text>
           <Text type='paragraph-1' className={styles.FeatureParagraph} role='definition'>
-            Deriv API gives you full access to all the trading functionalities of DTrader and allows
-            you to build your own comprehensive trading systems and analysis tools.
+            <Translate>
+              Deriv API gives you full access to all the trading functionalities of DTrader and
+              allows you to build your own comprehensive trading systems and analysis tools.
+            </Translate>
           </Text>
           <Text type='paragraph-1' className={styles.FeatureParagraph} role={'note'}>
             {"With our API, you'll be able to:"}
@@ -21,15 +24,21 @@ export const ApiFeatures = () => {
           <ul className={styles.FeatureList}>
             <li className={styles.FeatureOptions}>
               <img src='/img/checklist-icon-grey.svg'></img>
-              <div className={styles.FeatureContent}>Trade digital options and multipliers</div>
+              <div className={styles.FeatureContent}>
+                <Translate>Trade digital options and multipliers</Translate>
+              </div>
             </li>
             <li className={styles.FeatureOptions}>
               <img src='/img/checklist-icon-grey.svg'></img>
-              <div className={styles.FeatureContent}>Monitor real-time pricing</div>
+              <div className={styles.FeatureContent}>
+                <Translate>Monitor real-time pricing</Translate>
+              </div>
             </li>
             <li className={styles.FeatureOptions}>
               <img src='/img/checklist-icon-grey.svg'></img>
-              <div className={styles.FeatureContent}>Buy/sell contracts</div>
+              <div className={styles.FeatureContent}>
+                <Translate>Buy/sell contracts</Translate>
+              </div>
             </li>
             <li className={styles.FeatureOptions}>
               <img src='/img/checklist-icon-grey.svg'></img>
@@ -37,7 +46,9 @@ export const ApiFeatures = () => {
             </li>
             <li className={styles.FeatureOptions}>
               <img src='/img/checklist-icon-grey.svg'></img>
-              <div className={styles.FeatureContent}>Monitor existing contracts</div>
+              <div className={styles.FeatureContent}>
+                <Translate>Monitor existing contracts</Translate>
+              </div>
             </li>
             <li className={styles.FeatureOptions}>
               <img src='/img/checklist-icon-grey.svg'></img>
diff --git a/src/features/Home/Benefits/Benefits.tsx b/src/features/Home/Benefits/Benefits.tsx
index 0f2ed0b6..59bdf7eb 100644
--- a/src/features/Home/Benefits/Benefits.tsx
+++ b/src/features/Home/Benefits/Benefits.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Text } from '@deriv/ui';
 import styles from './Benefits.module.scss';
+import Translate from '@docusaurus/Translate';
 
 type TBenefitsIcon = {
   icon: string;
@@ -40,7 +41,7 @@ export const Benefits = () => {
     <article data-testid='benefits' className={styles.BenefitsContainer}>
       <header>
         <Text type='heading-2' as={'h2'} align='center' bold className={styles.Heading}>
-          Benefits of using Deriv API
+          <Translate> Benefits of using Deriv API</Translate>
         </Text>
         <section className={styles.BenefitsIcons}>
           <BenefitsIcon icon='automation' text='Automation' alt='automation' />
@@ -52,11 +53,15 @@ export const Benefits = () => {
         <article className={styles.InformationContainer}>
           <ImageContainer image='personalisation' alt='personalisation' />
           <section className={styles.InformationContent}>
-            <h1>Personalize your trading</h1>
+            <h1>
+              <Translate>Personalize your trading</Translate>
+            </h1>
             <Text type='subtitle-2' as='p'>
-              Personalize your trading apps to match your needs. Create charts and views the way you
-              like them. Develop your trading app using any common programming language and extend
-              your trading opportunities.
+              <Translate>
+                Personalize your trading apps to match your needs. Create charts and views the way
+                you like them. Develop your trading app using any common programming language and
+                extend your trading opportunities.
+              </Translate>
             </Text>
           </section>
         </article>
@@ -65,9 +70,11 @@ export const Benefits = () => {
           <section className={styles.InformationContent}>
             <h1>Build a business and earn more</h1>
             <Text type='subtitle-2' as='p'>
-              Create your own trading apps by taking advantage of the power of Deriv&apos;s trading
-              services. Share your apps with fellow traders or customers, and get a chance to earn
-              more or build your own business.
+              <Translate>
+                Create your own trading apps by taking advantage of the power of Deriv&apos;s
+                trading services. Share your apps with fellow traders or customers, and get a chance
+                to earn more or build your own business.
+              </Translate>
             </Text>
           </section>
         </article>
diff --git a/src/features/Home/Carousel/Carousel.tsx b/src/features/Home/Carousel/Carousel.tsx
index 0828d1d4..2ef98784 100644
--- a/src/features/Home/Carousel/Carousel.tsx
+++ b/src/features/Home/Carousel/Carousel.tsx
@@ -6,13 +6,14 @@ import NextButton from './NextButton';
 import PrevButton from './PrevButton';
 import styles from './Carousel.module.scss';
 import './swiper-custom.scss';
+import Translate from '@docusaurus/Translate';
 
 export const Carousel = () => {
   return (
     <article data-testid='carousel-component' className={`${styles.carouselComponent} carousel`}>
       <header>
         <Text type='heading-2' as='h1' align='center' bold className={styles.carouselHeading}>
-          See what our clients say
+          <Translate> See what our clients say </Translate>
         </Text>
       </header>
       <section className={styles.carouselContainer}>
diff --git a/src/features/Home/ClientLibraries/ClientLibraries.tsx b/src/features/Home/ClientLibraries/ClientLibraries.tsx
index 1e15a66f..d7d84a49 100644
--- a/src/features/Home/ClientLibraries/ClientLibraries.tsx
+++ b/src/features/Home/ClientLibraries/ClientLibraries.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Text } from '@deriv/ui';
 import styles from './ClientLibraries.module.scss';
+import Translate from '@docusaurus/Translate';
 
 export const ClientLibraries = () => {
   return (
@@ -17,11 +18,13 @@ export const ClientLibraries = () => {
           aria-level={1}
           className={styles.Heading}
         >
-          Comprehensive all-in-one <br /> client library
+          <Translate>Comprehensive all-in-one</Translate>
+          <br /> <Translate>client library</Translate>
         </Text>
         <p className={styles.SubText}>
-          Simplify your development processes and get your app up and running <br />
-          faster with the client library of your choice.
+          <Translate>Simplify your development processes and get your app up and running</Translate>
+          <br />
+          <Translate> faster with the client library of your choice.</Translate>
         </p>
         <nav className={styles.LibraryLogo}>
           <div className={styles.LogoAndLink}>
@@ -32,7 +35,9 @@ export const ClientLibraries = () => {
               target='_blank'
             >
               <img src='/img/js.svg'></img>
-              <label>Go to the JavaScript library</label>
+              <label>
+                <Translate>Go to the JavaScript library</Translate>
+              </label>
               <img className={styles.LibraryChevron} src='/img/library-chevron.svg' />
             </a>
           </div>
@@ -44,7 +49,9 @@ export const ClientLibraries = () => {
               target='_blank'
             >
               <img src='/img/py.svg'></img>
-              <label>Go to the Python library</label>
+              <label>
+                <Translate>Go to the Python library</Translate>
+              </label>
               <img className={styles.LibraryChevron} src='/img/library-chevron.svg' />
             </a>
           </div>
@@ -56,7 +63,9 @@ export const ClientLibraries = () => {
               target='_blank'
             >
               <img src='/img/flutter.svg'></img>
-              <label>Go to the Flutter library</label>
+              <label>
+                <Translate>Go to the Flutter library</Translate>
+              </label>
               <img className={styles.LibraryChevron} src='/img/library-chevron.svg' />
             </a>
           </div>
diff --git a/src/features/Home/GetStarted/GetStarted.tsx b/src/features/Home/GetStarted/GetStarted.tsx
index 09093f6e..3bb7623a 100644
--- a/src/features/Home/GetStarted/GetStarted.tsx
+++ b/src/features/Home/GetStarted/GetStarted.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import styles from './GetStarted.module.scss';
 import { Text } from '@deriv/ui';
 import Link from '@docusaurus/Link';
+import Translate from '@docusaurus/Translate';
 
 export const GetStarted = () => {
   return (
@@ -15,7 +16,7 @@ export const GetStarted = () => {
           role='heading'
           as='h2'
         >
-          Get started with our API in 3 simple steps:
+          <Translate>Get started with our API in 3 simple steps:</Translate>
         </Text>
         <nav className={styles.cardContainer}>
           <Link
@@ -27,9 +28,11 @@ export const GetStarted = () => {
             <img src='/img/guide.svg' className={styles.cardIcon} />
             <section>
               <Text type='subtitle-1' bold className={`${styles.dark} ${styles.header}`} as='h2'>
-                1. Learn about our API
+                <Translate>1. Learn about our API</Translate>
               </Text>
-              <p>Understand basic concepts and terminologies.</p>
+              <p>
+                <Translate>Understand basic concepts and terminologies.</Translate>
+              </p>
             </section>
             <figure className={styles.arrowIcon}>
               <img src='img/home-arrow.svg' />
@@ -45,9 +48,11 @@ export const GetStarted = () => {
             <img src='/img/sign-up.svg' className={styles.cardIcon} />
             <section>
               <Text type='subtitle-1' bold className={`${styles.dark} ${styles.header}`} as='h2'>
-                2. Sign up
+                <Translate>2. Sign up</Translate>
               </Text>
-              <p>Create a free Deriv account to access our API.</p>
+              <p>
+                <Translate>Create a free Deriv account to access our API.</Translate>
+              </p>
             </section>
             <figure className={styles.arrowIcon}>
               <img src='img/home-arrow.svg' />
@@ -62,9 +67,11 @@ export const GetStarted = () => {
             <img src='/img/register-your-app.svg' className={styles.cardIcon} />
             <section>
               <Text type='subtitle-1' bold className={`${styles.dark} ${styles.header}`} as='h2'>
-                3. Register your app
+                <Translate>3. Register your app</Translate>
               </Text>
-              <p>Fill out the registration form to start using Deriv API.</p>
+              <p>
+                <Translate>Fill out the registration form to start using Deriv API</Translate>
+              </p>
             </section>
             <figure className={styles.arrowIcon}>
               <img src='img/home-arrow.svg' />
@@ -72,14 +79,14 @@ export const GetStarted = () => {
           </Link>
         </nav>
         <span className={styles.termConditions}>
-          By using our API, you confirm that you have read and agreed to our
+          <Translate>By using our API, you confirm that you have read and agreed to our</Translate>
           <Link
             to='https://deriv.com/tnc/business-partners-api-user.pdf'
             target='_blank'
             rel='noopener noreferrer'
           >
             {' '}
-            terms and conditions.
+            <Translate>terms and conditions.</Translate>
           </Link>
         </span>
       </section>
diff --git a/src/features/Home/HeroHeader/HeroHeader.tsx b/src/features/Home/HeroHeader/HeroHeader.tsx
index 1f2b7f75..540d471e 100644
--- a/src/features/Home/HeroHeader/HeroHeader.tsx
+++ b/src/features/Home/HeroHeader/HeroHeader.tsx
@@ -1,13 +1,14 @@
 import React from 'react';
 import { Button, Text } from '@deriv/ui';
 import styles from './HeroHeader.module.scss';
+import Translate from '@docusaurus/Translate';
 
 export const HeroHeader = () => {
   return (
     <header className={styles.HeroImageStyle} data-testid='hero-header'>
       <div className={styles.HeroContainerStyle}>
         <Text type='heading-1' as={'h1'} bold className={styles.heading} aria-level={2}>
-          Deriv API
+          <Translate>Deriv API</Translate>
         </Text>
         <Text
           type='subtitle-1'
@@ -16,12 +17,13 @@ export const HeroHeader = () => {
           aria-level={7}
           className={styles.SubHeading}
         >
-          Use our powerful, flexible, and free API to build a custom trading <br />
-          platform - for yourself or for your business.
+          <Translate>Use our powerful, flexible, and free API to build a custom trading</Translate>{' '}
+          <br />
+          <Translate>platform - for yourself or for your business.</Translate>
         </Text>
         <a href='/docs/intro'>
           <Button type='button' className={styles.HeroButton}>
-            Read the docs
+            <Translate>Read the docs</Translate>
           </Button>
         </a>
       </div>
diff --git a/src/features/Home/WaysToEarn/WaysToEarn.tsx b/src/features/Home/WaysToEarn/WaysToEarn.tsx
index 9027b540..735e4724 100644
--- a/src/features/Home/WaysToEarn/WaysToEarn.tsx
+++ b/src/features/Home/WaysToEarn/WaysToEarn.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Badge, Text } from '@deriv/ui';
 import styles from './WaysToEarn.module.scss';
+import Translate from '@docusaurus/Translate';
 
 export const WaysToEarn = () => {
   return (
@@ -8,7 +9,7 @@ export const WaysToEarn = () => {
       <section className={styles.WaysWrapper}>
         <header>
           <Text type='heading-2' as={'h2'} align='center' bold className={styles.WaysHeading}>
-            Ways to earn with Deriv API
+            <Translate>Ways to earn with Deriv API</Translate>
           </Text>
         </header>
         <section>
@@ -21,8 +22,10 @@ export const WaysToEarn = () => {
               visiblity='icon-and-label'
             >
               <Text type='paragraph-1' className={styles.Margin}>
-                Register your app with Deriv, and add a percentage markup to the contract prices to
-                profit from every purchased contract.
+                <Translate>
+                  Register your app with Deriv, and add a percentage markup to the contract prices
+                  to profit from every purchased contract.
+                </Translate>
               </Text>
             </Badge>
           </article>
@@ -35,8 +38,10 @@ export const WaysToEarn = () => {
               visiblity='icon-and-label'
             >
               <Text type='paragraph-1' className={styles.Margin}>
-                Sign up as an affiliate, build your app, and get commissions on trades completed via
-                your app and the affiliate plan you select.
+                <Translate>
+                  Sign up as an affiliate, build your app, and get commissions on trades completed
+                  via your app and the affiliate plan you select.
+                </Translate>
               </Text>
             </Badge>
           </article>
@@ -49,8 +54,10 @@ export const WaysToEarn = () => {
               visiblity='icon-and-label'
             >
               <Text type='paragraph-1' className={styles.Margin}>
-                Sign up as a payment agent, build your own custom payment website, and use our API
-                to earn commission on every payment you process for Deriv&apos;s clients.
+                <Translate>
+                  Sign up as a payment agent, build your own custom payment website, and use our API
+                  to earn commission on every payment you process for Deriv&apos;s clients.
+                </Translate>
               </Text>
             </Badge>
           </article>
diff --git a/src/features/dashboard/components/ApiTokenCard/index.tsx b/src/features/dashboard/components/ApiTokenCard/index.tsx
index e70baccd..b760fb06 100644
--- a/src/features/dashboard/components/ApiTokenCard/index.tsx
+++ b/src/features/dashboard/components/ApiTokenCard/index.tsx
@@ -5,6 +5,7 @@ import { UseFormRegister } from 'react-hook-form';
 import CustomCheckbox from '@site/src/components/CustomCheckbox';
 import clsx from 'clsx';
 import styles from './api-token.card.module.scss';
+import Translate from '@docusaurus/Translate';
 
 interface IApiTokenCardPros extends HTMLAttributes<HTMLDivElement> {
   register: UseFormRegister<TApiTokenForm>;
@@ -31,7 +32,10 @@ const ApiTokenCard = ({ register, name, label, description, ...rest }: IApiToken
           <div className={styles.warning_container}>
             <img className={styles.warning_image} src='/img/warning.svg' />
             <p>
-              <b>Note:</b> Do not share tokens with the Admin scope with unauthorised parties.
+              <b>Note:</b>
+              <Translate>
+                Do not share tokens with the Admin scope with unauthorised parties.
+              </Translate>
             </p>
           </div>
         )}
diff --git a/src/features/dashboard/components/ApiTokenForm/api-token.form.tsx b/src/features/dashboard/components/ApiTokenForm/api-token.form.tsx
index 8d004115..535122a3 100644
--- a/src/features/dashboard/components/ApiTokenForm/api-token.form.tsx
+++ b/src/features/dashboard/components/ApiTokenForm/api-token.form.tsx
@@ -8,6 +8,7 @@ import ApiTokenCard from '../ApiTokenCard';
 import useCreateToken from '@site/src/features/dashboard/hooks/useCreateToken';
 import * as yup from 'yup';
 import styles from './api-token.form.module.scss';
+import Translate from '@docusaurus/Translate';
 
 const schema = yup
   .object({
@@ -107,7 +108,7 @@ const ApiTokenForm = (props: HTMLAttributes<HTMLFormElement>) => {
         <div className={styles.step_title}>
           <div className={`${styles.first_step} ${styles.step}`}>
             <Text as={'p'} type={'paragraph-1'} data-testid={'first-step-title'}>
-              Select scopes based on the access you need.
+              <Translate>Select scopes based on the access you need.</Translate>
             </Text>
           </div>
         </div>
@@ -129,7 +130,7 @@ const ApiTokenForm = (props: HTMLAttributes<HTMLFormElement>) => {
         <div className={styles.step_title}>
           <div className={`${styles.second_step} ${styles.step}`}>
             <Text as={'p'} type={'paragraph-1'} data-testid={'second-step-title'}>
-              Name your token and click on Create to generate your token.
+              <Translate>Name your token and click on Create to generate your token.</Translate>
             </Text>
           </div>
         </div>
@@ -140,7 +141,7 @@ const ApiTokenForm = (props: HTMLAttributes<HTMLFormElement>) => {
         <div className={styles.step_title}>
           <div className={`${styles.third_step} ${styles.step}`}>
             <Text as={'p'} type={'paragraph-1'} data-testid={'third-step-title'}>
-              Copy and paste the token into the app.
+              <Translate>Copy and paste the token into the app.</Translate>
             </Text>
           </div>
         </div>
diff --git a/src/features/dashboard/components/AppForm/index.tsx b/src/features/dashboard/components/AppForm/index.tsx
index 7942915d..82a786ad 100644
--- a/src/features/dashboard/components/AppForm/index.tsx
+++ b/src/features/dashboard/components/AppForm/index.tsx
@@ -14,6 +14,7 @@ import AccountDropdown from '@site/src/components/CustomSelectDropdown/account-d
 import CustomCheckbox from '@site/src/components/CustomCheckbox';
 import styles from './app-form.module.scss';
 import clsx from 'clsx';
+import Translate from '@docusaurus/Translate';
 
 type TAppFormProps = {
   initialValues?: Partial<IRegisterAppForm>;
@@ -63,7 +64,9 @@ const AppForm = ({
     <React.Fragment>
       {!accountHasAdminToken() && (
         <Text as='span' type='paragraph-1' className='error-message'>
-          This account doesn&apos;t have API tokens with the admin scope. Choose another account.
+          <Translate>
+            This account doesn&apos;t have API tokens with the admin scope. Choose another account.
+          </Translate>
         </Text>
       )}
     </React.Fragment>
@@ -85,7 +88,7 @@ const AppForm = ({
                 </Text>
                 {!is_update_mode && (
                   <Text as='p' type='paragraph-1'>
-                    Select your api token ( it should have admin scope )
+                    <Translate>Select your api token ( it should have admin scope )</Translate>
                   </Text>
                 )}
               </div>
@@ -123,7 +126,9 @@ const AppForm = ({
               )}
               <div className={styles.customTextInput} id='custom-text-input'>
                 <input {...register('name')} type='text' id='app_name' placeholder=' ' />
-                <label htmlFor='app_name'>App name (required)</label>
+                <label htmlFor='app_name'>
+                  <Translate>App name (required) </Translate>
+                </label>
               </div>
               {errors && errors?.name && (
                 <Text as='span' type='paragraph-1' className='error-message'>
@@ -132,13 +137,19 @@ const AppForm = ({
               )}
             </div>
             <div className={styles.formHeaderContainer}>
-              <h4>Markup</h4>
+              <h4>
+                <Translate>Markup</Translate>
+              </h4>
               <div>
                 <Text as='span' type='paragraph-1'>
-                  You can earn commission by adding a markup to the price of each trade. Enter your
-                  markup percentage here.
+                  <Translate>
+                    You can earn commission by adding a markup to the price of each trade. Enter
+                    your markup percentage here.
+                  </Translate>
                   <br />
-                  <b>NOTE: Markup is only available for real accounts</b>
+                  <b>
+                    <Translate>NOTE: Markup is only available for real accounts</Translate>
+                  </b>
                 </Text>
               </div>
             </div>
@@ -160,11 +171,15 @@ const AppForm = ({
                     placeholder=' '
                     disabled={disableMarkup}
                   />
-                  <label htmlFor='app_markup_percentage'>Markup percentage (optional)</label>
+                  <label htmlFor='app_markup_percentage'>
+                    <Translate>Markup percentage (optional)</Translate>
+                  </label>
                 </div>
                 <Text as='p' type='paragraph-1' className={styles.helperText}>
-                  If you don&lsquo;t want to earn a markup, enter 0 here. Otherwise, enter a number
-                  up to 5. Maximum: 5.00%.
+                  <Translate>
+                    If you don&lsquo;t want to earn a markup, enter 0 here. Otherwise, enter a
+                    number up to 5. Maximum: 5.00%.
+                  </Translate>
                 </Text>
                 {errors && errors?.app_markup_percentage && (
                   <Text as='span' type='paragraph-1' className='error-message'>
@@ -174,11 +189,15 @@ const AppForm = ({
               </div>
             </div>
             <div className={styles.formHeaderContainer}>
-              <h4>OAuth details</h4>
+              <h4>
+                <Translate>OAuth details</Translate>
+              </h4>
               <div>
                 <Text as='span' type='paragraph-1'>
-                  This allows clients to log in to your app using their Deriv accounts without an
-                  API token.
+                  <Translate>
+                    This allows clients to log in to your app using their Deriv accounts without an
+                    API token.
+                  </Translate>
                 </Text>
               </div>
             </div>
@@ -190,11 +209,15 @@ const AppForm = ({
                   type='text'
                   placeholder=' '
                 />
-                <label htmlFor='app_redirect_uri'>Authorization URL (optional)</label>
+                <label htmlFor='app_redirect_uri'>
+                  <Translate>Authorization URL (optional)</Translate>
+                </label>
               </div>
               <p className={styles.helperText}>
-                *Please note that this URL will be used as the OAuth redirect URL for the OAuth
-                authorization.
+                <Translate>
+                  *Please note that this URL will be used as the OAuth redirect URL for the OAuth
+                  authorization.
+                </Translate>
               </p>
               {errors && errors?.redirect_uri && (
                 <span className='error-message'>{errors.redirect_uri?.message}</span>
@@ -209,7 +232,9 @@ const AppForm = ({
                   type='text'
                   placeholder=' '
                 />
-                <label htmlFor='app_verification_uri'>Verification URL (optional)</label>
+                <label htmlFor='app_verification_uri'>
+                  <Translate>Verification URL (optional) </Translate>
+                </label>
               </div>
               {errors && errors?.verification_uri && (
                 <span className='error-message'>{errors.verification_uri?.message}</span>
@@ -219,24 +244,39 @@ const AppForm = ({
             <div className={styles.scopes} id='register_scopes'>
               <div>
                 <div className={styles.formHeaderContainer}>
-                  <h4>Scope of authorization</h4>
+                  <h4>
+                    <Translate>Scope of authorization</Translate>
+                  </h4>
                   <div>
-                    <span>Select the scope for your app:</span>
+                    <span>
+                      <Translate>Select the scope for your app:</Translate>
+                    </span>
                   </div>
                 </div>
               </div>
               <div className={styles.customCheckboxWrapper}>
                 <CustomCheckbox name='read' id='read-scope' register={register('read')}>
                   <label htmlFor='read-scope'>
-                    <b>Read</b>: You&apos;ll have full access to your clients&apos; information.
+                    <b>
+                      <Translate>Read</Translate>
+                    </b>
+                    :{' '}
+                    <Translate>
+                      You&apos;ll have full access to your clients&apos; information.
+                    </Translate>
                   </label>
                 </CustomCheckbox>
               </div>
               <div className={styles.customCheckboxWrapper}>
                 <CustomCheckbox name='trade' id='trade-scope' register={register('trade')}>
                   <label htmlFor='trade-scope'>
-                    <b>Trade</b>: You&apos;ll be able to buy and sell contracts on your
-                    clients&apos; behalf.
+                    <b>
+                      <Translate>Trade</Translate>
+                    </b>
+                    :{' '}
+                    <Translate>
+                      You&apos;ll be able to buy and sell contracts on your clients&apos; behalf.
+                    </Translate>
                   </label>
                 </CustomCheckbox>
               </div>
@@ -247,39 +287,58 @@ const AppForm = ({
                   register={register('trading_information')}
                 >
                   <label htmlFor='trading_information-scope'>
-                    <b>Trading information</b>: You&lsquo;ll be able to view your clients&rsquo;
-                    trading information, including their account balance.
+                    <b>
+                      <Translate>Trading information</Translate>
+                    </b>
+                    :
+                    <Translate>
+                      You&lsquo;ll be able to view your clients&rsquo; trading information,
+                      including their account balance.
+                    </Translate>
                   </label>
                 </CustomCheckbox>
               </div>
               <div className={styles.customCheckboxWrapper}>
                 <CustomCheckbox name='payments' id='payments-scope' register={register('payments')}>
                   <label htmlFor='payments-scope'>
-                    <b>Payments</b>: You&lsquo;ll be able to perform deposits and withdrawals on
-                    your clients&rsquo; behalf.
+                    <b>
+                      <Translate>Payments</Translate>
+                    </b>
+                    <Translate>
+                      : You&lsquo;ll be able to perform deposits and withdrawals on your
+                      clients&rsquo; behalf.
+                    </Translate>
                   </label>
                 </CustomCheckbox>
               </div>
               <div className={`${styles.customCheckboxWrapper} mb-0`}>
                 <CustomCheckbox name='admin' id='admin-scope' register={register('admin')}>
                   <label htmlFor='admin-scope'>
-                    <b>Admin</b>: Full account access, including the access to manage security
-                    tokens.
+                    <b>
+                      <Translate>Admin</Translate>
+                    </b>
+                    <Translate>
+                      : Full account access, including the access to manage security tokens.
+                    </Translate>
                   </label>
                 </CustomCheckbox>
               </div>
             </div>
             <div className={styles.termsOfConditionRegister}>
               <span>
-                By registering your application, you acknowledge that you&lsquo;ve read and accepted
-                the Deriv API{' '}
+                <Translate>
+                  By registering your application, you acknowledge that you&lsquo;ve read and
+                  accepted the Deriv API
+                </Translate>
               </span>
               <a
                 href='https://deriv.com/tnc/business-partners-api-user.pdf'
                 target='_blank'
                 rel='noreferrer'
               >
-                <span>terms and conditions</span>
+                <span>
+                  <Translate>terms and conditions</Translate>
+                </span>
               </a>
             </div>
             {renderButtons && <div className={styles.submit_container}>{renderButtons()}</div>}
diff --git a/src/features/dashboard/components/AppsTable/app-actions.cell.tsx b/src/features/dashboard/components/AppsTable/app-actions.cell.tsx
index d3cbcdbb..81231898 100644
--- a/src/features/dashboard/components/AppsTable/app-actions.cell.tsx
+++ b/src/features/dashboard/components/AppsTable/app-actions.cell.tsx
@@ -1,3 +1,4 @@
+import Translate from '@docusaurus/Translate';
 import React from 'react';
 import { CellProps } from 'react-table';
 import { TAppColumn } from '.';
@@ -16,14 +17,18 @@ const AppActionsCell = ({ openDeleteDialog, openEditDialog }: IAppActionsCellPro
         className={`${styles.updateApp} ${styles.tooltip}`}
         data-testid={'update-app-button'}
       >
-        <span className={styles.tooltipText}>Edit application details</span>
+        <span className={styles.tooltipText}>
+          <Translate>Edit application details</Translate>
+        </span>
       </div>
       <div
         onClick={openDeleteDialog}
         className={`${styles.deleteApp} ${styles.tooltip}`}
         data-testid={'delete-app-button'}
       >
-        <span className={styles.tooltipText}>Delete application</span>
+        <span className={styles.tooltipText}>
+          <Translate>Delete application</Translate>
+        </span>
       </div>
     </div>
   );
diff --git a/src/features/dashboard/components/Dialogs/UpdateAppDialog/index.tsx b/src/features/dashboard/components/Dialogs/UpdateAppDialog/index.tsx
index 9dc9d994..869639ca 100644
--- a/src/features/dashboard/components/Dialogs/UpdateAppDialog/index.tsx
+++ b/src/features/dashboard/components/Dialogs/UpdateAppDialog/index.tsx
@@ -9,6 +9,7 @@ import { RegisterAppDialogError } from '../RegisterAppDialogError';
 import { scopesArrayToObject, scopesObjectToArray } from '@site/src/utils';
 import styles from './update-app-dialog.module.scss';
 import useAuthContext from '@site/src/hooks/useAuthContext';
+import Translate from '@docusaurus/Translate';
 
 interface IUpdateAppDialog {
   app: ApplicationObject;
@@ -77,9 +78,11 @@ const UpdateAppDialog = ({ app, onClose }: IUpdateAppDialog) => {
     return (
       <div className={styles.buttons}>
         <Button role='submit' disabled={is_loading}>
-          Update Application
+          <Translate> Update Application</Translate>
+        </Button>
+        <Button onClick={onClose}>
+          <Translate>Cancel</Translate>
         </Button>
-        <Button onClick={onClose}>Cancel</Button>
       </div>
     );
   };
diff --git a/src/features/dashboard/components/NoApps/index.tsx b/src/features/dashboard/components/NoApps/index.tsx
index b6153a36..51fa47ed 100644
--- a/src/features/dashboard/components/NoApps/index.tsx
+++ b/src/features/dashboard/components/NoApps/index.tsx
@@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
 import styles from './no-apps.module.scss';
 import { Button, Text } from '@deriv/ui';
 import useAppManager from '@site/src/hooks/useAppManager';
+import Translate from '@docusaurus/Translate';
 
 const NoApps = () => {
   const { updateCurrentTab } = useAppManager();
@@ -16,11 +17,13 @@ const NoApps = () => {
         <div className={styles.noAppsIcon} />
         <div className={styles.noAppsText}>
           <Text as={'p'} type={'paragraph-1'} data-testid={'no-apps-description'}>
-            To see your details reflected, please register your app via the registration form.
+            <Translate>
+              To see your details reflected, please register your app via the registration form.
+            </Translate>
           </Text>
         </div>
         <Button color='secondary' onClick={onRegisterClick}>
-          Register now
+          <Translate>Register now</Translate>
         </Button>
       </div>
     </div>
diff --git a/src/features/dashboard/manage-tokens/index.tsx b/src/features/dashboard/manage-tokens/index.tsx
index d1d66048..ced1968a 100644
--- a/src/features/dashboard/manage-tokens/index.tsx
+++ b/src/features/dashboard/manage-tokens/index.tsx
@@ -3,12 +3,13 @@ import { Text } from '@deriv/ui';
 import styles from './manage-tokens.module.scss';
 import ApiTokenForm from '../components/ApiTokenForm/api-token.form';
 import ApiTokenTable from '../components/ApiTokenTable';
+import Translate from '@docusaurus/Translate';
 
 const ApiToken = () => {
   return (
     <section className={styles.manage_tokens}>
       <Text as='h2' type={'subtitle-2'}>
-        API Token Manager
+        <Translate>API Token Manager</Translate>
       </Text>
       <ApiTokenForm />
       <ApiTokenTable />
diff --git a/src/features/dashboard/register-app/index.tsx b/src/features/dashboard/register-app/index.tsx
index b60df013..0240c488 100644
--- a/src/features/dashboard/register-app/index.tsx
+++ b/src/features/dashboard/register-app/index.tsx
@@ -7,6 +7,7 @@ import { RegisterAppDialogError } from '../components/Dialogs/RegisterAppDialogE
 import { RegisterAppDialogSuccess } from '../components/Dialogs/RegisterAppDialogSuccess';
 import { IRegisterAppForm } from '../types';
 import useAuthContext from '@site/src/hooks/useAuthContext';
+import Translate from '@docusaurus/Translate';
 
 const AppRegistration = () => {
   const { is_loading, send: registerApp, error, clear, data } = useWS('app_register');
@@ -45,7 +46,7 @@ const AppRegistration = () => {
     return (
       <>
         <Button role='submit' disabled={is_loading}>
-          Register Application
+          <Translate>Register Application</Translate>
         </Button>
       </>
     );