diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss
index 51a2195d4a8e..d1f5df1b1f0d 100644
--- a/packages/appstore/src/components/cfds-listing/cfds-listing.scss
+++ b/packages/appstore/src/components/cfds-listing/cfds-listing.scss
@@ -1,14 +1,32 @@
 .jurisdiction-modal {
+    &__title {
+        display: flex;
+        gap: 1.6rem;
+        align-items: center;
+        margin: 0 1rem;
+
+        &-back {
+            display: flex;
+            align-items: center;
+            cursor: pointer;
+        }
+    }
     &__content-wrapper {
         display: flex;
         flex-direction: column;
         @include desktop {
             overflow: auto;
         }
+        width: 100%;
+        position: absolute;
+        backface-visibility: hidden;
+        transition: transform 0.6s ease;
+        transform: rotateY(0deg);
     }
     &__scrollable-content {
         @include desktop {
             overflow: auto;
+            height: 69rem;
         }
     }
     &__footer-content {
@@ -26,6 +44,38 @@
             bottom: 0;
         }
     }
+
+    &__wrapper {
+        height: 76rem;
+        perspective: 100rem;
+        overflow: scroll;
+
+        @include mobile {
+            height: calc(100vh - 4rem);
+        }
+    }
+
+    &__flipped {
+        @include desktop {
+            height: 70rem;
+        }
+
+        .jurisdiction-modal {
+            &__scrollable-content {
+                height: 80rem;
+            }
+
+            &__content-wrapper {
+                height: 70rem;
+                transform: rotateY(-180deg);
+                visibility: hidden;
+            }
+        }
+
+        .dynamic-leverage-modal {
+            transform: rotateY(0deg);
+        }
+    }
 }
 
 .cfd-jurisdiction-card--synthetic,
@@ -91,6 +141,8 @@
                 }
             }
             &-footer {
+                position: absolute;
+                bottom: 0;
                 width: 100%;
                 &-text {
                     background: var(--brand-secondary);
@@ -136,6 +188,7 @@
     &__footnotes-container {
         display: flex;
         flex-direction: column;
+        justify-content: center;
         gap: 1rem;
         margin: 1rem;
         @include desktop {
@@ -205,7 +258,7 @@
             min-height: 48rem;
         }
         &.financial {
-            min-height: 54rem;
+            min-height: 55rem;
         }
         @include mobile {
             height: 48rem;
@@ -678,6 +731,87 @@
     }
 }
 
+.dynamic-leverage-modal {
+    display: flex;
+    flex-direction: column;
+    gap: 2.4rem;
+    margin: 1.5rem 12.8rem 10rem;
+    position: absolute;
+    backface-visibility: hidden;
+    transition: transform 0.6s ease;
+    transform: rotateY(180deg);
+
+    @include mobile {
+        margin: 1.5rem 2.4rem 2.4rem;
+    }
+
+    &__content {
+        display: grid;
+        gap: 2.4rem;
+        grid-template-columns: 1fr 1fr;
+        margin: 0 10rem;
+
+        @include mobile {
+            grid-template-columns: 1fr;
+            margin: 0 6.5rem;
+        }
+    }
+
+    &__market {
+        border: 0.5px solid var(--border-hover);
+        border-radius: $BORDER_RADIUS * 2;
+        overflow: hidden;
+        background-color: var(--general-hover);
+        height: 24.8rem;
+
+        &-description {
+            font-style: italic;
+        }
+
+        &-table {
+            padding-bottom: 1rem;
+
+            &-header {
+                &-cell {
+                    display: flex;
+                    flex-direction: column;
+                }
+
+                &-row {
+                    grid-template-columns: 1fr 0.5fr 1.25fr;
+                    justify-items: center;
+                    border-bottom: 0;
+                    padding: 0.4rem 0;
+                    background-color: var(--general-hover);
+                }
+            }
+
+            &-row {
+                grid-template-columns: 1fr 0.5fr 1.25fr;
+                justify-items: center;
+                border-bottom: 0;
+                padding: 0.4rem 0;
+
+                &:nth-child(even) {
+                    background-color: var(--general-hover);
+                }
+
+                &:nth-child(odd) {
+                    background-color: var(--general-section-1);
+                }
+            }
+        }
+
+        &-title {
+            display: flex;
+            flex-direction: column;
+            height: 7rem;
+            padding-top: 1rem;
+            background-color: var(--general-section-1);
+        }
+    }
+}
+
 .cfd-financial-stp-modal {
     display: flex;
     height: 100%;
diff --git a/packages/appstore/src/modules/onboarding/onboarding.tsx b/packages/appstore/src/modules/onboarding/onboarding.tsx
index 85c9918eee54..783e23e65f8b 100644
--- a/packages/appstore/src/modules/onboarding/onboarding.tsx
+++ b/packages/appstore/src/modules/onboarding/onboarding.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { localize } from '@deriv/translations';
 import { isDesktop, routes, ContentFlag } from '@deriv/shared';
-import { Button, Text, Icon, ProgressBarOnboarding } from '@deriv/components';
+import { Button, Text, Icon, ProgressBarTracker } from '@deriv/components';
 import TradingPlatformIconProps from 'Assets/svgs/trading-platform';
 import { getTradingHubContents } from 'Constants/trading-hub-content';
 import { useHistory } from 'react-router-dom';
@@ -25,7 +25,7 @@ type TOnboardingProps = {
 
 const Onboarding = observer(({ contents = getTradingHubContents() }: TOnboardingProps) => {
     const history = useHistory();
-    const number_of_steps = Object.keys(contents);
+    const steps_list = Object.keys(contents);
     const { traders_hub, client, ui } = useStore();
     const { is_eu_country, is_landing_company_loaded, is_logged_in, prev_account_type, setPrevAccountType } = client;
     const { is_mobile } = ui;
@@ -37,8 +37,8 @@ const Onboarding = observer(({ contents = getTradingHubContents() }: TOnboarding
     };
 
     const nextStep = () => {
-        if (step < number_of_steps.length) setStep(step + 1);
-        if (step === number_of_steps.length) {
+        if (step < steps_list.length) setStep(step + 1);
+        if (step === steps_list.length) {
             toggleIsTourOpen(true);
             history.push(routes.traders_hub);
             if (is_demo_low_risk) {
@@ -60,7 +60,7 @@ const Onboarding = observer(({ contents = getTradingHubContents() }: TOnboarding
         content_flag === ContentFlag.EU_DEMO;
 
     const is_eu_user = (is_logged_in && eu_user) || (!is_logged_in && is_eu_country);
-    const onboarding_step = number_of_steps[step - 1];
+    const onboarding_step = steps_list[step - 1];
 
     const footer_header = contents[onboarding_step]?.footer_header;
     const footer_text = contents[onboarding_step]?.footer_text;
@@ -118,7 +118,7 @@ const Onboarding = observer(({ contents = getTradingHubContents() }: TOnboarding
                             <Button secondary onClick={prevStep} style={step === 1 ? { visibility: 'hidden' } : {}}>
                                 {localize('Back')}
                             </Button>
-                            <ProgressBarOnboarding step={step} amount_of_steps={number_of_steps} setStep={setStep} />
+                            <ProgressBarTracker step={step} steps_list={steps_list} setStep={setStep} />
                             <Button primary onClick={nextStep} className='onboarding-footer-buttons--full-size'>
                                 {contents[onboarding_step]?.has_next_content
                                     ? contents[onboarding_step]?.next_content
@@ -129,11 +129,7 @@ const Onboarding = observer(({ contents = getTradingHubContents() }: TOnboarding
                     {is_mobile && (
                         <React.Fragment>
                             <div className='onboarding-footer__progress-bar'>
-                                <ProgressBarOnboarding
-                                    step={step}
-                                    amount_of_steps={number_of_steps}
-                                    setStep={setStep}
-                                />
+                                <ProgressBarTracker step={step} steps_list={steps_list} setStep={setStep} />
                             </div>
                             <div
                                 className='onboarding-footer-buttons'
diff --git a/packages/bot-web-ui/src/components/dashboard/tour-slider.tsx b/packages/bot-web-ui/src/components/dashboard/tour-slider.tsx
index a1dc3cbc18ef..e0686d4b7bb4 100644
--- a/packages/bot-web-ui/src/components/dashboard/tour-slider.tsx
+++ b/packages/bot-web-ui/src/components/dashboard/tour-slider.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
-import { Icon, ProgressBarOnboarding, Text } from '@deriv/components';
+import { Icon, ProgressBarTracker, Text } from '@deriv/components';
 import { observer } from '@deriv/stores';
 import { localize } from '@deriv/translations';
 import { useDBotStore } from 'Stores/useDBotStore';
@@ -181,9 +181,9 @@ const TourSlider = observer(() => {
                 <div className='dbot-slider__status'>
                     <div className='dbot-slider__progress-bar'>
                         {(!has_started_onboarding_tour || (has_started_onboarding_tour && step !== 1)) && (
-                            <ProgressBarOnboarding
+                            <ProgressBarTracker
                                 step={step}
-                                amount_of_steps={Object.keys(
+                                steps_list={Object.keys(
                                     !has_started_onboarding_tour ? BOT_BUILDER_MOBILE : DBOT_ONBOARDING_MOBILE
                                 )}
                                 setStep={setStep}
diff --git a/packages/cfd/src/Components/props.types.ts b/packages/cfd/src/Components/props.types.ts
index b404870245ac..73935daca20f 100644
--- a/packages/cfd/src/Components/props.types.ts
+++ b/packages/cfd/src/Components/props.types.ts
@@ -103,6 +103,7 @@ export type TCardFlipStatus = {
 export type TClickableDescription = {
     type: 'text' | 'link';
     text: string;
+    onClick?: React.MouseEventHandler<HTMLSpanElement>;
 };
 
 export type TJurisdictionCardSectionTitleIndicators = {
@@ -141,6 +142,10 @@ export type TJurisdictionCardItems = {
     financial_verification_docs?: TJurisdictionCardItemVerification;
 };
 
+export type TJurisdictionCardParams = {
+    toggleDynamicLeverage: React.MouseEventHandler<HTMLSpanElement>;
+};
+
 export type TJurisdictionVerificationSection = {
     icon: string;
     text: string;
diff --git a/packages/cfd/src/Constants/dynamic-leverage-content/dynamic-leverage-content.ts b/packages/cfd/src/Constants/dynamic-leverage-content/dynamic-leverage-content.ts
new file mode 100644
index 000000000000..a80e82d1f449
--- /dev/null
+++ b/packages/cfd/src/Constants/dynamic-leverage-content/dynamic-leverage-content.ts
@@ -0,0 +1,111 @@
+import { localize } from '@deriv/translations';
+
+export const dynamic_leverages = [
+    {
+        key: 'forex',
+        title: localize('Forex majors'),
+        description: '',
+        leverage: localize('Up to 1:1500'),
+        data: [
+            {
+                from: 0.01,
+                to: 1,
+                leverage: 1500,
+            },
+            {
+                from: 1.01,
+                to: 5,
+                leverage: 1000,
+            },
+            {
+                from: 5.01,
+                to: 10,
+                leverage: 500,
+            },
+            {
+                from: 10.01,
+                to: 15,
+                leverage: 100,
+            },
+        ],
+    },
+    {
+        key: 'metals',
+        title: localize('Metals'),
+        description: localize('(XAUUSD, XAGUSD)'),
+        leverage: localize('Up to 1:1000'),
+        data: [
+            {
+                from: 0.01,
+                to: 1,
+                leverage: 1000,
+            },
+            {
+                from: 1.01,
+                to: 5,
+                leverage: 500,
+            },
+            {
+                from: 5.01,
+                to: 10,
+                leverage: 100,
+            },
+            {
+                from: 10.01,
+                to: 15,
+                leverage: 50,
+            },
+        ],
+    },
+    {
+        key: 'cryptocurrencies',
+        title: localize('Cryptocurrencies'),
+        description: localize('(BTCUSD, ETHUSD)'),
+        leverage: localize('Up to 1:300'),
+        data: [
+            {
+                from: 0.01,
+                to: 1,
+                leverage: 300,
+            },
+            {
+                from: 1.01,
+                to: 3,
+                leverage: 200,
+            },
+            {
+                from: 3.01,
+                to: 5,
+                leverage: 100,
+            },
+            {
+                from: 5.01,
+                to: 10,
+                leverage: 50,
+            },
+        ],
+    },
+    {
+        key: 'stock_indices',
+        title: localize('Stock indices'),
+        description: localize('(US_30, US_100, US_500)'),
+        leverage: localize('Up to 1:300'),
+        data: [
+            {
+                from: 0.1,
+                to: 5,
+                leverage: 300,
+            },
+            {
+                from: 5.1,
+                to: 50,
+                leverage: 200,
+            },
+            {
+                from: 50.1,
+                to: 5,
+                leverage: 100,
+            },
+        ],
+    },
+];
diff --git a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-bvi-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-bvi-contents.ts
index ec8472c84c21..3dbd6118d197 100644
--- a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-bvi-contents.ts
+++ b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-bvi-contents.ts
@@ -1,7 +1,9 @@
 import { localize } from '@deriv/translations';
-import { TJurisdictionCardItems } from 'Components/props.types';
+import { TJurisdictionCardItems, TJurisdictionCardParams } from 'Components/props.types';
 
-export const getJurisdictionBviContents = (): TJurisdictionCardItems => ({
+export const getJurisdictionBviContents = ({
+    toggleDynamicLeverage,
+}: TJurisdictionCardParams): TJurisdictionCardItems => ({
     is_over_header_available: false,
     header: localize('British Virgin Islands'),
     synthetic_contents: [
@@ -58,6 +60,13 @@ export const getJurisdictionBviContents = (): TJurisdictionCardItems => ({
                 display_text: localize('1:1000'),
                 display_text_skin_color: 'yellow-light',
             },
+            clickable_description: [
+                {
+                    type: 'link',
+                    text: localize('Dynamic Leverage'),
+                    onClick: toggleDynamicLeverage,
+                },
+            ],
         },
         {
             key: 'spreadsFrom',
diff --git a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-contents.ts
index 10501fda7175..8f4e92bb6c48 100644
--- a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-contents.ts
+++ b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-contents.ts
@@ -1,4 +1,4 @@
-import { TJurisdictionCardItems } from 'Components/props.types';
+import { TJurisdictionCardItems, TJurisdictionCardParams } from 'Components/props.types';
 import { getJurisdictionBviContents } from './jurisdiction-bvi-contents';
 import { getJurisdictionLabuanContents } from './jurisdiction-labuan-contents';
 import { getJurisdictionSvgContents } from './jurisdiction-svg-contents';
@@ -13,10 +13,10 @@ type TJurisdictionContent = {
     bvi: TJurisdictionCardItems;
 };
 
-export const getJurisdictionContents = (): TJurisdictionContent => ({
-    svg: getJurisdictionSvgContents(),
-    bvi: getJurisdictionBviContents(),
-    vanuatu: getJurisdictionVanuatuContents(),
+export const getJurisdictionContents = (params: TJurisdictionCardParams): TJurisdictionContent => ({
+    svg: getJurisdictionSvgContents(params),
+    bvi: getJurisdictionBviContents(params),
+    vanuatu: getJurisdictionVanuatuContents(params),
     labuan: getJurisdictionLabuanContents(),
     maltainvest: getJurisdictionMaltainvestContents(),
 });
diff --git a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-svg-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-svg-contents.ts
index c264d4e1ce26..edf255fd59bc 100644
--- a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-svg-contents.ts
+++ b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-svg-contents.ts
@@ -1,7 +1,9 @@
 import { localize } from '@deriv/translations';
-import { TJurisdictionCardItems } from 'Components/props.types';
+import { TJurisdictionCardItems, TJurisdictionCardParams } from 'Components/props.types';
 
-export const getJurisdictionSvgContents = (): TJurisdictionCardItems => ({
+export const getJurisdictionSvgContents = ({
+    toggleDynamicLeverage,
+}: TJurisdictionCardParams): TJurisdictionCardItems => ({
     is_over_header_available: false,
     header: localize('St. Vincent & Grenadines'),
     synthetic_contents: [
@@ -57,6 +59,13 @@ export const getJurisdictionSvgContents = (): TJurisdictionCardItems => ({
                 display_text: localize('1:1000'),
                 display_text_skin_color: 'yellow-light',
             },
+            clickable_description: [
+                {
+                    type: 'link',
+                    text: localize('Dynamic Leverage'),
+                    onClick: toggleDynamicLeverage,
+                },
+            ],
         },
         {
             key: 'spreadsFrom',
diff --git a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-vanuatu-contents.ts b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-vanuatu-contents.ts
index 72684d4eb236..fbe1ede0f753 100644
--- a/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-vanuatu-contents.ts
+++ b/packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-vanuatu-contents.ts
@@ -1,7 +1,9 @@
 import { localize } from '@deriv/translations';
-import { TJurisdictionCardItems } from 'Components/props.types';
+import { TJurisdictionCardItems, TJurisdictionCardParams } from 'Components/props.types';
 
-export const getJurisdictionVanuatuContents = (): TJurisdictionCardItems => ({
+export const getJurisdictionVanuatuContents = ({
+    toggleDynamicLeverage,
+}: TJurisdictionCardParams): TJurisdictionCardItems => ({
     is_over_header_available: false,
     header: localize('Vanuatu'),
     synthetic_contents: [
@@ -58,6 +60,13 @@ export const getJurisdictionVanuatuContents = (): TJurisdictionCardItems => ({
                 display_text: localize('1:1000'),
                 display_text_skin_color: 'yellow-light',
             },
+            clickable_description: [
+                {
+                    type: 'link',
+                    text: localize('Dynamic Leverage'),
+                    onClick: toggleDynamicLeverage,
+                },
+            ],
         },
         {
             key: 'spreadsFrom',
diff --git a/packages/cfd/src/Containers/dynamic-leverage/__test__/dynamic-leverage-market-card.spec.tsx b/packages/cfd/src/Containers/dynamic-leverage/__test__/dynamic-leverage-market-card.spec.tsx
new file mode 100644
index 000000000000..a5e012735747
--- /dev/null
+++ b/packages/cfd/src/Containers/dynamic-leverage/__test__/dynamic-leverage-market-card.spec.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { DynamicLeverageMarketCard } from '../dynamic-leverage-market-card';
+
+describe('DynamicLeverageMarketCard', () => {
+    const mock_props = {
+        title: 'Metals',
+        description: '(XAUUSD, XAGUSD)',
+        leverage: 'Up to 1:1000',
+        data: [
+            { from: 0.01, to: 1, leverage: 1000 },
+            { from: 101, to: 500, leverage: 1000 },
+            { from: 501, to: 1000, leverage: 500 },
+        ],
+    };
+
+    it('should render DynamicLeverageMarketCard header properly', () => {
+        render(<DynamicLeverageMarketCard {...mock_props} />);
+
+        const market_title = screen.getByTestId('market_title');
+        const leverage_title = screen.getByTestId('leverage_title');
+        const description = screen.getByTestId('description_title');
+        expect(market_title).toBeInTheDocument();
+        expect(description).toBeInTheDocument();
+        expect(leverage_title).toBeInTheDocument();
+        expect(market_title).toHaveTextContent('Metals');
+        expect(description).toHaveTextContent('(XAUUSD, XAGUSD)');
+        expect(leverage_title).toHaveTextContent('Up to 1:1000');
+    });
+
+    it('should not render description if not present', () => {
+        const props = {
+            title: 'Forex',
+            leverage: 'Up to 1:1000',
+            data: [
+                {
+                    from: 0.01,
+                    to: 1,
+                    leverage: 1000,
+                },
+            ],
+        };
+        render(<DynamicLeverageMarketCard {...props} />);
+        const market_title = screen.getByTestId('market_title');
+        const leverage_title = screen.getByTestId('leverage_title');
+        const description = screen.queryByTestId('description_title');
+        expect(market_title).toBeInTheDocument();
+        expect(description).not.toBeInTheDocument();
+        expect(leverage_title).toBeInTheDocument();
+    });
+
+    it('should render dynamic leverages correctly', () => {
+        render(<DynamicLeverageMarketCard {...mock_props} />);
+
+        const market_table = screen.getByRole('table');
+        expect(market_table).toBeInTheDocument();
+
+        const table_headers = screen.getAllByRole('columnheader');
+        const [from_header, to_header, leverage_header] = table_headers;
+
+        expect(from_header).toHaveTextContent('From');
+        expect(to_header).toHaveTextContent('to');
+        expect(leverage_header).toHaveTextContent('Leverage');
+
+        const table_rows = screen.getAllByRole('row');
+        const [header_row, ...data_rows] = table_rows;
+        expect(header_row).toHaveClass('dynamic-leverage-modal__market-table-header-row');
+        expect(data_rows).toHaveLength(3);
+    });
+});
diff --git a/packages/cfd/src/Containers/dynamic-leverage/__test__/dynamic-leverage-modal-content.spec.tsx b/packages/cfd/src/Containers/dynamic-leverage/__test__/dynamic-leverage-modal-content.spec.tsx
new file mode 100644
index 000000000000..3fe2dd0a6f3e
--- /dev/null
+++ b/packages/cfd/src/Containers/dynamic-leverage/__test__/dynamic-leverage-modal-content.spec.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import DynamicLeverageModalContent from '../dynamic-leverage-modal-content';
+
+jest.mock('../dynamic-leverage-market-card', () => ({
+    DynamicLeverageMarketCard: jest.fn(() => <div data-testid='leverage-market-card' />),
+}));
+
+describe('DynamicLeverageModalContent', () => {
+    it('should render DynamicLeverageModalContent header properly', () => {
+        render(<DynamicLeverageModalContent />);
+
+        const title = screen.getByRole('heading');
+        expect(title).toBeInTheDocument();
+        expect(title).toHaveTextContent(
+            'Enjoy dynamic leverage of up to 1:1500 when trading selected instruments in the forex, commodities, cryptocurrencies, and stock indices markets. Our dynamic leverage adjusts automatically to your trading position, based on asset type and trading volume.'
+        );
+    });
+
+    it('should render DynamicLeverageModalContent cards properly', () => {
+        render(<DynamicLeverageModalContent />);
+
+        const cards = screen.getAllByTestId('leverage-market-card');
+        expect(cards).toHaveLength(4);
+        cards.forEach(card => {
+            expect(card).toBeInTheDocument();
+        });
+    });
+});
diff --git a/packages/cfd/src/Containers/dynamic-leverage/dynamic-leverage-context.tsx b/packages/cfd/src/Containers/dynamic-leverage/dynamic-leverage-context.tsx
new file mode 100644
index 000000000000..5197f6237866
--- /dev/null
+++ b/packages/cfd/src/Containers/dynamic-leverage/dynamic-leverage-context.tsx
@@ -0,0 +1,16 @@
+import React, { useContext } from 'react';
+
+type TDynamicLeverageContext = {
+    is_dynamic_leverage_visible: boolean;
+    toggleDynamicLeverage: React.MouseEventHandler<HTMLSpanElement>;
+};
+
+export const DynamicLeverageContext = React.createContext<TDynamicLeverageContext>({
+    is_dynamic_leverage_visible: false,
+    toggleDynamicLeverage: () => null,
+});
+
+export const useDynamicLeverage = () => {
+    const dynamic_leverage = useContext(DynamicLeverageContext);
+    return dynamic_leverage;
+};
diff --git a/packages/cfd/src/Containers/dynamic-leverage/dynamic-leverage-market-card.tsx b/packages/cfd/src/Containers/dynamic-leverage/dynamic-leverage-market-card.tsx
new file mode 100644
index 000000000000..da54106ebdd5
--- /dev/null
+++ b/packages/cfd/src/Containers/dynamic-leverage/dynamic-leverage-market-card.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { Table, Text } from '@deriv/components';
+import { localize } from '@deriv/translations';
+import { TDynamicLeverageMarketCardProps } from 'Containers/props.types';
+import { DynamicLeverageTableColumnHeader } from './dynamic-leverage-table-column-header';
+
+export const DynamicLeverageMarketCard = ({ title, description, leverage, data }: TDynamicLeverageMarketCardProps) => (
+    <div className='dynamic-leverage-modal__market'>
+        <div className='dynamic-leverage-modal__market-title'>
+            <Text data-testid='market_title' size='xs' weight='bolder' align='center'>
+                {title}
+            </Text>
+            {!!description && (
+                <Text
+                    data-testid='description_title'
+                    size='xxxs'
+                    align='center'
+                    className='dynamic-leverage-modal__market-description'
+                >
+                    {description}
+                </Text>
+            )}
+            <Text data-testid='leverage_title' size='xxs' color='red' align='center'>
+                {leverage}
+            </Text>
+        </div>
+        <Table className='dynamic-leverage-modal__market-table'>
+            <Table.Header>
+                <Table.Row className='dynamic-leverage-modal__market-table-header-row'>
+                    <DynamicLeverageTableColumnHeader title={localize('From')} subtitle={localize('(lots)')} />
+                    <DynamicLeverageTableColumnHeader title={localize('to')} subtitle={localize('(lots)')} />
+                    <DynamicLeverageTableColumnHeader title={localize('Leverage')} subtitle={localize('(1:x)')} />
+                </Table.Row>
+            </Table.Header>
+            <Table.Body>
+                {data.map(columns => (
+                    <Table.Row
+                        key={`${columns.from}-${columns.to}-${columns.leverage}`}
+                        className='dynamic-leverage-modal__market-table-row'
+                    >
+                        {Object.entries(columns).map(([column_key, value]) => (
+                            <Table.Cell key={`${title}_${column_key}_${value}`}>
+                                <Text size='xs' align='center'>
+                                    {value}
+                                </Text>
+                            </Table.Cell>
+                        ))}
+                    </Table.Row>
+                ))}
+            </Table.Body>
+        </Table>
+    </div>
+);
diff --git a/packages/cfd/src/Containers/dynamic-leverage/dynamic-leverage-modal-content.tsx b/packages/cfd/src/Containers/dynamic-leverage/dynamic-leverage-modal-content.tsx
new file mode 100644
index 000000000000..ce905fd350c1
--- /dev/null
+++ b/packages/cfd/src/Containers/dynamic-leverage/dynamic-leverage-modal-content.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Text } from '@deriv/components';
+import { Localize } from '@deriv/translations';
+import { dynamic_leverages } from '../../Constants/dynamic-leverage-content/dynamic-leverage-content';
+import { DynamicLeverageMarketCard } from './dynamic-leverage-market-card';
+
+const DynamicLeverageModalContent = () => (
+    <div className='dynamic-leverage-modal'>
+        <Text as='h4' size='s'>
+            <Localize
+                i18n_default_text='Enjoy dynamic leverage of  <0>up to 1:1500</0> when trading selected instruments in the forex, commodities, cryptocurrencies, and stock indices markets. Our dynamic leverage adjusts automatically to your trading position, based on asset type and trading volume.'
+                components={[<strong key={0} />]}
+            />
+        </Text>
+        <div className='dynamic-leverage-modal__content'>
+            {dynamic_leverages.map(market => (
+                <DynamicLeverageMarketCard
+                    key={`dynamic-leverage-modal__${market.key}`}
+                    title={market.title}
+                    leverage={market.leverage}
+                    description={market.description}
+                    data={market.data}
+                />
+            ))}
+        </div>
+    </div>
+);
+
+export default DynamicLeverageModalContent;
diff --git a/packages/cfd/src/Containers/dynamic-leverage/dynamic-leverage-table-column-header.tsx b/packages/cfd/src/Containers/dynamic-leverage/dynamic-leverage-table-column-header.tsx
new file mode 100644
index 000000000000..a8b51f6588df
--- /dev/null
+++ b/packages/cfd/src/Containers/dynamic-leverage/dynamic-leverage-table-column-header.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Table, Text } from '@deriv/components';
+import { TDynamicLeverageTableColumnHeader } from 'Containers/props.types';
+
+export const DynamicLeverageTableColumnHeader = ({ title, subtitle }: TDynamicLeverageTableColumnHeader) => (
+    <Table.Head>
+        <div className='dynamic-leverage-modal__market-table-header-cell'>
+            <Text size='xs' align='center' weight='bold'>
+                {title}
+            </Text>
+            <Text size='xxs' align='center'>
+                {subtitle}
+            </Text>
+        </div>
+    </Table.Head>
+);
diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card.spec.tsx
index 331130b1010d..19624640bd26 100644
--- a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card.spec.tsx
+++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card.spec.tsx
@@ -38,6 +38,7 @@ describe('JurisdictionCard', () => {
         account_type: 'financial' | 'synthetic';
         disabled: boolean;
         is_non_idv_design: boolean;
+        toggleDynamicLeverage: React.MouseEventHandler<HTMLSpanElement>;
         jurisdiction_selected_shortcode: string;
         setJurisdictionSelectedShortcode: jest.Mock;
         type_of_card: 'svg' | 'bvi' | 'labuan' | 'maltainvest' | 'vanuatu';
@@ -75,6 +76,7 @@ describe('JurisdictionCard', () => {
             account_type: 'financial',
             disabled: false,
             is_non_idv_design: false,
+            toggleDynamicLeverage: jest.fn(),
             jurisdiction_selected_shortcode: '',
             setJurisdictionSelectedShortcode: jest.fn(),
             swapfree_available_accounts: [],
diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-clickable-description.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-clickable-description.spec.tsx
index a481b9d0f949..607ca2cae4dc 100644
--- a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-clickable-description.spec.tsx
+++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-clickable-description.spec.tsx
@@ -3,7 +3,11 @@ import { render, screen } from '@testing-library/react';
 import JurisdictionClickableDescription from '../jurisdiction-clickable-description';
 
 describe('JurisdictionClickableDescription', () => {
-    type TClickableDescription = { text: string; type: 'link' | 'text' };
+    type TClickableDescription = {
+        text: string;
+        type: 'link' | 'text';
+        onClick?: React.MouseEventHandler<HTMLSpanElement>;
+    };
     type TMockProps = {
         clickable_description: TClickableDescription[];
         toggleCardFlip: jest.Mock;
@@ -19,14 +23,19 @@ describe('JurisdictionClickableDescription', () => {
                 text: 'to learn more about the documents required for verification.',
                 type: 'text',
             },
+            {
+                text: 'Open another Modal',
+                type: 'link',
+                onClick: jest.fn(),
+            },
         ],
         toggleCardFlip: jest.fn(),
     };
 
     it('should render JurisdictionClickableDescription', () => {
         render(<JurisdictionClickableDescription {...mock_props} />);
-        const container = screen.getByTestId('dt_jurisdiction_clickable_description');
-        expect(container).toHaveClass('cfd-card-clickable-description-link');
+        const container = screen.getAllByTestId('dt_jurisdiction_clickable_description');
+        expect(container[0]).toHaveClass('cfd-card-clickable-description-link');
         expect(screen.getByText('Click here')).toBeInTheDocument();
         expect(screen.getByText('to learn more about the documents required for verification.')).toBeInTheDocument();
     });
@@ -36,4 +45,10 @@ describe('JurisdictionClickableDescription', () => {
         screen.getByText('Click here').click();
         expect(mock_props.toggleCardFlip).toHaveBeenCalled();
     });
+
+    it('should call onClick when link is clicked with an onClick function', () => {
+        render(<JurisdictionClickableDescription {...mock_props} />);
+        screen.getByText('Open another Modal').click();
+        expect(mock_props.clickable_description[2].onClick).toHaveBeenCalled();
+    });
 });
diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx
index 4caaf5f558bc..3fdc99c741c6 100644
--- a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx
+++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-content.spec.tsx
@@ -16,6 +16,7 @@ describe('JurisdictionModalContent', () => {
         account_type: '',
         is_non_idv_design: false,
         is_virtual: false,
+        toggleDynamicLeverage: jest.fn(),
         jurisdiction_selected_shortcode: '',
         setJurisdictionSelectedShortcode: jest.fn(),
         synthetic_available_accounts: [
diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-title.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-title.spec.tsx
new file mode 100644
index 000000000000..08cd56c7f119
--- /dev/null
+++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal-title.spec.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { DynamicLeverageContext } from '../../dynamic-leverage/dynamic-leverage-context';
+import JurisdictionModalTitle from '../jurisdiction-modal-title';
+
+type TMockProps = {
+    is_dynamic_leverage_visible: boolean;
+    toggleDynamicLeverage: React.MouseEventHandler<HTMLSpanElement>;
+    account_type: string;
+    show_eu_related_content: boolean;
+};
+
+const mock_props = {
+    is_dynamic_leverage_visible: false,
+    toggleDynamicLeverage: jest.fn(),
+    account_type: 'Financial',
+    show_eu_related_content: false,
+};
+
+const JurisdictionModalTitleComponent = ({
+    is_dynamic_leverage_visible,
+    toggleDynamicLeverage,
+    ...mockProps
+}: TMockProps) => {
+    const dynamic_leverage_value = React.useMemo(
+        () => ({ is_dynamic_leverage_visible, toggleDynamicLeverage }),
+        [is_dynamic_leverage_visible, toggleDynamicLeverage]
+    );
+    return (
+        <DynamicLeverageContext.Provider value={dynamic_leverage_value}>
+            <JurisdictionModalTitle {...mockProps} />
+        </DynamicLeverageContext.Provider>
+    );
+};
+
+describe('JurisdictionModalTitle', () => {
+    it('should render JurisdictionModalTitle', () => {
+        render(<JurisdictionModalTitleComponent {...mock_props} />);
+        const title = screen.getByText(/jurisdiction/);
+        expect(title).toBeInTheDocument();
+        expect(title).toHaveTextContent('Choose a jurisdiction for your Deriv MT5 Financial account');
+    });
+
+    it('should render JurisdictionModalTitle correctly if show_eu_related_content is true', () => {
+        const new_props = { ...mock_props, show_eu_related_content: true };
+        render(<JurisdictionModalTitleComponent {...new_props} />);
+        const title = screen.getByText(/jurisdiction/);
+        expect(title).toBeInTheDocument();
+        expect(title).toHaveTextContent('Choose a jurisdiction for your Deriv MT5 CFDs account');
+    });
+
+    it('should render JurisdictionModalTitle correctly if is_dynamic_leverage_visible is true', () => {
+        const new_props = { ...mock_props, is_dynamic_leverage_visible: true };
+        render(<JurisdictionModalTitleComponent {...new_props} />);
+        const title = screen.getByText(/Deriv/);
+        expect(title).toBeInTheDocument();
+        expect(title).toHaveTextContent('Get more out of Deriv MT5 Financial');
+        const back_button = screen.getByTestId('back_icon');
+        expect(back_button).toBeInTheDocument();
+        userEvent.click(back_button);
+        expect(new_props.toggleDynamicLeverage).toHaveBeenCalled();
+    });
+});
diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal.spec.tsx
new file mode 100644
index 000000000000..69c390c808e1
--- /dev/null
+++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-modal.spec.tsx
@@ -0,0 +1,123 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { StoreProvider, mockStore } from '@deriv/stores';
+import { TStores } from '@deriv/stores/types';
+import { CFDStoreProvider } from 'Stores/Modules/CFD/Helpers/useCfdStores';
+import { TTradingPlatformAvailableAccount } from 'Components/props.types';
+import { TJurisdictionModalProps } from '../../props.types';
+import JurisdictionModal from '../jurisdiction-modal';
+
+jest.mock('@deriv/shared/src/utils/screen/responsive', () => ({
+    ...jest.requireActual('@deriv/shared/src/utils/screen/responsive'),
+    isMobile: jest.fn(),
+    isDesktop: jest.fn(() => true),
+}));
+
+jest.mock('../../dynamic-leverage/dynamic-leverage-modal-content', () =>
+    jest.fn(() => <div data-testid='dynamic_leverage_modal_content' />)
+);
+
+let modal_root_el: HTMLDivElement, store: TStores;
+
+const mock_store = {
+    common: {},
+    client: {
+        trading_platform_available_accounts: [
+            {
+                market_type: 'financial',
+                name: 'Deriv (SVG) LLC',
+                shortcode: 'svg',
+                sub_account_type: 'swap_free',
+            } as TTradingPlatformAvailableAccount,
+        ],
+    },
+    ui: {
+        disableApp: jest.fn(),
+        enableApp: jest.fn(),
+    },
+    traders_hub: {
+        show_eu_related_content: false,
+    },
+    modules: {
+        cfd: {
+            account_type: {
+                type: 'Financial',
+            },
+            is_jurisdiction_modal_visible: true,
+            toggleJurisdictionModal: jest.fn(),
+            setJurisdictionSelectedShortcode: jest.fn(),
+        },
+    },
+};
+
+beforeEach(() => {
+    store = mockStore(mock_store);
+});
+
+beforeAll(() => {
+    modal_root_el = document.createElement('div');
+    modal_root_el.setAttribute('id', 'modal_root');
+    document.body.appendChild(modal_root_el);
+});
+
+afterAll(() => {
+    document.body.removeChild(modal_root_el);
+});
+
+const JurisdictionModalComponent = (props: TJurisdictionModalProps) => {
+    return (
+        <StoreProvider store={store}>
+            <CFDStoreProvider>
+                <JurisdictionModal {...props} />
+            </CFDStoreProvider>
+        </StoreProvider>
+    );
+};
+
+describe('JurisdictionModal', () => {
+    const mock_props = {
+        openPasswordModal: jest.fn(),
+    };
+
+    it('should render JurisdictionModal', () => {
+        render(<JurisdictionModalComponent {...mock_props} />);
+
+        const title = screen.getByRole('heading');
+        const close_button = screen.getAllByRole('button')[0];
+
+        expect(title).toBeInTheDocument();
+        expect(title).toHaveTextContent('Choose a jurisdiction for your Deriv MT5 Financial account');
+        expect(close_button).toBeInTheDocument();
+    });
+
+    it('should render JurisdictionModal with dynamic leverage modal', async () => {
+        render(<JurisdictionModalComponent {...mock_props} />);
+        const toggle_button = screen.getByText('Dynamic Leverage');
+        userEvent.click(toggle_button);
+
+        const title = screen.getByRole('heading');
+        const back_button = screen.getByTestId('back_icon');
+        const modal_content = screen.getByTestId('modal_content');
+
+        expect(modal_content).toBeInTheDocument();
+        expect(modal_content).toHaveClass('jurisdiction-modal__flipped');
+        expect(title).toBeInTheDocument();
+        expect(title).toHaveTextContent('Get more out of Deriv MT5 Financial');
+        expect(back_button).toBeInTheDocument();
+
+        userEvent.click(back_button);
+        expect(modal_content).not.toHaveClass('jurisdiction-modal__flipped');
+    });
+
+    it('should render JurisdictionModal with show_eu_related_content', () => {
+        store = mockStore({ ...mock_store, traders_hub: { show_eu_related_content: true } });
+
+        render(<JurisdictionModalComponent {...mock_props} />);
+
+        const title = screen.getByRole('heading');
+
+        expect(title).toBeInTheDocument();
+        expect(title).toHaveTextContent('Choose a jurisdiction for your Deriv MT5 CFDs account');
+    });
+});
diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx
index e5fd6717227b..bfbf0b55651d 100644
--- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx
+++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx
@@ -5,6 +5,7 @@ import { getJurisdictionContents } from '../../Constants/jurisdiction-contents/j
 import { TJurisdictionCardProps } from '../props.types';
 import JurisdictionCardBack from './jurisdiction-card-back';
 import JurisdictionCardFront from './jurisdiction-card-front';
+import { useDynamicLeverage } from '../dynamic-leverage/dynamic-leverage-context';
 
 const JurisdictionCard = ({
     account_status,
@@ -18,7 +19,8 @@ const JurisdictionCard = ({
     const card_classname = `cfd-jurisdiction-card--${account_type}`;
     const is_synthetic = account_type === 'synthetic';
     const is_swapfree = account_type === 'all';
-    const card_values = getJurisdictionContents()[type_of_card];
+    const { toggleDynamicLeverage } = useDynamicLeverage();
+    const card_values = getJurisdictionContents({ toggleDynamicLeverage })[type_of_card];
     const non_synthetic_card_data = is_swapfree
         ? card_values?.swapfree_contents ?? []
         : card_values?.financial_contents;
diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-clickable-description.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-clickable-description.tsx
index 81d5aa1b502a..1cea949dfa81 100644
--- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-clickable-description.tsx
+++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-clickable-description.tsx
@@ -8,21 +8,22 @@ const JurisdictionClickableDescription = ({
 }: TJurisdictionClickableDescriptionProps) => (
     <div>
         {clickable_description.map(description_part => {
-            return description_part.type === 'link' ? (
-                <span key={description_part.text} onClick={toggleCardFlip}>
+            const { type, text, onClick } = description_part;
+            return type === 'link' ? (
+                <span key={text} onClick={onClick || toggleCardFlip}>
                     <Text
                         data-testid='dt_jurisdiction_clickable_description'
                         as='span'
                         size='xxs'
                         className='cfd-card-clickable-description-link'
                     >
-                        {description_part.text}
+                        {text}
                     </Text>
                     &nbsp;
                 </span>
             ) : (
-                <Text key={description_part.text} as='span' size='xxs'>
-                    {description_part.text}
+                <Text key={text} as='span' size='xxs'>
+                    {text}
                 </Text>
             );
         })}
diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-title.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-title.tsx
new file mode 100644
index 000000000000..0080916430ac
--- /dev/null
+++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal-title.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { Icon, Text } from '@deriv/components';
+import { getMT5Title, isMobile } from '@deriv/shared';
+import { Localize, localize } from '@deriv/translations';
+import { useDynamicLeverage } from '../dynamic-leverage/dynamic-leverage-context';
+import { TJurisdictionModalTitleProps } from '../props.types';
+
+export const JurisdictionModalTitle = ({ show_eu_related_content, account_type }: TJurisdictionModalTitleProps) => {
+    const { is_dynamic_leverage_visible, toggleDynamicLeverage } = useDynamicLeverage();
+    if (is_dynamic_leverage_visible) {
+        return (
+            <div className='jurisdiction-modal__title'>
+                <span
+                    data-testid='back_icon'
+                    className='jurisdiction-modal__title-back'
+                    onClick={toggleDynamicLeverage}
+                >
+                    <Icon icon='IcArrowLeftBold' />
+                </span>
+                <Text size={isMobile() ? 'xs' : 's'} weight='bold' color='prominent'>
+                    {localize('Get more out of Deriv MT5 Financial')}
+                </Text>
+            </div>
+        );
+    } else if (show_eu_related_content) {
+        return <Localize i18n_default_text='Choose a jurisdiction for your Deriv MT5 CFDs account' />;
+    }
+
+    return (
+        <Localize
+            i18n_default_text='Choose a jurisdiction for your Deriv MT5 {{account_type}} account'
+            values={{ account_type: getMT5Title(account_type) }}
+        />
+    );
+};
+
+export default JurisdictionModalTitle;
diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal.tsx
index 002d32416a4e..fd494741bb38 100644
--- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal.tsx
+++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-modal.tsx
@@ -1,11 +1,13 @@
 import React from 'react';
+import classNames from 'classnames';
 import { DesktopWrapper, MobileDialog, MobileWrapper, Modal, UILoader } from '@deriv/components';
-import { localize } from '@deriv/translations';
-import { getMT5Title } from '@deriv/shared';
 import { TJurisdictionModalProps } from '../props.types';
 import { observer, useStore } from '@deriv/stores';
 import { useCfdStore } from '../../Stores/Modules/CFD/Helpers/useCfdStores';
+import { DynamicLeverageContext } from '../dynamic-leverage/dynamic-leverage-context';
+import DynamicLeverageModalContent from '../dynamic-leverage/dynamic-leverage-modal-content';
 import JurisdictionModalContentWrapper from './jurisdiction-modal-content-wrapper';
+import JurisdictionModalTitle from './jurisdiction-modal-title';
 
 const JurisdictionModal = observer(({ openPasswordModal }: TJurisdictionModalProps) => {
     const { traders_hub, ui } = useStore();
@@ -15,40 +17,72 @@ const JurisdictionModal = observer(({ openPasswordModal }: TJurisdictionModalPro
 
     const { account_type, is_jurisdiction_modal_visible, toggleJurisdictionModal } = useCfdStore();
 
-    const modal_title = show_eu_related_content
-        ? localize('Choose a jurisdiction for your Deriv MT5 CFDs account')
-        : localize('Choose a jurisdiction for your Deriv MT5 {{account_type}} account', {
-              account_type: localize(getMT5Title(account_type.type)),
-          });
+    const [is_dynamic_leverage_visible, setIsDynamicLeverageVisible] = React.useState(false);
+
+    const toggleDynamicLeverage: React.MouseEventHandler<HTMLSpanElement> = event => {
+        event.stopPropagation();
+        setIsDynamicLeverageVisible(!is_dynamic_leverage_visible);
+    };
+
+    const onJurisdictionModalToggle = () => {
+        setIsDynamicLeverageVisible(false);
+        toggleJurisdictionModal();
+    };
+
+    const modal_content = (
+        <div
+            data-testid='modal_content'
+            className={classNames('jurisdiction-modal__wrapper', {
+                'jurisdiction-modal__flipped': is_dynamic_leverage_visible,
+            })}
+        >
+            <JurisdictionModalContentWrapper openPasswordModal={openPasswordModal} />
+            <DynamicLeverageModalContent />
+        </div>
+    );
 
     return (
         <div>
             <React.Suspense fallback={<UILoader />}>
-                <DesktopWrapper>
-                    <Modal
-                        className='jurisdiction-modal'
-                        disableApp={disableApp}
-                        enableApp={enableApp}
-                        exit_classname='cfd-modal--custom-exit'
-                        is_open={is_jurisdiction_modal_visible}
-                        title={modal_title}
-                        toggleModal={toggleJurisdictionModal}
-                        type='button'
-                        width={account_type.type === 'financial' ? '1200px' : '1040px'}
-                    >
-                        <JurisdictionModalContentWrapper openPasswordModal={openPasswordModal} />
-                    </Modal>
-                </DesktopWrapper>
-                <MobileWrapper>
-                    <MobileDialog
-                        portal_element_id='deriv_app'
-                        title={modal_title}
-                        visible={is_jurisdiction_modal_visible}
-                        onClose={toggleJurisdictionModal}
-                    >
-                        <JurisdictionModalContentWrapper openPasswordModal={openPasswordModal} />
-                    </MobileDialog>
-                </MobileWrapper>
+                <DynamicLeverageContext.Provider value={{ is_dynamic_leverage_visible, toggleDynamicLeverage }}>
+                    <DesktopWrapper>
+                        <Modal
+                            className='jurisdiction-modal'
+                            disableApp={disableApp}
+                            enableApp={enableApp}
+                            exit_classname='cfd-modal--custom-exit'
+                            is_open={is_jurisdiction_modal_visible}
+                            toggleModal={onJurisdictionModalToggle}
+                            type='button'
+                            width={account_type.type === 'financial' ? '1200px' : '1040px'}
+                            has_close_icon={!is_dynamic_leverage_visible}
+                            title={
+                                <JurisdictionModalTitle
+                                    show_eu_related_content={show_eu_related_content}
+                                    account_type={account_type.type}
+                                />
+                            }
+                        >
+                            {modal_content}
+                        </Modal>
+                    </DesktopWrapper>
+                    <MobileWrapper>
+                        <MobileDialog
+                            portal_element_id='deriv_app'
+                            visible={is_jurisdiction_modal_visible}
+                            onClose={onJurisdictionModalToggle}
+                            has_close_icon={!is_dynamic_leverage_visible}
+                            title={
+                                <JurisdictionModalTitle
+                                    show_eu_related_content={show_eu_related_content}
+                                    account_type={account_type.type}
+                                />
+                            }
+                        >
+                            {modal_content}
+                        </MobileDialog>
+                    </MobileWrapper>
+                </DynamicLeverageContext.Provider>
             </React.Suspense>
         </div>
     );
diff --git a/packages/cfd/src/Containers/props.types.ts b/packages/cfd/src/Containers/props.types.ts
index d86bd26f8f4a..648c54ddbaac 100644
--- a/packages/cfd/src/Containers/props.types.ts
+++ b/packages/cfd/src/Containers/props.types.ts
@@ -250,6 +250,11 @@ export type TJurisdictionModalContentProps = {
     is_virtual: boolean;
 };
 
+export type TJurisdictionModalTitleProps = {
+    show_eu_related_content: boolean;
+    account_type: string;
+};
+
 type TAccountStatus = Omit<GetAccountStatus, 'status'> & Partial<Pick<GetAccountStatus, 'status'>>;
 
 export type TJurisdictionModalFootNoteProps = {
@@ -326,3 +331,21 @@ export type TCFDDbviOnboardingProps = {
     updateAccountStatus: () => void;
     updateMT5Status: () => void;
 };
+
+type TDynamicLeverage = {
+    from: number;
+    to: number;
+    leverage: number;
+};
+
+export type TDynamicLeverageMarketCardProps = {
+    title: string;
+    description?: string;
+    leverage: string;
+    data: TDynamicLeverage[];
+};
+
+export type TDynamicLeverageTableColumnHeader = {
+    title: string;
+    subtitle: string;
+};
diff --git a/packages/components/README.md b/packages/components/README.md
index fb28412a5cf1..0c663c968235 100644
--- a/packages/components/README.md
+++ b/packages/components/README.md
@@ -85,7 +85,7 @@ npm run storybook:deploy br_storybook
 
 You can import individual components with ES6 named imports.
 
-```jsx
+```tsx
 import { Button } from '@deriv/components';
 
 const SomeComponent = () => (
@@ -95,5 +95,5 @@ const SomeComponent = () => (
 );
 ```
 
-> NOTE: While developing new components, be mindful that import the direct `.jsx` file, instead of referencing `../component/index.js`. This will make sure there won't be a style bleed
+> NOTE: While developing new components, be mindful that import the direct `.tsx` file, instead of referencing `../component/index.ts`. This will make sure there won't be a style bleed
 > When it is imported from other packages.
diff --git a/packages/components/package.json b/packages/components/package.json
index a0bd581f4b13..f8b1734be02e 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -2,7 +2,7 @@
     "name": "@deriv/components",
     "version": "1.0.0",
     "description": "deriv components",
-    "main": "src/index.js",
+    "main": "src/index.ts",
     "private": true,
     "engines": {
         "node": "18.x"
diff --git a/packages/components/src/components/progress-bar-onboarding/index.ts b/packages/components/src/components/progress-bar-onboarding/index.ts
deleted file mode 100644
index 7e9e6421ac6a..000000000000
--- a/packages/components/src/components/progress-bar-onboarding/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import ProgressBarOnboarding from './progress-bar-onboarding';
-import './progress-bar-onboarding.scss';
-
-export default ProgressBarOnboarding;
diff --git a/packages/components/src/components/progress-bar-onboarding/progress-bar-onboarding.tsx b/packages/components/src/components/progress-bar-onboarding/progress-bar-onboarding.tsx
deleted file mode 100644
index a215971114fc..000000000000
--- a/packages/components/src/components/progress-bar-onboarding/progress-bar-onboarding.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-
-import './progress-bar-onboarding.scss';
-
-type TProgressBarOnboarding = {
-    step: number;
-    amount_of_steps: Array<string>;
-    setStep: React.Dispatch<React.SetStateAction<number>>;
-};
-
-const ProgressBarOnboarding = ({ step, amount_of_steps, setStep }: TProgressBarOnboarding) => {
-    return (
-        <div className='progress-bar'>
-            {amount_of_steps.map((st, index) => {
-                const active = step === index + 1;
-
-                return (
-                    <div
-                        key={st}
-                        onClick={() => setStep(index + 1)}
-                        className={active ? 'progress-bar-rectangle' : 'progress-bar-circle'}
-                    />
-                );
-            })}
-        </div>
-    );
-};
-
-export default ProgressBarOnboarding;
diff --git a/packages/components/src/components/progress-bar-tracker/index.ts b/packages/components/src/components/progress-bar-tracker/index.ts
new file mode 100644
index 000000000000..5eb7716bff17
--- /dev/null
+++ b/packages/components/src/components/progress-bar-tracker/index.ts
@@ -0,0 +1,4 @@
+import ProgressBarTracker from './progress-bar-tracker';
+import './progress-bar-tracker.scss';
+
+export default ProgressBarTracker;
diff --git a/packages/components/src/components/progress-bar-onboarding/progress-bar-onboarding.scss b/packages/components/src/components/progress-bar-tracker/progress-bar-tracker.scss
similarity index 93%
rename from packages/components/src/components/progress-bar-onboarding/progress-bar-onboarding.scss
rename to packages/components/src/components/progress-bar-tracker/progress-bar-tracker.scss
index 7539d65d66d2..b3c7ce016b50 100644
--- a/packages/components/src/components/progress-bar-onboarding/progress-bar-onboarding.scss
+++ b/packages/components/src/components/progress-bar-tracker/progress-bar-tracker.scss
@@ -1,4 +1,4 @@
-.progress-bar {
+.dc-progress-bar-tracker {
     display: flex;
     justify-content: center;
     cursor: pointer;
diff --git a/packages/components/src/components/progress-bar-tracker/progress-bar-tracker.tsx b/packages/components/src/components/progress-bar-tracker/progress-bar-tracker.tsx
new file mode 100644
index 000000000000..d53ef8751683
--- /dev/null
+++ b/packages/components/src/components/progress-bar-tracker/progress-bar-tracker.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+type TProgressBarTracker = {
+    step: number;
+    steps_list: Array<string>;
+    setStep: React.Dispatch<React.SetStateAction<number>>;
+};
+
+const ProgressBarTracker = ({ step, steps_list, setStep }: TProgressBarTracker) => (
+    <div className='dc-progress-bar-tracker'>
+        {steps_list.map((step_item, index) => {
+            const active = step === index + 1;
+
+            return (
+                <div
+                    key={step_item}
+                    onClick={() => setStep(index + 1)}
+                    className={active ? 'dc-progress-bar-tracker-rectangle' : 'dc-progress-bar-tracker-circle'}
+                />
+            );
+        })}
+    </div>
+);
+
+export default ProgressBarTracker;
diff --git a/packages/components/src/index.js b/packages/components/src/index.ts
similarity index 98%
rename from packages/components/src/index.js
rename to packages/components/src/index.ts
index 639324205a3c..c2e7729236ed 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.ts
@@ -83,7 +83,7 @@ export { default as Popover } from './components/popover';
 export { default as Popup } from './components/popup';
 export { default as PopoverMessageCheckbox } from './components/popover-message-checkbox';
 export { default as ProgressBar } from './components/progress-bar';
-export { default as ProgressBarOnboarding } from './components/progress-bar-onboarding';
+export { default as ProgressBarTracker } from './components/progress-bar-tracker';
 export { default as ProgressIndicator } from './components/progress-indicator';
 export { default as ProgressSlider } from './components/progress-slider';
 export { default as ProgressSliderMobile } from './components/progress-slider-mobile';