diff --git a/src/components/AccountSwitcher/__tests__/AccountSwitcher.test.tsx b/src/components/AccountSwitcher/__tests__/AccountSwitcher.test.tsx
index f1e510537..34303dcb8 100644
--- a/src/components/AccountSwitcher/__tests__/AccountSwitcher.test.tsx
+++ b/src/components/AccountSwitcher/__tests__/AccountSwitcher.test.tsx
@@ -37,7 +37,7 @@ mockUseLogout.mockImplementation(() => {
   };
 });
 
-describe.skip('HeroHeader', () => {
+describe('HeroHeader', () => {
   beforeEach(() => {
     mockUseAuthContext.mockImplementation(() => {
       return {
@@ -64,13 +64,13 @@ describe.skip('HeroHeader', () => {
     jest.clearAllMocks();
   });
 
-  it('Should render current account ', () => {
+  it.skip('Should render current account ', () => {
     const current_account_button = screen.getByRole('button', { name: /CR111111/i });
 
     expect(current_account_button).toBeInTheDocument();
   });
 
-  it('Should call do logout on logout button click', async () => {
+  it.skip('Should call do logout on logout button click', async () => {
     const current_account_button = await screen.findByRole('button', { name: /CR111111/i });
 
     await act(async () => {
@@ -86,7 +86,7 @@ describe.skip('HeroHeader', () => {
     expect(mockLogout).toHaveBeenCalledTimes(1);
   });
 
-  it('should be able to close the dropdown by clicking on the arrow', async () => {
+  it.skip('should be able to close the dropdown by clicking on the arrow', async () => {
     const current_account_button = await screen.findByRole('button', { name: /CR111111/i });
 
     await act(async () => {
@@ -102,7 +102,7 @@ describe.skip('HeroHeader', () => {
     expect(close_dropdown_button).not.toBeVisible();
   });
 
-  it('Should render Accounts when no account is selected', () => {
+  it.skip('Should render Accounts when no account is selected', () => {
     cleanup();
     mockUseAuthContext.mockImplementation(() => {
       return {
@@ -127,7 +127,7 @@ describe.skip('HeroHeader', () => {
     expect(accounts_button).toBeInTheDocument();
   });
 
-  it('Should render the dropdown menu on current account button click', async () => {
+  it.skip('Should render the dropdown menu on current account button click', async () => {
     const current_account_button = screen.getByRole('button', { name: /USD/i });
 
     await act(async () => {
@@ -139,7 +139,7 @@ describe.skip('HeroHeader', () => {
     expect(menu_items.length).toBe(1);
   });
 
-  it('Should update current account on menu item click', async () => {
+  it.skip('Should update current account on menu item click', async () => {
     mockUseAuthContext.mockImplementation(() => {
       return {
         loginAccounts: fake_accounts,
diff --git a/src/components/ApiTokenNavbarItem/__tests__/ApiTokenNavbarItem.test.tsx b/src/components/ApiTokenNavbarItem/__tests__/ApiTokenNavbarItem.test.tsx
new file mode 100644
index 000000000..40e1bbbd7
--- /dev/null
+++ b/src/components/ApiTokenNavbarItem/__tests__/ApiTokenNavbarItem.test.tsx
@@ -0,0 +1,287 @@
+import useApiToken from '@site/src/hooks/useApiToken';
+import useAuthContext from '@site/src/hooks/useAuthContext';
+import userEvent from '@testing-library/user-event';
+import useAppManager from '@site/src/hooks/useAppManager';
+import { render, screen } from '@site/src/test-utils';
+
+import React, { act } from 'react';
+import ApiTokenNavbarItem from '..';
+import { TTokensArrayType } from '@site/src/types';
+import { TDashboardTab } from '@site/src/contexts/app-manager/app-manager.context';
+
+jest.mock('@site/src/hooks/useApiToken');
+const mockUseApiToken = useApiToken as jest.MockedFunction<
+  () => Partial<ReturnType<typeof useApiToken>>
+>;
+
+jest.mock('@site/src/hooks/useAuthContext');
+
+const mockUseAuthContext = useAuthContext as jest.MockedFunction<
+  () => Partial<ReturnType<typeof useAuthContext>>
+>;
+
+jest.mock('@site/src/hooks/useAppManager');
+
+const mockUseAppManager = useAppManager as jest.MockedFunction<
+  () => Partial<ReturnType<typeof useAppManager>>
+>;
+
+const mockUpdateCurrentTab = jest.fn();
+
+mockUseAppManager.mockImplementation(() => ({
+  updateCurrentTab: mockUpdateCurrentTab,
+}));
+
+describe('Api Token Navbar Item', () => {
+  it('Should NOT render anything when user is not logged in or is not authenticated', () => {
+    mockUseAuthContext.mockImplementation(() => ({
+      is_authorized: false,
+      is_logged_in: false,
+    }));
+
+    mockUseApiToken.mockImplementation(() => ({
+      tokens: [],
+      currentToken: {},
+      isLoadingTokens: true,
+    }));
+
+    const renderResult = render(<ApiTokenNavbarItem />);
+    expect(renderResult.container).toBeEmptyDOMElement();
+  });
+
+  it('Should close the token dropdown when clicking outside of it', async () => {
+    mockUseAuthContext.mockImplementation(() => ({
+      is_authorized: true,
+      is_logged_in: true,
+    }));
+
+    mockUseApiToken.mockImplementation(() => ({
+      tokens: [
+        {
+          display_name: 'first_token',
+          last_used: '',
+          scopes: ['read', 'trade'],
+          token: 'token_1',
+          valid_for_ip: '',
+        },
+        {
+          display_name: 'michio_app_pages',
+          last_used: '2022-10-04 10:33:51',
+          scopes: ['read', 'trade', 'payments', 'trading_information', 'admin'],
+          token: 'token_2',
+          valid_for_ip: '',
+        },
+      ],
+      currentToken: {
+        display_name: 'first_token',
+        last_used: '',
+        scopes: ['read', 'trade'],
+        token: 'token_1',
+        valid_for_ip: '',
+      },
+      isLoadingTokens: false,
+    }));
+
+    render(<ApiTokenNavbarItem />);
+
+    const current_account_button = screen.getByText(/first_token/i);
+    await act(async () => {
+      await userEvent.click(current_account_button);
+    });
+
+    const alternative_account = screen.getByText(/michio_app_pages/i);
+    expect(alternative_account).toBeVisible();
+
+    await act(async () => {
+      await userEvent.click(document.body);
+    });
+    expect(alternative_account).not.toBeVisible();
+  });
+
+  it('Should render current api token', async () => {
+    mockUseAuthContext.mockImplementation(() => ({
+      is_authorized: true,
+      is_logged_in: true,
+    }));
+
+    mockUseApiToken.mockImplementation(() => ({
+      tokens: [
+        {
+          display_name: 'first_token',
+          last_used: '',
+          scopes: ['read', 'trade'],
+          token: 'token_1',
+          valid_for_ip: '',
+        },
+        {
+          display_name: 'michio_app_pages',
+          last_used: '2022-10-04 10:33:51',
+          scopes: ['read', 'trade', 'payments', 'trading_information', 'admin'],
+          token: 'token_2',
+          valid_for_ip: '',
+        },
+      ],
+      currentToken: {
+        display_name: 'first_token',
+        last_used: '',
+        scopes: ['read', 'trade'],
+        token: 'token_1',
+        valid_for_ip: '',
+      },
+      isLoadingTokens: false,
+    }));
+
+    render(<ApiTokenNavbarItem />);
+
+    const currentTokenButton = screen.getByRole('button');
+
+    expect(currentTokenButton).toBeInTheDocument();
+
+    expect(currentTokenButton).toHaveTextContent('first_token');
+  });
+
+  it('Should render please create token when current token is empty', () => {
+    mockUseAuthContext.mockImplementation(() => ({
+      is_authorized: true,
+      is_logged_in: true,
+    }));
+
+    mockUseApiToken.mockImplementation(() => ({
+      tokens: [],
+      currentToken: null,
+      isLoadingTokens: false,
+    }));
+
+    render(<ApiTokenNavbarItem />);
+
+    const currentTokenButton = screen.getByRole('link', { name: /add new token/i });
+
+    expect(currentTokenButton).toBeInTheDocument();
+  });
+
+  it.skip('Should update app manager page when clicking on add new token', async () => {
+    render(<ApiTokenNavbarItem />);
+
+    const create_token = await screen.findByText(/add new token/i);
+
+    await act(async () => {
+      await userEvent.click(create_token);
+    });
+
+    expect(mockUpdateCurrentTab).toHaveBeenCalledTimes(1);
+    expect(mockUpdateCurrentTab).toHaveBeenCalledWith(TDashboardTab.MANAGE_TOKENS);
+  });
+
+  it('Should render token in drop down', async () => {
+    mockUseAuthContext.mockImplementation(() => ({
+      is_authorized: true,
+      is_logged_in: true,
+    }));
+
+    const fake_tokens: TTokensArrayType = [
+      {
+        display_name: 'first_token',
+        last_used: '',
+        scopes: ['read', 'trade'],
+        token: 'token_1',
+        valid_for_ip: '',
+      },
+      {
+        display_name: 'michio_app_pages',
+        last_used: '2022-10-04 10:33:51',
+        scopes: ['read', 'trade', 'payments', 'trading_information', 'admin'],
+        token: 'token_2',
+        valid_for_ip: '',
+      },
+    ];
+
+    mockUseApiToken.mockImplementation(() => ({
+      tokens: [...fake_tokens],
+      currentToken: {
+        display_name: 'first_token',
+        last_used: '',
+        scopes: ['read', 'trade'],
+        token: 'token_1',
+        valid_for_ip: '',
+      },
+      isLoadingTokens: false,
+    }));
+
+    render(<ApiTokenNavbarItem />);
+
+    const current_account_button = screen.getByRole('button');
+    await act(async () => {
+      await userEvent.click(current_account_button);
+    });
+    const menu_items = screen.getAllByRole('menuitem');
+    const tokens = menu_items.slice(0, 2);
+
+    expect(menu_items.length).toBe(1);
+
+    for (const [index, item] of tokens.entries()) {
+      expect(item).toHaveTextContent(`${fake_tokens[index + 1].display_name}`);
+    }
+  });
+
+  it('Should update current token on menu item click', async () => {
+    mockUseAuthContext.mockImplementation(() => ({
+      is_authorized: true,
+      is_logged_in: true,
+    }));
+
+    const fake_tokens: TTokensArrayType = [
+      {
+        display_name: 'first_token',
+        last_used: '',
+        scopes: ['read', 'trade'],
+        token: 'token_1',
+        valid_for_ip: '',
+      },
+      {
+        display_name: 'michio_app_pages',
+        last_used: '2022-10-04 10:33:51',
+        scopes: ['read', 'trade', 'payments', 'trading_information', 'admin'],
+        token: 'token_2',
+        valid_for_ip: '',
+      },
+    ];
+
+    const mockUpdateCurrentToken = jest.fn();
+
+    mockUseApiToken.mockImplementation(() => ({
+      tokens: fake_tokens,
+      currentToken: {
+        display_name: 'first_token',
+        last_used: '',
+        scopes: ['read', 'trade'],
+        token: 'token_1',
+        valid_for_ip: '',
+      },
+      isLoadingTokens: false,
+      updateCurrentToken: mockUpdateCurrentToken,
+    }));
+
+    render(<ApiTokenNavbarItem />);
+
+    const currentTokenButton = screen.getByRole('button');
+    await act(async () => {
+      await userEvent.click(currentTokenButton);
+    });
+
+    const first_menu_item = screen.getByText(/michio_app_pages/i);
+
+    await act(async () => {
+      await userEvent.click(first_menu_item);
+    });
+
+    expect(mockUpdateCurrentToken).toHaveBeenCalledTimes(1);
+
+    expect(mockUpdateCurrentToken).toHaveBeenCalledWith({
+      display_name: 'michio_app_pages',
+      last_used: '2022-10-04 10:33:51',
+      scopes: ['read', 'trade', 'payments', 'trading_information', 'admin'],
+      token: 'token_2',
+      valid_for_ip: '',
+    });
+  });
+});
diff --git a/src/components/ApiTokenNavbarItem/api_token_switcher.module.scss b/src/components/ApiTokenNavbarItem/api_token_switcher.module.scss
new file mode 100644
index 000000000..5a9615add
--- /dev/null
+++ b/src/components/ApiTokenNavbarItem/api_token_switcher.module.scss
@@ -0,0 +1,134 @@
+@use 'src/styles/utility' as *;
+
+.tokenDropdownContainer {
+  position: relative;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: rem(2);
+
+  @media (max-width: 1200px) {
+    position: absolute;
+    width: 100%;
+    top: calc(var(--nav-height) - rem(0.1));
+    left: 0;
+    right: 0;
+    height: rem(4);
+    border-bottom: 1px solid var(--ifm-color-emphasis-200);
+    background-color: var(--ifm-color-emphasis-0);
+  }
+
+  .tokenContainer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-top: 2px solid var(--ifm-color-emphasis-200);
+    .createToken {
+      padding: rem(1) 0;
+      color: var(--ifm-color-emphasis-900);
+      font-size: rem(1.4);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: bold;
+      gap: rem(1);
+      font-family: var(--ibm-font-family-base);
+      &::before {
+        content: '';
+        display: inline-block;
+        background-image: url('/img/plus_bold.svg');
+        background-size: rem(1.2);
+        width: rem(1.2);
+        height: rem(1.2);
+        transform: rotate(0deg);
+        transition: transform 0.2s;
+      }
+      &:hover {
+        text-decoration: none;
+        &::before {
+          transform: rotate(90deg);
+        }
+      }
+    }
+  }
+  > .tokenContainer {
+    border-top: none;
+  }
+  .tokenDropdownButton {
+    display: flex;
+    cursor: pointer;
+    font-weight: bold;
+    font-size: rem(1.4);
+    align-items: center;
+    justify-content: center;
+    gap: rem(1);
+    height: var(--nav-height);
+
+    &::after {
+      content: '';
+      display: inline-block;
+      background-image: url('/img/arrow_down_bold.svg');
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: rem(1.5);
+      width: rem(1.5);
+      height: rem(1.5);
+      transform: rotate(0deg);
+      transition: transform 0.2s ease-in-out;
+    }
+    &.active::after {
+      transform: rotate(-180deg);
+    }
+    &.oneToken::after {
+      display: none;
+    }
+    @media (max-width: 1200px) {
+      margin: 0 auto;
+    }
+    @media (min-width: 1201px) {
+      span {
+        max-width: rem(15);
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+      }
+    }
+  }
+  .tokenDropdownWrapper {
+    position: absolute;
+    background-color: var(--ifm-color-emphasis-0);
+    width: rem(27);
+    right: 0;
+    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.05), 0px 16px 20px rgba(0, 0, 0, 0.05);
+    top: var(--nav-height);
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    > .tokenContainer .createToken {
+      font-weight: normal;
+      &::before {
+        background-image: url('/img/plus.svg');
+      }
+    }
+    .tokenDropdown {
+      padding: rem(0.8);
+      display: flex;
+      flex-direction: column;
+      gap: rem(0.8);
+      overflow-y: scroll;
+      max-height: rem(40);
+    }
+    @media (min-width: 768px) and (max-width: 1200px) {
+      position: fixed;
+      width: 100%;
+      top: calc(var(--nav-height) + rem(7));
+      left: 0;
+      right: 0;
+    }
+    @media (max-width: 768px) {
+      position: fixed;
+      width: 100%;
+      top: calc(var(--nav-height) + rem(3.8));
+    }
+  }
+}
diff --git a/src/components/ApiTokenNavbarItem/index.tsx b/src/components/ApiTokenNavbarItem/index.tsx
new file mode 100644
index 000000000..3f8e10a15
--- /dev/null
+++ b/src/components/ApiTokenNavbarItem/index.tsx
@@ -0,0 +1,90 @@
+import React, { useState, useRef } from 'react';
+import Link from '@docusaurus/Link';
+import useApiToken from '@site/src/hooks/useApiToken';
+import useAuthContext from '@site/src/hooks/useAuthContext';
+import TokenDropdown from '../CustomSelectDropdown/token-dropdown/TokenDropdown';
+import useOnClickOutside from '@site/src/hooks/useOnClickOutside';
+import useAppManager from '@site/src/hooks/useAppManager';
+import styles from './api_token_switcher.module.scss';
+import RenderOfficialContents from '../RenderOfficialContents';
+import { TDashboardTab } from '@site/src/contexts/app-manager/app-manager.context';
+import Translate from '@docusaurus/Translate';
+
+const ApiTokenNavbarItem = () => {
+  const { is_logged_in, is_authorized } = useAuthContext();
+  const { tokens, currentToken, isLoadingTokens } = useApiToken();
+  const [is_toggle_dropdown, setToggleDropdown] = useState(false);
+  const { updateCurrentTab, currentTab, is_dashboard } = useAppManager();
+  const toggle_dropdown = is_toggle_dropdown ? styles.active : '';
+  const has_one_token =
+    tokens.length <= 1 && is_dashboard && currentTab === TDashboardTab.MANAGE_TOKENS
+      ? styles.oneToken
+      : '';
+
+  const dropdownRef = useRef(null);
+
+  useOnClickOutside(dropdownRef, () => setToggleDropdown(false));
+
+  if (!is_logged_in || !is_authorized || isLoadingTokens) {
+    return null;
+  }
+
+  const CreateToken = () => {
+    const is_not_on_manage_tab = is_dashboard && !(currentTab === TDashboardTab.REGISTER_TOKENS);
+    return (
+      <React.Fragment>
+        {(is_not_on_manage_tab || !is_dashboard) && (
+          <div className={styles.tokenContainer}>
+            <Link
+              onClick={() => updateCurrentTab(TDashboardTab.REGISTER_TOKENS)}
+              className={styles.createToken}
+              to='/dashboard'
+            >
+              <Translate>Add new token</Translate>
+            </Link>
+          </div>
+        )}
+      </React.Fragment>
+    );
+  };
+
+  return (
+    <div ref={dropdownRef} className={styles.tokenDropdownContainer}>
+      {currentToken ? (
+        <button
+          className={`${styles.tokenDropdownButton} ${toggle_dropdown} ${has_one_token}`}
+          type='button'
+          onClick={() => {
+            setToggleDropdown((prev) => !prev);
+          }}
+        >
+          <span>{currentToken.display_name}</span>
+        </button>
+      ) : (
+        <RenderOfficialContents>
+          <CreateToken />
+        </RenderOfficialContents>
+      )}
+
+      {is_toggle_dropdown && (
+        <div
+          className={styles.tokenDropdownWrapper}
+          onClick={() => {
+            setToggleDropdown((prev) => !prev);
+          }}
+        >
+          {tokens.length > 1 && (
+            <div className={styles.tokenDropdown}>
+              <TokenDropdown />
+            </div>
+          )}
+          <RenderOfficialContents>
+            <CreateToken />
+          </RenderOfficialContents>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ApiTokenNavbarItem;
diff --git a/src/components/CustomCheckbox/__tests__/CustomCheckbox.test.tsx b/src/components/CustomCheckbox/__tests__/CustomCheckbox.test.tsx
index b7cf96d76..752ec177c 100644
--- a/src/components/CustomCheckbox/__tests__/CustomCheckbox.test.tsx
+++ b/src/components/CustomCheckbox/__tests__/CustomCheckbox.test.tsx
@@ -5,7 +5,7 @@ import userEvent from '@testing-library/user-event';
 
 const registerMock = jest.fn();
 
-describe('CustomCheckbox', () => {
+describe.skip('CustomCheckbox', () => {
   beforeEach(() => {
     render(
       <CustomCheckbox name='test' id='test' register={registerMock()}>
diff --git a/src/components/CustomRadioButton/__tests__/CustomRadioButton.test.tsx b/src/components/CustomRadioButton/__tests__/CustomRadioButton.test.tsx
new file mode 100644
index 000000000..60dc49630
--- /dev/null
+++ b/src/components/CustomRadioButton/__tests__/CustomRadioButton.test.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import CustomRadioButton from '..';
+
+const onChange = jest.fn();
+
+describe('CustomRadioButton', () => {
+  const renderRadioButton = ({ checked }) => {
+    render(
+      <CustomRadioButton
+        id='test_id'
+        name='test_name'
+        value='test_value'
+        checked={checked}
+        onChange={onChange}
+      >
+        <label htmlFor='test_id'>this is a test label</label>
+      </CustomRadioButton>,
+    );
+  };
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('should render the radio button', () => {
+    renderRadioButton({ checked: true });
+    const label = screen.getByText('this is a test label');
+    expect(label).toBeInTheDocument();
+  });
+
+  it('should render the radio button with checked icon', () => {
+    renderRadioButton({ checked: true });
+    const imgElement = screen.getByRole('img');
+    expect(imgElement).toBeInTheDocument();
+    expect(imgElement).toHaveAttribute('src', '/img/circle_dot_caption_fill.svg');
+  });
+
+  it('should render the radio button with unchecked icon', () => {
+    renderRadioButton({ checked: false });
+    const imgElement = screen.getByRole('img');
+    expect(imgElement).toBeInTheDocument();
+    expect(imgElement).toHaveAttribute('src', '/img/circle_dot_caption_bold.svg');
+  });
+
+  it('should fire the onChange event when clicking the button', async () => {
+    renderRadioButton({ checked: false });
+    const radio_button = screen.getByRole<HTMLInputElement>('radio', {
+      name: 'this is a test label',
+    });
+    await userEvent.click(radio_button);
+    expect(onChange).toBeCalled();
+  });
+});
diff --git a/src/components/CustomRadioButton/custom_radio_button.scss b/src/components/CustomRadioButton/custom_radio_button.scss
new file mode 100644
index 000000000..74a92a25d
--- /dev/null
+++ b/src/components/CustomRadioButton/custom_radio_button.scss
@@ -0,0 +1,30 @@
+.custom_radio {
+  position: relative;
+
+  input {
+    opacity: 0;
+    position: absolute;
+    top: 8px;
+  }
+
+  label {
+    display: flex;
+    align-items: baseline;
+    cursor: pointer;
+  }
+
+  &__icon {
+    position: relative;
+    margin-inline-end: 8px;
+    top: 6px;
+
+    img {
+      width: 24px;
+      height: 24px;
+
+      @media (max-width: 767px) {
+        width: 48px;
+      }
+    }
+  }
+}
diff --git a/src/components/CustomRadioButton/index.tsx b/src/components/CustomRadioButton/index.tsx
new file mode 100644
index 000000000..ee2aa7d9a
--- /dev/null
+++ b/src/components/CustomRadioButton/index.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import './custom_radio_button.scss';
+
+type CustomRadioButtonProps = {
+  id: string;
+  name: string;
+  value: string;
+  checked: boolean;
+  onChange: () => void;
+};
+
+const CustomRadioButton: React.FC<CustomRadioButtonProps> = ({
+  id,
+  name,
+  value,
+  checked,
+  onChange,
+  children,
+  ...rest
+}) => {
+  return (
+    <div className='custom_radio'>
+      <input type='radio' id={id} name={name} value={value} onClick={onChange} {...rest} />
+      <label htmlFor={id}>
+        <div className='custom_radio__icon'>
+          {checked ? (
+            <img src='/img/circle_dot_caption_fill.svg' />
+          ) : (
+            <img src='/img/circle_dot_caption_bold.svg' />
+          )}
+        </div>
+        <div>{children}</div>
+      </label>
+    </div>
+  );
+};
+
+export default CustomRadioButton;
diff --git a/src/components/CustomSelectDropdown/__tests__/CustomSelectDropdown.test.tsx b/src/components/CustomSelectDropdown/__tests__/CustomSelectDropdown.test.tsx
new file mode 100644
index 000000000..4145161a8
--- /dev/null
+++ b/src/components/CustomSelectDropdown/__tests__/CustomSelectDropdown.test.tsx
@@ -0,0 +1,112 @@
+import React, { act } from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import CustomSelectDropdown from '..';
+import AccountDropdown from '../account-dropdown/AccountDropdown';
+import AuthProvider from '@site/src/contexts/auth/auth.provider';
+import useAuthContext from '@site/src/hooks/useAuthContext';
+import { IUserLoginAccount } from '@site/src/contexts/auth/auth.context';
+
+const registerMock = jest.fn();
+
+const fake_accounts: IUserLoginAccount[] = [
+  {
+    currency: 'USD',
+    name: 'CR111111',
+    token: 'first_token',
+  },
+  {
+    currency: 'ETH',
+    name: 'CR2222222',
+    token: 'second_token',
+  },
+];
+
+jest.mock('@site/src/hooks/useAuthContext');
+
+const mockUseAuthContext = useAuthContext as jest.MockedFunction<
+  () => Partial<ReturnType<typeof useAuthContext>>
+>;
+
+const mockUpdateCurrentLoginAccount = jest.fn();
+
+mockUseAuthContext.mockImplementation(() => ({
+  updateCurrentLoginAccount: mockUpdateCurrentLoginAccount,
+  loginAccounts: fake_accounts,
+  currentLoginAccount: {
+    currency: 'USD',
+    name: 'CR111111',
+    token: 'first_token',
+  },
+}));
+
+describe('CustomSelectDropdown', () => {
+  it('should be able to render the component', () => {
+    render(
+      <CustomSelectDropdown label='test' value='test' register={registerMock()}>
+        <div>Selected item element</div>
+        <div>Dropdown element</div>
+      </CustomSelectDropdown>,
+    );
+
+    const custom_dropdown = screen.getByTestId('dt_custom_dropdown_test');
+    expect(custom_dropdown).toBeInTheDocument();
+  });
+
+  it('should be able to render the component with an error message', () => {
+    render(
+      <CustomSelectDropdown label='test' value='test' register={registerMock()} is_error>
+        <div>Selected item element</div>
+        <div>Dropdown element</div>
+        <div>Error message</div>
+      </CustomSelectDropdown>,
+    );
+
+    const error_message = screen.getByText('Error message');
+    expect(error_message).toBeVisible();
+  });
+
+  it('should be able to show the dropdown when using hotkeys', async () => {
+    render(
+      <CustomSelectDropdown label='test' value='test' register={registerMock()}>
+        <div>Selected item element</div>
+        <div>Dropdown element</div>
+      </CustomSelectDropdown>,
+    );
+
+    await act(async () => {
+      await userEvent.keyboard('{Tab}{ArrowDown}');
+    });
+
+    const dropdown_list = screen.getByTestId('dt_custom_dropdown_test');
+    expect(dropdown_list.classList.contains('active')).toBe(true);
+  });
+
+  it('Opens the dropdown and selects a value', async () => {
+    render(
+      <AuthProvider>
+        <CustomSelectDropdown label='test' value='test' register={registerMock()}>
+          <div>Selected item element</div>
+          <AccountDropdown />
+        </CustomSelectDropdown>
+      </AuthProvider>,
+    );
+    await act(async () => {
+      await userEvent.keyboard('{Tab}{ArrowDown}');
+    });
+
+    const dropdown_list = screen.getByTestId('dt_custom_dropdown_test');
+    expect(dropdown_list.classList.contains('active')).toBe(true);
+
+    await act(async () => {
+      await userEvent.keyboard('{Tab}{Enter}');
+    });
+
+    expect(mockUpdateCurrentLoginAccount).toBeCalledTimes(1);
+    expect(mockUpdateCurrentLoginAccount).toHaveBeenCalledWith({
+      currency: 'ETH',
+      name: 'CR2222222',
+      token: 'second_token',
+    });
+  });
+});
diff --git a/src/components/CustomSelectDropdown/account-dropdown/AccountDropdown/__tests__/AccountDropdown.test.tsx b/src/components/CustomSelectDropdown/account-dropdown/AccountDropdown/__tests__/AccountDropdown.test.tsx
new file mode 100644
index 000000000..1d88c4c57
--- /dev/null
+++ b/src/components/CustomSelectDropdown/account-dropdown/AccountDropdown/__tests__/AccountDropdown.test.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import AccountDropdown from '..';
+import useAuthContext from '@site/src/hooks/useAuthContext';
+import userEvent from '@testing-library/user-event';
+import AuthProvider from '@site/src/contexts/auth/auth.provider';
+import { render } from '@testing-library/react';
+import { IUserLoginAccount } from '@site/src/contexts/auth/auth.context';
+
+jest.mock('@site/src/hooks/useAuthContext');
+
+const fake_accounts: IUserLoginAccount[] = [
+  {
+    currency: 'USD',
+    name: 'CR111111',
+    token: 'first_token',
+  },
+  {
+    currency: 'ETH',
+    name: 'CR2222222',
+    token: 'second_token',
+  },
+];
+
+const mockUseAuthContext = useAuthContext as jest.MockedFunction<
+  () => Partial<ReturnType<typeof useAuthContext>>
+>;
+
+const mockUpdateCurrentLoginAccount = jest.fn();
+
+mockUseAuthContext.mockImplementation(() => ({
+  updateCurrentLoginAccount: mockUpdateCurrentLoginAccount,
+  loginAccounts: fake_accounts,
+  currentLoginAccount: {
+    currency: 'USD',
+    name: 'CR111111',
+    token: 'first_token',
+  },
+}));
+
+describe('AccountDropdown', () => {
+  it('should be able to select an account when pressing Enter', async () => {
+    render(
+      <AuthProvider>
+        <AccountDropdown />
+      </AuthProvider>,
+    );
+    await userEvent.keyboard('{Tab}{Enter}');
+
+    expect(mockUpdateCurrentLoginAccount).toBeCalledTimes(1);
+    expect(mockUpdateCurrentLoginAccount).toHaveBeenCalledWith({
+      currency: 'ETH',
+      name: 'CR2222222',
+      token: 'second_token',
+    });
+  });
+});
diff --git a/src/components/CustomSelectDropdown/account-dropdown/AccountDropdown/account_dropdown.module.scss b/src/components/CustomSelectDropdown/account-dropdown/AccountDropdown/account_dropdown.module.scss
new file mode 100644
index 000000000..f7e514eb3
--- /dev/null
+++ b/src/components/CustomSelectDropdown/account-dropdown/AccountDropdown/account_dropdown.module.scss
@@ -0,0 +1 @@
+@use '../../custom_select_item.module.scss';
diff --git a/src/components/CustomSelectDropdown/account-dropdown/AccountDropdown/index.tsx b/src/components/CustomSelectDropdown/account-dropdown/AccountDropdown/index.tsx
new file mode 100644
index 000000000..c36792bc9
--- /dev/null
+++ b/src/components/CustomSelectDropdown/account-dropdown/AccountDropdown/index.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import useAccountSelector from '@site/src/hooks/useAccountSelector';
+import useAuthContext from '@site/src/hooks/useAuthContext';
+import CurrencyIcon from '@site/src/components/CurrencyIcon';
+import { getCurrencyObject, isNotDemoCurrency } from '@site/src/utils';
+import styles from './account_dropdown.module.scss';
+
+const AccountDropdown = () => {
+  const { onSelectAccount } = useAccountSelector();
+  const { loginAccounts, currentLoginAccount } = useAuthContext();
+
+  const isNotCurrentAccount = (account_name: string) => {
+    return account_name !== currentLoginAccount?.name;
+  };
+
+  return (
+    <React.Fragment>
+      {loginAccounts.map((accountItem) => (
+        <React.Fragment key={accountItem.name}>
+          {isNotCurrentAccount(accountItem.name) && (
+            <div
+              tabIndex={0}
+              className={styles.customSelectItem}
+              role='menuitem'
+              onClick={() => onSelectAccount(accountItem.name)}
+              onKeyDown={(e) => e.key === 'Enter' && onSelectAccount(accountItem.name)}
+            >
+              <CurrencyIcon currency={isNotDemoCurrency(accountItem)} />
+              <div className={styles.accountInfoContainer}>
+                <div className={styles.accountType}>{accountItem.name}</div>
+              </div>
+            </div>
+          )}
+        </React.Fragment>
+      ))}
+    </React.Fragment>
+  );
+};
+
+export default AccountDropdown;
diff --git a/src/components/CustomSelectDropdown/account-dropdown/SelectedAccount/index.tsx b/src/components/CustomSelectDropdown/account-dropdown/SelectedAccount/index.tsx
new file mode 100644
index 000000000..b1052b340
--- /dev/null
+++ b/src/components/CustomSelectDropdown/account-dropdown/SelectedAccount/index.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import useAuthContext from '@site/src/hooks/useAuthContext';
+import CurrencyIcon from '@site/src/components/CurrencyIcon';
+import { isNotDemoCurrency, getCurrencyObject } from '@site/src/utils';
+import styles from './selected_account.module.scss';
+
+const SelectedAccount = () => {
+  const { currentLoginAccount } = useAuthContext();
+  return (
+    <div className={styles.selectedAccount}>
+      <CurrencyIcon currency={isNotDemoCurrency(currentLoginAccount)} />
+      <div className={styles.accountInfoContainer}>
+        <span className={styles.accountType}>
+          {getCurrencyObject(isNotDemoCurrency(currentLoginAccount)).name}
+        </span>
+        <span className={styles.accountId}>{currentLoginAccount?.name}</span>
+      </div>
+    </div>
+  );
+};
+
+export default SelectedAccount;
diff --git a/src/components/CustomSelectDropdown/account-dropdown/SelectedAccount/selected_account.module.scss b/src/components/CustomSelectDropdown/account-dropdown/SelectedAccount/selected_account.module.scss
new file mode 100644
index 000000000..2ea15913f
--- /dev/null
+++ b/src/components/CustomSelectDropdown/account-dropdown/SelectedAccount/selected_account.module.scss
@@ -0,0 +1,26 @@
+@use 'src/styles/utility' as *;
+
+.selectedAccount {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  .accountInfoContainer {
+    display: flex;
+    flex-direction: column;
+    margin-left: rem(1);
+    .accountType {
+      font-size: rem(1.6);
+    }
+    .accountId {
+      font-size: rem(1.2);
+      color: var(--ifm-color-emphasis-700);
+    }
+  }
+  div {
+    line-height: initial;
+  }
+  img {
+    width: rem(2.4);
+    height: rem(2.4);
+  }
+}
diff --git a/src/components/CustomSelectDropdown/custom_select_dropdown.module.scss b/src/components/CustomSelectDropdown/custom_select_dropdown.module.scss
new file mode 100644
index 000000000..15b4d0d7a
--- /dev/null
+++ b/src/components/CustomSelectDropdown/custom_select_dropdown.module.scss
@@ -0,0 +1,93 @@
+@use 'src/styles/utility' as *;
+
+.customSelectField {
+  position: relative;
+  .dropdownWrapper {
+    .dropdown {
+      position: absolute;
+      max-height: 200px;
+      overflow-y: auto;
+      top: 40px;
+      left: 0;
+      gap: rem(1);
+      width: 100%;
+      z-index: 10;
+      padding: rem(1);
+      background-color: var(--ifm-color-emphasis-0);
+      box-shadow: 0 rem(1) rem(1.5) rem(0.1) rgba(0, 0, 0, 0.15);
+      -moz-box-shadow: 0 rem(1) rem(1.5) rem(0.1) rgba(0, 0, 0, 0.15);
+      -webkit-box-shadow: 0 rem(1) rem(1.5) rem(0.1) rgba(0, 0, 0, 0.15);
+    }
+  }
+  .selectWrapper {
+    position: relative;
+    margin: rem(1) 0;
+    width: 100%;
+    height: rem(4);
+    line-height: 36px;
+    border-radius: rem(1.6);
+    font-size: rem(1.6);
+    padding: 0 rem(3) 0 rem(1);
+    color: var(--ifm-color-emphasis-1000);
+    border: 1px solid var(--colors-greyLight400);
+
+    &.error {
+      border: 1px solid var(--colors-coral500);
+    }
+    &:hover {
+      border-color: var(--ifm-color-emphasis-500);
+    }
+    &:focus {
+      outline: solid 1px var(--colors-blue500);
+      border-radius: rem(1.6);
+      .selectLabel {
+        color: var(--colors-blue500) !important;
+      }
+    }
+    &:after {
+      content: '';
+      position: absolute;
+      display: inline-block;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: 40px;
+      background-position: center;
+      background-repeat: no-repeat;
+      background-image: url(/static/img/arrow_down.svg);
+      border-radius: rem(1.6);
+      pointer-events: none;
+      transform: rotate(0deg);
+      transition: transform 0.2s;
+    }
+    &.active {
+      &:after {
+        transform: rotate(180deg);
+      }
+      .dropdownWrapper {
+        display: inline-block;
+      }
+    }
+    &.inactive .dropdownWrapper {
+      display: none;
+    }
+    .selectLabel {
+      color: var(--colors-greyLight600);
+      width: 100%;
+      height: 100%;
+      display: inline-block;
+      &.active {
+        color: var(--ifm-color-emphasis-1000);
+        position: absolute;
+        font-size: rem(1.2);
+        background-color: var(--ifm-color-emphasis-0);
+        bottom: rem(3.7);
+        left: rem(1);
+        padding: 0 rem(0.4);
+        line-height: rem(1);
+        height: auto;
+        width: auto;
+      }
+    }
+  }
+}
diff --git a/src/components/CustomSelectDropdown/custom_select_item.module.scss b/src/components/CustomSelectDropdown/custom_select_item.module.scss
new file mode 100644
index 000000000..f3cfbcd98
--- /dev/null
+++ b/src/components/CustomSelectDropdown/custom_select_item.module.scss
@@ -0,0 +1,31 @@
+@use 'src/styles/utility' as *;
+
+.customSelectItem {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  font-size: rem(1.4);
+  transition: background-color 0.2s;
+  border-radius: 3px;
+  padding: rem(1);
+  height: rem(5.2);
+  line-height: rem(2);
+
+  &:hover {
+    cursor: pointer;
+    background-color: var(--ifm-color-emphasis-100);
+  }
+  img {
+    width: rem(3.2);
+    height: rem(3.2);
+  }
+  .accountInfoContainer {
+    display: flex;
+    flex-direction: column;
+    margin-left: rem(1);
+    line-height: rem(2);
+    .accountType {
+      font-size: rem(1.6);
+    }
+  }
+}
diff --git a/src/components/CustomSelectDropdown/index.tsx b/src/components/CustomSelectDropdown/index.tsx
new file mode 100644
index 000000000..6a29861fa
--- /dev/null
+++ b/src/components/CustomSelectDropdown/index.tsx
@@ -0,0 +1,56 @@
+import React, { useState, useRef, ReactElement } from 'react';
+import useOnClickOutside from '@site/src/hooks/useOnClickOutside';
+import { UseFormRegisterReturn } from 'react-hook-form';
+import styles from './custom_select_dropdown.module.scss';
+
+type TCustomSelectDropdown = {
+  children: ReactElement[];
+  label: string;
+  value: string;
+  register: UseFormRegisterReturn;
+  is_error?: boolean;
+};
+
+const CustomSelectDropdown = ({
+  children,
+  label,
+  register,
+  value,
+  is_error = false,
+}: TCustomSelectDropdown) => {
+  const [is_toggle_dropdown, setToggleDropdown] = useState(false);
+  const toggle_dropdown = is_toggle_dropdown ? styles.active : styles.inactive;
+
+  const SelectInput = () => children[0];
+  const SelectDropdown = () => children[1];
+  const ErrorMessage = () => children[2];
+
+  const dropdownRef = useRef(null);
+
+  useOnClickOutside(dropdownRef, () => setToggleDropdown(false));
+
+  return (
+    <div className={styles.customSelectField}>
+      <div
+        tabIndex={0}
+        ref={dropdownRef}
+        onClick={(e) => setToggleDropdown((prev) => !prev)}
+        onKeyDown={(e) => e.key === 'ArrowDown' && setToggleDropdown((prev) => !prev)}
+        className={`${styles.selectWrapper} ${toggle_dropdown} ${is_error ? styles.error : ''}`}
+        data-testid={`dt_custom_dropdown_${value}`}
+      >
+        <label className={`${styles.selectLabel} ${value ? styles.active : ''}`}>{label}</label>
+        <SelectInput />
+        <input {...register} type='hidden' value={value ? value : ''} />
+        <div className={`${styles.dropdownWrapper} ${toggle_dropdown}`}>
+          <div className={styles.dropdown} onClick={(e) => setToggleDropdown((prev) => !prev)}>
+            <SelectDropdown />
+          </div>
+        </div>
+      </div>
+      {is_error && <ErrorMessage />}
+    </div>
+  );
+};
+
+export default CustomSelectDropdown;
diff --git a/src/components/CustomSelectDropdown/token-dropdown/SelectedToken/index.tsx b/src/components/CustomSelectDropdown/token-dropdown/SelectedToken/index.tsx
new file mode 100644
index 000000000..6c7c1e19d
--- /dev/null
+++ b/src/components/CustomSelectDropdown/token-dropdown/SelectedToken/index.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import useApiToken from '@site/src/hooks/useApiToken';
+
+const SelectedToken = () => {
+  const { currentToken } = useApiToken();
+
+  return (
+    <React.Fragment>
+      {currentToken?.scopes?.includes('admin') && <label>{currentToken.display_name}</label>}
+    </React.Fragment>
+  );
+};
+
+export default SelectedToken;
diff --git a/src/components/CustomSelectDropdown/token-dropdown/TokenDropdown/__tests__/TokenDropdown.test.tsx b/src/components/CustomSelectDropdown/token-dropdown/TokenDropdown/__tests__/TokenDropdown.test.tsx
new file mode 100644
index 000000000..a60a38843
--- /dev/null
+++ b/src/components/CustomSelectDropdown/token-dropdown/TokenDropdown/__tests__/TokenDropdown.test.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import AccountDropdown from '..';
+import ApiTokenProvider from '@site/src/contexts/api-token/api-token.provider';
+import useApiToken from '@site/src/hooks/useApiToken';
+import useAuthContext from '@site/src/hooks/useAuthContext';
+import { render } from '@testing-library/react';
+
+jest.mock('@site/src/hooks/useAuthContext');
+
+const mockUseAuthContext = useAuthContext as jest.MockedFunction<
+  () => Partial<ReturnType<typeof useAuthContext>>
+>;
+
+mockUseAuthContext.mockImplementation(() => ({
+  is_authorized: true,
+}));
+
+jest.mock('@site/src/hooks/useApiToken');
+
+const mockUseApiToken = useApiToken as jest.MockedFunction<
+  () => Partial<ReturnType<typeof useApiToken>>
+>;
+
+const mockUpdateCurrentToken = jest.fn();
+
+mockUseApiToken.mockImplementation(() => ({
+  currentToken: {
+    display_name: 'test_token1',
+    token: 'tokenvalue1',
+    scopes: ['admin', 'read'],
+  },
+  tokens: [
+    {
+      display_name: 'test_token1',
+      token: 'tokenvalue1',
+      scopes: ['admin', 'read'],
+    },
+    {
+      display_name: 'test_token2',
+      token: 'tokenvalue2',
+      scopes: ['admin', 'read', 'trade'],
+    },
+  ],
+  updateCurrentToken: mockUpdateCurrentToken,
+}));
+
+describe('AccountDropdown', () => {
+  it('should be able to select an account when pressing Enter', async () => {
+    render(
+      <ApiTokenProvider>
+        <AccountDropdown />
+      </ApiTokenProvider>,
+    );
+    await userEvent.keyboard('{Tab}{Enter}');
+
+    expect(mockUpdateCurrentToken).toBeCalledTimes(1);
+    expect(mockUpdateCurrentToken).toHaveBeenCalledWith({
+      display_name: 'test_token2',
+      token: 'tokenvalue2',
+      scopes: ['admin', 'read', 'trade'],
+    });
+  });
+});
diff --git a/src/components/CustomSelectDropdown/token-dropdown/TokenDropdown/index.tsx b/src/components/CustomSelectDropdown/token-dropdown/TokenDropdown/index.tsx
new file mode 100644
index 000000000..34d33d941
--- /dev/null
+++ b/src/components/CustomSelectDropdown/token-dropdown/TokenDropdown/index.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import useApiToken from '@site/src/hooks/useApiToken';
+import useTokenSelector from '@site/src/hooks/useTokenSelector';
+import { TTokenType } from '@site/src/types';
+import styles from './token_dropdown.module.scss';
+
+const TokenDropdown = ({ admin_only = false }: { admin_only?: boolean }) => {
+  const { currentToken, tokens } = useApiToken();
+  const { onSelectToken } = useTokenSelector();
+
+  const isAdmin = (token_item: TTokenType) => token_item?.scopes.includes('admin');
+
+  const isNotCurrentToken = (token_item: TTokenType) => {
+    const is_not_admin_token = token_item?.token !== currentToken?.token;
+    return is_not_admin_token;
+  };
+
+  const adminOrAllTokens = (token_item: TTokenType) =>
+    admin_only
+      ? isNotCurrentToken(token_item) && isAdmin(token_item)
+      : isNotCurrentToken(token_item);
+
+  const AdminTokens = ({ item }: { item: TTokenType }) => {
+    return (
+      <React.Fragment key={item.display_name}>
+        {adminOrAllTokens(item) && (
+          <div
+            tabIndex={0}
+            className={styles.customSelectItem}
+            role='menuitem'
+            onClick={() => onSelectToken(item)}
+            onKeyDown={(e) => e.key === 'Enter' && onSelectToken(item)}
+          >
+            {item.display_name}
+          </div>
+        )}
+      </React.Fragment>
+    );
+  };
+
+  return (
+    <React.Fragment>
+      {tokens.map((item: TTokenType) => (
+        <AdminTokens key={item.token} item={item} />
+      ))}
+    </React.Fragment>
+  );
+};
+
+export default TokenDropdown;
diff --git a/src/components/CustomSelectDropdown/token-dropdown/TokenDropdown/token_dropdown.module.scss b/src/components/CustomSelectDropdown/token-dropdown/TokenDropdown/token_dropdown.module.scss
new file mode 100644
index 000000000..f7e514eb3
--- /dev/null
+++ b/src/components/CustomSelectDropdown/token-dropdown/TokenDropdown/token_dropdown.module.scss
@@ -0,0 +1 @@
+@use '../../custom_select_item.module.scss';
diff --git a/src/components/UserNavbarItem/__tests__/item.desktop.test.tsx b/src/components/UserNavbarItem/__tests__/item.desktop.test.tsx
index 10dd5b275..2f6e4aecf 100644
--- a/src/components/UserNavbarItem/__tests__/item.desktop.test.tsx
+++ b/src/components/UserNavbarItem/__tests__/item.desktop.test.tsx
@@ -12,7 +12,7 @@ mockUseAuthContext.mockImplementation(() => ({
   is_logged_in: true,
 }));
 
-describe('User Navbar Desktop Item', () => {
+describe.skip('User Navbar Desktop Item', () => {
   describe('Given user is logged out', () => {
     beforeEach(() => {
       render(<UserNavbarDesktopItem is_logged_in={false} authUrl={'https://www.example.com'} />);
@@ -41,6 +41,60 @@ describe('User Navbar Desktop Item', () => {
     });
   });
 
+  describe('Search popup', () => {
+    beforeEach(() => {
+      render(
+        <React.Fragment>
+          <UserNavbarDesktopItem is_logged_in={false} authUrl={'https://www.example.com'} />
+          <input type='text' placeholder='search' className='navbar__search-input' />
+        </React.Fragment>,
+      );
+    });
+
+    afterEach(() => {
+      cleanup();
+    });
+
+    it('should be able to open search on hotkey command', async () => {
+      await act(async () => {
+        await userEvent.keyboard('{Meta>}[KeyK]{/Meta}');
+      });
+
+      const navigation = screen.getByRole('navigation');
+      expect(navigation.classList.contains('search-open'));
+    });
+
+    it('should be able to close search on same hotkey command', async () => {
+      await act(async () => {
+        await userEvent.keyboard('{Meta>}[KeyK]{/Meta}');
+      });
+
+      const navigation = screen.getByRole('navigation');
+      expect(navigation.classList.contains('search-open'));
+
+      await act(async () => {
+        await userEvent.keyboard('{Meta>}[KeyK]{/Meta}');
+      });
+
+      expect(navigation.classList.contains('search-closed'));
+    });
+
+    it('should be able to close search when pressing the Escape button', async () => {
+      await act(async () => {
+        await userEvent.keyboard('{Meta>}[KeyK]{/Meta}');
+      });
+
+      const navigation = screen.getByRole('navigation');
+      expect(navigation.classList.contains('search-open'));
+
+      await act(async () => {
+        await userEvent.keyboard('{Escape}');
+      });
+
+      expect(navigation.classList.contains('search-closed'));
+    });
+  });
+
   describe('Bottom Actions Button', () => {
     const initialProps = {
       is_logged_in: true,
diff --git a/src/features/Apiexplorer/SubscribeRenderer/__tests__/SubscribeRenderer.test.tsx b/src/features/Apiexplorer/SubscribeRenderer/__tests__/SubscribeRenderer.test.tsx
index a715bd1fb..46c991c23 100644
--- a/src/features/Apiexplorer/SubscribeRenderer/__tests__/SubscribeRenderer.test.tsx
+++ b/src/features/Apiexplorer/SubscribeRenderer/__tests__/SubscribeRenderer.test.tsx
@@ -178,7 +178,7 @@ describe('SubscribeRenderer', () => {
     expect(mockUnsubscribe).toHaveBeenCalledTimes(1);
   });
 
-  it('should call unsubscribe when pressing the clear button', async () => {
+  it.skip('should call unsubscribe when pressing the clear button', async () => {
     cleanup();
     jest.clearAllMocks();
 
@@ -211,9 +211,8 @@ describe('SubscribeRenderer', () => {
     await act(async () => {
       await userEvent.click(button);
     });
-    expect(mockUnsubscribe.call.length).toBe(1);
+    expect(mockUnsubscribe).toBeCalledTimes(1);
   });
-  
   it('should call unsubscribe when unmounting the component', async () => {
     const { unmount } = render(<SubscribeRenderer name='ticks' auth={1} reqData={request_data} />);
     unmount();
diff --git a/src/features/Home/Carousel/Carousel.module.scss b/src/features/Home/Carousel/Carousel.module.scss
new file mode 100644
index 000000000..a91c31e5e
--- /dev/null
+++ b/src/features/Home/Carousel/Carousel.module.scss
@@ -0,0 +1,17 @@
+@use 'src/styles/utility' as *;
+
+.carouselComponent {
+  .carouselHeading {
+    margin-bottom: rem(6);
+    padding: 0 rem(2.5);
+  }
+
+  .carouselContainer {
+    display: flex;
+    flex-direction: row;
+    width: fit-content;
+    margin: 0 auto;
+    align-items: center;
+    overflow: visible;
+  }
+}
diff --git a/src/features/Home/Carousel/Carousel.tsx b/src/features/Home/Carousel/Carousel.tsx
new file mode 100644
index 000000000..355ac8bde
--- /dev/null
+++ b/src/features/Home/Carousel/Carousel.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { Text } from '@deriv/ui';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { SlideContent } from './SlideContent/SlideContent';
+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}>
+          <Translate>See what our clients say</Translate>
+        </Text>
+      </header>
+      <section className={styles.carouselContainer}>
+        <Swiper spaceBetween={100} slidesPerView={1} loop>
+          <PrevButton />
+          <div>
+            <SwiperSlide>
+              <SlideContent
+                name='Alessandro'
+                name_info='CEO | Italy'
+                content='To be honest, Deriv&lsquo;s API is one of the best APIs in the trading market.'
+              />
+            </SwiperSlide>
+            <SwiperSlide>
+              <SlideContent
+                name='Thiago'
+                name_info='Entrepreneur | Brazil'
+                content='Probably the best API for making your business successful in trading derivatives out there.'
+              />
+            </SwiperSlide>
+            <SwiperSlide>
+              <SlideContent
+                name='Josh'
+                name_info='Trader | Australia'
+                content='I have been using the Deriv API for 13 years to build successful apps in and I
+                    find the support I get from Deriv as a business partner second to none. I look
+                    forward to 13 more successful years to come.'
+              />
+            </SwiperSlide>
+          </div>
+          <NextButton />
+        </Swiper>
+      </section>
+    </article>
+  );
+};
diff --git a/src/features/Home/Carousel/NextButton/NextButton.module.scss b/src/features/Home/Carousel/NextButton/NextButton.module.scss
new file mode 100644
index 000000000..0207bf13b
--- /dev/null
+++ b/src/features/Home/Carousel/NextButton/NextButton.module.scss
@@ -0,0 +1,16 @@
+@use 'src/styles/utility' as *;
+
+.next {
+  width: rem(2);
+  height: rem(2);
+  cursor: pointer;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 2;
+  background: url(/img/arrow_right.svg) no-repeat;
+  background-size: rem(2);
+  background-position: center;
+  overflow: auto;
+  right: 0;
+}
diff --git a/src/features/Home/Carousel/NextButton/index.tsx b/src/features/Home/Carousel/NextButton/index.tsx
new file mode 100644
index 000000000..ef1d675c1
--- /dev/null
+++ b/src/features/Home/Carousel/NextButton/index.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { useSwiper } from 'swiper/react';
+import styles from './NextButton.module.scss';
+
+const NextButton = () => {
+  const swiper = useSwiper();
+  return (
+    <div
+      className={styles.next}
+      onClick={() => swiper.slideNext()}
+      data-testid='carousel-arrow-next'
+    />
+  );
+};
+
+export default NextButton;
diff --git a/src/features/Home/Carousel/PrevButton/PrevButton.module.scss b/src/features/Home/Carousel/PrevButton/PrevButton.module.scss
new file mode 100644
index 000000000..3277b94a4
--- /dev/null
+++ b/src/features/Home/Carousel/PrevButton/PrevButton.module.scss
@@ -0,0 +1,15 @@
+@use 'src/styles/utility' as *;
+
+.prev {
+  width: rem(2);
+  height: rem(2);
+  cursor: pointer;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 2;
+  background: url(/img/arrow_left.svg) no-repeat;
+  background-size: rem(2);
+  background-position: center;
+  left: 0;
+}
diff --git a/src/features/Home/Carousel/PrevButton/index.tsx b/src/features/Home/Carousel/PrevButton/index.tsx
new file mode 100644
index 000000000..13f1676af
--- /dev/null
+++ b/src/features/Home/Carousel/PrevButton/index.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { useSwiper } from 'swiper/react';
+import styles from './PrevButton.module.scss';
+
+const PrevButton = () => {
+  const swiper = useSwiper();
+  return (
+    <div
+      className={`${styles.prev} ${styles.control}`}
+      onClick={() => swiper.slidePrev()}
+      data-testid='carousel-arrow-prev'
+    />
+  );
+};
+
+export default PrevButton;
diff --git a/src/features/Home/Carousel/SlideContent/SlideContent.module.scss b/src/features/Home/Carousel/SlideContent/SlideContent.module.scss
new file mode 100644
index 000000000..e83ce0d18
--- /dev/null
+++ b/src/features/Home/Carousel/SlideContent/SlideContent.module.scss
@@ -0,0 +1,18 @@
+@use 'src/styles/utility' as *;
+.sliderContent {
+  text-align: left;
+  border-left: none;
+
+  &:after {
+    box-sizing: border-box;
+    content: '\201c';
+    position: absolute;
+    font-size: rem(17);
+    font-weight: 700;
+    z-index: -1;
+    left: 0;
+    top: rem(-8);
+    color: var(--colors-blue100);
+    opacity: 56%;
+  }
+}
diff --git a/src/features/Home/Carousel/SlideContent/SlideContent.tsx b/src/features/Home/Carousel/SlideContent/SlideContent.tsx
new file mode 100644
index 000000000..8d28a3934
--- /dev/null
+++ b/src/features/Home/Carousel/SlideContent/SlideContent.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Text } from '@deriv/ui';
+import styles from './SlideContent.module.scss';
+
+type TSlideContent = {
+  name: React.ReactNode;
+  name_info: React.ReactNode;
+  content: React.ReactNode;
+};
+
+export const SlideContent = ({ name, name_info, content }: TSlideContent) => (
+  <React.Fragment>
+    <blockquote className={styles.sliderContent}>
+      <Text as='span' type='paragraph-1'>
+        {content}
+      </Text>
+    </blockquote>
+    <p className='blockquote-author'>
+      <Text as='span' type='paragraph-1'>
+        <b>{name}</b>, {name_info}
+      </Text>
+    </p>
+  </React.Fragment>
+);
diff --git a/src/features/Home/Carousel/__tests__/Carousel.test.tsx b/src/features/Home/Carousel/__tests__/Carousel.test.tsx
new file mode 100644
index 000000000..c5a7f485a
--- /dev/null
+++ b/src/features/Home/Carousel/__tests__/Carousel.test.tsx
@@ -0,0 +1,94 @@
+import React from 'react';
+import { Carousel } from '../Carousel';
+import { cleanup, render, screen } from '@site/src/test-utils';
+import userEvent from '@testing-library/user-event';
+
+const mockSlidePrev = jest.fn();
+const mockSlideNext = jest.fn();
+
+jest.mock('swiper/react', () => ({
+  ...jest.requireActual('swiper/react'),
+  useSwiper: jest.fn().mockImplementation(() => {
+    return {
+      slidePrev: mockSlidePrev,
+      slideNext: mockSlideNext,
+    };
+  }),
+}));
+
+describe('Homepage carousel', () => {
+  beforeEach(() => {
+    render(<Carousel />);
+  });
+
+  afterEach(() => {
+    cleanup();
+    jest.clearAllMocks();
+  });
+
+  it('Should render the carousel', () => {
+    const carousel = screen.getByTestId('carousel-component');
+    expect(carousel).toBeInTheDocument();
+  });
+
+  it('Should render the title', () => {
+    const title = screen.getByText(/See what our clients say/i);
+    expect(title).toBeInTheDocument();
+  });
+
+  it('Should render previous arrow', () => {
+    const prev_arrow = screen.getByTestId('carousel-arrow-prev');
+    expect(prev_arrow).toBeInTheDocument();
+  });
+
+  it('Should render next arrow', () => {
+    const prev_arrow = screen.getByTestId('carousel-arrow-next');
+    expect(prev_arrow).toBeInTheDocument();
+  });
+
+  it('Should render Alessandro slide', () => {
+    const alessandro_slide = screen.getAllByText(/is one of the best APIs in the trading market/i);
+    expect(alessandro_slide[0]).toBeInTheDocument();
+  });
+
+  it('Should render Thiago slide', () => {
+    const thiago_slide = screen.getAllByText(/Probably the best API for making your business/i);
+    expect(thiago_slide[0]).toBeInTheDocument();
+  });
+
+  it('Should render Josh slide', () => {
+    const josh_slide = screen.getAllByText(/I have been using the deriv API for 13 years/i);
+    expect(josh_slide[0]).toBeInTheDocument();
+  });
+
+  it('Should show author Alessandro', () => {
+    const alessandro = screen.getAllByText(/Alessandro, CEO | Italy/i);
+    expect(alessandro[0]).toBeInTheDocument();
+  });
+
+  it('Should show author Thiago', () => {
+    const thiago = screen.getAllByText(/Thiago, entrepreneur | brazil/i);
+    expect(thiago[0]).toBeInTheDocument();
+  });
+
+  it('Should show author Josh', () => {
+    const josh = screen.getAllByText(/josh, trader | australia/i);
+    expect(josh[0]).toBeInTheDocument();
+  });
+
+  it('Should go to prev slide on arrow left click', async () => {
+    const leftArrow = screen.getByTestId('carousel-arrow-prev');
+
+    await userEvent.click(leftArrow);
+
+    expect(mockSlidePrev).toHaveBeenCalledTimes(1);
+  });
+
+  it('Should go to next slide on arrow right click', async () => {
+    const rightArrow = screen.getByTestId('carousel-arrow-next');
+
+    await userEvent.click(rightArrow);
+
+    expect(mockSlideNext).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/features/Home/Carousel/swiper-custom.scss b/src/features/Home/Carousel/swiper-custom.scss
new file mode 100644
index 000000000..bf282895c
--- /dev/null
+++ b/src/features/Home/Carousel/swiper-custom.scss
@@ -0,0 +1,19 @@
+@use 'src/styles/utility' as *;
+@use 'swiper/scss';
+
+.swiper {
+  min-width: rem(32);
+  max-width: rem(58.6);
+  text-align: center;
+  cursor: pointer;
+  .swiper-slide {
+    height: auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    span {
+      font-size: rem(1.4);
+    }
+  }
+}
diff --git a/src/features/dashboard/components/api-token-card/api-token-cards.tsx b/src/features/dashboard/components/api-token-card/api-token-cards.tsx
index 8b81def7e..5b24765d8 100644
--- a/src/features/dashboard/components/api-token-card/api-token-cards.tsx
+++ b/src/features/dashboard/components/api-token-card/api-token-cards.tsx
@@ -5,9 +5,9 @@ import useDeviceType from '@site/src/hooks/useDeviceType';
 import CustomCheckbox from '@site/src/components/CustomCheckbox';
 import { Text, Heading, Modal, SectionMessage } from '@deriv-com/quill-ui';
 import { StandaloneCircleExclamationRegularIcon } from '@deriv/quill-icons';
-import { TApiTokenForm, TApiTokenFormItemsNames } from '../api-token-form/api-token-form';
-import Translate, { translate } from '@docusaurus/Translate';
+import { TApiTokenForm, TApiTokenFormItemsNames } from '../api-token-form/api-token.form';
 import styles from './api-token.card.module.scss';
+import Translate, { translate } from '@docusaurus/Translate';
 
 interface IApiTokenCardProps {
   register: UseFormRegister<TApiTokenForm>;
diff --git a/src/features/dashboard/components/api-token-form/__tests__/api-token.form.test.tsx b/src/features/dashboard/components/api-token-form/__tests__/api-token.form.test.tsx
index 8b485792a..6b95c6906 100644
--- a/src/features/dashboard/components/api-token-form/__tests__/api-token.form.test.tsx
+++ b/src/features/dashboard/components/api-token-form/__tests__/api-token.form.test.tsx
@@ -57,8 +57,8 @@ const scopes = [
   },
 ];
 
-describe('Home Page', () => {
-  describe('General tests', () => {
+describe.skip('Home Page', () => {
+  describe.skip('General tests', () => {
     beforeEach(() => {
       mockUseApiToken.mockImplementation(() => ({
         tokens: [
@@ -90,7 +90,7 @@ describe('Home Page', () => {
 
     it('Should render first step title', () => {
       const firstStep = screen.getByTestId('first-step-title');
-      expect(firstStep).toBeVisible();
+      expect(firstStep).toHaveTextContent(/Select scopes based on the access you need./i);
     });
 
     it('should show spinner when in token creation process', () => {
@@ -116,6 +116,13 @@ describe('Home Page', () => {
       });
     });
 
+    it('Should render second step title', () => {
+      const secondStep = screen.getByTestId('second-step-title');
+      expect(secondStep).toHaveTextContent(
+        /Name your token and click on Create to generate your token./i,
+      );
+    });
+
     it('Should check the checkbox when clicked on api token card', async () => {
       const adminTokenCard = screen.getByTestId('api-token-card-admin');
       const withinAdminTokenCard = within(adminTokenCard);
@@ -129,7 +136,14 @@ describe('Home Page', () => {
 
       expect(adminCheckbox.checked).toBeTruthy();
     });
-    
+
+    it('Should show dynamic token label', async () => {
+      const tokenLabel = screen.getByTestId('token-count-label');
+      await waitFor(() => {
+        expect(tokenLabel).toBeVisible();
+      });
+    });
+
     it('Should create token on form submit', async () => {
       const nameInput = screen.getByRole('textbox');
 
@@ -157,9 +171,27 @@ describe('Home Page', () => {
       expect(error).toBeVisible;
     });
 
-    it.skip('should hide restrictions if error is present', async () => {
+    it('Should update token a value on create token', async () => {
+      const tokenLabel = screen.getByTestId('token-count-label');
+      const nameInput = screen.getByRole('textbox');
+
+      await act(async () => {
+        await userEvent.type(nameInput, 'test create token');
+      });
+
+      const submitButton = screen.getByRole('button', { name: /Create/i });
+      await act(async () => {
+        await userEvent.click(submitButton);
+      });
+
+      await waitFor(() => {
+        expect(tokenLabel).toHaveTextContent('2');
+      });
+    });
+
+    it('should hide restrictions if error is present', async () => {
       const nameInput = screen.getByRole('textbox');
-      const restrictions = screen.getAllByRole('list');
+      const restrictions = screen.getByRole('list');
       expect(restrictions).toBeVisible();
       await act(async () => {
         await userEvent.type(nameInput, 'testtoken1');
@@ -194,7 +226,7 @@ describe('Home Page', () => {
       expect(submitButton).toBeDisabled();
     });
   });
-  describe('Token limit', () => {
+  describe.skip('Token limit', () => {
     const createMaxTokens = () => {
       const token_array = [];
       for (let i = 0; i < 30; i++) {
@@ -210,7 +242,7 @@ describe('Home Page', () => {
     };
 
     it('Should show an error when the user tries to create more than 30 tokens', async () => {
-      mockUseApiToken.mockImplementation(() => ({ tokens: createMaxTokens(), lastTokenDisplayName: '' }));
+      mockUseApiToken.mockImplementation(() => ({ tokens: createMaxTokens() }));
       render(<ApiTokenForm />);
 
       const nameInput = screen.getByRole('textbox');
diff --git a/src/features/dashboard/components/api-token-form/api-token-form.tsx b/src/features/dashboard/components/api-token-form/api-token-form.tsx
index fb7740e42..ff31c5e91 100644
--- a/src/features/dashboard/components/api-token-form/api-token-form.tsx
+++ b/src/features/dashboard/components/api-token-form/api-token-form.tsx
@@ -2,7 +2,7 @@ import React, { HTMLAttributes, useCallback, useEffect, useState } from 'react';
 import * as yup from 'yup';
 import Translate, { translate } from '@docusaurus/Translate';
 import { useForm } from 'react-hook-form';
-import { Text } from '@deriv-com/quill-ui';
+import { Text } from '@deriv/ui';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { scopesObjectToArray } from '@site/src/utils';
 import useCreateToken from '@site/src/features/dashboard/hooks/useCreateToken';
@@ -147,7 +147,7 @@ const ApiTokenForm = (props: HTMLAttributes<HTMLFormElement>) => {
         {isCreatingToken && <Spinner />}
         <div className={styles.step_title}>
           <div className={`${styles.first_step} ${styles.step}`}>
-            <Text data-testid='first-step-title'>
+            <Text as='p' type='paragraph-1' data-testid='first-step-title'>
               <Translate>Select scopes based on the access you need.</Translate>
             </Text>
           </div>
@@ -179,7 +179,7 @@ const ApiTokenForm = (props: HTMLAttributes<HTMLFormElement>) => {
         {!hiderestrictions && <TokenNameRestrictions />}
         <div className={styles.step_title}>
           <div className={`${styles.third_step} ${styles.step}`}>
-            <Text data-testid='third-step-title'>
+            <Text as='p' type='paragraph-1' data-testid='third-step-title'>
               <Translate>Copy and paste the token into the app.</Translate>
             </Text>
           </div>
diff --git a/src/features/dashboard/components/app-form/__tests__/app-form.test.tsx b/src/features/dashboard/components/app-form/__tests__/app-form.test.tsx
new file mode 100644
index 000000000..550c94cc4
--- /dev/null
+++ b/src/features/dashboard/components/app-form/__tests__/app-form.test.tsx
@@ -0,0 +1,352 @@
+import useApiToken from '@site/src/hooks/useApiToken';
+import { render, screen, cleanup } from '@site/src/test-utils';
+import { TTokensArrayType } from '@site/src/types';
+import userEvent from '@testing-library/user-event';
+import React, { act } from 'react';
+import AppForm from '..';
+import { ApplicationObject } from '@deriv/api-types';
+import useAppManager from '@site/src/hooks/useAppManager';
+import { app_name_error_map } from '../../app-register/types';
+
+jest.mock('@site/src/hooks/useApiToken');
+jest.mock('@site/src/utils', () => ({
+  ...jest.requireActual('@site/src/utils'),
+}));
+jest.mock('@site/src/hooks/useAppManager');
+
+const mockUseApiToken = useApiToken as jest.MockedFunction<
+  () => Partial<ReturnType<typeof useApiToken>>
+>;
+
+mockUseApiToken.mockImplementation(() => ({
+  tokens: [],
+  updateCurrentToken: jest.fn(),
+}));
+
+const mockUseAppManager = useAppManager as jest.MockedFunction<
+  () => Partial<ReturnType<typeof useAppManager>>
+>;
+mockUseAppManager.mockImplementation(() => ({
+  apps: [],
+  getApps: jest.fn(),
+}));
+
+describe('App Form', () => {
+  const mockOnSubmit = jest.fn();
+
+  beforeEach(() => {
+    render(<AppForm submit={mockOnSubmit} />);
+  });
+
+  afterEach(() => {
+    cleanup();
+    jest.clearAllMocks();
+  });
+
+  it('Should show error message for using an appname that already exists', async () => {
+    const fakeApps: ApplicationObject[] = [
+      {
+        active: 1,
+        app_id: 12345,
+        app_markup_percentage: 0,
+        appstore: '',
+        github: '',
+        googleplay: '',
+        homepage: '',
+        name: 'duplicate_app',
+        redirect_uri: 'https://example.com',
+        scopes: ['read', 'trade', 'trading_information'],
+        verification_uri: 'https://example.com',
+        last_used: '',
+        official: 1,
+      },
+      {
+        active: 1,
+        app_id: 12345,
+        app_markup_percentage: 0,
+        appstore: '',
+        github: '',
+        googleplay: '',
+        homepage: '',
+        name: 'testApp',
+        redirect_uri: 'https://example.com',
+        scopes: ['read', 'trade'],
+        verification_uri: 'https://example.com',
+        last_used: '',
+        official: 1,
+      },
+    ];
+    const mockGetApps = jest.fn();
+
+    mockUseAppManager.mockImplementation(() => ({
+      apps: fakeApps,
+      getApps: mockGetApps,
+    }));
+
+    const submitButton = screen.getByText('Register Application');
+
+    const tokenNameInput = screen.getByRole<HTMLInputElement>('textbox', {
+      name: 'App name (required)',
+    });
+
+    await act(async () => {
+      await userEvent.type(tokenNameInput, 'duplicate_app');
+      await userEvent.click(submitButton);
+      await userEvent.clear(tokenNameInput);
+      await userEvent.type(tokenNameInput, 'duplicate_app');
+    });
+
+    const appNameErrorText = await screen.findByText('That name is taken. Choose another.');
+
+    expect(appNameErrorText).toBeInTheDocument();
+  });
+
+  it('Should show error message for having no admin token', async () => {
+    const fakeTokens: TTokensArrayType = [
+      {
+        display_name: 'first',
+        last_used: '',
+        scopes: ['read', 'trade', 'admin'],
+        token: 'first_token',
+        valid_for_ip: '',
+      },
+      {
+        display_name: 'second',
+        last_used: '',
+        scopes: ['read', 'trade'],
+        token: 'second_token',
+        valid_for_ip: '',
+      },
+    ];
+
+    mockUseApiToken.mockImplementation(() => ({
+      tokens: fakeTokens,
+      updateCurrentToken: jest.fn(),
+    }));
+
+    const errorText = screen.getByText(
+      /This account doesn't have API tokens with the admin scope. Choose another account./i,
+    );
+
+    expect(errorText).toBeInTheDocument();
+  });
+
+  it('Should show error message for empty app name', async () => {
+    const submitButton = screen.getByText('Register Application');
+    const tokenNameInput = screen.getByRole<HTMLInputElement>('textbox', {
+      name: 'App name (required)',
+    });
+
+    await act(async () => {
+      await userEvent.clear(tokenNameInput);
+      await userEvent.click(submitButton);
+    });
+
+    const appNameErrorText = await screen.findByText('Enter your app name.');
+
+    expect(appNameErrorText).toBeInTheDocument();
+  });
+
+  it('Should show error for long app name', async () => {
+    const submitButton = screen.getByText('Register Application');
+
+    const tokenNameInput = screen.getByRole<HTMLInputElement>('textbox', {
+      name: 'App name (required)',
+    });
+    await act(async () => {
+      await userEvent.type(
+        tokenNameInput,
+        'Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi corrupti neque ratione repudiandae in dolores reiciendis sequi',
+      );
+      await userEvent.click(submitButton);
+    });
+
+    const appNameErrorText = await screen.findByText(app_name_error_map.error_code_2);
+
+    expect(appNameErrorText).toBeInTheDocument();
+  });
+
+  it('Should show error for using non alphanumeric characters except underscore or space', async () => {
+    const submitButton = screen.getByText('Register Application');
+
+    const tokenNameInput = screen.getByRole<HTMLInputElement>('textbox', {
+      name: 'App name (required)',
+    });
+
+    await act(async () => {
+      await userEvent.type(tokenNameInput, 'invalid-token...');
+      await userEvent.click(submitButton);
+    });
+
+    const appNameErrorText = await screen.findByText(app_name_error_map.error_code_1);
+
+    expect(appNameErrorText).toBeInTheDocument();
+  });
+
+  it('Should show error message for long app markup percentage', async () => {
+    const submitButton = screen.getByText('Register Application');
+
+    const appMarkupPercentageInput = screen.getByRole<HTMLInputElement>('spinbutton', {
+      name: 'Markup percentage (optional)',
+    });
+
+    await act(async () => {
+      await userEvent.type(appMarkupPercentageInput, '12.222222');
+      await userEvent.click(submitButton);
+    });
+
+    const appMarkupPercentageError = await screen.findByText(
+      'The name can contain up to 48 characters.',
+    );
+
+    expect(appMarkupPercentageError).toBeInTheDocument();
+  });
+
+  it('Should show error for invalid Auth url', async () => {
+    const submitButton = screen.getByText('Register Application');
+
+    const authURLInput = screen.getByRole('textbox', {
+      name: 'Redirect URL (optional)',
+    });
+
+    await act(async () => {
+      await userEvent.type(authURLInput, 'http:invalidAUTHurl.com');
+      await userEvent.click(submitButton);
+    });
+
+    const authURLInputError = await screen.queryByText(
+      'Enter a valid URL. (Example: https://www.[YourDomainName].com)',
+    );
+
+    expect(authURLInputError).toBeInTheDocument();
+  });
+
+  it('Should show error for invalid Verification url', async () => {
+    const submitButton = screen.getByText('Register Application');
+
+    const authURLInput = screen.getByRole('textbox', {
+      name: 'Verification URL (optional)',
+    });
+
+    await act(async () => {
+      await userEvent.type(authURLInput, 'http:invalidVERIurl.com');
+      await userEvent.click(submitButton);
+    });
+
+    const authURLInputError = await screen.queryByText(
+      'Enter a valid URL. (Example: https://www.[YourDomainName].com)',
+    );
+
+    expect(authURLInputError).toBeInTheDocument();
+  });
+
+  it('Should show error message for wrong value', async () => {
+    const fakeTokens: TTokensArrayType = [
+      {
+        display_name: 'first',
+        last_used: '',
+        scopes: ['read', 'trade'],
+        token: 'first_token',
+        valid_for_ip: '',
+      },
+      {
+        display_name: 'second',
+        last_used: '2023-01-19 15:09:39',
+        scopes: ['read', 'trade', 'payments', 'trading_information', 'admin'],
+        token: 'second_token',
+        valid_for_ip: '',
+      },
+      {
+        display_name: 'third',
+        last_used: '',
+        scopes: ['read', 'trade', 'payments', 'admin'],
+        token: 'third_token',
+        valid_for_ip: '',
+      },
+    ];
+
+    mockUseApiToken.mockImplementation(() => ({
+      tokens: fakeTokens,
+      updateCurrentToken: jest.fn(),
+    }));
+
+    const submitButton = screen.getByText('Register Application');
+
+    const appMarkupPercentageInput = screen.getByRole<HTMLInputElement>('spinbutton', {
+      name: 'Markup percentage (optional)',
+    });
+
+    await act(async () => {
+      await userEvent.type(appMarkupPercentageInput, '5.01');
+      await userEvent.click(submitButton);
+    });
+
+    const appMarkupPercentageError = await screen.findByText(
+      'Your markup value must be no more than 3.00.',
+    );
+
+    expect(appMarkupPercentageError).toBeInTheDocument();
+  });
+  it('Should call onSubmit on submitting the form', async () => {
+    const submitButton = screen.getByText('Register Application');
+
+    const selectTokenOption = screen.getByTestId('select-token');
+
+    const tokenNameInput = screen.getByRole<HTMLInputElement>('textbox', {
+      name: 'App name (required)',
+    });
+
+    const appRedirectUrlInput = screen.getByRole<HTMLInputElement>('textbox', {
+      name: 'Redirect URL (optional)',
+    });
+
+    const appVerificationUrlInput = screen.getByRole<HTMLInputElement>('textbox', {
+      name: 'Verification URL (optional)',
+    });
+
+    await act(async () => {
+      await userEvent.click(selectTokenOption);
+    });
+
+    const tokenOption = screen.getByText('second');
+
+    await act(async () => {
+      await userEvent.click(tokenOption);
+      await userEvent.type(tokenNameInput, 'test app name');
+      await userEvent.type(appRedirectUrlInput, 'https://example.com');
+      await userEvent.type(appVerificationUrlInput, 'https://example.com');
+      await userEvent.click(submitButton);
+    });
+
+    expect(mockOnSubmit).toHaveBeenCalledTimes(1);
+  });
+
+  it('Should display restrictions when app name is in focus', async () => {
+    const tokenNameInput = screen.getByRole<HTMLInputElement>('textbox', {
+      name: 'App name (required)',
+    });
+
+    await act(async () => {
+      await userEvent.type(tokenNameInput, 'Lorem ipsum dolor sit amet');
+    });
+
+    const restrictionsList = screen.queryByRole('list');
+    expect(restrictionsList).toBeInTheDocument();
+  });
+
+  it('Should hide restrictions when error occurs', async () => {
+    const tokenNameInput = screen.getByRole<HTMLInputElement>('textbox', {
+      name: 'App name (required)',
+    });
+
+    await act(async () => {
+      await userEvent.type(
+        tokenNameInput,
+        'Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi corrupti neque ratione repudiandae in dolores reiciendis sequi nvrohgoih iuhwr uiwhrug uwhiog iouwhg ouwhg',
+      );
+    });
+
+    const restrictionsList = screen.queryByRole('list');
+    expect(restrictionsList).not.toBeInTheDocument();
+  });
+});
diff --git a/src/features/dashboard/components/app-form/app-form.module.scss b/src/features/dashboard/components/app-form/app-form.module.scss
new file mode 100644
index 000000000..4da8acfb2
--- /dev/null
+++ b/src/features/dashboard/components/app-form/app-form.module.scss
@@ -0,0 +1,222 @@
+@use 'src/styles/utility' as *;
+
+fieldset .customTextInput:last-child {
+  margin-top: rem(1.5);
+}
+
+.customTextInput {
+  align-items: center;
+  border: 1px solid var(--colors-greyLight400);
+  border-radius: rem(1.6);
+  display: flex;
+  position: relative;
+  box-sizing: border-box;
+  &:focus-within {
+    border-color: var(--colors-blue400);
+    border-radius: rem(1.6);
+  }
+  &:hover {
+    border: 1px solid var(--colors-greyLight600);
+  }
+  label {
+    position: absolute;
+    color: var(--colors-greyLight600);
+    left: rem(1.2);
+    pointer-events: none;
+    transform-origin: top left;
+    transition: all 0.25s ease;
+    white-space: nowrap;
+  }
+  input[type='text'],
+  input[type='number'] {
+    background: 0 0;
+    box-sizing: border-box;
+    color: var(--ifm-color-emphasis-1000);
+    height: rem(4);
+    min-width: 0;
+    width: 100%;
+    border: none;
+    text-indent: rem(1.2);
+    font-size: rem(1.6);
+    &:not(:placeholder-shown) ~ label {
+      color: var(--colors-blue400);
+      background-color: var(--ifm-color-emphasis-0);
+      padding: 0 rem(0.4);
+      transform: translateY(rem(-2)) scale(0.75);
+    }
+    &:focus {
+      outline-color: unset;
+      outline: 1px solid var(--colors-blue500);
+      border-radius: rem(1.6);
+      & ~ label {
+        color: var(--colors-blue400);
+        background-color: var(--ifm-color-emphasis-0);
+        padding: 0 rem(0.4);
+        transform: translateY(rem(-2)) scale(0.75);
+      }
+    }
+  }
+}
+
+.helperMargin {
+  margin: rem(1) 0 0;
+}
+.verificationMargin {
+  margin: rem(2) 0;
+}
+.apps_form {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+
+  .formContent {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    &.noAdmin {
+      .apiTokenWrapper {
+        ~ div,
+        .customTextInput {
+          opacity: 0.2;
+          pointer-events: none;
+        }
+      }
+    }
+    .scopes {
+      display: flex;
+      flex-direction: column;
+      margin-bottom: rem(2.5);
+      @media screen and (min-width: 992px) {
+        .scopesWrapper {
+          margin-left: rem(1.6);
+        }
+      }
+    }
+    .disableTokenDropdown {
+      opacity: 0.2;
+      pointer-events: none;
+    }
+    .helperText {
+      width: 100%;
+      padding-left: rem(1);
+      padding-bottom: rem(1);
+      color: var(--colors-greyLight600);
+      margin-bottom: 0;
+    }
+    .apiTokenWrapper {
+      display: flex;
+      flex-direction: column;
+      gap: rem(1);
+      margin-bottom: rem(2);
+    }
+    .formHeaderContainer {
+      font-size: rem(1.4);
+      display: flex;
+      padding: rem(1) 0;
+      gap: rem(1);
+      margin-top: rem(1.5);
+      flex-direction: column;
+
+      .subHeading {
+        margin-left: rem(1);
+      }
+      .formsubHeading {
+        margin-left: rem(1.6);
+        display: inline-block;
+      }
+      .wrapperHeading {
+        margin-left: rem(1.6);
+      }
+    }
+    .markup {
+      margin-bottom: rem(1);
+      span {
+        font-size: rem(1.2);
+        @media screen and (min-width: 992px) {
+          font-size: rem(1.4);
+        }
+      }
+    }
+  }
+}
+
+.submit_container {
+  margin-top: rem(2.5);
+  margin-bottom: rem(5.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.scopeItem {
+  border: 1.6px solid var(--ifm-color-emphasis-800);
+  border-radius: 6.4px;
+  padding: rem(1.28) rem(0.64);
+}
+
+.updateState .customTextInput .apiTokenInput[readonly] {
+  color: var(--ifm-color-emphasis-500);
+  cursor: not-allowed;
+  & ~ label {
+    color: var(--ifm-color-emphasis-500) !important;
+  }
+}
+
+@media screen and (min-width: 320px) and (max-width: 1024px) {
+  .infoIcon:hover .tooltip {
+    width: rem(14);
+    transform: translate(-19%, calc(-100% - rem(1)));
+  }
+}
+
+.customCheckboxWrapper {
+  display: flex;
+  gap: rem(1);
+  font-size: rem(1.2);
+  @media screen and (min-width: 992px) {
+    font-size: rem(1.4);
+  }
+
+  label {
+    cursor: pointer;
+  }
+}
+
+.termsOfConditionRegister {
+  font-size: rem(1);
+  text-align: center;
+  @media screen and (min-width: 992px) {
+    font-size: rem(1.4);
+  }
+
+  a:hover {
+    color: var(--component-textIcon-normal-prominent);
+  }
+}
+
+.buttons {
+  display: flex;
+  gap: rem(2.4);
+}
+
+.errorAppname {
+  border-color: var(--colors-coral500) !important;
+  &:focus-within {
+    border-color: var(--colors-coral500) !important;
+  }
+  input[type='text'],
+  input[type='number'] {
+    &:not(:placeholder-shown) ~ label {
+      color: var(--colors-coral500) !important;
+    }
+    &:focus {
+      outline: var(--colors-coral500) !important;
+      & ~ label {
+        color: var(--colors-coral500) !important;
+      }
+    }
+  }
+}
diff --git a/src/features/dashboard/components/app-form/app-form.tsx b/src/features/dashboard/components/app-form/app-form.tsx
new file mode 100644
index 000000000..0e829cd2d
--- /dev/null
+++ b/src/features/dashboard/components/app-form/app-form.tsx
@@ -0,0 +1,428 @@
+import React, { Dispatch, ReactNode, SetStateAction, useEffect, useState } from 'react';
+import clsx from 'clsx';
+import { useForm } from 'react-hook-form';
+import { Button, Text } from '@deriv/ui';
+import Translate, { translate } from '@docusaurus/Translate';
+import { yupResolver } from '@hookform/resolvers/yup';
+import useWS from '@site/src/hooks/useWs';
+import useApiToken from '@site/src/hooks/useApiToken';
+import useAuthContext from '@site/src/hooks/useAuthContext';
+import CustomSelectDropdown from '@site/src/components/CustomSelectDropdown';
+import SelectedToken from '@site/src/components/CustomSelectDropdown/token-dropdown/SelectedToken';
+import TokenDropdown from '@site/src/components/CustomSelectDropdown/token-dropdown/TokenDropdown';
+import SelectedAccount from '@site/src/components/CustomSelectDropdown/account-dropdown/SelectedAccount';
+import AccountDropdown from '@site/src/components/CustomSelectDropdown/account-dropdown/AccountDropdown';
+import CustomCheckbox from '@site/src/components/CustomCheckbox';
+import useAppManager from '@site/src/hooks/useAppManager';
+import { appRegisterSchema, appEditSchema, IRegisterAppForm } from '../../types';
+import RestrictionsAppname from '../restrictions-appname';
+import styles from './app-form.module.scss';
+import { Link } from '@deriv-com/quill-ui';
+
+
+type TAppFormProps = {
+  initialValues?: Partial<IRegisterAppForm>;
+  isUpdating?: boolean;
+  submit: (data: IRegisterAppForm) => void;
+  is_update_mode?: boolean;
+  formIsCleared: boolean;
+  setFormIsCleared: Dispatch<SetStateAction<boolean>>;
+  cancelButton?: () => ReactNode;
+};
+
+const AppForm = ({
+  initialValues,
+  submit,
+  is_update_mode = false,
+  formIsCleared,
+  setFormIsCleared,
+  cancelButton,
+}: TAppFormProps) => {
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm<IRegisterAppForm>({
+    mode: 'all',
+    criteriaMode: 'firstError',
+    resolver: yupResolver(is_update_mode ? appEditSchema : appRegisterSchema),
+    defaultValues: initialValues,
+  });
+
+  const { currentToken, tokens } = useApiToken();
+  const { currentLoginAccount } = useAuthContext();
+  const { getApps, apps } = useAppManager();
+  const [input_value, setInputValue] = useState('');
+  const { is_loading } = useWS('app_register');
+
+  useEffect(() => {
+    if (formIsCleared) {
+      setInputValue('');
+      setFormIsCleared(false);
+      reset();
+    }
+    getApps();
+  }, [formIsCleared, getApps]);
+
+  const [display_restrictions, setDisplayRestrictions] = useState(true);
+
+  const admin_token = currentToken?.scopes?.includes('admin') && currentToken.token;
+
+  const appNamesArray = apps?.map((app) => app.name);
+  const app_name_exists = appNamesArray?.includes(input_value);
+  const disable_register_btn =
+    app_name_exists || input_value === '' || Object.keys(errors).length > 0 || is_loading;
+  const disable_btn = is_update_mode ? is_loading : disable_register_btn;
+  const error_border_active = (!is_update_mode && app_name_exists) || errors.name;
+
+  useEffect(() => {
+    errors.name?.message || app_name_exists
+      ? setDisplayRestrictions(false)
+      : setDisplayRestrictions(true);
+  }, [errors.name?.message, app_name_exists]);
+
+  const accountHasAdminToken = () => {
+    const admin_check_array = [];
+    tokens.forEach((token) => {
+      const has_admin_scope = token.scopes && token.scopes.includes('admin');
+      has_admin_scope ? admin_check_array.push(true) : admin_check_array.push(false);
+    });
+    return admin_check_array.includes(true);
+  };
+
+  const AccountErrorMessage = () => (
+    <React.Fragment>
+      {!accountHasAdminToken() && (
+        <Text as='span' type='paragraph-1' className='error-message'>
+          <Translate>
+            This account doesn&apos;t have API tokens with the admin scope. Choose another account.
+          </Translate>
+        </Text>
+      )}
+    </React.Fragment>
+  );
+
+  const renderButtons = () => {
+    return (
+      <div className={styles.buttons}>
+        <Button
+          role='submit'
+          disabled={disable_btn}
+          style={{
+            borderRadius: '0.935rem',
+          }}
+          size='large'
+        >
+          {is_update_mode ? (
+            <Translate>Update Application</Translate>
+          ) : (
+            <Translate>Register Application</Translate>
+          )}
+        </Button>
+        {is_update_mode && cancelButton()}
+      </div>
+    );
+  };
+  return (
+    <React.Fragment>
+      <form role={'form'} className={styles.apps_form} onSubmit={handleSubmit(submit)}>
+        <div
+          className={`${styles.formContent} ${!admin_token && !is_update_mode && styles.noAdmin}`}
+        >
+          <div>
+            <div className={styles.apiTokenWrapper}>
+              <div className={styles.formHeaderContainer}>
+                <h4>
+                  <Translate>App information</Translate>
+                </h4>
+                {!is_update_mode && (
+                  <Text as='p' type='paragraph-1' className={styles.wrapperHeading}>
+                    <Translate>Select your api token ( it should have admin scope )</Translate>
+                  </Text>
+                )}
+              </div>
+              {!is_update_mode && (
+                <React.Fragment>
+                  <div data-testid='select-account'>
+                    <CustomSelectDropdown
+                      label={translate({ message: 'Your account' })}
+                      value={currentLoginAccount && currentLoginAccount.name}
+                      register={register('currency_account')}
+                      is_error={!accountHasAdminToken()}
+                    >
+                      <SelectedAccount />
+                      <AccountDropdown />
+                      <AccountErrorMessage />
+                    </CustomSelectDropdown>
+                  </div>
+                  <div
+                    className={
+                      !accountHasAdminToken() && !is_update_mode ? styles.disableTokenDropdown : ''
+                    }
+                    data-testid='select-token'
+                  >
+                    <CustomSelectDropdown
+                      label={translate({ message: 'Choose your API token with the admin scope' })}
+                      value={admin_token}
+                      register={register('api_token')}
+                      data-testid='select-token'
+                    >
+                      <SelectedToken />
+                      <TokenDropdown admin_only />
+                    </CustomSelectDropdown>
+                  </div>
+                </React.Fragment>
+              )}
+              <div>
+                <div
+                  className={`${styles.helperMargin} ${styles.customTextInput} ${error_border_active ? styles.errorAppname : ''
+                    }`}
+                  id='custom-text-input'
+                  onChange={(e) => {
+                    setInputValue((e.target as HTMLInputElement).value);
+                  }}
+                >
+                  <input {...register('name')} type='text' id='app_name' placeholder=' ' />
+                  <label htmlFor='app_name'>
+                    <Translate>App name (required)</Translate>
+                  </label>
+                </div>
+                {errors && errors.name ? (
+                  <Text as='span' type='paragraph-1' className='error-message'>
+                    {errors.name.message}
+                  </Text>
+                ) : !is_update_mode && app_name_exists ? (
+                  <Text as='span' type='paragraph-1' className='error-message'>
+                    <Translate>That name is taken. Choose another.</Translate>
+                  </Text>
+                ) : (
+                  display_restrictions && <RestrictionsAppname />
+                )}
+              </div>
+            </div>
+            <div className={styles.formHeaderContainer}>
+              <h4>
+                <Translate>Markup</Translate>
+              </h4>
+              <div className={styles.markup}>
+                <Text as='span' type='paragraph-1' className={styles.formsubHeading}>
+                  <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>
+                      <Translate>Note: Markup is only available for real accounts.</Translate>
+                    </b>
+                  </p>
+                </Text>
+              </div>
+            </div>
+            <div>
+              <div>
+                <div className={clsx(styles.customTextInput)} id='custom-text-input'>
+                  <input
+                    {...register('app_markup_percentage')}
+                    type='number'
+                    step='0.01'
+                    id='app_markup_percentage'
+                    className='last'
+                    defaultValue={0}
+                    placeholder=' '
+                  />
+                  <label htmlFor='app_markup_percentage'>
+                    <Translate>Markup percentage (optional)</Translate>
+                  </label>
+                </div>
+                <Text
+                  as='p'
+                  type='paragraph-2'
+                  className={`${styles.helperText} ${styles.formsubHeading}`}
+                >
+                  <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'>
+                    {errors.app_markup_percentage.message}
+                  </Text>
+                )}
+              </div>
+            </div>
+            <div className={styles.formHeaderContainer}>
+              <h4>
+                <Translate>OAuth details</Translate>
+              </h4>
+              <div>
+                <Text as='span' type='paragraph-1' className={styles.formsubHeading}>
+                  <Translate>
+                    This allows clients to log in to your app using their Deriv accounts without an
+                    API token.
+                  </Translate>
+                </Text>
+              </div>
+            </div>
+            <div>
+              <div className={styles.customTextInput} id='custom-text-input'>
+                <input
+                  {...register('redirect_uri')}
+                  id='app_redirect_uri'
+                  type='text'
+                  placeholder=' '
+                />
+                <label htmlFor='app_redirect_uri'>
+                  <Translate>Redirect URL (optional)</Translate>
+                </label>
+              </div>
+              <Text
+                as='p'
+                type='paragraph-2'
+                className={`${styles.helperText} ${styles.formsubHeading}`}
+              >
+                <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>
+              )}
+            </div>
+
+            <div>
+              <div
+                className={`${styles.verificationMargin} ${styles.customTextInput}`}
+                id='custom-text-input'
+              >
+                <input
+                  {...register('verification_uri')}
+                  id='app_verification_uri'
+                  type='text'
+                  placeholder=' '
+                />
+                <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>
+              )}
+            </div>
+
+            <div className={styles.scopes} id='register_scopes'>
+              <div>
+                <div className={styles.formHeaderContainer}>
+                  <h4>
+                    <Translate>Scope of authorization</Translate>
+                  </h4>
+                  <div className={styles.subHeading}>
+                    <span>
+                      <Translate>Select the scope for your app:</Translate>
+                    </span>
+                  </div>
+                </div>
+              </div>
+              <div className={styles.scopesWrapper}>
+                <div className={styles.customCheckboxWrapper}>
+                  <CustomCheckbox name='read' id='read-scope' register={register('read')}>
+                    <label htmlFor='read-scope'>
+                      <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>
+                        <Translate>Trade</Translate>
+                      </b>
+                      :
+                      <Translate>
+                        You&apos;ll be able to buy and sell contracts on your clients&apos; behalf.
+                      </Translate>
+                    </label>
+                  </CustomCheckbox>
+                </div>
+                <div className={styles.customCheckboxWrapper}>
+                  <CustomCheckbox
+                    name='trading_information'
+                    id='trading_information-scope'
+                    register={register('trading_information')}
+                  >
+                    <label htmlFor='trading_information-scope'>
+                      <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>
+                        <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>
+                        <Translate>Admin</Translate>
+                      </b>
+                      :
+                      <Translate>
+                        Full account access, including the access to manage security tokens.
+                      </Translate>
+                    </label>
+                  </CustomCheckbox>
+                </div>
+              </div>
+            </div>
+            <div className={styles.termsOfConditionRegister}>
+              <span>
+                {translate({ message: `By registering your application, you acknowledge that you‘ve read and accepted the Deriv API` })} {' '}
+              </span>
+              <Link
+                href='https://deriv.com/tnc/business-partners-api-user.pdf'
+                target='_blank'
+                rel='noreferrer'
+              >
+                <Translate>terms and conditions</Translate>
+              </Link>
+            </div>
+            {renderButtons && <div className={styles.submit_container}>{renderButtons()}</div>}
+          </div>
+        </div>
+      </form>
+    </React.Fragment>
+  );
+};
+
+export default AppForm;
diff --git a/src/features/dashboard/components/app-form/index.ts b/src/features/dashboard/components/app-form/index.ts
new file mode 100644
index 000000000..8e48024a8
--- /dev/null
+++ b/src/features/dashboard/components/app-form/index.ts
@@ -0,0 +1,3 @@
+import AppForm from './app-form';
+
+export default AppForm;
diff --git a/src/features/dashboard/components/dialogs/update-app-dialog/__tests__/update-app-dialog.test.tsx b/src/features/dashboard/components/dialogs/update-app-dialog/__tests__/update-app-dialog.test.tsx
new file mode 100644
index 000000000..544251225
--- /dev/null
+++ b/src/features/dashboard/components/dialogs/update-app-dialog/__tests__/update-app-dialog.test.tsx
@@ -0,0 +1,221 @@
+import React, { act } from 'react';
+import { ApplicationObject } from '@deriv/api-types';
+import useApiToken from '@site/src/hooks/useApiToken';
+import useAppManager from '@site/src/hooks/useAppManager';
+import { render, screen, cleanup } from '@site/src/test-utils';
+import makeMockSocket from '@site/src/__mocks__/socket.mock';
+import userEvent from '@testing-library/user-event';
+import { WS } from 'jest-websocket-mock';
+import UpdateAppDialog from '..';
+
+jest.mock('@site/src/hooks/useApiToken');
+
+const mockUseApiToken = useApiToken as jest.MockedFunction<
+  () => Partial<ReturnType<typeof useApiToken>>
+>;
+
+mockUseApiToken.mockImplementation(() => ({
+  tokens: [
+    {
+      display_name: 'first',
+      last_used: '',
+      scopes: ['read', 'trade'],
+      token: 'first_token',
+      valid_for_ip: '',
+    },
+    {
+      display_name: 'second',
+      last_used: '2023-01-19 15:09:39',
+      scopes: ['read', 'trade', 'payments', 'trading_information', 'admin'],
+      token: 'first_token',
+      valid_for_ip: '',
+    },
+    {
+      display_name: 'third',
+      last_used: '',
+      scopes: ['read', 'trade', 'payments', 'admin'],
+      token: 'third_token',
+      valid_for_ip: '',
+    },
+  ],
+}));
+
+const connection = makeMockSocket();
+
+jest.mock('@site/src/hooks/useAppManager');
+
+const mockGetApps = jest.fn();
+
+const mockUseAppManager = useAppManager as jest.MockedFunction<
+  () => Partial<ReturnType<typeof useAppManager>>
+>;
+
+mockUseAppManager.mockImplementation(() => ({
+  getApps: mockGetApps,
+}));
+
+const fakeApp: ApplicationObject = {
+  active: 1,
+  app_id: 12345,
+  app_markup_percentage: 0,
+  appstore: '',
+  github: '',
+  googleplay: '',
+  homepage: '',
+  name: 'testApp',
+  redirect_uri: 'https://example.com',
+  scopes: ['read', 'trade', 'trading_information'],
+  verification_uri: 'https://example.com',
+  last_used: '',
+  official: 0,
+};
+
+describe('Update App Dialog', () => {
+  const mockOnClose = jest.fn();
+
+  let wsServer: WS;
+
+  beforeEach(async () => {
+    wsServer = await connection.setup();
+    await wsServer.connected;
+    render(<UpdateAppDialog onClose={mockOnClose} app={fakeApp} />);
+  });
+
+  afterEach(() => {
+    connection.tearDown();
+    cleanup();
+  });
+
+  it('Should render the form', () => {
+    const form = screen.getByRole('form');
+    expect(form).toBeInTheDocument();
+  });
+
+  it('Should render button properly ', () => {
+    const primaryButton = screen.getByRole('submit');
+    const secondaryButton = screen.getByRole('button', { name: /cancel/i });
+
+    expect(primaryButton).toBeInTheDocument();
+    expect(secondaryButton).toBeInTheDocument();
+  });
+
+  it('Should close the modal on cancel button click', async () => {
+    const secondaryButton = screen.getByRole('button', { name: /cancel/i });
+    await act(async () => {
+      await userEvent.click(secondaryButton);
+    });
+
+    expect(mockOnClose).toBeCalled();
+  });
+
+  it('Should close the modal on modal close button click', async () => {
+    const closeButton = screen.getByTestId('close-button');
+    await act(async () => {
+      await userEvent.click(closeButton);
+    });
+
+    expect(mockOnClose).toBeCalled();
+  });
+
+  it('Should update application on submit click', async () => {
+    const submitButton = screen.getByText('Update Application');
+
+    const tokenNameInput = screen.getByRole<HTMLInputElement>('textbox', {
+      name: 'App name (required)',
+    });
+
+    await act(async () => {
+      await userEvent.clear(tokenNameInput);
+      await userEvent.type(tokenNameInput, 'test app name updated');
+
+      await userEvent.click(submitButton);
+    });
+
+    await expect(wsServer).toReceiveMessage({
+      app_markup_percentage: 0,
+      app_update: 12345,
+      name: 'test app name updated',
+      redirect_uri: 'https://example.com',
+      req_id: 1,
+      scopes: ['read', 'trade', 'trading_information'],
+      verification_uri: 'https://example.com',
+    });
+
+    wsServer.send({
+      app_update: {
+        app_markup_percentage: 0,
+        app_update: 12345,
+        name: 'test app name updated',
+        redirect_uri: 'https://example.com',
+        req_id: 1,
+        scopes: ['read', 'trade', 'trading_information'],
+        verification_uri: 'https://example.com',
+      },
+      echo_req: {
+        app_markup_percentage: 0,
+        app_update: 35565,
+        name: 'test app name updated',
+        redirect_uri: 'https://example.com',
+        req_id: 1,
+        scopes: ['read', 'trade', 'trading_information'],
+        verification_uri: 'https://example.com',
+      },
+      msg_type: 'app_update',
+      req_id: 1,
+    });
+
+    await screen.findByText('Update App');
+    expect(mockGetApps).toBeCalled();
+    expect(mockOnClose).toBeCalled();
+  });
+
+  it.skip('Should render error on error response', async () => {
+    const submitButton = screen.getByText('Update Application');
+
+    const tokenNameInput = screen.getByRole<HTMLInputElement>('textbox', {
+      name: 'App name (required)',
+    });
+
+    await act(async () => {
+      await userEvent.clear(tokenNameInput);
+      await userEvent.type(tokenNameInput, 'test app wrong name fake');
+
+      await userEvent.click(submitButton);
+    });
+
+    await expect(wsServer).toReceiveMessage({
+      app_markup_percentage: 0,
+      app_update: 12345,
+      name: 'test app wrong name fake',
+      redirect_uri: 'https://example.com',
+      req_id: 1,
+      scopes: ['read', 'trade', 'trading_information'],
+      verification_uri: 'https://example.com',
+    });
+
+    wsServer.send({
+      echo_req: {
+        app_markup_percentage: 0,
+        app_update: 12345,
+        name: 'test app wrong name fake',
+        redirect_uri: 'https://example.com',
+        req_id: 4,
+        scopes: ['read', 'trade', 'trading_information'],
+        verification_uri: 'https://example.com',
+      },
+      error: {
+        code: 'InputValidationFailed',
+        details: {
+          name: "String does not match '^[\\w\\s-]{1,48}$'",
+        },
+        message: 'Input validation failed: name',
+      },
+      msg_type: 'app_update',
+      req_id: 1,
+    });
+
+    const errorContent = await screen.findByText('Input validation failed: name');
+
+    expect(errorContent).toBeInTheDocument();
+  });
+});
diff --git a/src/features/dashboard/components/dialogs/update-app-dialog/index.ts b/src/features/dashboard/components/dialogs/update-app-dialog/index.ts
new file mode 100644
index 000000000..29f5f3850
--- /dev/null
+++ b/src/features/dashboard/components/dialogs/update-app-dialog/index.ts
@@ -0,0 +1,3 @@
+import UpdateAppDialog from './update-app-dialog';
+
+export default UpdateAppDialog;
diff --git a/src/features/dashboard/components/dialogs/update-app-dialog/update-app-dialog.module.scss b/src/features/dashboard/components/dialogs/update-app-dialog/update-app-dialog.module.scss
new file mode 100644
index 000000000..ca2bd56ed
--- /dev/null
+++ b/src/features/dashboard/components/dialogs/update-app-dialog/update-app-dialog.module.scss
@@ -0,0 +1,11 @@
+@use 'src/styles/utility' as *;
+
+.update_dialog {
+  height: 80vh !important;
+  overflow: auto;
+  width: 80vw;
+
+  .update_app_content {
+    margin: rem(1);
+  }
+}
diff --git a/src/features/dashboard/components/dialogs/update-app-dialog/update-app-dialog.tsx b/src/features/dashboard/components/dialogs/update-app-dialog/update-app-dialog.tsx
new file mode 100644
index 000000000..0e75f2d3d
--- /dev/null
+++ b/src/features/dashboard/components/dialogs/update-app-dialog/update-app-dialog.tsx
@@ -0,0 +1,115 @@
+import React, { useCallback, useEffect } from 'react';
+import AppForm from '../../app-form';
+import useWS from '@site/src/hooks/useWs';
+import useAppManager from '@site/src/hooks/useAppManager';
+import { Button, Modal } from '@deriv/ui';
+import { IRegisterAppForm } from '../../../types';
+import { ApplicationObject } from '@deriv/api-types';
+import { RegisterAppDialogError } from '../register-app-dialog-error';
+import { scopesArrayToObject, scopesObjectToArray } from '@site/src/utils';
+import styles from './update-app-dialog.module.scss';
+import Translate, { translate } from '@docusaurus/Translate';
+
+interface IUpdateAppDialog {
+  app: ApplicationObject;
+  onClose: () => void;
+}
+
+const UpdateAppDialog = ({ app, onClose }: IUpdateAppDialog) => {
+  const { send: updateApp, data, error, clear } = useWS('app_update');
+  const { getApps } = useAppManager();
+
+  const scopes = scopesArrayToObject(app.scopes);
+  const initialValues: Partial<IRegisterAppForm> = {
+    ...app,
+    ...scopes,
+    app_markup_percentage: app.app_markup_percentage,
+  };
+
+  const onOpenChange = useCallback(
+    (open: boolean) => {
+      if (!open) {
+        onClose();
+      }
+    },
+    [onClose],
+  );
+
+  useEffect(() => {
+    if (data) {
+      getApps();
+      onClose();
+    }
+  }, [data, getApps, onClose]);
+
+  const onSubmit = useCallback(
+    (data: IRegisterAppForm) => {
+      const { name, redirect_uri, verification_uri, app_markup_percentage } = data;
+
+      const has_redirect_uri = redirect_uri !== '' && { redirect_uri };
+      const has_verification_uri = verification_uri !== '' && { verification_uri };
+      const markup = {
+        app_markup_percentage: Number(app_markup_percentage),
+      };
+
+      const selectedScopes = scopesObjectToArray({
+        admin: data.admin,
+        payments: data.payments,
+        read: data.read,
+        trade: data.trade,
+        trading_information: data.trading_information,
+      });
+      updateApp({
+        app_update: data.app_id,
+        name,
+        ...has_redirect_uri,
+        ...has_verification_uri,
+        ...markup,
+        scopes: selectedScopes,
+      });
+    },
+    [updateApp],
+  );
+
+  const cancelButton = () => {
+    return (
+      <Button
+        onClick={onClose}
+        style={{
+          borderRadius: '0.935rem',
+        }}
+      >
+        <Translate>Cancel</Translate>
+      </Button>
+    );
+  };
+
+  return (
+    <Modal defaultOpen onOpenChange={onOpenChange}>
+      <Modal.Portal>
+        <div className='modal-overlay'>
+          <Modal.Overlay />
+          <Modal.PageContent
+            title={translate({ message: 'Update App' })}
+            has_close_button
+            has_title_separator
+            className={styles.update_dialog}
+          >
+            <div className={styles.update_app_content}>
+              <AppForm
+                is_update_mode
+                cancelButton={cancelButton}
+                submit={onSubmit}
+                initialValues={initialValues}
+                isUpdating
+              />
+            </div>
+            {error && <RegisterAppDialogError error={error} onClose={clear} />}
+          </Modal.PageContent>
+        </div>
+      </Modal.Portal>
+    </Modal>
+  );
+};
+
+export default UpdateAppDialog;
diff --git a/src/features/dashboard/components/no-apps/__tests__/no-apps.test.tsx b/src/features/dashboard/components/no-apps/__tests__/no-apps.test.tsx
new file mode 100644
index 000000000..7d56bf8a2
--- /dev/null
+++ b/src/features/dashboard/components/no-apps/__tests__/no-apps.test.tsx
@@ -0,0 +1,45 @@
+import useAppManager from '@site/src/hooks/useAppManager';
+import { render, cleanup, screen } from '@site/src/test-utils';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import NoApps from '..';
+import { TDashboardTab } from '@site/src/contexts/app-manager/app-manager.context';
+
+jest.mock('@site/src/hooks/useAppManager');
+
+const mockUseAppManager = useAppManager as jest.MockedFunction<
+  () => Partial<ReturnType<typeof useAppManager>>
+>;
+
+const mockUpdateCurrentTab = jest.fn();
+
+mockUseAppManager.mockImplementation(() => ({
+  updateCurrentTab: mockUpdateCurrentTab,
+}));
+
+describe('No Apps', () => {
+  beforeEach(() => {
+    render(<NoApps />);
+  });
+
+  afterEach(() => {
+    cleanup();
+    jest.clearAllMocks();
+  });
+
+  it('Should render description', () => {
+    const descriptionText = screen.getByTestId('no-apps-description');
+    expect(descriptionText).toHaveTextContent(
+      'To see your details reflected, please register your app via the registration form.',
+    );
+  });
+
+  it('Should navigate to REGISTER_APP Tab on Register now click', async () => {
+    const registerNowButton = screen.getByRole('button');
+
+    await userEvent.click(registerNowButton);
+
+    expect(mockUpdateCurrentTab).toHaveBeenCalledTimes(1);
+    expect(mockUpdateCurrentTab).toHaveBeenCalledWith(TDashboardTab.REGISTER_APP);
+  });
+});
diff --git a/src/features/dashboard/components/no-apps/index.ts b/src/features/dashboard/components/no-apps/index.ts
new file mode 100644
index 000000000..420404f9c
--- /dev/null
+++ b/src/features/dashboard/components/no-apps/index.ts
@@ -0,0 +1,3 @@
+import NoApps from './no-apps';
+
+export default NoApps;
diff --git a/src/features/dashboard/components/no-apps/no-apps.module.scss b/src/features/dashboard/components/no-apps/no-apps.module.scss
new file mode 100644
index 000000000..fd1769d7c
--- /dev/null
+++ b/src/features/dashboard/components/no-apps/no-apps.module.scss
@@ -0,0 +1,48 @@
+@use 'src/styles/utility' as *;
+
+.noAppsWrapper {
+  width: calc(100% - rem(3.2));
+}
+
+.noApps {
+  padding-top: rem(7.2);
+  margin: 0 auto;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: calc(rem(32) - rem(3.2));
+  position: relative;
+  margin: 0 auto;
+}
+
+.noAppsIcon {
+  margin-top: rem(1.6);
+  margin-bottom: rem(2);
+  background-image: url(/img/table-empty.svg);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  width: rem(10);
+  height: rem(10);
+}
+
+.noAppsText p {
+  text-align: center;
+  margin-bottom: rem(2);
+}
+
+[data-state*='responsive.desktop'] {
+  .noAppsWrapper {
+    position: relative;
+  }
+  .noApps {
+    padding-top: rem(7.2);
+    margin: 0 auto;
+    position: relative;
+  }
+  .noAppsText {
+    width: rem(39);
+  }
+}
diff --git a/src/features/dashboard/components/no-apps/no-apps.tsx b/src/features/dashboard/components/no-apps/no-apps.tsx
new file mode 100644
index 000000000..eeca662b0
--- /dev/null
+++ b/src/features/dashboard/components/no-apps/no-apps.tsx
@@ -0,0 +1,34 @@
+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 { TDashboardTab } from '@site/src/contexts/app-manager/app-manager.context';
+import Translate from '@docusaurus/Translate';
+
+const NoApps = () => {
+  const { updateCurrentTab } = useAppManager();
+
+  const onRegisterClick = useCallback(() => {
+    updateCurrentTab(TDashboardTab.REGISTER_APP);
+  }, [updateCurrentTab]);
+
+  return (
+    <div className={styles.noAppsWrapper} data-testid='no-apps'>
+      <div className={styles.noApps}>
+        <div className={styles.noAppsIcon} />
+        <div className={styles.noAppsText}>
+          <Text as='p' type='paragraph-1' data-testid='no-apps-description'>
+            <Translate>
+              To see your details reflected, please register your app via the registration form.
+            </Translate>
+          </Text>
+        </div>
+        <Button color='secondary' onClick={onRegisterClick}>
+          <Translate>Register now</Translate>
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default NoApps;
diff --git a/src/features/dashboard/components/token-register/token-register.tsx b/src/features/dashboard/components/token-register/token-register.tsx
index 6d09bddd8..080583aa7 100644
--- a/src/features/dashboard/components/token-register/token-register.tsx
+++ b/src/features/dashboard/components/token-register/token-register.tsx
@@ -5,13 +5,51 @@ import { yupResolver } from '@hookform/resolvers/yup';
 import { scopesObjectToArray } from '@site/src/utils';
 import ApiTokenCard from '../api-token-card';
 import useCreateToken from '@site/src/features/dashboard/hooks/useCreateToken';
+import * as yup from 'yup';
+import './token-register.scss';
 import CreateTokenField from '../api-token-form/create-token-field';
 import AccountSwitcher from '@site/src/components/AccountSwitcher';
 import Translate, { translate } from '@docusaurus/Translate';
-import { TApiTokenForm, tokenRegisterSchema, TScope } from './types';
-import './token-register.scss';
 
-// FIXME: Move scopes to an exportable separate file for reusability (scopes.ts)
+const schema = yup
+  .object({
+    read: yup.boolean(),
+    trade: yup.boolean(),
+    payments: yup.boolean(),
+    trading_information: yup.boolean(),
+    admin: yup.boolean(),
+    name: yup
+      .string()
+      .min(2, translate({ message: 'Your token name must be atleast 2 characters long.' }))
+      .max(32, translate({ message: 'Only up to 32 characters are allowed.' }))
+      .matches(/^(?=.*[a-zA-Z0-9])[a-zA-Z0-9_ ]*$/, {
+        message: translate({
+          message:
+            'Only alphanumeric characters with spaces and underscores are allowed. (Example: my_application)',
+        }),
+        excludeEmptyString: true,
+      })
+      .matches(
+        /^(?!.*deriv|.*d3r1v|.*der1v|.*d3riv|.*b1nary|.*binary|.*b1n4ry|.*bin4ry|.*blnary|.*b\|nary).*$/i,
+        {
+          message: translate({
+            message: 'The name cannot contain “Binary”, “Deriv”, or similar words.',
+          }),
+          excludeEmptyString: true,
+        },
+      ),
+  })
+  .required();
+
+export type TApiTokenForm = yup.InferType<typeof schema>;
+export type TApiTokenFormItemsNames = keyof TApiTokenForm;
+
+type TScope = {
+  name: TApiTokenFormItemsNames;
+  description: string;
+  label: string;
+};
+
 const scopes: TScope[] = [
   {
     name: 'read',
@@ -66,7 +104,7 @@ const TokenRegister = (props: HTMLAttributes<HTMLFormElement>) => {
     reset,
     formState: { errors },
   } = useForm<TApiTokenForm>({
-    resolver: yupResolver(tokenRegisterSchema),
+    resolver: yupResolver(schema),
     mode: 'all',
   });
   const onSubmit = useCallback(
diff --git a/src/features/dashboard/components/token-register/types.ts b/src/features/dashboard/components/token-register/types.ts
index 405384a41..70f5c9476 100644
--- a/src/features/dashboard/components/token-register/types.ts
+++ b/src/features/dashboard/components/token-register/types.ts
@@ -1,42 +1,59 @@
 import { translate } from '@docusaurus/Translate';
+import { UseFormRegisterReturn } from 'react-hook-form';
 import * as yup from 'yup';
 
-export const tokenRegisterSchema = yup
-  .object({
-    read: yup.boolean(),
-    trade: yup.boolean(),
-    payments: yup.boolean(),
-    trading_information: yup.boolean(),
-    admin: yup.boolean(),
-    name: yup
-      .string()
-      .min(2, translate({ message: 'Your token name must be atleast 2 characters long.' }))
-      .max(32, translate({ message: 'Only up to 32 characters are allowed.' }))
-      .matches(/^(?=.*[a-zA-Z0-9])[a-zA-Z0-9_ ]*$/, {
-        message: translate({
-          message:
-            'Only alphanumeric characters with spaces and underscores are allowed. (Example: my_application)',
-        }),
+export const token_name_error_map = {
+  error_code_1: translate({
+    message: 'Only alphanumeric characters with spaces and underscores are allowed.',
+  }),
+  error_code_2: translate({ message: `Only 2-32 characters are allowed` }),
+  error_code_3: translate({
+    message: `No duplicate token names are allowed for the same account.`,
+  }),
+  error_code_4: translate({
+    message: `No keywords "deriv" or "binary" or words that look similar, e.g. "_binary_" or "d3riv" are allowed.`,
+  }),
+};
+
+export const tokenRegisterSchema = yup.object({
+  account_type: yup.string().required(translate({ message: 'Select an account type.' })),
+  token_name: yup
+    .string()
+    .required(translate({ message: 'Enter your token name.' }))
+    .min(2, token_name_error_map.error_code_2)
+    .max(32, token_name_error_map.error_code_2)
+    .matches(/^(?=.*[a-zA-Z0-9])[a-zA-Z0-9_ ]*$/, {
+      message: token_name_error_map.error_code_1,
+      excludeEmptyString: true,
+    })
+    .matches(
+      /^(?!.*deriv|.*d3r1v|.*der1v|.*d3riv|.*b1nary|.*binary|.*b1n4ry|.*bin4ry|.*blnary|.*b\|nary).*$/i,
+      {
+        message: token_name_error_map.error_code_4,
         excludeEmptyString: true,
-      })
-      .matches(
-        /^(?!.*deriv|.*d3r1v|.*der1v|.*d3riv|.*b1nary|.*binary|.*b1n4ry|.*bin4ry|.*blnary|.*b\|nary).*$/i,
-        {
-          message: translate({
-            message: 'The name cannot contain “Binary”, “Deriv”, or similar words.',
-          }),
-          excludeEmptyString: true,
-        },
-      ),
-  })
-  .required();
+      },
+    ),
+  read: yup.boolean(),
+  trade: yup.boolean(),
+  payments: yup.boolean(),
+  trading_information: yup.boolean(),
+  admin: yup.boolean(),
+});
+
+export type ITokenRegisterForm = yup.InferType<typeof tokenRegisterSchema>;
 
-export type TApiTokenForm = yup.InferType<typeof tokenRegisterSchema>;
+export type TTokenRegisterProps = {
+  onCancel?: () => void;
+  submit: (data: ITokenRegisterForm) => void;
+};
 
-export type TApiTokenFormItemsNames = keyof TApiTokenForm;
+export type TCustomCheckboxProps = {
+  name: string;
+  id: string;
+  register: UseFormRegisterReturn;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+};
 
-export type TScope = {
-  name: TApiTokenFormItemsNames;
-  description: string;
-  label: string;
-};
\ No newline at end of file
+export type TRestrictionComponentProps = {
+  error: string;
+};
diff --git a/src/features/dashboard/hooks/useRegisterApp/__tests__/useRegisterApp.test.tsx b/src/features/dashboard/hooks/useRegisterApp/__tests__/useRegisterApp.test.tsx
new file mode 100644
index 000000000..1de91d550
--- /dev/null
+++ b/src/features/dashboard/hooks/useRegisterApp/__tests__/useRegisterApp.test.tsx
@@ -0,0 +1,88 @@
+import makeMockSocket from '@site/src/__mocks__/socket.mock';
+import { cleanup, renderHook, act, waitFor } from '@testing-library/react';
+import { WS } from 'jest-websocket-mock';
+import useRegisterApp from '..';
+
+const connection = makeMockSocket();
+
+describe('Use Delete App', () => {
+  let wsServer: WS;
+  beforeEach(async () => {
+    wsServer = await connection.setup();
+    await wsServer.connected;
+  });
+
+  afterEach(() => {
+    connection.tearDown();
+    cleanup();
+  });
+
+  it('Should register app with provided values', async () => {
+    const { result } = renderHook(() => useRegisterApp());
+
+    expect(result.current.is_loading).toBeFalsy();
+
+    act(() => {
+      result.current.registerApp({
+        name: 'app',
+        scopes: ['admin', 'payments'],
+        redirect_uri: 'https://example.com',
+        verification_uri: 'https://example.com',
+      });
+    });
+
+    expect(result.current.is_loading).toBeTruthy();
+
+    await expect(wsServer).toReceiveMessage({
+      app_register: 1,
+      name: 'app',
+      redirect_uri: 'https://example.com',
+      req_id: 1,
+      scopes: ['admin', 'payments'],
+      verification_uri: 'https://example.com',
+    });
+
+    wsServer.send({
+      app_register: {
+        active: 1,
+        app_id: 12345,
+        app_markup_percentage: 0,
+        appstore: '',
+        github: '',
+        googleplay: '',
+        homepage: '',
+        name: 'app',
+        redirect_uri: 'https://example.com',
+        scopes: ['admin', 'payments'],
+        verification_uri: 'https://example.com',
+      },
+      echo_req: {
+        app_register: 1,
+        name: 'app',
+        redirect_uri: 'https://example.com',
+        req_id: 1,
+        scopes: ['admin', 'payments'],
+        verification_uri: 'https://example.com',
+      },
+      msg_type: 'app_register',
+      req_id: 1,
+    });
+
+    await waitFor(() => {
+      expect(result.current.is_loading).toBeFalsy();
+      expect(result.current.data).toStrictEqual({
+        active: 1,
+        app_id: 12345,
+        app_markup_percentage: 0,
+        appstore: '',
+        github: '',
+        googleplay: '',
+        homepage: '',
+        name: 'app',
+        redirect_uri: 'https://example.com',
+        scopes: ['admin', 'payments'],
+        verification_uri: 'https://example.com',
+      });
+    });
+  });
+});
diff --git a/src/features/dashboard/hooks/useRegisterApp/index.tsx b/src/features/dashboard/hooks/useRegisterApp/index.tsx
new file mode 100644
index 000000000..bbe5fd674
--- /dev/null
+++ b/src/features/dashboard/hooks/useRegisterApp/index.tsx
@@ -0,0 +1,18 @@
+import { TSocketRequestCleaned } from '@site/src/configs/websocket/types';
+import useWS from '@site/src/hooks/useWs';
+import { useCallback } from 'react';
+
+const useRegisterApp = () => {
+  const { send, data, is_loading } = useWS('app_register');
+
+  const registerApp = useCallback(
+    (data: TSocketRequestCleaned<'app_register'>) => {
+      send(data);
+    },
+    [send],
+  );
+
+  return { registerApp, data, is_loading };
+};
+
+export default useRegisterApp;
diff --git a/src/features/dashboard/hooks/useUpdateApp/__tests__/useUpdateApp.test.tsx b/src/features/dashboard/hooks/useUpdateApp/__tests__/useUpdateApp.test.tsx
new file mode 100644
index 000000000..14c0f3995
--- /dev/null
+++ b/src/features/dashboard/hooks/useUpdateApp/__tests__/useUpdateApp.test.tsx
@@ -0,0 +1,84 @@
+import makeMockSocket from '@site/src/__mocks__/socket.mock';
+import { cleanup, renderHook, act, waitFor } from '@testing-library/react';
+import { WS } from 'jest-websocket-mock';
+import useUpdateApp from '..';
+
+const connection = makeMockSocket();
+
+describe('Use Delete App', () => {
+  let wsServer: WS;
+  beforeEach(async () => {
+    wsServer = await connection.setup();
+    await wsServer.connected;
+  });
+
+  afterEach(() => {
+    connection.tearDown();
+    cleanup();
+  });
+
+  it('Should register app with provided values', async () => {
+    const { result } = renderHook(() => useUpdateApp());
+
+    expect(result.current.is_loading).toBeFalsy();
+
+    act(() => {
+      result.current.updateApp({
+        app_update: 1234,
+        name: 'test update app',
+        scopes: ['admin', 'trade'],
+      });
+    });
+
+    expect(result.current.is_loading).toBeTruthy();
+
+    await expect(wsServer).toReceiveMessage({
+      app_update: 1234,
+      name: 'test update app',
+      req_id: 1,
+      scopes: ['admin', 'trade'],
+    });
+
+    wsServer.send({
+      app_update: {
+        active: 1,
+        app_id: 1234,
+        app_markup_percentage: 0,
+        appstore: '',
+        github: '',
+        googleplay: '',
+        homepage: '',
+        name: 'app',
+        redirect_uri: 'https://example.com',
+        scopes: ['admin', 'trade'],
+        verification_uri: 'https://example.com',
+      },
+      echo_req: {
+        app_update: 1234,
+        name: 'test update app',
+        req_id: 1,
+        scopes: ['admin', 'trade'],
+      },
+      msg_type: 'app_update',
+      req_id: 1,
+    });
+
+    await waitFor(() => {
+      expect(result.current.is_loading).toBeFalsy();
+
+      expect(result.current.data).toStrictEqual({
+        active: 1,
+        app_id: 1234,
+        app_markup_percentage: 0,
+        appstore: '',
+        github: '',
+        googleplay: '',
+        homepage: '',
+        name: 'app',
+        redirect_uri: 'https://example.com',
+        scopes: ['admin', 'trade'],
+        verification_uri: 'https://example.com',
+      });
+    });
+  });
+});
diff --git a/src/features/dashboard/hooks/useUpdateApp/index.tsx b/src/features/dashboard/hooks/useUpdateApp/index.tsx
new file mode 100644
index 000000000..11e9c2e26
--- /dev/null
+++ b/src/features/dashboard/hooks/useUpdateApp/index.tsx
@@ -0,0 +1,18 @@
+import { TSocketRequestCleaned } from '@site/src/configs/websocket/types';
+import useWS from '@site/src/hooks/useWs';
+import { useCallback } from 'react';
+
+const useUpdateApp = () => {
+  const { send, data, is_loading } = useWS('app_update');
+
+  const updateApp = useCallback(
+    (data: TSocketRequestCleaned<'app_update'>) => {
+      send(data);
+    },
+    [send],
+  );
+
+  return { updateApp, data, is_loading };
+};
+
+export default useUpdateApp;
diff --git a/src/features/dashboard/manage-tokens/__tests__/index.test.tsx b/src/features/dashboard/manage-tokens/__tests__/index.test.tsx
new file mode 100644
index 000000000..58fbb08b4
--- /dev/null
+++ b/src/features/dashboard/manage-tokens/__tests__/index.test.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { cleanup, render, screen } from '@site/src/test-utils';
+import ApiToken from '..';
+import ApiTokenTable from '../../components/api-token-table';
+
+describe('Home Page', () => {
+  beforeEach(() => {
+    render(<ApiToken />);
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('Should render Page Heading', () => {
+    const heading = screen.getByRole('heading', { level: 2 });
+    expect(heading).toBeInTheDocument();
+    expect(heading.textContent).toMatch(/API Token Manager/i);
+  });
+
+  it('Should render api token from', () => {
+    const form = screen.getByRole('form');
+    expect(form).toBeInTheDocument();
+  });
+
+  it('Should render api token table', () => {
+    <ApiTokenTable />;
+  });
+});
diff --git a/src/features/dashboard/manage-tokens/index.tsx b/src/features/dashboard/manage-tokens/index.tsx
new file mode 100644
index 000000000..11796c0c0
--- /dev/null
+++ b/src/features/dashboard/manage-tokens/index.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { Text } from '@deriv/ui';
+import styles from './manage-tokens.module.scss';
+import ApiTokenForm from '../components/api-token-form/api-token-form';
+import ApiTokenTable from '../components/api-token-table';
+import Translate from '@docusaurus/Translate';
+
+const ApiToken = () => {
+  return (
+    <section className={styles.manage_tokens}>
+      <Text as='h2' type='subtitle-2'>
+        <Translate>API Token Manager</Translate>
+      </Text>
+      <ApiTokenForm />
+      <ApiTokenTable />
+    </section>
+  );
+};
+
+export default ApiToken;
diff --git a/src/features/dashboard/register-tokens/__test__/register-tokens.test.tsx b/src/features/dashboard/register-tokens/__test__/register-tokens.test.tsx
new file mode 100644
index 000000000..f0d3e9d2b
--- /dev/null
+++ b/src/features/dashboard/register-tokens/__test__/register-tokens.test.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { render, screen } from '@site/src/test-utils';
+import TokenRegistration from '..';
+
+describe('Register Tokens', () => {
+  const renderRegisterTokenComponent = () => {
+    return render(<TokenRegistration />);
+  };
+
+  it('Should render the component', () => {
+    renderRegisterTokenComponent();
+    const headingText = screen.getByText('Create new token');
+    expect(headingText).toBeInTheDocument();
+  });
+});
diff --git a/src/features/dashboard/register-tokens/index.tsx b/src/features/dashboard/register-tokens/index.tsx
new file mode 100644
index 000000000..b8d36c76b
--- /dev/null
+++ b/src/features/dashboard/register-tokens/index.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import TokenRegister from '../components/token-register';
+
+const TokenRegistration: React.FC = () => {
+  return <TokenRegister />;
+};
+
+export default TokenRegistration;
diff --git a/static/img/arrow_down.svg b/static/img/arrow_down.svg
new file mode 100644
index 000000000..1aa8372c3
--- /dev/null
+++ b/static/img/arrow_down.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M13.164 5.13a.5.5 0 1 1 .672.74l-5.5 5a.5.5 0 0 1-.672 0l-5.5-5a.499.499 0 1 1 .672-.74L8 9.824l5.164-4.694z" fill="#333" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/static/img/arrow_left.svg b/static/img/arrow_left.svg
new file mode 100644
index 000000000..18ea2acc1
--- /dev/null
+++ b/static/img/arrow_left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="m9.621 12 7.94 7.94a1.5 1.5 0 0 1-2.122 2.12l-9-9a1.5 1.5 0 0 1 0-2.12l9-9a1.5 1.5 0 0 1 2.122 2.12L9.62 12z" fill="#333"/></svg>
\ No newline at end of file
diff --git a/static/img/arrow_right.svg b/static/img/arrow_right.svg
new file mode 100644
index 000000000..864bd1913
--- /dev/null
+++ b/static/img/arrow_right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="m14.379 12-7.94 7.94a1.5 1.5 0 0 0 2.122 2.12l9-9a1.5 1.5 0 0 0 0-2.12l-9-9a1.5 1.5 0 0 0-2.122 2.12L14.38 12z" fill="#333"/></svg>
\ No newline at end of file
diff --git a/static/img/chevron-left.svg b/static/img/chevron-left.svg
new file mode 100644
index 000000000..4dfab339e
--- /dev/null
+++ b/static/img/chevron-left.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.3359 15.8359L17.8359 8.375C18.1875 7.98438 18.7734 7.98438 19.1641 8.375C19.5156 8.72656 19.5156 9.3125 19.1641 9.66406L12.2891 16.5L19.125 23.375C19.5156 23.7266 19.5156 24.3125 19.125 24.6641C18.7734 25.0547 18.1875 25.0547 17.8359 24.6641L10.3359 17.1641C9.94531 16.8125 9.94531 16.2266 10.3359 15.8359Z" fill="black"/>
+</svg>
diff --git a/static/img/circle_dot_caption_bold.svg b/static/img/circle_dot_caption_bold.svg
new file mode 100644
index 000000000..986d59044
--- /dev/null
+++ b/static/img/circle_dot_caption_bold.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="18" viewBox="0 0 12 18" role="img" id="selected_downloadable_icon_id"><g><path d="M10.875 9.5q0-1.336-.656-2.437A4.87 4.87 0 0 0 8.438 5.28 4.84 4.84 0 0 0 6 4.625q-1.29 0-2.437.656A4.87 4.87 0 0 0 1.78 7.063 4.67 4.67 0 0 0 1.125 9.5q0 1.335.656 2.438a4.87 4.87 0 0 0 1.782 1.78A4.84 4.84 0 0 0 6 14.376q1.29 0 2.438-.656a4.87 4.87 0 0 0 1.78-1.781 4.7 4.7 0 0 0 .657-2.438M0 9.5a6.14 6.14 0 0 1 .797-3A6.2 6.2 0 0 1 3 4.297 6.1 6.1 0 0 1 6 3.5q1.57 0 3 .797A6.2 6.2 0 0 1 11.203 6.5q.774 1.359.797 3a6.14 6.14 0 0 1-.797 3A6.2 6.2 0 0 1 9 14.703a6.1 6.1 0 0 1-3 .797 6.1 6.1 0 0 1-3-.797A6.2 6.2 0 0 1 .797 12.5 6.14 6.14 0 0 1 0 9.5m6-2.25q.609 0 1.125.305.516.304.82.82.305.54.305 1.125a2.26 2.26 0 0 1-1.125 1.945A2.17 2.17 0 0 1 6 11.75q-.609 0-1.125-.305A2.255 2.255 0 0 1 3.75 9.5a2.26 2.26 0 0 1 1.125-1.945A2.17 2.17 0 0 1 6 7.25"></path></g><defs><clipPath id="2d8156a41e3ae7a0243e432585a6c384__a"><path d="M0 0h12v18H0z"></path></clipPath></defs></svg>
\ No newline at end of file
diff --git a/static/img/circle_dot_caption_fill.svg b/static/img/circle_dot_caption_fill.svg
new file mode 100644
index 000000000..4c4f0a128
--- /dev/null
+++ b/static/img/circle_dot_caption_fill.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="18" viewBox="0 0 12 18" role="img" id="selected_downloadable_icon_id"><g><path d="M6 15.5a6.14 6.14 0 0 1-3-.797A6.2 6.2 0 0 1 .797 12.5 6.1 6.1 0 0 1 0 9.5q0-1.57.797-3A6.2 6.2 0 0 1 3 4.297 6.14 6.14 0 0 1 6 3.5a6.14 6.14 0 0 1 3 .797A6.2 6.2 0 0 1 11.203 6.5Q12 7.93 12 9.5a6.1 6.1 0 0 1-.797 3A6.2 6.2 0 0 1 9 14.703a6.14 6.14 0 0 1-3 .797m0-8.25q-.609 0-1.125.305A2.255 2.255 0 0 0 3.75 9.5a2.26 2.26 0 0 0 1.125 1.945q.516.305 1.125.305t1.125-.305.82-.82q.305-.54.305-1.125a2.26 2.26 0 0 0-1.125-1.945A2.17 2.17 0 0 0 6 7.25"></path></g><defs><clipPath id="b9f3465f85d580a20bc27dfd6a478a8c__a"><path d="M0 0h12v18H0z"></path></clipPath></defs></svg>
\ No newline at end of file
diff --git a/static/img/close_dialog.svg b/static/img/close_dialog.svg
new file mode 100644
index 000000000..f5a9814e5
--- /dev/null
+++ b/static/img/close_dialog.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.292894 1.70711C-0.0976312 1.31658 -0.0976312 0.683417 0.292894 0.292893C0.683418 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L6 4.58579L10.2929 0.292893C10.6834 -0.0976311 11.3166 -0.0976311 11.7071 0.292893C12.0976 0.683417 12.0976 1.31658 11.7071 1.70711L7.41421 6L11.7071 10.2929C12.0976 10.6834 12.0976 11.3166 11.7071 11.7071C11.3166 12.0976 10.6834 12.0976 10.2929 11.7071L6 7.41421L1.70711 11.7071C1.31658 12.0976 0.683418 12.0976 0.292893 11.7071C-0.0976309 11.3166 -0.0976309 10.6834 0.292893 10.2929L4.58579 6L0.292894 1.70711Z" fill="#333333"/>
+</svg>
diff --git a/static/img/delete.svg b/static/img/delete.svg
new file mode 100644
index 000000000..92adce2ba
--- /dev/null
+++ b/static/img/delete.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="18" fill="none"><path fill="#414652" d="M5.188 14.063c0 .309-.254.562-.563.562a.564.564 0 0 1-.563-.563V6.189c0-.31.254-.563.563-.563.31 0 .563.253.563.563v7.875Zm3.375 0c0 .309-.254.562-.563.562a.564.564 0 0 1-.563-.563V6.189c0-.31.254-.563.563-.563.31 0 .563.253.563.563v7.875Zm3.374 0c0 .309-.253.562-.562.562a.564.564 0 0 1-.563-.563V6.189c0-.31.254-.563.563-.563.31 0 .563.253.563.563v7.875Zm-.91-13.27.942 1.457h3.344a.563.563 0 0 1 0 1.125h-.563v11.813A2.812 2.812 0 0 1 11.937 18H4.064a2.812 2.812 0 0 1-2.813-2.813V3.376H.687a.562.562 0 1 1 0-1.125h3.344L4.94.793A1.69 1.69 0 0 1 6.372 0h3.256c.58 0 1.121.3 1.399.793ZM5.36 2.25h5.28l-.538-.86a.558.558 0 0 0-.474-.265H6.372c-.193 0-.372.1-.474.264l-.538.861ZM2.375 15.188c0 .931.756 1.687 1.688 1.687h7.875c.931 0 1.687-.756 1.687-1.688V3.376H2.375v11.813Z"/></svg>
\ No newline at end of file
diff --git a/static/img/deriv-logo.png b/static/img/deriv-logo.png
new file mode 100644
index 000000000..b3c971998
Binary files /dev/null and b/static/img/deriv-logo.png differ
diff --git a/static/img/edit.svg b/static/img/edit.svg
new file mode 100644
index 000000000..24f55a9af
--- /dev/null
+++ b/static/img/edit.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none"><path fill="#414652" d="M17.402 2.095c.77.77.77 2.015 0 2.785L6.41 15.877c-.4.397-.893.689-1.434.85L.72 17.98a.563.563 0 0 1-.698-.7l1.25-4.254c.16-.541.453-1.033.852-1.434L13.12.597a1.97 1.97 0 0 1 2.785 0l1.497 1.498ZM11.988 3.32l2.693 2.661 1.927-1.895a.843.843 0 0 0 0-1.194L15.11 1.392a.847.847 0 0 0-1.195 0L11.988 3.32Zm-.794.794L2.92 12.39a2.23 2.23 0 0 0-.567.956l-.96 3.263 3.262-.96c.362-.105.692-.302.956-.57l8.244-8.272-2.661-2.693Z"/></svg>
\ No newline at end of file
diff --git a/static/img/eye_closed.svg b/static/img/eye_closed.svg
new file mode 100644
index 000000000..0a2650ef2
--- /dev/null
+++ b/static/img/eye_closed.svg
@@ -0,0 +1 @@
+<svg width="16" height="12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.507.118a.5.5 0 0 1 .646.764l-2.048 1.732A7.924 7.924 0 0 1 15.664 6c-1.154 2.927-4 5-7.334 5a7.83 7.83 0 0 1-3.908-1.038l-2.269 1.92a.5.5 0 1 1-.646-.764l2.048-1.733A7.925 7.925 0 0 1 .997 6c1.153-2.927 4-5 7.333-5a7.83 7.83 0 0 1 3.909 1.038l2.268-1.92Zm-2.264 3.226L10.91 4.472c.266.448.42.97.42 1.528 0 1.653-1.348 3-3 3-.737 0-1.412-.267-1.934-.708l-1.106.935c.918.5 1.953.773 3.04.773 2.584 0 4.877-1.55 6-4a7.047 7.047 0 0 0-2.088-2.656ZM8.33 2c-2.578 0-4.877 1.55-6 4a7.05 7.05 0 0 0 2.087 2.656L5.75 7.528A2.98 2.98 0 0 1 5.33 6c0-1.653 1.347-3 3-3 .736 0 1.411.267 1.934.709l1.105-.935A6.336 6.336 0 0 0 8.33 2Zm1.802 3.13L7.175 7.633a2 2 0 0 0 2.957-2.502ZM8.33 4A2 2 0 0 0 6.53 6.87l2.956-2.503A1.99 1.99 0 0 0 8.33 4Z" fill="#333"/></svg>
\ No newline at end of file
diff --git a/static/img/eye_open.svg b/static/img/eye_open.svg
new file mode 100644
index 000000000..007553acc
--- /dev/null
+++ b/static/img/eye_open.svg
@@ -0,0 +1 @@
+<svg width="15" height="10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.663 1c2.579 0 4.878 1.55 6 4-1.122 2.45-3.415 4-6 4s-4.877-1.55-6-4c1.123-2.45 3.422-4 6-4Zm0-1C4.33 0 1.483 2.073.33 5c1.153 2.927 4 5 7.333 5 3.334 0 6.18-2.073 7.334-5-1.154-2.927-4-5-7.334-5Zm0 3a2 2 0 1 1-.001 4.001A2 2 0 0 1 7.663 3Zm0-1c-1.653 0-3 1.347-3 3s1.347 3 3 3c1.654 0 3-1.347 3-3s-1.346-3-3-3Z" fill="#333"/></svg>
\ No newline at end of file
diff --git a/static/img/gray-logo.svg b/static/img/gray-logo.svg
new file mode 100644
index 000000000..0ae29bacb
--- /dev/null
+++ b/static/img/gray-logo.svg
@@ -0,0 +1,13 @@
+<svg width="112" height="24" viewBox="0 0 112 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_14531_9940)">
+<path d="M13.8952 1.20865L12.7078 7.9427H8.58585C4.74037 7.9427 1.07501 11.0583 0.395663 14.9037L0.108115 16.5405C-0.568071 20.386 1.99767 23.5016 5.84315 23.5016H9.281C12.0837 23.5016 14.7538 21.2328 15.2467 18.4301L18.4128 0.482422L13.8952 1.20865ZM10.9705 17.795C10.8188 18.6607 10.0393 19.3654 9.17357 19.3654H7.08495C5.35654 19.3654 4.20006 17.9624 4.50339 16.2308L4.68351 15.2102C4.98999 13.4818 6.63941 12.0757 8.36782 12.0757H11.979L10.9705 17.795ZM45.6395 23.5012L48.3443 8.15722H52.6226L49.9178 23.5012H45.6362H45.6395ZM46.1022 8.33415C45.8878 9.55121 45.6724 10.7683 45.458 11.9853C43.4311 11.3555 41.3399 11.5561 40.6974 11.6842C40.0036 15.6241 39.3088 19.5651 38.614 23.505H34.3328C34.9142 20.2084 36.9004 8.94983 36.9004 8.94983C38.2928 8.37322 41.7122 7.20299 46.1022 8.33415ZM28.7555 7.94009H25.4251C22.18 7.94009 19.0867 10.569 18.5147 13.8141L17.8417 17.628C17.2697 20.8731 19.4343 23.5021 22.6794 23.5021H29.7636L30.4904 19.3786H23.8326C22.752 19.3786 22.0283 18.5033 22.2211 17.4195L22.2433 17.2899H32.9771L33.5901 13.8141C34.1619 10.569 31.9975 7.94009 28.7524 7.94009H28.7555ZM29.2959 13.4855L29.2706 13.7067H22.8879L22.9227 13.5108C23.1153 12.4301 24.1013 11.4791 25.1849 11.4791H27.6781C28.7493 11.4791 29.4729 12.4144 29.2959 13.4855ZM69.3157 8.15722C67.8572 12.0348 64.5148 18.6309 61.2771 23.5013H56.9957C55.5095 18.8658 54.5498 12.4072 54.3667 8.15722H58.6483C58.7255 9.54354 59.3461 14.6856 60.0544 18.278C61.997 14.7832 64.1386 10.198 65.031 8.15722H69.3157Z" fill="#82858C"/>
+<path d="M88.3799 23.5179C88.0558 22.66 87.7508 21.8212 87.4649 21.0015C87.1789 20.1626 86.8834 19.3143 86.5784 18.4564H77.5993L75.7978 23.5179H72.9096C73.6722 21.4209 74.3871 19.4859 75.0543 17.7129C75.7215 15.9209 76.3697 14.2243 76.9988 12.6229C77.647 11.0215 78.2856 9.49644 78.9147 8.04759C79.5438 6.57967 80.2015 5.13082 80.8878 3.70103H83.4329C84.1192 5.13082 84.7769 6.57967 85.406 8.04759C86.0351 9.49644 86.6642 11.0215 87.2933 12.6229C87.9414 14.2243 88.5992 15.9209 89.2664 17.7129C89.9336 19.4859 90.6485 21.4209 91.4111 23.5179H88.3799ZM85.7777 16.1688C85.1677 14.5102 84.5576 12.9089 83.9476 11.3647C83.3566 9.80146 82.737 8.30495 82.0889 6.87516C81.4216 8.30495 80.783 9.80146 80.1729 11.3647C79.582 12.9089 78.991 14.5102 78.4 16.1688H85.7777Z" fill="#82858C"/>
+<path d="M98.2193 3.50086C101.003 3.50086 103.138 4.03465 104.625 5.10222C106.131 6.15073 106.884 7.7235 106.884 9.82052C106.884 10.9643 106.674 11.9461 106.255 12.7659C105.854 13.5666 105.263 14.2243 104.482 14.739C103.719 15.2346 102.785 15.5969 101.679 15.8256C100.574 16.0544 99.325 16.1688 97.9334 16.1688H95.7315V23.5179H92.9577V3.98699C93.7393 3.79635 94.6067 3.67244 95.5599 3.61524C96.5322 3.53899 97.4186 3.50086 98.2193 3.50086ZM98.4481 5.9315C97.2661 5.9315 96.3606 5.9601 95.7315 6.01729V13.7953H97.819C98.7722 13.7953 99.63 13.7381 100.393 13.6238C101.155 13.4903 101.794 13.2806 102.308 12.9946C102.842 12.6896 103.252 12.2798 103.538 11.765C103.824 11.2503 103.967 10.5926 103.967 9.79192C103.967 9.02937 103.815 8.40027 103.51 7.90461C103.224 7.40895 102.823 7.01814 102.308 6.73218C101.813 6.42716 101.231 6.21746 100.564 6.10307C99.8969 5.98869 99.1916 5.9315 98.4481 5.9315Z" fill="#82858C"/>
+<path d="M109.211 3.70103H111.985V23.5179H109.211V3.70103Z" fill="#82858C"/>
+</g>
+<defs>
+<clipPath id="clip0_14531_9940">
+<rect width="112" height="23.0355" fill="white" transform="translate(0 0.482422)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/static/img/header-mobile.png b/static/img/header-mobile.png
new file mode 100644
index 000000000..59581f33b
Binary files /dev/null and b/static/img/header-mobile.png differ
diff --git a/static/img/header.png b/static/img/header.png
new file mode 100644
index 000000000..fb8a56e47
Binary files /dev/null and b/static/img/header.png differ
diff --git a/static/img/language-switcher.svg b/static/img/language-switcher.svg
new file mode 100644
index 000000000..4bedbccc0
--- /dev/null
+++ b/static/img/language-switcher.svg
@@ -0,0 +1,10 @@
+<svg width="16" height="24" viewBox="0 0 16 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_20655_10241)">
+<path d="M8 19C8.5 19 9.25 18.5625 9.90625 17.2188C10.2188 16.5938 10.5 15.8438 10.6875 15H5.3125C5.46875 15.8438 5.75 16.5938 6.0625 17.2188C6.71875 18.5625 7.46875 19 8 19ZM5.125 14H10.8438C10.9375 13.375 11 12.7188 11 12C11 11.3125 10.9375 10.6562 10.8438 10H5.125C5.03125 10.6562 5 11.3125 5 12C5 12.7188 5.03125 13.375 5.125 14ZM5.3125 9H10.6875C10.5 8.15625 10.2188 7.4375 9.90625 6.8125C9.25 5.46875 8.5 5 8 5C7.46875 5 6.71875 5.46875 6.0625 6.8125C5.75 7.4375 5.46875 8.15625 5.3125 9ZM11.875 10C11.9375 10.6562 12 11.3125 12 12C12 12.7188 11.9375 13.375 11.875 14H14.6875C14.875 13.375 15 12.7188 15 12C15 11.3125 14.875 10.6562 14.6875 10H11.875ZM14.3125 9C13.5 7.3125 12.0312 6 10.2188 5.375C10.875 6.25 11.4062 7.53125 11.6875 9H14.3125ZM4.28125 9C4.59375 7.53125 5.09375 6.25 5.75 5.375C3.9375 6 2.46875 7.3125 1.65625 9H4.28125ZM1.28125 10C1.09375 10.6562 1 11.3125 1 12C1 12.7188 1.09375 13.375 1.28125 14H4.125C4.03125 13.375 4 12.7188 4 12C4 11.3125 4.03125 10.6562 4.125 10H1.28125ZM10.2188 18.6562C12.0312 18.0312 13.5 16.7188 14.3125 15H11.6875C11.4062 16.5 10.875 17.75 10.2188 18.6562ZM5.75 18.6562C5.09375 17.75 4.59375 16.5 4.28125 15H1.65625C2.46875 16.7188 3.9375 18.0312 5.75 18.6562ZM8 20C5.125 20 2.5 18.5 1.0625 16C-0.375 13.5312 -0.375 10.5 1.0625 8C2.5 5.53125 5.125 4 8 4C10.8438 4 13.4688 5.53125 14.9062 8C16.3438 10.5 16.3438 13.5312 14.9062 16C13.4688 18.5 10.8438 20 8 20Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_20655_10241">
+<rect width="16" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/static/img/logo.svg b/static/img/logo.svg
new file mode 100644
index 000000000..3eefe502f
--- /dev/null
+++ b/static/img/logo.svg
@@ -0,0 +1,11 @@
+<svg width="112" height="24" viewBox="0 0 112 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.64" clip-path="url(#clip0_20314_50741)">
+<path d="M15.0288 0.756632L13.7916 7.77265H9.49711C5.49062 7.77265 1.67178 11.0187 0.963988 15.0251L0.6644 16.7305C-0.0400992 20.737 2.63307 23.983 6.63957 23.983H10.2214C13.1415 23.983 15.9233 21.6192 16.4369 18.6992L19.7355 0L15.0288 0.756632ZM11.9816 18.0374C11.8236 18.9395 11.0115 19.6737 10.1094 19.6737H7.93336C6.13258 19.6737 4.92768 18.2119 5.24371 16.4078L5.43137 15.3445C5.75069 13.5437 7.46917 12.0787 9.26995 12.0787H13.0323L11.9816 18.0374ZM48.1023 23.9827L50.9203 7.99616H55.3777L52.5597 23.9827H48.0988H48.1023ZM48.5844 8.18049C48.361 9.44851 48.1365 10.7165 47.9131 11.9846C45.8014 11.3283 43.6226 11.5373 42.9532 11.6708C42.2303 15.7757 41.5065 19.8817 40.7826 23.9866H36.3222C36.9279 20.5519 38.9972 8.82195 38.9972 8.82195C40.4479 8.2212 44.0106 7.00197 48.5844 8.18049ZM30.5113 7.76993H27.0415C23.6605 7.76993 20.4376 10.5089 19.8417 13.8899L19.1405 17.8635C18.5446 21.2445 20.7998 23.9836 24.1808 23.9836H31.5616L32.3188 19.6874H25.3822C24.2564 19.6874 23.5025 18.7754 23.7033 17.6462L23.7264 17.5113H34.9096L35.5483 13.8899C36.1441 10.5089 33.8891 7.76993 30.5081 7.76993H30.5113ZM31.0743 13.5476L31.048 13.778H24.398L24.4342 13.5739C24.6349 12.448 25.6622 11.4571 26.7912 11.4571H29.3887C30.5048 11.4571 31.2588 12.4315 31.0743 13.5476ZM72.7698 7.99615C71.2503 12.0361 67.7679 18.9084 64.3947 23.9827H59.934C58.3855 19.1532 57.3856 12.4241 57.1949 7.99615H61.6557C61.7362 9.44052 62.3828 14.7979 63.1208 18.5407C65.1447 14.8995 67.376 10.1224 68.3057 7.99615H72.7698Z" fill="#414652"/>
+<path d="M74.5955 18.5152L71.9199 23.9866H68.6612C70.702 19.8461 72.7067 16.0359 74.6752 12.5509C76.6436 9.06584 78.5978 5.77596 80.539 2.68123H83.4598C83.8609 4.21984 84.2378 5.77096 84.5907 7.33959C84.9437 8.90823 85.2962 10.5519 85.6485 12.2732C85.9996 13.9944 86.3471 15.8207 86.692 17.7471C87.0357 19.6735 87.3987 21.7525 87.7826 23.9866H84.7704C84.6098 23.0635 84.4615 22.1378 84.3216 21.2046C84.1828 20.2714 84.0352 19.3758 83.8797 18.5152H74.5955ZM83.4556 16.1159C83.1897 14.4572 82.898 12.806 82.5821 11.1674C82.2661 9.52868 81.9119 7.83745 81.5169 6.09369C80.8645 7.13945 80.0555 8.48792 79.0912 10.1366C78.127 11.7878 77.0411 13.7792 75.8314 16.1159H83.4556ZM98.0484 2.46607C100.528 2.46607 102.427 2.93891 103.746 3.8821C105.063 4.82528 105.778 6.19627 105.889 8.00007C105.975 9.39358 105.788 10.5994 105.328 11.6127C104.868 12.6284 104.176 13.4615 103.253 14.1195C102.329 14.775 101.202 15.2603 99.8694 15.578C98.5355 15.8958 97.0393 16.0559 95.3793 16.0559H93.2578L91.8405 23.9866H88.8583L92.606 2.95893C93.454 2.75378 94.3578 2.62118 95.3171 2.55864C96.2766 2.4986 97.1878 2.46607 98.0484 2.46607ZM97.8345 4.98789C96.3784 4.98789 95.5004 5.03042 95.1976 5.11048L93.6887 13.5641H95.6251C96.4869 13.5641 97.363 13.489 98.2553 13.3339C99.1478 13.1813 99.9404 12.9086 100.635 12.5208C101.327 12.1306 101.883 11.5927 102.303 10.9047C102.721 10.2192 102.898 9.33353 102.831 8.24775C102.759 7.07941 102.277 6.2438 101.385 5.74094C100.493 5.23807 99.3093 4.98789 97.8345 4.98789ZM108.429 2.68123H111.411L107.62 23.9866H104.637L108.429 2.68123Z" fill="#414652"/>
+</g>
+<defs>
+<clipPath id="clip0_20314_50741">
+<rect width="110.897" height="24" fill="white" transform="translate(0.551758)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/static/img/pattern.svg b/static/img/pattern.svg
new file mode 100644
index 000000000..e91d4e7c7
--- /dev/null
+++ b/static/img/pattern.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1440" height="496"><defs><path id="a" d="M0 0h1440v496H0z"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use fill="#FFF" xlink:href="#a"/><g fill="#F2F3F4" fill-opacity=".53" fill-rule="nonzero" mask="url(#b)"><path d="m90.713 119.577 202.333-66.68.289-.096L302 41.209h-2.022v.095l-7.943 10.539-202.333 66.776-.288.096-101.383 133.647L-28 257.631v1.342l17.33-5.749zM25 42.536h-4.132L-10.901 53.13l-.285.095L-27 74.412v2.648l17.381-22.984zm16.271 43.877L-25 174.072v2.575l67.715-89.375L178 42.536h-4.043L41.56 86.318z"/><path d="M252 41.872h-4.056l-183.818 60.85-.289.096L-28 224.517v2.588L65.285 103.68zm1127.571 126.034-.289.095-100.955 133.481-201.768 66.644-.288.096-100.956 133.48-201.623 66.645-.289.095-100.956 133.481-201.623 66.644-.288.096-100.956 133.48-201.623 66.645-.289.095-100.956 133.481-91.712 30.31v1.339l92.723-30.693.289-.096 100.956-133.48 201.623-66.74.289-.096 100.811-133.576 201.623-66.644.289-.096 100.956-133.48 201.622-66.645.289-.096 101.1-133.289 201.623-66.644.289-.096 100.956-133.48 201.767-66.645.289-.095L1629 40.545h-2.022l-45.784 60.716zM217.375 202.905l-.288.095-100.522 133.18L-25 383.117v1.336l142.573-47.224.288-.095 100.522-133.18 200.754-66.494.288-.095L491 42.536h-2.016l-70.855 93.779zM164.7 168.677l-.288.095L63.597 301.773-28 331.996v1.335l92.605-30.509.288-.095 100.815-133.002 201.485-66.357.288-.096L414 41.872h-2.16l-45.799 60.447z"/><path d="m394.549 119.136-201.551 66.58-.288.095L91.862 319.257-25 357.888v1.336l117.872-38.918.289-.095L194.008 186.86l201.551-66.58.289-.095L455 41.968h-2.164v-.096zM40.102 687.186l101.213-133.692 202.138-66.703.289-.095 101.213-133.693 202.137-66.798.29-.096 101.213-133.692 202.137-66.798.289-.096L985 40.545h-2.169v.095l-33.256 44.022-202.137 66.798-.289.096-101.213 133.692-202.138 66.798-.289.096-101.213 133.692-202.137 66.799-.29.095L38.656 686.42-28 708.431v1.34l67.813-22.489zm75.61 49.418 101.104-133.589 201.775-66.651.289-.096 101.104-133.589 201.775-66.651.289-.096 101.104-133.589 201.775-66.651.289-.095L1097 40.545h-2.167l-71.061 94.095-201.775 66.651-.289.096-101.104 133.589-201.775 66.747-.289.095-101.104 133.589-201.775 66.651-.289.096-101.104 133.589L-28 782.791v1.339l143.423-47.431z"/><path d="m240.692 219.287-.288.096-101.012 133.135L-28 407.681v1.337l168.546-55.45.289-.095 100.868-133.041 201.735-66.424.289-.096L528 42.536h-2.02l-83.696 110.326zM90.327 919.738l201.836-66.616.289-.095 100.99-133.519 201.691-66.615.289-.096 100.99-133.518 201.691-66.616.289-.095L999.381 319.05l201.691-66.616.289-.095 100.99-133.519 201.691-66.615.289-.096L1513 40.545h-1.878v.095l-7.946 10.609-201.691 66.616-.289.095-100.99 133.518-201.836 66.616-.289.096-100.99 133.518-201.835 66.615-.289.096-101.135 133.422-201.691 66.712-.289.095-100.99 133.518-201.691 66.616-.288.096-100.99 133.518-15.893 5.256v1.338l17.337-5.734zm-75.62-648.957L116.044 136.64 318.43 69.666l.289-.096L340 41.209h-2.027l-20.557 27.403-202.385 66.974-.29.096-101.337 134.14L-28 283.524v1.341l42.417-13.989z"/><path d="m39.527 287.022 100.642-133.113 200.852-66.461.288-.096L375 42.536h-2.016l-33.115 43.863-200.852 66.557-.288.095L38.231 286.164-28 308.095v1.335l67.239-22.312zm176.566 116.175.288-.095 100.925-133.265 201.56-66.538.289-.095L620.079 69.938 705 41.872h-4.037l-82.181 27.112-.289.095-100.924 133.266-201.561 66.537-.288.095-100.925 133.266L13.523 468.78l-.288.096L-28 523.289v2.578l42.532-56.132z"/><path d="m241.663 420.824.289-.096 101.051-133.254 201.815-66.628.288-.095L646.158 87.4 782 42.536h-3.898v.096l-132.81 43.909-.289.096-101.051 133.254-201.815 66.533-.288.095-101.052 133.35-201.959 66.628-.288.095L-28 574.411v2.577l67.849-89.537zM15.033 69.211-26 123.6v2.59l42.333-56.116L101 41.872h-4.046L15.177 69.115zm885.014 183.423-.289.096-101.079 133.495-201.867 66.652-.29.095-101.078 133.496-201.868 66.652-.289.095L192.208 786.71-9.804 853.267l-.29.095L-26 874.496v2.582l17.353-22.855 201.867-66.652.29-.096L294.588 653.98l201.868-66.652.289-.095 101.079-133.496 201.868-66.651.289-.096 101.078-133.495 201.868-66.557.289-.095 101.079-133.495L1239 41.872h-4.049l-31.668 10.519-.29.096-101.078 133.495z"/><path d="m847.569 219.124-.289.096-100.961 133.393-201.78 66.505-.289.095-100.961 133.393-201.635 66.601-.289.095L140.403 752.6-27 808.021v1.337l168.414-55.612.289-.095 100.962-133.393L444.3 553.562l.289-.096L545.55 420.073l201.635-66.601.289-.095L848.58 219.984l201.635-66.601.289-.095L1135 41.872h-2.167l-83.629 110.651zM1227.524 67.78l-100.912 133.5-201.536 66.702-.288.096-100.913 133.404-201.68 66.607-.288.095-100.913 133.405-201.535 66.606-.289.096-101.057 133.404-201.68 66.702-.289.096L-25 922.963v2.58l42.588-56.285 201.68-66.607.289-.096 100.912-133.5 201.68-66.606.289-.096L623.35 468.949l201.68-66.607.289-.096 100.768-133.308 201.68-66.607.289-.096 100.912-133.404L1314 40.545h-4.042l-82.145 27.139z"/><path d="m874.639 234.491-.289.096-100.892 133.41-201.782 66.658-.29.095-100.891 133.41-201.494 66.562-.289.096-101.036 133.41L-25 831.92v1.339l193.833-63.979.289-.096 101.036-133.41 201.782-66.657.29-.096 101.035-133.41 201.783-66.562.289-.095 101.036-133.411 201.783-66.657.289-.095L1175 40.545h-2.168l-96.411 127.289zm376.007-149.674-101.101 133.485-201.626 66.743-.289.096-100.957 133.485-201.914 66.743-.289.096-100.957 133.581-201.77 66.743-.289.095-101.101 133.582-201.626 66.647-.289.095L-28 974.083v2.582l67.882-89.692 201.77-66.551.289-.096 101.102-133.581 201.77-66.743.289-.095 100.957-133.582 201.77-66.742.289-.096 100.957-133.581 201.77-66.743.288-.096 101.102-133.581L1388 40.545h-4.333v.191l-132.732 43.985zm102.872 67.636-101.035 133.328-201.924 66.711h-.29L949.235 485.915 747.31 552.531l-.289.096-101.035 133.327-201.925 66.616-.289.096-101.034 133.423-201.925 66.616-.289.095-101.035 133.328L-27 1108.11v1.338l67.646-22.269.289-.096 101.034-133.327 201.925-66.52.289-.096 101.035-133.328 201.78-66.807.289-.095 101.035-133.328 201.925-66.616.289-.095 101.179-133.423 201.925-66.616.289-.096 101.034-133.327 201.925-66.616.289-.096L1591 41.872h-2.024l-33.244 43.965-201.925 66.52z"/><path d="m1276.381 101.172-101.104 133.496-201.774 66.653-.289.095-101.103 133.496-201.774 66.557-.289.096-101.104 133.496-201.773 66.652-.289.096-101.104 133.496-201.774 66.556-.289.096L-28 1023.213v2.582l93.16-122.977 201.774-66.653.288-.095 101.104-133.496L570.1 635.921l.289-.095L671.492 502.33l201.919-66.557.289-.096 101.103-133.496 201.63-66.556.288-.096 100.96-133.496L1464 40.545h-4.044l-183.286 60.532z"/><path d="m1327.254 135.772-100.882 133.445-201.765 66.58-.289.095-101.027 133.35-201.766 66.58-.289.095-101.027 133.35-201.765 66.58-.289.095-101.027 133.35-201.621 66.58-.289.096-101.027 133.35L-27 1082.882v1.337l42.348-13.946.289-.096 101.027-133.35 201.765-66.579.289-.096 101.027-133.445 201.765-66.58.289-.095 100.883-133.351 201.765-66.579.289-.096 101.027-133.254 201.621-66.58.289-.095 101.027-133.35 201.765-66.58.289-.095L1552 41.872h-2.023l-20.524 27.225-201.909 66.579zM772.117 167.95l-.289.096-101.081 133.628-202.018 66.718-.289.095-101.081 133.628-202.018 66.814-.289.095L63.826 702.652-28 732.996v1.34l92.983-30.727.289-.095 101.226-133.628 202.018-66.718.289-.096 101.081-133.627 202.018-66.718.289-.096 101.081-133.628 201.873-66.718.289-.096L1022 40.545h-2.025l-45.84 60.687zm-98.701-66.628L572.464 235.127l-201.902 66.808-.29.095-101.096 133.71-202.047 66.807-.289.096L-25 624.197v2.585l93.286-123.278 201.903-66.807.289-.095 101.096-133.806 201.903-66.807.289-.096 101.096-133.71L861 40.545h-4.05l-183.245 60.681zm-381.207 151.35-.288.096-100.646 133.124-201.149 66.419-.288.095L-26 473.496v2.577l17.278-22.808 201.149-66.419.288-.095 100.646-133.124 201.148-66.419.288-.096L595.443 53.988 630 42.536h-4.032l-31.533 10.498-.288.095-100.79 133.124zm-198.87 867.545 100.855-133.524 201.566-66.667.289-.095 101-133.525 201.855-66.762.289-.095 101-133.525 201.711-66.666.289-.096 100.855-133.429 201.711-66.666.289-.096 101-133.524 201.566-66.667.289-.095L1667 40.545h-2.023l-58.375 77.379-201.71 66.666-.289.096-101 133.524-201.566 66.667-.289.095-101 133.525-201.711 66.666-.289.096-100.855 133.429-201.711 66.666-.289.096-101 133.524-201.71 66.667-.289.095-101 133.525L-25 1157.903v1.339l118.05-38.929z"/><path d="M722.053 135.882 620.935 269.293l-201.946 66.658-.29.096-101.117 133.411-201.947 66.658-.289.096L14.228 669.623-27 683.203v1.339l42.386-13.962.289-.096 101.118-133.316 201.946-66.658.289-.095 101.118-133.412 201.946-66.658.29-.095 101.117-133.412 201.947-66.657.289-.096L947 41.872h-2.025l-20.542 27.257-202.091 66.657zM268.47 236.48l-.288.096-100.854 133.336L-25 433.574v1.336l193.482-63.948.289-.095L269.624 237.53l201.418-66.62.289-.096L568 42.536h-2.02L469.888 169.86zm528.974-51.881-.289.095L695.982 318.22l-202.055 66.714-.289.096-101.172 133.525-202.055 66.715-.29.096L89.094 718.891-28 757.561v1.34l118.251-38.957.29-.096 101.027-133.621 202.056-66.714.289-.096 101.172-133.525 202.055-66.715.29-.096 101.172-133.525 202.055-66.715.29-.096 59.053-78.2h-2.026l-58.475 77.339z"/><path d="M696.026 117.998 595.031 251.652 393.33 318.383l-.289.095-100.995 133.749-201.845 66.731-.29.096-100.995 133.653L-27 657.973v1.341l17.363-5.745L91.358 519.916l201.701-66.731.289-.096 100.995-133.653 201.701-66.731.289-.096 100.995-133.653 201.701-66.731.289-.096L908 40.545h-1.881l-7.958 10.627-201.845 66.731zm683.069 452.222-.289.095-100.999 133.486-201.708 66.695-.289.095-100.999 133.486-201.709 66.695-.289.095-100.998 133.486L486 1165.881h4.046l183.069-60.571.289-.096 100.999-133.485 201.564-66.6.289-.095 100.999-133.486 201.708-66.695.289-.095 100.999-133.486 201.709-66.695.289-.095L1674 383.244v-2.775l-93.196 123.151zm100.222-332.863-.289.096-100.883 133.411-201.909 66.609-.289.096-101.172 133.315-201.91 66.61-.289.095L771.549 771 569.64 837.61l-.289.096-101.028 133.41-201.909 66.61-.289.096L169 1165.881h2.023l96.547-127.199 201.91-66.61.289-.096 101.171-133.41 201.91-66.61.289-.096 101.172-133.41 201.909-66.61.289-.096 101.172-133.411 201.91-66.514.289-.095 101.171-133.411L1674 174.666v-1.338z"/><path d="m115.55 1138.629 100.999-133.584 201.708-66.648.289-.096 100.999-133.583 201.853-66.648.289-.096 100.999-133.583 201.708-66.648.289-.096 101.143-133.583 201.709-66.648.289-.096 100.999-133.583 201.708-66.648.289-.096L1672 82.489v-2.773l-42.625 56.416-201.708 66.649-.289.095-100.999 133.583-201.709 66.649-.289.095-100.998 133.584-201.853 66.648-.289.095-100.999 133.584-201.709 66.744h-.433L417.101 937.441l-201.853 66.744-.289.095-100.999 133.584L29 1165.881h4.046l82.215-27.157zm479.614-84.848 101.022-133.52 201.611-66.711.289-.096 101.022-133.519 201.467-66.521.289-.096 100.877-133.519 201.611-66.712.289-.095 100.878-133.52L1671 297.49v-1.338l-67.493 22.365-.289.095-100.877 133.52-201.611 66.711-.289.096-101.023 133.519-201.611 66.712-.289.096-101.022 133.519-201.611 66.712-.289.095-101.022 133.52-201.466 66.52-.289.096L358 1164.553h2.023l33.241-43.965 201.611-66.712z"/><path d="m570.536 1038.561.289-.096 100.999-133.537 201.709-66.673.289-.096 100.999-133.537 201.853-66.769.289-.096 101.144-133.537 201.853-66.673.289-.096 100.999-133.537L1673 273.59v-1.339l-93.197 30.61-.289.096-100.854 133.537-201.854 66.674-.289.095-100.854 133.633-201.854 66.673-.289.096-100.999 133.538-201.853 66.673-.289.095-100.855 133.633-201.709 66.673-.289.096L321 1165.881h2.023l45.803-60.647z"/><path d="m545.627 1021.871.289-.096 101.122-133.683 201.954-66.745.289-.096 100.977-133.778 201.954-66.746.289-.096 101.122-133.682 201.954-66.746.289-.095 101.122-133.683L1674 247.697v-1.339l-118.457 39.206-.289.096-100.832 133.683-201.955 66.745-.289.096-101.121 133.587-201.954 66.746-.289.095-101.122 133.683-201.954 66.746-.289.095-101.122 133.683-201.954 66.746-.289.095L283 1165.881h2.022l58.651-77.36zm100.534 66.721 101.166-133.533 201.899-66.766.289-.096 101.022-133.629 201.9-66.671.289-.095 101.022-133.533 201.899-66.671.289-.096 101.022-133.628 16.042-5.261v-1.34l-17.054 5.548-.289.096-101.166 133.533-201.755 66.767-.289.095-101.022 133.533-202.044 66.767-.289.095L948.07 887.336l-201.899 66.671-.289.096-101.022 133.533-201.9 66.766-.289.096-8.671 11.383h2.023l7.949-10.522 201.899-66.671z"/><path d="m620.885 1071.867 101.09-133.705 201.89-66.852.289-.096 101.09-133.704 201.891-66.757.289-.095 101.09-133.705 201.89-66.757.289-.095 101.09-133.705L1673 322.72v-1.339l-42.229 14.059-.289.095-101.09 133.705-201.891 66.852-.289.096-101.09 133.609-201.89 66.756-.289.096-101.09 133.705-202.035 66.756-.289.096-101.09 133.704-201.891 66.757-.289.096L396 1165.881h2.025l20.68-27.162 201.891-66.757zm-175.807-117.84.289-.095L546.44 820.526l201.711-66.608.289-.095 101.073-133.406 201.856-66.608.289-.095 101.218-133.406 201.711-66.703.289-.096 101.073-133.406 201.856-66.607.289-.096L1674 132.281v-2.772l-17.496 22.935-201.712 66.608-.289.095-101.073 133.406-201.856 66.608-.289.096-101.073 133.406-201.711 66.703-.289.095-101.073 133.406-201.856 66.703-.289.096-101.073 133.406-201.856 66.607-.289.096-101.073 133.406L106 1164.553h4.049l31.666-10.321.289-.095 101.073-133.407zm75.052 50.982.289-.096 101.06-133.693 201.974-66.703.289-.095 101.204-133.693 201.974-66.799.289-.096 101.06-133.693 201.974-66.798.289-.096 101.06-133.693L1674 222.469v-1.339l-143.565 47.562-.289.096-100.915 133.693-201.974 66.799-.289.096-101.06 133.597-201.974 66.799-.289.095-101.06 133.693-201.974 66.703-.289.096-101.204 133.789-201.974 66.703-.289.095L245 1165.881h2.024l71.132-94.073z"/><path d="m497.314 987.46.288-.095L598.523 854.02l201.697-66.482.289-.095L901.43 654.098l201.552-66.577.289-.096 100.632-133.536 201.553-66.577.288-.095 100.921-133.345L1674 198.566v-1.337l-168.634 55.687-.289.096-100.921 133.345-201.264 66.577-.288.095-100.921 133.345-201.553 66.577-.289.096-100.92 133.345-201.697 66.577-.289.095-100.921 133.345-201.552 66.577-.289.096L210 1164.553h2.021l83.74-110.516zm199.823 133.152 101.154-133.445 202.02-66.675.289-.096 101.155-133.446 202.02-66.579.289-.096 101.01-133.445 202.02-66.675.289-.096L1674 432.274v-2.675l-68.063 89.696-201.875 66.675-.289.096-101.154 133.35-202.02 66.675-.289.095-101.155 133.446-201.875 66.675-.289.095-101.155 133.446L560 1164.553h4.046l132.802-43.845z"/><path d="m723.525 1138.631 101.114-133.475 201.796-66.642.289-.096 100.97-133.475 201.795-66.642.289-.096 100.97-133.475 201.795-66.642.289-.096L1674 483.493v-2.773l-42.468 56.316-201.795 66.642-.289.096-100.97 133.475-201.796 66.642-.288.096-100.97 133.571-201.94 66.642-.289.095-100.97 133.476-85.225 28.11h4.045l82.191-27.154z"/></g></g></svg>
\ No newline at end of file
diff --git a/static/img/placeholder_icon.svg b/static/img/placeholder_icon.svg
new file mode 100644
index 000000000..f6913457d
--- /dev/null
+++ b/static/img/placeholder_icon.svg
@@ -0,0 +1,3 @@
+<svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.515625" width="32" height="32" rx="16" fill="#F2F3F4"/>
+</svg>
diff --git a/static/img/plus.svg b/static/img/plus.svg
new file mode 100644
index 000000000..98dca5036
--- /dev/null
+++ b/static/img/plus.svg
@@ -0,0 +1 @@
+<svg width="13" height="12" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 .5a.5.5 0 0 0-1 0v5H1a.5.5 0 0 0 0 1h5v5a.5.5 0 0 0 1 0v-5h5a.5.5 0 0 0 0-1H7v-5Z" fill="#333"/></svg>
\ No newline at end of file
diff --git a/static/img/plus_bold.svg b/static/img/plus_bold.svg
new file mode 100644
index 000000000..b992bd802
--- /dev/null
+++ b/static/img/plus_bold.svg
@@ -0,0 +1 @@
+<svg width="12" height="12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 0a1 1 0 0 1 1 1v4h4a1 1 0 1 1 0 2H7v4a1 1 0 1 1-2 0V7H1a1 1 0 0 1 0-2h4V1a1 1 0 0 1 1-1Z" fill="#333"/></svg>
\ No newline at end of file
diff --git a/static/img/register_success.svg b/static/img/register_success.svg
new file mode 100644
index 000000000..271526d75
--- /dev/null
+++ b/static/img/register_success.svg
@@ -0,0 +1,4 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="64" height="64" rx="32" fill="#4BB4B3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M44.5858 20.5858C45.3668 19.8047 46.6332 19.8047 47.4142 20.5858C48.1953 21.3668 48.1953 22.6332 47.4142 23.4142L27.4142 43.4142C26.6332 44.1953 25.3668 44.1953 24.5858 43.4142L16.5858 35.4142C15.8047 34.6332 15.8047 33.3668 16.5858 32.5858C17.3668 31.8047 18.6332 31.8047 19.4142 32.5858L26 39.1716L44.5858 20.5858Z" fill="white"/>
+</svg>
diff --git a/static/img/search-bold.svg b/static/img/search-bold.svg
new file mode 100644
index 000000000..9fe31e469
--- /dev/null
+++ b/static/img/search-bold.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.335 11.749a6.5 6.5 0 1 1 1.414-1.414l3.958 3.958a1 1 0 0 1-1.414 1.414l-3.958-3.958ZM11 6.5a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Z" fill="#333"/></svg>
\ No newline at end of file
diff --git a/static/img/search.svg b/static/img/search.svg
new file mode 100644
index 000000000..cbacf3c67
--- /dev/null
+++ b/static/img/search.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11Zm0-12a6.5 6.5 0 0 1 4.936 10.729l4.418 4.417a.5.5 0 0 1-.708.708l-4.417-4.418A6.5 6.5 0 1 1 6.5 0Z" fill="#999"/></svg>
\ No newline at end of file
diff --git a/static/img/slack.svg b/static/img/slack.svg
new file mode 100644
index 000000000..7e70693f8
--- /dev/null
+++ b/static/img/slack.svg
@@ -0,0 +1,13 @@
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3224_61047)">
+<path d="M8.56691 26.1633C8.56691 28.4626 6.70865 30.3208 4.40943 30.3208C2.11022 30.3208 0.251953 28.4626 0.251953 26.1633C0.251953 23.8641 2.11022 22.0059 4.40943 22.0059H8.56691V26.1633ZM10.6457 26.1633C10.6457 23.8641 12.5039 22.0059 14.8031 22.0059C17.1023 22.0059 18.9606 23.8641 18.9606 26.1633V36.557C18.9606 38.8563 17.1023 40.7145 14.8031 40.7145C12.5039 40.7145 10.6457 38.8563 10.6457 36.557V26.1633Z" fill="white"/>
+<path d="M14.8034 9.47023C12.5042 9.47023 10.6459 7.61197 10.6459 5.31275C10.6459 3.01354 12.5042 1.15527 14.8034 1.15527C17.1026 1.15527 18.9609 3.01354 18.9609 5.31275V9.47023H14.8034ZM14.8034 11.5805C17.1026 11.5805 18.9609 13.4387 18.9609 15.738C18.9609 18.0372 17.1026 19.8954 14.8034 19.8954H4.37818C2.07897 19.8954 0.220703 18.0372 0.220703 15.738C0.220703 13.4387 2.07897 11.5805 4.37818 11.5805H14.8034Z" fill="white"/>
+<path d="M31.464 15.738C31.464 13.4387 33.3223 11.5805 35.6215 11.5805C37.9207 11.5805 39.779 13.4387 39.779 15.738C39.779 18.0372 37.9207 19.8954 35.6215 19.8954H31.464V15.738ZM29.3853 15.738C29.3853 18.0372 27.527 19.8954 25.2278 19.8954C22.9286 19.8954 21.0703 18.0372 21.0703 15.738V5.31275C21.0703 3.01354 22.9286 1.15527 25.2278 1.15527C27.527 1.15527 29.3853 3.01354 29.3853 5.31275V15.738Z" fill="white"/>
+<path d="M25.2278 32.3996C27.527 32.3996 29.3853 34.2578 29.3853 36.557C29.3853 38.8563 27.527 40.7145 25.2278 40.7145C22.9286 40.7145 21.0703 38.8563 21.0703 36.557V32.3996H25.2278ZM25.2278 30.3208C22.9286 30.3208 21.0703 28.4626 21.0703 26.1633C21.0703 23.8641 22.9286 22.0059 25.2278 22.0059H35.653C37.9522 22.0059 39.8105 23.8641 39.8105 26.1633C39.8105 28.4626 37.9522 30.3208 35.653 30.3208H25.2278Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_3224_61047">
+<rect width="40" height="40" fill="white" transform="translate(0 0.966797)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/static/img/success.svg b/static/img/success.svg
new file mode 100644
index 000000000..749adf687
--- /dev/null
+++ b/static/img/success.svg
@@ -0,0 +1,3 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M100 50C100 77.6125 77.6125 100 50 100C22.3875 100 0 77.6125 0 50C0 22.3875 22.3875 0 50 0C77.6125 0 100 22.3875 100 50ZM37.3475 65.1431C36.6475 65.1431 35.9412 65.0494 35.2537 64.8806C33.0538 64.3244 31.2162 62.9431 30.06 61.0056C29.6912 60.3931 29.4163 59.7494 29.2163 59.0744C33.885 59.6994 39.2663 60.5181 44.2788 61.5244C42.7287 63.7369 40.1725 65.1431 37.3475 65.1431ZM70.1162 21.8744C67.4725 21.8744 65.235 23.9181 65.235 26.4306V28.4306C62.7038 30.8681 56.6287 35.0181 46.4912 37.9869C39.51 40.0369 27.3412 41.2056 25.1225 41.3994C25.01 41.2556 24.9288 41.1119 24.785 40.9806C24.135 40.3494 23.2725 39.9994 22.3225 39.9994C20.41 39.9994 18.8538 41.4744 18.8412 43.2869L18.7473 56.9056C18.7413 57.7869 19.1038 58.6619 19.76 59.2869C20.4163 59.9244 21.2913 60.3181 22.2225 60.3181H22.2412C23.1975 60.3181 24.0725 59.9056 24.7038 59.3056C24.8913 60.9869 25.46 62.5994 26.385 64.0869C28.0912 66.8119 30.8038 68.7244 34.035 69.5056C35.0412 69.7431 36.0725 69.8681 37.1038 69.8681C42.1725 69.8681 46.5287 66.9619 48.4475 62.6244C57.3975 65.5369 62.7037 69.3056 65.2287 71.5681V73.5744C65.2287 76.0806 67.4725 78.1244 70.1162 78.1244C72.7538 78.1244 74.9975 76.0806 74.9975 73.5744V26.4306C74.9975 23.9181 72.7538 21.8744 70.1162 21.8744Z" fill="#4BB4B3"/>
+</svg>
diff --git a/static/img/table-empty.svg b/static/img/table-empty.svg
new file mode 100644
index 000000000..9ee986698
--- /dev/null
+++ b/static/img/table-empty.svg
@@ -0,0 +1,11 @@
+<svg width="101" height="100" viewBox="0 0 101 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1786_47172)">
+<path d="M72.9997 64C69.9675 64 67.5 66.468 67.5 69.5C67.5 72.5327 69.9675 75 72.9997 75C76.0325 75 78.5 72.5327 78.5 69.5C78.5 66.468 76.0325 64 72.9997 64Z" fill="#3F6FE5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M50.5 100C78.1144 100 100.5 77.6144 100.5 50C100.5 22.3857 78.1144 0 50.5 0C22.8857 0 0.5 22.3857 0.5 50C0.5 77.6144 22.8857 100 50.5 100ZM27.2429 41.2793H73.755V54.4318C75.8569 54.6407 77.8269 55.2974 79.5688 56.3051V35.4652C79.5688 29.0433 74.3625 23.8373 67.9406 23.8373H33.0569C26.635 23.8373 21.4289 29.0433 21.4289 35.4652V64.535C21.4289 70.9569 26.635 76.1631 33.0569 76.1631H59.7102C58.7025 74.4213 58.0459 72.4513 57.8371 70.3494H33.0569C29.8459 70.3494 27.2429 67.7462 27.2429 64.535V41.2793ZM83.9269 68.8756V68.8913C83.9269 69.3 83.8994 69.7144 83.8481 70.1594L82.7762 70.5169L81.8287 70.8381L81.535 71.7919C81.3681 72.3425 81.1475 72.8788 80.8781 73.3869L80.4112 74.2681L81.3625 76.1669C81.0837 76.5181 80.8081 76.83 80.5206 77.1175L80.5144 77.1231C80.2331 77.4081 79.9213 77.6838 79.57 77.9588L77.6775 77.0113L76.7994 77.4688C76.2819 77.7381 75.7369 77.9619 75.1825 78.1375L74.235 78.4344L73.9263 79.3731L73.5687 80.445C73.1269 80.4994 72.7087 80.5237 72.3 80.5237C71.8944 80.5237 71.4769 80.4962 71.0319 80.445L70.6744 79.3731L70.3625 78.425L69.4088 78.1319C68.8456 77.9587 68.31 77.7381 67.8131 77.4744L66.9294 77.0144L65.0275 77.9619C64.6762 77.6837 64.3644 77.4081 64.0769 77.1206C63.7831 76.8269 63.5075 76.515 63.235 76.1694L64.18 74.2775L63.72 73.3994C63.4444 72.8725 63.22 72.3337 63.0569 71.7944L62.7629 70.8406L60.7465 70.1719C60.692 69.73 60.6677 69.3119 60.6677 68.9031C60.6677 68.4944 60.695 68.0794 60.7465 67.6344L62.7569 66.9656L63.0506 66.0144C63.22 65.4669 63.4444 64.925 63.7137 64.4037L64.1738 63.5256L63.2294 61.6306C63.7594 60.9705 64.3619 60.368 65.0219 59.8381L66.9169 60.7858L67.7981 60.3226C68.3069 60.0561 68.8488 59.8321 69.4088 59.6564L70.3563 59.3597L71.0288 57.3463C71.4856 57.2948 71.9006 57.2676 72.2944 57.2676C72.7 57.2676 73.1175 57.2948 73.56 57.3463L74.2319 59.3537L75.1794 59.6474C75.7306 59.8199 76.2725 60.044 76.7906 60.3104L77.6688 60.7707L79.5606 59.823C80.2206 60.3528 80.8262 60.9554 81.3625 61.6184L80.4175 63.5106L80.8719 64.3856C81.1412 64.9062 81.3681 65.4512 81.5406 66.0056L81.8375 66.9531L83.8512 67.6256C83.9087 68.0794 83.9325 68.4881 83.9269 68.8756Z" fill="#3F6FE5"/>
+</g>
+<defs>
+<clipPath id="clip0_1786_47172">
+<rect width="100" height="100" fill="white" transform="translate(0.5)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/static/img/telegram.svg b/static/img/telegram.svg
new file mode 100644
index 000000000..563829711
--- /dev/null
+++ b/static/img/telegram.svg
@@ -0,0 +1,3 @@
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M39.3957 4.64684C38.9537 4.28772 38.2754 4.21099 37.9684 4.21713C36.5842 4.24168 34.4571 4.9814 24.23 9.23554C20.645 10.7242 13.4872 13.8089 2.75063 18.4866C1.00723 19.1803 0.0925636 19.8586 0.00969094 20.5216C-0.13069 21.6419 1.26995 22.0832 3.17992 22.6849C3.44149 22.7673 3.71262 22.8527 3.99065 22.9433C5.87217 23.5541 8.40132 24.2693 9.715 24.2938C10.909 24.3245 12.238 23.8334 13.7113 22.8205C23.742 16.0526 28.92 12.6272 29.2453 12.5535C29.4755 12.5013 29.7947 12.4369 30.0096 12.6272C30.2245 12.8175 30.203 13.1797 30.1815 13.2779C30.0413 13.869 24.5476 18.9777 21.6924 21.6328C20.7968 22.4657 20.1608 23.0571 20.0311 23.1919C19.7435 23.4902 19.4505 23.7724 19.1687 24.0438C17.4204 25.7276 16.1069 26.9926 19.2392 29.0544C20.7457 30.0479 21.9509 30.8691 23.1539 31.6886C24.4632 32.5806 25.7697 33.4707 27.459 34.5793C27.8914 34.8625 28.3044 35.1568 28.7066 35.4434C30.231 36.5298 31.6004 37.5057 33.2907 37.3478C34.276 37.2588 35.292 36.335 35.8076 33.5725C37.0292 27.0501 39.4295 12.9188 39.9819 7.09312C40.0311 6.58361 39.9697 5.92983 39.9206 5.64438C39.8767 5.25787 39.6894 4.90189 39.3957 4.64684Z" fill="white"/>
+</svg>
diff --git a/static/img/token_api.png b/static/img/token_api.png
new file mode 100644
index 000000000..8078e38d0
Binary files /dev/null and b/static/img/token_api.png differ
diff --git a/static/img/undraw_docusaurus_mountain.svg b/static/img/undraw_docusaurus_mountain.svg
new file mode 100644
index 000000000..af961c49a
--- /dev/null
+++ b/static/img/undraw_docusaurus_mountain.svg
@@ -0,0 +1,171 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1088" height="687.962" viewBox="0 0 1088 687.962">
+  <title>Easy to Use</title>
+  <g id="Group_12" data-name="Group 12" transform="translate(-57 -56)">
+    <g id="Group_11" data-name="Group 11" transform="translate(57 56)">
+      <path id="Path_83" data-name="Path 83" d="M1017.81,560.461c-5.27,45.15-16.22,81.4-31.25,110.31-20,38.52-54.21,54.04-84.77,70.28a193.275,193.275,0,0,1-27.46,11.94c-55.61,19.3-117.85,14.18-166.74,3.99a657.282,657.282,0,0,0-104.09-13.16q-14.97-.675-29.97-.67c-15.42.02-293.07,5.29-360.67-131.57-16.69-33.76-28.13-75-32.24-125.27-11.63-142.12,52.29-235.46,134.74-296.47,155.97-115.41,369.76-110.57,523.43,7.88C941.15,276.621,1036.99,396.031,1017.81,560.461Z" transform="translate(-56 -106.019)" fill="#3f3d56"/>
+      <path id="Path_84" data-name="Path 84" d="M986.56,670.771c-20,38.52-47.21,64.04-77.77,80.28a193.272,193.272,0,0,1-27.46,11.94c-55.61,19.3-117.85,14.18-166.74,3.99a657.3,657.3,0,0,0-104.09-13.16q-14.97-.675-29.97-.67-23.13.03-46.25,1.72c-100.17,7.36-253.82-6.43-321.42-143.29L382,283.981,444.95,445.6l20.09,51.59,55.37-75.98L549,381.981l130.2,149.27,36.8-81.27L970.78,657.9l14.21,11.59Z" transform="translate(-56 -106.019)" fill="#f2f2f2"/>
+      <path id="Path_85" data-name="Path 85" d="M302,282.962l26-57,36,83-31-60Z" opacity="0.1"/>
+      <path id="Path_86" data-name="Path 86" d="M610.5,753.821q-14.97-.675-29.97-.67L465.04,497.191Z" transform="translate(-56 -106.019)" opacity="0.1"/>
+      <path id="Path_87" data-name="Path 87" d="M464.411,315.191,493,292.962l130,150-132-128Z" opacity="0.1"/>
+      <path id="Path_88" data-name="Path 88" d="M908.79,751.051a193.265,193.265,0,0,1-27.46,11.94L679.2,531.251Z" transform="translate(-56 -106.019)" opacity="0.1"/>
+      <circle id="Ellipse_11" data-name="Ellipse 11" cx="3" cy="3" r="3" transform="translate(479 98.962)" fill="#f2f2f2"/>
+      <circle id="Ellipse_12" data-name="Ellipse 12" cx="3" cy="3" r="3" transform="translate(396 201.962)" fill="#f2f2f2"/>
+      <circle id="Ellipse_13" data-name="Ellipse 13" cx="2" cy="2" r="2" transform="translate(600 220.962)" fill="#f2f2f2"/>
+      <circle id="Ellipse_14" data-name="Ellipse 14" cx="2" cy="2" r="2" transform="translate(180 265.962)" fill="#f2f2f2"/>
+      <circle id="Ellipse_15" data-name="Ellipse 15" cx="2" cy="2" r="2" transform="translate(612 96.962)" fill="#f2f2f2"/>
+      <circle id="Ellipse_16" data-name="Ellipse 16" cx="2" cy="2" r="2" transform="translate(736 192.962)" fill="#f2f2f2"/>
+      <circle id="Ellipse_17" data-name="Ellipse 17" cx="2" cy="2" r="2" transform="translate(858 344.962)" fill="#f2f2f2"/>
+      <path id="Path_89" data-name="Path 89" d="M306,121.222h-2.76v-2.76h-1.48v2.76H299V122.7h2.76v2.759h1.48V122.7H306Z" fill="#f2f2f2"/>
+      <path id="Path_90" data-name="Path 90" d="M848,424.222h-2.76v-2.76h-1.48v2.76H841V425.7h2.76v2.759h1.48V425.7H848Z" fill="#f2f2f2"/>
+      <path id="Path_91" data-name="Path 91" d="M1144,719.981c0,16.569-243.557,74-544,74s-544-57.431-544-74,243.557,14,544,14S1144,703.413,1144,719.981Z" transform="translate(-56 -106.019)" fill="#3f3d56"/>
+      <path id="Path_92" data-name="Path 92" d="M1144,719.981c0,16.569-243.557,74-544,74s-544-57.431-544-74,243.557,14,544,14S1144,703.413,1144,719.981Z" transform="translate(-56 -106.019)" opacity="0.1"/>
+      <ellipse id="Ellipse_18" data-name="Ellipse 18" cx="544" cy="30" rx="544" ry="30" transform="translate(0 583.962)" fill="#3f3d56"/>
+      <path id="Path_93" data-name="Path 93" d="M624,677.981c0,33.137-14.775,24-33,24s-33,9.137-33-24,33-96,33-96S624,644.844,624,677.981Z" transform="translate(-56 -106.019)" fill="#ff6584"/>
+      <path id="Path_94" data-name="Path 94" d="M606,690.66c0,15.062-6.716,10.909-15,10.909s-15,4.153-15-10.909,15-43.636,15-43.636S606,675.6,606,690.66Z" transform="translate(-56 -106.019)" opacity="0.1"/>
+      <rect id="Rectangle_97" data-name="Rectangle 97" width="92" height="18" rx="9" transform="translate(489 604.962)" fill="#2f2e41"/>
+      <rect id="Rectangle_98" data-name="Rectangle 98" width="92" height="18" rx="9" transform="translate(489 586.962)" fill="#2f2e41"/>
+      <path id="Path_95" data-name="Path 95" d="M193,596.547c0,55.343,34.719,100.126,77.626,100.126" transform="translate(-56 -106.019)" fill="#3f3d56"/>
+      <path id="Path_96" data-name="Path 96" d="M270.626,696.673c0-55.965,38.745-101.251,86.626-101.251" transform="translate(-56 -106.019)" fill="#6c63ff"/>
+      <path id="Path_97" data-name="Path 97" d="M221.125,601.564c0,52.57,22.14,95.109,49.5,95.109" transform="translate(-56 -106.019)" fill="#6c63ff"/>
+      <path id="Path_98" data-name="Path 98" d="M270.626,696.673c0-71.511,44.783-129.377,100.126-129.377" transform="translate(-56 -106.019)" fill="#3f3d56"/>
+      <path id="Path_99" data-name="Path 99" d="M254.3,697.379s11.009-.339,14.326-2.7,16.934-5.183,17.757-1.395,16.544,18.844,4.115,18.945-28.879-1.936-32.19-3.953S254.3,697.379,254.3,697.379Z" transform="translate(-56 -106.019)" fill="#a8a8a8"/>
+      <path id="Path_100" data-name="Path 100" d="M290.716,710.909c-12.429.1-28.879-1.936-32.19-3.953-2.522-1.536-3.527-7.048-3.863-9.591l-.368.014s.7,8.879,4.009,10.9,19.761,4.053,32.19,3.953c3.588-.029,4.827-1.305,4.759-3.2C294.755,710.174,293.386,710.887,290.716,710.909Z" transform="translate(-56 -106.019)" opacity="0.2"/>
+      <path id="Path_101" data-name="Path 101" d="M777.429,633.081c0,38.029,23.857,68.8,53.341,68.8" transform="translate(-56 -106.019)" fill="#3f3d56"/>
+      <path id="Path_102" data-name="Path 102" d="M830.769,701.882c0-38.456,26.623-69.575,59.525-69.575" transform="translate(-56 -106.019)" fill="#6c63ff"/>
+      <path id="Path_103" data-name="Path 103" d="M796.755,636.528c0,36.124,15.213,65.354,34.014,65.354" transform="translate(-56 -106.019)" fill="#6c63ff"/>
+      <path id="Path_104" data-name="Path 104" d="M830.769,701.882c0-49.139,30.773-88.9,68.8-88.9" transform="translate(-56 -106.019)" fill="#3f3d56"/>
+      <path id="Path_105" data-name="Path 105" d="M819.548,702.367s7.565-.233,9.844-1.856,11.636-3.562,12.2-.958,11.368,12.949,2.828,13.018-19.844-1.33-22.119-2.716S819.548,702.367,819.548,702.367Z" transform="translate(-56 -106.019)" fill="#a8a8a8"/>
+      <path id="Path_106" data-name="Path 106" d="M844.574,711.664c-8.54.069-19.844-1.33-22.119-2.716-1.733-1.056-2.423-4.843-2.654-6.59l-.253.01s.479,6.1,2.755,7.487,13.579,2.785,22.119,2.716c2.465-.02,3.317-.9,3.27-2.2C847.349,711.159,846.409,711.649,844.574,711.664Z" transform="translate(-56 -106.019)" opacity="0.2"/>
+      <path id="Path_107" data-name="Path 107" d="M949.813,724.718s11.36-1.729,14.5-4.591,16.89-7.488,18.217-3.667,19.494,17.447,6.633,19.107-30.153,1.609-33.835-.065S949.813,724.718,949.813,724.718Z" transform="translate(-56 -106.019)" fill="#a8a8a8"/>
+      <path id="Path_108" data-name="Path 108" d="M989.228,734.173c-12.86,1.659-30.153,1.609-33.835-.065-2.8-1.275-4.535-6.858-5.2-9.45l-.379.061s1.833,9.109,5.516,10.783,20.975,1.725,33.835.065c3.712-.479,4.836-1.956,4.529-3.906C993.319,732.907,991.991,733.817,989.228,734.173Z" transform="translate(-56 -106.019)" opacity="0.2"/>
+      <path id="Path_109" data-name="Path 109" d="M670.26,723.9s9.587-1.459,12.237-3.875,14.255-6.32,15.374-3.095,16.452,14.725,5.6,16.125-25.448,1.358-28.555-.055S670.26,723.9,670.26,723.9Z" transform="translate(-56 -106.019)" fill="#a8a8a8"/>
+      <path id="Path_110" data-name="Path 110" d="M703.524,731.875c-10.853,1.4-25.448,1.358-28.555-.055-2.367-1.076-3.827-5.788-4.39-7.976l-.32.051s1.547,7.687,4.655,9.1,17.7,1.456,28.555.055c3.133-.4,4.081-1.651,3.822-3.3C706.977,730.807,705.856,731.575,703.524,731.875Z" transform="translate(-56 -106.019)" opacity="0.2"/>
+      <path id="Path_111" data-name="Path 111" d="M178.389,719.109s7.463-1.136,9.527-3.016,11.1-4.92,11.969-2.409,12.808,11.463,4.358,12.553-19.811,1.057-22.23-.043S178.389,719.109,178.389,719.109Z" transform="translate(-56 -106.019)" fill="#a8a8a8"/>
+      <path id="Path_112" data-name="Path 112" d="M204.285,725.321c-8.449,1.09-19.811,1.057-22.23-.043-1.842-.838-2.979-4.506-3.417-6.209l-.249.04s1.2,5.984,3.624,7.085,13.781,1.133,22.23.043c2.439-.315,3.177-1.285,2.976-2.566C206.973,724.489,206.1,725.087,204.285,725.321Z" transform="translate(-56 -106.019)" opacity="0.2"/>
+      <path id="Path_113" data-name="Path 113" d="M439.7,707.337c0,30.22-42.124,20.873-93.7,20.873s-93.074,9.347-93.074-20.873,42.118-36.793,93.694-36.793S439.7,677.117,439.7,707.337Z" transform="translate(-56 -106.019)" opacity="0.1"/>
+      <path id="Path_114" data-name="Path 114" d="M439.7,699.9c0,30.22-42.124,20.873-93.7,20.873s-93.074,9.347-93.074-20.873S295.04,663.1,346.616,663.1,439.7,669.676,439.7,699.9Z" transform="translate(-56 -106.019)" fill="#3f3d56"/>
+    </g>
+    <g id="docusaurus_keytar" transform="translate(312.271 493.733)">
+      <path id="Path_40" data-name="Path 40" d="M99,52h91.791V89.153H99Z" transform="translate(5.904 -14.001)" fill="#fff" fill-rule="evenodd"/>
+      <path id="Path_41" data-name="Path 41" d="M24.855,163.927A21.828,21.828,0,0,1,5.947,153a21.829,21.829,0,0,0,18.908,32.782H46.71V163.927Z" transform="translate(-3 -4.634)" fill="#3ecc5f" fill-rule="evenodd"/>
+      <path id="Path_42" data-name="Path 42" d="M121.861,61.1l76.514-4.782V45.39A21.854,21.854,0,0,0,176.52,23.535H78.173L75.441,18.8a3.154,3.154,0,0,0-5.464,0l-2.732,4.732L64.513,18.8a3.154,3.154,0,0,0-5.464,0l-2.732,4.732L53.586,18.8a3.154,3.154,0,0,0-5.464,0L45.39,23.535c-.024,0-.046,0-.071,0l-4.526-4.525a3.153,3.153,0,0,0-5.276,1.414l-1.5,5.577-5.674-1.521a3.154,3.154,0,0,0-3.863,3.864L26,34.023l-5.575,1.494a3.155,3.155,0,0,0-1.416,5.278l4.526,4.526c0,.023,0,.046,0,.07L18.8,48.122a3.154,3.154,0,0,0,0,5.464l4.732,2.732L18.8,59.05a3.154,3.154,0,0,0,0,5.464l4.732,2.732L18.8,69.977a3.154,3.154,0,0,0,0,5.464l4.732,2.732L18.8,80.9a3.154,3.154,0,0,0,0,5.464L23.535,89.1,18.8,91.832a3.154,3.154,0,0,0,0,5.464l4.732,2.732L18.8,102.76a3.154,3.154,0,0,0,0,5.464l4.732,2.732L18.8,113.687a3.154,3.154,0,0,0,0,5.464l4.732,2.732L18.8,124.615a3.154,3.154,0,0,0,0,5.464l4.732,2.732L18.8,135.542a3.154,3.154,0,0,0,0,5.464l4.732,2.732L18.8,146.469a3.154,3.154,0,0,0,0,5.464l4.732,2.732L18.8,157.4a3.154,3.154,0,0,0,0,5.464l4.732,2.732L18.8,168.324a3.154,3.154,0,0,0,0,5.464l4.732,2.732A21.854,21.854,0,0,0,45.39,198.375H176.52a21.854,21.854,0,0,0,21.855-21.855V89.1l-76.514-4.782a11.632,11.632,0,0,1,0-23.219" transform="translate(-1.681 -17.226)" fill="#3ecc5f" fill-rule="evenodd"/>
+      <path id="Path_43" data-name="Path 43" d="M143,186.71h32.782V143H143Z" transform="translate(9.984 -5.561)" fill="#3ecc5f" fill-rule="evenodd"/>
+      <path id="Path_44" data-name="Path 44" d="M196.71,159.855a5.438,5.438,0,0,0-.7.07c-.042-.164-.081-.329-.127-.493a5.457,5.457,0,1,0-5.4-9.372q-.181-.185-.366-.367a5.454,5.454,0,1,0-9.384-5.4c-.162-.046-.325-.084-.486-.126a5.467,5.467,0,1,0-10.788,0c-.162.042-.325.08-.486.126a5.457,5.457,0,1,0-9.384,5.4,21.843,21.843,0,1,0,36.421,21.02,5.452,5.452,0,1,0,.7-10.858" transform="translate(10.912 -6.025)" fill="#44d860" fill-rule="evenodd"/>
+      <path id="Path_45" data-name="Path 45" d="M153,124.855h32.782V103H153Z" transform="translate(10.912 -9.271)" fill="#3ecc5f" fill-rule="evenodd"/>
+      <path id="Path_46" data-name="Path 46" d="M194.855,116.765a2.732,2.732,0,1,0,0-5.464,2.811,2.811,0,0,0-.349.035c-.022-.082-.04-.164-.063-.246a2.733,2.733,0,0,0-1.052-5.253,2.7,2.7,0,0,0-1.648.566q-.09-.093-.184-.184a2.7,2.7,0,0,0,.553-1.633,2.732,2.732,0,0,0-5.245-1.07,10.928,10.928,0,1,0,0,21.031,2.732,2.732,0,0,0,5.245-1.07,2.7,2.7,0,0,0-.553-1.633q.093-.09.184-.184a2.7,2.7,0,0,0,1.648.566,2.732,2.732,0,0,0,1.052-5.253c.023-.081.042-.164.063-.246a2.814,2.814,0,0,0,.349.035" transform="translate(12.767 -9.377)" fill="#44d860" fill-rule="evenodd"/>
+      <path id="Path_47" data-name="Path 47" d="M65.087,56.891a2.732,2.732,0,0,1-2.732-2.732,8.2,8.2,0,0,0-16.391,0,2.732,2.732,0,0,1-5.464,0,13.659,13.659,0,0,1,27.319,0,2.732,2.732,0,0,1-2.732,2.732" transform="translate(0.478 -15.068)" fill-rule="evenodd"/>
+      <path id="Path_48" data-name="Path 48" d="M103,191.347h65.565a21.854,21.854,0,0,0,21.855-21.855V93H124.855A21.854,21.854,0,0,0,103,114.855Z" transform="translate(6.275 -10.199)" fill="#ffff50" fill-rule="evenodd"/>
+      <path id="Path_49" data-name="Path 49" d="M173.216,129.787H118.535a1.093,1.093,0,1,1,0-2.185h54.681a1.093,1.093,0,0,1,0,2.185m0,21.855H118.535a1.093,1.093,0,1,1,0-2.186h54.681a1.093,1.093,0,0,1,0,2.186m0,21.855H118.535a1.093,1.093,0,1,1,0-2.185h54.681a1.093,1.093,0,0,1,0,2.185m0-54.434H118.535a1.093,1.093,0,1,1,0-2.185h54.681a1.093,1.093,0,0,1,0,2.185m0,21.652H118.535a1.093,1.093,0,1,1,0-2.186h54.681a1.093,1.093,0,0,1,0,2.186m0,21.855H118.535a1.093,1.093,0,1,1,0-2.186h54.681a1.093,1.093,0,0,1,0,2.186M189.585,61.611c-.013,0-.024-.007-.037-.005-3.377.115-4.974,3.492-6.384,6.472-1.471,3.114-2.608,5.139-4.473,5.078-2.064-.074-3.244-2.406-4.494-4.874-1.436-2.835-3.075-6.049-6.516-5.929-3.329.114-4.932,3.053-6.346,5.646-1.5,2.762-2.529,4.442-4.5,4.364-2.106-.076-3.225-1.972-4.52-4.167-1.444-2.443-3.112-5.191-6.487-5.1-3.272.113-4.879,2.606-6.3,4.808-1.5,2.328-2.552,3.746-4.551,3.662-2.156-.076-3.27-1.65-4.558-3.472-1.447-2.047-3.077-4.363-6.442-4.251-3.2.109-4.807,2.153-6.224,3.954-1.346,1.709-2.4,3.062-4.621,2.977a1.093,1.093,0,0,0-.079,2.186c3.3.11,4.967-1.967,6.417-3.81,1.286-1.635,2.4-3.045,4.582-3.12,2.1-.09,3.091,1.218,4.584,3.327,1.417,2,3.026,4.277,6.263,4.394,3.391.114,5.022-2.42,6.467-4.663,1.292-2,2.406-3.734,4.535-3.807,1.959-.073,3.026,1.475,4.529,4.022,1.417,2.4,3.023,5.121,6.324,5.241,3.415.118,5.064-2.863,6.5-5.5,1.245-2.282,2.419-4.437,4.5-4.509,1.959-.046,2.981,1.743,4.492,4.732,1.412,2.79,3.013,5.95,6.365,6.071l.185,0c3.348,0,4.937-3.36,6.343-6.331,1.245-2.634,2.423-5.114,4.444-5.216Z" transform="translate(7.109 -13.11)" fill-rule="evenodd"/>
+      <path id="Path_50" data-name="Path 50" d="M83,186.71h43.71V143H83Z" transform="translate(4.42 -5.561)" fill="#3ecc5f" fill-rule="evenodd"/>
+      <g id="Group_8" data-name="Group 8" transform="matrix(0.966, -0.259, 0.259, 0.966, 109.327, 91.085)">
+        <rect id="Rectangle_3" data-name="Rectangle 3" width="92.361" height="36.462" rx="2" transform="translate(0 0)" fill="#d8d8d8"/>
+        <g id="Group_2" data-name="Group 2" transform="translate(1.531 23.03)">
+          <rect id="Rectangle_4" data-name="Rectangle 4" width="5.336" height="5.336" rx="1" transform="translate(16.797 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_5" data-name="Rectangle 5" width="5.336" height="5.336" rx="1" transform="translate(23.12 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_6" data-name="Rectangle 6" width="5.336" height="5.336" rx="1" transform="translate(29.444 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_7" data-name="Rectangle 7" width="5.336" height="5.336" rx="1" transform="translate(35.768 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_8" data-name="Rectangle 8" width="5.336" height="5.336" rx="1" transform="translate(42.091 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_9" data-name="Rectangle 9" width="5.336" height="5.336" rx="1" transform="translate(48.415 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_10" data-name="Rectangle 10" width="5.336" height="5.336" rx="1" transform="translate(54.739 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_11" data-name="Rectangle 11" width="5.336" height="5.336" rx="1" transform="translate(61.063 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_12" data-name="Rectangle 12" width="5.336" height="5.336" rx="1" transform="translate(67.386 0)" fill="#4a4a4a"/>
+          <path id="Path_51" data-name="Path 51" d="M1.093,0H14.518a1.093,1.093,0,0,1,1.093,1.093V4.243a1.093,1.093,0,0,1-1.093,1.093H1.093A1.093,1.093,0,0,1,0,4.243V1.093A1.093,1.093,0,0,1,1.093,0ZM75,0H88.426a1.093,1.093,0,0,1,1.093,1.093V4.243a1.093,1.093,0,0,1-1.093,1.093H75a1.093,1.093,0,0,1-1.093-1.093V1.093A1.093,1.093,0,0,1,75,0Z" transform="translate(0 0)" fill="#4a4a4a" fill-rule="evenodd"/>
+        </g>
+        <g id="Group_3" data-name="Group 3" transform="translate(1.531 10.261)">
+          <path id="Path_52" data-name="Path 52" d="M1.093,0H6.218A1.093,1.093,0,0,1,7.31,1.093V4.242A1.093,1.093,0,0,1,6.218,5.335H1.093A1.093,1.093,0,0,1,0,4.242V1.093A1.093,1.093,0,0,1,1.093,0Z" transform="translate(0 0)" fill="#4a4a4a" fill-rule="evenodd"/>
+          <rect id="Rectangle_13" data-name="Rectangle 13" width="5.336" height="5.336" rx="1" transform="translate(8.299 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_14" data-name="Rectangle 14" width="5.336" height="5.336" rx="1" transform="translate(14.623 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_15" data-name="Rectangle 15" width="5.336" height="5.336" rx="1" transform="translate(20.947 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_16" data-name="Rectangle 16" width="5.336" height="5.336" rx="1" transform="translate(27.271 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_17" data-name="Rectangle 17" width="5.336" height="5.336" rx="1" transform="translate(33.594 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_18" data-name="Rectangle 18" width="5.336" height="5.336" rx="1" transform="translate(39.918 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_19" data-name="Rectangle 19" width="5.336" height="5.336" rx="1" transform="translate(46.242 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_20" data-name="Rectangle 20" width="5.336" height="5.336" rx="1" transform="translate(52.565 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_21" data-name="Rectangle 21" width="5.336" height="5.336" rx="1" transform="translate(58.888 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_22" data-name="Rectangle 22" width="5.336" height="5.336" rx="1" transform="translate(65.212 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_23" data-name="Rectangle 23" width="5.336" height="5.336" rx="1" transform="translate(71.536 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_24" data-name="Rectangle 24" width="5.336" height="5.336" rx="1" transform="translate(77.859 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_25" data-name="Rectangle 25" width="5.336" height="5.336" rx="1" transform="translate(84.183 0)" fill="#4a4a4a"/>
+        </g>
+        <g id="Group_4" data-name="Group 4" transform="translate(91.05 9.546) rotate(180)">
+          <path id="Path_53" data-name="Path 53" d="M1.093,0H6.219A1.093,1.093,0,0,1,7.312,1.093v3.15A1.093,1.093,0,0,1,6.219,5.336H1.093A1.093,1.093,0,0,1,0,4.243V1.093A1.093,1.093,0,0,1,1.093,0Z" transform="translate(0 0)" fill="#4a4a4a" fill-rule="evenodd"/>
+          <rect id="Rectangle_26" data-name="Rectangle 26" width="5.336" height="5.336" rx="1" transform="translate(8.299 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_27" data-name="Rectangle 27" width="5.336" height="5.336" rx="1" transform="translate(14.623 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_28" data-name="Rectangle 28" width="5.336" height="5.336" rx="1" transform="translate(20.947 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_29" data-name="Rectangle 29" width="5.336" height="5.336" rx="1" transform="translate(27.271 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_30" data-name="Rectangle 30" width="5.336" height="5.336" rx="1" transform="translate(33.594 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_31" data-name="Rectangle 31" width="5.336" height="5.336" rx="1" transform="translate(39.918 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_32" data-name="Rectangle 32" width="5.336" height="5.336" rx="1" transform="translate(46.242 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_33" data-name="Rectangle 33" width="5.336" height="5.336" rx="1" transform="translate(52.565 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_34" data-name="Rectangle 34" width="5.336" height="5.336" rx="1" transform="translate(58.889 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_35" data-name="Rectangle 35" width="5.336" height="5.336" rx="1" transform="translate(65.213 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_36" data-name="Rectangle 36" width="5.336" height="5.336" rx="1" transform="translate(71.537 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_37" data-name="Rectangle 37" width="5.336" height="5.336" rx="1" transform="translate(77.86 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_38" data-name="Rectangle 38" width="5.336" height="5.336" rx="1" transform="translate(84.183 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_39" data-name="Rectangle 39" width="5.336" height="5.336" rx="1" transform="translate(8.299 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_40" data-name="Rectangle 40" width="5.336" height="5.336" rx="1" transform="translate(14.623 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_41" data-name="Rectangle 41" width="5.336" height="5.336" rx="1" transform="translate(20.947 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_42" data-name="Rectangle 42" width="5.336" height="5.336" rx="1" transform="translate(27.271 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_43" data-name="Rectangle 43" width="5.336" height="5.336" rx="1" transform="translate(33.594 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_44" data-name="Rectangle 44" width="5.336" height="5.336" rx="1" transform="translate(39.918 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_45" data-name="Rectangle 45" width="5.336" height="5.336" rx="1" transform="translate(46.242 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_46" data-name="Rectangle 46" width="5.336" height="5.336" rx="1" transform="translate(52.565 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_47" data-name="Rectangle 47" width="5.336" height="5.336" rx="1" transform="translate(58.889 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_48" data-name="Rectangle 48" width="5.336" height="5.336" rx="1" transform="translate(65.213 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_49" data-name="Rectangle 49" width="5.336" height="5.336" rx="1" transform="translate(71.537 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_50" data-name="Rectangle 50" width="5.336" height="5.336" rx="1" transform="translate(77.86 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_51" data-name="Rectangle 51" width="5.336" height="5.336" rx="1" transform="translate(84.183 0)" fill="#4a4a4a"/>
+        </g>
+        <g id="Group_6" data-name="Group 6" transform="translate(1.531 16.584)">
+          <path id="Path_54" data-name="Path 54" d="M1.093,0h7.3A1.093,1.093,0,0,1,9.485,1.093v3.15A1.093,1.093,0,0,1,8.392,5.336h-7.3A1.093,1.093,0,0,1,0,4.243V1.094A1.093,1.093,0,0,1,1.093,0Z" transform="translate(0 0)" fill="#4a4a4a" fill-rule="evenodd"/>
+          <g id="Group_5" data-name="Group 5" transform="translate(10.671 0)">
+            <rect id="Rectangle_52" data-name="Rectangle 52" width="5.336" height="5.336" rx="1" fill="#4a4a4a"/>
+            <rect id="Rectangle_53" data-name="Rectangle 53" width="5.336" height="5.336" rx="1" transform="translate(6.324 0)" fill="#4a4a4a"/>
+            <rect id="Rectangle_54" data-name="Rectangle 54" width="5.336" height="5.336" rx="1" transform="translate(12.647 0)" fill="#4a4a4a"/>
+            <rect id="Rectangle_55" data-name="Rectangle 55" width="5.336" height="5.336" rx="1" transform="translate(18.971 0)" fill="#4a4a4a"/>
+            <rect id="Rectangle_56" data-name="Rectangle 56" width="5.336" height="5.336" rx="1" transform="translate(25.295 0)" fill="#4a4a4a"/>
+            <rect id="Rectangle_57" data-name="Rectangle 57" width="5.336" height="5.336" rx="1" transform="translate(31.619 0)" fill="#4a4a4a"/>
+            <rect id="Rectangle_58" data-name="Rectangle 58" width="5.336" height="5.336" rx="1" transform="translate(37.942 0)" fill="#4a4a4a"/>
+            <rect id="Rectangle_59" data-name="Rectangle 59" width="5.336" height="5.336" rx="1" transform="translate(44.265 0)" fill="#4a4a4a"/>
+            <rect id="Rectangle_60" data-name="Rectangle 60" width="5.336" height="5.336" rx="1" transform="translate(50.589 0)" fill="#4a4a4a"/>
+            <rect id="Rectangle_61" data-name="Rectangle 61" width="5.336" height="5.336" rx="1" transform="translate(56.912 0)" fill="#4a4a4a"/>
+            <rect id="Rectangle_62" data-name="Rectangle 62" width="5.336" height="5.336" rx="1" transform="translate(63.236 0)" fill="#4a4a4a"/>
+          </g>
+          <path id="Path_55" data-name="Path 55" d="M1.094,0H8A1.093,1.093,0,0,1,9.091,1.093v3.15A1.093,1.093,0,0,1,8,5.336H1.093A1.093,1.093,0,0,1,0,4.243V1.094A1.093,1.093,0,0,1,1.093,0Z" transform="translate(80.428 0)" fill="#4a4a4a" fill-rule="evenodd"/>
+        </g>
+        <g id="Group_7" data-name="Group 7" transform="translate(1.531 29.627)">
+          <rect id="Rectangle_63" data-name="Rectangle 63" width="5.336" height="5.336" rx="1" transform="translate(0 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_64" data-name="Rectangle 64" width="5.336" height="5.336" rx="1" transform="translate(6.324 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_65" data-name="Rectangle 65" width="5.336" height="5.336" rx="1" transform="translate(12.647 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_66" data-name="Rectangle 66" width="5.336" height="5.336" rx="1" transform="translate(18.971 0)" fill="#4a4a4a"/>
+          <path id="Path_56" data-name="Path 56" d="M1.093,0H31.515a1.093,1.093,0,0,1,1.093,1.093V4.244a1.093,1.093,0,0,1-1.093,1.093H1.093A1.093,1.093,0,0,1,0,4.244V1.093A1.093,1.093,0,0,1,1.093,0ZM34.687,0h3.942a1.093,1.093,0,0,1,1.093,1.093V4.244a1.093,1.093,0,0,1-1.093,1.093H34.687a1.093,1.093,0,0,1-1.093-1.093V1.093A1.093,1.093,0,0,1,34.687,0Z" transform="translate(25.294 0)" fill="#4a4a4a" fill-rule="evenodd"/>
+          <rect id="Rectangle_67" data-name="Rectangle 67" width="5.336" height="5.336" rx="1" transform="translate(66.003 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_68" data-name="Rectangle 68" width="5.336" height="5.336" rx="1" transform="translate(72.327 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_69" data-name="Rectangle 69" width="5.336" height="5.336" rx="1" transform="translate(84.183 0)" fill="#4a4a4a"/>
+          <path id="Path_57" data-name="Path 57" d="M5.336,0V1.18A1.093,1.093,0,0,1,4.243,2.273H1.093A1.093,1.093,0,0,1,0,1.18V0Z" transform="translate(83.59 2.273) rotate(180)" fill="#4a4a4a"/>
+          <path id="Path_58" data-name="Path 58" d="M5.336,0V1.18A1.093,1.093,0,0,1,4.243,2.273H1.093A1.093,1.093,0,0,1,0,1.18V0Z" transform="translate(78.255 3.063)" fill="#4a4a4a"/>
+        </g>
+        <rect id="Rectangle_70" data-name="Rectangle 70" width="88.927" height="2.371" rx="1.085" transform="translate(1.925 1.17)" fill="#4a4a4a"/>
+        <rect id="Rectangle_71" data-name="Rectangle 71" width="4.986" height="1.581" rx="0.723" transform="translate(4.1 1.566)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_72" data-name="Rectangle 72" width="4.986" height="1.581" rx="0.723" transform="translate(10.923 1.566)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_73" data-name="Rectangle 73" width="4.986" height="1.581" rx="0.723" transform="translate(16.173 1.566)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_74" data-name="Rectangle 74" width="4.986" height="1.581" rx="0.723" transform="translate(21.421 1.566)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_75" data-name="Rectangle 75" width="4.986" height="1.581" rx="0.723" transform="translate(26.671 1.566)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_76" data-name="Rectangle 76" width="4.986" height="1.581" rx="0.723" transform="translate(33.232 1.566)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_77" data-name="Rectangle 77" width="4.986" height="1.581" rx="0.723" transform="translate(38.48 1.566)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_78" data-name="Rectangle 78" width="4.986" height="1.581" rx="0.723" transform="translate(43.73 1.566)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_79" data-name="Rectangle 79" width="4.986" height="1.581" rx="0.723" transform="translate(48.978 1.566)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_80" data-name="Rectangle 80" width="4.986" height="1.581" rx="0.723" transform="translate(55.54 1.566)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_81" data-name="Rectangle 81" width="4.986" height="1.581" rx="0.723" transform="translate(60.788 1.566)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_82" data-name="Rectangle 82" width="4.986" height="1.581" rx="0.723" transform="translate(66.038 1.566)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_83" data-name="Rectangle 83" width="4.986" height="1.581" rx="0.723" transform="translate(72.599 1.566)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_84" data-name="Rectangle 84" width="4.986" height="1.581" rx="0.723" transform="translate(77.847 1.566)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_85" data-name="Rectangle 85" width="4.986" height="1.581" rx="0.723" transform="translate(83.097 1.566)" fill="#d8d8d8" opacity="0.136"/>
+      </g>
+      <path id="Path_59" data-name="Path 59" d="M146.71,159.855a5.439,5.439,0,0,0-.7.07c-.042-.164-.081-.329-.127-.493a5.457,5.457,0,1,0-5.4-9.372q-.181-.185-.366-.367a5.454,5.454,0,1,0-9.384-5.4c-.162-.046-.325-.084-.486-.126a5.467,5.467,0,1,0-10.788,0c-.162.042-.325.08-.486.126a5.457,5.457,0,1,0-9.384,5.4,21.843,21.843,0,1,0,36.421,21.02,5.452,5.452,0,1,0,.7-10.858" transform="translate(6.275 -6.025)" fill="#44d860" fill-rule="evenodd"/>
+      <path id="Path_60" data-name="Path 60" d="M83,124.855h43.71V103H83Z" transform="translate(4.42 -9.271)" fill="#3ecc5f" fill-rule="evenodd"/>
+      <path id="Path_61" data-name="Path 61" d="M134.855,116.765a2.732,2.732,0,1,0,0-5.464,2.811,2.811,0,0,0-.349.035c-.022-.082-.04-.164-.063-.246a2.733,2.733,0,0,0-1.052-5.253,2.7,2.7,0,0,0-1.648.566q-.09-.093-.184-.184a2.7,2.7,0,0,0,.553-1.633,2.732,2.732,0,0,0-5.245-1.07,10.928,10.928,0,1,0,0,21.031,2.732,2.732,0,0,0,5.245-1.07,2.7,2.7,0,0,0-.553-1.633q.093-.09.184-.184a2.7,2.7,0,0,0,1.648.566,2.732,2.732,0,0,0,1.052-5.253c.023-.081.042-.164.063-.246a2.811,2.811,0,0,0,.349.035" transform="translate(7.202 -9.377)" fill="#44d860" fill-rule="evenodd"/>
+      <path id="Path_62" data-name="Path 62" d="M143.232,42.33a2.967,2.967,0,0,1-.535-.055,2.754,2.754,0,0,1-.514-.153,2.838,2.838,0,0,1-.471-.251,4.139,4.139,0,0,1-.415-.339,3.2,3.2,0,0,1-.338-.415A2.7,2.7,0,0,1,140.5,39.6a2.968,2.968,0,0,1,.055-.535,3.152,3.152,0,0,1,.152-.514,2.874,2.874,0,0,1,.252-.47,2.633,2.633,0,0,1,.753-.754,2.837,2.837,0,0,1,.471-.251,2.753,2.753,0,0,1,.514-.153,2.527,2.527,0,0,1,1.071,0,2.654,2.654,0,0,1,.983.4,4.139,4.139,0,0,1,.415.339,4.019,4.019,0,0,1,.339.415,2.786,2.786,0,0,1,.251.47,2.864,2.864,0,0,1,.208,1.049,2.77,2.77,0,0,1-.8,1.934,4.139,4.139,0,0,1-.415.339,2.722,2.722,0,0,1-1.519.459m21.855-1.366a2.789,2.789,0,0,1-1.935-.8,4.162,4.162,0,0,1-.338-.415,2.7,2.7,0,0,1-.459-1.519,2.789,2.789,0,0,1,.8-1.934,4.139,4.139,0,0,1,.415-.339,2.838,2.838,0,0,1,.471-.251,2.752,2.752,0,0,1,.514-.153,2.527,2.527,0,0,1,1.071,0,2.654,2.654,0,0,1,.983.4,4.139,4.139,0,0,1,.415.339,2.79,2.79,0,0,1,.8,1.934,3.069,3.069,0,0,1-.055.535,2.779,2.779,0,0,1-.153.514,3.885,3.885,0,0,1-.251.47,4.02,4.02,0,0,1-.339.415,4.138,4.138,0,0,1-.415.339,2.722,2.722,0,0,1-1.519.459" transform="translate(9.753 -15.532)" fill-rule="evenodd"/>
+    </g>
+  </g>
+</svg>
diff --git a/static/img/undraw_docusaurus_react.svg b/static/img/undraw_docusaurus_react.svg
new file mode 100644
index 000000000..94b5cf08f
--- /dev/null
+++ b/static/img/undraw_docusaurus_react.svg
@@ -0,0 +1,170 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1041.277" height="554.141" viewBox="0 0 1041.277 554.141">
+  <title>Powered by React</title>
+  <g id="Group_24" data-name="Group 24" transform="translate(-440 -263)">
+    <g id="Group_23" data-name="Group 23" transform="translate(439.989 262.965)">
+      <path id="Path_299" data-name="Path 299" d="M1040.82,611.12q-1.74,3.75-3.47,7.4-2.7,5.67-5.33,11.12c-.78,1.61-1.56,3.19-2.32,4.77-8.6,17.57-16.63,33.11-23.45,45.89A73.21,73.21,0,0,1,942.44,719l-151.65,1.65h-1.6l-13,.14-11.12.12-34.1.37h-1.38l-17.36.19h-.53l-107,1.16-95.51,1-11.11.12-69,.75H429l-44.75.48h-.48l-141.5,1.53-42.33.46a87.991,87.991,0,0,1-10.79-.54h0c-1.22-.14-2.44-.3-3.65-.49a87.38,87.38,0,0,1-51.29-27.54C116,678.37,102.75,655,93.85,629.64q-1.93-5.49-3.6-11.12C59.44,514.37,97,380,164.6,290.08q4.25-5.64,8.64-11l.07-.08c20.79-25.52,44.1-46.84,68.93-62,44-26.91,92.75-34.49,140.7-11.9,40.57,19.12,78.45,28.11,115.17,30.55,3.71.24,7.42.42,11.11.53,84.23,2.65,163.17-27.7,255.87-47.29,3.69-.78,7.39-1.55,11.12-2.28,66.13-13.16,139.49-20.1,226.73-5.51a189.089,189.089,0,0,1,26.76,6.4q5.77,1.86,11.12,4c41.64,16.94,64.35,48.24,74,87.46q1.37,5.46,2.37,11.11C1134.3,384.41,1084.19,518.23,1040.82,611.12Z" transform="translate(-79.34 -172.91)" fill="#f2f2f2"/>
+      <path id="Path_300" data-name="Path 300" d="M576.36,618.52a95.21,95.21,0,0,1-1.87,11.12h93.7V618.52Zm-78.25,62.81,11.11-.09V653.77c-3.81-.17-7.52-.34-11.11-.52ZM265.19,618.52v11.12h198.5V618.52ZM1114.87,279h-74V191.51q-5.35-2.17-11.12-4V279H776.21V186.58c-3.73.73-7.43,1.5-11.12,2.28V279H509.22V236.15c-3.69-.11-7.4-.29-11.11-.53V279H242.24V217c-24.83,15.16-48.14,36.48-68.93,62h-.07v.08q-4.4,5.4-8.64,11h8.64V618.52h-83q1.66,5.63,3.6,11.12h79.39v93.62a87,87,0,0,0,12.2,2.79c1.21.19,2.43.35,3.65.49h0a87.991,87.991,0,0,0,10.79.54l42.33-.46v-97H498.11v94.21l11.11-.12V629.64H765.09V721l11.12-.12V629.64H1029.7v4.77c.76-1.58,1.54-3.16,2.32-4.77q2.63-5.45,5.33-11.12,1.73-3.64,3.47-7.4v-321h76.42Q1116.23,284.43,1114.87,279ZM242.24,618.52V290.08H498.11V618.52Zm267,0V290.08H765.09V618.52Zm520.48,0H776.21V290.08H1029.7Z" transform="translate(-79.34 -172.91)" opacity="0.1"/>
+      <path id="Path_301" data-name="Path 301" d="M863.09,533.65v13l-151.92,1.4-1.62.03-57.74.53-1.38.02-17.55.15h-.52l-106.98.99L349.77,551.4h-.15l-44.65.42-.48.01-198.4,1.82v-15l46.65-28,93.6-.78,2-.01.66-.01,2-.03,44.94-.37,2.01-.01.64-.01,2-.01L315,509.3l.38-.01,35.55-.3h.29l277.4-2.34,6.79-.05h.68l5.18-.05,37.65-.31,2-.03,1.85-.02h.96l11.71-.09,2.32-.03,3.11-.02,9.75-.09,15.47-.13,2-.02,3.48-.02h.65l74.71-.64Z" fill="#65617d"/>
+      <path id="Path_302" data-name="Path 302" d="M863.09,533.65v13l-151.92,1.4-1.62.03-57.74.53-1.38.02-17.55.15h-.52l-106.98.99L349.77,551.4h-.15l-44.65.42-.48.01-198.4,1.82v-15l46.65-28,93.6-.78,2-.01.66-.01,2-.03,44.94-.37,2.01-.01.64-.01,2-.01L315,509.3l.38-.01,35.55-.3h.29l277.4-2.34,6.79-.05h.68l5.18-.05,37.65-.31,2-.03,1.85-.02h.96l11.71-.09,2.32-.03,3.11-.02,9.75-.09,15.47-.13,2-.02,3.48-.02h.65l74.71-.64Z" opacity="0.2"/>
+      <path id="Path_303" data-name="Path 303" d="M375.44,656.57v24.49a6.13,6.13,0,0,1-3.5,5.54,6,6,0,0,1-2.5.6l-34.9.74a6,6,0,0,1-2.7-.57,6.12,6.12,0,0,1-3.57-5.57V656.57Z" transform="translate(-79.34 -172.91)" fill="#3f3d56"/>
+      <path id="Path_304" data-name="Path 304" d="M375.44,656.57v24.49a6.13,6.13,0,0,1-3.5,5.54,6,6,0,0,1-2.5.6l-34.9.74a6,6,0,0,1-2.7-.57,6.12,6.12,0,0,1-3.57-5.57V656.57Z" transform="translate(-79.34 -172.91)" opacity="0.1"/>
+      <path id="Path_305" data-name="Path 305" d="M377.44,656.57v24.49a6.13,6.13,0,0,1-3.5,5.54,6,6,0,0,1-2.5.6l-34.9.74a6,6,0,0,1-2.7-.57,6.12,6.12,0,0,1-3.57-5.57V656.57Z" transform="translate(-79.34 -172.91)" fill="#3f3d56"/>
+      <rect id="Rectangle_137" data-name="Rectangle 137" width="47.17" height="31.5" transform="translate(680.92 483.65)" fill="#3f3d56"/>
+      <rect id="Rectangle_138" data-name="Rectangle 138" width="47.17" height="31.5" transform="translate(680.92 483.65)" opacity="0.1"/>
+      <rect id="Rectangle_139" data-name="Rectangle 139" width="47.17" height="31.5" transform="translate(678.92 483.65)" fill="#3f3d56"/>
+      <path id="Path_306" data-name="Path 306" d="M298.09,483.65v4.97l-47.17,1.26v-6.23Z" opacity="0.1"/>
+      <path id="Path_307" data-name="Path 307" d="M460.69,485.27v168.2a4,4,0,0,1-3.85,3.95l-191.65,5.1h-.05a4,4,0,0,1-3.95-3.95V485.27a4,4,0,0,1,3.95-3.95h191.6a4,4,0,0,1,3.95,3.95Z" transform="translate(-79.34 -172.91)" fill="#65617d"/>
+      <path id="Path_308" data-name="Path 308" d="M265.19,481.32v181.2h-.05a4,4,0,0,1-3.95-3.95V485.27a4,4,0,0,1,3.95-3.95Z" transform="translate(-79.34 -172.91)" opacity="0.1"/>
+      <path id="Path_309" data-name="Path 309" d="M194.59,319.15h177.5V467.4l-177.5,4Z" fill="#39374d"/>
+      <path id="Path_310" data-name="Path 310" d="M726.09,483.65v6.41l-47.17-1.26v-5.15Z" opacity="0.1"/>
+      <path id="Path_311" data-name="Path 311" d="M867.69,485.27v173.3a4,4,0,0,1-4,3.95h0L672,657.42a4,4,0,0,1-3.85-3.95V485.27a4,4,0,0,1,3.95-3.95H863.7a4,4,0,0,1,3.99,3.95Z" transform="translate(-79.34 -172.91)" fill="#65617d"/>
+      <path id="Path_312" data-name="Path 312" d="M867.69,485.27v173.3a4,4,0,0,1-4,3.95h0V481.32h0a4,4,0,0,1,4,3.95Z" transform="translate(-79.34 -172.91)" opacity="0.1"/>
+      <path id="Path_313" data-name="Path 313" d="M775.59,319.15H598.09V467.4l177.5,4Z" fill="#39374d"/>
+      <path id="Path_314" data-name="Path 314" d="M663.19,485.27v168.2a4,4,0,0,1-3.85,3.95l-191.65,5.1h0a4,4,0,0,1-4-3.95V485.27a4,4,0,0,1,3.95-3.95h191.6A4,4,0,0,1,663.19,485.27Z" transform="translate(-79.34 -172.91)" fill="#65617d"/>
+      <path id="Path_315" data-name="Path 315" d="M397.09,319.15h177.5V467.4l-177.5,4Z" fill="#4267b2"/>
+      <path id="Path_316" data-name="Path 316" d="M863.09,533.65v13l-151.92,1.4-1.62.03-57.74.53-1.38.02-17.55.15h-.52l-106.98.99L349.77,551.4h-.15l-44.65.42-.48.01-198.4,1.82v-15l202.51-1.33h.48l40.99-.28h.19l283.08-1.87h.29l.17-.01h.47l4.79-.03h1.46l74.49-.5,4.4-.02.98-.01Z" opacity="0.1"/>
+      <circle id="Ellipse_111" data-name="Ellipse 111" cx="51.33" cy="51.33" r="51.33" transform="translate(435.93 246.82)" fill="#fbbebe"/>
+      <path id="Path_317" data-name="Path 317" d="M617.94,550.07s-99.5,12-90,0c3.44-4.34,4.39-17.2,4.2-31.85-.06-4.45-.22-9.06-.45-13.65-1.1-22-3.75-43.5-3.75-43.5s87-41,77-8.5c-4,13.13-2.69,31.57.35,48.88.89,5.05,1.92,10,3,14.7a344.66,344.66,0,0,0,9.65,33.92Z" transform="translate(-79.34 -172.91)" fill="#fbbebe"/>
+      <path id="Path_318" data-name="Path 318" d="M585.47,546c11.51-2.13,23.7-6,34.53-1.54,2.85,1.17,5.47,2.88,8.39,3.86s6.12,1.22,9.16,1.91c10.68,2.42,19.34,10.55,24.9,20s8.44,20.14,11.26,30.72l6.9,25.83c6,22.45,12,45.09,13.39,68.3a2437.506,2437.506,0,0,1-250.84,1.43c5.44-10.34,11-21.31,10.54-33s-7.19-23.22-4.76-34.74c1.55-7.34,6.57-13.39,9.64-20.22,8.75-19.52,1.94-45.79,17.32-60.65,6.92-6.68,17-9.21,26.63-8.89,12.28.41,24.85,4.24,37,6.11C555.09,547.48,569.79,548.88,585.47,546Z" transform="translate(-79.34 -172.91)" fill="#ff6584"/>
+      <path id="Path_319" data-name="Path 319" d="M716.37,657.17l-.1,1.43v.1l-.17,2.3-1.33,18.51-1.61,22.3-.46,6.28-1,13.44v.17l-107,1-175.59,1.9v.84h-.14v-1.12l.45-14.36.86-28.06.74-23.79.07-2.37a10.53,10.53,0,0,1,11.42-10.17c4.72.4,10.85.89,18.18,1.41l3,.22c42.33,2.94,120.56,6.74,199.5,2,1.66-.09,3.33-.19,5-.31,12.24-.77,24.47-1.76,36.58-3a10.53,10.53,0,0,1,11.6,11.23Z" transform="translate(-79.34 -172.91)" opacity="0.1"/>
+      <path id="Path_320" data-name="Path 320" d="M429.08,725.44v-.84l175.62-1.91,107-1h.3v-.17l1-13.44.43-6,1.64-22.61,1.29-17.9v-.44a10.617,10.617,0,0,0-.11-2.47.3.3,0,0,0,0-.1,10.391,10.391,0,0,0-2-4.64,10.54,10.54,0,0,0-9.42-4c-12.11,1.24-24.34,2.23-36.58,3-1.67.12-3.34.22-5,.31-78.94,4.69-157.17.89-199.5-2l-3-.22c-7.33-.52-13.46-1-18.18-1.41a10.54,10.54,0,0,0-11.24,8.53,11,11,0,0,0-.18,1.64l-.68,22.16L429.54,710l-.44,14.36v1.12Z" transform="translate(-79.34 -172.91)" fill="#3f3d56"/>
+      <path id="Path_321" data-name="Path 321" d="M716.67,664.18l-1.23,15.33-1.83,22.85-.46,5.72-1,12.81-.06.64v.17h0l-.15,1.48.11-1.48h-.29l-107,1-175.65,1.9v-.28l.49-14.36,1-28.06.64-18.65A6.36,6.36,0,0,1,434.3,658a6.25,6.25,0,0,1,3.78-.9c2.1.17,4.68.37,7.69.59,4.89.36,10.92.78,17.94,1.22,13,.82,29.31,1.7,48,2.42,52,2,122.2,2.67,188.88-3.17,3-.26,6.1-.55,9.13-.84a6.26,6.26,0,0,1,3.48.66,5.159,5.159,0,0,1,.86.54,6.14,6.14,0,0,1,2,2.46,3.564,3.564,0,0,1,.25.61A6.279,6.279,0,0,1,716.67,664.18Z" transform="translate(-79.34 -172.91)" opacity="0.1"/>
+      <path id="Path_322" data-name="Path 322" d="M377.44,677.87v3.19a6.13,6.13,0,0,1-3.5,5.54l-40.1.77a6.12,6.12,0,0,1-3.57-5.57v-3Z" transform="translate(-79.34 -172.91)" opacity="0.1"/>
+      <path id="Path_323" data-name="Path 323" d="M298.59,515.57l-52.25,1V507.9l52.25-1Z" fill="#3f3d56"/>
+      <path id="Path_324" data-name="Path 324" d="M298.59,515.57l-52.25,1V507.9l52.25-1Z" opacity="0.1"/>
+      <path id="Path_325" data-name="Path 325" d="M300.59,515.57l-52.25,1V507.9l52.25-1Z" fill="#3f3d56"/>
+      <path id="Path_326" data-name="Path 326" d="M758.56,679.87v3.19a6.13,6.13,0,0,0,3.5,5.54l40.1.77a6.12,6.12,0,0,0,3.57-5.57v-3Z" transform="translate(-79.34 -172.91)" opacity="0.1"/>
+      <path id="Path_327" data-name="Path 327" d="M678.72,517.57l52.25,1V509.9l-52.25-1Z" opacity="0.1"/>
+      <path id="Path_328" data-name="Path 328" d="M676.72,517.57l52.25,1V509.9l-52.25-1Z" fill="#3f3d56"/>
+      <path id="Path_329" data-name="Path 329" d="M534.13,486.79c.08,7-3.16,13.6-5.91,20.07a163.491,163.491,0,0,0-12.66,74.71c.73,11,2.58,22,.73,32.9s-8.43,21.77-19,24.9c17.53,10.45,41.26,9.35,57.76-2.66,8.79-6.4,15.34-15.33,21.75-24.11a97.86,97.86,0,0,1-13.31,44.75A103.43,103.43,0,0,0,637,616.53c4.31-5.81,8.06-12.19,9.72-19.23,3.09-13-1.22-26.51-4.51-39.5a266.055,266.055,0,0,1-6.17-33c-.43-3.56-.78-7.22.1-10.7,1-4.07,3.67-7.51,5.64-11.22,5.6-10.54,5.73-23.3,2.86-34.88s-8.49-22.26-14.06-32.81c-4.46-8.46-9.3-17.31-17.46-22.28-5.1-3.1-11-4.39-16.88-5.64l-25.37-5.43c-5.55-1.19-11.26-2.38-16.87-1.51-9.47,1.48-16.14,8.32-22,15.34-4.59,5.46-15.81,15.71-16.6,22.86-.72,6.59,5.1,17.63,6.09,24.58,1.3,9,2.22,6,7.3,11.52C532,478.05,534.07,482,534.13,486.79Z" transform="translate(-79.34 -172.91)" fill="#3f3d56"/>
+    </g>
+    <g id="docusaurus_keytar" transform="translate(670.271 615.768)">
+      <path id="Path_40" data-name="Path 40" d="M99,52h43.635V69.662H99Z" transform="translate(-49.132 -33.936)" fill="#fff" fill-rule="evenodd"/>
+      <path id="Path_41" data-name="Path 41" d="M13.389,158.195A10.377,10.377,0,0,1,4.4,153a10.377,10.377,0,0,0,8.988,15.584H23.779V158.195Z" transform="translate(-3 -82.47)" fill="#3ecc5f" fill-rule="evenodd"/>
+      <path id="Path_42" data-name="Path 42" d="M66.967,38.083l36.373-2.273V30.615A10.389,10.389,0,0,0,92.95,20.226H46.2l-1.3-2.249a1.5,1.5,0,0,0-2.6,0L41,20.226l-1.3-2.249a1.5,1.5,0,0,0-2.6,0l-1.3,2.249-1.3-2.249a1.5,1.5,0,0,0-2.6,0l-1.3,2.249-.034,0-2.152-2.151a1.5,1.5,0,0,0-2.508.672L25.21,21.4l-2.7-.723a1.5,1.5,0,0,0-1.836,1.837l.722,2.7-2.65.71a1.5,1.5,0,0,0-.673,2.509l2.152,2.152c0,.011,0,.022,0,.033l-2.249,1.3a1.5,1.5,0,0,0,0,2.6l2.249,1.3-2.249,1.3a1.5,1.5,0,0,0,0,2.6L20.226,41l-2.249,1.3a1.5,1.5,0,0,0,0,2.6l2.249,1.3-2.249,1.3a1.5,1.5,0,0,0,0,2.6l2.249,1.3-2.249,1.3a1.5,1.5,0,0,0,0,2.6l2.249,1.3-2.249,1.3a1.5,1.5,0,0,0,0,2.6l2.249,1.3-2.249,1.3a1.5,1.5,0,0,0,0,2.6l2.249,1.3-2.249,1.3a1.5,1.5,0,0,0,0,2.6l2.249,1.3-2.249,1.3a1.5,1.5,0,0,0,0,2.6l2.249,1.3-2.249,1.3a1.5,1.5,0,0,0,0,2.6l2.249,1.3-2.249,1.3a1.5,1.5,0,0,0,0,2.6l2.249,1.3-2.249,1.3a1.5,1.5,0,0,0,0,2.6l2.249,1.3A10.389,10.389,0,0,0,30.615,103.34H92.95A10.389,10.389,0,0,0,103.34,92.95V51.393L66.967,49.12a5.53,5.53,0,0,1,0-11.038" transform="translate(-9.836 -17.226)" fill="#3ecc5f" fill-rule="evenodd"/>
+      <path id="Path_43" data-name="Path 43" d="M143,163.779h15.584V143H143Z" transform="translate(-70.275 -77.665)" fill="#3ecc5f" fill-rule="evenodd"/>
+      <path id="Path_44" data-name="Path 44" d="M173.779,148.389a2.582,2.582,0,0,0-.332.033c-.02-.078-.038-.156-.06-.234a2.594,2.594,0,1,0-2.567-4.455q-.086-.088-.174-.175a2.593,2.593,0,1,0-4.461-2.569c-.077-.022-.154-.04-.231-.06a2.6,2.6,0,1,0-5.128,0c-.077.02-.154.038-.231.06a2.594,2.594,0,1,0-4.461,2.569,10.384,10.384,0,1,0,17.314,9.992,2.592,2.592,0,1,0,.332-5.161" transform="translate(-75.08 -75.262)" fill="#44d860" fill-rule="evenodd"/>
+      <path id="Path_45" data-name="Path 45" d="M153,113.389h15.584V103H153Z" transform="translate(-75.08 -58.444)" fill="#3ecc5f" fill-rule="evenodd"/>
+      <path id="Path_46" data-name="Path 46" d="M183.389,108.944a1.3,1.3,0,1,0,0-2.6,1.336,1.336,0,0,0-.166.017c-.01-.039-.019-.078-.03-.117a1.3,1.3,0,0,0-.5-2.5,1.285,1.285,0,0,0-.783.269q-.043-.044-.087-.087a1.285,1.285,0,0,0,.263-.776,1.3,1.3,0,0,0-2.493-.509,5.195,5.195,0,1,0,0,10,1.3,1.3,0,0,0,2.493-.509,1.285,1.285,0,0,0-.263-.776q.044-.043.087-.087a1.285,1.285,0,0,0,.783.269,1.3,1.3,0,0,0,.5-2.5c.011-.038.02-.078.03-.117a1.337,1.337,0,0,0,.166.017" transform="translate(-84.691 -57.894)" fill="#44d860" fill-rule="evenodd"/>
+      <path id="Path_47" data-name="Path 47" d="M52.188,48.292a1.3,1.3,0,0,1-1.3-1.3,3.9,3.9,0,0,0-7.792,0,1.3,1.3,0,1,1-2.6,0,6.493,6.493,0,0,1,12.987,0,1.3,1.3,0,0,1-1.3,1.3" transform="translate(-21.02 -28.41)" fill-rule="evenodd"/>
+      <path id="Path_48" data-name="Path 48" d="M103,139.752h31.168a10.389,10.389,0,0,0,10.389-10.389V93H113.389A10.389,10.389,0,0,0,103,103.389Z" transform="translate(-51.054 -53.638)" fill="#ffff50" fill-rule="evenodd"/>
+      <path id="Path_49" data-name="Path 49" d="M141.1,94.017H115.106a.519.519,0,1,1,0-1.039H141.1a.519.519,0,0,1,0,1.039m0,10.389H115.106a.519.519,0,1,1,0-1.039H141.1a.519.519,0,0,1,0,1.039m0,10.389H115.106a.519.519,0,1,1,0-1.039H141.1a.519.519,0,0,1,0,1.039m0-25.877H115.106a.519.519,0,1,1,0-1.039H141.1a.519.519,0,0,1,0,1.039m0,10.293H115.106a.519.519,0,1,1,0-1.039H141.1a.519.519,0,0,1,0,1.039m0,10.389H115.106a.519.519,0,1,1,0-1.039H141.1a.519.519,0,0,1,0,1.039m7.782-47.993c-.006,0-.011,0-.018,0-1.605.055-2.365,1.66-3.035,3.077-.7,1.48-1.24,2.443-2.126,2.414-.981-.035-1.542-1.144-2.137-2.317-.683-1.347-1.462-2.876-3.1-2.819-1.582.054-2.344,1.451-3.017,2.684-.715,1.313-1.2,2.112-2.141,2.075-1-.036-1.533-.938-2.149-1.981-.686-1.162-1.479-2.467-3.084-2.423-1.555.053-2.319,1.239-2.994,2.286-.713,1.106-1.213,1.781-2.164,1.741-1.025-.036-1.554-.784-2.167-1.65-.688-.973-1.463-2.074-3.062-2.021a3.815,3.815,0,0,0-2.959,1.879c-.64.812-1.14,1.456-2.2,1.415a.52.52,0,0,0-.037,1.039,3.588,3.588,0,0,0,3.05-1.811c.611-.777,1.139-1.448,2.178-1.483,1-.043,1.47.579,2.179,1.582.674.953,1.438,2.033,2.977,2.089,1.612.054,2.387-1.151,3.074-2.217.614-.953,1.144-1.775,2.156-1.81.931-.035,1.438.7,2.153,1.912.674,1.141,1.437,2.434,3.006,2.491,1.623.056,2.407-1.361,3.09-2.616.592-1.085,1.15-2.109,2.14-2.143.931-.022,1.417.829,2.135,2.249.671,1.326,1.432,2.828,3.026,2.886l.088,0c1.592,0,2.347-1.6,3.015-3.01.592-1.252,1.152-2.431,2.113-2.479Z" transform="translate(-55.378 -38.552)" fill-rule="evenodd"/>
+      <path id="Path_50" data-name="Path 50" d="M83,163.779h20.779V143H83Z" transform="translate(-41.443 -77.665)" fill="#3ecc5f" fill-rule="evenodd"/>
+      <g id="Group_8" data-name="Group 8" transform="matrix(0.966, -0.259, 0.259, 0.966, 51.971, 43.3)">
+        <rect id="Rectangle_3" data-name="Rectangle 3" width="43.906" height="17.333" rx="2" transform="translate(0 0)" fill="#d8d8d8"/>
+        <g id="Group_2" data-name="Group 2" transform="translate(0.728 10.948)">
+          <rect id="Rectangle_4" data-name="Rectangle 4" width="2.537" height="2.537" rx="1" transform="translate(7.985 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_5" data-name="Rectangle 5" width="2.537" height="2.537" rx="1" transform="translate(10.991 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_6" data-name="Rectangle 6" width="2.537" height="2.537" rx="1" transform="translate(13.997 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_7" data-name="Rectangle 7" width="2.537" height="2.537" rx="1" transform="translate(17.003 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_8" data-name="Rectangle 8" width="2.537" height="2.537" rx="1" transform="translate(20.009 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_9" data-name="Rectangle 9" width="2.537" height="2.537" rx="1" transform="translate(23.015 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_10" data-name="Rectangle 10" width="2.537" height="2.537" rx="1" transform="translate(26.021 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_11" data-name="Rectangle 11" width="2.537" height="2.537" rx="1" transform="translate(29.028 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_12" data-name="Rectangle 12" width="2.537" height="2.537" rx="1" transform="translate(32.034 0)" fill="#4a4a4a"/>
+          <path id="Path_51" data-name="Path 51" d="M.519,0H6.9A.519.519,0,0,1,7.421.52v1.5a.519.519,0,0,1-.519.519H.519A.519.519,0,0,1,0,2.017V.519A.519.519,0,0,1,.519,0ZM35.653,0h6.383a.519.519,0,0,1,.519.519v1.5a.519.519,0,0,1-.519.519H35.652a.519.519,0,0,1-.519-.519V.519A.519.519,0,0,1,35.652,0Z" transform="translate(0 0)" fill="#4a4a4a" fill-rule="evenodd"/>
+        </g>
+        <g id="Group_3" data-name="Group 3" transform="translate(0.728 4.878)">
+          <path id="Path_52" data-name="Path 52" d="M.519,0H2.956a.519.519,0,0,1,.519.519v1.5a.519.519,0,0,1-.519.519H.519A.519.519,0,0,1,0,2.017V.519A.519.519,0,0,1,.519,0Z" transform="translate(0 0)" fill="#4a4a4a" fill-rule="evenodd"/>
+          <rect id="Rectangle_13" data-name="Rectangle 13" width="2.537" height="2.537" rx="1" transform="translate(3.945 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_14" data-name="Rectangle 14" width="2.537" height="2.537" rx="1" transform="translate(6.951 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_15" data-name="Rectangle 15" width="2.537" height="2.537" rx="1" transform="translate(9.958 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_16" data-name="Rectangle 16" width="2.537" height="2.537" rx="1" transform="translate(12.964 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_17" data-name="Rectangle 17" width="2.537" height="2.537" rx="1" transform="translate(15.97 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_18" data-name="Rectangle 18" width="2.537" height="2.537" rx="1" transform="translate(18.976 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_19" data-name="Rectangle 19" width="2.537" height="2.537" rx="1" transform="translate(21.982 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_20" data-name="Rectangle 20" width="2.537" height="2.537" rx="1" transform="translate(24.988 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_21" data-name="Rectangle 21" width="2.537" height="2.537" rx="1" transform="translate(27.994 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_22" data-name="Rectangle 22" width="2.537" height="2.537" rx="1" transform="translate(31 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_23" data-name="Rectangle 23" width="2.537" height="2.537" rx="1" transform="translate(34.006 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_24" data-name="Rectangle 24" width="2.537" height="2.537" rx="1" transform="translate(37.012 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_25" data-name="Rectangle 25" width="2.537" height="2.537" rx="1" transform="translate(40.018 0)" fill="#4a4a4a"/>
+        </g>
+        <g id="Group_4" data-name="Group 4" transform="translate(43.283 4.538) rotate(180)">
+          <path id="Path_53" data-name="Path 53" d="M.519,0H2.956a.519.519,0,0,1,.519.519v1.5a.519.519,0,0,1-.519.519H.519A.519.519,0,0,1,0,2.017V.519A.519.519,0,0,1,.519,0Z" transform="translate(0 0)" fill="#4a4a4a" fill-rule="evenodd"/>
+          <rect id="Rectangle_26" data-name="Rectangle 26" width="2.537" height="2.537" rx="1" transform="translate(3.945 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_27" data-name="Rectangle 27" width="2.537" height="2.537" rx="1" transform="translate(6.951 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_28" data-name="Rectangle 28" width="2.537" height="2.537" rx="1" transform="translate(9.958 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_29" data-name="Rectangle 29" width="2.537" height="2.537" rx="1" transform="translate(12.964 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_30" data-name="Rectangle 30" width="2.537" height="2.537" rx="1" transform="translate(15.97 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_31" data-name="Rectangle 31" width="2.537" height="2.537" rx="1" transform="translate(18.976 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_32" data-name="Rectangle 32" width="2.537" height="2.537" rx="1" transform="translate(21.982 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_33" data-name="Rectangle 33" width="2.537" height="2.537" rx="1" transform="translate(24.988 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_34" data-name="Rectangle 34" width="2.537" height="2.537" rx="1" transform="translate(27.994 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_35" data-name="Rectangle 35" width="2.537" height="2.537" rx="1" transform="translate(31.001 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_36" data-name="Rectangle 36" width="2.537" height="2.537" rx="1" transform="translate(34.007 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_37" data-name="Rectangle 37" width="2.537" height="2.537" rx="1" transform="translate(37.013 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_38" data-name="Rectangle 38" width="2.537" height="2.537" rx="1" transform="translate(40.018 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_39" data-name="Rectangle 39" width="2.537" height="2.537" rx="1" transform="translate(3.945 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_40" data-name="Rectangle 40" width="2.537" height="2.537" rx="1" transform="translate(6.951 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_41" data-name="Rectangle 41" width="2.537" height="2.537" rx="1" transform="translate(9.958 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_42" data-name="Rectangle 42" width="2.537" height="2.537" rx="1" transform="translate(12.964 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_43" data-name="Rectangle 43" width="2.537" height="2.537" rx="1" transform="translate(15.97 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_44" data-name="Rectangle 44" width="2.537" height="2.537" rx="1" transform="translate(18.976 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_45" data-name="Rectangle 45" width="2.537" height="2.537" rx="1" transform="translate(21.982 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_46" data-name="Rectangle 46" width="2.537" height="2.537" rx="1" transform="translate(24.988 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_47" data-name="Rectangle 47" width="2.537" height="2.537" rx="1" transform="translate(27.994 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_48" data-name="Rectangle 48" width="2.537" height="2.537" rx="1" transform="translate(31.001 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_49" data-name="Rectangle 49" width="2.537" height="2.537" rx="1" transform="translate(34.007 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_50" data-name="Rectangle 50" width="2.537" height="2.537" rx="1" transform="translate(37.013 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_51" data-name="Rectangle 51" width="2.537" height="2.537" rx="1" transform="translate(40.018 0)" fill="#4a4a4a"/>
+        </g>
+        <g id="Group_6" data-name="Group 6" transform="translate(0.728 7.883)">
+          <path id="Path_54" data-name="Path 54" d="M.519,0h3.47a.519.519,0,0,1,.519.519v1.5a.519.519,0,0,1-.519.519H.519A.519.519,0,0,1,0,2.017V.52A.519.519,0,0,1,.519,0Z" transform="translate(0 0)" fill="#4a4a4a" fill-rule="evenodd"/>
+          <g id="Group_5" data-name="Group 5" transform="translate(5.073 0)">
+            <rect id="Rectangle_52" data-name="Rectangle 52" width="2.537" height="2.537" rx="1" transform="translate(0 0)" fill="#4a4a4a"/>
+            <rect id="Rectangle_53" data-name="Rectangle 53" width="2.537" height="2.537" rx="1" transform="translate(3.006 0)" fill="#4a4a4a"/>
+            <rect id="Rectangle_54" data-name="Rectangle 54" width="2.537" height="2.537" rx="1" transform="translate(6.012 0)" fill="#4a4a4a"/>
+            <rect id="Rectangle_55" data-name="Rectangle 55" width="2.537" height="2.537" rx="1" transform="translate(9.018 0)" fill="#4a4a4a"/>
+            <rect id="Rectangle_56" data-name="Rectangle 56" width="2.537" height="2.537" rx="1" transform="translate(12.025 0)" fill="#4a4a4a"/>
+            <rect id="Rectangle_57" data-name="Rectangle 57" width="2.537" height="2.537" rx="1" transform="translate(15.031 0)" fill="#4a4a4a"/>
+            <rect id="Rectangle_58" data-name="Rectangle 58" width="2.537" height="2.537" rx="1" transform="translate(18.037 0)" fill="#4a4a4a"/>
+            <rect id="Rectangle_59" data-name="Rectangle 59" width="2.537" height="2.537" rx="1" transform="translate(21.042 0)" fill="#4a4a4a"/>
+            <rect id="Rectangle_60" data-name="Rectangle 60" width="2.537" height="2.537" rx="1" transform="translate(24.049 0)" fill="#4a4a4a"/>
+            <rect id="Rectangle_61" data-name="Rectangle 61" width="2.537" height="2.537" rx="1" transform="translate(27.055 0)" fill="#4a4a4a"/>
+            <rect id="Rectangle_62" data-name="Rectangle 62" width="2.537" height="2.537" rx="1" transform="translate(30.061 0)" fill="#4a4a4a"/>
+          </g>
+          <path id="Path_55" data-name="Path 55" d="M.52,0H3.8a.519.519,0,0,1,.519.519v1.5a.519.519,0,0,1-.519.519H.519A.519.519,0,0,1,0,2.017V.52A.519.519,0,0,1,.519,0Z" transform="translate(38.234 0)" fill="#4a4a4a" fill-rule="evenodd"/>
+        </g>
+        <g id="Group_7" data-name="Group 7" transform="translate(0.728 14.084)">
+          <rect id="Rectangle_63" data-name="Rectangle 63" width="2.537" height="2.537" rx="1" transform="translate(0 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_64" data-name="Rectangle 64" width="2.537" height="2.537" rx="1" transform="translate(3.006 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_65" data-name="Rectangle 65" width="2.537" height="2.537" rx="1" transform="translate(6.012 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_66" data-name="Rectangle 66" width="2.537" height="2.537" rx="1" transform="translate(9.018 0)" fill="#4a4a4a"/>
+          <path id="Path_56" data-name="Path 56" d="M.519,0H14.981A.519.519,0,0,1,15.5.519v1.5a.519.519,0,0,1-.519.519H.519A.519.519,0,0,1,0,2.018V.519A.519.519,0,0,1,.519,0Zm15.97,0h1.874a.519.519,0,0,1,.519.519v1.5a.519.519,0,0,1-.519.519H16.489a.519.519,0,0,1-.519-.519V.519A.519.519,0,0,1,16.489,0Z" transform="translate(12.024 0)" fill="#4a4a4a" fill-rule="evenodd"/>
+          <rect id="Rectangle_67" data-name="Rectangle 67" width="2.537" height="2.537" rx="1" transform="translate(31.376 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_68" data-name="Rectangle 68" width="2.537" height="2.537" rx="1" transform="translate(34.382 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_69" data-name="Rectangle 69" width="2.537" height="2.537" rx="1" transform="translate(40.018 0)" fill="#4a4a4a"/>
+          <path id="Path_57" data-name="Path 57" d="M2.537,0V.561a.519.519,0,0,1-.519.519H.519A.519.519,0,0,1,0,.561V0Z" transform="translate(39.736 1.08) rotate(180)" fill="#4a4a4a"/>
+          <path id="Path_58" data-name="Path 58" d="M2.537,0V.561a.519.519,0,0,1-.519.519H.519A.519.519,0,0,1,0,.561V0Z" transform="translate(37.2 1.456)" fill="#4a4a4a"/>
+        </g>
+        <rect id="Rectangle_70" data-name="Rectangle 70" width="42.273" height="1.127" rx="0.564" transform="translate(0.915 0.556)" fill="#4a4a4a"/>
+        <rect id="Rectangle_71" data-name="Rectangle 71" width="2.37" height="0.752" rx="0.376" transform="translate(1.949 0.744)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_72" data-name="Rectangle 72" width="2.37" height="0.752" rx="0.376" transform="translate(5.193 0.744)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_73" data-name="Rectangle 73" width="2.37" height="0.752" rx="0.376" transform="translate(7.688 0.744)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_74" data-name="Rectangle 74" width="2.37" height="0.752" rx="0.376" transform="translate(10.183 0.744)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_75" data-name="Rectangle 75" width="2.37" height="0.752" rx="0.376" transform="translate(12.679 0.744)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_76" data-name="Rectangle 76" width="2.37" height="0.752" rx="0.376" transform="translate(15.797 0.744)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_77" data-name="Rectangle 77" width="2.37" height="0.752" rx="0.376" transform="translate(18.292 0.744)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_78" data-name="Rectangle 78" width="2.37" height="0.752" rx="0.376" transform="translate(20.788 0.744)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_79" data-name="Rectangle 79" width="2.37" height="0.752" rx="0.376" transform="translate(23.283 0.744)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_80" data-name="Rectangle 80" width="2.37" height="0.752" rx="0.376" transform="translate(26.402 0.744)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_81" data-name="Rectangle 81" width="2.37" height="0.752" rx="0.376" transform="translate(28.897 0.744)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_82" data-name="Rectangle 82" width="2.37" height="0.752" rx="0.376" transform="translate(31.393 0.744)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_83" data-name="Rectangle 83" width="2.37" height="0.752" rx="0.376" transform="translate(34.512 0.744)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_84" data-name="Rectangle 84" width="2.37" height="0.752" rx="0.376" transform="translate(37.007 0.744)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_85" data-name="Rectangle 85" width="2.37" height="0.752" rx="0.376" transform="translate(39.502 0.744)" fill="#d8d8d8" opacity="0.136"/>
+      </g>
+      <path id="Path_59" data-name="Path 59" d="M123.779,148.389a2.583,2.583,0,0,0-.332.033c-.02-.078-.038-.156-.06-.234a2.594,2.594,0,1,0-2.567-4.455q-.086-.088-.174-.175a2.593,2.593,0,1,0-4.461-2.569c-.077-.022-.154-.04-.231-.06a2.6,2.6,0,1,0-5.128,0c-.077.02-.154.038-.231.06a2.594,2.594,0,1,0-4.461,2.569,10.384,10.384,0,1,0,17.314,9.992,2.592,2.592,0,1,0,.332-5.161" transform="translate(-51.054 -75.262)" fill="#44d860" fill-rule="evenodd"/>
+      <path id="Path_60" data-name="Path 60" d="M83,113.389h20.779V103H83Z" transform="translate(-41.443 -58.444)" fill="#3ecc5f" fill-rule="evenodd"/>
+      <path id="Path_61" data-name="Path 61" d="M123.389,108.944a1.3,1.3,0,1,0,0-2.6,1.338,1.338,0,0,0-.166.017c-.01-.039-.019-.078-.03-.117a1.3,1.3,0,0,0-.5-2.5,1.285,1.285,0,0,0-.783.269q-.043-.044-.087-.087a1.285,1.285,0,0,0,.263-.776,1.3,1.3,0,0,0-2.493-.509,5.195,5.195,0,1,0,0,10,1.3,1.3,0,0,0,2.493-.509,1.285,1.285,0,0,0-.263-.776q.044-.043.087-.087a1.285,1.285,0,0,0,.783.269,1.3,1.3,0,0,0,.5-2.5c.011-.038.02-.078.03-.117a1.335,1.335,0,0,0,.166.017" transform="translate(-55.859 -57.894)" fill="#44d860" fill-rule="evenodd"/>
+      <path id="Path_62" data-name="Path 62" d="M141.8,38.745a1.41,1.41,0,0,1-.255-.026,1.309,1.309,0,0,1-.244-.073,1.349,1.349,0,0,1-.224-.119,1.967,1.967,0,0,1-.2-.161,1.52,1.52,0,0,1-.161-.2,1.282,1.282,0,0,1-.218-.722,1.41,1.41,0,0,1,.026-.255,1.5,1.5,0,0,1,.072-.244,1.364,1.364,0,0,1,.12-.223,1.252,1.252,0,0,1,.358-.358,1.349,1.349,0,0,1,.224-.119,1.309,1.309,0,0,1,.244-.073,1.2,1.2,0,0,1,.509,0,1.262,1.262,0,0,1,.468.192,1.968,1.968,0,0,1,.2.161,1.908,1.908,0,0,1,.161.2,1.322,1.322,0,0,1,.12.223,1.361,1.361,0,0,1,.1.5,1.317,1.317,0,0,1-.379.919,1.968,1.968,0,0,1-.2.161,1.346,1.346,0,0,1-.223.119,1.332,1.332,0,0,1-.5.1m10.389-.649a1.326,1.326,0,0,1-.92-.379,1.979,1.979,0,0,1-.161-.2,1.282,1.282,0,0,1-.218-.722,1.326,1.326,0,0,1,.379-.919,1.967,1.967,0,0,1,.2-.161,1.351,1.351,0,0,1,.224-.119,1.308,1.308,0,0,1,.244-.073,1.2,1.2,0,0,1,.509,0,1.262,1.262,0,0,1,.468.192,1.967,1.967,0,0,1,.2.161,1.326,1.326,0,0,1,.379.919,1.461,1.461,0,0,1-.026.255,1.323,1.323,0,0,1-.073.244,1.847,1.847,0,0,1-.119.223,1.911,1.911,0,0,1-.161.2,1.967,1.967,0,0,1-.2.161,1.294,1.294,0,0,1-.722.218" transform="translate(-69.074 -26.006)" fill-rule="evenodd"/>
+    </g>
+    <g id="React-icon" transform="translate(906.3 541.56)">
+      <path id="Path_330" data-name="Path 330" d="M263.668,117.179c0-5.827-7.3-11.35-18.487-14.775,2.582-11.4,1.434-20.477-3.622-23.382a7.861,7.861,0,0,0-4.016-1v4a4.152,4.152,0,0,1,2.044.466c2.439,1.4,3.5,6.724,2.672,13.574-.2,1.685-.52,3.461-.914,5.272a86.9,86.9,0,0,0-11.386-1.954,87.469,87.469,0,0,0-7.459-8.965c5.845-5.433,11.332-8.41,15.062-8.41V78h0c-4.931,0-11.386,3.514-17.913,9.611-6.527-6.061-12.982-9.539-17.913-9.539v4c3.712,0,9.216,2.959,15.062,8.356a84.687,84.687,0,0,0-7.405,8.947,83.732,83.732,0,0,0-11.4,1.972c-.412-1.793-.717-3.532-.932-5.2-.843-6.85.2-12.175,2.618-13.592a3.991,3.991,0,0,1,2.062-.466v-4h0a8,8,0,0,0-4.052,1c-5.039,2.9-6.168,11.96-3.568,23.328-11.153,3.443-18.415,8.947-18.415,14.757,0,5.828,7.3,11.35,18.487,14.775-2.582,11.4-1.434,20.477,3.622,23.382a7.882,7.882,0,0,0,4.034,1c4.931,0,11.386-3.514,17.913-9.611,6.527,6.061,12.982,9.539,17.913,9.539a8,8,0,0,0,4.052-1c5.039-2.9,6.168-11.96,3.568-23.328C256.406,128.511,263.668,122.988,263.668,117.179Zm-23.346-11.96c-.663,2.313-1.488,4.7-2.421,7.083-.735-1.434-1.506-2.869-2.349-4.3-.825-1.434-1.7-2.833-2.582-4.2C235.517,104.179,237.974,104.645,240.323,105.219Zm-8.212,19.1c-1.4,2.421-2.833,4.716-4.321,6.85-2.672.233-5.379.359-8.1.359-2.708,0-5.415-.126-8.069-.341q-2.232-3.2-4.339-6.814-2.044-3.523-3.73-7.136c1.112-2.4,2.367-4.805,3.712-7.154,1.4-2.421,2.833-4.716,4.321-6.85,2.672-.233,5.379-.359,8.1-.359,2.708,0,5.415.126,8.069.341q2.232,3.2,4.339,6.814,2.044,3.523,3.73,7.136C234.692,119.564,233.455,121.966,232.11,124.315Zm5.792-2.331c.968,2.4,1.793,4.805,2.474,7.136-2.349.574-4.823,1.058-7.387,1.434.879-1.381,1.757-2.8,2.582-4.25C236.4,124.871,237.167,123.419,237.9,121.984ZM219.72,141.116a73.921,73.921,0,0,1-4.985-5.738c1.614.072,3.263.126,4.931.126,1.685,0,3.353-.036,4.985-.126A69.993,69.993,0,0,1,219.72,141.116ZM206.38,130.555c-2.546-.377-5-.843-7.352-1.417.663-2.313,1.488-4.7,2.421-7.083.735,1.434,1.506,2.869,2.349,4.3S205.5,129.192,206.38,130.555ZM219.63,93.241a73.924,73.924,0,0,1,4.985,5.738c-1.614-.072-3.263-.126-4.931-.126-1.686,0-3.353.036-4.985.126A69.993,69.993,0,0,1,219.63,93.241ZM206.362,103.8c-.879,1.381-1.757,2.8-2.582,4.25-.825,1.434-1.6,2.869-2.331,4.3-.968-2.4-1.793-4.805-2.474-7.136C201.323,104.663,203.8,104.179,206.362,103.8Zm-16.227,22.449c-6.348-2.708-10.454-6.258-10.454-9.073s4.106-6.383,10.454-9.073c1.542-.663,3.228-1.255,4.967-1.811a86.122,86.122,0,0,0,4.034,10.92,84.9,84.9,0,0,0-3.981,10.866C193.38,127.525,191.694,126.915,190.134,126.252Zm9.647,25.623c-2.439-1.4-3.5-6.724-2.672-13.574.2-1.686.52-3.461.914-5.272a86.9,86.9,0,0,0,11.386,1.954,87.465,87.465,0,0,0,7.459,8.965c-5.845,5.433-11.332,8.41-15.062,8.41A4.279,4.279,0,0,1,199.781,151.875Zm42.532-13.663c.843,6.85-.2,12.175-2.618,13.592a3.99,3.99,0,0,1-2.062.466c-3.712,0-9.216-2.959-15.062-8.356a84.689,84.689,0,0,0,7.405-8.947,83.731,83.731,0,0,0,11.4-1.972A50.194,50.194,0,0,1,242.313,138.212Zm6.9-11.96c-1.542.663-3.228,1.255-4.967,1.811a86.12,86.12,0,0,0-4.034-10.92,84.9,84.9,0,0,0,3.981-10.866c1.775.556,3.461,1.165,5.039,1.829,6.348,2.708,10.454,6.258,10.454,9.073C259.67,119.994,255.564,123.562,249.216,126.252Z" fill="#61dafb"/>
+      <path id="Path_331" data-name="Path 331" d="M320.8,78.4Z" transform="translate(-119.082 -0.328)" fill="#61dafb"/>
+      <circle id="Ellipse_112" data-name="Ellipse 112" cx="8.194" cy="8.194" r="8.194" transform="translate(211.472 108.984)" fill="#61dafb"/>
+      <path id="Path_332" data-name="Path 332" d="M520.5,78.1Z" transform="translate(-282.975 -0.082)" fill="#61dafb"/>
+    </g>
+  </g>
+</svg>
diff --git a/static/img/undraw_docusaurus_tree.svg b/static/img/undraw_docusaurus_tree.svg
new file mode 100644
index 000000000..d9161d339
--- /dev/null
+++ b/static/img/undraw_docusaurus_tree.svg
@@ -0,0 +1,40 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1129" height="663" viewBox="0 0 1129 663">
+  <title>Focus on What Matters</title>
+  <circle cx="321" cy="321" r="321" fill="#f2f2f2" />
+  <ellipse cx="559" cy="635.49998" rx="514" ry="27.50002" fill="#3f3d56" />
+  <ellipse cx="558" cy="627" rx="460" ry="22" opacity="0.2" />
+  <rect x="131" y="152.5" width="840" height="50" fill="#3f3d56" />
+  <path d="M166.5,727.3299A21.67009,21.67009,0,0,0,188.1701,749H984.8299A21.67009,21.67009,0,0,0,1006.5,727.3299V296h-840Z" transform="translate(-35.5 -118.5)" fill="#3f3d56" />
+  <path d="M984.8299,236H188.1701A21.67009,21.67009,0,0,0,166.5,257.6701V296h840V257.6701A21.67009,21.67009,0,0,0,984.8299,236Z" transform="translate(-35.5 -118.5)" fill="#3f3d56" />
+  <path d="M984.8299,236H188.1701A21.67009,21.67009,0,0,0,166.5,257.6701V296h840V257.6701A21.67009,21.67009,0,0,0,984.8299,236Z" transform="translate(-35.5 -118.5)" opacity="0.2" />
+  <circle cx="181" cy="147.5" r="13" fill="#3f3d56" />
+  <circle cx="217" cy="147.5" r="13" fill="#3f3d56" />
+  <circle cx="253" cy="147.5" r="13" fill="#3f3d56" />
+  <rect x="168" y="213.5" width="337" height="386" rx="5.33505" fill="#606060" />
+  <rect x="603" y="272.5" width="284" height="22" rx="5.47638" fill="#2e8555" />
+  <rect x="537" y="352.5" width="416" height="15" rx="5.47638" fill="#2e8555" />
+  <rect x="537" y="396.5" width="416" height="15" rx="5.47638" fill="#2e8555" />
+  <rect x="537" y="440.5" width="416" height="15" rx="5.47638" fill="#2e8555" />
+  <rect x="537" y="484.5" width="416" height="15" rx="5.47638" fill="#2e8555" />
+  <rect x="865" y="552.5" width="88" height="26" rx="7.02756" fill="#3ecc5f" />
+  <path d="M1088.60287,624.61594a30.11371,30.11371,0,0,0,3.98291-15.266c0-13.79652-8.54358-24.98081-19.08256-24.98081s-19.08256,11.18429-19.08256,24.98081a30.11411,30.11411,0,0,0,3.98291,15.266,31.248,31.248,0,0,0,0,30.53213,31.248,31.248,0,0,0,0,30.53208,31.248,31.248,0,0,0,0,30.53208,30.11408,30.11408,0,0,0-3.98291,15.266c0,13.79652,8.54353,24.98081,19.08256,24.98081s19.08256-11.18429,19.08256-24.98081a30.11368,30.11368,0,0,0-3.98291-15.266,31.248,31.248,0,0,0,0-30.53208,31.248,31.248,0,0,0,0-30.53208,31.248,31.248,0,0,0,0-30.53213Z" transform="translate(-35.5 -118.5)" fill="#3f3d56" />
+  <ellipse cx="1038.00321" cy="460.31783" rx="19.08256" ry="24.9808" fill="#3f3d56" />
+  <ellipse cx="1038.00321" cy="429.78574" rx="19.08256" ry="24.9808" fill="#3f3d56" />
+  <path d="M1144.93871,339.34489a91.61081,91.61081,0,0,0,7.10658-10.46092l-50.141-8.23491,54.22885.4033a91.566,91.566,0,0,0,1.74556-72.42605l-72.75449,37.74139,67.09658-49.32086a91.41255,91.41255,0,1,0-150.971,102.29805,91.45842,91.45842,0,0,0-10.42451,16.66946l65.0866,33.81447-69.40046-23.292a91.46011,91.46011,0,0,0,14.73837,85.83669,91.40575,91.40575,0,1,0,143.68892,0,91.41808,91.41808,0,0,0,0-113.02862Z" transform="translate(-35.5 -118.5)" fill="#3ecc5f" fill-rule="evenodd" />
+  <path d="M981.6885,395.8592a91.01343,91.01343,0,0,0,19.56129,56.51431,91.40575,91.40575,0,1,0,143.68892,0C1157.18982,436.82067,981.6885,385.60008,981.6885,395.8592Z" transform="translate(-35.5 -118.5)" opacity="0.1" />
+  <path d="M365.62,461.43628H477.094v45.12043H365.62Z" transform="translate(-35.5 -118.5)" fill="#fff" fill-rule="evenodd" />
+  <path d="M264.76252,608.74122a26.50931,26.50931,0,0,1-22.96231-13.27072,26.50976,26.50976,0,0,0,22.96231,39.81215H291.304V608.74122Z" transform="translate(-35.5 -118.5)" fill="#3ecc5f" fill-rule="evenodd" />
+  <path d="M384.17242,468.57061l92.92155-5.80726V449.49263a26.54091,26.54091,0,0,0-26.54143-26.54143H331.1161l-3.31768-5.74622a3.83043,3.83043,0,0,0-6.63536,0l-3.31768,5.74622-3.31767-5.74622a3.83043,3.83043,0,0,0-6.63536,0l-3.31768,5.74622L301.257,417.205a3.83043,3.83043,0,0,0-6.63536,0L291.304,422.9512c-.02919,0-.05573.004-.08625.004l-5.49674-5.49541a3.8293,3.8293,0,0,0-6.4071,1.71723l-1.81676,6.77338L270.607,424.1031a3.82993,3.82993,0,0,0-4.6912,4.69253l1.84463,6.89148-6.77072,1.81411a3.8315,3.8315,0,0,0-1.71988,6.40975l5.49673,5.49673c0,.02787-.004.05574-.004.08493l-5.74622,3.31768a3.83043,3.83043,0,0,0,0,6.63536l5.74621,3.31768L259.0163,466.081a3.83043,3.83043,0,0,0,0,6.63536l5.74622,3.31768-5.74622,3.31767a3.83043,3.83043,0,0,0,0,6.63536l5.74622,3.31768-5.74622,3.31768a3.83043,3.83043,0,0,0,0,6.63536l5.74622,3.31768-5.74622,3.31767a3.83043,3.83043,0,0,0,0,6.63536l5.74622,3.31768-5.74622,3.31768a3.83043,3.83043,0,0,0,0,6.63536l5.74622,3.31768-5.74622,3.31768a3.83042,3.83042,0,0,0,0,6.63535l5.74622,3.31768-5.74622,3.31768a3.83043,3.83043,0,0,0,0,6.63536l5.74622,3.31768L259.0163,558.976a3.83042,3.83042,0,0,0,0,6.63535l5.74622,3.31768-5.74622,3.31768a3.83043,3.83043,0,0,0,0,6.63536l5.74622,3.31768-5.74622,3.31768a3.83042,3.83042,0,0,0,0,6.63535l5.74622,3.31768-5.74622,3.31768a3.83043,3.83043,0,0,0,0,6.63536l5.74622,3.31768A26.54091,26.54091,0,0,0,291.304,635.28265H450.55254A26.5409,26.5409,0,0,0,477.094,608.74122V502.5755l-92.92155-5.80727a14.12639,14.12639,0,0,1,0-28.19762" transform="translate(-35.5 -118.5)" fill="#3ecc5f" fill-rule="evenodd" />
+  <path d="M424.01111,635.28265h39.81214V582.19979H424.01111Z" transform="translate(-35.5 -118.5)" fill="#3ecc5f" fill-rule="evenodd" />
+  <path d="M490.36468,602.10586a6.60242,6.60242,0,0,0-.848.08493c-.05042-.19906-.09821-.39945-.15393-.59852A6.62668,6.62668,0,1,0,482.80568,590.21q-.2203-.22491-.44457-.44589a6.62391,6.62391,0,1,0-11.39689-6.56369c-.1964-.05575-.39414-.10218-.59056-.15262a6.63957,6.63957,0,1,0-13.10086,0c-.1964.05042-.39414.09687-.59056.15262a6.62767,6.62767,0,1,0-11.39688,6.56369,26.52754,26.52754,0,1,0,44.23127,25.52756,6.6211,6.6211,0,1,0,.848-13.18579" transform="translate(-35.5 -118.5)" fill="#44d860" fill-rule="evenodd" />
+  <path d="M437.28182,555.65836H477.094V529.11693H437.28182Z" transform="translate(-35.5 -118.5)" fill="#3ecc5f" fill-rule="evenodd" />
+  <path d="M490.36468,545.70532a3.31768,3.31768,0,0,0,0-6.63536,3.41133,3.41133,0,0,0-.42333.04247c-.02655-.09953-.04911-.19907-.077-.29859a3.319,3.319,0,0,0-1.278-6.37923,3.28174,3.28174,0,0,0-2.00122.68742q-.10947-.11346-.22294-.22295a3.282,3.282,0,0,0,.67149-1.98265,3.31768,3.31768,0,0,0-6.37-1.2992,13.27078,13.27078,0,1,0,0,25.54082,3.31768,3.31768,0,0,0,6.37-1.2992,3.282,3.282,0,0,0-.67149-1.98265q.11347-.10947.22294-.22294a3.28174,3.28174,0,0,0,2.00122.68742,3.31768,3.31768,0,0,0,1.278-6.37923c.02786-.0982.05042-.19907.077-.29859a3.41325,3.41325,0,0,0,.42333.04246" transform="translate(-35.5 -118.5)" fill="#44d860" fill-rule="evenodd" />
+  <path d="M317.84538,466.081a3.31768,3.31768,0,0,1-3.31767-3.31768,9.953,9.953,0,1,0-19.90608,0,3.31768,3.31768,0,1,1-6.63535,0,16.58839,16.58839,0,1,1,33.17678,0,3.31768,3.31768,0,0,1-3.31768,3.31768" transform="translate(-35.5 -118.5)" fill-rule="evenodd" />
+  <path d="M370.92825,635.28265h79.62429A26.5409,26.5409,0,0,0,477.094,608.74122v-92.895H397.46968a26.54091,26.54091,0,0,0-26.54143,26.54143Z" transform="translate(-35.5 -118.5)" fill="#ffff50" fill-rule="evenodd" />
+  <path d="M457.21444,556.98543H390.80778a1.32707,1.32707,0,0,1,0-2.65414h66.40666a1.32707,1.32707,0,0,1,0,2.65414m0,26.54143H390.80778a1.32707,1.32707,0,1,1,0-2.65414h66.40666a1.32707,1.32707,0,0,1,0,2.65414m0,26.54143H390.80778a1.32707,1.32707,0,1,1,0-2.65414h66.40666a1.32707,1.32707,0,0,1,0,2.65414m0-66.10674H390.80778a1.32707,1.32707,0,0,1,0-2.65414h66.40666a1.32707,1.32707,0,0,1,0,2.65414m0,26.29459H390.80778a1.32707,1.32707,0,0,1,0-2.65414h66.40666a1.32707,1.32707,0,0,1,0,2.65414m0,26.54143H390.80778a1.32707,1.32707,0,0,1,0-2.65414h66.40666a1.32707,1.32707,0,0,1,0,2.65414M477.094,474.19076c-.01592,0-.0292-.008-.04512-.00663-4.10064.13934-6.04083,4.24132-7.75274,7.86024-1.78623,3.78215-3.16771,6.24122-5.43171,6.16691-2.50685-.09024-3.94007-2.92222-5.45825-5.91874-1.74377-3.44243-3.73438-7.34667-7.91333-7.20069-4.04227.138-5.98907,3.70784-7.70631,6.857-1.82738,3.35484-3.07084,5.39455-5.46887,5.30033-2.55727-.09289-3.91619-2.39536-5.48877-5.06013-1.75306-2.96733-3.77951-6.30359-7.8775-6.18946-3.97326.13669-5.92537,3.16507-7.64791,5.83912-1.82207,2.82666-3.09872,4.5492-5.52725,4.447-2.61832-.09289-3.9706-2.00388-5.53522-4.21611-1.757-2.4856-3.737-5.299-7.82308-5.16231-3.88567.13271-5.83779,2.61434-7.559,4.80135-1.635,2.07555-2.9116,3.71846-5.61218,3.615a1.32793,1.32793,0,1,0-.09555,2.65414c4.00377.134,6.03154-2.38873,7.79257-4.6275,1.562-1.9853,2.91027-3.69855,5.56441-3.78879,2.55594-.10882,3.75429,1.47968,5.56707,4.04093,1.7212,2.43385,3.67465,5.19416,7.60545,5.33616,4.11789.138,6.09921-2.93946,7.8536-5.66261,1.56861-2.43385,2.92221-4.53461,5.50734-4.62352,2.37944-.08892,3.67466,1.79154,5.50072,4.885,1.72121,2.91557,3.67069,6.21865,7.67977,6.36463,4.14709.14332,6.14965-3.47693,7.89475-6.68181,1.51155-2.77092,2.93814-5.38791,5.46621-5.4755,2.37944-.05573,3.62025,2.11668,5.45558,5.74622,1.71459,3.388,3.65875,7.22591,7.73019,7.37321l.22429.004c4.06614,0,5.99571-4.08074,7.70364-7.68905,1.51154-3.19825,2.94211-6.21069,5.3972-6.33411Z" transform="translate(-35.5 -118.5)" fill-rule="evenodd" />
+  <path d="M344.38682,635.28265h53.08286V582.19979H344.38682Z" transform="translate(-35.5 -118.5)" fill="#3ecc5f" fill-rule="evenodd" />
+  <path d="M424.01111,602.10586a6.60242,6.60242,0,0,0-.848.08493c-.05042-.19906-.09821-.39945-.15394-.59852A6.62667,6.62667,0,1,0,416.45211,590.21q-.2203-.22491-.44458-.44589a6.62391,6.62391,0,1,0-11.39689-6.56369c-.1964-.05575-.39413-.10218-.59054-.15262a6.63957,6.63957,0,1,0-13.10084,0c-.19641.05042-.39414.09687-.59055.15262a6.62767,6.62767,0,1,0-11.39689,6.56369,26.52755,26.52755,0,1,0,44.2313,25.52756,6.6211,6.6211,0,1,0,.848-13.18579" transform="translate(-35.5 -118.5)" fill="#44d860" fill-rule="evenodd" />
+  <path d="M344.38682,555.65836h53.08286V529.11693H344.38682Z" transform="translate(-35.5 -118.5)" fill="#3ecc5f" fill-rule="evenodd" />
+  <path d="M410.74039,545.70532a3.31768,3.31768,0,1,0,0-6.63536,3.41133,3.41133,0,0,0-.42333.04247c-.02655-.09953-.04911-.19907-.077-.29859a3.319,3.319,0,0,0-1.278-6.37923,3.28174,3.28174,0,0,0-2.00122.68742q-.10947-.11346-.22294-.22295a3.282,3.282,0,0,0,.67149-1.98265,3.31768,3.31768,0,0,0-6.37-1.2992,13.27078,13.27078,0,1,0,0,25.54082,3.31768,3.31768,0,0,0,6.37-1.2992,3.282,3.282,0,0,0-.67149-1.98265q.11347-.10947.22294-.22294a3.28174,3.28174,0,0,0,2.00122.68742,3.31768,3.31768,0,0,0,1.278-6.37923c.02786-.0982.05042-.19907.077-.29859a3.41325,3.41325,0,0,0,.42333.04246" transform="translate(-35.5 -118.5)" fill="#44d860" fill-rule="evenodd" />
+  <path d="M424.01111,447.8338a3.60349,3.60349,0,0,1-.65028-.06636,3.34415,3.34415,0,0,1-.62372-.18579,3.44679,3.44679,0,0,1-.572-.30522,5.02708,5.02708,0,0,1-.50429-.4114,3.88726,3.88726,0,0,1-.41007-.50428,3.27532,3.27532,0,0,1-.55737-1.84463,3.60248,3.60248,0,0,1,.06636-.65027,3.82638,3.82638,0,0,1,.18447-.62373,3.48858,3.48858,0,0,1,.30656-.57064,3.197,3.197,0,0,1,.91436-.91568,3.44685,3.44685,0,0,1,.572-.30523,3.344,3.344,0,0,1,.62372-.18578,3.06907,3.06907,0,0,1,1.30053,0,3.22332,3.22332,0,0,1,1.19436.491,5.02835,5.02835,0,0,1,.50429.41139,4.8801,4.8801,0,0,1,.41139.50429,3.38246,3.38246,0,0,1,.30522.57064,3.47806,3.47806,0,0,1,.25215,1.274A3.36394,3.36394,0,0,1,426.36,446.865a5.02708,5.02708,0,0,1-.50429.4114,3.3057,3.3057,0,0,1-1.84463.55737m26.54143-1.65884a3.38754,3.38754,0,0,1-2.35024-.96877,5.04185,5.04185,0,0,1-.41007-.50428,3.27532,3.27532,0,0,1-.55737-1.84463,3.38659,3.38659,0,0,1,.96744-2.34892,5.02559,5.02559,0,0,1,.50429-.41139,3.44685,3.44685,0,0,1,.572-.30523,3.3432,3.3432,0,0,1,.62373-.18579,3.06952,3.06952,0,0,1,1.30052,0,3.22356,3.22356,0,0,1,1.19436.491,5.02559,5.02559,0,0,1,.50429.41139,3.38792,3.38792,0,0,1,.96876,2.34892,3.72635,3.72635,0,0,1-.06636.65026,3.37387,3.37387,0,0,1-.18579.62373,4.71469,4.71469,0,0,1-.30522.57064,4.8801,4.8801,0,0,1-.41139.50429,5.02559,5.02559,0,0,1-.50429.41139,3.30547,3.30547,0,0,1-1.84463.55737" transform="translate(-35.5 -118.5)" fill-rule="evenodd" />
+</svg>
diff --git a/static/img/warning.svg b/static/img/warning.svg
new file mode 100644
index 000000000..80cfc05b2
--- /dev/null
+++ b/static/img/warning.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0Zm.003 10.667c-.366 0-.681.13-.943.392-.26.261-.393.577-.393.944 0 .368.132.683.393.942.262.259.577.388.943.388s.68-.13.94-.388c.26-.259.39-.573.39-.942 0-.367-.13-.683-.39-.944a1.274 1.274 0 0 0-.94-.392Zm-.317-7.968c-.629.157-1.02.655-1.02 1.258.032.365.059.733.09 1.097l.27 4.135c.031.47.449.811.987.811.539 0 .961-.364.988-.839 0-.165.018-.717.031-.839.058-.89.122-1.779.18-2.668l.121-1.729c0-.207-.031-.392-.121-.576-.27-.516-.898-.779-1.526-.65Z" fill="#FFAD3A"/></svg>
\ No newline at end of file