diff --git a/packages/appstore/package.json b/packages/appstore/package.json
index 044ee50f2da5..ee529eb90634 100644
--- a/packages/appstore/package.json
+++ b/packages/appstore/package.json
@@ -33,7 +33,6 @@
         "@deriv/stores": "^1.0.0",
         "@deriv/trader": "^3.8.0",
         "@deriv/translations": "^1.0.0",
-        "@deriv/ui": "^0.0.15",
         "classnames": "^2.2.6",
         "formik": "^2.1.4",
         "mobx": "^6.6.1",
diff --git a/packages/cashier/package.json b/packages/cashier/package.json
index 2f98879db66a..826a3383f240 100644
--- a/packages/cashier/package.json
+++ b/packages/cashier/package.json
@@ -44,6 +44,7 @@
         "@deriv/shared": "^1.0.0",
         "@deriv/stores": "^1.0.0",
         "@deriv/translations": "^1.0.0",
+        "@deriv/ui": "^0.6.0",
         "classnames": "^2.2.6",
         "formik": "^2.1.4",
         "loadjs": "^4.2.0",
diff --git a/packages/cashier/src/app-content.tsx b/packages/cashier/src/app-content.tsx
new file mode 100644
index 000000000000..76a4160a938b
--- /dev/null
+++ b/packages/cashier/src/app-content.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import Routes from 'Containers/routes';
+import { observer, useStore } from '@deriv/stores';
+import { useTheme } from '@deriv/ui';
+
+const AppContent = observer(() => {
+    const { ui } = useStore();
+    const { is_dark_mode_on, notification_messages_ui: Notifications } = ui;
+    const { setColorMode } = useTheme();
+
+    React.useEffect(() => {
+        const theme = (is_dark_mode_on ? 'dark' : 'light') as Parameters<typeof setColorMode>[0];
+        setColorMode(theme);
+    }, [is_dark_mode_on, setColorMode]);
+
+    return (
+        <>
+            {Notifications && <Notifications />}
+            <Routes />
+        </>
+    );
+});
+
+export default AppContent;
diff --git a/packages/cashier/src/app.jsx b/packages/cashier/src/app.jsx
index 7c666ea47006..a5b2620f6947 100644
--- a/packages/cashier/src/app.jsx
+++ b/packages/cashier/src/app.jsx
@@ -1,12 +1,10 @@
 import React from 'react';
 import { setWebsocket } from '@deriv/shared';
 import { init } from 'Utils/server_time';
-import Routes from 'Containers/routes';
 import CashierProviders from './cashier-providers';
+import AppContent from './app-content';
 
 const App = ({ passthrough: { WS, root_store } }) => {
-    const { notification_messages_ui: Notifications } = root_store.ui;
-
     React.useEffect(() => {
         setWebsocket(WS);
         init();
@@ -15,8 +13,7 @@ const App = ({ passthrough: { WS, root_store } }) => {
 
     return (
         <CashierProviders store={root_store}>
-            {Notifications && <Notifications />}
-            <Routes />
+            <AppContent />
         </CashierProviders>
     );
 };
diff --git a/packages/cashier/src/cashier-providers.tsx b/packages/cashier/src/cashier-providers.tsx
index 897139270e70..01f2b459d1bf 100644
--- a/packages/cashier/src/cashier-providers.tsx
+++ b/packages/cashier/src/cashier-providers.tsx
@@ -1,12 +1,15 @@
 import React from 'react';
 import { StoreProvider } from '@deriv/stores';
+import { ThemeProvider } from '@deriv/ui';
 import { CashierStoreProvider } from './stores/useCashierStores';
 import { TRootStore } from 'Types';
 
 const CashierProviders = ({ children, store }: React.PropsWithChildren<{ store: TRootStore }>) => {
     return (
         <StoreProvider store={store}>
-            <CashierStoreProvider>{children}</CashierStoreProvider>
+            <CashierStoreProvider>
+                <ThemeProvider>{children} </ThemeProvider>
+            </CashierStoreProvider>
         </StoreProvider>
     );
 };
diff --git a/packages/cashier/src/components/cashier-breadcrumb/__tests__/cashier-breadcrumb.spec.tsx b/packages/cashier/src/components/cashier-breadcrumb/__tests__/cashier-breadcrumb.spec.tsx
new file mode 100644
index 000000000000..ea0a73cfcc75
--- /dev/null
+++ b/packages/cashier/src/components/cashier-breadcrumb/__tests__/cashier-breadcrumb.spec.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import CashierBreadcrumb from '../cashier-breadcrumb';
+
+jest.mock('Stores/useCashierStores', () => ({
+    ...jest.requireActual('Stores/useCashierStores'),
+    useCashierStore: jest.fn(() => ({
+        general_store: { setIsDeposit: jest.fn() },
+    })),
+}));
+
+describe('<CashierBreadcrumb />', () => {
+    it('should render proper crumbs for crypto deposit page', () => {
+        render(<CashierBreadcrumb is_crypto_deposit />);
+
+        expect(screen.getByText(/cashier/i)).toBeInTheDocument();
+        expect(screen.getByText(/deposit cryptocurrencies/i)).toBeInTheDocument();
+    });
+
+    it('should render proper crumbs for fiat deposit page', () => {
+        render(<CashierBreadcrumb />);
+
+        expect(screen.getByText(/cashier/i)).toBeInTheDocument();
+        expect(screen.getByText(/deposit via bank wire, credit card, and e-wallet/i)).toBeInTheDocument();
+    });
+});
diff --git a/packages/cashier/src/components/cashier-breadcrumb/cashier-breadcrumb.scss b/packages/cashier/src/components/cashier-breadcrumb/cashier-breadcrumb.scss
new file mode 100644
index 000000000000..cf39a7c89ba2
--- /dev/null
+++ b/packages/cashier/src/components/cashier-breadcrumb/cashier-breadcrumb.scss
@@ -0,0 +1,16 @@
+.cashier-breadcrumb {
+    width: 100%;
+    margin-bottom: 1.6rem;
+
+    ul > *:not(:last-child) {
+        cursor: pointer;
+    }
+
+    li {
+        text-align: left;
+    }
+
+    @include mobile {
+        margin-top: 1.6rem;
+    }
+}
diff --git a/packages/cashier/src/components/cashier-breadcrumb/cashier-breadcrumb.tsx b/packages/cashier/src/components/cashier-breadcrumb/cashier-breadcrumb.tsx
new file mode 100644
index 000000000000..205bc1173604
--- /dev/null
+++ b/packages/cashier/src/components/cashier-breadcrumb/cashier-breadcrumb.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { localize } from '@deriv/translations';
+import { Breadcrumb } from '@deriv/ui';
+import { useCashierStore } from '../../stores/useCashierStores';
+import './cashier-breadcrumb.scss';
+
+const CashierBreadcrumb = ({ is_crypto_deposit = false }: { is_crypto_deposit?: boolean }) => {
+    const {
+        general_store: { setIsDeposit },
+    } = useCashierStore();
+
+    const crypto_deposit_crumbs: React.ComponentProps<typeof Breadcrumb>['items'] = [
+        { value: 0, text: localize('Cashier') },
+        { value: 1, text: localize('Deposit cryptocurrencies') },
+    ];
+
+    const fiat_deposit_crumbs: React.ComponentProps<typeof Breadcrumb>['items'] = [
+        { value: 0, text: localize('Cashier') },
+        { value: 1, text: localize('Deposit via bank wire, credit card, and e-wallet') },
+    ];
+
+    const onBreadcrumbHandler: React.ComponentProps<typeof Breadcrumb>['handleOnClick'] = item => {
+        switch (item.value) {
+            case 0:
+                setIsDeposit(false);
+                break;
+            default:
+        }
+    };
+
+    // TODO: improve Breadcrumb component in deriv-ui project that it can accept custom classnames
+    return (
+        <div className='cashier-breadcrumb'>
+            <Breadcrumb
+                items={is_crypto_deposit ? crypto_deposit_crumbs : fiat_deposit_crumbs}
+                handleOnClick={onBreadcrumbHandler}
+            />
+        </div>
+    );
+};
+
+export default CashierBreadcrumb;
diff --git a/packages/cashier/src/components/cashier-breadcrumb/index.ts b/packages/cashier/src/components/cashier-breadcrumb/index.ts
new file mode 100644
index 000000000000..8a2f99e4f8c7
--- /dev/null
+++ b/packages/cashier/src/components/cashier-breadcrumb/index.ts
@@ -0,0 +1,3 @@
+import CashierBreadcrumb from './cashier-breadcrumb';
+
+export default CashierBreadcrumb;
diff --git a/packages/cashier/src/components/cashier-container/real/__tests__/real.spec.tsx b/packages/cashier/src/components/cashier-container/real/__tests__/real.spec.tsx
index 907fecb28b06..7e694cd94e32 100644
--- a/packages/cashier/src/components/cashier-container/real/__tests__/real.spec.tsx
+++ b/packages/cashier/src/components/cashier-container/real/__tests__/real.spec.tsx
@@ -1,41 +1,144 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
+import { mockStore, StoreProvider } from '@deriv/stores';
+import { useCashierStore } from '../../../../stores/useCashierStores';
+import userEvent from '@testing-library/user-event';
 import Real from '../real';
 
 jest.mock('@deriv/components', () => ({
-    ...(jest.requireActual('@deriv/components') as any),
+    ...jest.requireActual('@deriv/components'),
     Loading: () => <div>Loading</div>,
 }));
 
+let mocked_cashier_store: DeepPartial<ReturnType<typeof useCashierStore>>;
+
+jest.mock('Stores/useCashierStores', () => ({
+    ...jest.requireActual('Stores/useCashierStores'),
+    useCashierStore: jest.fn(() => mocked_cashier_store),
+}));
+
 describe('<Real />', () => {
-    const props = {
-        iframe_url: 'https://www.test_url.com',
-        clearIframe: jest.fn(),
-        iframe_height: '',
-        is_loading: false,
-    };
-
-    it('should render the component with iframe when iframe_url value is passed', () => {
-        render(<Real {...props} />);
-        const el_loader = screen.queryByText('Loading');
-
-        expect(el_loader).not.toBeInTheDocument();
-        expect(screen.queryByTestId('dt_doughflow_section')).toBeInTheDocument();
+    beforeEach(() => {
+        mocked_cashier_store = {
+            iframe: {
+                clearIframe: jest.fn(),
+                iframe_height: 100,
+                iframe_url: 'https://www.test_url.com',
+            },
+            deposit: {
+                onMountDeposit: jest.fn(),
+            },
+            general_store: {
+                is_loading: false,
+            },
+        };
     });
 
-    it('should render the loading when is_loading is true', () => {
-        render(<Real {...props} iframe_url='' is_loading />);
-        const el_loader = screen.queryByText('Loading');
+    const mockRootStore = mockStore({});
+
+    it('should show loader when is_loading is true or iframe_height is equal to 0', () => {
+        (useCashierStore as jest.Mock).mockReturnValueOnce({
+            ...mocked_cashier_store,
+            iframe: { ...mocked_cashier_store.iframe, iframe_height: 0 },
+        });
+
+        const { rerender } = render(
+            <StoreProvider store={mockRootStore}>
+                <Real is_deposit />
+            </StoreProvider>
+        );
+
+        expect(screen.getByText('Loading')).toBeInTheDocument();
 
-        expect(el_loader).toBeInTheDocument();
-        expect(screen.queryByTestId('dt_doughflow_section')).not.toBeInTheDocument();
+        (useCashierStore as jest.Mock).mockReturnValueOnce({
+            ...mocked_cashier_store,
+            general_store: { is_loading: true },
+        });
+
+        rerender(
+            <StoreProvider store={mockRootStore}>
+                <Real is_deposit />
+            </StoreProvider>
+        );
+
+        expect(screen.getByText('Loading')).toBeInTheDocument();
     });
 
-    it('will display doughflow and loader if all props are provided', () => {
-        render(<Real {...props} is_loading />);
-        const el_loader = screen.queryByText('Loading');
+    it('should render an iframe if iframe_url is not an empty string', () => {
+        render(
+            <StoreProvider store={mockRootStore}>
+                <Real is_deposit />
+            </StoreProvider>
+        );
 
-        expect(el_loader).toBeInTheDocument();
         expect(screen.queryByTestId('dt_doughflow_section')).toBeInTheDocument();
     });
+
+    describe('Breadcrumb visibility', () => {
+        it('should show breadcrumbs only on deposit page and only for non EU clients', () => {
+            render(
+                <StoreProvider store={mockRootStore}>
+                    <Real is_deposit />
+                </StoreProvider>
+            );
+
+            expect(screen.getByText(/cashier/i)).toBeInTheDocument();
+            expect(screen.getByText(/deposit via bank wire, credit card, and e-wallet/i)).toBeInTheDocument();
+        });
+
+        it('should not show breadcrumbs on deposit page if iframe_height is equal to 0', () => {
+            (useCashierStore as jest.Mock).mockReturnValueOnce({
+                ...mocked_cashier_store,
+                iframe: { ...mocked_cashier_store.iframe, iframe_height: 0 },
+            });
+
+            render(
+                <StoreProvider store={mockRootStore}>
+                    <Real is_deposit />
+                </StoreProvider>
+            );
+
+            expect(screen.queryByText(/cashier/i)).not.toBeInTheDocument();
+            expect(screen.queryByText(/deposit via bank wire, credit card, and e-wallet/i)).not.toBeInTheDocument();
+        });
+
+        it('should not show breadcrumbs on withdraw page', () => {
+            render(
+                <StoreProvider store={mockRootStore}>
+                    <Real is_deposit={false} />
+                </StoreProvider>
+            );
+
+            expect(screen.queryByText(/cashier/i)).not.toBeInTheDocument();
+            expect(screen.queryByText(/deposit via bank wire, credit card, and e-wallet/i)).not.toBeInTheDocument();
+        });
+    });
+
+    it('should trigger setIsDeposit callback when the user clicks on Cashier breadcrumb', () => {
+        render(
+            <StoreProvider store={mockRootStore}>
+                <Real is_deposit={false} />
+            </StoreProvider>
+        );
+
+        const el_breadcrumb_cashier = screen.queryByText(/cashier/i);
+
+        if (el_breadcrumb_cashier) {
+            userEvent.click(el_breadcrumb_cashier);
+            expect(mocked_cashier_store.general_store?.setIsDeposit).toHaveBeenCalledWith(false);
+        }
+    });
+
+    it('should trigger clearIframe and onMountDeposit callbacks when <Real /> component is destroyed on deposit page', () => {
+        const { unmount } = render(
+            <StoreProvider store={mockRootStore}>
+                <Real is_deposit={false} />
+            </StoreProvider>
+        );
+
+        unmount();
+
+        expect(mocked_cashier_store.iframe?.clearIframe).toHaveBeenCalled();
+        expect(mocked_cashier_store.deposit?.onMountDeposit).toHaveBeenCalled();
+    });
 });
diff --git a/packages/cashier/src/components/cashier-container/real/real.scss b/packages/cashier/src/components/cashier-container/real/real.scss
new file mode 100644
index 000000000000..156134338ee5
--- /dev/null
+++ b/packages/cashier/src/components/cashier-container/real/real.scss
@@ -0,0 +1,6 @@
+.real {
+    &__loader {
+        width: 100%;
+        height: 80vh;
+    }
+}
diff --git a/packages/cashier/src/components/cashier-container/real/real.tsx b/packages/cashier/src/components/cashier-container/real/real.tsx
index c9bc2a8ff0d7..5559e237f72f 100644
--- a/packages/cashier/src/components/cashier-container/real/real.tsx
+++ b/packages/cashier/src/components/cashier-container/real/real.tsx
@@ -1,23 +1,37 @@
 import React from 'react';
 import { Loading } from '@deriv/components';
+import { useStore } from '@deriv/stores';
+import CashierBreadcrumb from '../../cashier-breadcrumb';
+import { useCashierStore } from '../../../stores/useCashierStores';
+import './real.scss';
 
-type TRealProps = {
-    iframe_height: number | string;
-    iframe_url: string;
-    clearIframe: VoidFunction;
-    is_loading: boolean;
-};
+const Real = ({ is_deposit = false }: { is_deposit?: boolean }) => {
+    const {
+        traders_hub: { is_low_risk_cr_eu_real },
+    } = useStore();
+
+    const { iframe, deposit, general_store } = useCashierStore();
+
+    const { clearIframe, iframe_height, iframe_url } = iframe;
+
+    const { is_loading } = general_store;
+
+    const { onMountDeposit } = deposit;
+
+    const should_show_breadcrumbs = !is_low_risk_cr_eu_real && is_deposit && Boolean(iframe_height);
+    const should_show_loader = is_loading || !iframe_height;
 
-const Real = ({ iframe_height, iframe_url, clearIframe, is_loading }: TRealProps) => {
     React.useEffect(() => {
         return () => {
             clearIframe();
+            onMountDeposit?.();
         };
-    }, [clearIframe]);
+    }, [clearIframe, onMountDeposit]);
 
     return (
-        <div className='cashier__wrapper'>
-            {is_loading && <Loading is_fullscreen />}
+        <div className='cashier__wrapper real'>
+            {should_show_loader && <Loading className='real__loader' />}
+            {should_show_breadcrumbs && <CashierBreadcrumb />}
             {iframe_url && (
                 <iframe
                     className='cashier__content'
diff --git a/packages/cashier/src/components/cashier-onboarding/cashier-onboarding.tsx b/packages/cashier/src/components/cashier-onboarding/cashier-onboarding.tsx
index 44e6c160a8e3..4f9db5fbee73 100644
--- a/packages/cashier/src/components/cashier-onboarding/cashier-onboarding.tsx
+++ b/packages/cashier/src/components/cashier-onboarding/cashier-onboarding.tsx
@@ -39,6 +39,7 @@ const CashierOnboarding = observer(({ setSideNotes }: TCashierOnboardingProps) =
         show_p2p_in_cashier_onboarding,
     } = general_store;
     const {
+        app_contents_scroll_ref,
         is_dark_mode_on,
         is_mobile,
         openRealAccountSignup,
@@ -77,6 +78,12 @@ const CashierOnboarding = observer(({ setSideNotes }: TCashierOnboardingProps) =
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
+    React.useEffect(() => {
+        return () => {
+            if (app_contents_scroll_ref.current) app_contents_scroll_ref.current.scrollTop = 0;
+        };
+    }, [app_contents_scroll_ref]);
+
     React.useEffect(() => {
         if (
             typeof setSideNotes === 'function' &&
diff --git a/packages/cashier/src/pages/deposit/crypto-deposit/__tests__/crypto-deposit.spec.tsx b/packages/cashier/src/pages/deposit/crypto-deposit/__tests__/crypto-deposit.spec.tsx
index 2f810ecb0c6a..c2ac74412861 100644
--- a/packages/cashier/src/pages/deposit/crypto-deposit/__tests__/crypto-deposit.spec.tsx
+++ b/packages/cashier/src/pages/deposit/crypto-deposit/__tests__/crypto-deposit.spec.tsx
@@ -39,6 +39,7 @@ describe('<CryptoDeposit />', () => {
     };
 
     it('should show loader', () => {
+        // TODO: use mockStore for tests after TStores type will be updated
         const mockRootStore: DeepPartial<TRootStore> = {
             client: {
                 currency: 'BTC',
@@ -67,6 +68,70 @@ describe('<CryptoDeposit />', () => {
         expect(screen.getByText('Loading')).toBeInTheDocument();
     });
 
+    it('should show proper breadcrumbs', () => {
+        const mockRootStore: DeepPartial<TRootStore> = {
+            client: {
+                currency: 'BTC',
+            },
+            modules: {
+                cashier: {
+                    onramp: {
+                        is_deposit_address_loading: false,
+                        api_error: '',
+                        deposit_address: 'tb1ql7w62elx9ucw4pj5lgw4l028hmuw80sndtntxt',
+                        pollApiForDepositAddress: jest.fn(),
+                    },
+                    transaction_history: {
+                        crypto_transactions: [{}],
+                        onMount: jest.fn(),
+                    },
+                    general_store: {
+                        setIsDeposit: jest.fn(),
+                    },
+                },
+            },
+        };
+
+        renderWithRouter(<CryptoDeposit />, mockRootStore as TRootStore);
+
+        expect(screen.getByText(/cashier/i)).toBeInTheDocument();
+        expect(screen.getByText(/deposit cryptocurrencies/i)).toBeInTheDocument();
+    });
+
+    it('should trigger setIsDeposit callback when the user clicks on Cashier breadcrumb', () => {
+        const mockRootStore: DeepPartial<TRootStore> = {
+            client: {
+                currency: 'BTC',
+            },
+            modules: {
+                cashier: {
+                    onramp: {
+                        is_deposit_address_loading: false,
+                        api_error: '',
+                        deposit_address: 'tb1ql7w62elx9ucw4pj5lgw4l028hmuw80sndtntxt',
+                        pollApiForDepositAddress: jest.fn(),
+                    },
+                    transaction_history: {
+                        crypto_transactions: [{}],
+                        onMount: jest.fn(),
+                    },
+                    general_store: {
+                        setIsDeposit: jest.fn(),
+                    },
+                },
+            },
+        };
+
+        renderWithRouter(<CryptoDeposit />, mockRootStore as TRootStore);
+
+        const el_breadcrumb_cashier = screen.queryByText(/cashier/i);
+
+        if (el_breadcrumb_cashier) {
+            fireEvent.click(el_breadcrumb_cashier);
+            expect(mockRootStore.modules?.cashier.general_store.setIsDeposit).toHaveBeenCalledWith(false);
+        }
+    });
+
     it('should show proper error message and button', () => {
         const mockRootStore: DeepPartial<TRootStore> = {
             client: {
diff --git a/packages/cashier/src/pages/deposit/crypto-deposit/crypto-deposit.scss b/packages/cashier/src/pages/deposit/crypto-deposit/crypto-deposit.scss
index 54dd8fd9fd81..f4b558219df0 100644
--- a/packages/cashier/src/pages/deposit/crypto-deposit/crypto-deposit.scss
+++ b/packages/cashier/src/pages/deposit/crypto-deposit/crypto-deposit.scss
@@ -6,6 +6,7 @@
             max-width: none;
         }
     }
+
     &__transaction-wrapper {
         display: flex;
         flex-direction: column;
diff --git a/packages/cashier/src/pages/deposit/crypto-deposit/crypto-deposit.tsx b/packages/cashier/src/pages/deposit/crypto-deposit/crypto-deposit.tsx
index 9d1466a3ef3f..2dfb8c851ac3 100644
--- a/packages/cashier/src/pages/deposit/crypto-deposit/crypto-deposit.tsx
+++ b/packages/cashier/src/pages/deposit/crypto-deposit/crypto-deposit.tsx
@@ -3,6 +3,7 @@ import { Button, ButtonLink, Clipboard, Dropdown, Icon, Loading, Text } from '@d
 import { localize, Localize } from '@deriv/translations';
 import { CryptoConfig, getCurrencyName, isCryptocurrency, isMobile } from '@deriv/shared';
 import { useStore, observer } from '@deriv/stores';
+import CashierBreadcrumb from '../../../components/cashier-breadcrumb';
 import QRCode from 'qrcode.react';
 import RecentTransaction from '../../../components/recent-transaction';
 import { useCashierStore } from '../../../stores/useCashierStores';
@@ -128,6 +129,7 @@ const CryptoDeposit = observer(() => {
 
     return (
         <div className='cashier__wrapper crypto-deposit__wrapper'>
+            <CashierBreadcrumb is_crypto_deposit />
             <div className='crypto-deposit__transaction-wrapper'>
                 <Icon icon={`IcCurrency-${currency?.toLowerCase()}`} size={64} />
                 <Text
diff --git a/packages/cashier/src/pages/deposit/deposit.tsx b/packages/cashier/src/pages/deposit/deposit.tsx
index 5d359e169527..db58053b126f 100644
--- a/packages/cashier/src/pages/deposit/deposit.tsx
+++ b/packages/cashier/src/pages/deposit/deposit.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { Loading } from '@deriv/components';
 import { useDepositLocked } from '@deriv/hooks';
-import { ContentFlag } from '@deriv/shared';
 import { useStore, observer } from '@deriv/stores';
 import { Real, Virtual } from '../../components/cashier-container';
 import { CashierOnboarding, CashierOnboardingSideNote } from '../../components/cashier-onboarding';
@@ -31,15 +30,16 @@ const Deposit = observer(({ setSideNotes }: TDeposit) => {
         landing_company_shortcode,
     } = client;
     const { iframe, deposit, transaction_history, general_store } = useCashierStore();
-    const { clearIframe, iframe_height, iframe_url } = iframe;
+    const { iframe_height, iframe_url } = iframe;
     const { container, error, onMountDeposit: onMount } = deposit;
-    const { content_flag } = traders_hub;
+    const { is_low_risk_cr_eu_real } = traders_hub;
     const {
         crypto_transactions,
         is_crypto_transactions_visible,
         onMount: recentTransactionOnMount,
     } = transaction_history;
     const {
+        cashier_route_tab_index: tab_index,
         is_cashier_locked,
         is_cashier_onboarding,
         is_crypto,
@@ -48,14 +48,12 @@ const Deposit = observer(({ setSideNotes }: TDeposit) => {
         is_system_maintenance,
         setActiveTab,
         setIsDeposit,
-        cashier_route_tab_index: tab_index,
     } = general_store;
     const is_deposit_locked = useDepositLocked();
 
-    const is_eu = [ContentFlag.LOW_RISK_CR_EU, ContentFlag.EU_REAL].includes(content_flag);
-
     const is_fiat_currency_banner_visible_for_MF_clients =
         landing_company_shortcode === 'maltainvest' && !is_crypto && !can_change_fiat_currency && !!iframe_height;
+
     React.useEffect(() => {
         if (!is_crypto_transactions_visible) {
             recentTransactionOnMount();
@@ -72,6 +70,7 @@ const Deposit = observer(({ setSideNotes }: TDeposit) => {
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [setActiveTab, onMount, container, error.setErrorMessage]);
+
     React.useEffect(() => {
         if (typeof setSideNotes === 'function') {
             if (is_switching || is_deposit) setSideNotes(null);
@@ -124,7 +123,7 @@ const Deposit = observer(({ setSideNotes }: TDeposit) => {
         return <CryptoTransactionsHistory />;
     }
 
-    if (is_deposit || is_eu) {
+    if (is_deposit || is_low_risk_cr_eu_real) {
         if (error.message) {
             return <Error error={error} />;
         }
@@ -139,12 +138,7 @@ const Deposit = observer(({ setSideNotes }: TDeposit) => {
                         <CashierOnboardingSideNote is_crypto={false} />
                     </SideNote>
                 )}
-                <Real
-                    iframe_height={iframe_height}
-                    iframe_url={iframe_url}
-                    is_loading={is_loading}
-                    clearIframe={clearIframe}
-                />
+                <Real is_deposit />
             </>
         );
     }
diff --git a/packages/cashier/src/stores/deposit-store.ts b/packages/cashier/src/stores/deposit-store.ts
index cdd5d1dd5f82..8892ff579ccd 100644
--- a/packages/cashier/src/stores/deposit-store.ts
+++ b/packages/cashier/src/stores/deposit-store.ts
@@ -35,6 +35,7 @@ export default class DepositStore {
 
         this.error.setErrorMessage({ code: '', message: '' }, null, false);
         setContainerHeight(0);
+        setLoading(true);
 
         if (!is_session_timeout) {
             checkIframeLoaded();
diff --git a/packages/core/src/Stores/traders-hub-store.js b/packages/core/src/Stores/traders-hub-store.js
index f8c0891fbc3c..81ab4578ccd2 100644
--- a/packages/core/src/Stores/traders-hub-store.js
+++ b/packages/core/src/Stores/traders-hub-store.js
@@ -74,6 +74,7 @@ export default class TradersHubStore extends BaseStore {
             is_demo: computed,
             is_eu_selected: computed,
             is_real: computed,
+            is_low_risk_cr_eu_real: computed,
             is_currency_switcher_disabled_for_mf: computed,
             no_CR_account: computed,
             no_MF_account: computed,
@@ -294,6 +295,10 @@ export default class TradersHubStore extends BaseStore {
         return eu_related.includes(this.content_flag);
     }
 
+    get is_low_risk_cr_eu_real() {
+        return [ContentFlag.LOW_RISK_CR_EU, ContentFlag.EU_REAL].includes(this.content_flag);
+    }
+
     getAvailablePlatforms() {
         const appstore_platforms = getAppstorePlatforms();
         if (this.is_eu_user && !this.is_demo_low_risk) {
diff --git a/packages/stores/src/mockStore.ts b/packages/stores/src/mockStore.ts
index b461347e8940..fae63d6bfdba 100644
--- a/packages/stores/src/mockStore.ts
+++ b/packages/stores/src/mockStore.ts
@@ -215,6 +215,9 @@ const mock = (): TRootStore => {
             is_network_online: false,
         },
         ui: {
+            app_contents_scroll_ref: {
+                current: null,
+            },
             current_focus: null,
             is_cashier_visible: false,
             is_closing_create_real_account_modal: false,
@@ -243,6 +246,7 @@ const mock = (): TRootStore => {
             openModal: jest.fn(),
             content_flag: '',
             is_eu_user: false,
+            is_low_risk_cr_eu_real: false,
         },
         menu: {
             attach: jest.fn(),
diff --git a/packages/stores/types.ts b/packages/stores/types.ts
index 98717f5d408f..687aa579757c 100644
--- a/packages/stores/types.ts
+++ b/packages/stores/types.ts
@@ -204,6 +204,7 @@ type TCommonStore = {
 };
 
 type TUiStore = {
+    app_contents_scroll_ref: React.MutableRefObject<null | HTMLDivElement>;
     current_focus: string | null;
     disableApp: () => void;
     enableApp: () => void;
@@ -248,6 +249,7 @@ type TNotificationStore = {
 type TTradersHubStore = {
     closeModal: () => void;
     content_flag: any;
+    is_low_risk_cr_eu_real: boolean;
     openModal: (modal_id: string, props?: any) => void;
     is_eu_user: boolean;
 };