diff --git a/packages/tradershub/src/components/RegulationSwitcher/RegulationSwitcherDesktop.tsx b/packages/tradershub/src/components/RegulationSwitcher/RegulationSwitcherDesktop.tsx
index c61e6513c3c3..3b29c3096d0f 100644
--- a/packages/tradershub/src/components/RegulationSwitcher/RegulationSwitcherDesktop.tsx
+++ b/packages/tradershub/src/components/RegulationSwitcher/RegulationSwitcherDesktop.tsx
@@ -1,16 +1,20 @@
 import React, { useEffect } from 'react';
 import { useActiveTradingAccount, useAuthorize, useIsDIELEnabled, useTradingAccountsList } from '@deriv/api';
+import { Provider } from '@deriv/library';
 import { Button, qtJoin } from '@deriv/quill-design';
 import { LabelPairedCircleInfoMdRegularIcon } from '@deriv/quill-icons';
 import { Text } from '@deriv-com/ui/dist/components/Text';
 import { Regulation } from '../../constants/constants';
 import useRegulationFlags from '../../hooks/useRegulationFlags';
+import { RegulationModal } from '../../modals';
 import { useUIContext } from '../UIProvider';
 
 const RegulationSwitcherDesktop = () => {
     const { switchAccount } = useAuthorize();
     const { data: tradingAccountsList } = useTradingAccountsList();
     const { getUIState, setUIState } = useUIContext();
+    const { show } = Provider.useModal();
+
     const { data: isDIEL } = useIsDIELEnabled();
     const regulation = getUIState('regulation');
     const accountType = getUIState('accountType');
@@ -53,7 +57,10 @@ const RegulationSwitcherDesktop = () => {
         <div className='flex items-center gap-400'>
             <div className='flex items-center gap-400'>
                 <Text size='sm'>Regulation:</Text>
-                <LabelPairedCircleInfoMdRegularIcon />
+                <LabelPairedCircleInfoMdRegularIcon
+                    className='cursor-pointer'
+                    onClick={() => show(<RegulationModal />)}
+                />
             </div>
             <div className='flex bg-system-light-secondary-background rounded-400 p-200 gap-200 w-[200px] h-2000'>
                 {buttons.map(button => (
diff --git a/packages/tradershub/src/components/RegulationSwitcher/RegulationSwitcherMobile.tsx b/packages/tradershub/src/components/RegulationSwitcher/RegulationSwitcherMobile.tsx
index bd3fd7865508..8770eed9fbcd 100644
--- a/packages/tradershub/src/components/RegulationSwitcher/RegulationSwitcherMobile.tsx
+++ b/packages/tradershub/src/components/RegulationSwitcher/RegulationSwitcherMobile.tsx
@@ -1,14 +1,19 @@
 // TODO: Add logic to switch between EU and non-EU
 import React from 'react';
+import { Provider } from '@deriv/library';
 import { Tab } from '@deriv/quill-design';
+import { RegulationModal } from '../../modals';
 import InfoIcon from '../../public/images/ic-info-outline.svg';
 
 const RegulationSwitcherMobile = () => {
+    const { show } = Provider.useModal();
+
     const activeClassName =
         'aria-selected:font-bold active:font-bold aria-selected:border-b-brand-coral active:border-b-brand-coral';
+
     return (
         <div className='flex items-center gap-400'>
-            <InfoIcon className='h-auto w-800' />
+            <InfoIcon className='h-auto w-800' onClick={() => show(<RegulationModal />)} />
             <Tab.Container size='sm'>
                 <Tab.List>
                     <Tab.Trigger className={activeClassName}>Non - EU</Tab.Trigger>
diff --git a/packages/tradershub/src/constants/regulators-modal-content.ts b/packages/tradershub/src/constants/regulators-modal-content.ts
new file mode 100644
index 000000000000..0fa242c18a57
--- /dev/null
+++ b/packages/tradershub/src/constants/regulators-modal-content.ts
@@ -0,0 +1,175 @@
+/* eslint-disable sort-keys */
+import { TextProps } from '@deriv-com/ui/dist/components/Text';
+
+export type TRowItem = {
+    options?: {
+        align?: TextProps['align'];
+        color?: TextProps['color'];
+        shouldShowAsterickAtEnd?: boolean;
+        weight?: TextProps['weight'];
+    };
+    text: string;
+};
+
+type TRegulatorContent = Record<string, TRowItem | TRowItem[]>;
+
+export type TRegulatorsContentProps = {
+    attribute: string;
+    content: TRegulatorContent;
+    id: string;
+};
+
+export const getCFDContents: TRegulatorsContentProps[] = [
+    {
+        attribute: 'CFDs',
+        content: {
+            nonEuRegulator: { text: 'Yes' },
+            euRegulator: { text: 'Yes' },
+        },
+        id: 'cfds',
+    },
+    {
+        attribute: 'Regulators/external dispute resolution',
+        content: {
+            nonEuRegulator: [
+                { text: 'Financial Commission' },
+                { text: 'British Virgin Islands Financial Services Commission' },
+                { text: 'Vanuatu Financial Services Commission' },
+                { text: 'Labuan Financial Services Authority' },
+            ],
+            euRegulator: { text: 'Malta Financial Services Authority' },
+        },
+        id: 'regulators',
+    },
+    {
+        attribute: 'Counterparty company',
+        content: {
+            nonEuRegulator: [
+                { text: 'Deriv (SVG) LLC' },
+                { text: 'Deriv (BVI) Ltd' },
+                { text: 'Deriv (V) Ltd' },
+                { text: 'Deriv (FX) Ltd' },
+            ],
+            euRegulator: { text: 'Deriv Investments (Europe) Limited' },
+        },
+        id: 'counterparty_company',
+    },
+    {
+        attribute: 'Negative balance protection',
+        content: {
+            nonEuRegulator: { text: 'Synthetics only' },
+            euRegulator: { text: 'All assets' },
+        },
+        id: 'negative_balance_protection',
+    },
+    {
+        attribute: 'Leverage',
+        content: {
+            nonEuRegulator: { text: '100-1000' },
+            euRegulator: { text: '30' },
+        },
+        id: 'leverage',
+    },
+    {
+        attribute: 'Assets',
+        content: {
+            nonEuRegulator: [
+                { text: 'Synthetics' },
+                { text: 'Baskets' },
+                { text: 'Derived FX' },
+                { text: 'Forex' },
+                { text: 'Stocks' },
+                { text: 'Stock indices' },
+                { text: 'Commodities' },
+                { text: 'Cryptocurrencies' },
+            ],
+            euRegulator: [
+                { options: { shouldShowAsterickAtEnd: true }, text: 'Synthetics' },
+                { text: 'Forex' },
+                { text: 'Stocks' },
+                { text: 'Stock indices' },
+                { text: 'Commodities' },
+                { text: 'Cryptocurrencies' },
+                {
+                    options: { color: 'error', weight: 'bold' },
+                    text: '*Boom 300 and Crash 300 Index',
+                },
+                {
+                    options: { color: 'error', weight: 'bold' },
+                    text: '*Volatility 150 Index and Volatility 250 Index',
+                },
+            ],
+        },
+        id: 'assets',
+    },
+    {
+        attribute: 'Platform',
+        content: {
+            nonEuRegulator: { text: 'Deriv MT5, Deriv X' },
+            euRegulator: { text: 'Deriv MT5' },
+        },
+        id: 'platform',
+    },
+];
+
+export const getOptionsContents: TRegulatorsContentProps[] = [
+    {
+        attribute: 'Options & Multipliers',
+        content: {
+            nonEuRegulator: { text: 'Yes' },
+            euRegulator: { options: { weight: 'bold' }, text: 'Multipliers only' },
+        },
+        id: 'options',
+    },
+    {
+        attribute: 'Regulators/external dispute resolution',
+        content: {
+            nonEuRegulator: { text: 'Financial Commission' },
+            euRegulator: { text: 'Malta Financial Services Authority' },
+        },
+        id: 'regulator_in_options',
+    },
+    {
+        attribute: 'Counterparty company',
+        content: {
+            nonEuRegulator: { text: 'Deriv (SVG) LLC' },
+            euRegulator: { text: 'Deriv Investments (Europe) Limited' },
+        },
+        id: 'counterparty_company_in_options',
+    },
+    {
+        attribute: 'Assets',
+        content: {
+            nonEuRegulator: [
+                { text: 'Synthetics' },
+                { text: 'Baskets' },
+                { text: 'Forex' },
+                { text: 'Stocks' },
+                { text: 'Stock indices' },
+                { text: 'Commodities' },
+                { text: 'Cryptocurrencies' },
+            ],
+            euRegulator: [
+                {
+                    options: { shouldShowAsterickAtEnd: true },
+                    text: 'Synthetics',
+                },
+                { text: 'Forex' },
+                { text: 'Cryptocurrencies' },
+                {
+                    options: { color: 'error', weight: 'bold' },
+                    text: '*Boom 300 and Crash 300 Index',
+                },
+            ],
+        },
+        id: 'assets_in_options',
+    },
+    {
+        attribute: 'Platform',
+        content: {
+            nonEuRegulator: { text: 'DTrader, DBot, SmartTrader, and Binary Bot' },
+            euRegulator: { text: 'DTrader' },
+        },
+        id: 'platform_in_options',
+    },
+];
diff --git a/packages/tradershub/src/modals/RegulationModal/RegulationModal.tsx b/packages/tradershub/src/modals/RegulationModal/RegulationModal.tsx
new file mode 100644
index 000000000000..5444f29e3168
--- /dev/null
+++ b/packages/tradershub/src/modals/RegulationModal/RegulationModal.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { Text } from '@deriv-com/ui/dist/components/Text';
+import { Modal } from '../../components/Modal';
+import { getCFDContents, getOptionsContents } from '../../constants/regulators-modal-content';
+import Row from './Row';
+
+const RegulationModal = () => (
+    <Modal className='w-full md:max-w-[743px]'>
+        <Modal.Header title='Non-EU and EU regulations' />
+        <Modal.Content className='p-800 md:p-1200'>
+            <div className='overflow-x-scroll'>
+                <table className='border-separate table-auto min-w-[457px] md:min-w-[695px] bg-system-light-primary-background'>
+                    <thead>
+                        <tr className=''>
+                            <th className='sticky z-10 border-solid border-r-75 border-b-75 border-system-light-active-background start-50 min-h-2000 bg-system-light-primary-background' />
+                            <th className='border-solid p-500 min-h-2000 border-r-75 border-y-75 border-system-light-active-background'>
+                                <Text size='sm' weight='bold'>
+                                    Non-EU regulation
+                                </Text>
+                            </th>
+                            <th className='border-solid p-500 min-h-2000 border-r-75 border-y-75 border-system-light-active-background'>
+                                <Text size='sm' weight='bold'>
+                                    EU regulation
+                                </Text>
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {getCFDContents.map((row, idx) => (
+                            <Row key={row.id} {...row} idx={idx} />
+                        ))}
+                        {getOptionsContents.map((row, idx) => (
+                            <Row key={row.id} {...row} idx={idx} />
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+        </Modal.Content>
+    </Modal>
+);
+
+export default RegulationModal;
diff --git a/packages/tradershub/src/modals/RegulationModal/Row.tsx b/packages/tradershub/src/modals/RegulationModal/Row.tsx
new file mode 100644
index 000000000000..8221a243fb76
--- /dev/null
+++ b/packages/tradershub/src/modals/RegulationModal/Row.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { qtMerge } from '@deriv/quill-design';
+import { Text } from '@deriv-com/ui/dist/components/Text';
+import { TRegulatorsContentProps, TRowItem } from '../../constants/regulators-modal-content';
+
+type TProps = TRegulatorsContentProps & {
+    idx?: number;
+};
+
+const Row = ({ attribute, content, id, idx }: TProps) => (
+    <tr className={qtMerge('min-h-2000', idx === 0 && 'bg-brand-pink-light')} key={id}>
+        <td
+            className={`sticky z-10 align-middle border-solid start-50 py-500 px-400 border-system-light-active-background border-x-75 border-b-75 ${
+                idx === 0 ? 'bg-brand-pink-light' : 'bg-system-light-primary-background'
+            }`}
+        >
+            <Text align='left' as='p' color='general' size='xs' weight='bold'>
+                {attribute}
+            </Text>
+        </td>
+        {Object.keys(content).map(rowKey => (
+            <td
+                className='flex-col justify-center align-middle border-solid whitespace-nowrap py-500 px-400 border-b-75 border-r-75 border-system-light-active-background'
+                key={rowKey}
+            >
+                {Array.isArray(content[rowKey]) ? (
+                    (content[rowKey] as TRowItem[])?.map(item => (
+                        <Text
+                            align={item?.options?.align ?? 'center'}
+                            as='p'
+                            color={item?.options?.color ?? 'prominent'}
+                            key={`${id}_${rowKey}_${item?.text}`}
+                            size='2xs'
+                            weight={item?.options?.weight}
+                        >
+                            {item?.text}
+                            {item?.options?.shouldShowAsterickAtEnd && <Text color='error'>*</Text>}
+                        </Text>
+                    ))
+                ) : (
+                    <Text
+                        align={(content[rowKey] as TRowItem)?.options?.align ?? 'center'}
+                        as='p'
+                        color={(content[rowKey] as TRowItem)?.options?.color ?? 'prominent'}
+                        size='2xs'
+                        weight={(content[rowKey] as TRowItem)?.options?.weight}
+                    >
+                        {(content[rowKey] as TRowItem)?.text}
+                    </Text>
+                )}
+            </td>
+        ))}
+    </tr>
+);
+
+export default Row;
diff --git a/packages/tradershub/src/modals/RegulationModal/index.ts b/packages/tradershub/src/modals/RegulationModal/index.ts
new file mode 100644
index 000000000000..ca260fc6d40a
--- /dev/null
+++ b/packages/tradershub/src/modals/RegulationModal/index.ts
@@ -0,0 +1 @@
+export { default as RegulationModal } from './RegulationModal';
diff --git a/packages/tradershub/src/modals/index.ts b/packages/tradershub/src/modals/index.ts
new file mode 100644
index 000000000000..498310f7221d
--- /dev/null
+++ b/packages/tradershub/src/modals/index.ts
@@ -0,0 +1 @@
+export * from './RegulationModal';
diff --git a/packages/tradershub/tailwind.config.js b/packages/tradershub/tailwind.config.js
index 1034e24c79c1..0f7576bd764e 100644
--- a/packages/tradershub/tailwind.config.js
+++ b/packages/tradershub/tailwind.config.js
@@ -30,6 +30,11 @@ module.exports = {
                     coral: '#ff444f',
                     night: '#2a3052',
                     orange: '#ff6444',
+                    pink: {
+                        dark: '#3c2020',
+                        default: '#ffc0cb',
+                        light: '#ffe3e3',
+                    },
                     red: {
                         dark: '#b33037',
                         darker: '#661b20',