diff --git a/docusaurus.config.js b/docusaurus.config.js
index dd4ecdf0..cb8935bd 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -24,7 +24,12 @@ const config = {
   // to replace "en" with "zh-Hans".
   i18n: {
     defaultLocale: 'en',
-    locales: ['en'],
+    locales: ['en', 'es', 'zh-Hans', 'zh-Hant', 'fr', 'de', 'vi', 'th'],
+    localeConfigs: {
+      th: {
+        label: 'Thai',
+      },
+    },
   },
 
   plugins: [
@@ -96,6 +101,10 @@ const config = {
             type: 'custom-user-navbar-item',
             position: 'right',
           },
+          {
+            type: 'localeDropdown',
+            position: 'right',
+          },
         ],
       },
       prism: {
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/styles/index.scss b/src/styles/index.scss
index ae6fc8a5..c2cd1542 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -266,3 +266,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} />;
+}