diff --git a/package-lock.json b/package-lock.json
index 5c9376412746..91dd59e2ddc4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,7 @@
                 "@datadog/browser-rum": "^5.11.0",
                 "@deriv-com/analytics": "1.4.13",
                 "@deriv-com/quill-tokens": "^2.0.2",
-                "@deriv-com/quill-ui": "^1.10.2",
+                "@deriv-com/quill-ui": "^1.10.4",
                 "@deriv-com/ui": "^1.14.5",
                 "@deriv-com/utils": "^0.0.20",
                 "@deriv/api-types": "^1.0.172",
@@ -2983,9 +2983,9 @@
             }
         },
         "node_modules/@deriv-com/quill-ui": {
-            "version": "1.10.2",
-            "resolved": "https://registry.npmjs.org/@deriv-com/quill-ui/-/quill-ui-1.10.2.tgz",
-            "integrity": "sha512-RSdX2bsZlSob3ntvMPj4qsAJurcVBI3mH0NRBIHWM88kDHa0wHAV8vNS4DcARG4LrX24IIL8VXZz4HOUGPlvaQ==",
+            "version": "1.10.4",
+            "resolved": "https://registry.npmjs.org/@deriv-com/quill-ui/-/quill-ui-1.10.4.tgz",
+            "integrity": "sha512-PW1qmIadS+u0XUZ3C+B3ILwt//PByLy4lWK6CbW51nfWxuFNoFA2R7Ibvz/zHdeFIH02B4WOAMGYP0loYVgb2Q==",
             "dependencies": {
                 "@deriv/quill-icons": "^1.19.20",
                 "@headlessui/react": "^1.7.18",
diff --git a/packages/core/package.json b/packages/core/package.json
index 9e96fafdca15..591188fc45df 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -97,7 +97,7 @@
         "@datadog/browser-rum": "^5.11.0",
         "@deriv-com/analytics": "1.4.13",
         "@deriv-com/quill-tokens": "^2.0.2",
-        "@deriv-com/quill-ui": "^1.10.3",
+        "@deriv-com/quill-ui": "^1.10.4",
         "@deriv-com/utils": "^0.0.20",
         "@deriv/account": "^1.0.0",
         "@deriv/account-v2": "^1.0.0",
diff --git a/packages/trader/package.json b/packages/trader/package.json
index c1ea6ccca9f1..5a929beb2888 100644
--- a/packages/trader/package.json
+++ b/packages/trader/package.json
@@ -90,7 +90,7 @@
         "@cloudflare/stream-react": "^1.9.1",
         "@deriv-com/analytics": "1.4.13",
         "@deriv-com/quill-tokens": "^2.0.2",
-        "@deriv-com/quill-ui": "^1.10.3",
+        "@deriv-com/quill-ui": "^1.10.4",
         "@deriv-com/utils": "^0.0.20",
         "@deriv/api-types": "^1.0.172",
         "@deriv/components": "^1.0.0",
diff --git a/packages/trader/src/AppV2/Components/BottomNav/bottom-nav.tsx b/packages/trader/src/AppV2/Components/BottomNav/bottom-nav.tsx
index 797df82fe219..090595cf6ca1 100644
--- a/packages/trader/src/AppV2/Components/BottomNav/bottom-nav.tsx
+++ b/packages/trader/src/AppV2/Components/BottomNav/bottom-nav.tsx
@@ -9,6 +9,7 @@ import {
 } from '@deriv/quill-icons';
 import BottomNavItem from './bottom-nav-item';
 import { Badge } from '@deriv-com/quill-ui';
+import ContractDetailsFooter from '../ContractDetailsFooter';
 
 type BottomNavProps = {
     className?: string;
@@ -58,6 +59,7 @@ const BottomNav = ({ className, children }: BottomNavProps) => {
     return (
         <div className={classNames('bottom-nav', className)}>
             <div className='bottom-nav-selection'>{children[selectedIndex]}</div>
+            {selectedIndex === 4 && <ContractDetailsFooter />}
             <div className='bottom-nav-container'>
                 {bottomNavItems.map((item, index) => (
                     <BottomNavItem
diff --git a/packages/trader/src/AppV2/Components/CardWrapper/card-wrapper.scss b/packages/trader/src/AppV2/Components/CardWrapper/card-wrapper.scss
index 0825598b67d4..00b400d2fee2 100644
--- a/packages/trader/src/AppV2/Components/CardWrapper/card-wrapper.scss
+++ b/packages/trader/src/AppV2/Components/CardWrapper/card-wrapper.scss
@@ -3,6 +3,9 @@
     margin-top: 0.5rem;
     padding: 1rem;
     border-radius: 0.625rem;
+    display: flex;
+    flex-direction: column;
+    gap: var(--semantic-spacing-gap-lg);
 
     .title {
         margin-bottom: 1rem;
diff --git a/packages/trader/src/AppV2/Components/ContractDetailsFooter/contract-details-footer.scss b/packages/trader/src/AppV2/Components/ContractDetailsFooter/contract-details-footer.scss
new file mode 100644
index 000000000000..7ca39ae4dcfd
--- /dev/null
+++ b/packages/trader/src/AppV2/Components/ContractDetailsFooter/contract-details-footer.scss
@@ -0,0 +1,13 @@
+.contract-details-footer {
+    &--container {
+        padding: var(--semantic-spacing-general-md);
+        background-color: var(--core-color-solid-slate-50);
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: var(--semantic-spacing-gap-md);
+        width: 100%;
+        box-shadow: var(--core-elevation-shadow-210);
+    }
+}
diff --git a/packages/trader/src/AppV2/Components/ContractDetailsFooter/contract-details-footer.tsx b/packages/trader/src/AppV2/Components/ContractDetailsFooter/contract-details-footer.tsx
new file mode 100644
index 000000000000..b094f64b201e
--- /dev/null
+++ b/packages/trader/src/AppV2/Components/ContractDetailsFooter/contract-details-footer.tsx
@@ -0,0 +1,13 @@
+import { Button } from '@deriv-com/quill-ui';
+import React from 'react';
+
+const ContractDetailsFooter = () => {
+    return (
+        <div className='contract-details-footer--container'>
+            <Button variant='secondary' label='just a simple button' color='black' fullWidth />
+            <Button variant='secondary' label='just a simple button' color='black' fullWidth />
+        </div>
+    );
+};
+
+export default ContractDetailsFooter;
diff --git a/packages/trader/src/AppV2/Components/ContractDetailsFooter/index.ts b/packages/trader/src/AppV2/Components/ContractDetailsFooter/index.ts
new file mode 100644
index 000000000000..0ceb14289514
--- /dev/null
+++ b/packages/trader/src/AppV2/Components/ContractDetailsFooter/index.ts
@@ -0,0 +1,4 @@
+import ContractDetailsFooter from './contract-details-footer';
+import './contract-details-footer.scss';
+
+export default ContractDetailsFooter;
diff --git a/packages/trader/src/AppV2/Components/InfoModal/index.ts b/packages/trader/src/AppV2/Components/InfoModal/index.ts
deleted file mode 100644
index 16636d3b3ba4..000000000000
--- a/packages/trader/src/AppV2/Components/InfoModal/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import InfoModal from './info-modal';
-import './info-modal.scss';
-
-export default InfoModal;
diff --git a/packages/trader/src/AppV2/Components/InfoModal/info-modal.tsx b/packages/trader/src/AppV2/Components/InfoModal/info-modal.tsx
deleted file mode 100644
index 9efc5c7881a0..000000000000
--- a/packages/trader/src/AppV2/Components/InfoModal/info-modal.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { CaptionText, Modal } from '@deriv-com/quill-ui';
-import { localize } from '@deriv/translations';
-import React from 'react';
-
-type InfoModalProps = {
-    icon?: React.ReactNode;
-    header_content: string;
-    body_content: string;
-    className?: string;
-};
-
-const InfoModal = ({ header_content, body_content, icon }: InfoModalProps) => {
-    const [isVisible, setIsVisible] = React.useState(false);
-    return (
-        <>
-            <button onClick={() => setIsVisible(!isVisible)}>
-                {icon ? (
-                    <>{icon}</>
-                ) : (
-                    <CaptionText size='sm' bold underlined className='payout-info-text'>
-                        {header_content}
-                    </CaptionText>
-                )}
-            </button>
-            <Modal
-                isOpened={isVisible}
-                toggleModal={setIsVisible}
-                primaryButtonLabel={localize('Got it')}
-                shouldCloseOnPrimaryButtonClick
-                isMobile
-                showHandleBar
-            >
-                <Modal.Header title={header_content} />
-                <Modal.Body>{body_content}</Modal.Body>
-            </Modal>
-        </>
-    );
-};
-
-export default InfoModal;
diff --git a/packages/trader/src/AppV2/Components/PayoutInfoModal/index.ts b/packages/trader/src/AppV2/Components/PayoutInfoModal/index.ts
new file mode 100644
index 000000000000..789a9f6da67a
--- /dev/null
+++ b/packages/trader/src/AppV2/Components/PayoutInfoModal/index.ts
@@ -0,0 +1,4 @@
+import PayoutInfoModal from './payout-info-modal';
+import './payout-info-modal.scss';
+
+export default PayoutInfoModal;
diff --git a/packages/trader/src/AppV2/Components/InfoModal/info-modal.scss b/packages/trader/src/AppV2/Components/PayoutInfoModal/payout-info-modal.scss
similarity index 100%
rename from packages/trader/src/AppV2/Components/InfoModal/info-modal.scss
rename to packages/trader/src/AppV2/Components/PayoutInfoModal/payout-info-modal.scss
diff --git a/packages/trader/src/AppV2/Components/PayoutInfoModal/payout-info-modal.tsx b/packages/trader/src/AppV2/Components/PayoutInfoModal/payout-info-modal.tsx
new file mode 100644
index 000000000000..f8404e86e336
--- /dev/null
+++ b/packages/trader/src/AppV2/Components/PayoutInfoModal/payout-info-modal.tsx
@@ -0,0 +1,29 @@
+import { CaptionText, Modal } from '@deriv-com/quill-ui';
+import { Localize } from '@deriv/translations';
+import React from 'react';
+
+const PayoutInfoModal = ({ body_content }: { body_content: React.ReactNode }) => {
+    const [isVisible, setIsVisible] = React.useState(false);
+    return (
+        <>
+            <button onClick={() => setIsVisible(!isVisible)}>
+                <CaptionText size='sm' bold underlined className='payout-info-text'>
+                    <Localize i18n_default_text='How do I earn a payout?' />
+                </CaptionText>
+            </button>
+            <Modal
+                isOpened={isVisible}
+                toggleModal={setIsVisible}
+                primaryButtonLabel={<Localize i18n_default_text='Got it' />}
+                shouldCloseOnPrimaryButtonClick
+                isMobile
+                showHandleBar
+            >
+                <Modal.Header title={<Localize i18n_default_text='How do I earn a payout?' />} />
+                <Modal.Body>{body_content}</Modal.Body>
+            </Modal>
+        </>
+    );
+};
+
+export default PayoutInfoModal;
diff --git a/packages/trader/src/AppV2/Components/RiskManagementInfoModal/risk-management-info-modal.tsx b/packages/trader/src/AppV2/Components/RiskManagementInfoModal/risk-management-info-modal.tsx
new file mode 100644
index 000000000000..65be3df679f5
--- /dev/null
+++ b/packages/trader/src/AppV2/Components/RiskManagementInfoModal/risk-management-info-modal.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { Modal } from '@deriv-com/quill-ui';
+import { Localize } from '@deriv/translations';
+import { LabelPairedCircleInfoSmRegularIcon } from '@deriv/quill-icons';
+
+type RiskManagementInfoModalProps = {
+    header_content: React.ReactNode;
+    body_content: React.ReactNode;
+    is_deal_cancellation_enabled?: boolean;
+};
+
+const RiskManagementInfoModal = ({
+    header_content,
+    body_content,
+    is_deal_cancellation_enabled = false,
+}: RiskManagementInfoModalProps) => {
+    const [isVisible, setIsVisible] = React.useState(false);
+    return (
+        <>
+            <button onClick={() => setIsVisible(!isVisible)}>
+                <LabelPairedCircleInfoSmRegularIcon />
+            </button>
+            <Modal
+                isOpened={isVisible}
+                toggleModal={setIsVisible}
+                primaryButtonLabel={<Localize i18n_default_text='Got it' />}
+                shouldCloseOnPrimaryButtonClick
+                isMobile
+                showHandleBar
+            >
+                <Modal.Header title={header_content} />
+                <Modal.Body>
+                    {body_content}
+                    {is_deal_cancellation_enabled && <div>hello</div>}
+                </Modal.Body>
+            </Modal>
+        </>
+    );
+};
+
+export default RiskManagementInfoModal;
diff --git a/packages/trader/src/AppV2/Components/RiskManagementItem/index.ts b/packages/trader/src/AppV2/Components/RiskManagementItem/index.ts
new file mode 100644
index 000000000000..043be75aa91b
--- /dev/null
+++ b/packages/trader/src/AppV2/Components/RiskManagementItem/index.ts
@@ -0,0 +1,4 @@
+import RiskManagementItem from './risk-management-item';
+import './risk-management-item.scss';
+
+export default RiskManagementItem;
diff --git a/packages/trader/src/AppV2/Components/RiskManagementItem/risk-management-item.scss b/packages/trader/src/AppV2/Components/RiskManagementItem/risk-management-item.scss
new file mode 100644
index 000000000000..d50c778f3397
--- /dev/null
+++ b/packages/trader/src/AppV2/Components/RiskManagementItem/risk-management-item.scss
@@ -0,0 +1,22 @@
+.risk-management-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--semantic-spacing-gap-lg);
+
+    &--container {
+        display: flex;
+        flex-direction: column;
+        gap: var(--semantic-spacing-gap-md);
+    }
+
+    &--title {
+        display: flex;
+        gap: var(--semantic-spacing-gap-md);
+    }
+
+    .deal-cancellation-badge {
+        background-color: var(--semantic-color-monochrome-surface-normal-lowest);
+        border-radius: var(--semantic-borderRadius-sm);
+    }
+}
diff --git a/packages/trader/src/AppV2/Components/RiskManagementItem/risk-management-item.tsx b/packages/trader/src/AppV2/Components/RiskManagementItem/risk-management-item.tsx
new file mode 100644
index 000000000000..96d22c5efb7e
--- /dev/null
+++ b/packages/trader/src/AppV2/Components/RiskManagementItem/risk-management-item.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import { ActionSheet, Tag, Text, TextField, ToggleSwitch } from '@deriv-com/quill-ui';
+import { localize } from '@deriv/translations';
+import RiskManagementInfoModal from '../RiskManagementInfoModal/risk-management-info-modal';
+import { LabelPairedStopwatchCaptionRegularIcon } from '@deriv/quill-icons';
+
+type RiskManagementItemProps = {
+    label: React.ReactNode;
+    modal_body_content: React.ReactNode;
+    validation_message?: React.ReactNode;
+    is_deal_cancellation?: boolean;
+};
+
+const RiskManagementItem = ({
+    label,
+    modal_body_content,
+    validation_message,
+    is_deal_cancellation = false,
+}: RiskManagementItemProps) => {
+    const [toggle, setToggle] = React.useState(false);
+    const [isOpen, setIsOpen] = React.useState(false);
+    const dummy_boolean = true; // This will be flag from backend
+
+    return (
+        <div className='risk-management-item--container'>
+            <div className='risk-management-item'>
+                <span className='risk-management-item--title'>
+                    <Text size='sm'>{label}</Text>
+                    <RiskManagementInfoModal header_content={label} body_content={modal_body_content} />
+                </span>
+                {dummy_boolean && !is_deal_cancellation && <span>5 USD</span>}
+                {/* {is_deal_cancellation && <div>For now</div>} */}
+                {is_deal_cancellation && (
+                    <Tag
+                        variant='custom'
+                        label='59:59'
+                        icon={LabelPairedStopwatchCaptionRegularIcon}
+                        size='sm'
+                        color='custom'
+                        className='deal-cancellation-badge'
+                    />
+                )}
+                {!dummy_boolean && !is_deal_cancellation && (
+                    <ToggleSwitch checked={toggle} onChange={() => setToggle(!toggle)} />
+                )}
+            </div>
+            {toggle && (
+                <TextField
+                    variant='fill'
+                    inputSize='md'
+                    textAlignment='center'
+                    value='5.00 USD'
+                    onFocus={() => setIsOpen(true)}
+                />
+            )}
+            <ActionSheet.Root expandable isOpen={isOpen} onClose={() => setIsOpen(false)}>
+                <ActionSheet.Portal>
+                    <ActionSheet.Header title={label} />
+                    <ActionSheet.Content>
+                        <TextField
+                            variant='fill'
+                            inputSize='md'
+                            textAlignment='center'
+                            value='5.00 USD'
+                            message={validation_message}
+                        />
+                    </ActionSheet.Content>
+                    <ActionSheet.Footer
+                        shouldCloseOnPrimaryButtonClick
+                        primaryAction={{
+                            content: localize('Save'),
+                            onAction: () => {
+                                //do the save
+                            },
+                        }}
+                    />
+                </ActionSheet.Portal>
+            </ActionSheet.Root>
+        </div>
+    );
+};
+
+export default RiskManagementItem;
diff --git a/packages/trader/src/AppV2/Containers/ContractDetails/contract-details.scss b/packages/trader/src/AppV2/Containers/ContractDetails/contract-details.scss
index 7ffe41180a11..1e10a14fc135 100644
--- a/packages/trader/src/AppV2/Containers/ContractDetails/contract-details.scss
+++ b/packages/trader/src/AppV2/Containers/ContractDetails/contract-details.scss
@@ -1,6 +1,5 @@
 .contract-details {
     background-color: rgba(0, 0, 0, 0.48);
-    height: 88vh;
     padding: 8px;
 }
 .placeholder {
diff --git a/packages/trader/src/AppV2/Containers/ContractDetails/contract-details.tsx b/packages/trader/src/AppV2/Containers/ContractDetails/contract-details.tsx
index 21937dd4454d..887ec4498d52 100644
--- a/packages/trader/src/AppV2/Containers/ContractDetails/contract-details.tsx
+++ b/packages/trader/src/AppV2/Containers/ContractDetails/contract-details.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 import { Text } from '@deriv-com/quill-ui';
 import EntryExitDetails from 'AppV2/Components/EntryExitDetails';
-import InfoSheet from 'AppV2/Components/InfoModal';
-import { localize } from '@deriv/translations';
-import { LabelPairedCircleInfoSmRegularIcon } from '@deriv/quill-icons';
+import PayoutInfoModal from 'AppV2/Components/PayoutInfoModal';
 import ChartPlaceholder from '../Chart';
+import { Localize } from '@deriv/translations';
+import RiskManagementItem from 'AppV2/Components/RiskManagementItem';
+import CardWrapper from 'AppV2/Components/CardWrapper';
 
 const ContractDetails = () => {
     return (
@@ -12,29 +13,37 @@ const ContractDetails = () => {
             <div className='placeholder'>
                 <Text size='sm'>Contract Details</Text>
             </div>
-            <InfoSheet
-                header_content={localize('How do I earn a payout?')}
-                body_content={localize(
-                    'After the entry spot tick, your stake will grow continuously by 1% for every tick that the spot price remains within the ± 0.06444% from the previous spot price.'
-                )}
+            <PayoutInfoModal
+                body_content={
+                    <Localize i18n_default_text='After the entry spot tick, your stake will grow continuously by 1% for every tick that the spot price remains within the ± 0.06444% from the previous spot price.' />
+                }
             />
             <div className='placeholder'>
                 <Text size='sm'>Contract card</Text>
             </div>
-            Take Profit
-            <InfoSheet
-                icon={<LabelPairedCircleInfoSmRegularIcon />}
-                header_content={localize('Take profit')}
-                body_content={localize(
-                    'When your profit reaches or exceeds the set amount, your trade will be closed automatically.'
-                )}
-            />
             <div className='placeholder'>
                 <ChartPlaceholder />
             </div>
-            <div className='placeholder'>
-                <Text size='sm'>Take profit</Text>
-            </div>
+            <CardWrapper>
+                <RiskManagementItem
+                    label={<Localize i18n_default_text='Deal cancellation' />}
+                    modal_body_content={<Localize i18n_default_text='Whatever you desire' />}
+                    validation_message='hello'
+                    is_deal_cancellation
+                />
+            </CardWrapper>
+            <CardWrapper>
+                <RiskManagementItem
+                    label={<Localize i18n_default_text='Take profit' />}
+                    modal_body_content={<Localize i18n_default_text='Whatever you desire' />}
+                    validation_message='hello'
+                />
+                <RiskManagementItem
+                    label={<Localize i18n_default_text='Stop Loss' />}
+                    modal_body_content={<Localize i18n_default_text='Whatever you desire' />}
+                    validation_message='hello'
+                />
+            </CardWrapper>
             <div className='placeholder'>
                 <Text size='sm'>Order details</Text>
             </div>
diff --git a/packages/trader/src/AppV2/app.tsx b/packages/trader/src/AppV2/app.tsx
index 7d32afa8a9c6..f09fe535e07c 100644
--- a/packages/trader/src/AppV2/app.tsx
+++ b/packages/trader/src/AppV2/app.tsx
@@ -27,7 +27,7 @@ const App = ({ passthrough }: Apptypes) => {
 
     return (
         <TraderProviders store={root_store}>
-            <BottomNav className='bottom-nav'>
+            <BottomNav>
                 <Trade />
                 <Markets />
                 <Positions />