diff --git a/packages/cashier/src/components/cashier-locked/cashier-locked-provider.tsx b/packages/cashier/src/components/cashier-locked/cashier-locked-provider.tsx
new file mode 100644
index 000000000000..fee9c4ae026b
--- /dev/null
+++ b/packages/cashier/src/components/cashier-locked/cashier-locked-provider.tsx
@@ -0,0 +1,375 @@
+import React from 'react';
+import { Localize, localize } from '@deriv/translations';
+import { formatDate } from '@deriv/shared';
+import { TEmptyStateProps } from 'Components/empty-state/empty-state';
+
+type TProps = {
+    cashier_validation: string[] | undefined;
+    is_crypto: boolean;
+    is_system_maintenance: boolean;
+    is_cashier_locked: boolean;
+    is_deposit_locked: boolean;
+    is_withdrawal_locked: boolean;
+    is_identity_verification_needed: boolean;
+    excluded_until: number | undefined;
+};
+
+const getMessage = ({
+    cashier_validation,
+    is_crypto,
+    is_system_maintenance,
+    is_cashier_locked,
+    is_deposit_locked,
+    is_withdrawal_locked,
+    is_identity_verification_needed,
+    excluded_until,
+}: TProps): TEmptyStateProps => {
+    const no_residence = cashier_validation?.includes('no_residence');
+    const unwelcome_status = cashier_validation?.includes('unwelcome_status');
+    const self_exclusion = cashier_validation?.includes('SelfExclusion');
+    const no_withdrawal_or_trading_status = cashier_validation?.includes('no_withdrawal_or_trading_status');
+    const only_pa_withdrawals_allowed_status = cashier_validation?.includes('only_pa_withdrawals_allowed_status');
+    const withdraw_service_unavailable_for_pa = cashier_validation?.includes('WithdrawServiceUnavailableForPA');
+    const withdrawal_locked_status = cashier_validation?.includes('withdrawal_locked_status');
+    const documents_expired = cashier_validation?.includes('documents_expired');
+    const cashier_locked_status = cashier_validation?.includes('cashier_locked_status');
+    const disabled_status = cashier_validation?.includes('disabled_status');
+    const financial_assessment_required = cashier_validation?.includes('FinancialAssessmentRequired');
+    const ask_currency = cashier_validation?.includes('ASK_CURRENCY');
+    const ask_authenticate = cashier_validation?.includes('ASK_AUTHENTICATE');
+    const ask_financial_risk_approval = cashier_validation?.includes('ASK_FINANCIAL_RISK_APPROVAL');
+    const ask_tin_information = cashier_validation?.includes('ASK_TIN_INFORMATION');
+    const ask_self_exclusion_max_turnover_set = cashier_validation?.includes('ASK_SELF_EXCLUSION_MAX_TURNOVER_SET');
+    const ask_fix_details = cashier_validation?.includes('ASK_FIX_DETAILS');
+    const ask_uk_funds_protection = cashier_validation?.includes('ASK_UK_FUNDS_PROTECTION');
+    const pa_commision_withdrawal_limit = cashier_validation?.includes('PACommisionWithdrawalLimit');
+
+    if (is_system_maintenance) {
+        if (is_crypto && is_withdrawal_locked)
+            return {
+                icon: 'IcCashierLocked',
+                title: localize('Withdrawals are locked'),
+                description: localize(
+                    'Withdrawals are temporarily unavailable due to system maintenance. You can make your withdrawals when the maintenance is complete.'
+                ),
+            };
+        if (is_crypto && is_deposit_locked)
+            return {
+                icon: 'IcCashierLocked',
+                title: localize('Cashier is locked'),
+                description: localize(
+                    'Deposits are temporarily unavailable due to system maintenance. You can make your deposits when the maintenance is complete.'
+                ),
+            };
+        if (is_crypto)
+            return {
+                icon: 'IcCashierLocked',
+                title: localize('Cashier is locked'),
+                description: localize(
+                    'Our cryptocurrency cashier is temporarily down due to system maintenance. You can access the Cashier in a few minutes when the maintenance is complete.'
+                ),
+            };
+        return {
+            icon: 'IcCashierLocked',
+            title: localize('Cashier is locked'),
+            description: localize(
+                'Our cashier is temporarily down due to system maintenance. You can access the Cashier in a few minutes when the maintenance is complete.'
+            ),
+        };
+    }
+
+    if (is_cashier_locked) {
+        if (no_residence)
+            return {
+                icon: 'IcCashierLocked',
+                title: localize('Cashier is locked'),
+                description: localize(
+                    'You’ve not set your country of residence. To access Cashier, please update your country of residence in the Personal details section in your account settings.'
+                ),
+            };
+        if (documents_expired)
+            return {
+                icon: 'IcCashierLocked',
+                title: localize('Cashier is locked'),
+                description: localize(
+                    'The identification documents you submitted have expired. Please submit valid identity documents to unlock Cashier. '
+                ),
+            };
+        if (cashier_locked_status)
+            return {
+                icon: 'IcCashierLocked',
+                title: localize('Cashier is locked'),
+                description: localize(
+                    'Your cashier is currently locked. Please contact us via live chat to find out how to unlock it.'
+                ),
+            };
+        if (disabled_status)
+            return {
+                icon: 'IcCashierLocked',
+                title: localize('Cashier is locked'),
+                description: localize(
+                    'Your account is temporarily disabled. Please contact us via live chat to enable deposits and withdrawals again.'
+                ),
+            };
+        if (ask_currency)
+            return {
+                icon: 'IcCashierLocked',
+                title: localize('Cashier is locked'),
+                description: localize('Please set your account currency to enable deposits and withdrawals.'),
+            };
+        if (ask_authenticate && is_identity_verification_needed)
+            return {
+                icon: 'IcCashierLocked',
+                title: localize('Cashier is locked'),
+                description: (
+                    <Localize
+                        i18n_default_text='Please submit your <0>proof of identity</0> to authenticate your account and access your Cashier.'
+                        components={[<a key={0} className='link' href={'/account/proof-of-identity'} />]}
+                    />
+                ),
+            };
+        if (ask_authenticate)
+            return {
+                icon: 'IcCashierLocked',
+                title: localize('Cashier is locked'),
+                description: (
+                    <Localize
+                        i18n_default_text='Your account has not been authenticated. Please submit your <0>proof of identity</0> and <1>proof of address</1> to authenticate your account and access your cashier.'
+                        components={[
+                            <a
+                                key={0}
+                                className='link'
+                                rel='noopener noreferrer'
+                                href={'/account/proof-of-identity'}
+                            />,
+                            <a key={1} className='link' rel='noopener noreferrer' href={'/account/proof-of-address'} />,
+                        ]}
+                    />
+                ),
+            };
+        if (ask_financial_risk_approval)
+            return {
+                icon: 'IcCashierLocked',
+                title: localize('Cashier is locked'),
+                description: (
+                    <Localize
+                        i18n_default_text='Please complete the <0>Appropriateness Test</0> to access your cashier.'
+                        components={[
+                            <a
+                                key={0}
+                                className='link'
+                                rel='noopener noreferrer'
+                                href={'/account/financial-assessment'}
+                                data-testid='dt_financial_assessment_link'
+                            />,
+                        ]}
+                    />
+                ),
+            };
+        if (financial_assessment_required)
+            return {
+                icon: 'IcCashierLocked',
+                title: localize('Cashier is locked'),
+                description: (
+                    <Localize
+                        i18n_default_text='Your cashier is locked. Please complete the <0>financial assessment</0> to unlock it.'
+                        components={[
+                            <a
+                                key={0}
+                                className='link'
+                                rel='noopener noreferrer'
+                                href={'/account/financial-assessment'}
+                                data-testid='dt_financial_assessment_link'
+                            />,
+                        ]}
+                    />
+                ),
+            };
+        if (ask_tin_information)
+            return {
+                icon: 'IcCashierLocked',
+                title: localize('Cashier is locked'),
+                description: (
+                    <Localize
+                        i18n_default_text='You have not provided your tax identification number. This information is necessary for legal and regulatory requirements. Please go to <0>Personal details</0> in your account settings, and fill in your latest tax identification number.'
+                        components={[
+                            <a key={0} className='link' rel='noopener noreferrer' href={'/account/personal-details'} />,
+                        ]}
+                    />
+                ),
+            };
+        if (ask_uk_funds_protection)
+            return {
+                icon: 'IcCashierLocked',
+                title: localize('Cashier is locked'),
+                description: (
+                    <Localize
+                        i18n_default_text='Your cashier is locked. See <0>how we protect your funds</0> before you proceed.'
+                        components={[
+                            <a key={0} className='link' rel='noopener noreferrer' href={'/cashier/deposit'} />,
+                        ]}
+                    />
+                ),
+            };
+        if (ask_self_exclusion_max_turnover_set)
+            return {
+                icon: 'IcCashierLocked',
+                title: localize('Cashier is locked'),
+                description: (
+                    <Localize
+                        i18n_default_text='Your access to Cashier has been temporarily disabled as you have not set your 30-day turnover limit. Please go to <0>Self-exclusion</0> and set your 30-day turnover limit.'
+                        components={[
+                            <a key={0} className='link' rel='noopener noreferrer' href={'/account/self-exclusion'} />,
+                        ]}
+                    />
+                ),
+            };
+        if (ask_fix_details)
+            return {
+                icon: 'IcCashierLocked',
+                title: localize('Cashier is locked'),
+                description: (
+                    <Localize
+                        i18n_default_text='Your <0>personal details</0> are incomplete. Please go to your account settings and complete your personal details to enable deposits and withdrawals.'
+                        components={[
+                            <a key={0} className='link' rel='noopener noreferrer' href={'/account/personal-details'} />,
+                        ]}
+                    />
+                ),
+            };
+    }
+
+    if (is_deposit_locked) {
+        if (ask_fix_details)
+            return {
+                icon: 'IcCashierDepositLock',
+                title: localize('Deposits are locked'),
+                description: (
+                    <Localize
+                        i18n_default_text='Your <0>personal details</0> are incomplete. Please go to your account settings and complete your personal details to enable deposits.'
+                        components={[
+                            <a key={0} className='link' rel='noopener noreferrer' href={'/account/personal-details'} />,
+                        ]}
+                    />
+                ),
+            };
+        if (self_exclusion)
+            return {
+                icon: 'IcCashierDepositLock',
+                title: localize('Deposits are locked'),
+                description: localize(
+                    'You have chosen to exclude yourself from trading on our website until {{exclude_until}}. If you are unable to place a trade or deposit after your self-exclusion period, please contact us via live chat.',
+                    {
+                        exclude_until: formatDate(excluded_until, 'DD MMM, YYYY'),
+                    }
+                ),
+            };
+        if (unwelcome_status)
+            return {
+                icon: 'IcCashierDepositLock',
+                title: localize('Deposits are locked'),
+                description: localize('Please contact us via live chat.'),
+            };
+    }
+
+    if (is_withdrawal_locked) {
+        if (financial_assessment_required)
+            return {
+                icon: 'IcCashierWithdrawalLock',
+                title: localize('Withdrawals are locked'),
+                description: (
+                    <Localize
+                        i18n_default_text='You can only make deposits. Please complete the <0>financial assessment</0> to unlock withdrawals.'
+                        components={[
+                            <a
+                                key={0}
+                                className='link'
+                                href={'/account/financial-assessment'}
+                                data-testid='dt_financial_assessment_link'
+                            />,
+                        ]}
+                    />
+                ),
+            };
+        if (ask_authenticate)
+            return {
+                icon: 'IcCashierWithdrawalLock',
+                title: localize('Withdrawals are locked'),
+                description: (
+                    <Localize
+                        i18n_default_text='Your account has not been authenticated. Please submit your <0>proof of identity</0> and <1>proof of address</1> to authenticate your account and request for withdrawals.'
+                        components={[
+                            <a
+                                key={0}
+                                className='link'
+                                rel='noopener noreferrer'
+                                href={'/account/proof-of-identity'}
+                            />,
+                            <a key={1} className='link' rel='noopener noreferrer' href={'/account/proof-of-address'} />,
+                        ]}
+                    />
+                ),
+            };
+        if (ask_fix_details)
+            return {
+                icon: 'IcCashierWithdrawalLock',
+                title: localize('Withdrawals are locked'),
+                description: (
+                    <Localize
+                        i18n_default_text='Your <0>personal details</0> are incomplete. Please go to your account settings and complete your personal details to enable withdrawals.'
+                        components={[
+                            <a key={0} className='link' rel='noopener noreferrer' href={'/account/personal-details'} />,
+                        ]}
+                    />
+                ),
+            };
+        if (withdraw_service_unavailable_for_pa)
+            return {
+                icon: 'IcCashierWithdrawalLock',
+                title: localize('Withdrawals are locked'),
+                description: localize('This feature is not available for payment agents.'),
+            };
+        if (no_withdrawal_or_trading_status)
+            return {
+                icon: 'IcCashierWithdrawalLock',
+                title: localize('Withdrawals are locked'),
+                description: localize(
+                    'Unfortunately, you can only make deposits. Please contact us via live chat to enable withdrawals.'
+                ),
+            };
+        if (withdrawal_locked_status)
+            return {
+                icon: 'IcCashierWithdrawalLock',
+                title: localize('Withdrawals are locked'),
+                description: localize(
+                    'Unfortunately, you can only make deposits. Please contact us via live chat to enable withdrawals.'
+                ),
+            };
+        if (only_pa_withdrawals_allowed_status)
+            return {
+                icon: 'IcCashierWithdrawalLock',
+                title: localize('Withdrawals are locked'),
+                description: localize(
+                    'You can only make deposits. Please contact us via live chat for more information.'
+                ),
+            };
+        if (pa_commision_withdrawal_limit)
+            return {
+                icon: 'IcCashierWithdrawalLock',
+                title: localize('Cashier is locked for withdrawals'),
+                description: localize(
+                    "It seems that you've no commissions to withdraw at the moment. You can make withdrawals once you receive your commissions."
+                ),
+            };
+    }
+
+    return {
+        icon: 'IcCashierLocked',
+        title: localize('Cashier is locked'),
+        description: localize(
+            'Your cashier is currently locked. Please contact us via live chat to find out how to unlock it.'
+        ),
+    };
+};
+
+export default getMessage;
diff --git a/packages/cashier/src/components/cashier-locked/cashier-locked.tsx b/packages/cashier/src/components/cashier-locked/cashier-locked.tsx
index 01f4b193b38f..3efd6185cf9a 100644
--- a/packages/cashier/src/components/cashier-locked/cashier-locked.tsx
+++ b/packages/cashier/src/components/cashier-locked/cashier-locked.tsx
@@ -1,14 +1,13 @@
 import React from 'react';
-import { GetAccountStatus, Authorize } from '@deriv/api-types';
-import { Icon, Text } from '@deriv/components';
-import { localize, Localize } from '@deriv/translations';
-import { formatDate } from '@deriv/shared';
+import { Authorize, GetAccountStatus } from '@deriv/api-types';
 import { connect } from 'Stores/connect';
+import EmptyState from 'Components/empty-state';
+import getMessage from './cashier-locked-provider';
 import { TRootStore } from 'Types';
 
 type TAccount = NonNullable<Authorize['account_list']>[0];
 
-type TCashierLockedProps = {
+type TProps = {
     account_status: GetAccountStatus;
     accounts: { [k: string]: TAccount };
     current_currency_type: string;
@@ -30,266 +29,19 @@ const CashierLocked = ({
     is_withdrawal_locked,
     loginid,
     is_identity_verification_needed,
-}: TCashierLockedProps) => {
-    const { cashier_validation } = account_status;
-    const no_residence = cashier_validation?.includes('no_residence');
-    const unwelcome_status = cashier_validation?.includes('unwelcome_status');
-    const self_exclusion = cashier_validation?.includes('SelfExclusion');
-    const no_withdrawal_or_trading_status = cashier_validation?.includes('no_withdrawal_or_trading_status');
-    const only_pa_withdrawals_allowed_status = cashier_validation?.includes('only_pa_withdrawals_allowed_status');
-    const withdraw_service_unavailable_for_pa = cashier_validation?.includes('WithdrawServiceUnavailableForPA');
-    const withdrawal_locked_status = cashier_validation?.includes('withdrawal_locked_status');
-    const documents_expired = cashier_validation?.includes('documents_expired');
-    const cashier_locked_status = cashier_validation?.includes('cashier_locked_status');
-    const disabled_status = cashier_validation?.includes('disabled_status');
-    const financial_assessment_required = cashier_validation?.includes('FinancialAssessmentRequired');
-    const ask_currency = cashier_validation?.includes('ASK_CURRENCY');
-    const ask_authenticate = cashier_validation?.includes('ASK_AUTHENTICATE');
-    const ask_financial_risk_approval = cashier_validation?.includes('ASK_FINANCIAL_RISK_APPROVAL');
-    const ask_tin_information = cashier_validation?.includes('ASK_TIN_INFORMATION');
-    const ask_self_exclusion_max_turnover_set = cashier_validation?.includes('ASK_SELF_EXCLUSION_MAX_TURNOVER_SET');
-    const ask_fix_details = cashier_validation?.includes('ASK_FIX_DETAILS');
-    const ask_uk_funds_protection = cashier_validation?.includes('ASK_UK_FUNDS_PROTECTION');
-    const pa_commision_withdrawal_limit = cashier_validation?.includes('PACommisionWithdrawalLimit');
+}: TProps) => {
+    const state = getMessage({
+        cashier_validation: account_status.cashier_validation,
+        is_crypto: current_currency_type === 'crypto',
+        is_system_maintenance,
+        is_cashier_locked,
+        is_deposit_locked,
+        is_withdrawal_locked,
+        is_identity_verification_needed,
+        excluded_until: accounts ? accounts[loginid]?.excluded_until : undefined,
+    });
 
-    let icon = 'IcCashierLocked';
-    let title = localize('Cashier is locked');
-    let message: string | JSX.Element = localize(
-        'Your cashier is currently locked. Please contact us via live chat to find out how to unlock it.'
-    );
-
-    if (is_system_maintenance) {
-        if (current_currency_type === 'crypto') {
-            if (is_withdrawal_locked) {
-                title = localize('Withdrawals are locked');
-                message = localize(
-                    'Withdrawals are temporarily unavailable due to system maintenance. You can make your withdrawals when the maintenance is complete.'
-                );
-            } else if (is_deposit_locked) {
-                title = 'Deposits are locked';
-                message = localize(
-                    'Deposits are temporarily unavailable due to system maintenance. You can make your deposits when the maintenance is complete.'
-                );
-            } else {
-                message = localize(
-                    'Our cryptocurrency cashier is temporarily down due to system maintenance. You can access the Cashier in a few minutes when the maintenance is complete.'
-                );
-            }
-        } else {
-            message = localize(
-                'Our cashier is temporarily down due to system maintenance. You can access the Cashier in a few minutes when the maintenance is complete.'
-            );
-        }
-    } else if (is_cashier_locked) {
-        if (no_residence) {
-            message = localize(
-                'You’ve not set your country of residence. To access Cashier, please update your country of residence in the Personal details section in your account settings.'
-            );
-        } else if (documents_expired) {
-            message = localize(
-                'The identification documents you submitted have expired. Please submit valid identity documents to unlock Cashier. '
-            );
-        } else if (cashier_locked_status) {
-            message = localize(
-                'Your cashier is currently locked. Please contact us via live chat to find out how to unlock it.'
-            );
-        } else if (disabled_status) {
-            message = localize(
-                'Your account is temporarily disabled. Please contact us via live chat to enable deposits and withdrawals again.'
-            );
-        } else if (ask_currency) {
-            message = localize('Please set your account currency to enable deposits and withdrawals.');
-        } else if (ask_authenticate) {
-            if (is_identity_verification_needed) {
-                message = (
-                    <Localize
-                        i18n_default_text='Please submit your <0>proof of identity</0> to authenticate your account and access your Cashier.'
-                        components={[<a key={0} className='link' href={'/account/proof-of-identity'} />]}
-                    />
-                );
-            } else {
-                message = (
-                    <Localize
-                        i18n_default_text='Your account has not been authenticated. Please submit your <0>proof of identity</0> and <1>proof of address</1> to authenticate your account and access your cashier.'
-                        components={[
-                            <a
-                                key={0}
-                                className='link'
-                                rel='noopener noreferrer'
-                                href={'/account/proof-of-identity'}
-                            />,
-                            <a key={1} className='link' rel='noopener noreferrer' href={'/account/proof-of-address'} />,
-                        ]}
-                    />
-                );
-            }
-        } else if (ask_financial_risk_approval) {
-            message = (
-                <Localize
-                    i18n_default_text='Please complete the <0>Appropriateness Test</0> to access your cashier.'
-                    components={[
-                        <a
-                            key={0}
-                            className='link'
-                            rel='noopener noreferrer'
-                            href={'/account/financial-assessment'}
-                            data-testid='dt_financial_assessment_link'
-                        />,
-                    ]}
-                />
-            );
-        } else if (financial_assessment_required) {
-            message = (
-                <Localize
-                    i18n_default_text='Your cashier is locked. Please complete the <0>financial assessment</0> to unlock it.'
-                    components={[
-                        <a
-                            key={0}
-                            className='link'
-                            rel='noopener noreferrer'
-                            href={'/account/financial-assessment'}
-                            data-testid='dt_financial_assessment_link'
-                        />,
-                    ]}
-                />
-            );
-        } else if (ask_tin_information) {
-            message = (
-                <Localize
-                    i18n_default_text='You have not provided your tax identification number. This information is necessary for legal and regulatory requirements. Please go to <0>Personal details</0> in your account settings, and fill in your latest tax identification number.'
-                    components={[
-                        <a key={0} className='link' rel='noopener noreferrer' href={'/account/personal-details'} />,
-                    ]}
-                />
-            );
-        } else if (ask_uk_funds_protection) {
-            message = (
-                <Localize
-                    i18n_default_text='Your cashier is locked. See <0>how we protect your funds</0> before you proceed.'
-                    components={[<a key={0} className='link' rel='noopener noreferrer' href={'/cashier/deposit'} />]}
-                />
-            );
-        } else if (ask_self_exclusion_max_turnover_set) {
-            message = (
-                <Localize
-                    i18n_default_text='Your access to Cashier has been temporarily disabled as you have not set your 30-day turnover limit. Please go to <0>Self-exclusion</0> and set your 30-day turnover limit.'
-                    components={[
-                        <a key={0} className='link' rel='noopener noreferrer' href={'/account/self-exclusion'} />,
-                    ]}
-                />
-            );
-        } else if (ask_fix_details) {
-            message = (
-                <Localize
-                    i18n_default_text='Your <0>personal details</0> are incomplete. Please go to your account settings and complete your personal details to enable deposits and withdrawals.'
-                    components={[
-                        <a key={0} className='link' rel='noopener noreferrer' href={'/account/personal-details'} />,
-                    ]}
-                />
-            );
-        }
-    } else if (is_deposit_locked && ask_fix_details) {
-        icon = 'IcCashierDepositLock';
-        title = localize('Deposits are locked');
-        message = (
-            <Localize
-                i18n_default_text='Your <0>personal details</0> are incomplete. Please go to your account settings and complete your personal details to enable deposits.'
-                components={[
-                    <a key={0} className='link' rel='noopener noreferrer' href={'/account/personal-details'} />,
-                ]}
-            />
-        );
-    } else if (is_deposit_locked && self_exclusion) {
-        icon = 'IcCashierDepositLock';
-        title = localize('Deposits are locked');
-        message = localize(
-            'You have chosen to exclude yourself from trading on our website until {{exclude_until}}. If you are unable to place a trade or deposit after your self-exclusion period, please contact us via live chat.',
-            {
-                exclude_until: formatDate(accounts[loginid].excluded_until, 'DD MMM, YYYY'),
-            }
-        );
-    } else if (is_deposit_locked && unwelcome_status) {
-        icon = 'IcCashierDepositLock';
-        title = localize('Deposits are locked');
-        message = localize('Please contact us via live chat.');
-    } else if (is_withdrawal_locked && financial_assessment_required) {
-        icon = 'IcCashierWithdrawalLock';
-        title = localize('Withdrawals are locked');
-        message = (
-            <Localize
-                i18n_default_text='You can only make deposits. Please complete the <0>financial assessment</0> to unlock withdrawals.'
-                components={[
-                    <a
-                        key={0}
-                        className='link'
-                        href={'/account/financial-assessment'}
-                        data-testid='dt_financial_assessment_link'
-                    />,
-                ]}
-            />
-        );
-    } else if (is_withdrawal_locked && ask_authenticate) {
-        icon = 'IcCashierWithdrawalLock';
-        title = localize('Withdrawals are locked');
-        message = (
-            <Localize
-                i18n_default_text='Your account has not been authenticated. Please submit your <0>proof of identity</0> and <1>proof of address</1> to authenticate your account and request for withdrawals.'
-                components={[
-                    <a key={0} className='link' rel='noopener noreferrer' href={'/account/proof-of-identity'} />,
-                    <a key={1} className='link' rel='noopener noreferrer' href={'/account/proof-of-address'} />,
-                ]}
-            />
-        );
-    } else if (is_withdrawal_locked && ask_fix_details) {
-        icon = 'IcCashierWithdrawalLock';
-        title = localize('Withdrawals are locked');
-        message = (
-            <Localize
-                i18n_default_text='Your <0>personal details</0> are incomplete. Please go to your account settings and complete your personal details to enable withdrawals.'
-                components={[
-                    <a key={0} className='link' rel='noopener noreferrer' href={'/account/personal-details'} />,
-                ]}
-            />
-        );
-    } else if (is_withdrawal_locked && withdraw_service_unavailable_for_pa) {
-        icon = 'IcCashierWithdrawalLock';
-        title = localize('Withdrawals are locked');
-        message = localize('This feature is not available for payment agents.');
-    } else if (is_withdrawal_locked && no_withdrawal_or_trading_status) {
-        icon = 'IcCashierWithdrawalLock';
-        title = localize('Withdrawals are locked');
-        message = localize(
-            'Unfortunately, you can only make deposits. Please contact us via live chat to enable withdrawals.'
-        );
-    } else if (is_withdrawal_locked && withdrawal_locked_status) {
-        icon = 'IcCashierWithdrawalLock';
-        title = localize('Withdrawals are locked');
-        message = localize(
-            'Unfortunately, you can only make deposits. Please contact us via live chat to enable withdrawals.'
-        );
-    } else if (is_withdrawal_locked && only_pa_withdrawals_allowed_status) {
-        icon = 'IcCashierWithdrawalLock';
-        title = localize('Withdrawals are locked');
-        message = localize('You can only make deposits. Please contact us via live chat for more information.');
-    } else if (is_withdrawal_locked && pa_commision_withdrawal_limit) {
-        icon = 'IcCashierWithdrawalLock';
-        title = localize('Cashier is locked for withdrawals');
-        message = localize(
-            "It seems that you've no commissions to withdraw at the moment. You can make withdrawals once you receive your commissions."
-        );
-    }
-
-    return (
-        <div className='cashier-locked'>
-            <Icon icon={icon} className='cashier-locked__icon' />
-            <Text as='h2' weight='bold' align='center' className='cashier-locked__title'>
-                {title}
-            </Text>
-            <Text as='p' size='xs' align='center' className='cashier-locked__desc'>
-                {message}
-            </Text>
-        </div>
-    );
+    return <EmptyState icon={state.icon} title={state.title} description={state.description} />;
 };
 
 export default connect(({ client, modules }: TRootStore) => ({
diff --git a/packages/cashier/src/components/empty-state/empty-state.scss b/packages/cashier/src/components/empty-state/empty-state.scss
new file mode 100644
index 000000000000..78db55602c46
--- /dev/null
+++ b/packages/cashier/src/components/empty-state/empty-state.scss
@@ -0,0 +1,32 @@
+.cashier-empty-state {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    max-width: 67.2rem;
+    margin: 4rem auto 0;
+
+    &__icon {
+        width: 12.8rem;
+        height: 12.8rem;
+        margin-bottom: 2.4rem;
+    }
+
+    &__title {
+        margin-bottom: 0.8rem;
+
+        @include mobile {
+            margin-left: 1.2rem;
+            margin-right: 1.2rem;
+        }
+    }
+
+    &__desc {
+        margin-bottom: 3.2rem;
+
+        @include mobile {
+            padding: 0 1rem;
+        }
+    }
+}
diff --git a/packages/cashier/src/components/empty-state/empty-state.tsx b/packages/cashier/src/components/empty-state/empty-state.tsx
new file mode 100644
index 000000000000..08c850b565f4
--- /dev/null
+++ b/packages/cashier/src/components/empty-state/empty-state.tsx
@@ -0,0 +1,23 @@
+import { Icon, Text } from '@deriv/components';
+import React from 'react';
+import './empty-state.scss';
+
+export type TEmptyStateProps = {
+    icon: string;
+    title: string | React.ReactNode;
+    description: string | React.ReactNode;
+};
+
+const EmptyState = ({ icon, title, description }: TEmptyStateProps) => (
+    <div className='cashier-empty-state'>
+        <Icon icon={icon} className='cashier-empty-state__icon' />
+        <Text as='h2' weight='bold' align='center' className='cashier-empty-state__title'>
+            {title}
+        </Text>
+        <Text as='p' size='xs' align='center' className='cashier-empty-state__desc'>
+            {description}
+        </Text>
+    </div>
+);
+
+export default EmptyState;
diff --git a/packages/cashier/src/components/empty-state/index.ts b/packages/cashier/src/components/empty-state/index.ts
new file mode 100644
index 000000000000..5923bfc4525d
--- /dev/null
+++ b/packages/cashier/src/components/empty-state/index.ts
@@ -0,0 +1,3 @@
+import EmptyState from './empty-state';
+
+export default EmptyState;
diff --git a/packages/components/src/components/vertical-tab/vertical-tab-content-container.jsx b/packages/components/src/components/vertical-tab/vertical-tab-content-container.jsx
index c0bea8cd1a89..6ff505015c2d 100644
--- a/packages/components/src/components/vertical-tab/vertical-tab-content-container.jsx
+++ b/packages/components/src/components/vertical-tab/vertical-tab-content-container.jsx
@@ -7,7 +7,7 @@ import Icon from '../icon/icon.jsx';
 const SideNotes = ({ class_name, side_notes }) => {
     return (
         <div
-            className={classNames('dc-vertical-tab__content-side-note', class_name)}
+            className={classNames('dc-vertical-tab__content-side-note', { [class_name]: !!side_notes })}
             data-testid='vertical_tab_side_note'
         >
             {side_notes?.map((note, i) => (