diff --git a/packages/wallets/src/components/AppCard/AppCard.tsx b/packages/wallets/src/components/AppCard/AppCard.tsx
index 5a5d405deb17..407804a2469b 100644
--- a/packages/wallets/src/components/AppCard/AppCard.tsx
+++ b/packages/wallets/src/components/AppCard/AppCard.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
+import { Text } from '@deriv-com/ui';
 import type { TGenericSizes, THooks } from '../../types';
 import { AppCardBadge } from '../AppCardBadge';
-import { WalletText } from '../Base';
 import { WalletGradientBackground } from '../WalletGradientBackground';
 import { WalletMarketCurrencyIcon } from '../WalletMarketCurrencyIcon';
 import './AppCard.scss';
@@ -54,13 +54,13 @@ const AppCard: React.FC<TProps> = ({
                     </div>
                     {cardSize !== 'sm' && (
                         <div className='wallets-app-card__bottom'>
-                            <WalletText size='2xs'>{appName}</WalletText>
-                            <WalletText color='less-prominent' size='2xs'>
+                            <Text size='2xs'>{appName}</Text>
+                            <Text color='less-prominent' size='2xs'>
                                 {walletName}
-                            </WalletText>
-                            <WalletText size='sm' weight='bold'>
+                            </Text>
+                            <Text size='sm' weight='bold'>
                                 {balance}
-                            </WalletText>
+                            </Text>
                         </div>
                     )}
                 </div>
diff --git a/packages/wallets/src/components/Base/Tabs/TabTitle.tsx b/packages/wallets/src/components/Base/Tabs/TabTitle.tsx
index e3ff1cd60f2c..0cfaf6d5d8c3 100644
--- a/packages/wallets/src/components/Base/Tabs/TabTitle.tsx
+++ b/packages/wallets/src/components/Base/Tabs/TabTitle.tsx
@@ -1,13 +1,13 @@
-import React, { FC, useCallback } from 'react';
+import React, { ComponentProps, FC, useCallback } from 'react';
 import classNames from 'classnames';
-import WalletText, { WalletTextProps } from '../WalletText/WalletText';
+import { Text } from '@deriv-com/ui';
 
 export type TabTitleProps = {
     icon?: React.ReactNode;
     index: number;
     isActive?: boolean;
     setSelectedTab: (index: number) => void;
-    size: WalletTextProps['size'];
+    size: ComponentProps<typeof Text>['size'];
     title: string;
 };
 
@@ -24,9 +24,9 @@ const TabTitle: FC<TabTitleProps> = ({ icon, index, isActive, setSelectedTab, si
             onClick={handleOnClick}
         >
             {icon}
-            <WalletText size={size} weight={isActive ? 'bold' : 'normal'}>
+            <Text size={size} weight={isActive ? 'bold' : 'normal'}>
                 {title}
-            </WalletText>
+            </Text>
         </button>
     );
 };
diff --git a/packages/wallets/src/components/Base/WalletAlertMessage/WalletAlertMessage.tsx b/packages/wallets/src/components/Base/WalletAlertMessage/WalletAlertMessage.tsx
index 00c386b71aa4..d12e91835f28 100644
--- a/packages/wallets/src/components/Base/WalletAlertMessage/WalletAlertMessage.tsx
+++ b/packages/wallets/src/components/Base/WalletAlertMessage/WalletAlertMessage.tsx
@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 import { LegacyLossIcon, LegacySettlementFillIcon, LegacyWarningIcon, LegacyWonIcon } from '@deriv/quill-icons';
-import { WalletText } from '../index';
+import { Text } from '@deriv-com/ui';
 import './WalletAlertMessage.scss';
 
 const typeMapper = {
@@ -44,9 +44,9 @@ const WalletAlertMessage: React.FC<TProps> = ({ children, message, type }) => {
                 <Icon className='wallets-alert-message__icon-container__icon' fill={fill} iconSize='xs' />
             </div>
             <div className='wallets-alert-message__message-container'>
-                <WalletText color={color} size='xs'>
+                <Text color={color} size='xs'>
                     {message}
-                </WalletText>
+                </Text>
             </div>
             {children && <>{children}</>}
         </div>
diff --git a/packages/wallets/src/components/Base/WalletText/WalletText.scss b/packages/wallets/src/components/Base/WalletText/WalletText.scss
deleted file mode 100644
index 8d74a2047e17..000000000000
--- a/packages/wallets/src/components/Base/WalletText/WalletText.scss
+++ /dev/null
@@ -1,184 +0,0 @@
-$color-map: (
-    general: #333333,
-    primary: #999999,
-    success: #4bb4b3,
-    warning: #ffad3a,
-    error: #ec3f3f,
-    white: #ffffff,
-    black: #000000,
-    less-prominent: #999999,
-    red: #ff444f,
-    blue: #377cfc,
-    green: #17eabd,
-    orange: #ff9c13,
-    system-dark-2-general-text: #c2c2c2,
-);
-
-$desktop-font-size-map: (
-    '2xs': (
-        size: 1rem,
-        line_height: 1.4rem,
-    ),
-    'xs': (
-        size: 1.2rem,
-        line_height: 1.8rem,
-    ),
-    'sm': (
-        size: 1.4rem,
-        line_height: 2rem,
-    ),
-    'md': (
-        size: 1.6rem,
-        line_height: 2.4rem,
-    ),
-    'lg': (
-        size: 2rem,
-        line_height: 3rem,
-    ),
-    'xl': (
-        size: 2.4rem,
-        line_height: 3.6rem,
-    ),
-    '2xl': (
-        size: 3.2rem,
-        line_height: 4rem,
-    ),
-    '3xl': (
-        size: 4.8rem,
-        line_height: 6rem,
-    ),
-    '4xl': (
-        size: 6.4rem,
-        line_height: 8rem,
-    ),
-    '5xl': (
-        size: 8rem,
-        line_height: 10rem,
-    ),
-);
-
-$mobile-font-size-map: (
-    '2xs': (
-        size: 0.8rem,
-        line_height: 1.2rem,
-    ),
-    'xs': (
-        size: 1rem,
-        line_height: 1.4rem,
-    ),
-    'sm': (
-        size: 1.2rem,
-        line_height: 1.8rem,
-    ),
-    'md': (
-        size: 1.4rem,
-        line_height: 2rem,
-    ),
-    'lg': (
-        size: 1.6rem,
-        line_height: 2.4rem,
-    ),
-    'xl': (
-        size: 1.8rem,
-        line_height: 2.6rem,
-    ),
-    '2xl': (
-        size: 2.4rem,
-        line_height: 3rem,
-    ),
-    '3xl': (
-        size: 2.8rem,
-        line_height: 3.4rem,
-    ),
-    '4xl': (
-        size: 3.2rem,
-        line_height: 4rem,
-    ),
-    '5xl': (
-        size: 4rem,
-        line_height: 5rem,
-    ),
-);
-
-$line-height-map: (
-    '3xs': 1.2rem,
-    '2xs': 1.4rem,
-    'xs': 1.6rem,
-    'sm': 1.8rem,
-    'md': 2rem,
-    'lg': 2.2rem,
-    'xl': 2.4rem,
-    '2xl': 2.6rem,
-    '3xl': 2.8rem,
-    '4xl': 3rem,
-    '5xl': 3.2rem,
-    '6xl': 3.4rem,
-    '7xl': 3.6rem,
-);
-
-$font-weight-map: (
-    light: 300,
-    normal: 400,
-    bold: 700,
-);
-
-$font-align-map: (
-    left: left,
-    center: center,
-    right: right,
-);
-
-$font-style-map: (
-    italic: italic,
-    normal: normal,
-);
-
-.wallets-text {
-    @each $color, $value in $color-map {
-        &__color--#{$color} {
-            color: $value;
-        }
-    }
-
-    @each $size, $values in $desktop-font-size-map {
-        &__size--#{$size} {
-            @include desktop-screen {
-                font-size: map-get($values, size);
-                line-height: map-get($values, line_height);
-            }
-        }
-    }
-
-    @each $size, $values in $mobile-font-size-map {
-        &__size--#{$size} {
-            @include mobile-or-tablet-screen {
-                font-size: map-get($values, size);
-                line-height: map-get($values, line_height);
-            }
-        }
-    }
-
-    @each $lineHeight, $value in $line-height-map {
-        &__line-height--#{$lineHeight} {
-            line-height: $value;
-        }
-    }
-
-    @each $weight, $value in $font-weight-map {
-        &__weight--#{$weight} {
-            font-weight: $value;
-        }
-    }
-
-    @each $align, $value in $font-align-map {
-        &__align--#{$align} {
-            text-align: $value;
-        }
-    }
-
-    @each $fontStyle, $value in $font-style-map {
-        &__font-style--#{$fontStyle} {
-            font-style: $value;
-        }
-    }
-}
diff --git a/packages/wallets/src/components/Base/WalletText/WalletText.tsx b/packages/wallets/src/components/Base/WalletText/WalletText.tsx
deleted file mode 100644
index c0d7ae5767cf..000000000000
--- a/packages/wallets/src/components/Base/WalletText/WalletText.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React, { CSSProperties, ElementType, ReactNode } from 'react';
-import classNames from 'classnames';
-import { TGenericSizes } from '../../../types';
-import './WalletText.scss';
-
-export interface WalletTextProps {
-    align?: CSSProperties['textAlign'];
-    as?: ElementType;
-    children: ReactNode;
-    color?: CSSProperties['color'] | 'error' | 'general' | 'less-prominent' | 'primary' | 'success' | 'warning';
-    fontStyle?: CSSProperties['fontStyle'];
-    lineHeight?: TGenericSizes;
-    size?: Exclude<TGenericSizes, '3xs' | '6xl' | '7xl'>;
-    weight?: CSSProperties['fontWeight'];
-}
-
-const WalletText: React.FC<WalletTextProps> = ({
-    align = 'left',
-    as = 'span',
-    children,
-    color = 'general',
-    fontStyle = 'normal',
-    lineHeight,
-    size = 'md',
-    weight = 'normal',
-}) => {
-    const textClassNames = classNames(
-        'wallets-text',
-        `wallets-text__size--${size}`,
-        `wallets-text__weight--${weight}`,
-        `wallets-text__align--${align}`,
-        `wallets-text__color--${color}`,
-        `wallets-text__line-height--${lineHeight}`,
-        `wallets-text__font-style--${fontStyle}`
-    );
-
-    const Tag = as;
-
-    return <Tag className={textClassNames}>{children}</Tag>;
-};
-
-export default WalletText;
diff --git a/packages/wallets/src/components/Base/WalletText/index.ts b/packages/wallets/src/components/Base/WalletText/index.ts
deleted file mode 100644
index 4c5f28ea4fc0..000000000000
--- a/packages/wallets/src/components/Base/WalletText/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as WalletText } from './WalletText';
diff --git a/packages/wallets/src/components/Base/WalletTextField/HelperMessage.tsx b/packages/wallets/src/components/Base/WalletTextField/HelperMessage.tsx
index 1d14bdd611c0..912f00f929fb 100644
--- a/packages/wallets/src/components/Base/WalletTextField/HelperMessage.tsx
+++ b/packages/wallets/src/components/Base/WalletTextField/HelperMessage.tsx
@@ -1,5 +1,5 @@
-import React, { InputHTMLAttributes, memo } from 'react';
-import WalletText, { WalletTextProps } from '../WalletText/WalletText';
+import React, { ComponentProps, InputHTMLAttributes, memo } from 'react';
+import { Text } from '@deriv-com/ui';
 
 export type HelperMessageProps = {
     inputValue?: InputHTMLAttributes<HTMLInputElement>['value'];
@@ -11,7 +11,7 @@ export type HelperMessageProps = {
 
 const HelperMessage: React.FC<HelperMessageProps> = memo(
     ({ inputValue, isError, maxLength, message, messageVariant = 'general' }) => {
-        const HelperMessageColors: Record<string, WalletTextProps['color']> = {
+        const HelperMessageColors: Record<string, ComponentProps<typeof Text>['color']> = {
             error: 'error',
             general: 'less-prominent',
             warning: 'warning',
@@ -21,19 +21,19 @@ const HelperMessage: React.FC<HelperMessageProps> = memo(
             <React.Fragment>
                 {message && (
                     <div className='wallets-textfield__message-container--msg'>
-                        <WalletText
+                        <Text
                             color={isError ? HelperMessageColors.error : HelperMessageColors[messageVariant]}
                             size='xs'
                         >
                             {message}
-                        </WalletText>
+                        </Text>
                     </div>
                 )}
                 {maxLength && (
                     <div className='wallets-textfield__message-container--maxchar'>
-                        <WalletText align='right' color='less-prominent' size='xs'>
+                        <Text align='right' color='less-prominent' size='xs'>
                             {inputValue?.toString().length || 0} / {maxLength}
-                        </WalletText>
+                        </Text>
                     </div>
                 )}
             </React.Fragment>
diff --git a/packages/wallets/src/components/Base/index.ts b/packages/wallets/src/components/Base/index.ts
index e3c23606e8d6..feb198794077 100644
--- a/packages/wallets/src/components/Base/index.ts
+++ b/packages/wallets/src/components/Base/index.ts
@@ -10,5 +10,4 @@ export * from './WalletClipboard';
 export * from './WalletDialog';
 export * from './WalletLink';
 export * from './WalletPasswordFieldLazy';
-export * from './WalletText';
 export * from './WalletTextField';
diff --git a/packages/wallets/src/components/Dropzone/Dropzone.tsx b/packages/wallets/src/components/Dropzone/Dropzone.tsx
index 3991e0b2f518..3e86dab1ec76 100644
--- a/packages/wallets/src/components/Dropzone/Dropzone.tsx
+++ b/packages/wallets/src/components/Dropzone/Dropzone.tsx
@@ -12,16 +12,16 @@ import classNames from 'classnames';
 import { useDropzone } from 'react-dropzone';
 import { DerivLightDropzoneFrameIcon, DerivLightIcCloudUploadIcon, LegacyClose2pxIcon } from '@deriv/quill-icons';
 import { useTranslations } from '@deriv-com/translations';
-import { Button, useDevice } from '@deriv-com/ui';
-import { IconButton, WalletText } from '../Base';
+import { Button, Text, useDevice } from '@deriv-com/ui';
+import { IconButton } from '../Base';
 import './Dropzone.scss';
 
 type TProps = {
     buttonText?: ReactNode;
     defaultFile?: File;
     description?: ReactNode;
-    descriptionColor?: ComponentProps<typeof WalletText>['color'];
-    descriptionSize?: ComponentProps<typeof WalletText>['size'];
+    descriptionColor?: ComponentProps<typeof Text>['color'];
+    descriptionSize?: ComponentProps<typeof Text>['size'];
     fileFormats?: NonNullable<Parameters<typeof useDropzone>[0]>['accept'];
     hasFrame?: boolean;
     hoverMessage?: ReactNode;
@@ -30,7 +30,7 @@ type TProps = {
     noClick?: NonNullable<Parameters<typeof useDropzone>[0]>['noClick'];
     onFileChange?: (file?: File) => void;
     title?: ReactNode;
-    titleType?: ComponentProps<typeof WalletText>['weight'];
+    titleType?: ComponentProps<typeof Text>['weight'];
 };
 
 type TFile = {
@@ -133,18 +133,18 @@ const Dropzone: React.FC<TProps> = ({
                 )}
             >
                 <div className='wallets-dropzone__content'>
-                    {showHoverMessage && <WalletText size='sm'>{hoverMessage}</WalletText>}
+                    {showHoverMessage && <Text size='sm'>{hoverMessage}</Text>}
                     {!showHoverMessage && !errorMessage && !file && (
                         <div className='wallets-dropzone__placeholder'>
                             <div className='wallets-dropzone__placeholder-icon'>{icon}</div>
                             {title && (
-                                <WalletText align='center' color='primary' size='md' weight={titleType}>
+                                <Text align='center' color='primary' size='md' weight={titleType}>
                                     {title}
-                                </WalletText>
+                                </Text>
                             )}
-                            <WalletText align='center' color={descriptionColor} size={descriptionSize}>
+                            <Text align='center' color={descriptionColor} size={descriptionSize}>
                                 {description}
-                            </WalletText>
+                            </Text>
                             {buttonText && (
                                 <div className='wallets-dropzone__placeholder-text'>
                                     <Button
@@ -172,9 +172,9 @@ const Dropzone: React.FC<TProps> = ({
                                         size='sm'
                                     />
                                     <DerivLightIcCloudUploadIcon height={50} width={50} />
-                                    <WalletText align='center' size='sm'>
+                                    <Text align='center' size='sm'>
                                         {file.name.length > 30 ? `${file.name.slice(0, 30)}....pdf` : file.name}
-                                    </WalletText>
+                                    </Text>
                                 </div>
                             ) : (
                                 <div
@@ -195,9 +195,9 @@ const Dropzone: React.FC<TProps> = ({
                                 </div>
                             )}
                             {description && (
-                                <WalletText align='center' color={descriptionColor}>
+                                <Text align='center' color={descriptionColor}>
                                     {description}
-                                </WalletText>
+                                </Text>
                             )}
                         </React.Fragment>
                     )}
@@ -210,9 +210,9 @@ const Dropzone: React.FC<TProps> = ({
                                 onClick={resetError}
                                 size='sm'
                             />
-                            <WalletText align='center' color='red'>
+                            <Text align='center' color='red'>
                                 {errorMessage}
-                            </WalletText>
+                            </Text>
                         </div>
                     )}
                 </div>
diff --git a/packages/wallets/src/components/SkeletonLoader/WalletsCarouselLoader/WalletsCarouselLoader.tsx b/packages/wallets/src/components/SkeletonLoader/WalletsCarouselLoader/WalletsCarouselLoader.tsx
index 926c26e014e6..b6578ee1fdc2 100644
--- a/packages/wallets/src/components/SkeletonLoader/WalletsCarouselLoader/WalletsCarouselLoader.tsx
+++ b/packages/wallets/src/components/SkeletonLoader/WalletsCarouselLoader/WalletsCarouselLoader.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
-import { WalletText } from '../../Base';
+import { Text } from '@deriv-com/ui';
 import './WalletsCarouselLoader.scss';
 
 const WalletsCarouselLoader = () => (
     <div className='wallets-carousel-loader'>
         <div className='wallets-carousel-loader__title'>
-            <WalletText size='xl' weight='bold'>
+            <Text size='xl' weight='bold'>
                 Trader&apos;s Hub
-            </WalletText>
+            </Text>
         </div>
         <div className='wallets-carousel-loader__card-container'>
             {Array.from({ length: 3 }).map((_, idx) => (
diff --git a/packages/wallets/src/components/WalletListCardBalance/WalletListCardBalance.tsx b/packages/wallets/src/components/WalletListCardBalance/WalletListCardBalance.tsx
index 85b130157305..884e39a75754 100644
--- a/packages/wallets/src/components/WalletListCardBalance/WalletListCardBalance.tsx
+++ b/packages/wallets/src/components/WalletListCardBalance/WalletListCardBalance.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { useActiveWalletAccount } from '@deriv/api-v2';
 import { displayMoney } from '@deriv/api-v2/src/utils';
+import { Text } from '@deriv-com/ui';
 import useAllBalanceSubscription from '../../hooks/useAllBalanceSubscription';
-import { WalletText } from '../Base';
 import './WalletListCardBalance.scss';
 
 const WalletListCardBalance = () => {
@@ -23,11 +23,11 @@ const WalletListCardBalance = () => {
                     data-testid='dt_wallet_list_card_balance_loader'
                 />
             ) : (
-                <WalletText align='right' data-testid='dt_wallets_list_card_balance' size='xl' weight='bold'>
+                <Text align='right' data-testid='dt_wallets_list_card_balance' size='xl' weight='bold'>
                     {displayMoney(balance, activeWallet?.currency, {
                         fractional_digits: activeWallet?.currency_config?.fractional_digits,
                     })}
-                </WalletText>
+                </Text>
             )}
         </div>
     );
diff --git a/packages/wallets/src/components/WalletsPercentageSelector/WalletsPercentageSelectorBlock.tsx b/packages/wallets/src/components/WalletsPercentageSelector/WalletsPercentageSelectorBlock.tsx
index ad12cdb918a9..1901f37dd8a6 100644
--- a/packages/wallets/src/components/WalletsPercentageSelector/WalletsPercentageSelectorBlock.tsx
+++ b/packages/wallets/src/components/WalletsPercentageSelector/WalletsPercentageSelectorBlock.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { WalletText } from '../Base';
+import { Text } from '@deriv-com/ui';
 import './WalletsPercentageSelector.scss';
 
 type TWalletsPercentageSelectorBlock = {
@@ -11,9 +11,9 @@ type TWalletsPercentageSelectorBlock = {
 const WalletsPercentageSelectorBlock = ({ fillPercentage, label, onClick }: TWalletsPercentageSelectorBlock) => {
     return (
         <div className='wallets-percentage-selector-block-container'>
-            <WalletText color='prominent' size='xs'>
+            <Text color='prominent' size='xs'>
                 {label}
-            </WalletText>
+            </Text>
             <div className='wallets-percentage-selector-block' onClick={onClick}>
                 <div className='wallets-percentage-selector-block__fill' style={{ width: `${fillPercentage}%` }} />
             </div>
diff --git a/packages/wallets/src/features/accounts/modules/DocumentService/components/IDVService/IDVService.tsx b/packages/wallets/src/features/accounts/modules/DocumentService/components/IDVService/IDVService.tsx
index 8f54e953ff11..11ec7752890d 100644
--- a/packages/wallets/src/features/accounts/modules/DocumentService/components/IDVService/IDVService.tsx
+++ b/packages/wallets/src/features/accounts/modules/DocumentService/components/IDVService/IDVService.tsx
@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { Formik } from 'formik';
 import { Localize, useTranslations } from '@deriv-com/translations';
-import { Loader } from '@deriv-com/ui';
-import { FormDropdown, FormField, ModalStepWrapper, WalletText } from '../../../../../../components';
+import { Loader, Text } from '@deriv-com/ui';
+import { FormDropdown, FormField, ModalStepWrapper } from '../../../../../../components';
 import { Footer } from '../../../components';
 import {
     TVerifyPersonalDetailsValues,
@@ -95,9 +95,9 @@ const IDVService: React.FC<React.PropsWithChildren<TIDVServiceProps>> = ({ onCom
                                     <IDVServiceErrorMessage message={localize(errorMessage.message)} />
                                 )}
                                 <div className='wallets-idv-service__title'>
-                                    <WalletText weight='bold'>
+                                    <Text weight='bold'>
                                         <Localize i18n_default_text='Identity verification' />
-                                    </WalletText>
+                                    </Text>
                                 </div>
                                 <FormDropdown
                                     isFullWidth
@@ -162,9 +162,9 @@ const IDVService: React.FC<React.PropsWithChildren<TIDVServiceProps>> = ({ onCom
                                             />
                                         )}
                                         <div className='wallets-idv-service__title'>
-                                            <WalletText weight='bold'>
+                                            <Text weight='bold'>
                                                 <Localize i18n_default_text='Details' />
-                                            </WalletText>
+                                            </Text>
                                         </div>
                                     </>
                                 )}
diff --git a/packages/wallets/src/features/accounts/modules/DocumentService/components/IDVService/components/IDVServiceErrorMessage.tsx b/packages/wallets/src/features/accounts/modules/DocumentService/components/IDVService/components/IDVServiceErrorMessage.tsx
index f0caa7c602a9..0dd19c75da6b 100644
--- a/packages/wallets/src/features/accounts/modules/DocumentService/components/IDVService/components/IDVServiceErrorMessage.tsx
+++ b/packages/wallets/src/features/accounts/modules/DocumentService/components/IDVService/components/IDVServiceErrorMessage.tsx
@@ -1,18 +1,17 @@
 import React from 'react';
 import { Localize } from '@deriv-com/translations';
-import { InlineMessage } from '@deriv-com/ui';
-import { WalletText } from '../../../../../../../components';
+import { InlineMessage, Text } from '@deriv-com/ui';
 import './IDVServiceErrorMessage.scss';
 
 const IDVServiceErrorMessage = ({ message }: { message: string }) => (
     <div className='wallets-idv-service-error-message'>
-        <WalletText weight='bold'>
+        <Text weight='bold'>
             <Localize i18n_default_text='Your identity verification failed because:' />
-        </WalletText>
+        </Text>
         <InlineMessage variant='error'>{message}</InlineMessage>
-        <WalletText size='sm'>
+        <Text size='sm'>
             <Localize i18n_default_text="Let's try again. Choose another document and enter the corresponding details." />
-        </WalletText>
+        </Text>
     </div>
 );
 
diff --git a/packages/wallets/src/features/accounts/modules/DocumentService/components/VerifyPersonalDetails/VerifyPersonalDetails.tsx b/packages/wallets/src/features/accounts/modules/DocumentService/components/VerifyPersonalDetails/VerifyPersonalDetails.tsx
index 965f32d75cf4..c6a7ed56c54a 100644
--- a/packages/wallets/src/features/accounts/modules/DocumentService/components/VerifyPersonalDetails/VerifyPersonalDetails.tsx
+++ b/packages/wallets/src/features/accounts/modules/DocumentService/components/VerifyPersonalDetails/VerifyPersonalDetails.tsx
@@ -5,8 +5,8 @@ import moment from 'moment';
 import { TSocketError } from '@deriv/api-v2/types';
 import { DerivLightNameDobPoiIcon } from '@deriv/quill-icons';
 import { Localize, useTranslations } from '@deriv-com/translations';
-import { InlineMessage } from '@deriv-com/ui';
-import { DatePicker, FormField, WalletText } from '../../../../../../components';
+import { InlineMessage, Text } from '@deriv-com/ui';
+import { DatePicker, FormField } from '../../../../../../components';
 import { VerifyPersonalDetailsErrorMessage } from './components';
 import { TVerifyPersonalDetailsValues } from './types';
 import {
@@ -49,12 +49,12 @@ const VerifyPersonalDetails: React.FC<TVerifyPersonalDetailsProps> = ({ error, o
     return (
         <div className='wallets-verify-personal-details'>
             <InlineMessage iconPosition='top' variant='warning'>
-                <WalletText size='sm'>
+                <Text size='sm'>
                     <Localize
                         components={[<strong key={0} />]}
                         i18n_default_text='To avoid delays, enter your <0>name</0> and <0>date of birth</0> exactly as it appears on your identity document.'
                     />
-                </WalletText>
+                </Text>
             </InlineMessage>
             <div className='wallets-verify-personal-details__body'>
                 <div className='wallets-verify-personal-details__content'>
@@ -90,9 +90,9 @@ const VerifyPersonalDetails: React.FC<TVerifyPersonalDetailsProps> = ({ error, o
                     />
                 </div>
                 <div className='wallets-verify-personal-details__sidenote'>
-                    <WalletText size='xs' weight='bold'>
+                    <Text size='xs' weight='bold'>
                         <Localize i18n_default_text='Example' />
-                    </WalletText>
+                    </Text>
                     <DerivLightNameDobPoiIcon height={195} width={288} />
                 </div>
             </div>
@@ -110,9 +110,9 @@ const VerifyPersonalDetails: React.FC<TVerifyPersonalDetailsProps> = ({ error, o
                     validate={(values: boolean) => getValidateArePersonalDetailsVerified(values, localize)}
                 />
                 <label htmlFor='idv-checkbox'>
-                    <WalletText lineHeight='2xs' size='sm'>
+                    <Text lineHeight='2xs' size='sm'>
                         <Localize i18n_default_text='I confirm that the name and date of birth above match my chosen identity document' />
-                    </WalletText>
+                    </Text>
                 </label>
             </div>
             {error && <VerifyPersonalDetailsErrorMessage error={error?.code} />}
diff --git a/packages/wallets/src/features/accounts/modules/ManualService/components/DocumentRules/components/DocumentRuleTile/DocumentRuleTile.tsx b/packages/wallets/src/features/accounts/modules/ManualService/components/DocumentRules/components/DocumentRuleTile/DocumentRuleTile.tsx
index ce0f8cbccbce..89ee18f79e95 100644
--- a/packages/wallets/src/features/accounts/modules/ManualService/components/DocumentRules/components/DocumentRuleTile/DocumentRuleTile.tsx
+++ b/packages/wallets/src/features/accounts/modules/ManualService/components/DocumentRules/components/DocumentRuleTile/DocumentRuleTile.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { WalletText } from '../../../../../../../../components';
+import { Text } from '@deriv-com/ui';
 import { TDocumentRule } from '../../../../utils';
 import './DocumentRuleTile.scss';
 
@@ -7,9 +7,9 @@ const DocumentRuleTile: React.FC<React.PropsWithChildren<TDocumentRule>> = ({ de
     return (
         <div className='wallets-document-rule-tile'>
             {icon}
-            <WalletText align='center' size='2xs'>
+            <Text align='center' size='2xs'>
                 {description}
-            </WalletText>
+            </Text>
         </div>
     );
 };
diff --git a/packages/wallets/src/features/accounts/modules/ManualService/components/DocumentSelection/DocumentSelection.tsx b/packages/wallets/src/features/accounts/modules/ManualService/components/DocumentSelection/DocumentSelection.tsx
index 77052c95f3ee..828cb8c1d57e 100644
--- a/packages/wallets/src/features/accounts/modules/ManualService/components/DocumentSelection/DocumentSelection.tsx
+++ b/packages/wallets/src/features/accounts/modules/ManualService/components/DocumentSelection/DocumentSelection.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useSettings } from '@deriv/api-v2';
 import { Localize, useTranslations } from '@deriv-com/translations';
-import { WalletText } from '../../../../../../components/Base';
+import { Text } from '@deriv-com/ui';
 import { getManualDocumentsMapper } from '../../utils';
 import { DocumentSelectionCard } from './components';
 import './DocumentSelection.scss';
@@ -19,12 +19,12 @@ const DocumentSelection: React.FC<TProps> = ({ onSelectDocument }) => {
     return (
         <div className='wallets-document-selection'>
             <div className='wallets-document-selection__content'>
-                <WalletText weight='bold'>
+                <Text weight='bold'>
                     <Localize i18n_default_text='Identity verification' />
-                </WalletText>
-                <WalletText>
+                </Text>
+                <Text>
                     <Localize i18n_default_text='Please upload one of the following documents:' />
-                </WalletText>
+                </Text>
                 {Object.keys(documents).map(document => {
                     const { countries, description, icon, title } = documents[document];
                     if (countries && !countries.includes(settings?.country_code ?? '')) {
diff --git a/packages/wallets/src/features/accounts/modules/ManualService/components/DocumentSelection/components/DocumentSelectionCard/DocumentSelectionCard.tsx b/packages/wallets/src/features/accounts/modules/ManualService/components/DocumentSelection/components/DocumentSelectionCard/DocumentSelectionCard.tsx
index 42ff1b17aad7..7e7b9f7a0eb6 100644
--- a/packages/wallets/src/features/accounts/modules/ManualService/components/DocumentSelection/components/DocumentSelectionCard/DocumentSelectionCard.tsx
+++ b/packages/wallets/src/features/accounts/modules/ManualService/components/DocumentSelection/components/DocumentSelectionCard/DocumentSelectionCard.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { useDevice } from '@deriv-com/ui';
-import { WalletText } from '../../../../../../../../components';
+import { Text, useDevice } from '@deriv-com/ui';
 import RightArrow from '../../../../../../../../public/images/navigation-chevron-right.svg';
 import { TManualDocumentType } from '../../../../utils';
 import './DocumentSelectionCard.scss';
@@ -23,10 +22,10 @@ const DocumentSelectionCard: React.FC<TDocumentSelectionCardProps> = ({
             <div className='wallets-document-selection-card__content'>
                 <Icon />
                 <div className='wallets-document-selection-card__text-content'>
-                    <WalletText size={!isDesktop ? 'xs' : 'sm'} weight='bold'>
+                    <Text size={!isDesktop ? 'xs' : 'sm'} weight='bold'>
                         {title}
-                    </WalletText>
-                    <WalletText size={!isDesktop ? '2xs' : 'xs'}>{description}</WalletText>
+                    </Text>
+                    <Text size={!isDesktop ? '2xs' : 'xs'}>{description}</Text>
                 </div>
             </div>
             <RightArrow />
diff --git a/packages/wallets/src/features/accounts/modules/ManualService/components/DrivingLicenseUpload/DrivingLicenseUpload.tsx b/packages/wallets/src/features/accounts/modules/ManualService/components/DrivingLicenseUpload/DrivingLicenseUpload.tsx
index a4a649fd0471..b75a2ca72d12 100644
--- a/packages/wallets/src/features/accounts/modules/ManualService/components/DrivingLicenseUpload/DrivingLicenseUpload.tsx
+++ b/packages/wallets/src/features/accounts/modules/ManualService/components/DrivingLicenseUpload/DrivingLicenseUpload.tsx
@@ -2,8 +2,8 @@ import React, { useState } from 'react';
 import { Formik, FormikValues } from 'formik';
 import moment from 'moment';
 import { Localize, useTranslations } from '@deriv-com/translations';
-import { Divider, Loader } from '@deriv-com/ui';
-import { DatePicker, Dropzone, FormField, ModalStepWrapper, WalletText } from '../../../../../../components';
+import { Divider, Loader, Text } from '@deriv-com/ui';
+import { DatePicker, Dropzone, FormField, ModalStepWrapper } from '../../../../../../components';
 import DrivingLicenseCardBack from '../../../../../../public/images/accounts/document-back.svg';
 import DrivingLicenseCardFront from '../../../../../../public/images/accounts/driving-license-front.svg';
 import { THooks } from '../../../../../../types';
@@ -95,9 +95,9 @@ const DrivingLicenseUpload: TManualDocumentComponent = ({ documentIssuingCountry
                     >
                         <div className='wallets-driving-license-upload' data-testid='dt_driving-license-upload'>
                             <div className='wallets-driving-license-upload__wrapper'>
-                                <WalletText>
+                                <Text>
                                     <Localize i18n_default_text='First, enter your Driving licence number and the expiry date.' />
-                                </WalletText>
+                                </Text>
                                 <div className='wallets-driving-license-upload__input-group'>
                                     <FormField
                                         defaultValue={values.drivingLicenseNumber ?? ''}
@@ -116,9 +116,9 @@ const DrivingLicenseUpload: TManualDocumentComponent = ({ documentIssuingCountry
                                     height={2}
                                 />
                                 <div className='wallets-driving-license-upload__document-upload'>
-                                    <WalletText>
+                                    <Text>
                                         <Localize i18n_default_text='Next, upload the front and back of your driving licence.' />
-                                    </WalletText>
+                                    </Text>
                                     <div className='wallets-driving-license-upload__dropzone'>
                                         <Dropzone
                                             buttonText={localize('Drop file or click here to upload')}
diff --git a/packages/wallets/src/features/accounts/modules/ManualService/components/IdentityCardUpload/IdentityCardUpload.tsx b/packages/wallets/src/features/accounts/modules/ManualService/components/IdentityCardUpload/IdentityCardUpload.tsx
index db4f460cf093..36beb0b16ffd 100644
--- a/packages/wallets/src/features/accounts/modules/ManualService/components/IdentityCardUpload/IdentityCardUpload.tsx
+++ b/packages/wallets/src/features/accounts/modules/ManualService/components/IdentityCardUpload/IdentityCardUpload.tsx
@@ -2,8 +2,8 @@ import React, { useState } from 'react';
 import { Formik, FormikValues } from 'formik';
 import moment from 'moment';
 import { Localize, useTranslations } from '@deriv-com/translations';
-import { Divider, Loader } from '@deriv-com/ui';
-import { DatePicker, Dropzone, FormField, ModalStepWrapper, WalletText } from '../../../../../../components';
+import { Divider, Loader, Text } from '@deriv-com/ui';
+import { DatePicker, Dropzone, FormField, ModalStepWrapper } from '../../../../../../components';
 import IdentityCardBack from '../../../../../../public/images/accounts/document-back.svg';
 import IdentityCardFront from '../../../../../../public/images/accounts/identity-card-front.svg';
 import { THooks } from '../../../../../../types';
@@ -97,9 +97,9 @@ const IdentityCardUpload: TManualDocumentComponent = ({ documentIssuingCountryCo
                     >
                         <div className='wallets-identity-card-upload' data-testid='dt_identity-card-upload'>
                             <div className='wallets-identity-card-upload__wrapper'>
-                                <WalletText>
+                                <Text>
                                     <Localize i18n_default_text='First, enter your Identity card number and the expiry date.' />
-                                </WalletText>
+                                </Text>
                                 <div className='wallets-identity-card-upload__input-group'>
                                     <FormField
                                         defaultValue={values.identityCardNumber ?? ''}
@@ -118,9 +118,9 @@ const IdentityCardUpload: TManualDocumentComponent = ({ documentIssuingCountryCo
                                     height={2}
                                 />
                                 <div className='wallets-identity-card-upload__document-upload'>
-                                    <WalletText>
+                                    <Text>
                                         <Localize i18n_default_text='Next, upload the front and back of your identity card.' />
-                                    </WalletText>
+                                    </Text>
                                     <div className='wallets-identity-card-upload__dropzone'>
                                         <Dropzone
                                             buttonText={localize('Drop file or click here to upload')}
diff --git a/packages/wallets/src/features/accounts/modules/ManualService/components/NIMCSlipUpload/NIMCSlipUpload.tsx b/packages/wallets/src/features/accounts/modules/ManualService/components/NIMCSlipUpload/NIMCSlipUpload.tsx
index 5a044554532f..f029220622b2 100644
--- a/packages/wallets/src/features/accounts/modules/ManualService/components/NIMCSlipUpload/NIMCSlipUpload.tsx
+++ b/packages/wallets/src/features/accounts/modules/ManualService/components/NIMCSlipUpload/NIMCSlipUpload.tsx
@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 import { Formik, FormikValues } from 'formik';
 import { Localize, useTranslations } from '@deriv-com/translations';
-import { Divider, Loader } from '@deriv-com/ui';
-import { Dropzone, FormField, ModalStepWrapper, WalletText } from '../../../../../../components';
+import { Divider, Loader, Text } from '@deriv-com/ui';
+import { Dropzone, FormField, ModalStepWrapper } from '../../../../../../components';
 import NIMCSlipFront from '../../../../../../public/images/accounts/nimc-slip-front.svg';
 import ProofOfAgeIcon from '../../../../../../public/images/accounts/proof-of-age.svg';
 import { THooks } from '../../../../../../types';
@@ -84,9 +84,9 @@ const NIMCSlipUpload: TManualDocumentComponent = ({ documentIssuingCountryCode,
                     >
                         <div className='wallets-nimc-slip-upload' data-testid='dt_nimc-upload'>
                             <div className='wallets-nimc-slip-upload__wrapper'>
-                                <WalletText>
+                                <Text>
                                     <Localize i18n_default_text='First, enter your NIMC slip number.' />
-                                </WalletText>
+                                </Text>
                                 <FormField label={localize('NIMC slip number*')} name='nimcNumber' />
                                 <Divider
                                     className='wallets-nimc-slip-upload__divider'
@@ -94,9 +94,9 @@ const NIMCSlipUpload: TManualDocumentComponent = ({ documentIssuingCountryCode,
                                     height={2}
                                 />
                                 <div className='wallets-nimc-slip-upload__document-section'>
-                                    <WalletText>
+                                    <Text>
                                         <Localize i18n_default_text='Next, upload both of the following documents.' />
-                                    </WalletText>
+                                    </Text>
                                     <div className='wallets-nimc-slip-upload__dropzones'>
                                         <div className='wallets-nimc-slip-upload__dropzones--left'>
                                             <Dropzone
diff --git a/packages/wallets/src/features/accounts/modules/ManualService/components/PassportUpload/PassportUpload.tsx b/packages/wallets/src/features/accounts/modules/ManualService/components/PassportUpload/PassportUpload.tsx
index a643da63a1fc..7948c4809f96 100644
--- a/packages/wallets/src/features/accounts/modules/ManualService/components/PassportUpload/PassportUpload.tsx
+++ b/packages/wallets/src/features/accounts/modules/ManualService/components/PassportUpload/PassportUpload.tsx
@@ -2,8 +2,8 @@ import React, { useState } from 'react';
 import { Formik, FormikValues } from 'formik';
 import moment from 'moment';
 import { Localize, useTranslations } from '@deriv-com/translations';
-import { Divider, Loader } from '@deriv-com/ui';
-import { DatePicker, Dropzone, FormField, ModalStepWrapper, WalletText } from '../../../../../../components';
+import { Divider, Loader, Text } from '@deriv-com/ui';
+import { DatePicker, Dropzone, FormField, ModalStepWrapper } from '../../../../../../components';
 import PassportPlaceholder from '../../../../../../public/images/accounts/passport-placeholder.svg';
 import { THooks } from '../../../../../../types';
 import { Footer } from '../../../components';
@@ -91,9 +91,9 @@ const PassportUpload: TManualDocumentComponent = ({ documentIssuingCountryCode,
                     >
                         <div className='wallets-passport-upload' data-testid='dt_passport-document-upload'>
                             <div className='wallets-passport-upload__wrapper'>
-                                <WalletText>
+                                <Text>
                                     <Localize i18n_default_text='First, enter your Passport number and the expiry date.' />
-                                </WalletText>
+                                </Text>
                                 <div className='wallets-passport-upload__input-group'>
                                     <FormField label={localize('Passport number*')} name='passportNumber' />
                                     <DatePicker
@@ -108,9 +108,9 @@ const PassportUpload: TManualDocumentComponent = ({ documentIssuingCountryCode,
                                     height={2}
                                 />
                                 <div className='wallets-passport-upload__document-upload'>
-                                    <WalletText>
+                                    <Text>
                                         <Localize i18n_default_text='Next, upload the page of your passport that contains your photo.' />
-                                    </WalletText>
+                                    </Text>
                                     <Dropzone
                                         buttonText={localize('Drop file or click here to upload')}
                                         defaultFile={values.passportFile}
diff --git a/packages/wallets/src/features/accounts/modules/ManualService/components/SelfieUpload/SelfieUpload.tsx b/packages/wallets/src/features/accounts/modules/ManualService/components/SelfieUpload/SelfieUpload.tsx
index b4d1747cb149..e480115d40ca 100644
--- a/packages/wallets/src/features/accounts/modules/ManualService/components/SelfieUpload/SelfieUpload.tsx
+++ b/packages/wallets/src/features/accounts/modules/ManualService/components/SelfieUpload/SelfieUpload.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { useFormikContext } from 'formik';
 import { Localize, useTranslations } from '@deriv-com/translations';
-import { useDevice } from '@deriv-com/ui';
-import { Dropzone, ModalStepWrapper, WalletText } from '../../../../../../components';
+import { Text, useDevice } from '@deriv-com/ui';
+import { Dropzone, ModalStepWrapper } from '../../../../../../components';
 import SelfieIcon from '../../../../../../public/images/accounts/selfie-icon.svg';
 import { Footer } from '../../../components';
 import { TManualDocumentComponent } from '../../utils';
@@ -30,9 +30,9 @@ const SelfieUpload: TManualDocumentComponent = ({ onClickBack, onCompletion }) =
             title={localize('Add a real MT5 account')}
         >
             <div className='wallets-selfie-upload'>
-                <WalletText weight='bold'>
+                <Text weight='bold'>
                     <Localize i18n_default_text='Upload your selfie' />
-                </WalletText>
+                </Text>
                 <Dropzone
                     buttonText={localize('Drop file or click here to upload')}
                     defaultFile={values.selfieFile}
@@ -44,12 +44,12 @@ const SelfieUpload: TManualDocumentComponent = ({ onClickBack, onCompletion }) =
                     noClick
                     onFileChange={(file?: File) => setFieldValue('selfieFile', file)}
                 />
-                <WalletText color={isDesktop ? 'less-prominent' : 'general'}>
+                <Text color={isDesktop ? 'less-prominent' : 'general'}>
                     <Localize
                         i18n_default_text='Face forward and remove your glasses if necessary. Make sure your eyes are clearly visible and your
                     face is within the frame.'
                     />
-                </WalletText>
+                </Text>
             </div>
         </ModalStepWrapper>
     );
diff --git a/packages/wallets/src/features/accounts/modules/Poa/components/AddressSection/AddressSection.tsx b/packages/wallets/src/features/accounts/modules/Poa/components/AddressSection/AddressSection.tsx
index bd86cdf0d00e..7721a2082c48 100644
--- a/packages/wallets/src/features/accounts/modules/Poa/components/AddressSection/AddressSection.tsx
+++ b/packages/wallets/src/features/accounts/modules/Poa/components/AddressSection/AddressSection.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { useFormikContext } from 'formik';
 import { Localize, useTranslations } from '@deriv-com/translations';
-import { InlineMessage } from '@deriv-com/ui';
-import { FormDropdown, FormField, WalletText } from '../../../../../../components';
+import { InlineMessage, Text } from '@deriv-com/ui';
+import { FormDropdown, FormField } from '../../../../../../components';
 import { TAddressDetails } from '../../types';
 import './AddressSection.scss';
 
@@ -13,9 +13,9 @@ const AddressSection: React.FC = () => {
     return (
         <div className='wallets-address-section'>
             <div className='wallets-address-section__title'>
-                <WalletText weight='bold'>
+                <Text weight='bold'>
                     <Localize i18n_default_text='Address' />
-                </WalletText>
+                </Text>
                 <div className='wallets-address-section__title__divider' />
             </div>
             <div className='wallets-address-section__inline'>
diff --git a/packages/wallets/src/features/accounts/modules/Poa/components/CommonMistakesExamples/CommonMistakesExamples.tsx b/packages/wallets/src/features/accounts/modules/Poa/components/CommonMistakesExamples/CommonMistakesExamples.tsx
index ff8ec0c69243..fb142d7bcb7b 100644
--- a/packages/wallets/src/features/accounts/modules/Poa/components/CommonMistakesExamples/CommonMistakesExamples.tsx
+++ b/packages/wallets/src/features/accounts/modules/Poa/components/CommonMistakesExamples/CommonMistakesExamples.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { WalletText } from '../../../../../../components/Base';
+import { Text } from '@deriv-com/ui';
 import StatusLoss from '../../../../../../public/images/status-loss.svg';
 import './CommonMistakesExamples.scss';
 
@@ -13,7 +13,7 @@ const CommonMistakesExamples = ({ description, image }: TCommonMistakeExamplePar
         {image}
         <div className='wallets-common-mistakes__content-description'>
             <StatusLoss />
-            <WalletText size='xs'>{description}</WalletText>
+            <Text size='xs'>{description}</Text>
         </div>
     </div>
 );
diff --git a/packages/wallets/src/features/accounts/modules/Poa/components/DocumentSubmission/DocumentSubmission.tsx b/packages/wallets/src/features/accounts/modules/Poa/components/DocumentSubmission/DocumentSubmission.tsx
index 5c61612dff0b..2e702aaf5b37 100644
--- a/packages/wallets/src/features/accounts/modules/Poa/components/DocumentSubmission/DocumentSubmission.tsx
+++ b/packages/wallets/src/features/accounts/modules/Poa/components/DocumentSubmission/DocumentSubmission.tsx
@@ -3,8 +3,8 @@ import { useFormikContext } from 'formik';
 import { useIsEuRegion } from '@deriv/api-v2';
 import { LabelPairedArrowUpFromBracketXlFillIcon } from '@deriv/quill-icons';
 import { Localize, useTranslations } from '@deriv-com/translations';
-import { useDevice } from '@deriv-com/ui';
-import { Dropzone, WalletText } from '../../../../../../components';
+import { Text, useDevice } from '@deriv-com/ui';
+import { Dropzone } from '../../../../../../components';
 import { TDocumentSubmission } from '../../types';
 import { getExampleImagesConfig } from '../../utils';
 import { CommonMistakesExamples } from '../CommonMistakesExamples';
@@ -33,32 +33,32 @@ const DocumentSubmission: React.FC = () => {
     return (
         <div className='wallets-poa__document'>
             <div className='wallets-poa__document__title'>
-                <WalletText weight='bold'>
+                <Text weight='bold'>
                     <Localize i18n_default_text='Document submission' />
-                </WalletText>
+                </Text>
                 <div className='wallets-poa__document__title__divider' />
             </div>
             <div className='wallets-poa__document__container'>
                 <div className='wallets-poa__document__container__disclaimer'>
-                    <WalletText size='sm' weight='bold'>
+                    <Text size='sm' weight='bold'>
                         {localize(
                             'We accept only these types of documents as proof of address. The document must be recent (issued within last {{timePeriod}} months) and include your name and address:',
                             { timePeriod: isEuRegion ? '6' : '12' }
                         )}
-                    </WalletText>
+                    </Text>
 
                     <ul className='wallets-poa__document__container__disclaimer__list'>
                         {listItems.map(item => (
                             <li key={`list-item-${item}`}>
-                                <WalletText size='sm'>{item}</WalletText>
+                                <Text size='sm'>{item}</Text>
                             </li>
                         ))}
                     </ul>
                 </div>
                 <div className='wallets-poa__document__container__common-mistakes'>
-                    <WalletText size='sm' weight='bold'>
+                    <Text size='sm' weight='bold'>
                         <Localize i18n_default_text='Common mistakes' />
-                    </WalletText>
+                    </Text>
 
                     <div className='wallets-common-mistakes__content'>
                         {getExampleImagesConfig().map(config => (
@@ -71,9 +71,9 @@ const DocumentSubmission: React.FC = () => {
                     </div>
                 </div>
                 <div className='wallets-poa__document__container__upload'>
-                    <WalletText size='sm' weight='bold'>
+                    <Text size='sm' weight='bold'>
                         <Localize i18n_default_text='Upload file' />
-                    </WalletText>
+                    </Text>
                     <Dropzone
                         defaultFile={values.poaFile}
                         description={localize(
@@ -90,12 +90,12 @@ const DocumentSubmission: React.FC = () => {
                         titleType='bold'
                     />
                     <div className='wallets-poa__document__container__upload__requirements'>
-                        <WalletText size={!isDesktop ? 'xs' : 'sm'}>
+                        <Text size={!isDesktop ? 'xs' : 'sm'}>
                             <Localize i18n_default_text='Supported formats : JPEG, JPG, PNG, PDF, and GIF only' />
-                        </WalletText>
-                        <WalletText size={!isDesktop ? 'xs' : 'sm'}>
+                        </Text>
+                        <Text size={!isDesktop ? 'xs' : 'sm'}>
                             <Localize i18n_default_text='Maximum size : 8MB' />
-                        </WalletText>
+                        </Text>
                     </div>
                 </div>
             </div>
diff --git a/packages/wallets/src/features/accounts/modules/TaxInformation/TaxInformation.tsx b/packages/wallets/src/features/accounts/modules/TaxInformation/TaxInformation.tsx
index 453071fc3041..4f43439758ef 100644
--- a/packages/wallets/src/features/accounts/modules/TaxInformation/TaxInformation.tsx
+++ b/packages/wallets/src/features/accounts/modules/TaxInformation/TaxInformation.tsx
@@ -1,8 +1,8 @@
 import React, { useEffect } from 'react';
 import { Formik } from 'formik';
 import { Localize, useTranslations } from '@deriv-com/translations';
-import { Loader } from '@deriv-com/ui';
-import { FormDropdown, FormField, ModalStepWrapper, WalletText } from '../../../../components';
+import { Loader, Text } from '@deriv-com/ui';
+import { FormDropdown, FormField, ModalStepWrapper } from '../../../../components';
 import { Footer } from '../components';
 import { NeedHelpMessage } from './components';
 import { useTaxInformation } from './hooks';
@@ -56,12 +56,12 @@ const TaxInformation: React.FC<TTaxInformationProps> = ({ onCompletion, selected
                             {!isLoading && (
                                 <>
                                     <div className='wallets-tax-information__header'>
-                                        <WalletText align='center' as='h2' color='prominent' weight='bold'>
+                                        <Text align='center' as='h2' color='prominent' weight='bold'>
                                             <Localize i18n_default_text='Complete your personal details' />
-                                        </WalletText>
-                                        <WalletText align='center' size='xs'>
+                                        </Text>
+                                        <Text align='center' size='xs'>
                                             <Localize i18n_default_text='Any information you provide is confidential and will be used for verification purposes only.' />
-                                        </WalletText>
+                                        </Text>
                                     </div>
                                     <NeedHelpMessage />
                                     <div className='wallets-tax-information__form'>
diff --git a/packages/wallets/src/features/accounts/modules/TaxInformation/components/NeedHelpMessage/NeedHelpMessage.tsx b/packages/wallets/src/features/accounts/modules/TaxInformation/components/NeedHelpMessage/NeedHelpMessage.tsx
index ca278addd4e3..432ba3b22ef3 100644
--- a/packages/wallets/src/features/accounts/modules/TaxInformation/components/NeedHelpMessage/NeedHelpMessage.tsx
+++ b/packages/wallets/src/features/accounts/modules/TaxInformation/components/NeedHelpMessage/NeedHelpMessage.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { Localize } from '@deriv-com/translations';
-import { InlineMessage } from '@deriv-com/ui';
-import { WalletText } from '../../../../../../components';
+import { InlineMessage, Text } from '@deriv-com/ui';
 
 const NeedHelpMessage = () => {
     const onClickLiveChat = () => window.LC_API.open_chat_window();
@@ -9,7 +8,7 @@ const NeedHelpMessage = () => {
     return (
         <div className='wallets-tax-information__message'>
             <InlineMessage variant='info'>
-                <WalletText size='xs'>
+                <Text size='xs'>
                     <Localize
                         components={[
                             <button
@@ -20,7 +19,7 @@ const NeedHelpMessage = () => {
                         ]}
                         i18n_default_text='Need help with tax info? Let us know via <0>live chat</0>.'
                     />
-                </WalletText>
+                </Text>
             </InlineMessage>
         </div>
     );
diff --git a/packages/wallets/src/features/cashier/components/WalletActionModal/WalletActionModal.tsx b/packages/wallets/src/features/cashier/components/WalletActionModal/WalletActionModal.tsx
index 1644c0b5c2cc..fe04b8bd44e6 100644
--- a/packages/wallets/src/features/cashier/components/WalletActionModal/WalletActionModal.tsx
+++ b/packages/wallets/src/features/cashier/components/WalletActionModal/WalletActionModal.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { Button, useDevice } from '@deriv-com/ui';
-import { ModalWrapper, WalletText } from '../../../../components/Base';
+import { Button, Text, useDevice } from '@deriv-com/ui';
+import { ModalWrapper } from '../../../../components/Base';
 import './WalletActionModal.scss';
 
 type TWalletActionModal = {
@@ -25,12 +25,12 @@ const WalletActionModal: React.FC<TWalletActionModal> = ({
     return (
         <ModalWrapper hideCloseButton={hideCloseButton}>
             <div className='wallets-action-modal'>
-                <WalletText lineHeight={isDesktop ? 'xl' : 'md'} weight='bold'>
+                <Text lineHeight={isDesktop ? 'xl' : 'md'} weight='bold'>
                     {title}
-                </WalletText>
-                <WalletText lineHeight={isDesktop ? 'lg' : 'sm'} size='sm'>
+                </Text>
+                <Text lineHeight={isDesktop ? 'lg' : 'sm'} size='sm'>
                     {description}
-                </WalletText>
+                </Text>
                 {!!actionButtonsOptions.length && (
                     <div className='wallets-action-modal__buttons-container'>
                         {actionButtonsOptions.map(action => (
diff --git a/packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoAddress/DepositCryptoAddress.tsx b/packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoAddress/DepositCryptoAddress.tsx
index 0259517471a7..b2cbbde8d3b7 100644
--- a/packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoAddress/DepositCryptoAddress.tsx
+++ b/packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoAddress/DepositCryptoAddress.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import QRCode from 'qrcode.react';
-import { useDevice } from '@deriv-com/ui';
-import { WalletClipboard, WalletText } from '../../../../../../components/Base';
+import { Text, useDevice } from '@deriv-com/ui';
+import { WalletClipboard } from '../../../../../../components/Base';
 import './DepositCryptoAddress.scss';
 
 type TProps = {
@@ -16,9 +16,9 @@ const DepositCryptoAddress: React.FC<TProps> = ({ depositCryptoAddress }) => {
             <QRCode data-testid='dt_deposit-crypto-address-qr-code' size={128} value={depositCryptoAddress || ''} />
             <div className='wallets-deposit-crypto-address__hash'>
                 <div className='wallets-deposit-crypto-address__hash-text'>
-                    <WalletText size='sm' weight='bold'>
+                    <Text size='sm' weight='bold'>
                         {depositCryptoAddress}
-                    </WalletText>
+                    </Text>
                 </div>
                 <div className='wallets-deposit-crypto-address__hash-clipboard'>
                     <WalletClipboard
diff --git a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompletedRow/components/TransactionsCompletedRowAccountDetails/TransactionsCompletedRowAccountDetails.tsx b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompletedRow/components/TransactionsCompletedRowAccountDetails/TransactionsCompletedRowAccountDetails.tsx
index afdffb047039..31c1d9cdccbe 100644
--- a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompletedRow/components/TransactionsCompletedRowAccountDetails/TransactionsCompletedRowAccountDetails.tsx
+++ b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompletedRow/components/TransactionsCompletedRowAccountDetails/TransactionsCompletedRowAccountDetails.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Localize } from '@deriv-com/translations';
 import { Text, useDevice } from '@deriv-com/ui';
-import { WalletCurrencyCard, WalletMarketCurrencyIcon, WalletText } from '../../../../../../../../components';
+import { WalletCurrencyCard, WalletMarketCurrencyIcon } from '../../../../../../../../components';
 import { THooks, TPlatforms } from '../../../../../../../../types';
 import { MARKET_TYPE } from '../../../../../../../cfd/constants';
 import { getMarketType } from '../../../../../../helpers';
@@ -57,13 +57,13 @@ const TransactionsCompletedRowAccountDetails: React.FC<TProps> = ({
                 className='wallets-transactions-completed-row-account-details__type-and-wallet-name 
             wallets-transactions-completed-row-account-details__column'
             >
-                <WalletText color='primary' size='xs'>
+                <Text color='primary' size='xs'>
                     {displayActionType}
-                </WalletText>
+                </Text>
                 <div className='wallets-transactions-completed-row-account-details__wallet-name'>
-                    <WalletText color='general' size='xs' weight='bold'>
+                    <Text color='general' size='xs' weight='bold'>
                         {displayAccountName}
-                    </WalletText>
+                    </Text>
                 </div>
                 {!isDesktop && (
                     <Text
diff --git a/packages/wallets/src/features/cfd/flows/CTrader/AddedCTraderAccountsList/AddedCTraderAccountsList.tsx b/packages/wallets/src/features/cfd/flows/CTrader/AddedCTraderAccountsList/AddedCTraderAccountsList.tsx
index 6d4e43618575..90daaef76b4c 100644
--- a/packages/wallets/src/features/cfd/flows/CTrader/AddedCTraderAccountsList/AddedCTraderAccountsList.tsx
+++ b/packages/wallets/src/features/cfd/flows/CTrader/AddedCTraderAccountsList/AddedCTraderAccountsList.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { useCtraderAccountsList } from '@deriv/api-v2';
 import { LabelPairedChevronRightCaptionRegularIcon } from '@deriv/quill-icons';
+import { Text } from '@deriv-com/ui';
 import { TradingAccountCard } from '../../../../../components';
-import { WalletText } from '../../../../../components/Base';
 import { useModal } from '../../../../../components/ModalProvider';
 import { PlatformDetails } from '../../../constants';
 import { MT5TradeModal } from '../../../modals';
@@ -20,11 +20,11 @@ const AddedCTraderAccountsList: React.FC = () => {
                 >
                     <TradingAccountCard.Icon>{PlatformDetails.ctrader.icon}</TradingAccountCard.Icon>
                     <TradingAccountCard.Content>
-                        <WalletText size='sm'>{PlatformDetails.ctrader.title}</WalletText>
-                        <WalletText size='sm' weight='bold'>
+                        <Text size='sm'>{PlatformDetails.ctrader.title}</Text>
+                        <Text size='sm' weight='bold'>
                             {account?.display_balance}
-                        </WalletText>
-                        <WalletText size='xs'>{account.login}</WalletText>
+                        </Text>
+                        <Text size='xs'>{account.login}</Text>
                     </TradingAccountCard.Content>
                     <TradingAccountCard.Button>
                         <LabelPairedChevronRightCaptionRegularIcon width={16} />
diff --git a/packages/wallets/src/features/cfd/flows/OtherCFDs/Dxtrade/AddedDxtradeAccountsList/AddedDxtradeAccountsList.tsx b/packages/wallets/src/features/cfd/flows/OtherCFDs/Dxtrade/AddedDxtradeAccountsList/AddedDxtradeAccountsList.tsx
index c183d4678440..60d8cc1c965a 100644
--- a/packages/wallets/src/features/cfd/flows/OtherCFDs/Dxtrade/AddedDxtradeAccountsList/AddedDxtradeAccountsList.tsx
+++ b/packages/wallets/src/features/cfd/flows/OtherCFDs/Dxtrade/AddedDxtradeAccountsList/AddedDxtradeAccountsList.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { useDxtradeAccountsList } from '@deriv/api-v2';
 import { LabelPairedChevronRightCaptionRegularIcon } from '@deriv/quill-icons';
+import { Text } from '@deriv-com/ui';
 import { TradingAccountCard } from '../../../../../../components';
-import { WalletText } from '../../../../../../components/Base';
 import { useModal } from '../../../../../../components/ModalProvider';
 import { PlatformDetails } from '../../../../constants';
 import { MT5TradeModal } from '../../../../modals';
@@ -20,11 +20,11 @@ const AddedDxtradeAccountsList: React.FC = () => {
                 >
                     <TradingAccountCard.Icon>{PlatformDetails.dxtrade.icon}</TradingAccountCard.Icon>
                     <TradingAccountCard.Content>
-                        <WalletText size='sm'>{PlatformDetails.dxtrade.title}</WalletText>
-                        <WalletText size='sm' weight='bold'>
+                        <Text size='sm'>{PlatformDetails.dxtrade.title}</Text>
+                        <Text size='sm' weight='bold'>
                             {account?.display_balance}
-                        </WalletText>
-                        <WalletText size='xs'>{account?.login}</WalletText>
+                        </Text>
+                        <Text size='xs'>{account?.login}</Text>
                     </TradingAccountCard.Content>
                     <TradingAccountCard.Button>
                         <LabelPairedChevronRightCaptionRegularIcon width={16} />
diff --git a/packages/wallets/src/features/cfd/flows/OtherCFDs/Dxtrade/AvailableDxtradeAccountsList/AvailableDxtradeAccountsList.tsx b/packages/wallets/src/features/cfd/flows/OtherCFDs/Dxtrade/AvailableDxtradeAccountsList/AvailableDxtradeAccountsList.tsx
index ddfced53712d..6db54ac4872c 100644
--- a/packages/wallets/src/features/cfd/flows/OtherCFDs/Dxtrade/AvailableDxtradeAccountsList/AvailableDxtradeAccountsList.tsx
+++ b/packages/wallets/src/features/cfd/flows/OtherCFDs/Dxtrade/AvailableDxtradeAccountsList/AvailableDxtradeAccountsList.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { LabelPairedChevronRightCaptionRegularIcon } from '@deriv/quill-icons';
 import { Localize } from '@deriv-com/translations';
+import { Text } from '@deriv-com/ui';
 import { TradingAccountCard } from '../../../../../../components';
-import { WalletText } from '../../../../../../components/Base';
 import { useModal } from '../../../../../../components/ModalProvider';
 import { PlatformDetails } from '../../../../constants';
 import { DxtradeEnterPasswordModal } from '../../../../modals';
@@ -17,11 +17,11 @@ const AvailableDxtradeAccountsList: React.FC = () => {
             </TradingAccountCard.Icon>
             <TradingAccountCard.Content>
                 <p className='wallets-available-dxtrade__details-title'>
-                    <WalletText size='sm'>Deriv X</WalletText>
+                    <Text size='sm'>Deriv X</Text>
                 </p>
-                <WalletText size='xs'>
+                <Text size='xs'>
                     <Localize i18n_default_text='CFDs on financial and derived instruments via a customisable platform.' />
-                </WalletText>
+                </Text>
             </TradingAccountCard.Content>
             <TradingAccountCard.Button>
                 <LabelPairedChevronRightCaptionRegularIcon width={16} />
diff --git a/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsDescription.tsx b/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsDescription.tsx
index 0d87f0d790fb..33849e0de06f 100644
--- a/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsDescription.tsx
+++ b/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsDescription.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import { localize } from '@deriv-com/translations';
-import { Tooltip } from '@deriv-com/ui';
-import { WalletText } from '../../../../components';
+import { Text, Tooltip } from '@deriv-com/ui';
 import InfoIcon from '../../../../public/images/ic-info-outline.svg';
 import { THooks, TPlatforms } from '../../../../types';
 import { CFD_PLATFORMS } from '../../constants';
@@ -40,19 +39,19 @@ const CompareAccountsDescription = ({
             })}
         >
             <div className='wallets-compare-accounts-text-container__separator'>
-                <WalletText align='center' as='h1' size='xl' weight='bold'>
+                <Text align='center' as='h1' size='xl' weight='bold'>
                     {jurisdictionData.leverage}
-                </WalletText>
-                <WalletText align='center' as='p' size='2xs'>
+                </Text>
+                <Text align='center' as='p' size='2xs'>
                     {!isEuRegion ? jurisdictionData.leverage_description : 'Leverage'}
-                </WalletText>
+                </Text>
             </div>
             {!isEuRegion && (
                 <div className='wallets-compare-accounts-text-container__separator'>
                     <div className='wallets-compare-accounts-title__separator'>
-                        <WalletText align='center' as='h1' size='xl' weight='bold'>
+                        <Text align='center' as='h1' size='xl' weight='bold'>
                             {jurisdictionData.spread}
-                        </WalletText>
+                        </Text>
                         {marketTypeShortCode === MARKET_TYPE_SHORTCODE.ALL_ZERO_SPREAD_BVI && (
                             <Tooltip
                                 as='div'
@@ -65,41 +64,41 @@ const CompareAccountsDescription = ({
                             </Tooltip>
                         )}
                     </div>
-                    <WalletText align='center' as='p' size='2xs'>
+                    <Text align='center' as='p' size='2xs'>
                         {jurisdictionData.spread_description}
-                    </WalletText>
+                    </Text>
                 </div>
             )}
             {!isDemo && (
                 <React.Fragment>
                     <div className='wallets-compare-accounts-text-container__separator'>
-                        <WalletText align='center' as='h1' size='sm' weight='bold'>
+                        <Text align='center' as='h1' size='sm' weight='bold'>
                             {jurisdictionData.counterparty_company}
-                        </WalletText>
-                        <WalletText align='center' as='p' size='2xs'>
+                        </Text>
+                        <Text align='center' as='p' size='2xs'>
                             {jurisdictionData.counterparty_company_description}
-                        </WalletText>
+                        </Text>
                     </div>
                     <div className='wallets-compare-accounts-text-container__separator'>
-                        <WalletText align='center' as='h1' size='sm' weight='bold'>
+                        <Text align='center' as='h1' size='sm' weight='bold'>
                             {jurisdictionData.jurisdiction}
-                        </WalletText>
-                        <WalletText align='center' as='p' size='2xs'>
+                        </Text>
+                        <Text align='center' as='p' size='2xs'>
                             {jurisdictionData.jurisdiction_description}
-                        </WalletText>
+                        </Text>
                     </div>
                     <div className='wallets-compare-accounts-text-container__separator'>
-                        <WalletText align='center' as='h1' size='sm' weight='bold'>
+                        <Text align='center' as='h1' size='sm' weight='bold'>
                             {jurisdictionData.regulator}
-                        </WalletText>
+                        </Text>
                         {jurisdictionData.regulator_license && (
-                            <WalletText align='center' as='p' size='2xs'>
+                            <Text align='center' as='p' size='2xs'>
                                 {jurisdictionData.regulator_license}
-                            </WalletText>
+                            </Text>
                         )}
-                        <WalletText align='center' as='p' size='2xs'>
+                        <Text align='center' as='p' size='2xs'>
                             {jurisdictionData.regulator_description}
-                        </WalletText>
+                        </Text>
                     </div>
                 </React.Fragment>
             )}
diff --git a/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsPlatformLabel.tsx b/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsPlatformLabel.tsx
index 89e385ae0962..39f2a580c1e0 100644
--- a/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsPlatformLabel.tsx
+++ b/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsPlatformLabel.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { WalletText } from '../../../../components';
+import { Text } from '@deriv-com/ui';
 import { TPlatforms } from '../../../../types';
 import { getPlatformType } from './compareAccountsConfig';
 import { headerColor, platformLabel } from './constants';
@@ -20,9 +20,9 @@ const CompareAccountsPlatformLabel = ({ platform }: TCompareAccountsPlatformLabe
             `}
             data-testid='dt_wallets_compare_accounts_platform_label'
         >
-            <WalletText align='center' as='p' color={headerColor[platformType]} size='xs' weight='bold'>
+            <Text align='center' as='p' color={headerColor[platformType]} size='xs' weight='bold'>
                 {platformLabel[platformType]}
-            </WalletText>
+            </Text>
         </div>
     );
 };
diff --git a/packages/wallets/src/features/cfd/screens/CompareAccounts/InstrumentsIconWithLabel.tsx b/packages/wallets/src/features/cfd/screens/CompareAccounts/InstrumentsIconWithLabel.tsx
index 9c6757d916a6..b3ca616e13ac 100644
--- a/packages/wallets/src/features/cfd/screens/CompareAccounts/InstrumentsIconWithLabel.tsx
+++ b/packages/wallets/src/features/cfd/screens/CompareAccounts/InstrumentsIconWithLabel.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { useDevice } from '@deriv-com/ui';
-import { WalletText } from '../../../../components';
+import { Text, useDevice } from '@deriv-com/ui';
 import getInstrumentsIcons from '../../../../public/images/tradingInstruments';
 import './InstrumentsIconWithLabel.scss';
 
@@ -24,9 +23,9 @@ const InstrumentsIconWithLabel = ({ highlighted, icon, isAsterisk, text }: TInst
         >
             {getInstrumentsIcons(!isDesktop)[icon]}
             <div className='wallets-compare-accounts-trading-instruments__text'>
-                <WalletText align='left' as='p' lineHeight='xs' size='xs' weight={isDesktop ? 'bold' : 'normal'}>
+                <Text align='left' as='p' lineHeight='xs' size='xs' weight={isDesktop ? 'bold' : 'normal'}>
                     {text}
-                </WalletText>
+                </Text>
             </div>
             {isAsterisk && <span className='wallets-compare-accounts-trading-instruments__span'>*</span>}
         </div>
diff --git a/packages/wallets/src/features/cfd/screens/DynamicLeverage/DynamicLeverageMarketCard.tsx b/packages/wallets/src/features/cfd/screens/DynamicLeverage/DynamicLeverageMarketCard.tsx
index 08cb99067761..d01b152f40ec 100644
--- a/packages/wallets/src/features/cfd/screens/DynamicLeverage/DynamicLeverageMarketCard.tsx
+++ b/packages/wallets/src/features/cfd/screens/DynamicLeverage/DynamicLeverageMarketCard.tsx
@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import { Localize, useTranslations } from '@deriv-com/translations';
-import { WalletText } from '../../../../components/Base';
+import { Text } from '@deriv-com/ui';
 import { THooks } from '../../../../types';
 import { DynamicLeverageTableColumnHeader } from './DynamicLeverageTableColumnHeader';
 import './DynamicLeverageMarketCard.scss';
@@ -24,22 +24,22 @@ export const DynamicLeverageMarketCard: FC<TDynamicLeverageMarketCardProps> = ({
     return (
         <div className='wallets-dynamic-leverage-modal__market'>
             <div className='wallets-dynamic-leverage-modal__market-title'>
-                <WalletText align='center' data-testid='dt_dynamic_leverage_market_title' size='sm' weight='bold'>
+                <Text align='center' data-testid='dt_dynamic_leverage_market_title' size='sm' weight='bold'>
                     {displayName}
-                </WalletText>
+                </Text>
                 {!!instruments.length && (
-                    <WalletText
+                    <Text
                         align='center'
                         data-testid='dt_dynamic_leverage_description_title'
                         fontStyle='italic'
                         size='2xs'
                     >
                         {`(${instruments.join(', ')})`}
-                    </WalletText>
+                    </Text>
                 )}
-                <WalletText align='center' color='error' data-testid='dt_dynamic_leverage_title' size='xs'>
+                <Text align='center' color='error' data-testid='dt_dynamic_leverage_title' size='xs'>
                     <Localize i18n_default_text='Up to {{min}}:{{max}}' values={{ max, min }} />
-                </WalletText>
+                </Text>
             </div>
             <div className='wallets-dynamic-leverage-modal__market-table'>
                 <div className='wallets-dynamic-leverage-modal__market-table-header-row'>
@@ -55,9 +55,9 @@ export const DynamicLeverageMarketCard: FC<TDynamicLeverageMarketCardProps> = ({
                         >
                             {Object.entries(columns).map(([columnKey, value]) => (
                                 <div key={`${displayName}_${columnKey}_${value}`}>
-                                    <WalletText align='center' size='sm'>
+                                    <Text align='center' size='sm'>
                                         {value}
-                                    </WalletText>
+                                    </Text>
                                 </div>
                             ))}
                         </div>
diff --git a/packages/wallets/src/features/cfd/screens/DynamicLeverage/DynamicLeverageTableColumnHeader.tsx b/packages/wallets/src/features/cfd/screens/DynamicLeverage/DynamicLeverageTableColumnHeader.tsx
index e75369b2b88c..2afefecbd870 100644
--- a/packages/wallets/src/features/cfd/screens/DynamicLeverage/DynamicLeverageTableColumnHeader.tsx
+++ b/packages/wallets/src/features/cfd/screens/DynamicLeverage/DynamicLeverageTableColumnHeader.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { WalletText } from '../../../../components/Base';
+import { Text } from '@deriv-com/ui';
 import './DynamicLeverageTableColumnHeader.scss';
 
 type TDynamicLeverageTableColumnHeader = {
@@ -9,11 +9,11 @@ type TDynamicLeverageTableColumnHeader = {
 
 export const DynamicLeverageTableColumnHeader: FC<TDynamicLeverageTableColumnHeader> = ({ subtitle, title }) => (
     <div className='wallets-dynamic-leverage-screen__table-cell'>
-        <WalletText align='center' size='sm' weight='bold'>
+        <Text align='center' size='sm' weight='bold'>
             {title}
-        </WalletText>
-        <WalletText align='center' size='xs'>
+        </Text>
+        <Text align='center' size='xs'>
             {subtitle}
-        </WalletText>
+        </Text>
     </div>
 );
diff --git a/packages/wallets/src/features/cfd/screens/Jurisdiction/JurisdictionCard/JurisdictionCardBack.tsx b/packages/wallets/src/features/cfd/screens/Jurisdiction/JurisdictionCard/JurisdictionCardBack.tsx
index c69866c3f92b..fde27371d0b6 100644
--- a/packages/wallets/src/features/cfd/screens/Jurisdiction/JurisdictionCard/JurisdictionCardBack.tsx
+++ b/packages/wallets/src/features/cfd/screens/Jurisdiction/JurisdictionCard/JurisdictionCardBack.tsx
@@ -1,7 +1,6 @@
 import React, { Dispatch, FC, SetStateAction } from 'react';
 import { LegacyArrowLeft2pxIcon } from '@deriv/quill-icons';
-import { Divider } from '@deriv-com/ui';
-import { WalletText } from '../../../../../components/Base/WalletText';
+import { Divider, Text } from '@deriv-com/ui';
 import IdCardIcon from '../../../../../public/images/ic-id-card.svg';
 import DocumentIcon from '../../../../../public/images/ic-id-number.svg';
 import NameAndAddressIcon from '../../../../../public/images/ic-name-and-address.svg';
@@ -49,14 +48,14 @@ const JurisdictionCardBack: FC<TJurisdictionCardBackProps> = ({ setIsFlipped, ve
                         setIsFlipped(false);
                     }}
                 />
-                <WalletText size='xs'>{verificationContents.shortDescription}</WalletText>
+                <Text size='xs'>{verificationContents.shortDescription}</Text>
                 {verificationDocs.map((verificationDocument: TJurisdictionCardItemVerificationItem, i) => {
                     return (
                         <div className='wallets-jurisdiction-card-back__row' key={`${verificationDocument}-${i}`}>
                             {verificationIconsMapper[verificationDocument]}
-                            <WalletText size='xs'>
+                            <Text size='xs'>
                                 {verificationContents.requiredVerificationDocs[verificationDocument]?.text}
-                            </WalletText>
+                            </Text>
                         </div>
                     );
                 })}
@@ -66,7 +65,7 @@ const JurisdictionCardBack: FC<TJurisdictionCardBackProps> = ({ setIsFlipped, ve
                     return (
                         <div className='wallets-jurisdiction-card-back__row' key={`${statusReference}-${i}`}>
                             {verificationStatusIconsMapper[statusReference.icon]}
-                            <WalletText size='xs'>{statusReference.text}</WalletText>
+                            <Text size='xs'>{statusReference.text}</Text>
                         </div>
                     );
                 })}
diff --git a/packages/wallets/src/features/cfd/screens/Jurisdiction/JurisdictionCard/JurisdictionCardTag.tsx b/packages/wallets/src/features/cfd/screens/Jurisdiction/JurisdictionCard/JurisdictionCardTag.tsx
index 6008dc21dbd5..0e5b83e15def 100644
--- a/packages/wallets/src/features/cfd/screens/Jurisdiction/JurisdictionCard/JurisdictionCardTag.tsx
+++ b/packages/wallets/src/features/cfd/screens/Jurisdiction/JurisdictionCard/JurisdictionCardTag.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { WalletText } from '../../../../../components/Base';
+import { Text } from '@deriv-com/ui';
 import './JurisdictionCardTag.scss';
 
 type TJurisdictionCardTagProps = {
@@ -9,9 +9,9 @@ type TJurisdictionCardTagProps = {
 const JurisdictionCardTag: React.FC<TJurisdictionCardTagProps> = ({ tag }) => {
     return (
         <div className='wallets-jurisdiction-card-tag'>
-            <WalletText align='center' color='blue' lineHeight='3xs' size='xs' weight='bold'>
+            <Text align='center' color='blue' lineHeight='3xs' size='xs' weight='bold'>
                 {tag}
-            </WalletText>
+            </Text>
         </div>
     );
 };
diff --git a/packages/wallets/src/features/cfd/screens/Jurisdiction/JurisdictionScreen.tsx b/packages/wallets/src/features/cfd/screens/Jurisdiction/JurisdictionScreen.tsx
index 59e2d93ba19c..90b4e6839026 100644
--- a/packages/wallets/src/features/cfd/screens/Jurisdiction/JurisdictionScreen.tsx
+++ b/packages/wallets/src/features/cfd/screens/Jurisdiction/JurisdictionScreen.tsx
@@ -2,7 +2,7 @@ import React, { FC, useEffect, useMemo } from 'react';
 import classNames from 'classnames';
 import { useDebounceValue } from 'usehooks-ts';
 import { useAvailableMT5Accounts, useMT5AccountsList } from '@deriv/api-v2';
-import { WalletText } from '../../../../components/Base/WalletText';
+import { Loader } from '@deriv-com/ui';
 import { useModal } from '../../../../components/ModalProvider';
 import { THooks } from '../../../../types';
 import { useDynamicLeverageModalState } from '../../components/DynamicLeverageContext';
@@ -49,7 +49,7 @@ const JurisdictionScreen: FC<TJurisdictionScreenProps> = ({
         setIsCheckBoxChecked(false);
     }, [selectedJurisdiction, setIsCheckBoxChecked]);
 
-    if (isLoading) return <WalletText>Loading...</WalletText>;
+    if (isLoading) return <Loader />;
 
     return (
         <div
diff --git a/packages/wallets/src/features/cfd/screens/Jurisdiction/__tests__/JurisdictionScreen.spec.tsx b/packages/wallets/src/features/cfd/screens/Jurisdiction/__tests__/JurisdictionScreen.spec.tsx
index 5659ba381a4a..9723b9957736 100644
--- a/packages/wallets/src/features/cfd/screens/Jurisdiction/__tests__/JurisdictionScreen.spec.tsx
+++ b/packages/wallets/src/features/cfd/screens/Jurisdiction/__tests__/JurisdictionScreen.spec.tsx
@@ -68,7 +68,7 @@ describe('JurisdictionScreen', () => {
             />,
             { wrapper }
         );
-        expect(screen.getByText('Loading...')).toBeInTheDocument();
+        expect(screen.getByTestId('dt_derivs-loader')).toBeInTheDocument();
     });
 
     it('renders JurisdictionCard components correctly', () => {