diff --git a/public/assets/icons/IcClose.svg b/public/assets/icons/IcClose.svg
new file mode 100644
index 00000000..f1c68242
--- /dev/null
+++ b/public/assets/icons/IcClose.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="navigation / close">
+<path id="icon" d="M3.85355 3.14645L8 7.293L12.1464 3.14645C12.3417 2.95118 12.6583 2.95118 12.8536 3.14645C13.0488 3.34171 13.0488 3.65829 12.8536 3.85355L8.707 8L12.8536 12.1464C13.0488 12.3417 13.0488 12.6583 12.8536 12.8536C12.6583 13.0488 12.3417 13.0488 12.1464 12.8536L8 8.707L3.85355 12.8536C3.65829 13.0488 3.34171 13.0488 3.14645 12.8536C2.95118 12.6583 2.95118 12.3417 3.14645 12.1464L7.293 8L3.14645 3.85355C2.95118 3.65829 2.95118 3.34171 3.14645 3.14645C3.34171 2.95118 3.65829 2.95118 3.85355 3.14645Z" fill="#333333"/>
+</g>
+</svg>
diff --git a/src/components/flyout/flyout-block-group.tsx b/src/components/flyout/flyout-block-group.tsx
index 4396e703..84b5ba46 100644
--- a/src/components/flyout/flyout-block-group.tsx
+++ b/src/components/flyout/flyout-block-group.tsx
@@ -43,7 +43,7 @@ const FlyoutBlockGroup = ({ onInfoClick, block_node, is_active, should_hide_disp
                         <div className='flyout__item-header'>
                             <Text
                                 size={is_variables_get ? 'sm' : 'xs'}
-                                line_height={is_variables_get ? undefined : 'xl'}
+                                lineHeight={is_variables_get ? undefined : 'xl'}
                                 weight={is_variables_get ? undefined : 'bold'}
                             >
                                 {display_name}
diff --git a/src/components/flyout/flyout.tsx b/src/components/flyout/flyout.tsx
index d5afa4d5..df382099 100644
--- a/src/components/flyout/flyout.tsx
+++ b/src/components/flyout/flyout.tsx
@@ -82,7 +82,7 @@ const FlyoutContent = (props: TFlyoutContent) => {
                 )}
                 {is_empty ? (
                     <div className='flyout__search-empty'>
-                        <Text as='h2' weight='bold' line_height='xxs'>
+                        <Text as='h2' weight='bold' lineHeight='xs'>
                             {localize('No results found')}
                         </Text>
                     </div>
diff --git a/src/components/journal/journal.tsx b/src/components/journal/journal.tsx
index b432ef83..a9ecedbe 100644
--- a/src/components/journal/journal.tsx
+++ b/src/components/journal/journal.tsx
@@ -66,28 +66,28 @@ const Journal = observer(() => {
                                     weight='bold'
                                     align='center'
                                     color='less-prominent'
-                                    line_height='xxs'
+                                    lineHeight='xs'
                                     className='journal-empty__header'
                                 >
                                     {localize('There are no messages to display')}
                                 </Text>
                                 <div className='journal-empty__message'>
-                                    <Text size='xxs' color='less-prominent'>
+                                    <Text size='xs' color='less-prominent'>
                                         {localize('Here are the possible reasons:')}
                                     </Text>
                                     <ul className='journal-empty__list'>
                                         <li>
-                                            <Text size='xxs' color='less-prominent'>
+                                            <Text size='xs' color='less-prominent'>
                                                 {localize('The bot is not running')}
                                             </Text>
                                         </li>
                                         <li>
-                                            <Text size='xxs' color='less-prominent'>
+                                            <Text size='xs' color='less-prominent'>
                                                 {localize('The stats are cleared')}
                                             </Text>
                                         </li>
                                         <li>
-                                            <Text size='xxs' color='less-prominent'>
+                                            <Text size='xs' color='less-prominent'>
                                                 {localize('All messages are filtered out')}
                                             </Text>
                                         </li>
diff --git a/src/components/shared_ui/checkbox/checkbox.tsx b/src/components/shared_ui/checkbox/checkbox.tsx
index b5166922..e7e91a67 100644
--- a/src/components/shared_ui/checkbox/checkbox.tsx
+++ b/src/components/shared_ui/checkbox/checkbox.tsx
@@ -18,7 +18,7 @@ type TCheckBoxProps = Omit<React.HTMLProps<HTMLInputElement>, 'value' | 'label'>
     value?: boolean;
     withTabIndex?: number;
     has_error?: boolean;
-    label_line_height?: string;
+    label_lineHeight?: string;
 };
 
 const Checkbox = React.forwardRef<HTMLInputElement, TCheckBoxProps>(
@@ -30,7 +30,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, TCheckBoxProps>(
             id,
             label,
             label_font_size = 'xs',
-            label_line_height = 'unset',
+            label_lineHeight = 'unset',
             defaultChecked,
             onChange, // This needs to be here so it's not included in `otherProps`
             value = false,
@@ -93,7 +93,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, TCheckBoxProps>(
                 </span>
                 <Text
                     size={label_font_size}
-                    line_height={label_line_height}
+                    lineHeight={label_lineHeight}
                     className={classNames('dc-checkbox__label', classNameLabel, {
                         'dc-checkbox__label--error': has_error,
                     })}
diff --git a/src/components/shared_ui/contract-card/contract-card-items/contract-card-footer.tsx b/src/components/shared_ui/contract-card/contract-card-items/contract-card-footer.tsx
index 9b10cbb9..956e019e 100644
--- a/src/components/shared_ui/contract-card/contract-card-items/contract-card-footer.tsx
+++ b/src/components/shared_ui/contract-card/contract-card-items/contract-card-footer.tsx
@@ -101,7 +101,7 @@ const CardFooter = ({
                                 as='div'
                                 size='xxxs'
                                 color='less-prominent'
-                                line_height='s'
+                                LineHeight='sm'
                                 className='lookbacks--note'
                             >
                                 <Localize
diff --git a/src/components/shared_ui/contract-card/contract-card-items/lookbacks-card-body.tsx b/src/components/shared_ui/contract-card/contract-card-items/lookbacks-card-body.tsx
index 1789974f..bbafbb69 100644
--- a/src/components/shared_ui/contract-card/contract-card-items/lookbacks-card-body.tsx
+++ b/src/components/shared_ui/contract-card/contract-card-items/lookbacks-card-body.tsx
@@ -90,7 +90,7 @@ const LookBacksCardBody = ({
                 </MobileWrapper>
             </div>
             <ContractCardItem className='dc-contract-card-item__payout-limit'>
-                <Text align='center' line_height='l' size='xxs'>
+                <Text align='center' LineHeight='lg' size='xxs'>
                     {getPayoutLimit(contract_type, multiplier)}
                 </Text>
             </ContractCardItem>
diff --git a/src/components/shared_ui/contract-card/result-overlay/result-overlay.tsx b/src/components/shared_ui/contract-card/result-overlay/result-overlay.tsx
index 929b20ae..680d8716 100644
--- a/src/components/shared_ui/contract-card/result-overlay/result-overlay.tsx
+++ b/src/components/shared_ui/contract-card/result-overlay/result-overlay.tsx
@@ -89,7 +89,7 @@ const ResultOverlay = ({
                         <Text
                             weight='bold'
                             size='s'
-                            line_height='xxl'
+                            lineHeight='2xl'
                             color={is_contract_won ? 'profit-success' : 'loss-danger'}
                         >
                             <Money amount={payout_info} currency={currency} has_sign show_currency />
diff --git a/src/components/shared_ui/currency-badge/currency-badge.tsx b/src/components/shared_ui/currency-badge/currency-badge.tsx
index 732a33a4..0b0961e6 100644
--- a/src/components/shared_ui/currency-badge/currency-badge.tsx
+++ b/src/components/shared_ui/currency-badge/currency-badge.tsx
@@ -7,7 +7,7 @@ type TCurrencyBadgeProps = {
 };
 
 const CurrencyBadge = ({ currency }: TCurrencyBadgeProps) => (
-    <Text className='dc-currency-badge' color='colored-background' line_height='unset' size='xxxs' weight='bold'>
+    <Text className='dc-currency-badge' color='colored-background' lineHeight='unset' size='xxxs' weight='bold'>
         {getCurrencyDisplayCode(currency)}
     </Text>
 );
diff --git a/src/components/shared_ui/mobile-dialog/mobile-dialog.tsx b/src/components/shared_ui/mobile-dialog/mobile-dialog.tsx
index 9828501a..2695a640 100644
--- a/src/components/shared_ui/mobile-dialog/mobile-dialog.tsx
+++ b/src/components/shared_ui/mobile-dialog/mobile-dialog.tsx
@@ -128,7 +128,7 @@ const MobileDialog = (props: React.PropsWithChildren<TMobileDialog>) => {
                                 size='xs'
                                 color='prominent'
                                 weight='bold'
-                                line_height='unset'
+                                lineHeight='unset'
                                 className='dc-mobile-dialog__title'
                             >
                                 {renderTitle ? renderTitle() : title}
diff --git a/src/components/shared_ui/mobile-full-page-modal/mobile-full-page-modal.tsx b/src/components/shared_ui/mobile-full-page-modal/mobile-full-page-modal.tsx
index 920fe2b5..0c5181bb 100644
--- a/src/components/shared_ui/mobile-full-page-modal/mobile-full-page-modal.tsx
+++ b/src/components/shared_ui/mobile-full-page-modal/mobile-full-page-modal.tsx
@@ -93,7 +93,7 @@ const MobileFullPageModal = ({
                         {renderPageHeader && renderPageHeader()}
                         <div className='dc-mobile-full-page-modal__header-text'>
                             {renderPageHeaderElement ?? (
-                                <Text as='p' color='prominent' line_height='m' size='sm' weight='bold'>
+                                <Text as='p' color='prominent' LineHeight='md' size='sm' weight='bold'>
                                     {page_header_text}
                                 </Text>
                             )}
diff --git a/src/components/shared_ui/popover/popover.tsx b/src/components/shared_ui/popover/popover.tsx
index b8fda5b9..c27f1a5b 100644
--- a/src/components/shared_ui/popover/popover.tsx
+++ b/src/components/shared_ui/popover/popover.tsx
@@ -200,7 +200,7 @@ const Popover = ({
                                             {message}
                                         </Text>
                                     )) || (
-                                        <Text line_height='m' size='xxs' className='dc-popover__bubble__text'>
+                                        <Text LineHeight='md' size='xxs' className='dc-popover__bubble__text'>
                                             {message}
                                         </Text>
                                     )}
diff --git a/src/components/shared_ui/select-native/select-native.tsx b/src/components/shared_ui/select-native/select-native.tsx
index 0df56abc..004a7410 100644
--- a/src/components/shared_ui/select-native/select-native.tsx
+++ b/src/components/shared_ui/select-native/select-native.tsx
@@ -216,7 +216,7 @@ const SelectNative = ({
                 as='p'
                 color='less-prominent'
                 size='xxs'
-                line_height='l'
+                LineHeight='lg'
                 className={classNames('dc-select-native__hint', classNameHint)}
             >
                 {hint}
diff --git a/src/components/shared_ui/text/text.tsx b/src/components/shared_ui/text/text.tsx
index 69ba54a4..1bcb1cca 100644
--- a/src/components/shared_ui/text/text.tsx
+++ b/src/components/shared_ui/text/text.tsx
@@ -6,7 +6,7 @@ import { isEmptyObject } from '@/components/shared';
 type TTextProps = Omit<HTMLProps<HTMLElement>, 'size'> & {
     align?: string;
     weight?: string;
-    line_height?: string;
+    lineHeight?: string;
     styles?: CSSProperties;
     size?: string;
 };
@@ -17,7 +17,7 @@ const Text = ({
     color = 'general',
     align = 'left',
     weight = 'normal',
-    line_height = 'm',
+    lineHeight = 'm',
     as,
     className,
     styles,
@@ -26,7 +26,7 @@ const Text = ({
     const class_styles = {
         '--text-size': `var(--text-size-${size})`,
         '--text-color': `var(--text-${color})`,
-        '--text-lh': `var(--text-lh-${line_height})`,
+        '--text-lh': `var(--text-lh-${lineHeight})`,
         '--text-weight': `var(--text-weight-${weight})`,
         '--text-align': `var(--text-align-${align})`,
     };
@@ -39,7 +39,7 @@ const Text = ({
             setStyle(class_styles);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [size, color, line_height, weight, align]);
+    }, [size, color, lineHeight, weight, align]);
     const class_names = classNames('dc-text', className);
     return React.createElement(as || 'span', { className: class_names, style, ...props }, children);
 };
diff --git a/src/components/summary/summary-card.tsx b/src/components/summary/summary-card.tsx
index 18c473f4..6b987a7d 100644
--- a/src/components/summary/summary-card.tsx
+++ b/src/components/summary/summary-card.tsx
@@ -97,7 +97,7 @@ const SummaryCard = observer(({ contract_info, is_contract_loading }: TSummaryCa
                 </ContractCard>
             )}
             {!is_contract_loading && !contract_info && (
-                <Text as='p' line_height='s' size='xs'>
+                <Text as='p' LineHeight='sm' size='xs'>
                     {localize('When you’re ready to trade, hit ')}
                     <strong>{localize('Run')}</strong>
                     {localize('. You’ll be able to track your bot’s performance here.')}
diff --git a/src/components/transactions/transactions.tsx b/src/components/transactions/transactions.tsx
index 748ee353..c31774cd 100644
--- a/src/components/transactions/transactions.tsx
+++ b/src/components/transactions/transactions.tsx
@@ -200,13 +200,13 @@ const Transactions = observer(({ is_drawer_open }: TTransactions) => {
                                                 weight='bold'
                                                 align='center'
                                                 color='less-prominent'
-                                                line_height='xxs'
+                                                lineHeight='xs'
                                                 className='transactions-empty__header'
                                             >
                                                 {localize('There are no transactions to display')}
                                             </Text>
                                             <div className='transactions-empty__message'>
-                                                <Text size='xxs' color='less-prominent'>
+                                                <Text size='xs' color='less-prominent'>
                                                     {localize('Here are the possible reasons:')}
                                                 </Text>
                                                 <ul className='transactions-empty__list'>
diff --git a/src/pages/dashboard/cards.tsx b/src/pages/dashboard/cards.tsx
index c7dcac0e..65f502bf 100644
--- a/src/pages/dashboard/cards.tsx
+++ b/src/pages/dashboard/cards.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { observer } from 'mobx-react-lite';
 
+import { localize } from '@deriv-com/translations';
 import { Dialog, Text } from '@deriv-com/ui';
 
 import { NOTIFICATION_TYPE } from '@/components/bot-notification/bot-notification-utils';
@@ -11,7 +12,7 @@ import MobileFullPageModal from '@/components/shared_ui/mobile-full-page-modal';
 import MobileWrapper from '@/components/shared_ui/mobile-wrapper';
 import { DBOT_TABS } from '@/constants/bot-contents';
 import { useStore } from '@/hooks/useStore';
-import { Icon, localize } from '@/utils/tmp/dummy';
+import { Icon } from '@/utils/tmp/dummy';
 
 import { rudderStackSendQsOpenEventFromDashboard } from '../bot-builder/quick-strategy/analytics/rudderstack-quick-strategy';
 
@@ -129,7 +130,7 @@ const Cards = observer(({ is_mobile, has_dashboard_strategies }: TCardProps) =>
                                         method();
                                     }}
                                 />
-                                <Text color='prominent' size={is_mobile ? 'xxs' : 'xs'}>
+                                <Text color='prominent' size='sm'>
                                     {content}
                                 </Text>
                             </div>
diff --git a/src/pages/dashboard/dashboard.tsx b/src/pages/dashboard/dashboard.tsx
index 6581aeb8..1a070327 100644
--- a/src/pages/dashboard/dashboard.tsx
+++ b/src/pages/dashboard/dashboard.tsx
@@ -2,10 +2,10 @@ import React from 'react';
 import classNames from 'classnames';
 import { observer } from 'mobx-react-lite';
 
+import { localize } from '@deriv-com/translations';
 import { Text } from '@deriv-com/ui';
 
 import { useStore } from '@/hooks/useStore';
-import { localize } from '@/utils/tmp/dummy';
 
 import OnboardTourHandler from '../tutorials/dbot-tours/onboarding-tour';
 
@@ -45,22 +45,15 @@ const DashboardComponent = observer(({ handleTabChange }: TMobileIconGuide) => {
                             })}
                         >
                             {!has_dashboard_strategies && (
-                                <Text
-                                    className='title'
-                                    as='h2'
-                                    color='prominent'
-                                    size={is_mobile ? 's' : 'sm'}
-                                    line_height='xxl'
-                                    weight='bold'
-                                >
+                                <Text className='title' as='h2' color='prominent' size='lg' weight='bold'>
                                     {localize('Load or build your bot')}
                                 </Text>
                             )}
                             <Text
                                 as='p'
                                 color='prominent'
-                                line_height='s'
-                                size={is_mobile ? 'xxs' : 's'}
+                                LineHeight='sm'
+                                size='md'
                                 className={classNames('subtitle', { 'subtitle__has-list': has_dashboard_strategies })}
                             >
                                 {localize(
diff --git a/src/pages/dashboard/info-panel.tsx b/src/pages/dashboard/info-panel.tsx
index 10756b82..d2cbefc2 100644
--- a/src/pages/dashboard/info-panel.tsx
+++ b/src/pages/dashboard/info-panel.tsx
@@ -12,9 +12,6 @@ import { Icon } from '@/utils/tmp/dummy';
 import { SIDEBAR_INTRO } from './constants';
 
 const InfoPanel = observer(() => {
-    const {
-        ui: { is_mobile },
-    } = useStore();
     const { dashboard } = useStore();
     const {
         active_tour,
@@ -42,14 +39,14 @@ const InfoPanel = observer(() => {
     const renderInfo = () => (
         <div className='db-info-panel'>
             <div data-testid='close-icon' className='db-info-panel__close-action' onClick={handleClose}>
-                <Icon width='1rem' height='1rem' icon='IcCloseIconDbot' />
+                <Icon width='1rem' height='1rem' icon='IcClose' />
             </div>
 
             {SIDEBAR_INTRO.map(sidebar_item => {
                 const { label, content, link } = sidebar_item;
                 return (
                     <div key={`${label}-${content}`}>
-                        <Text color='prominent' line_height='xxl' size={is_mobile ? 's' : 'm'} weight='bold' as='h1'>
+                        <Text color='prominent' lineHeight='6xl' size='lg' weight='bold' as='h1'>
                             {label}
                         </Text>
                         {content.map(text => (
@@ -59,10 +56,10 @@ const InfoPanel = observer(() => {
                                     'db-info-panel__content': link,
                                 })}
                                 color='prominent'
-                                line_height='xl'
+                                lineHeight='3xl'
                                 as='p'
                                 onClick={() => switchTab(link, label, text.faq_id)}
-                                size={is_mobile ? 'xxs' : 's'}
+                                size='sm'
                             >
                                 {text.data}
                             </Text>
diff --git a/src/pages/dashboard/load-bot-preview/delete-dialog.tsx b/src/pages/dashboard/load-bot-preview/delete-dialog.tsx
index 63facb06..25cf3ea0 100644
--- a/src/pages/dashboard/load-bot-preview/delete-dialog.tsx
+++ b/src/pages/dashboard/load-bot-preview/delete-dialog.tsx
@@ -82,13 +82,13 @@ const DeleteDialog = observer(() => {
                 has_close_icon
             >
                 <div>
-                    <Text color='prominent' line_height='s' size='xs'>
+                    <Text color='prominent' LineHeight='sm' size='xs'>
                         {localize('Your bot will be permanently deleted when you hit ')}
                         <strong>{localize('Yes, delete.')}</strong>
                     </Text>
                 </div>
                 <div>
-                    <Text color='prominent' line_height='xl' size='xs'>
+                    <Text color='prominent' lineHeight='xl' size='xs'>
                         {localize('Are you sure you want to delete it?')}
                     </Text>
                 </div>
diff --git a/src/pages/dashboard/load-bot-preview/icon-radio.tsx b/src/pages/dashboard/load-bot-preview/icon-radio.tsx
index 02ce09aa..aebf716f 100644
--- a/src/pages/dashboard/load-bot-preview/icon-radio.tsx
+++ b/src/pages/dashboard/load-bot-preview/icon-radio.tsx
@@ -31,9 +31,9 @@ const IconRadio = ({ icon, text, google_drive_connected, onDriveConnect }: TIcon
                 <Text
                     as='p'
                     align='center'
-                    size='xxs'
+                    size='xs'
                     color={is_drive_radio && !google_drive_connected ? 'disabled' : 'prominent'}
-                    line_height='s'
+                    LineHeight='sm'
                     className='save-type__radio-text'
                 >
                     {localize(text)}
diff --git a/src/pages/dashboard/load-bot-preview/recent-workspace.tsx b/src/pages/dashboard/load-bot-preview/recent-workspace.tsx
index 3c942d03..7d2a74a2 100644
--- a/src/pages/dashboard/load-bot-preview/recent-workspace.tsx
+++ b/src/pages/dashboard/load-bot-preview/recent-workspace.tsx
@@ -136,7 +136,7 @@ const RecentWorkspace = observer(({ workspace, index }: TRecentWorkspace) => {
     };
 
     const is_active_mobile = selected_strategy_id === workspace.id && is_dropdown_visible;
-    const text_size = is_desktop ? 'xs' : 'xxs';
+    const text_size = 'xs';
 
     return (
         <div
@@ -156,13 +156,13 @@ const RecentWorkspace = observer(({ workspace, index }: TRecentWorkspace) => {
         >
             <div className='bot-list__item__label'>
                 <div className='text-wrapper' title={workspace.name}>
-                    <Text align='left' as='p' size={text_size} line_height='l'>
+                    <Text align='left' as='p' size={text_size} LineHeight='lg'>
                         {workspace.name}
                     </Text>
                 </div>
             </div>
             <div className='bot-list__item__time-stamp'>
-                <Text align='left' as='p' size={text_size} line_height='l'>
+                <Text align='left' as='p' size={text_size} LineHeight='lg'>
                     {timeSince(workspace.timestamp)}
                 </Text>
             </div>
@@ -174,7 +174,7 @@ const RecentWorkspace = observer(({ workspace, index }: TRecentWorkspace) => {
                     })}
                 />
                 <div className='bot-list__item__load-type__icon--saved'>
-                    <Text align='left' as='p' size={text_size} line_height='l'>
+                    <Text align='left' as='p' size={text_size} LineHeight='lg'>
                         {getSaveType(workspace.save_type)}
                     </Text>
                 </div>
diff --git a/src/pages/dashboard/load-bot-preview/save-modal.tsx b/src/pages/dashboard/load-bot-preview/save-modal.tsx
index d1350927..1238fff8 100644
--- a/src/pages/dashboard/load-bot-preview/save-modal.tsx
+++ b/src/pages/dashboard/load-bot-preview/save-modal.tsx
@@ -58,7 +58,7 @@ const SaveModalForm = ({
                 <ThemedScrollbars height={content_height} autohide>
                     <Form className={classNames({ 'form--active-keyboard': is_onscreen_keyboard_active })}>
                         <div className='modal__content'>
-                            <Text size='xs' line_height='l'>
+                            <Text size='xs' LineHeight='lg'>
                                 {localize(
                                     'Enter your bot name, choose to save on your computer or Google Drive, and hit '
                                 )}
@@ -126,7 +126,7 @@ const SaveModalForm = ({
                                             onChange={() => setFieldValue('save_as_collection', !save_as_collection)}
                                             defaultChecked={save_as_collection}
                                             label={
-                                                <Text size='xs' line_height='s' weight='bold'>
+                                                <Text size='xs' LineHeight='sm' weight='bold'>
                                                     <Localize i18n_default_text='Save as collection' />
                                                 </Text>
                                             }
diff --git a/src/pages/dashboard/stop-bot-modal-content.tsx b/src/pages/dashboard/stop-bot-modal-content.tsx
index ae68b19e..2f675714 100644
--- a/src/pages/dashboard/stop-bot-modal-content.tsx
+++ b/src/pages/dashboard/stop-bot-modal-content.tsx
@@ -46,28 +46,28 @@ const StopBotModalContent = ({
             >
                 {is_running && is_multiplier ? (
                     <>
-                        <Text as='p' line_height='s' size='xs' styles={{ paddingBottom: '2rem', paddingTop: '1rem' }}>
+                        <Text as='p' LineHeight='sm' size='xs' styles={{ paddingBottom: '2rem', paddingTop: '1rem' }}>
                             <Localize i18n_default_text='Close your contract now or keep it running. If you decide to keep it running, you can check and close it later on the ' />
-                            <Text weight='bold' as='span' line_height='s' size='xs'>
+                            <Text weight='bold' as='span' LineHeight='sm' size='xs'>
                                 <Localize i18n_default_text='Reports' />
                             </Text>
                             <Localize i18n_default_text='page.' />
                         </Text>
-                        <Text as='p' line_height='s' size='xs'>
+                        <Text as='p' LineHeight='sm' size='xs'>
                             <Localize i18n_default_text='The Quick Strategy you just created will be loaded to the workspace.' />
                         </Text>
                     </>
                 ) : (
                     <>
-                        <Text as='p' line_height='s' size='xs' styles={{ paddingBottom: '2rem', paddingTop: '1rem' }}>
+                        <Text as='p' LineHeight='sm' size='xs' styles={{ paddingBottom: '2rem', paddingTop: '1rem' }}>
                             <Localize i18n_default_text='Stopping the current bot will load the Quick Strategy you just created to the workspace.' />
                         </Text>
-                        <Text as='p' line_height='s' size='xs'>
+                        <Text as='p' LineHeight='sm' size='xs'>
                             <Localize i18n_default_text='Any open contracts can be viewed on the ' />
-                            <Text weight='bold' as='span' line_height='s' size='xs'>
+                            <Text weight='bold' as='span' LineHeight='sm' size='xs'>
                                 <Localize i18n_default_text='Reports' />
                             </Text>
-                            <Text as='span' line_height='s' size='xs' styles={{ paddingInlineStart: '0.4rem' }}>
+                            <Text as='span' LineHeight='sm' size='xs' styles={{ paddingInlineStart: '0.4rem' }}>
                                 <Localize i18n_default_text='page.' />
                             </Text>
                         </Text>
diff --git a/src/pages/dashboard/user-guide.tsx b/src/pages/dashboard/user-guide.tsx
index f28f07a8..41231d1d 100644
--- a/src/pages/dashboard/user-guide.tsx
+++ b/src/pages/dashboard/user-guide.tsx
@@ -24,7 +24,7 @@ const UserGuide: React.FC<TUserGuide> = ({ is_mobile, handleTabChange, setActive
             >
                 <Icon className='user-guide__icon' icon='IcMapTripFold' />
                 {!is_mobile && (
-                    <Text size='xs' line_height='s' className='user-guide__label'>
+                    <Text size='sm' className='user-guide__label'>
                         {localize('User Guide')}
                     </Text>
                 )}
diff --git a/src/pages/main/main.scss b/src/pages/main/main.scss
index 20948df9..c99cdab1 100644
--- a/src/pages/main/main.scss
+++ b/src/pages/main/main.scss
@@ -244,7 +244,7 @@
         }
 
         &--expanded {
-            width: calc(100vw - 39.8rem);
+            width: calc(100vw - 41.4rem);
         }
 
         &--modal {
diff --git a/src/pages/tutorials/common/no-search-result-found/no-search-result.tsx b/src/pages/tutorials/common/no-search-result-found/no-search-result.tsx
index 555263b2..1107d38f 100644
--- a/src/pages/tutorials/common/no-search-result-found/no-search-result.tsx
+++ b/src/pages/tutorials/common/no-search-result-found/no-search-result.tsx
@@ -11,13 +11,13 @@ const NoSearchResult = observer(() => {
     return (
         <div className='dc-tabs__content dc-tabs__content--no-result'>
             <Icon icon='IcDbotNoSearchResult' size={80} />
-            <Text className='dc-tabs__content--no-result__title' as='h1' weight='bold' line_height='xxs'>
+            <Text className='dc-tabs__content--no-result__title' as='h1' weight='bold' lineHeight='xs'>
                 <Localize i18n_default_text='No results found' />
             </Text>
-            <Text className='dc-tabs__content--no-result__content' line_height='xxs'>
+            <Text className='dc-tabs__content--no-result__content' lineHeight='xs'>
                 <Localize i18n_default_text={`We couldn’t find anything matching "${faq_search_value}".`} />
             </Text>
-            <Text className='dc-tabs__content--no-result__content' line_height='xxs'>
+            <Text className='dc-tabs__content--no-result__content' lineHeight='xs'>
                 <Localize i18n_default_text={`Try another term.`} />
             </Text>
         </div>
diff --git a/src/pages/tutorials/dbot-tours/bot-builder-tour/bot-builder-tour-mobile.tsx b/src/pages/tutorials/dbot-tours/bot-builder-tour/bot-builder-tour-mobile.tsx
index 2490309c..2db850de 100644
--- a/src/pages/tutorials/dbot-tours/bot-builder-tour/bot-builder-tour-mobile.tsx
+++ b/src/pages/tutorials/dbot-tours/bot-builder-tour/bot-builder-tour-mobile.tsx
@@ -63,7 +63,7 @@ const BotBuilderTourMobile = observer(() => {
                         </Text>
                     </div>
                     <div className='dbot-slider__content'>
-                        <Text as='span' line_height='s' size='xxs'>
+                        <Text as='span' LineHeight='sm' size='xs'>
                             {content_data?.content}
                         </Text>
                     </div>
diff --git a/src/pages/tutorials/dbot-tours/common/accordion.tsx b/src/pages/tutorials/dbot-tours/common/accordion.tsx
index a5e685e3..27738ed6 100644
--- a/src/pages/tutorials/dbot-tours/common/accordion.tsx
+++ b/src/pages/tutorials/dbot-tours/common/accordion.tsx
@@ -89,7 +89,7 @@ const Accordion = ({
                 })}
                 data-testid='accordion-content'
             >
-                <Text as='span' line_height='s' size={font_size}>
+                <Text as='span' LineHeight='sm' size={font_size}>
                     {content}
                 </Text>
             </div>
diff --git a/src/pages/tutorials/dbot-tours/common/tour-button.tsx b/src/pages/tutorials/dbot-tours/common/tour-button.tsx
index cb02e9d8..70ac1602 100644
--- a/src/pages/tutorials/dbot-tours/common/tour-button.tsx
+++ b/src/pages/tutorials/dbot-tours/common/tour-button.tsx
@@ -10,7 +10,7 @@ const TourButton = ({ label, type = 'default', ...props }: TTourButton) => {
     if (!label) return null;
     return (
         <button className={type} {...props}>
-            <Text color='prominent' align='center' weight='bold' as='span' line_height='s' size='xs'>
+            <Text color='prominent' align='center' weight='bold' as='span' LineHeight='sm' size='xs'>
                 {label}
             </Text>
         </button>
diff --git a/src/pages/tutorials/dbot-tours/common/tour-steps.tsx b/src/pages/tutorials/dbot-tours/common/tour-steps.tsx
index 4a9d5132..8daefda6 100644
--- a/src/pages/tutorials/dbot-tours/common/tour-steps.tsx
+++ b/src/pages/tutorials/dbot-tours/common/tour-steps.tsx
@@ -21,14 +21,14 @@ const TourSteps = observer(
                 <div className='onboard'>
                     {show_actions && (
                         <div className='onboard__header'>
-                            <Text color='less-prominent' line_height='l'>
+                            <Text color='less-prominent' LineHeight='lg'>
                                 {step_index}/6
                             </Text>
                         </div>
                     )}
                     <div className='onboard__steps'>
                         <div className='onboard__label'>
-                            <Text as='p' line_height='l' weight='bold'>
+                            <Text as='p' LineHeight='lg' weight='bold'>
                                 {label}
                             </Text>
                         </div>
@@ -54,7 +54,7 @@ const TourSteps = observer(
                                         content_data
                                     ) : (
                                         <div className='onboard__content__block' key={`onboard--${getUUID()}`}>
-                                            <Text align='left' as='p' size='xs' line_height='l'>
+                                            <Text align='left' as='p' size='xs' LineHeight='lg'>
                                                 {content_data}
                                             </Text>
                                         </div>
diff --git a/src/pages/tutorials/dbot-tours/onboarding-tour/onboarding-tour-mobile.tsx b/src/pages/tutorials/dbot-tours/onboarding-tour/onboarding-tour-mobile.tsx
index 65de873e..f1a26830 100644
--- a/src/pages/tutorials/dbot-tours/onboarding-tour/onboarding-tour-mobile.tsx
+++ b/src/pages/tutorials/dbot-tours/onboarding-tour/onboarding-tour-mobile.tsx
@@ -66,7 +66,7 @@ const OnboardingTourMobile = observer(() => {
                     <Text
                         color='less-prominent'
                         weight='less-prominent'
-                        line_height='s'
+                        LineHeight='sm'
                         size='xxs'
                         data-testid='dbot-onboard-slider__navbar'
                     >{`${tour_step_key - 1}/7`}</Text>
@@ -87,7 +87,7 @@ const OnboardingTourMobile = observer(() => {
                     align='center'
                     className='dbot-slider__title'
                     as='span'
-                    line_height='s'
+                    LineHeight='sm'
                     size='xs'
                 >
                     {localize(header)}
@@ -123,7 +123,7 @@ const OnboardingTourMobile = observer(() => {
                                 color='prominent'
                                 className='dbot-slider__content'
                                 as='div'
-                                line_height='s'
+                                LineHeight='sm'
                                 size='xxs'
                             >
                                 {data}
diff --git a/src/pages/tutorials/faq-content/index.tsx b/src/pages/tutorials/faq-content/index.tsx
index 1398ceac..c1f42b3b 100644
--- a/src/pages/tutorials/faq-content/index.tsx
+++ b/src/pages/tutorials/faq-content/index.tsx
@@ -26,7 +26,7 @@ const FAQ = ({ type, content = '', src, imageclass, is_mobile }: TDescription) =
         <Text
             as='p'
             size={is_mobile ? 'xs' : 'sm'}
-            line_height={is_mobile ? 'xl' : 'xxl'}
+            lineHeight={is_mobile ? 'xl' : '2xl'}
             className='faq__description'
             weight='normal'
             key={content}
@@ -101,7 +101,7 @@ const FAQContent = ({ faq_list, handleTabChange }: TFAQContent) => {
             header: (
                 <Text
                     as='p'
-                    line_height='xl'
+                    lineHeight='xl'
                     className='faq__title'
                     weight='bold'
                     key={title}
@@ -124,7 +124,7 @@ const FAQContent = ({ faq_list, handleTabChange }: TFAQContent) => {
                         <>
                             <Text
                                 as='p'
-                                line_height='xl'
+                                lineHeight='xl'
                                 className='faq__wrapper__header'
                                 weight='bold'
                                 size={is_mobile ? 'xs' : 'sm'}
diff --git a/src/pages/tutorials/guide-content/guide-content.tsx b/src/pages/tutorials/guide-content/guide-content.tsx
index 3faacddc..20e6ad5d 100644
--- a/src/pages/tutorials/guide-content/guide-content.tsx
+++ b/src/pages/tutorials/guide-content/guide-content.tsx
@@ -69,7 +69,7 @@ const GuideContent = ({ guide_tab_content, video_tab_content, is_dialog_open }:
                                     align='left'
                                     weight='bold'
                                     color='prominent'
-                                    line_height='s'
+                                    LineHeight='sm'
                                     size={is_mobile ? 'xs' : 's'}
                                 >
                                     <Localize i18n_default_text='Step-by-step guides' />
@@ -96,7 +96,7 @@ const GuideContent = ({ guide_tab_content, video_tab_content, is_dialog_open }:
                                             <Text
                                                 align='center'
                                                 color='prominent'
-                                                line_height='s'
+                                                LineHeight='sm'
                                                 size={is_mobile ? 'xs' : 's'}
                                             >
                                                 {content}
@@ -115,7 +115,7 @@ const GuideContent = ({ guide_tab_content, video_tab_content, is_dialog_open }:
                                     align='left'
                                     weight='bold'
                                     color='prominent'
-                                    line_height='s'
+                                    LineHeight='sm'
                                     size={is_mobile ? 'xs' : 's'}
                                 >
                                     <Localize i18n_default_text='Videos on Deriv Bot' />
@@ -153,7 +153,7 @@ const GuideContent = ({ guide_tab_content, video_tab_content, is_dialog_open }:
                                                 <Text
                                                     align='left'
                                                     color='prominent'
-                                                    line_height='s'
+                                                    LineHeight='sm'
                                                     size={is_mobile ? 'xs' : 's'}
                                                 >
                                                     {content}
diff --git a/src/pages/tutorials/quick-strategy-content/quick-strategy-guides-details.tsx b/src/pages/tutorials/quick-strategy-content/quick-strategy-guides-details.tsx
index c532b804..7426a574 100644
--- a/src/pages/tutorials/quick-strategy-content/quick-strategy-guides-details.tsx
+++ b/src/pages/tutorials/quick-strategy-content/quick-strategy-guides-details.tsx
@@ -51,7 +51,7 @@ const QuickStrategyGuidesDetail = observer(
                                             align='center'
                                             weight='bold'
                                             color='prominent'
-                                            line_height='s'
+                                            LineHeight='sm'
                                             size={text_size}
                                         >
                                             {type}
@@ -64,7 +64,7 @@ const QuickStrategyGuidesDetail = observer(
                                                     <Text
                                                         align='center'
                                                         color='prominent'
-                                                        line_height='s'
+                                                        LineHeight='sm'
                                                         size={text_size}
                                                         className='tutorials-quick-strategy__placeholder__content__text'
                                                     >
@@ -88,7 +88,7 @@ const QuickStrategyGuidesDetail = observer(
                             <Text
                                 className='tutorials-quick-strategy__breadcrumb__clickable'
                                 color='prominent'
-                                line_height='s'
+                                LineHeight='sm'
                                 size={text_size}
                                 as='div'
                                 onClick={() => {
@@ -97,11 +97,11 @@ const QuickStrategyGuidesDetail = observer(
                             >
                                 <Localize i18n_default_text={'Quick strategy guides >'} />
                             </Text>
-                            <Text color='less-prominent' line_height='s' size={text_size} as='div'>
+                            <Text color='less-prominent' LineHeight='sm' size={text_size} as='div'>
                                 <Localize i18n_default_text={`About ${STRATEGIES[tutorial_selected_strategy].label}`} />
                             </Text>
                         </div>
-                        <Text color='prominent' line_height='s' size={text_size} weight='bold' as='div'>
+                        <Text color='prominent' LineHeight='sm' size={text_size} weight='bold' as='div'>
                             <Localize i18n_default_text={`About ${STRATEGIES[tutorial_selected_strategy].label}`} />
                         </Text>
                         <StrategyTabContent tutorial_selected_strategy={tutorial_selected_strategy} />
diff --git a/src/pages/tutorials/quick-strategy-content/quick-strategy-guides.tsx b/src/pages/tutorials/quick-strategy-content/quick-strategy-guides.tsx
index 69d55537..398eab41 100644
--- a/src/pages/tutorials/quick-strategy-content/quick-strategy-guides.tsx
+++ b/src/pages/tutorials/quick-strategy-content/quick-strategy-guides.tsx
@@ -23,7 +23,7 @@ const QuickStrategyGuides = () => {
                     className='tutorials-quick-strategy__title'
                     weight='bold'
                     color='prominent'
-                    line_height='s'
+                    LineHeight='sm'
                     size={is_mobile ? 'xs' : 's'}
                     as='div'
                 >
diff --git a/src/utils/tmp/dummy.tsx b/src/utils/tmp/dummy.tsx
index 9d499259..f2c3797d 100644
--- a/src/utils/tmp/dummy.tsx
+++ b/src/utils/tmp/dummy.tsx
@@ -32,6 +32,10 @@ type TIconComponent = {
     icon: string;
     className?: string;
     onClick?: () => void;
+    size?: number;
+    height?: number | string;
+    width?: number | string;
+    id?: string;
 };
 
 const IconComponent: React.FC<TIconComponent> = ({ icon, ...rest }) => {