diff --git a/packages/cashier/src/containers/cashier/cashier.tsx b/packages/cashier/src/containers/cashier/cashier.tsx
index fdd9e748174f..0ac4f5cb5f64 100644
--- a/packages/cashier/src/containers/cashier/cashier.tsx
+++ b/packages/cashier/src/containers/cashier/cashier.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import { RouteComponentProps } from 'react-router';
 import { withRouter } from 'react-router-dom';
 import {
@@ -50,7 +50,7 @@ type TCashierOptions = {
 
 const Cashier = observer(({ history, location, routes: routes_config }: TCashierProps) => {
     const { common, ui, client } = useStore();
-    const { withdraw, general_store, payment_agent, transaction_history } = useCashierStore();
+    const { withdraw, general_store, payment_agent } = useCashierStore();
     const { error } = withdraw;
     const {
         is_cashier_onboarding,
@@ -61,7 +61,6 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier
         cashier_route_tab_index: tab_index,
         setActiveTab,
     } = general_store;
-    const { is_crypto_transactions_visible } = transaction_history;
     const {
         data: is_payment_agent_transfer_visible,
         isLoading: is_payment_agent_checking,
@@ -80,42 +79,8 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier
         isLoading: is_p2p_enabled_loading,
     } = useIsP2PEnabled();
 
-    React.useEffect(() => {
-        toggleCashier();
-        // we still need to populate the tabs shown on cashier
-        return () => {
-            toggleCashier();
-        };
-    }, [toggleCashier]);
-
-    React.useEffect(() => {
-        (async () => {
-            await WS?.wait('authorize');
-            if (is_logged_in) {
-                onMount();
-                setAccountSwitchListener();
-            }
-        })();
-    }, [is_logged_in, onMount, setAccountSwitchListener]);
-
-    React.useEffect(() => {
-        if (
-            is_payment_agent_transfer_visible_is_success &&
-            !is_payment_agent_transfer_visible &&
-            history.location.pathname === routes.cashier_pa_transfer
-        ) {
-            history.push(routes.cashier_deposit);
-        }
-    }, [history, is_payment_agent_transfer_visible, is_payment_agent_transfer_visible_is_success]);
-
-    React.useEffect(() => {
-        if (is_p2p_enabled_success && !is_p2p_enabled && history.location.pathname.startsWith(routes.cashier_p2p)) {
-            history.push(routes.cashier_deposit);
-        }
-    }, [history, is_p2p_enabled, is_p2p_enabled_success]);
-
     const onClickClose = () => history.push(routes.traders_hub);
-    const getMenuOptions = () => {
+    const getMenuOptions = useMemo(() => {
         const options: TCashierOptions[] = [];
         routes_config.forEach(route => {
             if (
@@ -135,7 +100,6 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier
                     path: route.path,
                     // Set to true to create the 3-column effect without passing any content. If there is content, the content should be passed in.
                     has_side_note:
-                        !is_crypto_transactions_visible &&
                         route.path !== routes.cashier_deposit &&
                         route.path !== routes.cashier_withdrawal &&
                         route.path !== routes.cashier_p2p,
@@ -144,17 +108,102 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier
         });
 
         return options;
-    };
+    }, [
+        is_account_transfer_visible,
+        is_onramp_visible,
+        is_p2p_enabled,
+        is_payment_agent_transfer_visible,
+        is_payment_agent_visible,
+        p2p_notification_count,
+        routes_config,
+    ]);
 
-    const selected_route = getSelectedRoute({ routes: routes_config, pathname: location.pathname });
-    // const should_show_tab_headers_note =
-    //     !is_virtual &&
-    //     (location.pathname.startsWith(routes.cashier_deposit) ||
-    //         location.pathname.startsWith(routes.cashier_withdrawal));
+    const selected_route = useMemo(
+        () => getSelectedRoute({ routes: routes_config, pathname: location.pathname }),
+        [location.pathname, routes_config]
+    );
+
+    const is_default_route = !!selected_route.default;
+
+    const getHeaderTitle = useMemo(() => {
+        if (!isMobile() || (is_default_route && (is_loading || is_cashier_onboarding))) return localize('Cashier');
+
+        return selected_route.getTitle?.();
+    }, [is_cashier_onboarding, is_default_route, is_loading, selected_route]);
 
-    const is_default_route = !!getSelectedRoute({ routes: routes_config, pathname: location.pathname }).default;
+    const updateActiveTab = useCallback(
+        (path?: string) => {
+            switch (path) {
+                case routes.cashier_deposit:
+                    setActiveTab('deposit');
+                    break;
+                case routes.cashier_withdrawal:
+                    setActiveTab('withdraw');
+                    break;
+                case routes.cashier_pa:
+                    setActiveTab('payment_agent');
+                    break;
+                case routes.cashier_pa_transfer:
+                    setActiveTab('payment_agent_transfer');
+                    break;
+                case routes.cashier_acc_transfer:
+                    setActiveTab('account_transfer');
+                    break;
+                case routes.cashier_onramp:
+                    setActiveTab('onramp');
+                    break;
+                default:
+                    setActiveTab('deposit');
+                    break;
+            }
+        },
+        [setActiveTab]
+    );
+
+    useEffect(() => {
+        updateActiveTab(selected_route.path);
+    }, [selected_route, updateActiveTab]);
+
+    useEffect(() => {
+        toggleCashier();
+        // we still need to populate the tabs shown on cashier
+        return () => {
+            toggleCashier();
+        };
+    }, [toggleCashier]);
+
+    useEffect(() => {
+        (async () => {
+            await WS?.wait('authorize');
+            if (is_logged_in) {
+                onMount();
+                setAccountSwitchListener();
+            }
+        })();
+    }, [is_logged_in, onMount, setAccountSwitchListener]);
+
+    useEffect(() => {
+        if (
+            is_payment_agent_transfer_visible_is_success &&
+            !is_payment_agent_transfer_visible &&
+            history.location.pathname === routes.cashier_pa_transfer
+        ) {
+            history.push(routes.cashier_deposit);
+        }
+    }, [history, is_payment_agent_transfer_visible, is_payment_agent_transfer_visible_is_success]);
+
+    useEffect(() => {
+        if (!is_onramp_visible && history.location.pathname === routes.cashier_onramp) {
+            history.push(routes.cashier_deposit);
+        }
+    }, [history, is_onramp_visible]);
+
+    useEffect(() => {
+        if (is_p2p_enabled_success && !is_p2p_enabled && history.location.pathname.startsWith(routes.cashier_p2p)) {
+            history.push(routes.cashier_deposit);
+        }
+    }, [history, is_p2p_enabled, is_p2p_enabled_success]);
 
-    // '|| !is_account_setting_loaded' condition added to make sure client_tnc_status loaded
     if (
         ((!is_logged_in || isMobile()) && is_logging_in) ||
         !is_account_setting_loaded ||
@@ -164,53 +213,20 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier
         return <Loading is_fullscreen />;
     }
 
-    const getHeaderTitle = () => {
-        if (!isMobile() || (is_default_route && (is_loading || is_cashier_onboarding))) return localize('Cashier');
-
-        return selected_route.getTitle?.();
-    };
-
-    const onTabChange = (index: number) => {
-        const options = getMenuOptions();
-        const path = options[index].path;
-        switch (path) {
-            case routes.cashier_deposit:
-                setActiveTab('deposit');
-                break;
-            case routes.cashier_withdrawal:
-                setActiveTab('withdraw');
-                break;
-            case routes.cashier_pa:
-                setActiveTab('payment_agent');
-                break;
-            case routes.cashier_pa_transfer:
-                setActiveTab('payment_agent_transfer');
-                break;
-            case routes.cashier_acc_transfer:
-                setActiveTab('account_transfer');
-                break;
-            default:
-                setActiveTab('deposit');
-                break;
-        }
-
-        setTabIndex(index);
-    };
-
     return (
         <FadeWrapper is_visible={is_visible} className='cashier__page-wrapper' keyname='cashier__page-wrapper'>
             <ErrorDialog error={error} />
             <div className='cashier'>
-                <PageOverlay header={getHeaderTitle()} onClickClose={onClickClose} is_from_app={is_from_derivgo}>
+                <PageOverlay header={getHeaderTitle} onClickClose={onClickClose} is_from_app={is_from_derivgo}>
                     <DesktopWrapper>
                         <VerticalTab
                             current_path={location.pathname}
                             is_floating
-                            setVerticalTabIndex={onTabChange}
+                            setVerticalTabIndex={setTabIndex}
                             vertical_tab_index={is_default_route ? 0 : tab_index}
                             is_full_width
                             is_routed
-                            list={getMenuOptions()}
+                            list={getMenuOptions}
                             tab_headers_note={
                                 <Button
                                     id='cashier_learn_more'
@@ -220,25 +236,6 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier
                                     secondary
                                 />
                             }
-                            // TODO: Uncomment when Ewallet.Exchange is available
-                            // tab_headers_note={
-                            //     should_show_tab_headers_note ? (
-                            //         <Text as='p' size='xxs' className='cashier__tab-header-note'>
-                            //             <Localize
-                            //                 i18n_default_text='Want to exchange between e-wallet currencies? Try <0>Ewallet.Exchange</0>'
-                            //                 components={[
-                            //                     <a
-                            //                         key={0}
-                            //                         href='https://ewallet.exchange'
-                            //                         rel='noopener noreferrer'
-                            //                         target='_blank'
-                            //                         className='link'
-                            //                     />,
-                            //                 ]}
-                            //             />
-                            //         </Text>
-                            //     ) : undefined
-                            // }
                         />
                     </DesktopWrapper>
                     <MobileWrapper>
@@ -247,7 +244,7 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier
                                 <selected_route.component
                                     component_icon={selected_route.icon_component}
                                     history={history}
-                                    menu_options={getMenuOptions()}
+                                    menu_options={getMenuOptions}
                                 />
                             )}
                         </Div100vhContainer>
diff --git a/packages/cashier/src/modules/deposit-crypto/components/deposit-crypto-side-notes/deposit-crypto-side-note-try-fiat-onramp.tsx b/packages/cashier/src/modules/deposit-crypto/components/deposit-crypto-side-notes/deposit-crypto-side-note-try-fiat-onramp.tsx
index cc49731d20bc..ac624fedf6c6 100644
--- a/packages/cashier/src/modules/deposit-crypto/components/deposit-crypto-side-notes/deposit-crypto-side-note-try-fiat-onramp.tsx
+++ b/packages/cashier/src/modules/deposit-crypto/components/deposit-crypto-side-notes/deposit-crypto-side-note-try-fiat-onramp.tsx
@@ -1,13 +1,14 @@
 import React from 'react';
 import { SideNote } from '@deriv/components';
 import { Localize } from '@deriv/translations';
+import { Link } from 'react-router-dom';
 
 const DepositCryptoSideNoteTryFiatOnRamp: React.FC = () => (
     <SideNote
         description={
             <Localize
                 i18n_default_text='Looking for a way to buy cryptocurrencies? <0>Try Fiat onramp</0>.'
-                components={[<a key={0} className='link link--orange' href={'/cashier/on-ramp'} />]}
+                components={[<Link key={0} className='link link--orange' to={'/cashier/on-ramp'} />]}
             />
         }
     />
diff --git a/packages/cashier/src/pages/withdrawal/withdrawal.tsx b/packages/cashier/src/pages/withdrawal/withdrawal.tsx
index 6613f1c79455..396f933e5b77 100644
--- a/packages/cashier/src/pages/withdrawal/withdrawal.tsx
+++ b/packages/cashier/src/pages/withdrawal/withdrawal.tsx
@@ -65,6 +65,7 @@ const Withdrawal = observer(() => {
         balance,
         is_switching,
         verification_code: { payment_withdraw: verification_code },
+        setVerificationCode,
     } = client;
     const { withdraw, transaction_history } = useCashierStore();
     const { is_crypto_transactions_visible } = transaction_history;
@@ -88,6 +89,10 @@ const Withdrawal = observer(() => {
         check10kLimit();
     }, [check10kLimit]);
 
+    React.useEffect(() => {
+        return () => setVerificationCode('', 'payment_withdraw');
+    }, [setVerificationCode]);
+
     React.useEffect(() => {
         return () => willMountWithdraw(verification_code);
         // eslint-disable-next-line react-hooks/exhaustive-deps
diff --git a/packages/cashier/src/stores/general-store.ts b/packages/cashier/src/stores/general-store.ts
index 323ba213f9b0..8b01290561e8 100644
--- a/packages/cashier/src/stores/general-store.ts
+++ b/packages/cashier/src/stores/general-store.ts
@@ -48,8 +48,13 @@ export default class GeneralStore extends BaseStore {
         );
     }
 
-    active_container: 'account_transfer' | 'deposit' | 'payment_agent' | 'payment_agent_transfer' | 'withdraw' =
-        'deposit';
+    active_container:
+        | 'account_transfer'
+        | 'deposit'
+        | 'payment_agent'
+        | 'payment_agent_transfer'
+        | 'withdraw'
+        | 'onramp' = 'deposit';
     cashier_route_tab_index = 0;
     deposit_target: '/cashier/deposit' | '/cashier/on-ramp' | '/cashier/p2p' | '/cashier/payment-agent' | '' = '';
     is_cashier_onboarding = true;
diff --git a/packages/cashier/src/stores/withdraw-store.ts b/packages/cashier/src/stores/withdraw-store.ts
index 45d3abba57ca..6e9b1bec61af 100644
--- a/packages/cashier/src/stores/withdraw-store.ts
+++ b/packages/cashier/src/stores/withdraw-store.ts
@@ -194,9 +194,7 @@ export default class WithdrawStore {
             return;
         }
 
-        const response_cashier = await this.WS.authorized.cashier(active_container as 'deposit' | 'withdraw', {
-            verification_code,
-        });
+        const response_cashier = await this.WS.authorized.cashier('withdraw', { verification_code });
 
         // if tab changed while waiting for response, ignore it
         if (current_container !== active_container) {
diff --git a/packages/components/src/components/vertical-tab/vertical-tab.tsx b/packages/components/src/components/vertical-tab/vertical-tab.tsx
index c134f0523eec..14722e85f493 100644
--- a/packages/components/src/components/vertical-tab/vertical-tab.tsx
+++ b/packages/components/src/components/vertical-tab/vertical-tab.tsx
@@ -160,7 +160,7 @@ const VerticalTab = ({
                         is_routed={is_routed}
                         header_title={header_title}
                     />
-                    {is_floating && tab_headers_note && list[curr_tab_index].has_side_note && (
+                    {is_floating && tab_headers_note && list[curr_tab_index]?.has_side_note && (
                         <div className='dc-vertical-tab__tab-bottom-note'>{tab_headers_note}</div>
                     )}
                     {extra_content}