diff --git a/packages/appstore/src/components/containers/__tests__/currency-switcher-container.spec.tsx b/packages/appstore/src/components/containers/__tests__/currency-switcher-container.spec.tsx
new file mode 100644
index 000000000000..c69b01830742
--- /dev/null
+++ b/packages/appstore/src/components/containers/__tests__/currency-switcher-container.spec.tsx
@@ -0,0 +1,140 @@
+import React from 'react';
+import CurrentSwitcherContainer from '../currency-switcher-container';
+import { render, screen } from '@testing-library/react';
+import { StoreProvider, mockStore } from '@deriv/stores';
+
+describe('CurrentSwitcherContainer', () => {
+    it('should render the modal', async () => {
+        const mock = mockStore({
+            modules: {
+                cfd: {
+                    current_list: {
+                        CR123123: {
+                            landing_company_short: 'maltainvest',
+                        },
+                    },
+                },
+            },
+        });
+
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mock}>{children}</StoreProvider>
+        );
+
+        const { container } = render(
+            <CurrentSwitcherContainer actions={null} has_interaction={false} icon='USD' title='USD' />,
+            {
+                wrapper,
+            }
+        );
+        expect(container).toBeInTheDocument();
+    });
+
+    it('should not have the dropdown if is demo is true', () => {
+        const mock = mockStore({
+            modules: {
+                cfd: {
+                    current_list: {
+                        CR123123: {
+                            landing_company_short: 'maltainvest',
+                        },
+                    },
+                },
+            },
+            traders_hub: {
+                is_demo: true,
+            },
+        });
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mock}>{children}</StoreProvider>
+        );
+
+        render(<CurrentSwitcherContainer actions={null} has_interaction={false} icon='USD' title='USD' />, {
+            wrapper,
+        });
+
+        expect(screen.queryByTestId('currency-switcher-container__arrow')).not.toBeInTheDocument();
+    });
+
+    it('should not have the dropdown if is_eu_user is true', () => {
+        const mock = mockStore({
+            modules: {
+                cfd: {
+                    current_list: {
+                        CR123123: {
+                            landing_company_short: 'maltainvest',
+                        },
+                    },
+                },
+            },
+            traders_hub: {
+                is_eu_user: true,
+            },
+        });
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mock}>{children}</StoreProvider>
+        );
+
+        render(<CurrentSwitcherContainer actions={null} has_interaction={false} icon='USD' title='USD' />, {
+            wrapper,
+        });
+
+        expect(screen.queryByTestId('currency-switcher-container__arrow')).not.toBeInTheDocument();
+    });
+
+    it('should have pending in the classname if the document status is pending', () => {
+        const mock = mockStore({
+            modules: {
+                cfd: {
+                    current_list: {
+                        CR123123: {
+                            landing_company_short: 'maltainvest',
+                        },
+                    },
+                },
+            },
+            client: {
+                authentication_status: {
+                    document_status: 'pending',
+                },
+            },
+        });
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mock}>{children}</StoreProvider>
+        );
+
+        render(<CurrentSwitcherContainer actions={null} has_interaction={false} icon='USD' title='USD' />, {
+            wrapper,
+        });
+
+        expect(screen.getByText('USD')).toHaveClass('currency-switcher-container__content--text--pending');
+    });
+
+    it('should have default in the classname if the document status is default', () => {
+        const mock = mockStore({
+            modules: {
+                cfd: {
+                    current_list: {
+                        CR123123: {
+                            landing_company_short: 'maltainvest',
+                        },
+                    },
+                },
+            },
+            client: {
+                authentication_status: {
+                    document_status: 'default',
+                },
+            },
+        });
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mock}>{children}</StoreProvider>
+        );
+
+        render(<CurrentSwitcherContainer actions={null} has_interaction={false} icon='USD' title='USD' />, {
+            wrapper,
+        });
+
+        expect(screen.getByText('USD')).toHaveClass('currency-switcher-container__content--text--default');
+    });
+});
diff --git a/packages/appstore/src/components/containers/currency-switcher-container.tsx b/packages/appstore/src/components/containers/currency-switcher-container.tsx
index 18f3de364293..d3a8f9cc3179 100644
--- a/packages/appstore/src/components/containers/currency-switcher-container.tsx
+++ b/packages/appstore/src/components/containers/currency-switcher-container.tsx
@@ -3,9 +3,7 @@ import classNames from 'classnames';
 import { Icon } from '@deriv/components';
 import CurrencyIcon, { Currency } from 'Assets/svgs/currency';
 import './currency-switcher-container.scss';
-import { useStores } from 'Stores/index';
-import { observer } from 'mobx-react-lite';
-import { TRootStore } from 'Types';
+import { useStore, observer } from '@deriv/stores';
 
 interface CurrentSwitcherContainerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     actions?: ReactNode;
@@ -14,72 +12,73 @@ interface CurrentSwitcherContainerProps extends Omit<HTMLAttributes<HTMLDivEleme
     title: ReactNode;
 }
 
-const CurrentSwitcherContainer = ({
-    actions,
-    children,
-    className,
-    has_interaction = false,
-    icon,
-    title,
-    ...props
-}: CurrentSwitcherContainerProps) => {
-    const store = useStores();
-    const { client, modules, traders_hub }: TRootStore = store;
+const CurrentSwitcherContainer = observer(
+    ({
+        actions,
+        children,
+        className,
+        has_interaction = false,
+        icon,
+        title,
+        ...props
+    }: CurrentSwitcherContainerProps) => {
+        const { client, modules, traders_hub } = useStore();
 
-    const { document_status } = client.authentication_status;
-    const { is_eu_user, is_demo } = traders_hub;
-    const { current_list } = modules.cfd;
+        const { document_status } = client.authentication_status;
+        const { is_eu_user, is_demo } = traders_hub;
+        const { current_list } = modules.cfd;
 
-    const has_mf_mt5_account = Object.keys(current_list)
-        .map(key => current_list[key])
-        .some(account => account.landing_company_short === 'maltainvest');
+        const has_mf_mt5_account = Object.keys(current_list)
+            .map(key => current_list[key])
+            .some(account => account.landing_company_short === 'maltainvest');
 
-    const Dropdown = () => {
-        const icon_dropdown = (
-            <div className='currency-switcher-container__arrow' {...props}>
-                <Icon icon='IcChevronDownBold' />
-            </div>
-        );
+        const Dropdown = () => {
+            const icon_dropdown = (
+                <div className='currency-switcher-container__arrow' {...props}>
+                    <Icon icon='IcChevronDownBold' />
+                </div>
+            );
 
-        if ((is_eu_user && has_mf_mt5_account) || is_demo) {
-            return null;
-        }
-        return icon_dropdown;
-    };
+            if ((is_eu_user && has_mf_mt5_account) || is_demo) {
+                return null;
+            }
+            return icon_dropdown;
+        };
 
-    return (
-        <div
-            className={classNames(className, 'currency-switcher-container', {
-                'currency-switcher-container--has-interaction': has_interaction,
-            })}
-        >
-            <div className='currency-switcher-container--left'>
-                <CurrencyIcon icon={icon} size={32} className='currency-switcher__currency--icon' />
-                <div
-                    className={classNames(
-                        'currency-switcher-container__content',
-                        `currency-switcher-container--${document_status || 'failed' || 'pending' || 'default'}`
-                    )}
-                >
+        return (
+            <div
+                className={classNames(className, 'currency-switcher-container', {
+                    'currency-switcher-container--has-interaction': has_interaction,
+                })}
+            >
+                <div className='currency-switcher-container--left'>
+                    <CurrencyIcon icon={icon} size={32} className='currency-switcher__currency--icon' />
                     <div
                         className={classNames(
-                            'currency-switcher-container__content--text',
-                            `currency-switcher-container__content--text--${
-                                document_status || 'failed' || 'pending' || 'default'
-                            }`
+                            'currency-switcher-container__content',
+                            `currency-switcher-container--${document_status || 'failed' || 'pending' || 'default'}`
                         )}
                     >
-                        {title}
+                        <div
+                            className={classNames(
+                                'currency-switcher-container__content--text',
+                                `currency-switcher-container__content--text--${
+                                    document_status || 'failed' || 'pending' || 'default'
+                                }`
+                            )}
+                        >
+                            {title}
+                        </div>
+                        {children}
                     </div>
-                    {children}
+                </div>
+                <div className='currency-switcher-container--right'>
+                    {actions}
+                    <Dropdown />
                 </div>
             </div>
-            <div className='currency-switcher-container--right'>
-                {actions}
-                <Dropdown />
-            </div>
-        </div>
-    );
-};
+        );
+    }
+);
 
-export default observer(CurrentSwitcherContainer);
+export default CurrentSwitcherContainer;
diff --git a/packages/stores/src/mockStore.ts b/packages/stores/src/mockStore.ts
index f39cee715eeb..e25010324f36 100644
--- a/packages/stores/src/mockStore.ts
+++ b/packages/stores/src/mockStore.ts
@@ -282,6 +282,7 @@ const mock = (): TStores & { is_mock: boolean } => {
             no_CR_account: false,
             no_MF_account: false,
             setTogglePlatformType: jest.fn(),
+            is_demo: false,
         },
         menu: {
             attach: jest.fn(),
diff --git a/packages/stores/types.ts b/packages/stores/types.ts
index 46c43cf2f0fd..e4a76c2a7940 100644
--- a/packages/stores/types.ts
+++ b/packages/stores/types.ts
@@ -310,6 +310,7 @@ type TTradersHubStore = {
     selected_account_type: string;
     no_CR_account: boolean;
     no_MF_account: boolean;
+    is_demo: boolean;
 };
 
 /**