diff --git a/packages/api/src/hooks/useCreateWallet.ts b/packages/api/src/hooks/useCreateWallet.ts
index fac644937d36..2a2330e505bc 100644
--- a/packages/api/src/hooks/useCreateWallet.ts
+++ b/packages/api/src/hooks/useCreateWallet.ts
@@ -1,10 +1,13 @@
 import { useMemo } from 'react';
 import useInvalidateQuery from '../useInvalidateQuery';
 import useMutation from '../useMutation';
+import useCurrencyConfig from './useCurrencyConfig';
+import { displayMoney } from '../utils';
 
 /** A custom hook to create new wallet account */
 const useCreateWallet = () => {
     const invalidate = useInvalidateQuery();
+    const { getConfig } = useCurrencyConfig();
     const {
         data,
         mutate: _mutate,
@@ -19,9 +22,15 @@ const useCreateWallet = () => {
 
     const modified_data = useMemo(() => {
         if (!data?.new_account_wallet) return;
-
-        return data.new_account_wallet;
-    }, [data?.new_account_wallet]);
+        const currencyConfig = getConfig(data?.new_account_wallet.currency || 'USD');
+        return {
+            ...data.new_account_wallet,
+            /** The balance of the account in currency format. */
+            display_balance: displayMoney(0, currencyConfig?.display_code || 'USD', {
+                fractional_digits: currencyConfig?.fractional_digits,
+            }),
+        };
+    }, [data?.new_account_wallet, getConfig]);
 
     return {
         /** New account information */
diff --git a/packages/wallets/src/components/DerivAppsSection/DerivAppsGetAccount.tsx b/packages/wallets/src/components/DerivAppsSection/DerivAppsGetAccount.tsx
index e22bbdb81494..e4067838de5f 100644
--- a/packages/wallets/src/components/DerivAppsSection/DerivAppsGetAccount.tsx
+++ b/packages/wallets/src/components/DerivAppsSection/DerivAppsGetAccount.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect } from 'react';
 import { useActiveWalletAccount, useCreateNewRealAccount, useSettings } from '@deriv/api';
 import { toMoment } from '../../../../shared/src/utils/date';
-import { Success } from '../../features/cfd/screens/Success';
+import { CFDSuccess } from '../../features/cfd/screens/CFDSuccess';
 import useDevice from '../../hooks/useDevice';
 import DerivApps from '../../public/images/deriv-apps.svg';
 import { ModalStepWrapper, WalletButton, WalletText } from '../Base';
@@ -25,7 +25,7 @@ const DerivAppsGetAccount: React.FC = () => {
                 renderFooter={isDesktop ? undefined : () => <DerivAppsSuccessFooter />}
                 shouldHideHeader={isDesktop}
             >
-                <Success
+                <CFDSuccess
                     description={`Transfer funds from ${activeWallet?.wallet_currency_type} Wallet to your Deriv Apps (${landingCompanyName}) account to start trading.`}
                     displayBalance={activeWallet?.display_balance}
                     renderButton={() => <DerivAppsSuccessFooter />}
diff --git a/packages/wallets/src/components/WalletAddedSuccess/WalletAddedSuccess.tsx b/packages/wallets/src/components/WalletAddedSuccess/WalletAddedSuccess.tsx
new file mode 100644
index 000000000000..00bcac52294a
--- /dev/null
+++ b/packages/wallets/src/components/WalletAddedSuccess/WalletAddedSuccess.tsx
@@ -0,0 +1,71 @@
+import React, { useCallback, useMemo } from 'react';
+import useDevice from '../../hooks/useDevice';
+import { THooks } from '../../types';
+import { ModalStepWrapper, ModalWrapper, WalletButton, WalletButtonGroup } from '../Base';
+import { WalletCard } from '../WalletCard';
+import { WalletSuccess } from '../WalletSuccess';
+
+type TWalletAddedSuccessProps = {
+    currency: THooks.CreateWallet['currency'];
+    displayBalance: THooks.CreateWallet['display_balance'];
+    landingCompany: THooks.CreateWallet['landing_company_shortcode'];
+    onPrimaryButtonClick: () => void;
+    onSecondaryButtonClick: () => void;
+};
+
+const WalletAddedSuccess: React.FC<TWalletAddedSuccessProps> = ({
+    currency,
+    displayBalance,
+    landingCompany,
+    onPrimaryButtonClick,
+    onSecondaryButtonClick,
+}) => {
+    const { isMobile } = useDevice();
+    const description = 'Make a deposit into your new Wallet.';
+    const title = useMemo(
+        () => `Your ${currency} wallet (${landingCompany?.toUpperCase()}) is ready`,
+        [currency, landingCompany]
+    );
+    const renderFooter = useCallback(
+        () => (
+            <div className='wallets-add-more__success-footer'>
+                <WalletButtonGroup isFlex>
+                    <WalletButton onClick={onSecondaryButtonClick} text='Maybe later' variant='outlined' />
+                    <WalletButton onClick={onPrimaryButtonClick} text='Deposit' />
+                </WalletButtonGroup>
+            </div>
+        ),
+        [onPrimaryButtonClick, onSecondaryButtonClick]
+    );
+    const renderIcon = useCallback(
+        () => (
+            <WalletCard
+                balance={displayBalance}
+                currency={currency || 'USD'}
+                landingCompanyName={landingCompany}
+                width='24rem'
+            />
+        ),
+        [currency, displayBalance, landingCompany]
+    );
+
+    if (isMobile)
+        return (
+            <ModalStepWrapper renderFooter={renderFooter} title=''>
+                <WalletSuccess description={description} renderIcon={renderIcon} title={title} />
+            </ModalStepWrapper>
+        );
+
+    return (
+        <ModalWrapper hideCloseButton>
+            <WalletSuccess
+                description={description}
+                renderButtons={renderFooter}
+                renderIcon={renderIcon}
+                title={title}
+            />
+        </ModalWrapper>
+    );
+};
+
+export default WalletAddedSuccess;
diff --git a/packages/wallets/src/components/WalletAddedSuccess/index.ts b/packages/wallets/src/components/WalletAddedSuccess/index.ts
new file mode 100644
index 000000000000..85de264cb460
--- /dev/null
+++ b/packages/wallets/src/components/WalletAddedSuccess/index.ts
@@ -0,0 +1 @@
+export { default as WalletAddedSuccess } from './WalletAddedSuccess';
diff --git a/packages/wallets/src/components/WalletCard/WalletCard.scss b/packages/wallets/src/components/WalletCard/WalletCard.scss
index c63359a62dc0..47a306cc21cf 100644
--- a/packages/wallets/src/components/WalletCard/WalletCard.scss
+++ b/packages/wallets/src/components/WalletCard/WalletCard.scss
@@ -15,7 +15,7 @@
     &__details {
         display: flex;
         padding: 0.8rem;
-        min-width: 44.44vw;
+        min-width: 16rem;
         flex-direction: column;
         justify-content: space-between;
         align-items: flex-start;
diff --git a/packages/wallets/src/components/WalletCard/WalletCard.tsx b/packages/wallets/src/components/WalletCard/WalletCard.tsx
index 5a2ca490eec7..ca7f758d18e2 100644
--- a/packages/wallets/src/components/WalletCard/WalletCard.tsx
+++ b/packages/wallets/src/components/WalletCard/WalletCard.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { useBalance } from '@deriv/api';
-import { THooks } from '../../types';
 import { WalletText } from '../Base';
 import { WalletCardIcon } from '../WalletCardIcon';
 import { WalletGradientBackground } from '../WalletGradientBackground';
@@ -8,41 +7,40 @@ import { WalletListCardBadge } from '../WalletListCardBadge';
 import './WalletCard.scss';
 
 type TProps = {
-    account: THooks.WalletAccountsList;
+    balance: string;
+    currency: string;
+    isDemo?: boolean;
+    landingCompanyName?: string;
+    width?: React.CSSProperties['width'];
 };
 
-const WalletCard: React.FC<TProps> = ({ account }) => {
+const WalletCard: React.FC<TProps> = ({ balance, currency, isDemo, landingCompanyName, width }) => {
     const { isLoading } = useBalance();
     return (
         <div className='wallets-card'>
             <WalletGradientBackground
-                currency={account?.wallet_currency_type || 'USD'}
+                currency={isDemo ? 'Demo' : currency}
                 device='mobile'
                 hasShine
-                isDemo={account?.is_virtual}
+                isDemo={isDemo}
                 type='card'
             >
-                <div className='wallets-card__details'>
+                <div className='wallets-card__details' style={{ width }}>
                     <div className='wallets-card__details__top'>
-                        <WalletCardIcon type={account?.wallet_currency_type} />
+                        <WalletCardIcon type={isDemo ? 'Demo' : currency} />
                         <div className='wallets-card__details-landing_company'>
-                            {account?.landing_company_name && (
-                                <WalletListCardBadge
-                                    isDemo={account?.is_virtual}
-                                    label={account?.landing_company_name}
-                                />
-                            )}
+                            {landingCompanyName && <WalletListCardBadge isDemo={isDemo} label={landingCompanyName} />}
                         </div>
                     </div>
                     <div className='wallets-card__details__bottom'>
-                        <WalletText color={account?.is_virtual ? 'white' : 'black'} size='2xs'>
-                            {account?.currency} Wallet
+                        <WalletText color={isDemo ? 'white' : 'black'} size='2xs'>
+                            {currency} Wallet
                         </WalletText>
                         {isLoading ? (
                             <div className='wallets-skeleton wallets-card--balance-loader' />
                         ) : (
-                            <WalletText color={account?.is_virtual ? 'white' : 'black'} size='sm' weight='bold'>
-                                {account?.display_balance}
+                            <WalletText color={isDemo ? 'white' : 'black'} size='sm' weight='bold'>
+                                {balance}
                             </WalletText>
                         )}
                     </div>
diff --git a/packages/wallets/src/components/WalletError/WalletError.scss b/packages/wallets/src/components/WalletError/WalletError.scss
index 759112aafaa8..e2c1bf621d7f 100644
--- a/packages/wallets/src/components/WalletError/WalletError.scss
+++ b/packages/wallets/src/components/WalletError/WalletError.scss
@@ -1,16 +1,13 @@
 .wallets-error {
     width: 47.6rem;
-    padding: 3rem;
+    padding: 2.4rem;
     border-radius: 0.4rem;
     background: #fff;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: 2.4rem;
-    flex-shrink: 0;
 
     @include mobile {
-        width: 90vw;
+        display: flex;
+        align-items: center;
+        width: 100%;
+        height: 100%;
     }
 }
diff --git a/packages/wallets/src/components/WalletError/WalletError.tsx b/packages/wallets/src/components/WalletError/WalletError.tsx
index 1a1393ece7d8..dfdab66a6c8b 100644
--- a/packages/wallets/src/components/WalletError/WalletError.tsx
+++ b/packages/wallets/src/components/WalletError/WalletError.tsx
@@ -1,7 +1,10 @@
 import React, { ComponentProps } from 'react';
+import useDevice from '../../hooks/useDevice';
 import ErrorIcon from '../../public/images/error-icon.svg';
+import { ModalStepWrapper } from '../Base';
 import WalletButton from '../Base/WalletButton/WalletButton';
 import WalletsActionScreen from '../WalletsActionScreen/WalletsActionScreen';
+import './WalletError.scss';
 
 type TProps = {
     buttonText?: string;
@@ -9,7 +12,6 @@ type TProps = {
     errorMessage: string;
     onClick?: () => void;
     title?: string;
-    type?: 'modal' | 'page';
 };
 
 const WalletError: React.FC<TProps> = ({
@@ -18,18 +20,28 @@ const WalletError: React.FC<TProps> = ({
     errorMessage,
     onClick,
     title,
-    type = 'page',
 }) => {
+    const { isDesktop, isMobile } = useDevice();
+
     return (
-        <WalletsActionScreen
-            actionText={buttonText}
-            actionVariant={buttonVariant}
-            description={errorMessage}
-            icon={<ErrorIcon />}
-            onAction={onClick}
-            title={title}
-            type={type}
-        />
+        <ModalStepWrapper shouldHideHeader={isDesktop}>
+            <div className='wallets-error'>
+                <WalletsActionScreen
+                    description={errorMessage}
+                    icon={<ErrorIcon />}
+                    renderButtons={() => (
+                        <WalletButton
+                            isFullWidth={isMobile}
+                            onClick={onClick}
+                            size='lg'
+                            text={buttonText}
+                            variant={buttonVariant}
+                        />
+                    )}
+                    title={title}
+                />
+            </div>
+        </ModalStepWrapper>
     );
 };
 
diff --git a/packages/wallets/src/components/WalletSuccess/WalletSuccess.scss b/packages/wallets/src/components/WalletSuccess/WalletSuccess.scss
new file mode 100644
index 000000000000..1f1cab1eae6b
--- /dev/null
+++ b/packages/wallets/src/components/WalletSuccess/WalletSuccess.scss
@@ -0,0 +1,16 @@
+.wallets-success {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 2.4rem;
+    width: 39.2rem;
+    border-radius: 1rem;
+    text-align: center;
+    background: var(--system-light-8-primary-background, #fff);
+
+    @include mobile {
+        width: 100%;
+        height: calc(100% - 8.5rem);
+    }
+}
diff --git a/packages/wallets/src/components/WalletSuccess/WalletSuccess.tsx b/packages/wallets/src/components/WalletSuccess/WalletSuccess.tsx
new file mode 100644
index 000000000000..3673251140af
--- /dev/null
+++ b/packages/wallets/src/components/WalletSuccess/WalletSuccess.tsx
@@ -0,0 +1,26 @@
+import React, { ComponentProps, ReactNode } from 'react';
+import WalletsActionScreen from '../WalletsActionScreen/WalletsActionScreen';
+import './WalletSuccess.scss';
+
+type TSuccessProps = {
+    description: string;
+    renderButtons?: ComponentProps<typeof WalletsActionScreen>['renderButtons'];
+    renderIcon: () => ReactNode;
+    title: string;
+};
+
+const WalletSuccess: React.FC<TSuccessProps> = ({ description, renderButtons, renderIcon, title }) => {
+    return (
+        <div className='wallets-success'>
+            <WalletsActionScreen
+                desciptionSize='sm'
+                description={description}
+                icon={renderIcon()}
+                renderButtons={renderButtons}
+                title={title}
+            />
+        </div>
+    );
+};
+
+export default WalletSuccess;
diff --git a/packages/wallets/src/components/WalletSuccess/__tests__/WalletSuccess.spec.tsx b/packages/wallets/src/components/WalletSuccess/__tests__/WalletSuccess.spec.tsx
new file mode 100644
index 000000000000..7b5e89550381
--- /dev/null
+++ b/packages/wallets/src/components/WalletSuccess/__tests__/WalletSuccess.spec.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import WalletSuccess from '../WalletSuccess';
+
+describe('<WalletSuccess />', () => {
+    it('should render with the info provided', () => {
+        render(
+            <WalletSuccess
+                description='Your new wallet account created'
+                renderIcon={() => <i data-testid='dt-success-icon'>Icon</i>}
+                title='Account created'
+            />
+        );
+
+        expect(screen.getByText('Your new wallet account created')).toBeInTheDocument();
+        expect(screen.getByText('Account created')).toBeInTheDocument();
+        expect(screen.getByTestId('dt-success-icon')).toBeInTheDocument();
+    });
+
+    it('should render with the buttons', () => {
+        const mockRenderButtons = jest.fn(() => <button data-testid='dt-button'>Button</button>);
+
+        render(
+            <WalletSuccess
+                description='Your new wallet account created'
+                renderButtons={mockRenderButtons}
+                renderIcon={() => <i data-testid='dt-success-icon'>Icon</i>}
+                title='Account created'
+            />
+        );
+
+        expect(mockRenderButtons).toHaveBeenCalled();
+        expect(screen.getByTestId('dt-button')).toBeInTheDocument();
+    });
+});
diff --git a/packages/wallets/src/components/WalletSuccess/index.ts b/packages/wallets/src/components/WalletSuccess/index.ts
new file mode 100644
index 000000000000..c398b012b146
--- /dev/null
+++ b/packages/wallets/src/components/WalletSuccess/index.ts
@@ -0,0 +1 @@
+export { default as WalletSuccess } from './WalletSuccess';
diff --git a/packages/wallets/src/components/WalletsActionScreen/WalletsActionScreen.scss b/packages/wallets/src/components/WalletsActionScreen/WalletsActionScreen.scss
index df5c47edcef4..306c85f1265c 100644
--- a/packages/wallets/src/components/WalletsActionScreen/WalletsActionScreen.scss
+++ b/packages/wallets/src/components/WalletsActionScreen/WalletsActionScreen.scss
@@ -4,18 +4,7 @@
     align-items: center;
     gap: 2.4rem;
 
-    &__modal {
-        padding: 2.4rem;
-        border-radius: 0.8rem;
-        background: #fff;
-        box-shadow: 0px 32px 64px 0px rgba(14, 14, 14, 0.14);
-
-        @include mobile {
-            width: 90vw;
-        }
-    }
-
-    &__content {
+    &__info {
         display: flex;
         flex-direction: column;
         gap: 0.8rem;
diff --git a/packages/wallets/src/components/WalletsActionScreen/WalletsActionScreen.tsx b/packages/wallets/src/components/WalletsActionScreen/WalletsActionScreen.tsx
index 5dcf9bc57e39..28ed1d8f2bbe 100644
--- a/packages/wallets/src/components/WalletsActionScreen/WalletsActionScreen.tsx
+++ b/packages/wallets/src/components/WalletsActionScreen/WalletsActionScreen.tsx
@@ -1,73 +1,51 @@
-import React, { ComponentProps, PropsWithChildren, ReactNode, isValidElement } from 'react';
-import classNames from 'classnames';
-import WalletButton from '../Base/WalletButton/WalletButton';
+import React, { ComponentProps, isValidElement, PropsWithChildren, ReactElement, ReactNode } from 'react';
+import { WalletButton, WalletButtonGroup } from '../Base';
 import WalletText from '../Base/WalletText/WalletText';
 import './WalletsActionScreen.scss';
 
 type TProps = {
-    actionText?: ReactNode;
-    actionVariant?: ComponentProps<typeof WalletButton>['variant'];
+    desciptionSize?: ComponentProps<typeof WalletText>['size'];
     description: ReactNode;
-    disabled?: boolean;
     icon?: ReactNode;
-    onAction?: () => void;
+    renderButtons?: () =>
+        | ReactElement<ComponentProps<'div'>>
+        | ReactElement<ComponentProps<typeof WalletButton>>
+        | ReactElement<ComponentProps<typeof WalletButtonGroup>>;
     title?: string;
-    type?: 'modal' | 'page';
+    titleSize?: ComponentProps<typeof WalletText>['size'];
 };
 
 /**
  * Generic component to display status / action screen / final screen
  * As its common and repeated in many places,
  * at the moment of writing this, there are already 3 different patterns use to display ex
- *
- * @param icon
- * @param title
- * @param description
- * @param actionText
- * @param onAction
- * @constructor
  */
 const WalletsActionScreen: React.FC<PropsWithChildren<TProps>> = ({
-    actionText,
-    actionVariant = 'contained',
+    desciptionSize = 'md',
     description,
-    disabled = false,
     icon,
-    onAction,
+    renderButtons,
     title,
-    type = 'page',
+    titleSize = 'md',
 }) => {
     return (
-        <div
-            className={classNames('wallets-action-screen', {
-                'wallets-action-screen__modal': type === 'modal',
-            })}
-        >
+        <div className='wallets-action-screen'>
             {icon}
-            <div className='wallets-action-screen__content'>
+            <div className='wallets-action-screen__info'>
                 {title && (
-                    <WalletText align='center' size='md' weight='bold'>
+                    <WalletText align='center' size={titleSize} weight='bold'>
                         {title}
                     </WalletText>
                 )}
                 {isValidElement(description) ? (
                     description
                 ) : (
-                    <WalletText align='center' size='md'>
+                    <WalletText align='center' size={desciptionSize}>
                         {description}
                     </WalletText>
                 )}
             </div>
-            {actionText && (
-                <WalletButton
-                    color='primary'
-                    disabled={disabled}
-                    onClick={onAction}
-                    size='lg'
-                    text={actionText}
-                    variant={actionVariant}
-                />
-            )}
+            {renderButtons?.()}
         </div>
     );
 };
diff --git a/packages/wallets/src/components/WalletsAddMoreCardBanner/WalletsAddMoreCardBanner.scss b/packages/wallets/src/components/WalletsAddMoreCardBanner/WalletsAddMoreCardBanner.scss
index f00fe670585a..e363751aade9 100644
--- a/packages/wallets/src/components/WalletsAddMoreCardBanner/WalletsAddMoreCardBanner.scss
+++ b/packages/wallets/src/components/WalletsAddMoreCardBanner/WalletsAddMoreCardBanner.scss
@@ -54,12 +54,9 @@
     }
 
     &__success-footer {
-        display: flex;
-        gap: 0.8rem;
+        width: 24rem;
 
         @include mobile {
-            flex-direction: column;
-            padding-block: 1.6rem;
             width: 100%;
         }
     }
diff --git a/packages/wallets/src/components/WalletsAddMoreCardBanner/WalletsAddMoreCardBanner.tsx b/packages/wallets/src/components/WalletsAddMoreCardBanner/WalletsAddMoreCardBanner.tsx
index 496d65ac51fb..ae5d461015cd 100644
--- a/packages/wallets/src/components/WalletsAddMoreCardBanner/WalletsAddMoreCardBanner.tsx
+++ b/packages/wallets/src/components/WalletsAddMoreCardBanner/WalletsAddMoreCardBanner.tsx
@@ -1,14 +1,14 @@
 import React, { useCallback, useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
 import { useAccountsList, useCreateWallet } from '@deriv/api';
-import { Success } from '../../features/cfd';
 import useDevice from '../../hooks/useDevice';
 import useSyncLocalStorageClientAccounts from '../../hooks/useSyncLocalStorageClientAccounts';
 import CheckIcon from '../../public/images/check.svg';
 import PlusIcon from '../../public/images/plus.svg';
 import { THooks } from '../../types';
-import { ModalStepWrapper, ModalWrapper, WalletButton, WalletText } from '../Base';
+import { WalletButton, WalletText } from '../Base';
 import { useModal } from '../ModalProvider';
+import { WalletAddedSuccess } from '../WalletAddedSuccess';
 import WalletAddMoreCurrencyIcon from '../WalletAddMoreCurrencyIcon';
 import { WalletError } from '../WalletError';
 
@@ -44,51 +44,38 @@ const WalletsAddMoreCardBanner: React.FC<TProps> = ({
         }
     }, [data, isMutateSuccess, switchAccount, syncLocalStorageClientAccounts]);
 
-    useEffect(() => {
-        if (status === 'error') {
-            modal.show(
-                <WalletError
-                    buttonText='Close'
-                    errorMessage={error.error.message}
-                    onClick={() => modal.hide()}
-                    type='modal'
-                />
-            );
-        } else if (status === 'success') {
-            modal.show(
-                <React.Fragment>
-                    {isMobile && (
-                        <ModalStepWrapper renderFooter={renderButtons} title=''>
-                            <Success
-                                description='Make a deposit into your new Wallet.'
-                                displayBalance={`0 ${data?.currency}`}
-                                marketType='all'
-                                platform='mt5'
-                                renderButton={() => null}
-                                title={`Your ${
-                                    data?.currency
-                                } wallet (${data?.landing_company_shortcode?.toUpperCase()}) is ready`}
-                            />
-                        </ModalStepWrapper>
-                    )}
-                    {!isMobile && (
-                        <ModalWrapper>
-                            <Success
-                                description='Make a deposit into your new Wallet.'
-                                displayBalance={`0 ${data?.currency}`}
-                                marketType='all'
-                                platform='mt5'
-                                renderButton={renderButtons}
-                                title={`Your ${
-                                    data?.currency
-                                } wallet (${data?.landing_company_shortcode?.toUpperCase()}) is ready`}
-                            />
-                        </ModalWrapper>
-                    )}
-                </React.Fragment>
-            );
-        }
-    }, [data?.currency, data?.landing_company_shortcode, error?.error.message, isMobile, renderButtons, status]); // eslint-disable-line react-hooks/exhaustive-deps
+    useEffect(
+        () => {
+            if (status === 'error') {
+                modal.show(
+                    <WalletError buttonText='Close' errorMessage={error.error.message} onClick={() => modal.hide()} />
+                );
+            } else if (status === 'success') {
+                modal.show(
+                    <WalletAddedSuccess
+                        currency={data?.currency}
+                        displayBalance={data?.display_balance ?? `0.00 ${data?.currency}`}
+                        landingCompany={data?.landing_company_shortcode}
+                        onPrimaryButtonClick={() => {
+                            history.push('wallets/cashier/deposit');
+                            modal.hide();
+                        }}
+                        onSecondaryButtonClick={() => modal.hide()}
+                    />
+                );
+            }
+        },
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [
+            data?.currency,
+            data?.display_balance,
+            data?.landing_company_shortcode,
+            error?.error.message,
+            isMobile,
+            renderButtons,
+            status,
+        ]
+    );
 
     return (
         <div className='wallets-add-more__banner'>
@@ -102,22 +89,23 @@ const WalletsAddMoreCardBanner: React.FC<TProps> = ({
                     </WalletText>
                 </div>
             </div>
-            <button
-                className={`wallets-add-more__banner-button ${
-                    isAdded ? 'wallets-add-more__banner-button--is-added' : ''
-                }`}
+            <WalletButton
+                color='white'
+                disabled={isAdded}
+                icon={
+                    isAdded ? (
+                        <CheckIcon className='wallets-add-more__banner-button-icon' />
+                    ) : (
+                        <PlusIcon className='wallets-add-more__banner-button-icon' />
+                    )
+                }
                 onClick={e => {
                     e.stopPropagation();
                     currency && mutate({ account_type: isCrypto ? 'crypto' : 'doughflow', currency });
                 }}
-            >
-                {isAdded ? (
-                    <CheckIcon className='wallets-add-more__banner-button-icon' />
-                ) : (
-                    <PlusIcon className='wallets-add-more__banner-button-icon' />
-                )}
-                {isAdded ? 'Added' : 'Add'}
-            </button>
+                size={isMobile ? 'sm' : 'lg'}
+                text={isAdded ? 'Added' : 'Add'}
+            />
         </div>
     );
 };
diff --git a/packages/wallets/src/components/WalletsCarouselContent/WalletsCarouselContent.tsx b/packages/wallets/src/components/WalletsCarouselContent/WalletsCarouselContent.tsx
index 2d97b5882f6f..abb886fc7ee4 100644
--- a/packages/wallets/src/components/WalletsCarouselContent/WalletsCarouselContent.tsx
+++ b/packages/wallets/src/components/WalletsCarouselContent/WalletsCarouselContent.tsx
@@ -66,7 +66,14 @@ const WalletsCarouselContent: React.FC = () => {
         <div className='wallets-carousel-content' ref={walletsCarouselEmblaRef}>
             <div className='wallets-carousel-content__container'>
                 {walletAccountsList?.map(account => (
-                    <WalletCard account={account} key={`wallet-card-${account.loginid}`} />
+                    <WalletCard
+                        balance={account.display_balance}
+                        currency={account.currency || 'USD'}
+                        isDemo={account.is_virtual}
+                        key={`wallet-card-${account.loginid}`}
+                        landingCompanyName={account.landing_company_name}
+                        width='45vw'
+                    />
                 ))}
             </div>
             <div className='wallets-carousel-content__progress-bar'>
diff --git a/packages/wallets/src/components/WalletsErrorScreen/WalletsErrorScreen.tsx b/packages/wallets/src/components/WalletsErrorScreen/WalletsErrorScreen.tsx
index 593b28ec0085..2d2f4ebe14c6 100644
--- a/packages/wallets/src/components/WalletsErrorScreen/WalletsErrorScreen.tsx
+++ b/packages/wallets/src/components/WalletsErrorScreen/WalletsErrorScreen.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import IcCashierError from '../../public/images/ic-cashier-error.svg';
+import { WalletButton } from '../Base';
 import WalletsActionScreen from '../WalletsActionScreen/WalletsActionScreen';
 
 type TProps = {
@@ -11,12 +12,12 @@ const ErrorState: React.FC<TProps> = ({
 }) => {
     return (
         <WalletsActionScreen
-            actionText='Try again'
-            actionVariant='ghost'
             description={message}
             icon={<IcCashierError />}
-            onAction={() => window.location.reload()}
-            title={'Oops, something went wrong!'}
+            renderButtons={() => (
+                <WalletButton onClick={() => window.location.reload()} size='lg' text='Try again' variant='ghost' />
+            )}
+            title='Oops, something went wrong!'
         />
     );
 };
diff --git a/packages/wallets/src/components/index.ts b/packages/wallets/src/components/index.ts
index e6a1ebc6cc80..81c46e1544b7 100644
--- a/packages/wallets/src/components/index.ts
+++ b/packages/wallets/src/components/index.ts
@@ -23,4 +23,5 @@ export * from './WalletsAddMoreCarousel';
 export * from './WalletsCarousel';
 export * from './WalletsCarouselContent';
 export * from './WalletsErrorScreen';
+export * from './WalletSuccess';
 export * from './WalletTourGuide';
diff --git a/packages/wallets/src/features/cashier/modules/ResetBalance/ResetBalance.tsx b/packages/wallets/src/features/cashier/modules/ResetBalance/ResetBalance.tsx
index cf3b00026d0e..2d3c1cbf2598 100644
--- a/packages/wallets/src/features/cashier/modules/ResetBalance/ResetBalance.tsx
+++ b/packages/wallets/src/features/cashier/modules/ResetBalance/ResetBalance.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
 import { useMutation } from '@deriv/api';
+import { WalletButton } from '../../../../components';
 import WalletsActionScreen from '../../../../components/WalletsActionScreen/WalletsActionScreen';
 import IcResetDemoBalance from '../../../../public/images/ic-demo-reset-balance.svg';
 import IcResetDemoBalanceDone from '../../../../public/images/ic-demo-reset-balance-done.svg';
@@ -16,14 +17,19 @@ const ResetBalance = () => {
     return (
         <div className='wallets-reset-balance'>
             <WalletsActionScreen
-                actionText={isResetBalanceSuccess ? 'Transfer funds' : 'Reset balance'}
                 description={
                     isResetBalanceSuccess
                         ? 'Your balance has been reset to 10,000.00 USD.'
                         : 'Reset your virtual balance to 10,000.00 USD.'
                 }
                 icon={isResetBalanceSuccess ? <IcResetDemoBalanceDone /> : <IcResetDemoBalance />}
-                onAction={isResetBalanceSuccess ? () => history.push(`/wallets/cashier/transfer`) : resetBalance}
+                renderButtons={() => (
+                    <WalletButton
+                        onClick={isResetBalanceSuccess ? () => history.push(`/wallets/cashier/transfer`) : resetBalance}
+                        size='lg'
+                        text={isResetBalanceSuccess ? 'Transfer funds' : 'Reset balance'}
+                    />
+                )}
                 title={isResetBalanceSuccess ? 'Success' : 'Reset balance'}
             />
         </div>
diff --git a/packages/wallets/src/features/cashier/modules/WithdrawalVerification/WithdrawalVerificationRequest/WithdrawalVerificationRequest.tsx b/packages/wallets/src/features/cashier/modules/WithdrawalVerification/WithdrawalVerificationRequest/WithdrawalVerificationRequest.tsx
index c9e63957c14e..6a3a73e6d98c 100644
--- a/packages/wallets/src/features/cashier/modules/WithdrawalVerification/WithdrawalVerificationRequest/WithdrawalVerificationRequest.tsx
+++ b/packages/wallets/src/features/cashier/modules/WithdrawalVerification/WithdrawalVerificationRequest/WithdrawalVerificationRequest.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import EmailVerification from '../../../../../public/images/email-verification.svg';
+import { WalletButton, WalletText } from '../../../../../components';
 import WalletsActionScreen from '../../../../../components/WalletsActionScreen/WalletsActionScreen';
-import { WalletText } from '../../../../../components';
+import EmailVerification from '../../../../../public/images/email-verification.svg';
 import './WithdrawalVerificationRequest.scss';
 
 type TProps = {
@@ -12,7 +12,6 @@ const WithdrawalVerificationRequest: React.FC<TProps> = ({ sendEmail }) => {
     return (
         <div className='wallets-withdrawal-verification-request'>
             <WalletsActionScreen
-                actionText='Send email'
                 description={
                     <div className='wallets-withdrawal-verification-request__description'>
                         <WalletText align='center'>
@@ -29,7 +28,7 @@ const WithdrawalVerificationRequest: React.FC<TProps> = ({ sendEmail }) => {
                         <EmailVerification />
                     </div>
                 }
-                onAction={sendEmail}
+                renderButtons={() => <WalletButton onClick={sendEmail} size='lg' text='Send email' />}
                 title='Please help us verify your withdrawal request.'
             />
         </div>
diff --git a/packages/wallets/src/features/cashier/modules/WithdrawalVerification/WithdrawalVerificationSent/WithdrawalVerificationSent.tsx b/packages/wallets/src/features/cashier/modules/WithdrawalVerification/WithdrawalVerificationSent/WithdrawalVerificationSent.tsx
index 87a2829c8f1d..8e52ddc90e8c 100644
--- a/packages/wallets/src/features/cashier/modules/WithdrawalVerification/WithdrawalVerificationSent/WithdrawalVerificationSent.tsx
+++ b/packages/wallets/src/features/cashier/modules/WithdrawalVerification/WithdrawalVerificationSent/WithdrawalVerificationSent.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
-import EmailSent from '../../../../../public/images/email-sent.svg';
+import { WalletButton } from '../../../../../components';
 import WalletsActionScreen from '../../../../../components/WalletsActionScreen/WalletsActionScreen';
+import EmailSent from '../../../../../public/images/email-sent.svg';
 import './WithdrawalVerificationSent.scss';
 
 type TProps = {
@@ -14,27 +15,41 @@ const WithdrawalVerificationSent: React.FC<TProps> = ({ counter, sendEmail }) =>
     return (
         <div className='wallets-withdrawal-verification-sent'>
             <WalletsActionScreen
-                actionText={!showResend && 'Didn’t receive the email?'}
-                actionVariant='ghost'
                 description='Please check your email for the verification link to complete the process.'
                 icon={
                     <div className='wallets-withdrawal-verification-sent__icon'>
                         <EmailSent />
                     </div>
                 }
-                onAction={() => {
-                    sendEmail();
-                    setShowResend(!showResend);
-                }}
+                renderButtons={
+                    !showResend
+                        ? () => (
+                              <WalletButton
+                                  onClick={() => {
+                                      sendEmail();
+                                      setShowResend(!showResend);
+                                  }}
+                                  size='lg'
+                                  text='Didn’t receive the email?'
+                                  variant='ghost'
+                              />
+                          )
+                        : undefined
+                }
                 title='We’ve sent you an email.'
             />
             <div className='wallets-withdrawal-verification-sent__resend'>
                 {showResend && (
                     <WalletsActionScreen
-                        actionText={`Resend email${counter ? ` in ${counter}s` : ''}`}
                         description='Check your spam or junk folder. If it’s not there, try resending the email.'
-                        disabled={!!counter}
-                        onAction={sendEmail}
+                        renderButtons={() => (
+                            <WalletButton
+                                disabled={!!counter}
+                                onClick={sendEmail}
+                                size='lg'
+                                text={`Resend email${counter ? ` in ${counter}s` : ''}`}
+                            />
+                        )}
                         title='Didn’t receive the email?'
                     />
                 )}
diff --git a/packages/wallets/src/features/cfd/flows/CTrader/AvailableCTraderAccountsList/AvailableCTraderAccountsList.tsx b/packages/wallets/src/features/cfd/flows/CTrader/AvailableCTraderAccountsList/AvailableCTraderAccountsList.tsx
index e5e36ffdadc8..f4b27f9d57bf 100644
--- a/packages/wallets/src/features/cfd/flows/CTrader/AvailableCTraderAccountsList/AvailableCTraderAccountsList.tsx
+++ b/packages/wallets/src/features/cfd/flows/CTrader/AvailableCTraderAccountsList/AvailableCTraderAccountsList.tsx
@@ -4,7 +4,7 @@ import { TradingAccountCard, WalletsErrorScreen } from '../../../../../component
 import { ModalWrapper, WalletButton, WalletText } from '../../../../../components/Base';
 import { useModal } from '../../../../../components/ModalProvider';
 import CTrader from '../../../../../public/images/ctrader.svg';
-import { Success } from '../../../screens';
+import { CFDSuccess } from '../../../screens';
 import './AvailableCTraderAccountsList.scss';
 
 const ctraderMapper = [
@@ -38,7 +38,7 @@ const AvailableCTraderAccountsList: React.FC = () => {
         show(
             <ModalWrapper>
                 {isSuccess && (
-                    <Success
+                    <CFDSuccess
                         description={`Transfer your virtual funds from your ${accountType} wallet to your ${ctraderMapper[0].title} ${accountType} account to practice trading.`}
                         displayBalance={cTraderAccounts?.find(account => account.login)?.display_balance}
                         marketType='all'
diff --git a/packages/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/DxtradeEnterPasswordModal.tsx b/packages/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/DxtradeEnterPasswordModal.tsx
index 80ba15a030ba..0d0b8e52788a 100644
--- a/packages/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/DxtradeEnterPasswordModal.tsx
+++ b/packages/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/DxtradeEnterPasswordModal.tsx
@@ -4,7 +4,7 @@ import { useActiveWalletAccount, useCreateOtherCFDAccount, useDxtradeAccountsLis
 import { ModalWrapper, WalletButton } from '../../../../components/Base';
 import { useModal } from '../../../../components/ModalProvider';
 import DxTradePasswordIcon from '../../../../public/images/ic-dxtrade-password.svg';
-import { CreatePassword, Success } from '../../screens';
+import { CFDSuccess, CreatePassword } from '../../screens';
 import './DxtradeEnterPasswordModal.scss';
 
 const DxtradeEnterPasswordModal = () => {
@@ -37,7 +37,7 @@ const DxtradeEnterPasswordModal = () => {
     return (
         <ModalWrapper hideCloseButton={isSuccess}>
             {isSuccess && dxtradeAccountListSuccess && (
-                <Success
+                <CFDSuccess
                     description={successDescription}
                     displayBalance={dxtradeBalance || ''}
                     marketType='all'
diff --git a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx
index 3fac71b7ed87..4610137fa6df 100644
--- a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx
+++ b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx
@@ -13,7 +13,7 @@ import useDevice from '../../../../hooks/useDevice';
 import MT5PasswordIcon from '../../../../public/images/ic-mt5-password.svg';
 import { TMarketTypes, TPlatforms } from '../../../../types';
 import { MarketTypeDetails, PlatformDetails } from '../../constants';
-import { CreatePassword, EnterPassword, Success } from '../../screens';
+import { CFDSuccess, CreatePassword, EnterPassword } from '../../screens';
 
 type TProps = {
     marketType: TMarketTypes.SortedMT5Accounts;
@@ -111,7 +111,7 @@ const MT5PasswordModal: React.FC<TProps> = ({ marketType, platform }) => {
         return (
             <ModalStepWrapper renderFooter={renderFooter} title={renderTitle()}>
                 {isSuccess && (
-                    <Success
+                    <CFDSuccess
                         description={`You can now start practicing trading with your ${marketTypeTitle} ${
                             isDemo ? ' demo' : 'real'
                         } account.`}
@@ -149,7 +149,7 @@ const MT5PasswordModal: React.FC<TProps> = ({ marketType, platform }) => {
     return (
         <ModalWrapper hideCloseButton={isSuccess}>
             {isSuccess && (
-                <Success
+                <CFDSuccess
                     description={`You can now start practicing trading with your ${marketTypeTitle} ${
                         isDemo ? ' demo' : 'real'
                     } account.`}
diff --git a/packages/wallets/src/features/cfd/screens/CFDSuccess/CFDSuccess.scss b/packages/wallets/src/features/cfd/screens/CFDSuccess/CFDSuccess.scss
new file mode 100644
index 000000000000..34f7d6f51ac8
--- /dev/null
+++ b/packages/wallets/src/features/cfd/screens/CFDSuccess/CFDSuccess.scss
@@ -0,0 +1,43 @@
+.wallets-cfd-success {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 24rem;
+    padding: 1rem;
+    position: relative;
+    border-radius: 1rem;
+
+    @include mobile {
+        height: fit-content;
+    }
+
+    &__badge {
+        position: absolute;
+        top: 0;
+        right: 0;
+        font-weight: 700;
+        border-radius: 0 1rem 0rem;
+        display: grid;
+        place-items: center;
+        color: #ffffff;
+        height: 2.5rem;
+        width: 5rem;
+
+        &--demo {
+            background-color: #377cfc;
+        }
+
+        &--real {
+            background-color: #ff444f;
+        }
+    }
+
+    &__info {
+        display: flex;
+        flex-direction: column;
+    }
+
+    &__gradient {
+        border-radius: 1rem;
+    }
+}
diff --git a/packages/wallets/src/features/cfd/screens/CFDSuccess/CFDSuccess.tsx b/packages/wallets/src/features/cfd/screens/CFDSuccess/CFDSuccess.tsx
new file mode 100644
index 000000000000..40b1097fa942
--- /dev/null
+++ b/packages/wallets/src/features/cfd/screens/CFDSuccess/CFDSuccess.tsx
@@ -0,0 +1,101 @@
+import React, { ComponentProps } from 'react';
+import classNames from 'classnames';
+import { useActiveWalletAccount } from '@deriv/api';
+import { WalletSuccess, WalletText } from '../../../../components';
+import { WalletGradientBackground } from '../../../../components/WalletGradientBackground';
+import { WalletMarketCurrencyIcon } from '../../../../components/WalletMarketCurrencyIcon';
+import useDevice from '../../../../hooks/useDevice';
+import { TDisplayBalance, TMarketTypes, TPlatforms } from '../../../../types';
+import { MarketTypeDetails, PlatformDetails } from '../../constants';
+import './CFDSuccess.scss';
+
+type TSuccessProps = {
+    description: string;
+    displayBalance:
+        | TDisplayBalance.CtraderAccountsList
+        | TDisplayBalance.DxtradeAccountsList
+        | TDisplayBalance.MT5AccountsList;
+    marketType?: TMarketTypes.SortedMT5Accounts;
+    platform?: TPlatforms.All;
+    renderButton: ComponentProps<typeof WalletSuccess>['renderButtons'];
+    title: string;
+};
+
+const CFDSuccess: React.FC<TSuccessProps> = ({
+    description,
+    displayBalance,
+    marketType,
+    platform,
+    renderButton,
+    title,
+}) => {
+    const { data } = useActiveWalletAccount();
+    const { isDesktop } = useDevice();
+    const isDemo = data?.is_virtual;
+    const landingCompanyName = data?.landing_company_name?.toUpperCase();
+
+    const isMarketTypeAll = marketType === 'all';
+
+    let marketTypeTitle = 'Deriv Apps';
+
+    if (marketType && platform) {
+        const isPlatformValid = Object.keys(PlatformDetails).includes(platform);
+        if (isMarketTypeAll && isPlatformValid) {
+            marketTypeTitle = PlatformDetails[platform].title;
+        } else {
+            marketTypeTitle = MarketTypeDetails[marketType].title;
+        }
+    }
+
+    const platformTitlePrefix = platform === 'mt5' ? PlatformDetails.mt5.title : '';
+
+    return (
+        <WalletSuccess
+            description={description}
+            renderButtons={isDesktop ? renderButton : undefined}
+            renderIcon={() => (
+                <WalletGradientBackground
+                    bodyClassName='wallets-cfd-success__gradient'
+                    currency={data?.currency || 'USD'}
+                    hasShine
+                    theme='grey'
+                >
+                    <div className='wallets-cfd-success'>
+                        <div className='wallets-cfd-success__icon'>
+                            <div
+                                className={classNames(
+                                    'wallets-cfd-success__badge',
+                                    `wallets-cfd-success__badge--${isDemo ? 'demo' : 'real'}`
+                                )}
+                            >
+                                <WalletText color='white' size='2xs' weight='bold'>
+                                    {isDemo ? 'Demo' : 'Real'}
+                                </WalletText>
+                            </div>
+                            <WalletMarketCurrencyIcon
+                                currency={data?.currency || 'USD'}
+                                isDemo={isDemo || false}
+                                marketType={marketType}
+                                platform={platform}
+                            />
+                            <div className='wallets-cfd-success__info'>
+                                <WalletText size='2xs'>
+                                    {platformTitlePrefix} {marketTypeTitle} {!isDemo && `(${landingCompanyName})`}
+                                </WalletText>
+                                <WalletText color='primary' size='2xs'>
+                                    {data?.currency} Wallet
+                                </WalletText>
+                                <WalletText size='sm' weight='bold'>
+                                    {displayBalance}
+                                </WalletText>
+                            </div>
+                        </div>
+                    </div>
+                </WalletGradientBackground>
+            )}
+            title={title}
+        />
+    );
+};
+
+export default CFDSuccess;
diff --git a/packages/wallets/src/features/cfd/screens/CFDSuccess/index.tsx b/packages/wallets/src/features/cfd/screens/CFDSuccess/index.tsx
new file mode 100644
index 000000000000..e364347aeadb
--- /dev/null
+++ b/packages/wallets/src/features/cfd/screens/CFDSuccess/index.tsx
@@ -0,0 +1 @@
+export { default as CFDSuccess } from './CFDSuccess';
diff --git a/packages/wallets/src/features/cfd/screens/Success/Success.scss b/packages/wallets/src/features/cfd/screens/Success/Success.scss
deleted file mode 100644
index bd93be09e015..000000000000
--- a/packages/wallets/src/features/cfd/screens/Success/Success.scss
+++ /dev/null
@@ -1,64 +0,0 @@
-.wallets-success {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    padding: 2.4rem;
-    gap: 2.4rem;
-    width: 39.2rem;
-    border-radius: 1rem;
-    text-align: center;
-    background: var(--system-light-8-primary-background, #fff);
-
-    @include mobile {
-        width: 100%;
-        height: calc(100% - 8.5rem);
-    }
-
-    &__info {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        width: 24rem;
-        height: 12.8rem;
-        padding: 1rem;
-        position: relative;
-        border-radius: 1rem;
-
-        @include mobile {
-            height: fit-content;
-        }
-
-        &-badge {
-            position: absolute;
-            top: 0;
-            right: 0;
-            font-weight: 700;
-            border-radius: 0 1rem 0rem;
-            display: grid;
-            place-items: center;
-            color: #ffffff;
-            height: 2.5rem;
-            width: 5rem;
-
-            &--demo {
-                background-color: #377cfc;
-            }
-
-            &--real {
-                background-color: #ff444f;
-            }
-        }
-    }
-
-    &__button {
-        background-color: #ff444f;
-        color: #ffffff;
-        cursor: pointer;
-        font-weight: 700;
-        width: 100%;
-        padding: 1rem;
-        border: none;
-        border-radius: 0.5rem;
-    }
-}
diff --git a/packages/wallets/src/features/cfd/screens/Success/Success.tsx b/packages/wallets/src/features/cfd/screens/Success/Success.tsx
deleted file mode 100644
index 0aff6954864f..000000000000
--- a/packages/wallets/src/features/cfd/screens/Success/Success.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import React, { ReactNode } from 'react';
-import { useActiveWalletAccount } from '@deriv/api';
-import { WalletText } from '../../../../components';
-import { WalletGradientBackground } from '../../../../components/WalletGradientBackground';
-import { WalletMarketCurrencyIcon } from '../../../../components/WalletMarketCurrencyIcon';
-import useDevice from '../../../../hooks/useDevice';
-import { TDisplayBalance, TMarketTypes, TPlatforms } from '../../../../types';
-import { MarketTypeDetails, PlatformDetails } from '../../constants';
-import './Success.scss';
-
-type TSuccessProps = {
-    description: string;
-    displayBalance:
-        | TDisplayBalance.CtraderAccountsList
-        | TDisplayBalance.DxtradeAccountsList
-        | TDisplayBalance.MT5AccountsList;
-    marketType?: TMarketTypes.SortedMT5Accounts;
-    platform?: TPlatforms.All;
-    renderButton: () => ReactNode;
-    title: string;
-};
-
-const Success: React.FC<TSuccessProps> = ({
-    description,
-    displayBalance,
-    marketType,
-    platform,
-    renderButton,
-    title,
-}) => {
-    const { data } = useActiveWalletAccount();
-    const { isDesktop } = useDevice();
-    const isDemo = data?.is_virtual;
-    const landingCompanyName = data?.landing_company_name?.toUpperCase();
-
-    const isMarketTypeAll = marketType === 'all';
-
-    let marketTypeTitle = 'Deriv Apps';
-
-    if (marketType && platform) {
-        const isPlatformValid = Object.keys(PlatformDetails).includes(platform);
-        if (isMarketTypeAll && isPlatformValid) {
-            marketTypeTitle = PlatformDetails[platform].title;
-        } else {
-            marketTypeTitle = MarketTypeDetails[marketType].title;
-        }
-    }
-
-    const platformTitlePrefix = platform === 'mt5' ? PlatformDetails.mt5.title : '';
-
-    return (
-        <div className='wallets-success'>
-            <WalletGradientBackground
-                bodyClassName='wallets-success__info'
-                currency={data?.currency || 'USD'}
-                hasShine
-                theme='grey'
-            >
-                <div className={`wallets-success__info-badge wallets-success__info-badge--${isDemo ? 'demo' : 'real'}`}>
-                    <WalletText color='white' size='2xs' weight='bold'>
-                        {isDemo ? 'Demo' : 'Real'}
-                    </WalletText>
-                </div>
-                <WalletMarketCurrencyIcon
-                    currency={data?.currency || 'USD'}
-                    isDemo={isDemo || false}
-                    marketType={marketType}
-                    platform={platform}
-                />
-                <WalletText size='2xs'>
-                    {platformTitlePrefix} {marketTypeTitle} {!isDemo && `(${landingCompanyName})`}
-                </WalletText>
-                <WalletText color='primary' size='2xs'>
-                    {data?.currency} Wallet
-                </WalletText>
-                <WalletText size='sm' weight='bold'>
-                    {displayBalance}
-                </WalletText>
-            </WalletGradientBackground>
-            <WalletText align='center' size='md' weight='bold'>
-                {title}
-            </WalletText>
-            <WalletText align='center' size='sm'>
-                {description}
-            </WalletText>
-            {isDesktop && renderButton()}
-        </div>
-    );
-};
-
-export default Success;
diff --git a/packages/wallets/src/features/cfd/screens/Success/index.tsx b/packages/wallets/src/features/cfd/screens/Success/index.tsx
deleted file mode 100644
index 06b4b6a5e6f7..000000000000
--- a/packages/wallets/src/features/cfd/screens/Success/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Success } from './Success';
diff --git a/packages/wallets/src/features/cfd/screens/index.ts b/packages/wallets/src/features/cfd/screens/index.ts
index d4537824fd2e..c05cba85091f 100644
--- a/packages/wallets/src/features/cfd/screens/index.ts
+++ b/packages/wallets/src/features/cfd/screens/index.ts
@@ -1,7 +1,7 @@
+export * from './CFDSuccess';
 export * from './CreatePassword';
 export * from './EnterPassword';
 export * from './GetMoreMT5Accounts';
 export * from './MT5AccountType';
 export * from './MT5AccountTypeCard';
 export * from './MT5TradeScreen';
-export * from './Success';
diff --git a/packages/wallets/src/hooks/useDevice.ts b/packages/wallets/src/hooks/useDevice.ts
index 1b643fe52d23..aa1cd224e598 100644
--- a/packages/wallets/src/hooks/useDevice.ts
+++ b/packages/wallets/src/hooks/useDevice.ts
@@ -3,7 +3,7 @@ import { useWindowSize } from 'usehooks-ts';
 /** A custom hook to check for the client device and determine the layout to be rendered */
 const useDevice = () => {
     const { width } = useWindowSize();
-    const isMobile = width < 768;
+    const isMobile = width > 0 && width < 768;
     const isTablet = width >= 768 && width < 1024;
     const isDesktop = width >= 1024;
 
diff --git a/packages/wallets/src/types.ts b/packages/wallets/src/types.ts
index 25268555f753..1f822d32e98d 100644
--- a/packages/wallets/src/types.ts
+++ b/packages/wallets/src/types.ts
@@ -6,6 +6,7 @@ import type {
     useAvailableMT5Accounts,
     useAvailableWallets,
     useCreateOtherCFDAccount,
+    useCreateWallet,
     useCryptoTransactions,
     useCtraderAccountsList,
     useCurrencyConfig,
@@ -20,6 +21,7 @@ import type {
 // eslint-disable-next-line  @typescript-eslint/no-namespace
 export namespace THooks {
     export type AvailableMT5Accounts = NonNullable<ReturnType<typeof useAvailableMT5Accounts>['data']>[number];
+    export type CreateWallet = NonNullable<ReturnType<typeof useCreateWallet>['data']>;
     export type CtraderAccountsList = NonNullable<ReturnType<typeof useCtraderAccountsList>['data']>[number];
     export type DxtradeAccountsList = NonNullable<ReturnType<typeof useDxtradeAccountsList>['data']>[number];
     export type MT5AccountsList = NonNullable<ReturnType<typeof useMT5AccountsList>['data']>[number];