diff --git a/docusaurus.config.js b/docusaurus.config.js
index 763a13a7..4f384e7d 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -27,7 +27,12 @@ const config = {
   // to replace "en" with "zh-Hans".
   i18n: {
     defaultLocale: 'en',
-    locales: ['en'],
+    locales: ['en', 'es', 'fr'],
+    localeConfigs: {
+      th: {
+        label: 'Thai',
+      },
+    },
   },
 
   plugins: [
@@ -118,6 +123,10 @@ const config = {
             type: 'custom-user-navbar-item',
             position: 'right',
           },
+          {
+            type: 'localeDropdown',
+            position: 'right',
+          },
         ],
       },
       prism: {
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
index 0f10b85a..88d84dc8 100644
--- a/src/components/Footer/index.tsx
+++ b/src/components/Footer/index.tsx
@@ -1,16 +1,17 @@
 import React from 'react';
 import { Text } from '@deriv/ui';
 import styles from './Footer.module.scss';
+import Translate from '@docusaurus/Translate';
 
 const Footer = () => {
   return (
     <footer className={styles.FooterContainer} data-testid='footer-text'>
       <section className={styles.FooterBody}>
         <Text type='subtitle-1' as='h3' align='center' className={styles.FooterContent}>
-          Get connected
+          <Translate>Get connected</Translate>
         </Text>
         <p className={styles.FooterBodyContent}>
-          Discuss ideas and share solutions with developers worldwide.
+          <Translate>Discuss ideas and share solutions with developers worldwide.</Translate>
         </p>
         <div className={styles.Communities}>
           <a
@@ -19,22 +20,24 @@ const Footer = () => {
             rel='noreferrer'
             className={styles.communityButton}
           >
-            <span>Join our community</span>
+            <span>
+              <Translate>Join our community</Translate>
+            </span>
           </a>
         </div>
       </section>
       <section className={styles.FooterBody}>
         <Text type='subtitle-1' as='h3' align='center' className={styles.FooterContent}>
-          We&apos;re here to help
+          <Translate>We&apos;re here to help</Translate>
         </Text>
         <Text type='paragraph-1' align='center' className={styles.FooterBodyContentEmail}>
-          Email us at{' '}
+          <Translate>Email us at</Translate>{' '}
           <a className={styles.Email} href={'mailto:api-support@deriv.com'}>
-            api-support@deriv.com
+            <Translate>api-support@deriv.com</Translate>
           </a>
         </Text>
         <Text type='paragraph-1' align='center' className={styles.FooterBodyContentEmail}>
-          if you have any questions.
+          <Translate>if you have any questions.</Translate>
         </Text>
       </section>
     </footer>
diff --git a/src/features/Apiexplorer/Dropdown/DropdownList/index.tsx b/src/features/Apiexplorer/Dropdown/DropdownList/index.tsx
index 8f09fd8b..afef61cd 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;
@@ -34,10 +35,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 58ca74e2..eb58c9ef 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>>;
@@ -36,21 +37,25 @@ export const LoginDialog = ({ setToggleModal }: TLoginDialog) => {
           >
             <div className={styles.modal}>
               <p>
-                This API call must be authorised because it requires access to your account
-                information.
+                <Translate>
+                  This API call must be authorised because it requires access to your account
+                  information.
+                </Translate>
               </p>
               <p>
-                Log in to your Deriv account to proceed. If you don’t have a Deriv account, sign up
-                first.
+                <Translate>
+                  Log in to your Deriv account to proceed. If you don’t have a Deriv account, sign
+                  up first.
+                </Translate>
               </p>
             </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/RequestJSONBox/index.tsx b/src/features/Apiexplorer/RequestJSONBox/index.tsx
index 495ac3aa..ca5b9f59 100644
--- a/src/features/Apiexplorer/RequestJSONBox/index.tsx
+++ b/src/features/Apiexplorer/RequestJSONBox/index.tsx
@@ -1,10 +1,11 @@
 import { TSocketEndpointNames } from '@site/src/configs/websocket/types';
 import clsx from 'clsx';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import RequestResponseRenderer from '../RequestResponseRenderer';
 import style from './RequestJSONBox.module.scss';
 import SubscribeRenderer from '../SubscribeRenderer';
 import { TSocketSubscribableEndpointNames } from '@site/src/configs/websocket/types';
+import Translate from '@docusaurus/Translate';
 
 interface TRequestJSONBox<T extends TSocketEndpointNames> {
   handleChange: React.ChangeEventHandler<HTMLTextAreaElement>;
@@ -27,7 +28,7 @@ function RequestJSONBox<T extends TSocketEndpointNames>({
     <div className={style.playgroundBox}>
       <div className={style.formContent}>
         <label htmlFor='playground-request' className={style.inlineLabel}>
-          Request JSON
+          <Translate>Request JSON</Translate>
         </label>
         <textarea
           id='playground-request'
diff --git a/src/features/Apiexplorer/SubscribeRenderer/index.tsx b/src/features/Apiexplorer/SubscribeRenderer/index.tsx
index a107da74..9831a973 100644
--- a/src/features/Apiexplorer/SubscribeRenderer/index.tsx
+++ b/src/features/Apiexplorer/SubscribeRenderer/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useEffect, useRef } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import {
   TSocketSubscribableEndpointNames,
   TSocketRequestProps,
@@ -11,6 +11,7 @@ import useDisableSendRequest from '@site/src/hooks/useDisableSendRequest';
 import PlaygroundSection from '../RequestResponseRenderer/PlaygroundSection';
 import LoginDialog from '../LoginDialog';
 import ValidDialog from '../ValidDialog';
+import Translate from '@docusaurus/Translate';
 
 export interface IResponseRendererProps<T extends TSocketSubscribableEndpointNames> {
   name: T;
@@ -84,10 +85,10 @@ function SubscribeRenderer<T extends TSocketSubscribableEndpointNames>({
           disabled={disableSendRequest(auth) || reqData === ''}
           onClick={handleClick}
         >
-          Send Request
+          <Translate>Send Request</Translate>
         </Button>
         <Button color='secondary' disabled={reqData === ''} onClick={handleClear}>
-          Clear
+          <Translate>Clear</Translate>
         </Button>
       </div>
       {is_not_valid && (
diff --git a/src/features/Apiexplorer/ValidDialog/index.tsx b/src/features/Apiexplorer/ValidDialog/index.tsx
index 6eaa6c8b..789044c7 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 = {
   setIsNotValid: React.Dispatch<React.SetStateAction<boolean>>;
@@ -28,8 +29,10 @@ export const ValidDialog = ({ setIsNotValid, 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 5e1dc618..90e5778a 100644
--- a/src/features/Endpoint/Endpoint.tsx
+++ b/src/features/Endpoint/Endpoint.tsx
@@ -4,6 +4,7 @@ import { Button, Text } from '@deriv/ui';
 import { getAppId } from '@site/src/utils';
 import { DEFAULT_WS_SERVER } from '@site/src/utils/constants';
 import styles from './Endpoint.module.scss';
+import Translate, { translate } from '@docusaurus/Translate';
 
 interface IEndpointFormValues {
   app_id: string;
@@ -50,7 +51,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'>
@@ -59,11 +60,11 @@ const EndPoint = () => {
                   {...register('server_url', {
                     required: {
                       value: true,
-                      message: 'Server is Required',
+                      message: translate({ message: 'Server is Required' }),
                     },
                     pattern: {
                       value: /^([\w-]+\.)+[\w-]+(`[\w- ;,./?%&=])*?$/, // TODO: it's better to check if the server url contains qa or not ( for qa box server urls )
-                      message: 'Please enter a valid server URL',
+                      message: translate({ message: 'Please enter a valid server URL' }),
                     },
                   })}
                   name='server_url'
@@ -71,7 +72,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}
@@ -83,11 +86,11 @@ const EndPoint = () => {
                   {...register('app_id', {
                     required: {
                       value: true,
-                      message: 'App ID is required',
+                      message: translate({ message: 'App ID is required' }),
                     },
                     pattern: {
                       value: /^(0|[1-9]\d*)(\.\d+)?$/,
-                      message: 'Please enter a valid app ID',
+                      message: translate({ message: 'Please enter a valid app ID' }),
                     },
                   })}
                   name='app_id'
@@ -95,7 +98,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}
@@ -104,12 +109,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
@@ -118,7 +125,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 33084940..ab1c4cb0 100644
--- a/src/features/Home/ApiFeatures/ApiFeatures.tsx
+++ b/src/features/Home/ApiFeatures/ApiFeatures.tsx
@@ -1,17 +1,21 @@
 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,27 +25,39 @@ 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>
-              <div className={styles.FeatureContent}>{"Manage user's accounts"}</div>
+              <div className={styles.FeatureContent}>
+                <Translate>{"Manage user's accounts"}</Translate>
+              </div>
             </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>
-              <div className={styles.FeatureContent}>{"View user's historical transactions"}</div>
+              <div className={styles.FeatureContent}>
+                <Translate>{"View user's historical transactions"}</Translate>
+              </div>
             </li>
           </ul>
         </section>
diff --git a/src/features/Home/Carousel/Carousel.tsx b/src/features/Home/Carousel/Carousel.tsx
index 0828d1d4..355ac8bd 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 e9855ba9..85711e43 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,16 +16,18 @@ 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 to='/docs/category/guides' className={styles.mainPageCard} data-testid='guide'>
             <img src='/img/guide.svg' className={styles.cardIcon} />
             <section>
               <Text type='subtitle-1' bold className={`${styles.dark} ${styles.header}`} as='h3'>
-                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' />
@@ -40,9 +43,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='h3'>
-                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' />
@@ -52,9 +57,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='h3'>
-                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' />
@@ -62,14 +69,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/GetStarted/__tests__/GetStarted.test.tsx b/src/features/Home/GetStarted/__tests__/GetStarted.test.tsx
index 7a791b19..4a836ba7 100644
--- a/src/features/Home/GetStarted/__tests__/GetStarted.test.tsx
+++ b/src/features/Home/GetStarted/__tests__/GetStarted.test.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import { cleanup, render, screen } from '@site/src/test-utils';
 import { GetStarted } from '../GetStarted';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { act, renderHook } from '@testing-library/react-hooks';
 
 describe('GetStarted', () => {
   beforeEach(() => {
@@ -13,19 +15,27 @@ describe('GetStarted', () => {
     const get_started = screen.getByTestId('started-header');
     expect(get_started).toBeInTheDocument();
   });
-  it('should render title properly', () => {
-    const started_header = screen.getByRole('heading', { level: 2, name: /Get started with/ });
-    expect(started_header).toHaveTextContent('Get started with our API in 3 simple steps:');
-  });
-  it('should navigate to the correct links on click', () => {
+
+  it('should navigate to the correct links on click when language is portuguese', () => {
+    const { result } = renderHook(() => useDocusaurusContext());
+
+    let local: string;
+    act(() => {
+      local = result.current.i18n.currentLocale;
+    });
+    const lang = local === 'en' ? '' : `/${local}`;
+
     expect(screen.getByTestId('signUp').closest('a')).toHaveAttribute(
       'href',
       'https://deriv.com/signup/',
     );
-    expect(screen.getByTestId('register').closest('a')).toHaveAttribute('href', '/dashboard');
+    expect(screen.getByTestId('register').closest('a')).toHaveAttribute(
+      'href',
+      `${lang}/dashboard`,
+    );
     expect(screen.getByTestId('guide').closest('a')).toHaveAttribute(
       'href',
-      '/docs/category/guides',
+      `${lang}/docs/category/guides`,
     );
   });
 });
diff --git a/src/features/Home/HeroHeader/HeroHeader.tsx b/src/features/Home/HeroHeader/HeroHeader.tsx
index 470ae052..74c246a6 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='hero' as={'h1'} bold className={styles.heading} aria-level={2}>
-          Deriv API
+          <Translate>Deriv API</Translate>
         </Text>
         <Text
           type='subtitle-1'
@@ -17,12 +18,13 @@ export const HeroHeader = () => {
           className={styles.SubHeading}
           data-testid='hero-header-subtitle'
         >
-          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}>
-            Quick Start
+            <Translate>Quick Start</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 f0ebb115..926ffa23 100644
--- a/src/features/dashboard/components/ApiTokenCard/index.tsx
+++ b/src/features/dashboard/components/ApiTokenCard/index.tsx
@@ -5,12 +5,13 @@ 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>;
   name: TApiTokenFormItemsNames;
   label: string;
-  description: string;
+  description: React.ReactNode;
 }
 
 const ApiTokenCard = ({ register, name, label, description, ...rest }: IApiTokenCardPros) => {
@@ -31,7 +32,12 @@ 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>
+                <Translate>Note:</Translate>
+              </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 c456a55c..00ae199e 100644
--- a/src/features/dashboard/components/ApiTokenForm/api-token.form.tsx
+++ b/src/features/dashboard/components/ApiTokenForm/api-token.form.tsx
@@ -10,7 +10,7 @@ import * as yup from 'yup';
 import styles from './api-token.form.module.scss';
 import TokenNameRestrictions from '../TokenNameRestrictions/TokenNameRestrictions';
 import CreateTokenField from './CreateTokenField';
-import useApiToken from '@site/src/hooks/useApiToken';
+import Translate, { translate } from '@docusaurus/Translate';
 
 const schema = yup
   .object({
@@ -43,38 +43,56 @@ export type TApiTokenFormItemsNames = keyof TApiTokenForm;
 
 type TScope = {
   name: TApiTokenFormItemsNames;
-  description: string;
+  description: React.ReactNode;
   label: string;
 };
 
 const scopes: TScope[] = [
   {
     name: 'read',
-    description:
-      'This scope will allow third-party apps to view your account activity, settings, limits, balance sheets, trade purchase history, and more.',
+    description: (
+      <Translate>
+        This scope will allow third-party apps to view your account activity, settings, limits,
+        balance sheets, trade purchase history, and more.
+      </Translate>
+    ),
     label: 'Read',
   },
   {
     name: 'trade',
-    description:
-      'This scope will allow third-party apps to buy and sell contracts for you, renew your expired purchases, and top up your demo accounts.',
+    description: (
+      <Translate>
+        This scope will allow third-party apps to buy and sell contracts for you, renew your expired
+        purchases, and top up your demo accounts.
+      </Translate>
+    ),
     label: 'Trade',
   },
   {
     name: 'payments',
-    description:
-      'This scope will allow third-party apps to withdraw to payment agents and make inter-account transfers for you.',
+    description: (
+      <Translate>
+        This scope will allow third-party apps to withdraw to payment agents and make inter-account
+        transfers for you.
+      </Translate>
+    ),
     label: 'Payments',
   },
   {
     name: 'trading_information',
-    description: 'This scope will allow third-party apps to view your trading history.',
+    description: (
+      <Translate>This scope will allow third-party apps to view your trading history.</Translate>
+    ),
     label: 'Trading Information',
   },
   {
     name: 'admin',
-    description:
-      'This scope will allow third-party apps to open accounts for you, manage your settings and token usage, and more.',
+    description: (
+      <Translate>
+        This scope will allow third-party apps to open accounts for you, manage your settings and
+        token usage, and more.
+      </Translate>
+    ),
     label: 'Admin',
   },
 ];
@@ -134,7 +152,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>
@@ -166,7 +184,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/ApiTokenTable/CopyTokenDialog/index.tsx b/src/features/dashboard/components/ApiTokenTable/CopyTokenDialog/index.tsx
index 3bf3aba0..642e252d 100644
--- a/src/features/dashboard/components/ApiTokenTable/CopyTokenDialog/index.tsx
+++ b/src/features/dashboard/components/ApiTokenTable/CopyTokenDialog/index.tsx
@@ -2,6 +2,7 @@ import React, { useMemo, useCallback } from 'react';
 import { Modal } from '@deriv/ui';
 import { TModalActionButton } from '@deriv/ui/dist/types/src/components/core/modal/types';
 import styles from './CopyTokenDialog.module.scss';
+import Translate from '@docusaurus/Translate';
 
 type TCopyTokenDialog = {
   setToggleModal: React.Dispatch<React.SetStateAction<boolean>>;
@@ -48,14 +49,22 @@ const CopyTokenDialog = ({ setToggleModal, copyToken }: TCopyTokenDialog) => {
           <Modal.Overlay />
           <Modal.PageContent has_close_button action_buttons={actionButtons}>
             <div className={styles.content}>
-              Be careful who you share this token with. Anyone with this token can perform the
-              following actions on your account behalf
+              <Translate>
+                Be careful who you share this token with. Anyone with this token can perform the
+                following actions on your account behalf
+              </Translate>
               <ul>
-                <li>Add accounts</li>
+                <li>
+                  <Translate>Add accounts</Translate>
+                </li>
 
-                <li>Create or delete API tokens for trading and withdrawals</li>
+                <li>
+                  <Translate>Create or delete API tokens for trading and withdrawals</Translate>
+                </li>
 
-                <li>Modify account settings</li>
+                <li>
+                  <Translate>Modify account settings</Translate>
+                </li>
               </ul>
             </div>
           </Modal.PageContent>
diff --git a/src/features/dashboard/components/AppForm/index.tsx b/src/features/dashboard/components/AppForm/index.tsx
index 3ea24754..e64c0528 100644
--- a/src/features/dashboard/components/AppForm/index.tsx
+++ b/src/features/dashboard/components/AppForm/index.tsx
@@ -1,7 +1,6 @@
-import React, { Dispatch, ReactNode, SetStateAction, useEffect, useMemo, useState } from 'react';
+import React, { Dispatch, ReactNode, SetStateAction, useEffect, useState } from 'react';
 import { Button, Text } from '@deriv/ui';
 import { useForm } from 'react-hook-form';
-import { isNotDemoCurrency } from '@site/src/utils';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { appRegisterSchema, appEditSchema, IRegisterAppForm } from '../../types';
 import useApiToken from '@site/src/hooks/useApiToken';
@@ -17,6 +16,7 @@ import clsx from 'clsx';
 import useAppManager from '@site/src/hooks/useAppManager';
 import useWS from '@site/src/hooks/useWs';
 import RestrictionsAppname from '../RestrictionsAppname';
+import Translate from '@docusaurus/Translate';
 
 type TAppFormProps = {
   initialValues?: Partial<IRegisterAppForm>;
@@ -93,7 +93,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>
@@ -125,10 +127,12 @@ const AppForm = ({
           <div>
             <div className={styles.apiTokenWrapper}>
               <div className={styles.formHeaderContainer}>
-                <h4>App information</h4>
+                <h4>
+                  <Translate>App information</Translate>
+                </h4>
                 {!is_update_mode && (
                   <Text as='p' type='paragraph-1' className={styles.wrapperHeading}>
-                    Select your api token ( it should have admin scope )
+                    <Translate>Select your api token ( it should have admin scope )</Translate>
                   </Text>
                 )}
               </div>
@@ -175,7 +179,9 @@ const AppForm = ({
                   }}
                 >
                   <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'>
@@ -183,7 +189,7 @@ const AppForm = ({
                   </Text>
                 ) : !is_update_mode && app_name_exists ? (
                   <Text as='span' type='paragraph-1' className='error-message'>
-                    That name is taken. Choose another.
+                    <Translate>That name is taken. Choose another.</Translate>
                   </Text>
                 ) : (
                   display_restrictions && <RestrictionsAppname />
@@ -191,16 +197,22 @@ const AppForm = ({
               </div>
             </div>
             <div className={styles.formHeaderContainer}>
-              <h4>Markup</h4>
+              <h4>
+                <Translate>Markup</Translate>
+              </h4>
               <div className={styles.markup}>
                 <Text as='span' type='paragraph-1' className={styles.formsubHeading}>
-                  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>
                 </Text>
                 <br />
                 <Text as='span' type='paragraph-1' className={styles.formsubHeading}>
                   <p>
-                    <b>Note: Markup is only available for real accounts.</b>
+                    <b>
+                      <Translate>Note: Markup is only available for real accounts.</Translate>
+                    </b>
                   </p>
                 </Text>
               </div>
@@ -217,14 +229,18 @@ const AppForm = ({
                     defaultValue={0}
                     placeholder=' '
                   />
-                  <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-2'
                   className={`${styles.helperText} ${styles.formsubHeading}`}
                 >
-                  Enter 0 if you don&lsquo;t want to earn a markup. Max markup: 3%
+                  <Translate>
+                    Enter 0 if you don&lsquo;t want to earn a markup. Max markup: 3%
+                  </Translate>
                 </Text>
                 {errors && errors.app_markup_percentage && (
                   <Text as='span' type='paragraph-1' className='error-message'>
@@ -234,11 +250,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' className={styles.formsubHeading}>
-                  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>
@@ -250,15 +270,19 @@ const AppForm = ({
                   type='text'
                   placeholder=' '
                 />
-                <label htmlFor='app_redirect_uri'>Authorisation URL (optional)</label>
+                <label htmlFor='app_redirect_uri'>
+                  <Translate>Authorisation URL (optional)</Translate>
+                </label>
               </div>
               <Text
                 as='p'
                 type='paragraph-2'
                 className={`${styles.helperText} ${styles.formsubHeading}`}
               >
-                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>
               </Text>
               {errors && errors?.redirect_uri && (
                 <span className='error-message'>{errors.redirect_uri?.message}</span>
@@ -276,7 +300,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>
@@ -286,9 +312,13 @@ 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 className={styles.subHeading}>
-                    <span>Select the scope for your app:</span>
+                    <span>
+                      <Translate>Select the scope for your app:</Translate>
+                    </span>
                   </div>
                 </div>
               </div>
@@ -296,15 +326,25 @@ const AppForm = ({
                 <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>
@@ -315,8 +355,13 @@ 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>
@@ -327,16 +372,25 @@ const AppForm = ({
                     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>
@@ -344,15 +398,19 @@ const AppForm = ({
             </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..7e7eb407 100644
--- a/src/features/dashboard/components/AppsTable/app-actions.cell.tsx
+++ b/src/features/dashboard/components/AppsTable/app-actions.cell.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { CellProps } from 'react-table';
 import { TAppColumn } from '.';
 import styles from './cells.module.scss';
+import Translate from '@docusaurus/Translate';
 
 interface IAppActionsCellProps extends React.PropsWithChildren<CellProps<TAppColumn, string>> {
   openDeleteDialog: () => void;
@@ -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/RegisterAppDialogError/index.tsx b/src/features/dashboard/components/Dialogs/RegisterAppDialogError/index.tsx
index 19402a76..09de2216 100644
--- a/src/features/dashboard/components/Dialogs/RegisterAppDialogError/index.tsx
+++ b/src/features/dashboard/components/Dialogs/RegisterAppDialogError/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { TModalActionButton } from '@deriv/ui/dist/types/src/components/core/modal/types';
 import { Modal } from '@deriv/ui';
+import { translate } from '@docusaurus/Translate';
 
 export type TError = {
   error?: {
@@ -28,7 +29,9 @@ export const RegisterAppDialogError = ({ error, onClose }: TRegisterAppDialogErr
 
   const catchError = () => {
     if (error && error.error?.code === 'InvalidToken') {
-      return 'Enter your API token (with the Admin scope) to register your app.';
+      return translate({
+        message: 'Enter your API token (with the Admin scope) to register your app.',
+      });
     } else if (error) {
       return error.error?.message;
     }
diff --git a/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/index.tsx b/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/index.tsx
index 1c84353e..b9ac93be 100644
--- a/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/index.tsx
+++ b/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/index.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Button, Modal } from '@deriv/ui';
 import useAppManager from '@site/src/hooks/useAppManager';
 import styles from './register-app-dialog-success.module.scss';
+import Translate from '@docusaurus/Translate';
 
 interface IRegisterAppDialogSuccessProps {
   onClose: () => void;
@@ -25,12 +26,16 @@ export const RegisterAppDialogSuccess = ({ onClose }: IRegisterAppDialogSuccessP
             <div className={styles.modal}>
               <img src='/img/register_success.svg' />
               <h4 className={styles.title}>Success!</h4>
-              <p>You have successfully registered your application.</p>
-              <p>You can now start using Deriv API</p>
+              <p>
+                <Translate>You have successfully registered your application.</Translate>
+              </p>
+              <p>
+                <Translate>You can now start using Deriv API</Translate>
+              </p>
             </div>
             <div className={styles.buttonWrapper}>
               <Button color='secondary' onClick={onClose} className={styles.btn}>
-                Got it
+                <Translate>Got it</Translate>
               </Button>
             </div>
           </Modal.PageContent>
diff --git a/src/features/dashboard/components/Dialogs/UpdateAppDialog/index.tsx b/src/features/dashboard/components/Dialogs/UpdateAppDialog/index.tsx
index 7f8e8297..12e52d40 100644
--- a/src/features/dashboard/components/Dialogs/UpdateAppDialog/index.tsx
+++ b/src/features/dashboard/components/Dialogs/UpdateAppDialog/index.tsx
@@ -8,6 +8,7 @@ import { ApplicationObject } from '@deriv/api-types';
 import { RegisterAppDialogError } from '../RegisterAppDialogError';
 import { scopesArrayToObject, scopesObjectToArray } from '@site/src/utils';
 import styles from './update-app-dialog.module.scss';
+import Translate from '@docusaurus/Translate';
 
 interface IUpdateAppDialog {
   app: ApplicationObject;
@@ -78,7 +79,7 @@ const UpdateAppDialog = ({ app, onClose }: IUpdateAppDialog) => {
           borderRadius: '0.935rem',
         }}
       >
-        Cancel
+        <Translate>Cancel</Translate>
       </Button>
     );
   };
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/components/Tabs/index.tsx b/src/features/dashboard/components/Tabs/index.tsx
index cae6d2b0..fb765cad 100644
--- a/src/features/dashboard/components/Tabs/index.tsx
+++ b/src/features/dashboard/components/Tabs/index.tsx
@@ -7,11 +7,12 @@ import AppManagement from '../../manage-apps';
 import ApiToken from '../../manage-tokens';
 import AppRegistration from '../../register-app';
 import styles from './tabs.module.scss';
+import Translate from '@docusaurus/Translate';
 
 type TTab = {
   id: number;
   value: TDashboardTab;
-  label: string;
+  label: React.ReactNode;
   content: () => JSX.Element;
 };
 
@@ -19,19 +20,19 @@ const tabs: TTab[] = [
   {
     id: 0,
     value: 'MANAGE_TOKENS',
-    label: 'Manage tokens',
+    label: <Translate>Manage tokens</Translate>,
     content: ApiToken,
   },
   {
     id: 1,
     value: 'REGISTER_APP',
-    label: 'Register application',
+    label: <Translate>Register application</Translate>,
     content: AppRegistration,
   },
   {
     id: 2,
     value: 'MANAGE_APPS',
-    label: 'Manage applications',
+    label: <Translate>Manage applications</Translate>,
     content: AppManagement,
   },
 ];
@@ -43,10 +44,10 @@ const DashboardTabs = () => {
     <div className={styles.app_dashboard} id={'app-manager-dashboard'}>
       <div>
         <Text as='h2' type='heading-3' align='center'>
-          Your apps
+          <Translate>Your apps</Translate>
         </Text>
         <Text as='p' type='subtitle-1' align='center'>
-          Register your app, get an app ID, and start using the Deriv API
+          <Translate>Register your app, get an app ID, and start using the Deriv API</Translate>
         </Text>
       </div>
       <Tabs.Root className={styles.tabs_root} value={currentTab} onValueChange={updateCurrentTab}>
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/styles/index.scss b/src/styles/index.scss
index b5b8ec45..2e662d8e 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -237,7 +237,7 @@ div[class*='sidebarViewport'] {
     .search-overlay {
       display: none;
     }
-    &.search-closed + div[class*='searchBox'] {
+    &.search-closed ~ div[class*='searchBox'] {
       display: none;
     }
     &.search-open {
@@ -444,3 +444,62 @@ main[class*='docMainContainer'] .container {
     width: rem(1.2);
   }
 }
+
+.dropdown > .navbar__link:after {
+  display: none;
+}
+
+.dropdown__menu {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: rem(1.6);
+  padding: rem(1.6) rem(1.6);
+  background-color: var(--colors-greyLight100);
+  border-radius: rem(0.8);
+  box-shadow: 0 0 rem(2) rgba(0, 0, 0, 0.05), 0 rem(1.6) rem(1.6) rgba(0, 0, 0, 0.05);
+  visibility: visible;
+}
+
+.navbar__items--right .dropdown__link {
+  font-weight: normal;
+  font-size: rem(1.6);
+  line-height: rem(2.4);
+  @media (max-width: 1201px) {
+    font-size: rem(1.4);
+  }
+}
+
+.navbar__items--right a {
+  @media (max-width: 1201px) {
+    font-size: rem(1.4);
+  }
+}
+
+.dropdown {
+  height: 100%;
+  padding-top: rem(2.5);
+  @media screen {
+    display: grid;
+  }
+}
+
+.dropdown:hover {
+  .navbar__link {
+    color: var(--colors-coral500);
+  }
+}
+
+.dropdown__link--active {
+  color: var(--colors-coral500);
+  background-color: var(--colors-greyLight100);
+}
+
+.dropdown__link--active:hover {
+  color: var(--colors-coral500);
+}
+
+// removes language switcher from sidebar
+// docusaurus puts all navbaritems into sidebar in responsive design by default
+.menu__list-item:last-child {
+  display: none;
+}
diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx
new file mode 100644
index 00000000..4e83e4c9
--- /dev/null
+++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { useAlternatePageUtils } from '@docusaurus/theme-common/internal';
+import { useLocation } from '@docusaurus/router';
+import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
+import type { LinkLikeNavbarItemProps } from '@theme/NavbarItem';
+import type { Props } from '@theme/NavbarItem/LocaleDropdownNavbarItem';
+import classnames from 'classnames';
+
+export default function LocaleDropdownNavbarItem({
+  dropdownItemsBefore,
+  dropdownItemsAfter,
+  ...props
+}: Props): JSX.Element {
+  const {
+    i18n: { currentLocale, locales, localeConfigs },
+  } = useDocusaurusContext();
+  const alternatePageUtils = useAlternatePageUtils();
+  const { search, hash } = useLocation();
+
+  const localeItems = locales.map((locale): LinkLikeNavbarItemProps => {
+    const baseTo = `pathname://${alternatePageUtils.createUrl({
+      locale,
+      fullyQualified: false,
+    })}`;
+    // preserve ?search#hash suffix on locale switches
+    const to = `${baseTo}${search}${hash}`;
+    return {
+      label: localeConfigs[locale].label,
+      lang: localeConfigs[locale].htmlLang,
+      to,
+      target: '_self',
+      autoAddBaseUrl: false,
+      className: classnames({ 'dropdown__link--active': locale === currentLocale }),
+    };
+  });
+
+  const getShortNames = (locale) => {
+    switch (locale) {
+      case 'en':
+        return 'EN';
+      case 'es':
+        return 'ES';
+      case 'zh-Hans':
+        return '简体';
+      case 'zh-Hant':
+        return '繁體';
+      case 'fr':
+        return 'FR';
+      case 'de':
+        return 'DE';
+      case 'vi':
+        return 'VI';
+      case 'th':
+        return 'TH';
+      default:
+        return 'EN';
+    }
+  };
+
+  const items = [...dropdownItemsBefore, ...localeItems, ...dropdownItemsAfter];
+  const dropdownLabel = getShortNames(currentLocale);
+
+  return <DropdownNavbarItem {...props} label={<>{dropdownLabel}</>} items={items} />;
+}