From 55397a65049eb5ea049bb707055aca45dd352700 Mon Sep 17 00:00:00 2001
From: ameerul-deriv <103412909+ameerul-deriv@users.noreply.github.com>
Date: Tue, 2 Apr 2024 14:06:36 +0800
Subject: [PATCH] [FEQ] / Ameerul / FEQ-1977 Refactor my profile page (#14331)

* fix: ui issues in my-profile and create new ad button

* fix: styling issues

* fix: failing test cases

* chore: remove PaymentMethodsHeader component and fix minor style issues

* chore: replace Table component with deriv-com/ui one

* fix: removed unused prop isFloating

* chore: removed text

* chore: refactored PaymentMethodForm, separated components out

* chore: refactored PaymentMethodModals

* fix: style discrepencies in BuySellModal

* chore: removed Text and unused imports

* chore: added suggestions

* chore: added LightDivider component

* fix: ui issues for share-my-ads-modal, dropdown in myadsrow, my-ads-delete-modal

* fix: header padding ShareAdsModal

* chore: removed color from LightDivider, changed prop name

* chore: renamed PaymentMethodFormInput to PaymentMethodFormAutocomplete
---
 .../BuySellAmount/BuySellAmount.tsx           |   9 +-
 .../components/BuySellForm/BuySellForm.scss   |   1 -
 .../components/BuySellForm/BuySellForm.tsx    |   7 +-
 .../BuySellFormHeader/BuySellFormHeader.tsx   |  17 +-
 .../__tests__/BuySellFormHeader.spec.tsx      |   5 +
 .../BuySellPaymentSection.tsx                 |   5 +-
 .../src/components/Clipboard/Clipboard.scss   |   4 +-
 .../src/components/Clipboard/Clipboard.tsx    |   2 +-
 .../FullPageMobileWrapper.scss                |   1 +
 .../components/LightDivider/LightDivider.tsx  |  14 ++
 .../src/components/LightDivider/index.ts      |   1 +
 .../src/components/MobileTabs/MobileTabs.scss |   7 +-
 .../src/components/MobileTabs/MobileTabs.tsx  |   8 +-
 .../BlockUnblockUserModal.tsx                 |   9 +-
 .../Modals/FilterModal/FilterModal.scss       |   1 -
 .../FilterModalFooter/FilterModalFooter.tsx   |  12 +-
 .../MyAdsDeleteModal/MyAdsDeleteModal.scss    |  20 +-
 .../MyAdsDeleteModal/MyAdsDeleteModal.tsx     |  56 +++---
 .../PaymentMethodErrorModal.scss              |  43 ++--
 .../PaymentMethodErrorModal.tsx               |  42 ++--
 .../PaymentMethodErrorModal.spec.tsx          |   5 +
 .../PaymentMethodModal.scss                   |  37 ++++
 .../PaymentMethodModal/PaymentMethodModal.tsx |  81 ++++----
 .../__tests__/PaymentMethodModal.spec.tsx     |   5 +
 .../Modals/PaymentMethods/styles.scss         |  40 ----
 .../Modals/ShareAdsModal/ShareAdsModal.scss   |  21 ++
 .../Modals/ShareAdsModal/ShareAdsModal.tsx    | 149 +++++++-------
 .../Modals/ShareAdsModal/ShareAdsSocials.scss |   5 +
 .../Modals/ShareAdsModal/ShareAdsSocials.tsx  |   5 +-
 .../__tests__/ShareAdsModal.spec.tsx          |   4 +-
 .../src/components/PageReturn/PageReturn.scss |   1 +
 .../src/components/PageReturn/PageReturn.tsx  |   7 +-
 .../PaymentMethodCardHeader.tsx               |   2 +-
 .../PaymentMethodForm/PaymentMethodForm.scss  |  35 +++-
 .../PaymentMethodForm/PaymentMethodForm.tsx   | 187 ++++++------------
 .../PaymentMethodFormAutocomplete.tsx         | 101 ++++++++++
 .../PaymentMethodFormAutocomplete/index.ts    |   1 +
 .../PaymentMethodFormModalRenderer.tsx        |  76 +++++++
 .../PaymentMethodFormModalRenderer/index.ts   |   1 +
 .../__test__/PaymentMethodForm.spec.tsx       |  11 +-
 .../PaymentMethodsFormFooter.scss             |  26 +--
 .../PaymentMethodsFormFooter.tsx              |  50 ++---
 .../PaymentMethodsFormFooter.spec.tsx         |   5 +
 .../PaymentMethodsHeader.scss                 |  13 --
 .../PaymentMethodsHeader.tsx                  |  35 ----
 .../__tests__/PaymentMethodsHeader.spec.tsx   |  14 --
 .../components/PaymentMethodsHeader/index.ts  |   1 -
 .../PopoverDropdown/PopoverDropdown.scss      |  18 +-
 .../PopoverDropdown/PopoverDropdown.tsx       |   4 +-
 .../p2p-v2/src/components/Table/Table.tsx     |   2 +-
 packages/p2p-v2/src/components/index.ts       |   2 +-
 .../CurrencyDropdown/CurrencyDropdown.scss    |   1 -
 .../MyAds/MyAdsTable/MyAdsDisplayWrapper.tsx  |   1 +
 .../screens/MyProfile/MyProfile.scss          |  19 +-
 .../screens/MyProfile/MyProfile.tsx           |  26 +--
 .../MyProfile/__tests__/MyProfile.spec.tsx    |   5 +-
 .../MyProfileAdDetails.scss                   |   8 +-
 .../MyProfileAdDetails/MyProfileAdDetails.tsx |   3 +-
 .../MyProfileCounterparties.tsx               |   1 +
 .../MyProfileCounterpartiesHeader.scss        |   8 +-
 .../MyProfileCounterpartiesHeader.tsx         |  13 +-
 .../MyProfileCounterpartiesTable.scss         |  11 +-
 .../MyProfileCounterpartiesTable.tsx          |  11 +-
 .../MyProfileCounterpartiesTableRow.scss      |   1 -
 .../MyProfileCounterpartiesTableRow.tsx       |   7 +-
 .../MyProfileCounterpartiesTableRow.spec.tsx  |  17 +-
 .../MyProfileStats/MyProfileStatsItem.tsx     |  41 ++--
 .../MyProfileStats/MyProfileStatsMobile.tsx   |   1 +
 .../__tests__/MyProfileStats.spec.tsx         |   6 +
 .../__tests__/MyProfileStatsItem.spec.tsx     |   7 +-
 .../PaymentMethodsEmpty.scss                  |   2 +-
 .../PaymentMethodsEmpty.tsx                   |  13 +-
 .../__tests__/PaymentMethodsEmpty.spec.tsx    |  31 +--
 .../PaymentMethodsList/AddNewButton.tsx       |   5 +-
 .../PaymentMethodsList.scss                   |  30 +--
 .../PaymentMethodsList/PaymentMethodsList.tsx |  14 +-
 .../PaymentMethodsListContent.scss            |  25 +++
 .../PaymentMethodsListContent.tsx             |  11 +-
 .../PaymentMethodsListContent/index.ts        |   1 +
 .../__test__/PaymentMethodsList.spec.tsx      |  25 +--
 .../PaymentMethodsListContent.spec.tsx        |   2 +-
 .../OrderDetailsCard/OrderDetailsCard.tsx     |   7 +-
 .../ActiveOrderInfo/ActiveOrderInfo.tsx       |   9 +-
 .../OrdersChatSection/OrdersChatSection.scss  |   1 -
 .../OrdersChatSection/OrdersChatSection.tsx   |   8 +-
 .../p2p-v2/src/routes/AppContent/index.scss   |   4 +
 86 files changed, 930 insertions(+), 653 deletions(-)
 create mode 100644 packages/p2p-v2/src/components/LightDivider/LightDivider.tsx
 create mode 100644 packages/p2p-v2/src/components/LightDivider/index.ts
 create mode 100644 packages/p2p-v2/src/components/Modals/PaymentMethods/PaymentMethodModal/PaymentMethodModal.scss
 delete mode 100644 packages/p2p-v2/src/components/Modals/PaymentMethods/styles.scss
 create mode 100644 packages/p2p-v2/src/components/PaymentMethodForm/PaymentMethodFormAutocomplete/PaymentMethodFormAutocomplete.tsx
 create mode 100644 packages/p2p-v2/src/components/PaymentMethodForm/PaymentMethodFormAutocomplete/index.ts
 create mode 100644 packages/p2p-v2/src/components/PaymentMethodForm/PaymentMethodFormModalRenderer/PaymentMethodFormModalRenderer.tsx
 create mode 100644 packages/p2p-v2/src/components/PaymentMethodForm/PaymentMethodFormModalRenderer/index.ts
 delete mode 100644 packages/p2p-v2/src/components/PaymentMethodsHeader/PaymentMethodsHeader.scss
 delete mode 100644 packages/p2p-v2/src/components/PaymentMethodsHeader/PaymentMethodsHeader.tsx
 delete mode 100644 packages/p2p-v2/src/components/PaymentMethodsHeader/__tests__/PaymentMethodsHeader.spec.tsx
 delete mode 100644 packages/p2p-v2/src/components/PaymentMethodsHeader/index.ts
 create mode 100644 packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/PaymentMethodsListContent/PaymentMethodsListContent.scss
 rename packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/{ => PaymentMethodsListContent}/PaymentMethodsListContent.tsx (95%)
 create mode 100644 packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/PaymentMethodsListContent/index.ts

diff --git a/packages/p2p-v2/src/components/BuySellForm/BuySellAmount/BuySellAmount.tsx b/packages/p2p-v2/src/components/BuySellForm/BuySellAmount/BuySellAmount.tsx
index 34178a33c619..4070f13d2832 100644
--- a/packages/p2p-v2/src/components/BuySellForm/BuySellAmount/BuySellAmount.tsx
+++ b/packages/p2p-v2/src/components/BuySellForm/BuySellAmount/BuySellAmount.tsx
@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
+import { LightDivider } from '@/components';
 import { floatingPointValidator } from '@/utils';
-import { Divider, Input, Text, useDevice } from '@deriv-com/ui';
+import { Input, Text, useDevice } from '@deriv-com/ui';
 import { FormatUtils } from '@deriv-com/utils';
 import './BuySellAmount.scss';
 
@@ -42,7 +43,7 @@ const BuySellAmount = ({
 
     return (
         <div className='flex flex-col gap-[2rem] py-[2.4rem]'>
-            <Text className='px-[2.4rem]' color='less-prominent' size={labelSize}>
+            <Text className='px-[2.4rem]' color='less-prominent' size='sm'>
                 {`Enter ${isBuy ? 'sell' : 'buy'} amount`}
             </Text>
             <div className='p2p-v2-buy-sell-amount__input-wrapper'>
@@ -93,10 +94,10 @@ const BuySellAmount = ({
                         required: 'Enter a valid amount',
                     }}
                 />
-                {isMobile && <Divider />}
+                {isMobile && <LightDivider />}
                 <div className='flex flex-col w-full px-[2.4rem]'>
                     <Text color='less-prominent' size={labelSize}>{`You'll ${isBuy ? 'receive' : 'send'}`}</Text>
-                    <Text size={labelSize} weight='bold'>
+                    <Text size={isMobile ? 'md' : 'sm'} weight='bold'>
                         {buySellAmount} {localCurrency}
                     </Text>
                 </div>
diff --git a/packages/p2p-v2/src/components/BuySellForm/BuySellForm.scss b/packages/p2p-v2/src/components/BuySellForm/BuySellForm.scss
index b8b5395d9433..caea15a0dad1 100644
--- a/packages/p2p-v2/src/components/BuySellForm/BuySellForm.scss
+++ b/packages/p2p-v2/src/components/BuySellForm/BuySellForm.scss
@@ -27,7 +27,6 @@
         position: absolute;
         top: -4rem;
         left: 0;
-        background: #fff;
         z-index: 1;
         height: calc(100vh - 8rem);
 
diff --git a/packages/p2p-v2/src/components/BuySellForm/BuySellForm.tsx b/packages/p2p-v2/src/components/BuySellForm/BuySellForm.tsx
index 73e1aec35cfc..7c31ca25c353 100644
--- a/packages/p2p-v2/src/components/BuySellForm/BuySellForm.tsx
+++ b/packages/p2p-v2/src/components/BuySellForm/BuySellForm.tsx
@@ -12,7 +12,8 @@ import {
     setDecimalPlaces,
 } from '@/utils';
 import { p2p } from '@deriv/api-v2';
-import { Divider, InlineMessage, Text, TextArea, useDevice } from '@deriv-com/ui';
+import { InlineMessage, Text, TextArea, useDevice } from '@deriv-com/ui';
+import { LightDivider } from '../LightDivider';
 import { BuySellAmount } from './BuySellAmount';
 import { BuySellData } from './BuySellData';
 import BuySellFormDisplayWrapper from './BuySellFormDisplayWrapper';
@@ -184,7 +185,7 @@ const BuySellForm = ({
                     paymentMethods={paymentMethods}
                     rate={displayEffectiveRate}
                 />
-                <Divider />
+                <LightDivider />
                 {isBuy && payment_method_names?.length > 0 && (
                     <BuySellPaymentSection
                         availablePaymentMethods={availablePaymentMethods}
@@ -240,7 +241,7 @@ const BuySellForm = ({
                 )}
                 {isBuy && (
                     <>
-                        <Divider />
+                        <LightDivider />
                         <Controller
                             control={control}
                             name='contact_details'
diff --git a/packages/p2p-v2/src/components/BuySellForm/BuySellFormHeader/BuySellFormHeader.tsx b/packages/p2p-v2/src/components/BuySellForm/BuySellFormHeader/BuySellFormHeader.tsx
index 8c05c884eda5..642a33a59c33 100644
--- a/packages/p2p-v2/src/components/BuySellForm/BuySellFormHeader/BuySellFormHeader.tsx
+++ b/packages/p2p-v2/src/components/BuySellForm/BuySellFormHeader/BuySellFormHeader.tsx
@@ -1,14 +1,19 @@
 import React from 'react';
-import { Text } from '@deriv-com/ui';
+import { Text, useDevice } from '@deriv-com/ui';
 
 type TBuySellFormHeaderProps = {
     currency?: string;
     isBuy: boolean;
 };
-const BuySellFormHeader = ({ currency = '', isBuy }: TBuySellFormHeaderProps) => (
-    <Text size='lg' weight='bold'>
-        {`${isBuy ? 'Sell' : 'Buy'} ${currency}`}
-    </Text>
-);
+
+const BuySellFormHeader = ({ currency = '', isBuy }: TBuySellFormHeaderProps) => {
+    const { isMobile } = useDevice();
+
+    return (
+        <Text size={isMobile ? 'lg' : 'md'} weight='bold'>
+            {`${isBuy ? 'Sell' : 'Buy'} ${currency}`}
+        </Text>
+    );
+};
 
 export default BuySellFormHeader;
diff --git a/packages/p2p-v2/src/components/BuySellForm/BuySellFormHeader/__tests__/BuySellFormHeader.spec.tsx b/packages/p2p-v2/src/components/BuySellForm/BuySellFormHeader/__tests__/BuySellFormHeader.spec.tsx
index f1a6394a3aea..bd6f3b657998 100644
--- a/packages/p2p-v2/src/components/BuySellForm/BuySellFormHeader/__tests__/BuySellFormHeader.spec.tsx
+++ b/packages/p2p-v2/src/components/BuySellForm/BuySellFormHeader/__tests__/BuySellFormHeader.spec.tsx
@@ -7,6 +7,11 @@ const mockProps = {
     isBuy: true,
 };
 
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: () => ({ isMobile: false }),
+}));
+
 describe('BuySellFormHeader', () => {
     it('should render the header as expected', () => {
         render(<BuySellFormHeader {...mockProps} />);
diff --git a/packages/p2p-v2/src/components/BuySellForm/BuySellPaymentSection/BuySellPaymentSection.tsx b/packages/p2p-v2/src/components/BuySellForm/BuySellPaymentSection/BuySellPaymentSection.tsx
index 1be54b68725b..80b20e82f0d5 100644
--- a/packages/p2p-v2/src/components/BuySellForm/BuySellPaymentSection/BuySellPaymentSection.tsx
+++ b/packages/p2p-v2/src/components/BuySellForm/BuySellPaymentSection/BuySellPaymentSection.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import { TPaymentMethod } from 'types';
+import { LightDivider } from '@/components';
 import { sortPaymentMethodsWithAvailability } from '@/utils';
-import { Divider, Text, useDevice } from '@deriv-com/ui';
+import { Text, useDevice } from '@deriv-com/ui';
 import { PaymentMethodCard } from '../../PaymentMethodCard';
 
 type TBuySellPaymentSectionProps = {
@@ -70,7 +71,7 @@ const BuySellPaymentSection = ({
                     ))}
                 </div>
             </div>
-            <Divider />
+            <LightDivider />
         </>
     );
 };
diff --git a/packages/p2p-v2/src/components/Clipboard/Clipboard.scss b/packages/p2p-v2/src/components/Clipboard/Clipboard.scss
index 3e45e841f528..64f7cbed48e8 100644
--- a/packages/p2p-v2/src/components/Clipboard/Clipboard.scss
+++ b/packages/p2p-v2/src/components/Clipboard/Clipboard.scss
@@ -6,6 +6,6 @@
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    height: 4.8rem;
-    width: 3.8rem;
+    height: 3.8rem;
+    width: 3.2rem;
 }
diff --git a/packages/p2p-v2/src/components/Clipboard/Clipboard.tsx b/packages/p2p-v2/src/components/Clipboard/Clipboard.tsx
index a5a898204508..d8271b4aa996 100644
--- a/packages/p2p-v2/src/components/Clipboard/Clipboard.tsx
+++ b/packages/p2p-v2/src/components/Clipboard/Clipboard.tsx
@@ -33,7 +33,7 @@ const Clipboard = ({ textCopy }: TClipboardProps) => {
     }, []);
 
     return (
-        <Tooltip message={isCopied ? 'Copied!' : 'Copy'} position='right'>
+        <Tooltip message={isCopied ? 'Copied!' : 'Copy'} position='top'>
             <button className='p2p-v2-clipboard' onClick={onClick}>
                 {isCopied ? <CheckmarkCircle /> : <CopyIcon />}
             </button>
diff --git a/packages/p2p-v2/src/components/FullPageMobileWrapper/FullPageMobileWrapper.scss b/packages/p2p-v2/src/components/FullPageMobileWrapper/FullPageMobileWrapper.scss
index 8764a7cdeafc..0c2d83a1dcff 100644
--- a/packages/p2p-v2/src/components/FullPageMobileWrapper/FullPageMobileWrapper.scss
+++ b/packages/p2p-v2/src/components/FullPageMobileWrapper/FullPageMobileWrapper.scss
@@ -5,6 +5,7 @@
         border-radius: 0;
         display: grid;
         grid-template-rows: 6rem auto;
+        background-color: #fff;
 
         &--fixed-footer {
             grid-template-rows: 6rem auto 8rem;
diff --git a/packages/p2p-v2/src/components/LightDivider/LightDivider.tsx b/packages/p2p-v2/src/components/LightDivider/LightDivider.tsx
new file mode 100644
index 000000000000..90f1eefc78a3
--- /dev/null
+++ b/packages/p2p-v2/src/components/LightDivider/LightDivider.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Divider } from '@deriv-com/ui';
+
+type TLightDividerProps = {
+    className?: string;
+    height?: string;
+    margin?: string;
+};
+
+const LightDivider = ({ className, height, margin }: TLightDividerProps) => {
+    return <Divider className={className} color='#f2f3f4' height={height} margin={margin} />;
+};
+
+export default LightDivider;
diff --git a/packages/p2p-v2/src/components/LightDivider/index.ts b/packages/p2p-v2/src/components/LightDivider/index.ts
new file mode 100644
index 000000000000..295da5ffebed
--- /dev/null
+++ b/packages/p2p-v2/src/components/LightDivider/index.ts
@@ -0,0 +1 @@
+export { default as LightDivider } from './LightDivider';
diff --git a/packages/p2p-v2/src/components/MobileTabs/MobileTabs.scss b/packages/p2p-v2/src/components/MobileTabs/MobileTabs.scss
index fc802bd25688..e08e31e57341 100644
--- a/packages/p2p-v2/src/components/MobileTabs/MobileTabs.scss
+++ b/packages/p2p-v2/src/components/MobileTabs/MobileTabs.scss
@@ -2,12 +2,13 @@
     display: flex;
     flex-direction: column;
 
-    .derivs-button {
-        padding: 2.3rem 1.6rem;
+    &__tab {
+        padding: 3rem 1.6rem;
         display: flex;
         justify-content: space-between;
-        border-bottom: 0.1rem solid #e6e9e9;
+        border-bottom: 0.1rem solid #f2f3f4;
         flex-direction: row-reverse;
+        border-radius: unset;
 
         &:last-child {
             border-bottom: none;
diff --git a/packages/p2p-v2/src/components/MobileTabs/MobileTabs.tsx b/packages/p2p-v2/src/components/MobileTabs/MobileTabs.tsx
index 405cc09be13a..b7fecf0cea13 100644
--- a/packages/p2p-v2/src/components/MobileTabs/MobileTabs.tsx
+++ b/packages/p2p-v2/src/components/MobileTabs/MobileTabs.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { LabelPairedChevronRightLgBoldIcon } from '@deriv/quill-icons';
-import { Button } from '@deriv-com/ui';
+import { LabelPairedChevronRightSmRegularIcon } from '@deriv/quill-icons';
+import { Button, Text } from '@deriv-com/ui';
 import './MobileTabs.scss';
 
 type TMobileTabsProps<T extends string[]> = {
@@ -15,12 +15,12 @@ function MobileTabs<T extends string[]>({ onChangeTab, tabs }: TMobileTabsProps<
                 <Button
                     className='p2p-v2-mobile-tabs__tab'
                     color='white'
-                    icon={<LabelPairedChevronRightLgBoldIcon />}
+                    icon={<LabelPairedChevronRightSmRegularIcon />}
                     key={`${tab}-${i}`}
                     onClick={() => onChangeTab(tab)}
                     variant='contained'
                 >
-                    {tab}
+                    <Text size='sm'>{tab}</Text>
                 </Button>
             ))}
         </div>
diff --git a/packages/p2p-v2/src/components/Modals/BlockUnblockUserModal/BlockUnblockUserModal.tsx b/packages/p2p-v2/src/components/Modals/BlockUnblockUserModal/BlockUnblockUserModal.tsx
index c1e273082d15..f083430a39a9 100644
--- a/packages/p2p-v2/src/components/Modals/BlockUnblockUserModal/BlockUnblockUserModal.tsx
+++ b/packages/p2p-v2/src/components/Modals/BlockUnblockUserModal/BlockUnblockUserModal.tsx
@@ -59,7 +59,14 @@ const BlockUnblockUserModal = ({
                 {getModalContent()}
             </Text>
             <div className='p2p-v2-block-unblock-user-modal__footer'>
-                <Button onClick={onRequestClose} size='lg' textSize='sm' variant='outlined'>
+                <Button
+                    className='border-2'
+                    color='black'
+                    onClick={onRequestClose}
+                    size='lg'
+                    textSize='sm'
+                    variant='outlined'
+                >
                     Cancel
                 </Button>
                 <Button onClick={onClickBlockUnblock} size='lg' textSize='sm'>
diff --git a/packages/p2p-v2/src/components/Modals/FilterModal/FilterModal.scss b/packages/p2p-v2/src/components/Modals/FilterModal/FilterModal.scss
index 275437381b90..7212c9873c33 100644
--- a/packages/p2p-v2/src/components/Modals/FilterModal/FilterModal.scss
+++ b/packages/p2p-v2/src/components/Modals/FilterModal/FilterModal.scss
@@ -7,7 +7,6 @@
     @include mobile {
         position: absolute;
         top: -4rem;
-        background: #fff;
         z-index: 1;
         height: calc(100vh - 8rem);
     }
diff --git a/packages/p2p-v2/src/components/Modals/FilterModal/FilterModalFooter/FilterModalFooter.tsx b/packages/p2p-v2/src/components/Modals/FilterModal/FilterModalFooter/FilterModalFooter.tsx
index db0c777ed875..5a61a20d0d84 100644
--- a/packages/p2p-v2/src/components/Modals/FilterModal/FilterModalFooter/FilterModalFooter.tsx
+++ b/packages/p2p-v2/src/components/Modals/FilterModal/FilterModalFooter/FilterModalFooter.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, Text, useDevice } from '@deriv-com/ui';
+import { Button, useDevice } from '@deriv-com/ui';
 import './FilterModalFooter.scss';
 
 type TFilterModalFooterProps = {
@@ -30,21 +30,19 @@ const FilterModalFooter = ({
                 isFullWidth={isMobile}
                 onClick={onResetClear}
                 size='lg'
+                textSize={isMobile ? 'md' : 'sm'}
                 variant='outlined'
             >
-                <Text lineHeight='6xl' size='sm' weight='bold'>
-                    {showPaymentMethods ? 'Clear' : 'Reset'}
-                </Text>
+                {showPaymentMethods ? 'Clear' : 'Reset'}
             </Button>
             <Button
                 disabled={(showPaymentMethods && hasSamePaymentMethods) || (!showPaymentMethods && hasSameFilters)}
                 isFullWidth={isMobile}
                 onClick={onApplyConfirm}
                 size='lg'
+                textSize={isMobile ? 'md' : 'sm'}
             >
-                <Text lineHeight='6xl' size='sm' weight='bold'>
-                    {showPaymentMethods ? 'Confirm' : 'Apply'}
-                </Text>
+                {showPaymentMethods ? 'Confirm' : 'Apply'}
             </Button>
         </div>
     );
diff --git a/packages/p2p-v2/src/components/Modals/MyAdsDeleteModal/MyAdsDeleteModal.scss b/packages/p2p-v2/src/components/Modals/MyAdsDeleteModal/MyAdsDeleteModal.scss
index 3a1cbacc54d6..7298e023a693 100644
--- a/packages/p2p-v2/src/components/Modals/MyAdsDeleteModal/MyAdsDeleteModal.scss
+++ b/packages/p2p-v2/src/components/Modals/MyAdsDeleteModal/MyAdsDeleteModal.scss
@@ -1,20 +1,28 @@
 .p2p-v2-my-ads-delete-modal {
-    @include p2p-v2-modal-styles;
+    height: auto;
     width: 44rem;
+    border-radius: 8px;
+
     @include mobile {
         width: 32.8rem;
     }
+
     &__header {
-        margin: 0 0.8rem;
-        padding-bottom: 1.2rem;
         @include mobile {
-            margin: 0;
+            padding: 0 1.6rem;
         }
     }
+
     &__body {
-        margin: 2.4rem 0.8rem;
+        padding: 1rem 2.4rem;
         @include mobile {
-            margin: 0;
+            padding: 0 1.6rem;
+        }
+    }
+
+    &__footer {
+        @include mobile {
+            padding: 1.6rem;
         }
     }
 }
diff --git a/packages/p2p-v2/src/components/Modals/MyAdsDeleteModal/MyAdsDeleteModal.tsx b/packages/p2p-v2/src/components/Modals/MyAdsDeleteModal/MyAdsDeleteModal.tsx
index 7a3379066b01..5a0316d7cbe6 100644
--- a/packages/p2p-v2/src/components/Modals/MyAdsDeleteModal/MyAdsDeleteModal.tsx
+++ b/packages/p2p-v2/src/components/Modals/MyAdsDeleteModal/MyAdsDeleteModal.tsx
@@ -1,9 +1,7 @@
-import React, { memo, useEffect } from 'react';
-import Modal from 'react-modal';
+import React, { memo } from 'react';
 import { useDevice } from '@/hooks';
 import { p2p } from '@deriv/api-v2';
-import { Button, Text } from '@deriv-com/ui';
-import { customStyles } from '../helpers';
+import { Button, Modal, Text } from '@deriv-com/ui';
 import './MyAdsDeleteModal.scss';
 
 type TMyAdsDeleteModalProps = {
@@ -21,10 +19,6 @@ const MyAdsDeleteModal = ({ error, id, isModalOpen, onClickDelete, onRequestClos
 
     const hasActiveOrders = advertInfo?.active_orders && advertInfo?.active_orders > 0;
 
-    useEffect(() => {
-        Modal.setAppElement('#v2_modal_root');
-    }, []);
-
     const getModalText = () => {
         if (hasActiveOrders && !error) {
             return 'You have open orders for this ad. Complete all open orders before deleting this ad.';
@@ -37,17 +31,22 @@ const MyAdsDeleteModal = ({ error, id, isModalOpen, onClickDelete, onRequestClos
     const getModalFooter = () => {
         if (hasActiveOrders || error) {
             return (
-                <div className='flex justify-end'>
-                    <Button onClick={onRequestClose} size='lg' textSize={textSize}>
-                        Ok
-                    </Button>
-                </div>
+                <Button onClick={onRequestClose} size='lg' textSize={textSize}>
+                    Ok
+                </Button>
             );
         }
 
         return (
-            <div className='flex justify-end gap-[1rem] pt-[1.6rem]'>
-                <Button onClick={onRequestClose} size='lg' textSize={textSize} variant='outlined'>
+            <div className='flex gap-[0.8rem]'>
+                <Button
+                    className='border-2'
+                    color='black'
+                    onClick={onRequestClose}
+                    size='lg'
+                    textSize={textSize}
+                    variant='outlined'
+                >
                     Cancel
                 </Button>
                 <Button onClick={onClickDelete} size='lg' textSize={textSize}>
@@ -60,20 +59,29 @@ const MyAdsDeleteModal = ({ error, id, isModalOpen, onClickDelete, onRequestClos
         <>
             {!isLoadingInfo && (
                 <Modal
-                    className='p-[1.6rem] p2p-v2-my-ads-delete-modal'
+                    ariaHideApp={false}
+                    className='p2p-v2-my-ads-delete-modal'
                     isOpen={isModalOpen}
                     onRequestClose={onRequestClose}
                     shouldCloseOnOverlayClick={false}
-                    style={customStyles}
                     testId='dt_p2p_v2_ads_delete_modal'
                 >
-                    <Text as='div' className='p2p-v2-my-ads-delete-modal__header' color='general' weight='bold'>
-                        Do you want to delete this ad?
-                    </Text>
-                    <Text as='div' className='p2p-v2-my-ads-delete-modal__body' color='prominent' size='sm'>
-                        {getModalText()}
-                    </Text>
-                    {getModalFooter()}
+                    <Modal.Header
+                        className='p2p-v2-my-ads-delete-modal__header'
+                        hideBorder
+                        hideCloseIcon
+                        onRequestClose={onRequestClose}
+                    >
+                        <Text weight='bold'>Do you want to delete this ad?</Text>
+                    </Modal.Header>
+                    <Modal.Body className='p2p-v2-my-ads-delete-modal__body'>
+                        <Text color='prominent' size='sm'>
+                            {getModalText()}
+                        </Text>
+                    </Modal.Body>
+                    <Modal.Footer className='p2p-v2-my-ads-delete-modal__footer' hideBorder>
+                        {getModalFooter()}
+                    </Modal.Footer>
                 </Modal>
             )}
         </>
diff --git a/packages/p2p-v2/src/components/Modals/PaymentMethods/PaymentMethodErrorModal/PaymentMethodErrorModal.scss b/packages/p2p-v2/src/components/Modals/PaymentMethods/PaymentMethodErrorModal/PaymentMethodErrorModal.scss
index c203e01c2e45..2279dfc5cc29 100644
--- a/packages/p2p-v2/src/components/Modals/PaymentMethods/PaymentMethodErrorModal/PaymentMethodErrorModal.scss
+++ b/packages/p2p-v2/src/components/Modals/PaymentMethods/PaymentMethodErrorModal/PaymentMethodErrorModal.scss
@@ -1,27 +1,32 @@
 .p2p-v2-payment-method-error-modal {
-    &__wrapper {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        gap: 2.4rem;
-        width: 44rem;
+    height: auto;
+    border-radius: 8px;
+    width: 44rem;
+
+    @include mobile {
+        max-width: calc(100vw - 3.2rem);
+    }
+
+    &__header {
+        margin-top: 0.5rem;
+
+        @include mobile {
+            margin-top: 0;
+            padding: 1.6rem;
+        }
+    }
+
+    &__body {
+        padding: 1rem 2.4rem;
+
         @include mobile {
-            width: 100%;
+            padding: 0.5rem 1.6rem;
         }
     }
-    &__buttons {
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
-        width: 100%;
-        &--cancel {
-            background: transparent;
-            border: 2px solid #999999;
 
-            &:active:not([disabled]) {
-                border: 1px solid #999999;
-            }
+    &__footer {
+        @include mobile {
+            padding: 1.6rem;
         }
     }
 }
diff --git a/packages/p2p-v2/src/components/Modals/PaymentMethods/PaymentMethodErrorModal/PaymentMethodErrorModal.tsx b/packages/p2p-v2/src/components/Modals/PaymentMethods/PaymentMethodErrorModal/PaymentMethodErrorModal.tsx
index 1f1e3c73ac06..3619ec036786 100644
--- a/packages/p2p-v2/src/components/Modals/PaymentMethods/PaymentMethodErrorModal/PaymentMethodErrorModal.tsx
+++ b/packages/p2p-v2/src/components/Modals/PaymentMethods/PaymentMethodErrorModal/PaymentMethodErrorModal.tsx
@@ -1,8 +1,5 @@
-import React, { useEffect } from 'react';
-import ReactModal from 'react-modal';
-import { Button, Text } from '@deriv-com/ui';
-import { customStyles } from '../../helpers';
-import '../styles.scss';
+import React from 'react';
+import { Button, Modal, Text, useDevice } from '@deriv-com/ui';
 import './PaymentMethodErrorModal.scss';
 
 type TPaymentMethodErrorModalProps = {
@@ -13,30 +10,29 @@ type TPaymentMethodErrorModalProps = {
 };
 
 const PaymentMethodErrorModal = ({ errorMessage, isModalOpen, onConfirm, title }: TPaymentMethodErrorModalProps) => {
-    useEffect(() => {
-        ReactModal.setAppElement('#v2_modal_root');
-    }, []);
+    const { isMobile } = useDevice();
+
     // TODO: Remember to translate these strings
     return (
-        <ReactModal
-            className='p2p-v2-payment-method-modal__modal'
+        <Modal
+            ariaHideApp={false}
+            className='p2p-v2-payment-method-error-modal'
             contentLabel={title}
             isOpen={isModalOpen}
             shouldCloseOnOverlayClick={false}
-            style={customStyles}
         >
-            <div className='p2p-v2-payment-method-error-modal__wrapper'>
-                <Text color='prominent' weight='bold'>
-                    {title}
-                </Text>
-                <Text color='prominent'>{errorMessage}</Text>
-                <div className='p2p-v2-payment-method-error-modal__buttons'>
-                    <Button onClick={onConfirm} size='lg'>
-                        Ok
-                    </Button>
-                </div>
-            </div>
-        </ReactModal>
+            <Modal.Header className='p2p-v2-payment-method-error-modal__header' hideBorder hideCloseIcon>
+                <Text weight='bold'>{title}</Text>
+            </Modal.Header>
+            <Modal.Body className='p2p-v2-payment-method-error-modal__body'>
+                <Text size='sm'>{errorMessage}</Text>
+            </Modal.Body>
+            <Modal.Footer className='p2p-v2-payment-method-error-modal__footer' hideBorder>
+                <Button onClick={onConfirm} size='lg' textSize={isMobile ? 'md' : 'sm'}>
+                    Ok
+                </Button>
+            </Modal.Footer>
+        </Modal>
     );
 };
 
diff --git a/packages/p2p-v2/src/components/Modals/PaymentMethods/PaymentMethodErrorModal/__tests__/PaymentMethodErrorModal.spec.tsx b/packages/p2p-v2/src/components/Modals/PaymentMethods/PaymentMethodErrorModal/__tests__/PaymentMethodErrorModal.spec.tsx
index 7604a3fe51f6..7ece6e216a5d 100644
--- a/packages/p2p-v2/src/components/Modals/PaymentMethods/PaymentMethodErrorModal/__tests__/PaymentMethodErrorModal.spec.tsx
+++ b/packages/p2p-v2/src/components/Modals/PaymentMethods/PaymentMethodErrorModal/__tests__/PaymentMethodErrorModal.spec.tsx
@@ -4,6 +4,11 @@ import PaymentMethodErrorModal from '../PaymentMethodErrorModal';
 
 const wrapper = ({ children }: PropsWithChildren<unknown>) => <div id='v2_modal_root'>{children}</div>;
 
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: jest.fn(() => ({ isMobile: false })),
+}));
+
 describe('PaymentMethodErrorModal', () => {
     it('should render the modal correctly', () => {
         const props = {
diff --git a/packages/p2p-v2/src/components/Modals/PaymentMethods/PaymentMethodModal/PaymentMethodModal.scss b/packages/p2p-v2/src/components/Modals/PaymentMethods/PaymentMethodModal/PaymentMethodModal.scss
new file mode 100644
index 000000000000..e57064f7f26e
--- /dev/null
+++ b/packages/p2p-v2/src/components/Modals/PaymentMethods/PaymentMethodModal/PaymentMethodModal.scss
@@ -0,0 +1,37 @@
+.p2p-v2-payment-method-modal {
+    height: auto;
+    border-radius: 8px;
+    width: 44rem;
+
+    @include mobile {
+        max-width: calc(100vw - 3.2rem);
+    }
+
+    &__header {
+        margin-top: 0.5rem;
+
+        @include mobile {
+            margin-top: 0;
+            padding: 1.6rem;
+        }
+    }
+
+    &__body {
+        padding: 1rem 2.4rem;
+
+        @include mobile {
+            padding: 0.5rem 1.6rem;
+        }
+    }
+
+    &__footer {
+        display: flex;
+        justify-content: flex-end;
+        gap: 0.8rem;
+        width: 100%;
+
+        @include mobile {
+            padding: 1.6rem;
+        }
+    }
+}
diff --git a/packages/p2p-v2/src/components/Modals/PaymentMethods/PaymentMethodModal/PaymentMethodModal.tsx b/packages/p2p-v2/src/components/Modals/PaymentMethods/PaymentMethodModal/PaymentMethodModal.tsx
index ee211b9a55a5..1b32ae3a8033 100644
--- a/packages/p2p-v2/src/components/Modals/PaymentMethods/PaymentMethodModal/PaymentMethodModal.tsx
+++ b/packages/p2p-v2/src/components/Modals/PaymentMethods/PaymentMethodModal/PaymentMethodModal.tsx
@@ -1,8 +1,6 @@
-import React, { useEffect } from 'react';
-import ReactModal from 'react-modal';
-import { Button, Text } from '@deriv-com/ui';
-import { customStyles } from '../../helpers';
-import '../styles.scss';
+import React from 'react';
+import { Button, Modal, Text, useDevice } from '@deriv-com/ui';
+import './PaymentMethodModal.scss';
 
 type TPaymentMethodModalProps = {
     description?: string;
@@ -23,47 +21,50 @@ const PaymentMethodModal = ({
     secondaryButtonLabel,
     title,
 }: TPaymentMethodModalProps) => {
-    useEffect(() => {
-        ReactModal.setAppElement('#v2_modal_root');
-    }, []);
+    const { isMobile } = useDevice();
+    const buttonTextSize = isMobile ? 'md' : 'sm';
+
     // TODO: Remember to translate these strings
     return (
-        <ReactModal
-            className='p2p-v2-payment-method-modal__modal'
+        <Modal
+            ariaHideApp={false}
+            className='p2p-v2-payment-method-modal'
             contentLabel={title}
             isOpen={isModalOpen}
             shouldCloseOnOverlayClick={false}
-            style={customStyles}
         >
-            <div className='p2p-v2-payment-method-modal__wrapper'>
-                <Text color='prominent' weight='bold'>
-                    {title}
-                </Text>
-                <Text color='prominent'>{description}</Text>
-                <div className='p2p-v2-payment-method-modal__buttons'>
-                    <Button
-                        className='p2p-v2-payment-method-modal__buttons--cancel'
-                        onClick={e => {
-                            e.currentTarget.setAttribute('disabled', 'disabled');
-                            onConfirm();
-                        }}
-                        size='lg'
-                        variant='outlined'
-                    >
-                        {secondaryButtonLabel}
-                    </Button>
-                    <Button
-                        onClick={e => {
-                            e.currentTarget.setAttribute('disabled', 'disabled');
-                            onReject();
-                        }}
-                        size='lg'
-                    >
-                        {primaryButtonLabel}
-                    </Button>
-                </div>
-            </div>
-        </ReactModal>
+            <Modal.Header className='p2p-v2-payment-method-modal__header' hideBorder hideCloseIcon>
+                <Text weight='bold'>{title}</Text>
+            </Modal.Header>
+            <Modal.Body className='p2p-v2-payment-method-modal__body'>
+                <Text size='sm'>{description}</Text>
+            </Modal.Body>
+            <Modal.Footer className='p2p-v2-payment-method-modal__footer' hideBorder>
+                <Button
+                    className='border-2'
+                    color='black'
+                    onClick={e => {
+                        e.currentTarget.setAttribute('disabled', 'disabled');
+                        onConfirm();
+                    }}
+                    size='lg'
+                    textSize={buttonTextSize}
+                    variant='outlined'
+                >
+                    {secondaryButtonLabel}
+                </Button>
+                <Button
+                    onClick={e => {
+                        e.currentTarget.setAttribute('disabled', 'disabled');
+                        onReject();
+                    }}
+                    size='lg'
+                    textSize={buttonTextSize}
+                >
+                    {primaryButtonLabel}
+                </Button>
+            </Modal.Footer>
+        </Modal>
     );
 };
 
diff --git a/packages/p2p-v2/src/components/Modals/PaymentMethods/PaymentMethodModal/__tests__/PaymentMethodModal.spec.tsx b/packages/p2p-v2/src/components/Modals/PaymentMethods/PaymentMethodModal/__tests__/PaymentMethodModal.spec.tsx
index 5d11215dec3b..5f954b6e9e46 100644
--- a/packages/p2p-v2/src/components/Modals/PaymentMethods/PaymentMethodModal/__tests__/PaymentMethodModal.spec.tsx
+++ b/packages/p2p-v2/src/components/Modals/PaymentMethods/PaymentMethodModal/__tests__/PaymentMethodModal.spec.tsx
@@ -5,6 +5,11 @@ import PaymentMethodModal from '../PaymentMethodModal';
 
 const wrapper = ({ children }: PropsWithChildren<unknown>) => <div id='v2_modal_root'>{children}</div>;
 
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: jest.fn(() => ({ isMobile: false })),
+}));
+
 describe('PaymentMethodModal', () => {
     it('should render the component correctly', () => {
         render(
diff --git a/packages/p2p-v2/src/components/Modals/PaymentMethods/styles.scss b/packages/p2p-v2/src/components/Modals/PaymentMethods/styles.scss
deleted file mode 100644
index cd0128b0b276..000000000000
--- a/packages/p2p-v2/src/components/Modals/PaymentMethods/styles.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-.p2p-v2-payment-method-modal {
-    &__modal {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        right: auto;
-        bottom: auto;
-        margin-right: -50%;
-        transform: translate(-50%, -50%);
-        padding: 2.4rem;
-        border-radius: 8px;
-        background: #fff;
-        box-shadow: 0px 32px 64px 0px rgba(14, 14, 14, 0.14);
-    }
-    &__wrapper {
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-start;
-        gap: 2.4rem;
-        width: 44rem;
-        @include mobile {
-            width: 100%;
-        }
-    }
-    &__buttons {
-        display: flex;
-        flex-direction: row;
-        justify-content: flex-end;
-        gap: 1.6rem;
-        width: 100%;
-        &--cancel {
-            background: transparent;
-            border: 2px solid #999999;
-
-            &:active:not([disabled]) {
-                border: 1px solid #999999;
-            }
-        }
-    }
-}
diff --git a/packages/p2p-v2/src/components/Modals/ShareAdsModal/ShareAdsModal.scss b/packages/p2p-v2/src/components/Modals/ShareAdsModal/ShareAdsModal.scss
index ccc9400986a0..b41534768064 100644
--- a/packages/p2p-v2/src/components/Modals/ShareAdsModal/ShareAdsModal.scss
+++ b/packages/p2p-v2/src/components/Modals/ShareAdsModal/ShareAdsModal.scss
@@ -1,10 +1,18 @@
 .p2p-v2-share-ads-modal {
+    padding: 2.4rem;
+    display: flex;
+    flex-direction: column;
+    height: auto;
     width: 72rem;
+    border-radius: 8px;
+
     @include mobile {
+        padding: 1.6rem;
         width: 32.8rem;
     }
 
     &__container {
+        display: flex;
         margin-top: 2.4rem;
 
         @include mobile {
@@ -14,6 +22,8 @@
         }
 
         &__card {
+            display: flex;
+            flex-direction: column;
             width: 48%;
 
             @include mobile {
@@ -23,6 +33,12 @@
             }
 
             &__button {
+                display: flex;
+                align-items: center;
+                gap: 1rem;
+                border-width: 1px;
+                width: 100%;
+
                 & .deriv-text {
                     display: flex;
                     align-items: center;
@@ -33,12 +49,17 @@
     }
 
     &__copy {
+        display: flex;
+        align-items: center;
         border-radius: 0.3rem;
         border: 0.1em solid var(--general-active);
         margin-top: 2.5rem;
         padding: 0.8rem;
 
         &-clipboard {
+            display: flex;
+            align-items: center;
+            justify-content: center;
             background: var(--general-section-5);
             border-radius: 0.3rem;
             margin-left: 1rem;
diff --git a/packages/p2p-v2/src/components/Modals/ShareAdsModal/ShareAdsModal.tsx b/packages/p2p-v2/src/components/Modals/ShareAdsModal/ShareAdsModal.tsx
index a296bd62e4a5..866134f5b28d 100644
--- a/packages/p2p-v2/src/components/Modals/ShareAdsModal/ShareAdsModal.tsx
+++ b/packages/p2p-v2/src/components/Modals/ShareAdsModal/ShareAdsModal.tsx
@@ -1,18 +1,14 @@
-/* eslint-disable camelcase */
 import React, { memo, MouseEvent, useEffect, useRef } from 'react';
-import clsx from 'clsx';
 import html2canvas from 'html2canvas';
-import Modal from 'react-modal';
 import { Clipboard } from '@/components';
 import { BUY_SELL, RATE_TYPE } from '@/constants';
 import { useCopyToClipboard } from '@/hooks';
 import { p2p } from '@deriv/api-v2';
-import { Button, Divider, Text, useDevice } from '@deriv-com/ui';
+import { Button, Divider, Modal, Text, useDevice } from '@deriv-com/ui';
 //TODO: replace below icons with the one from quill once available
 import CheckmarkCircle from '../../../public/ic-checkmark-circle.svg';
 import ShareIcon from '../../../public/ic-share.svg';
 import ShareLinkIcon from '../../../public/ic-share-link.svg';
-import { customStyles } from '../helpers';
 import ShareMyAdsCard from './ShareAdsCard';
 import ShareMyAdsSocials from './ShareAdsSocials';
 import './ShareAdsModal.scss';
@@ -27,23 +23,26 @@ const websiteUrl = () => `${location.protocol}//${location.hostname}/`;
 
 const ShareAdsModal = ({ id, isModalOpen, onRequestClose }: TShareAdsModalProps) => {
     const timeoutClipboardRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-    const { isMobile } = useDevice();
+    const { isDesktop, isMobile } = useDevice();
     const { data: advertInfo, isLoading: isLoadingInfo } = p2p.advert.useGet({ id });
     const [isCopied, copyToClipboard, setIsCopied] = useCopyToClipboard();
-    const { account_currency, advertiser_details, local_currency, rate_display, rate_type, type } = advertInfo ?? {};
-    const { id: advertiserId } = advertiser_details ?? {};
+    const {
+        account_currency: accountCurrency,
+        advertiser_details: advertiserDetails,
+        local_currency: localCurrency,
+        rate_display: rateDisplay,
+        rate_type: rateType,
+        type,
+    } = advertInfo ?? {};
+    const { id: advertiserId } = advertiserDetails ?? {};
 
     const divRef = useRef<HTMLDivElement | null>(null);
     const advertUrl = `${websiteUrl()}cashier/p2p/advertiser?id=${advertiserId}&advert_id=${id}`;
     const isBuyAd = type === BUY_SELL.BUY;
-    const firstCurrency = isBuyAd ? local_currency : account_currency;
-    const secondCurrency = isBuyAd ? account_currency : local_currency;
-    const adRateType = rate_type === RATE_TYPE.FLOAT ? '%' : ` ${local_currency}`;
-    const customMessage = `Hi! I'd like to exchange ${firstCurrency} for ${secondCurrency} at ${rate_display}${adRateType} on Deriv P2P.\n\nIf you're interested, check out my ad 👉\n\n${advertUrl} \n\nThanks!`;
-
-    useEffect(() => {
-        Modal.setAppElement('#v2_modal_root');
-    }, []);
+    const firstCurrency = isBuyAd ? localCurrency : accountCurrency;
+    const secondCurrency = isBuyAd ? accountCurrency : localCurrency;
+    const adRateType = rateType === RATE_TYPE.FLOAT ? '%' : ` ${localCurrency}`;
+    const customMessage = `Hi! I'd like to exchange ${firstCurrency} for ${secondCurrency} at ${rateDisplay}${adRateType} on Deriv P2P.\n\nIf you're interested, check out my ad 👉\n\n${advertUrl} \n\nThanks!`;
 
     const onCopy = (event: MouseEvent) => {
         copyToClipboard(advertUrl);
@@ -87,66 +86,78 @@ const ShareAdsModal = ({ id, isModalOpen, onRequestClose }: TShareAdsModalProps)
         <>
             {!isLoadingInfo && (
                 <Modal
-                    className={clsx('p2p-v2-modal-styles p2p-v2-share-ads-modal p-[2.4rem] flex flex-col')}
+                    ariaHideApp={false}
+                    className='p2p-v2-share-ads-modal'
                     isOpen={isModalOpen}
                     onRequestClose={onRequestClose}
-                    style={customStyles}
                     testId='dt_p2p_v2_share_ads_modal'
                 >
-                    <Text weight='bold'>Share this ad</Text>
-                    {!isMobile && <Text className='pt-[2.6rem]'>Promote your ad by sharing the QR code and link.</Text>}
-                    <div className='flex flex-row p2p-v2-share-ads-modal__container'>
-                        <div className='flex flex-col p2p-v2-share-ads-modal__container__card'>
-                            <ShareMyAdsCard advert={advertInfo} advertUrl={advertUrl} ref={divRef} />
-                            <Button
-                                isFullWidth={isMobile}
-                                onClick={handleGenerateImage}
-                                textSize={isMobile ? 'md' : 'sm'}
-                                variant='outlined'
-                            >
-                                Download this QR code
-                            </Button>
-                            {isMobile && (
-                                <div className='flex w-full gap-4 justify-between mt-6'>
-                                    <Button
-                                        className='flex items-center gap-4 w-full p2p-v2-share-ads-modal__container__card__button'
-                                        onClick={handleShareLink}
-                                        textSize='md'
-                                        variant='outlined'
-                                    >
-                                        <ShareIcon />
-                                        Share link
-                                    </Button>
-                                    <Button
-                                        className='flex items-center gap-4 w-full p2p-v2-share-ads-modal__container__card__button'
-                                        onClick={onCopy}
-                                        textSize='md'
-                                        variant='outlined'
-                                    >
-                                        {isCopied ? <CheckmarkCircle /> : <ShareLinkIcon />}
-                                        Copy link
-                                    </Button>
+                    <Modal.Header className='px-0 py-4 lg:pb-16 h-0' hideBorder onRequestClose={onRequestClose}>
+                        <Text weight='bold'>Share this ad</Text>
+                    </Modal.Header>
+                    <Modal.Body>
+                        {isDesktop && <Text>Promote your ad by sharing the QR code and link.</Text>}
+                        <div className='p2p-v2-share-ads-modal__container'>
+                            <div className='p2p-v2-share-ads-modal__container__card'>
+                                <ShareMyAdsCard advert={advertInfo} advertUrl={advertUrl} ref={divRef} />
+                                <Button
+                                    className='border-[1px]'
+                                    color='black'
+                                    isFullWidth={isMobile}
+                                    onClick={handleGenerateImage}
+                                    textSize={isMobile ? 'md' : 'sm'}
+                                    variant='outlined'
+                                >
+                                    Download this QR code
+                                </Button>
+                                {isMobile && (
+                                    <div className='flex w-full gap-4 justify-between mt-6'>
+                                        <Button
+                                            className='p2p-v2-share-ads-modal__container__card__button'
+                                            color='black'
+                                            onClick={handleShareLink}
+                                            textSize='md'
+                                            variant='outlined'
+                                        >
+                                            <ShareIcon />
+                                            Share link
+                                        </Button>
+                                        <Button
+                                            className='p2p-v2-share-ads-modal__container__card__button'
+                                            color='black'
+                                            onClick={onCopy}
+                                            textSize='md'
+                                            variant='outlined'
+                                        >
+                                            {isCopied ? <CheckmarkCircle /> : <ShareLinkIcon />}
+                                            Copy link
+                                        </Button>
+                                    </div>
+                                )}
+                            </div>
+                            {isDesktop && (
+                                <div className='pl-[2.4rem] w-[52%]'>
+                                    <Text weight='bold'>Share via</Text>
+                                    <ShareMyAdsSocials advertUrl={advertUrl} customMessage={customMessage} />
+                                    <Divider margin='0 0 2.5rem 0' />
+                                    <Text>Or copy this link</Text>
+                                    <div className='p2p-v2-share-ads-modal__copy'>
+                                        <Text
+                                            className='p2p-v2-share-ads-modal__copy-link'
+                                            color='less-prominent'
+                                            size='sm'
+                                        >
+                                            {advertUrl}
+                                        </Text>
+                                        {/* TODO: clipboard to be replaced */}
+                                        <div className='p2p-v2-share-ads-modal__copy-clipboard'>
+                                            <Clipboard textCopy={advertUrl} />
+                                        </div>
+                                    </div>
                                 </div>
                             )}
                         </div>
-                        {!isMobile && (
-                            <div className='pl-[2.4rem] w-[52%]'>
-                                <Text weight='bold'>Share via</Text>
-                                <ShareMyAdsSocials advertUrl={advertUrl} customMessage={customMessage} />
-                                <Divider margin='0 0 2.5rem 0' />
-                                <Text>Or copy this link</Text>
-                                <div className=' flex flex-row items-center p2p-v2-share-ads-modal__copy'>
-                                    <Text className='p2p-v2-share-ads-modal__copy-link' color='less-prominent'>
-                                        {advertUrl}
-                                    </Text>
-                                    {/* TODO: clipboard to be replaced */}
-                                    <div className='flex items-center justify-center p2p-v2-share-ads-modal__copy-clipboard'>
-                                        <Clipboard textCopy={advertUrl} />
-                                    </div>
-                                </div>
-                            </div>
-                        )}
-                    </div>
+                    </Modal.Body>
                 </Modal>
             )}
         </>
diff --git a/packages/p2p-v2/src/components/Modals/ShareAdsModal/ShareAdsSocials.scss b/packages/p2p-v2/src/components/Modals/ShareAdsModal/ShareAdsSocials.scss
index f54bee4ffce9..67482d75b866 100644
--- a/packages/p2p-v2/src/components/Modals/ShareAdsModal/ShareAdsSocials.scss
+++ b/packages/p2p-v2/src/components/Modals/ShareAdsModal/ShareAdsSocials.scss
@@ -1,4 +1,6 @@
 .p2p-v2-share-ads-socials {
+    display: flex;
+    justify-content: space-around;
     margin: 2.5rem 0;
 
     @include mobile {
@@ -13,6 +15,9 @@
     }
 
     &__circle {
+        display: flex;
+        align-items: center;
+        justify-content: center;
         height: 4.8rem;
         width: 4.8rem;
         background-color: #f2f3f4;
diff --git a/packages/p2p-v2/src/components/Modals/ShareAdsModal/ShareAdsSocials.tsx b/packages/p2p-v2/src/components/Modals/ShareAdsModal/ShareAdsSocials.tsx
index 401be8b95751..253d77682959 100644
--- a/packages/p2p-v2/src/components/Modals/ShareAdsModal/ShareAdsSocials.tsx
+++ b/packages/p2p-v2/src/components/Modals/ShareAdsModal/ShareAdsSocials.tsx
@@ -54,9 +54,10 @@ const getShareButtons = (advertUrl: string) => [
     },
 ];
 const ShareMyAdsSocials = ({ advertUrl, customMessage }: TShareMyAdsSocialsProps) => (
-    <div className='flex flex-row justify-around p2p-v2-share-ads-socials'>
+    <div className='p2p-v2-share-ads-socials'>
         {getShareButtons(advertUrl).map(({ ShareButton, href, icon, messagePropName, rel, target, text }) => (
             <ShareButton
+                className='flex flex-col items-center'
                 key={text}
                 url={text === 'Facebook' ? advertUrl : ' '}
                 {...(messagePropName && { [messagePropName]: customMessage })}
@@ -64,7 +65,7 @@ const ShareMyAdsSocials = ({ advertUrl, customMessage }: TShareMyAdsSocialsProps
                 {...(target && { target: '_blank' })}
                 {...(rel && { rel: 'noreferrer' })}
             >
-                <div className='flex justify-center items-center p2p-v2-share-ads-socials__circle'>{icon}</div>
+                <div className='p2p-v2-share-ads-socials__circle'>{icon}</div>
                 <Text size='2xs'>{text}</Text>
             </ShareButton>
         ))}
diff --git a/packages/p2p-v2/src/components/Modals/ShareAdsModal/__tests__/ShareAdsModal.spec.tsx b/packages/p2p-v2/src/components/Modals/ShareAdsModal/__tests__/ShareAdsModal.spec.tsx
index 0f5da1d0b4b5..5711fc8f7471 100644
--- a/packages/p2p-v2/src/components/Modals/ShareAdsModal/__tests__/ShareAdsModal.spec.tsx
+++ b/packages/p2p-v2/src/components/Modals/ShareAdsModal/__tests__/ShareAdsModal.spec.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import html2canvas from 'html2canvas';
-import Modal from 'react-modal';
 import { useDevice } from '@deriv-com/ui';
 import { act, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -48,6 +47,7 @@ jest.mock('html2canvas', () => ({
 jest.mock('@deriv-com/ui', () => ({
     ...jest.requireActual('@deriv-com/ui'),
     useDevice: jest.fn().mockReturnValue({
+        isDesktop: true,
         isMobile: false,
     }),
 }));
@@ -65,7 +65,6 @@ describe('ShareAdsModal', () => {
         element = document.createElement('div');
         element.setAttribute('id', 'v2_modal_root');
         document.body.appendChild(element);
-        Modal.setAppElement('#v2_modal_root');
     });
     afterAll(() => {
         document.body.removeChild(element);
@@ -77,6 +76,7 @@ describe('ShareAdsModal', () => {
     });
     it('should handle onclick when clicking on Share link', () => {
         mockUseDevice.mockReturnValue({
+            isDesktop: false,
             isMobile: true,
         });
         const mockShare = jest.fn().mockResolvedValue(true);
diff --git a/packages/p2p-v2/src/components/PageReturn/PageReturn.scss b/packages/p2p-v2/src/components/PageReturn/PageReturn.scss
index 98f0e18ec076..78918b521694 100644
--- a/packages/p2p-v2/src/components/PageReturn/PageReturn.scss
+++ b/packages/p2p-v2/src/components/PageReturn/PageReturn.scss
@@ -3,6 +3,7 @@
     justify-content: space-between;
     margin: 2.4rem 0;
     width: 100%;
+    background: #fff;
 
     @include mobile {
         margin: 0;
diff --git a/packages/p2p-v2/src/components/PageReturn/PageReturn.tsx b/packages/p2p-v2/src/components/PageReturn/PageReturn.tsx
index 4d71ef5bd8d3..dd21391c871e 100644
--- a/packages/p2p-v2/src/components/PageReturn/PageReturn.tsx
+++ b/packages/p2p-v2/src/components/PageReturn/PageReturn.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import clsx from 'clsx';
+import { TGenericSizes } from '@/utils';
 import { LabelPairedArrowLeftLgBoldIcon } from '@deriv/quill-icons';
 import { Text } from '@deriv-com/ui';
 import './PageReturn.scss';
@@ -11,6 +12,7 @@ type TPageReturnProps = {
     pageTitle: string;
     rightPlaceHolder?: JSX.Element;
     shouldHideBackButton?: boolean;
+    size?: TGenericSizes;
     weight?: string;
 };
 
@@ -21,6 +23,7 @@ const PageReturn = ({
     pageTitle,
     rightPlaceHolder,
     shouldHideBackButton = false,
+    size = 'md',
     weight = 'normal',
 }: TPageReturnProps) => {
     return (
@@ -31,7 +34,9 @@ const PageReturn = ({
                     data-testid='dt_p2p_v2_page_return_btn'
                     onClick={onClick}
                 />
-                <Text weight={weight}>{pageTitle}</Text>
+                <Text size={size} weight={weight}>
+                    {pageTitle}
+                </Text>
             </div>
             {rightPlaceHolder}
         </div>
diff --git a/packages/p2p-v2/src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.tsx b/packages/p2p-v2/src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.tsx
index 9fddcdc7ce76..a7f6af56874b 100644
--- a/packages/p2p-v2/src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.tsx
+++ b/packages/p2p-v2/src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.tsx
@@ -60,7 +60,7 @@ const PaymentMethodCardHeader = ({
             {isEditable && (
                 <FlyoutMenu
                     listItems={flyoutMenuItems}
-                    renderIcon={() => <LabelPairedEllipsisVerticalXlRegularIcon />}
+                    renderIcon={() => <LabelPairedEllipsisVerticalXlRegularIcon className='cursor-pointer' />}
                 />
             )}
             {isSelectable && (
diff --git a/packages/p2p-v2/src/components/PaymentMethodForm/PaymentMethodForm.scss b/packages/p2p-v2/src/components/PaymentMethodForm/PaymentMethodForm.scss
index d49c98b12baf..9b11b7830c48 100644
--- a/packages/p2p-v2/src/components/PaymentMethodForm/PaymentMethodForm.scss
+++ b/packages/p2p-v2/src/components/PaymentMethodForm/PaymentMethodForm.scss
@@ -1,16 +1,30 @@
 .p2p-v2-payment-method-form {
     max-width: 100%;
     min-width: 67.2rem;
+    padding-bottom: 2.4rem;
 
     @include mobile {
         width: 100%;
         min-width: 36rem;
-        padding: 1.6rem;
+        position: absolute;
+        top: 4rem;
     }
 
     &__button {
         display: inline-block;
         margin-left: 0.5rem;
+        padding: 0;
+
+        // TODO: remove this once hover styles can be removed from the button component
+        &:hover {
+            // stylelint-disable-next-line declaration-no-important
+            background-color: transparent !important;
+
+            & > span {
+                // stylelint-disable-next-line declaration-no-important
+                color: #ff444f !important;
+            }
+        }
     }
     .derivs-button__variant--ghost:hover:not(:disabled) {
         background: transparent;
@@ -34,18 +48,31 @@
         width: 100%;
         font-size: 1.4rem;
     }
+
     &__form {
-        padding: 1.4rem 0;
         display: flex;
         flex-direction: column;
         width: 100%;
+
+        @include mobile {
+            overflow: auto;
+            height: calc(100vh - 14rem);
+            padding-bottom: 8rem;
+        }
     }
+
     .deriv-input--right-content {
         display: flex;
         align-items: center;
         height: 100%;
         top: 0;
     }
+
+    .p2p-v2-textfield__message-container {
+        padding: 0;
+        height: 0;
+    }
+
     &__icon--close {
         cursor: pointer;
         color: #ffffff;
@@ -57,6 +84,10 @@
         &-wrapper {
             width: 100%;
             padding: 1rem 0;
+
+            @include mobile {
+                padding: 1.4rem 1.6rem;
+            }
         }
     }
     &__text {
diff --git a/packages/p2p-v2/src/components/PaymentMethodForm/PaymentMethodForm.tsx b/packages/p2p-v2/src/components/PaymentMethodForm/PaymentMethodForm.tsx
index 437c6123d932..9104f992ccd8 100644
--- a/packages/p2p-v2/src/components/PaymentMethodForm/PaymentMethodForm.tsx
+++ b/packages/p2p-v2/src/components/PaymentMethodForm/PaymentMethodForm.tsx
@@ -1,12 +1,12 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { TSelectedPaymentMethod } from 'types';
-import { Dropdown, PaymentMethodField, PaymentMethodsFormFooter, PaymentMethodsHeader } from '@/components';
-import { PaymentMethodErrorModal, PaymentMethodModal } from '@/components/Modals';
+import { PageReturn, PaymentMethodField, PaymentMethodsFormFooter } from '@/components';
 import { TFormState } from '@/reducers/types';
 import { p2p } from '@deriv/api-v2';
-import { Button, Input, Text } from '@deriv-com/ui';
-import CloseCircle from '../../public/ic-close-circle.svg';
+import { useDevice } from '@deriv-com/ui';
+import { PaymentMethodFormAutocomplete } from './PaymentMethodFormAutocomplete';
+import { PaymentMethodFormModalRenderer } from './PaymentMethodFormModalRenderer';
 import './PaymentMethodForm.scss';
 
 type TPaymentMethodFormProps = {
@@ -34,6 +34,8 @@ const PaymentMethodForm = ({ onAdd, onResetFormState, ...rest }: TPaymentMethodF
     const { create, error: createError, isSuccess: isCreateSuccessful } = p2p.advertiserPaymentMethods.useCreate();
     const { error: updateError, isSuccess: isUpdateSuccessful, update } = p2p.advertiserPaymentMethods.useUpdate();
 
+    const { isMobile } = useDevice();
+
     useEffect(() => {
         if (isCreateSuccessful) {
             onResetFormState();
@@ -63,7 +65,14 @@ const PaymentMethodForm = ({ onAdd, onResetFormState, ...rest }: TPaymentMethodF
 
     return (
         <div className='p2p-v2-payment-method-form'>
-            <PaymentMethodsHeader onGoBack={handleGoBack} title={title} />
+            <PageReturn
+                className='border-2 py-[1.4rem] mb-0'
+                hasBorder={isMobile}
+                onClick={handleGoBack}
+                pageTitle={title}
+                size={isMobile ? 'lg' : 'md'}
+                weight='bold'
+            />
             <form
                 className='p2p-v2-payment-method-form__form'
                 onSubmit={handleSubmit(data => {
@@ -78,137 +87,51 @@ const PaymentMethodForm = ({ onAdd, onResetFormState, ...rest }: TPaymentMethodF
                     }
                 })}
             >
-                <div className='p2p-v2-payment-method-form__field-wrapper'>
-                    {selectedPaymentMethod ? (
-                        // TODO: Remember to translate this
-                        <Input
-                            defaultValue={selectedPaymentMethod?.display_name}
-                            disabled
-                            label='Choose your payment method'
-                            rightPlaceholder={
-                                actionType === 'EDIT' ? null : (
-                                    <CloseCircle
-                                        className='p2p-v2-payment-method-form__icon--close'
-                                        data-testid='dt_p2p_v2_payment_methods_form_close_icon'
-                                        fill='#999999'
-                                        height={15.7}
-                                        onClick={() => {
-                                            onAdd();
-                                            reset();
-                                        }}
-                                        width={15.7}
-                                    />
-                                )
-                            }
+                <div className='p2p-v2-payment-method-form__fields'>
+                    <div className='p2p-v2-payment-method-form__field-wrapper'>
+                        <PaymentMethodFormAutocomplete
+                            actionType={actionType}
+                            availablePaymentMethods={availablePaymentMethods}
+                            availablePaymentMethodsList={availablePaymentMethodsList}
+                            onAdd={onAdd}
+                            reset={reset}
+                            selectedPaymentMethod={selectedPaymentMethod}
                         />
-                    ) : (
-                        <>
-                            <Dropdown
-                                label='Payment method'
-                                list={availablePaymentMethodsList}
-                                name='Payment method'
-                                onSelect={(value: string) => {
-                                    const selectedPaymentMethod = availablePaymentMethods?.find(p => p.id === value);
-                                    if (selectedPaymentMethod) {
-                                        onAdd({
-                                            displayName: selectedPaymentMethod?.display_name,
-                                            fields: selectedPaymentMethod?.fields,
-                                            method: value,
-                                        });
-                                    }
-                                }}
-                                // TODO: Remember to translate this
-                                value={selectedPaymentMethod?.display_name ?? ''}
-                                variant='comboBox'
+                    </div>
+                    {Object.keys(selectedPaymentMethod?.fields || {})?.map(field => {
+                        const paymentMethodField = selectedPaymentMethod?.fields?.[field];
+                        return (
+                            <PaymentMethodField
+                                control={control}
+                                defaultValue={paymentMethodField?.value ?? ''}
+                                displayName={paymentMethodField?.display_name ?? ''}
+                                field={field}
+                                key={field}
+                                required={!!paymentMethodField?.required}
                             />
-                            {/* TODO: Remember to translate these */}
-                            <Text color='less-prominent' size='xs'>
-                                Don’t see your payment method?
-                            </Text>
-                            <Button
-                                className='p2p-v2-payment-method-form__button'
-                                color='primary'
-                                onClick={e => {
-                                    e.preventDefault();
-                                    e.stopPropagation();
-                                    const paymentMethod = availablePaymentMethods?.find(p => p.id === 'other');
-                                    if (paymentMethod) {
-                                        onAdd({
-                                            displayName: paymentMethod?.display_name,
-                                            fields: paymentMethod?.fields,
-                                            method: 'other',
-                                        });
-                                    }
-                                }}
-                                size='xs'
-                                textSize='xs'
-                                variant='ghost'
-                            >
-                                Add new.
-                            </Button>
-                        </>
-                    )}
+                        );
+                    })}
                 </div>
-                {Object.keys(selectedPaymentMethod?.fields || {})?.map(field => {
-                    const paymentMethodField = selectedPaymentMethod?.fields?.[field];
-                    return (
-                        <PaymentMethodField
-                            control={control}
-                            defaultValue={paymentMethodField?.value ?? ''}
-                            displayName={paymentMethodField?.display_name ?? ''}
-                            field={field}
-                            key={field}
-                            required={!!paymentMethodField?.required}
-                        />
-                    );
-                })}
-                <PaymentMethodsFormFooter
-                    actionType={actionType}
-                    handleGoBack={handleGoBack}
-                    isDirty={isDirty}
-                    isSubmitting={isSubmitting}
-                    isValid={isValid}
-                />
+                {(isMobile || !!selectedPaymentMethod) && (
+                    <PaymentMethodsFormFooter
+                        actionType={actionType}
+                        handleGoBack={handleGoBack}
+                        isDirty={isDirty}
+                        isSubmitting={isSubmitting}
+                        isValid={isValid}
+                    />
+                )}
             </form>
-            {actionType === 'EDIT' && (!isUpdateSuccessful || !updateError) && isModalOpen && (
-                // TODO: Remember to translate these strings
-                <PaymentMethodModal
-                    description='If you choose to cancel, the edited details will be lost.'
-                    isModalOpen={isModalOpen}
-                    onConfirm={onResetFormState}
-                    onReject={() => {
-                        setIsModalOpen(false);
-                    }}
-                    primaryButtonLabel="Don't cancel"
-                    secondaryButtonLabel='Cancel'
-                    title='Cancel your edits?'
-                />
-            )}
-            {actionType === 'ADD' && (!isCreateSuccessful || !createError) && isModalOpen && (
-                // TODO: Remember to translate these strings
-                <PaymentMethodModal
-                    description='If you choose to cancel, the details you’ve entered will be lost.'
-                    isModalOpen={isModalOpen}
-                    onConfirm={onResetFormState}
-                    onReject={() => {
-                        setIsModalOpen(false);
-                    }}
-                    primaryButtonLabel='Go back'
-                    secondaryButtonLabel='Cancel'
-                    title='Cancel adding this payment method?'
-                />
-            )}
-            {/* TODO: Remember to translate these strings */}
-            {(createError || updateError) && (
-                <PaymentMethodErrorModal
-                    errorMessage={String(createError?.error?.message || updateError?.error?.message)}
-                    isModalOpen={true}
-                    onConfirm={() => {
-                        onResetFormState();
-                    }}
-                    title='Something’s not right'
-                />
-            )}
+            <PaymentMethodFormModalRenderer
+                actionType={actionType}
+                createError={createError}
+                isCreateSuccessful={isCreateSuccessful}
+                isModalOpen={isModalOpen}
+                isUpdateSuccessful={isUpdateSuccessful}
+                onResetFormState={onResetFormState}
+                setIsModalOpen={setIsModalOpen}
+                updateError={updateError}
+            />
         </div>
     );
 };
diff --git a/packages/p2p-v2/src/components/PaymentMethodForm/PaymentMethodFormAutocomplete/PaymentMethodFormAutocomplete.tsx b/packages/p2p-v2/src/components/PaymentMethodForm/PaymentMethodFormAutocomplete/PaymentMethodFormAutocomplete.tsx
new file mode 100644
index 000000000000..fe7513339fe9
--- /dev/null
+++ b/packages/p2p-v2/src/components/PaymentMethodForm/PaymentMethodFormAutocomplete/PaymentMethodFormAutocomplete.tsx
@@ -0,0 +1,101 @@
+import React from 'react';
+import { THooks, TSelectedPaymentMethod } from 'types';
+import { Dropdown } from '@/components';
+import { TFormState } from '@/reducers/types';
+import { Button, Input, Text } from '@deriv-com/ui';
+import CloseCircle from '../../../public/ic-close-circle.svg';
+
+type TPaymentMethodFormAutocompleteProps = {
+    actionType: TFormState['actionType'];
+    availablePaymentMethods?: THooks.PaymentMethods.Get;
+    availablePaymentMethodsList: { text: string; value: string }[];
+    onAdd: (selectedPaymentMethod?: TSelectedPaymentMethod) => void;
+    reset: () => void;
+    selectedPaymentMethod: TFormState['selectedPaymentMethod'];
+};
+
+const PaymentMethodFormAutocomplete = ({
+    actionType,
+    availablePaymentMethods,
+    availablePaymentMethodsList,
+    onAdd,
+    reset,
+    selectedPaymentMethod,
+}: TPaymentMethodFormAutocompleteProps) => {
+    if (selectedPaymentMethod) {
+        // TODO: Remember to translate this
+        return (
+            <Input
+                defaultValue={selectedPaymentMethod?.display_name}
+                disabled
+                label='Choose your payment method'
+                rightPlaceholder={
+                    actionType === 'EDIT' ? null : (
+                        <CloseCircle
+                            className='p2p-v2-payment-method-form__icon--close'
+                            data-testid='dt_p2p_v2_payment_methods_form_close_icon'
+                            fill='#999999'
+                            height={15.7}
+                            onClick={() => {
+                                onAdd();
+                                reset();
+                            }}
+                            width={15.7}
+                        />
+                    )
+                }
+            />
+        );
+    }
+    return (
+        <>
+            <Dropdown
+                label='Payment method'
+                list={availablePaymentMethodsList}
+                name='Payment method'
+                onSelect={(value: string) => {
+                    const selectedPaymentMethod = availablePaymentMethods?.find(p => p.id === value);
+                    if (selectedPaymentMethod) {
+                        onAdd({
+                            displayName: selectedPaymentMethod?.display_name,
+                            fields: selectedPaymentMethod?.fields,
+                            method: value,
+                        });
+                    }
+                }}
+                // TODO: Remember to translate this
+                value={selectedPaymentMethod?.display_name ?? ''}
+                variant='comboBox'
+            />
+            <div className='mt-[0.2rem] ml-[1.6rem]'>
+                {/* TODO: Remember to translate these */}
+                <Text color='less-prominent' size='xs'>
+                    Don’t see your payment method?
+                </Text>
+                <Button
+                    className='p2p-v2-payment-method-form__button'
+                    color='primary'
+                    onClick={e => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        const paymentMethod = availablePaymentMethods?.find(p => p.id === 'other');
+                        if (paymentMethod) {
+                            onAdd({
+                                displayName: paymentMethod?.display_name,
+                                fields: paymentMethod?.fields,
+                                method: 'other',
+                            });
+                        }
+                    }}
+                    size='sm'
+                    textSize='xs'
+                    variant='ghost'
+                >
+                    Add new.
+                </Button>
+            </div>
+        </>
+    );
+};
+
+export default PaymentMethodFormAutocomplete;
diff --git a/packages/p2p-v2/src/components/PaymentMethodForm/PaymentMethodFormAutocomplete/index.ts b/packages/p2p-v2/src/components/PaymentMethodForm/PaymentMethodFormAutocomplete/index.ts
new file mode 100644
index 000000000000..7ba73b1f81c5
--- /dev/null
+++ b/packages/p2p-v2/src/components/PaymentMethodForm/PaymentMethodFormAutocomplete/index.ts
@@ -0,0 +1 @@
+export { default as PaymentMethodFormAutocomplete } from './PaymentMethodFormAutocomplete';
diff --git a/packages/p2p-v2/src/components/PaymentMethodForm/PaymentMethodFormModalRenderer/PaymentMethodFormModalRenderer.tsx b/packages/p2p-v2/src/components/PaymentMethodForm/PaymentMethodFormModalRenderer/PaymentMethodFormModalRenderer.tsx
new file mode 100644
index 000000000000..3d9870de3d6f
--- /dev/null
+++ b/packages/p2p-v2/src/components/PaymentMethodForm/PaymentMethodFormModalRenderer/PaymentMethodFormModalRenderer.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import { PaymentMethodErrorModal, PaymentMethodModal } from '@/components/Modals';
+import { TFormState } from '@/reducers/types';
+import { TSocketError } from '@deriv/api-v2/types';
+
+type TPaymentMethodFormModalRendererProps = {
+    actionType: TFormState['actionType'];
+    createError: TSocketError<'p2p_advertiser_payment_methods'> | null;
+    isCreateSuccessful: boolean;
+    isModalOpen: boolean;
+    isUpdateSuccessful: boolean;
+    onResetFormState: () => void;
+    setIsModalOpen: (isModalOpen: boolean) => void;
+    updateError: TSocketError<'p2p_advertiser_payment_methods'> | null;
+};
+
+const PaymentMethodFormModalRenderer = ({
+    actionType,
+    createError,
+    isCreateSuccessful,
+    isModalOpen,
+    isUpdateSuccessful,
+    onResetFormState,
+    setIsModalOpen,
+    updateError,
+}: TPaymentMethodFormModalRendererProps) => {
+    if (actionType === 'ADD' && (!isCreateSuccessful || !createError) && isModalOpen) {
+        return (
+            <PaymentMethodModal
+                description='If you choose to cancel, the changes you’ve made will be lost.'
+                isModalOpen={isModalOpen}
+                onConfirm={onResetFormState}
+                onReject={() => {
+                    setIsModalOpen(false);
+                }}
+                primaryButtonLabel='Go back'
+                secondaryButtonLabel='Cancel'
+                title='Cancel adding this payment method?'
+            />
+        );
+    }
+
+    if (actionType === 'EDIT' && (!isUpdateSuccessful || !updateError) && isModalOpen) {
+        return (
+            <PaymentMethodModal
+                description='If you choose to cancel, the details you’ve entered will be lost.'
+                isModalOpen={isModalOpen}
+                onConfirm={onResetFormState}
+                onReject={() => {
+                    setIsModalOpen(false);
+                }}
+                primaryButtonLabel="Don't cancel"
+                secondaryButtonLabel='Cancel'
+                title='Cancel your edits?'
+            />
+        );
+    }
+
+    // TODO: Remember to translate these strings
+    if (createError || updateError) {
+        return (
+            <PaymentMethodErrorModal
+                errorMessage={String(createError?.error?.message || updateError?.error?.message)}
+                isModalOpen={true}
+                onConfirm={() => {
+                    onResetFormState();
+                }}
+                title='Something’s not right'
+            />
+        );
+    }
+
+    return null;
+};
+
+export default PaymentMethodFormModalRenderer;
diff --git a/packages/p2p-v2/src/components/PaymentMethodForm/PaymentMethodFormModalRenderer/index.ts b/packages/p2p-v2/src/components/PaymentMethodForm/PaymentMethodFormModalRenderer/index.ts
new file mode 100644
index 000000000000..9a05d2b45aab
--- /dev/null
+++ b/packages/p2p-v2/src/components/PaymentMethodForm/PaymentMethodFormModalRenderer/index.ts
@@ -0,0 +1 @@
+export { default as PaymentMethodFormModalRenderer } from './PaymentMethodFormModalRenderer';
diff --git a/packages/p2p-v2/src/components/PaymentMethodForm/__test__/PaymentMethodForm.spec.tsx b/packages/p2p-v2/src/components/PaymentMethodForm/__test__/PaymentMethodForm.spec.tsx
index 9292bfeddff2..338e2bd522ed 100644
--- a/packages/p2p-v2/src/components/PaymentMethodForm/__test__/PaymentMethodForm.spec.tsx
+++ b/packages/p2p-v2/src/components/PaymentMethodForm/__test__/PaymentMethodForm.spec.tsx
@@ -55,6 +55,11 @@ const mockPaymentMethods = [
     },
 ] as const;
 
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: () => ({ isMobile: false }),
+}));
+
 jest.mock('@deriv/api-v2', () => {
     return {
         ...jest.requireActual('@deriv/api-v2'),
@@ -167,7 +172,7 @@ describe('PaymentMethodForm', () => {
         );
         const inputField = screen.getByDisplayValue('00112233445566778899');
         expect(inputField).toBeInTheDocument();
-        const backArrow = screen.getByTestId('dt_p2p_v2_payment_methods_header_left_arrow_icon');
+        const backArrow = screen.getByTestId('dt_p2p_v2_page_return_btn');
         userEvent.click(backArrow);
         expect(onResetFormState).toHaveBeenCalled();
     });
@@ -435,7 +440,7 @@ describe('PaymentMethodForm', () => {
             await userEvent.type(inputField, 'Account 2');
             await userEvent.tab();
         });
-        const backArrow = screen.getByTestId('dt_p2p_v2_payment_methods_header_left_arrow_icon');
+        const backArrow = screen.getByTestId('dt_p2p_v2_page_return_btn');
         expect(backArrow).toBeInTheDocument();
         userEvent.click(backArrow);
         expect(screen.getByText('Cancel adding this payment method?')).toBeInTheDocument();
@@ -465,7 +470,7 @@ describe('PaymentMethodForm', () => {
             await userEvent.type(inputField, 'Account 2');
             await userEvent.tab();
         });
-        const backArrow = screen.getByTestId('dt_p2p_v2_payment_methods_header_left_arrow_icon');
+        const backArrow = screen.getByTestId('dt_p2p_v2_page_return_btn');
         expect(backArrow).toBeInTheDocument();
         userEvent.click(backArrow);
         expect(screen.getByText('Cancel your edits?')).toBeInTheDocument();
diff --git a/packages/p2p-v2/src/components/PaymentMethodsFormFooter/PaymentMethodsFormFooter.scss b/packages/p2p-v2/src/components/PaymentMethodsFormFooter/PaymentMethodsFormFooter.scss
index e27a938e2119..b9818530ebd7 100644
--- a/packages/p2p-v2/src/components/PaymentMethodsFormFooter/PaymentMethodsFormFooter.scss
+++ b/packages/p2p-v2/src/components/PaymentMethodsFormFooter/PaymentMethodsFormFooter.scss
@@ -1,16 +1,16 @@
-.p2p-v2-payment-method-form {
-    &__buttons {
-        display: flex;
-        justify-content: end;
-        gap: 1.6rem;
+.p2p-v2-payment-methods-form-footer {
+    display: flex;
+    justify-content: end;
+    gap: 0.8rem;
+    background: #fff;
+    margin-top: 2rem;
 
-        &--cancel {
-            background: transparent;
-            border: 2px solid #999999;
-
-            &:active:not([disabled]) {
-                border: 1px solid #999999;
-            }
-        }
+    @include mobile {
+        margin-top: 0;
+        width: 100%;
+        padding: 1.6rem 2.4rem;
+        border-top: 2px solid #f2f3f4;
+        position: absolute;
+        bottom: 2.2rem;
     }
 }
diff --git a/packages/p2p-v2/src/components/PaymentMethodsFormFooter/PaymentMethodsFormFooter.tsx b/packages/p2p-v2/src/components/PaymentMethodsFormFooter/PaymentMethodsFormFooter.tsx
index 1e50fc6db2f9..38eca89af4f5 100644
--- a/packages/p2p-v2/src/components/PaymentMethodsFormFooter/PaymentMethodsFormFooter.tsx
+++ b/packages/p2p-v2/src/components/PaymentMethodsFormFooter/PaymentMethodsFormFooter.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { TFormState } from '@/reducers/types';
-import { Button } from '@deriv-com/ui';
+import { Button, useDevice } from '@deriv-com/ui';
 import './PaymentMethodsFormFooter.scss';
 
 type TPaymentMethodsFormFooterProps = {
@@ -21,33 +21,39 @@ type TPaymentMethodsFormFooterProps = {
  * @returns {JSX.Element}
  * @example <PaymentMethodsFormFooter actionType={actionType} handleGoBack={handleGoBack} isDirty={isDirty} isSubmitting={isSubmitting} isValid={isValid} />
  * **/
-
 const PaymentMethodsFormFooter = ({
     actionType,
     handleGoBack,
     isDirty,
     isSubmitting,
     isValid,
-}: TPaymentMethodsFormFooterProps) => (
-    <div className='p2p-v2-payment-method-form__buttons' role='payment-methods-form-footer'>
-        <Button
-            className='p2p-v2-payment-method-form__buttons--cancel'
-            onClick={e => {
-                e.preventDefault();
-                e.stopPropagation();
+}: TPaymentMethodsFormFooterProps) => {
+    const { isMobile } = useDevice();
+    const textSize = isMobile ? 'lg' : 'sm';
+
+    return (
+        <div className='p2p-v2-payment-methods-form-footer' role='payment-methods-form-footer'>
+            <Button
+                className='border-2'
+                color='black'
+                onClick={e => {
+                    e.preventDefault();
+                    e.stopPropagation();
 
-                handleGoBack();
-            }}
-            size='lg'
-            variant='outlined'
-        >
-            Cancel
-        </Button>
-        {/* TODO: Remember to translate these */}
-        <Button disabled={isSubmitting || !isValid || !isDirty} size='lg'>
-            {actionType === 'ADD' ? 'Add' : 'Save changes'}
-        </Button>
-    </div>
-);
+                    handleGoBack();
+                }}
+                size='lg'
+                textSize={textSize}
+                variant='outlined'
+            >
+                Cancel
+            </Button>
+            {/* TODO: Remember to translate these */}
+            <Button disabled={isSubmitting || !isValid || !isDirty} size='lg' textSize={textSize}>
+                {actionType === 'ADD' ? 'Add' : 'Save changes'}
+            </Button>
+        </div>
+    );
+};
 
 export default PaymentMethodsFormFooter;
diff --git a/packages/p2p-v2/src/components/PaymentMethodsFormFooter/__tests__/PaymentMethodsFormFooter.spec.tsx b/packages/p2p-v2/src/components/PaymentMethodsFormFooter/__tests__/PaymentMethodsFormFooter.spec.tsx
index 0c573d760de2..2b4908b0e1e9 100644
--- a/packages/p2p-v2/src/components/PaymentMethodsFormFooter/__tests__/PaymentMethodsFormFooter.spec.tsx
+++ b/packages/p2p-v2/src/components/PaymentMethodsFormFooter/__tests__/PaymentMethodsFormFooter.spec.tsx
@@ -3,6 +3,11 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import PaymentMethodsFormFooter from '../PaymentMethodsFormFooter';
 
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: () => ({ isMobile: false }),
+}));
+
 describe('PaymentMethodsFormFooter', () => {
     it('should render the PaymentMethodsFormFooter component correctly', () => {
         render(
diff --git a/packages/p2p-v2/src/components/PaymentMethodsHeader/PaymentMethodsHeader.scss b/packages/p2p-v2/src/components/PaymentMethodsHeader/PaymentMethodsHeader.scss
deleted file mode 100644
index a57c739871d7..000000000000
--- a/packages/p2p-v2/src/components/PaymentMethodsHeader/PaymentMethodsHeader.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.p2p-v2-payment-method-form {
-    &__header {
-        display: flex;
-        align-items: center;
-    }
-    &__back-button {
-        margin-right: 0.8rem;
-        line-height: 2rem;
-        & > * {
-            vertical-align: middle;
-        }
-    }
-}
diff --git a/packages/p2p-v2/src/components/PaymentMethodsHeader/PaymentMethodsHeader.tsx b/packages/p2p-v2/src/components/PaymentMethodsHeader/PaymentMethodsHeader.tsx
deleted file mode 100644
index f7edddb6f5ac..000000000000
--- a/packages/p2p-v2/src/components/PaymentMethodsHeader/PaymentMethodsHeader.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-import { LabelPairedArrowLeftLgBoldIcon } from '@deriv/quill-icons';
-import { Text } from '@deriv-com/ui';
-import './PaymentMethodsHeader.scss';
-
-type TPaymentMethodsHeaderProps = {
-    onGoBack?: () => void;
-    title?: string;
-};
-
-/**
- * @component This component is used to display the header of the PaymentMethods screen
- * @param onGoBack - The function to be called when the back button is clicked
- * @param title - The title of the header
- * @returns {JSX.Element}
- * @example <PaymentMethodsHeader onGoBack={onGoBack} title={title} />
- * **/
-const PaymentMethodsHeader = ({ onGoBack, title }: TPaymentMethodsHeaderProps) => (
-    <div className='p2p-v2-payment-method-form__header'>
-        <div className='p2p-v2-payment-method-form__back-button'>
-            {onGoBack && (
-                <LabelPairedArrowLeftLgBoldIcon
-                    data-testid='dt_p2p_v2_payment_methods_header_left_arrow_icon'
-                    onClick={onGoBack}
-                />
-            )}
-        </div>
-        {/* TODO: Remember to translate this */}
-        <Text size='sm' weight='bold'>
-            {title}
-        </Text>
-    </div>
-);
-
-export default PaymentMethodsHeader;
diff --git a/packages/p2p-v2/src/components/PaymentMethodsHeader/__tests__/PaymentMethodsHeader.spec.tsx b/packages/p2p-v2/src/components/PaymentMethodsHeader/__tests__/PaymentMethodsHeader.spec.tsx
deleted file mode 100644
index a2fa46bb659b..000000000000
--- a/packages/p2p-v2/src/components/PaymentMethodsHeader/__tests__/PaymentMethodsHeader.spec.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import PaymentMethodsHeader from '../PaymentMethodsHeader';
-
-describe('PaymentMethodsHeader', () => {
-    it('should render the component correctly', () => {
-        render(<PaymentMethodsHeader title='Payment Methods' />);
-        expect(screen.getByText('Payment Methods')).toBeInTheDocument();
-    });
-    it('should render the arrow, when ongoback is passed in', () => {
-        render(<PaymentMethodsHeader onGoBack={() => undefined} title='Payment Methods' />);
-        expect(screen.getByTestId('dt_p2p_v2_payment_methods_header_left_arrow_icon')).toBeInTheDocument();
-    });
-});
diff --git a/packages/p2p-v2/src/components/PaymentMethodsHeader/index.ts b/packages/p2p-v2/src/components/PaymentMethodsHeader/index.ts
deleted file mode 100644
index db196b152fdc..000000000000
--- a/packages/p2p-v2/src/components/PaymentMethodsHeader/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as PaymentMethodsHeader } from './PaymentMethodsHeader';
diff --git a/packages/p2p-v2/src/components/PopoverDropdown/PopoverDropdown.scss b/packages/p2p-v2/src/components/PopoverDropdown/PopoverDropdown.scss
index 4d716a41f38a..600923758749 100644
--- a/packages/p2p-v2/src/components/PopoverDropdown/PopoverDropdown.scss
+++ b/packages/p2p-v2/src/components/PopoverDropdown/PopoverDropdown.scss
@@ -19,14 +19,22 @@
         background: #fff;
         right: 0;
 
-        .derivs-button__color--primary:hover:not(:disabled) {
-            background-color: var(--general-hover);
-        }
-
         &-item {
             padding: 1rem 1.6rem;
-            background-color: inherit;
             height: inherit;
+            justify-content: start;
+            border-radius: unset;
+
+            // TODO: remove this once hover styles can be removed from the button component
+            &:hover {
+                // stylelint-disable-next-line declaration-no-important
+                background-color: #e6e9e9 !important;
+
+                & span {
+                    // stylelint-disable-next-line declaration-no-important
+                    color: #333 !important;
+                }
+            }
         }
     }
 }
diff --git a/packages/p2p-v2/src/components/PopoverDropdown/PopoverDropdown.tsx b/packages/p2p-v2/src/components/PopoverDropdown/PopoverDropdown.tsx
index 7ad648abab96..e66a1b5b5260 100644
--- a/packages/p2p-v2/src/components/PopoverDropdown/PopoverDropdown.tsx
+++ b/packages/p2p-v2/src/components/PopoverDropdown/PopoverDropdown.tsx
@@ -1,7 +1,7 @@
 import React, { useRef, useState } from 'react';
-import { Button, Text } from '@deriv-com/ui';
 import { useOnClickOutside } from 'usehooks-ts';
 import { LabelPairedEllipsisVerticalMdRegularIcon } from '@deriv/quill-icons';
+import { Button, Text } from '@deriv-com/ui';
 import './PopoverDropdown.scss';
 
 type TItem = {
@@ -32,11 +32,13 @@ const PopoverDropdown = ({ dataTestId, dropdownList, onClick }: TPopoverDropdown
                     {dropdownList.map(item => (
                         <Button
                             className='p2p-v2-popover-dropdown__list-item'
+                            color='black'
                             key={item.value}
                             onClick={() => {
                                 onClick(item.value);
                                 setVisible(false);
                             }}
+                            variant='ghost'
                         >
                             <Text key={item.value}>{item.label}</Text>
                         </Button>
diff --git a/packages/p2p-v2/src/components/Table/Table.tsx b/packages/p2p-v2/src/components/Table/Table.tsx
index 02a259111f9e..9c70ec4c24dc 100644
--- a/packages/p2p-v2/src/components/Table/Table.tsx
+++ b/packages/p2p-v2/src/components/Table/Table.tsx
@@ -8,7 +8,7 @@ import './Table.scss';
 type TProps<T> = {
     columns?: ColumnDef<T>[];
     data: T[];
-    emptyDataMessage: string;
+    emptyDataMessage?: string;
     groupBy?: GroupingState;
     isFetching: boolean;
     loadMoreFunction: () => void;
diff --git a/packages/p2p-v2/src/components/index.ts b/packages/p2p-v2/src/components/index.ts
index c31e0f57903a..f905006c8ab8 100644
--- a/packages/p2p-v2/src/components/index.ts
+++ b/packages/p2p-v2/src/components/index.ts
@@ -11,6 +11,7 @@ export * from './FlyoutMenu';
 export * from './FormProgress';
 export * from './FullPageMobileWrapper';
 export * from './Input';
+export * from './LightDivider';
 export * from './MobileTabs';
 export * from './OnlineStatus';
 export * from './PageReturn';
@@ -19,7 +20,6 @@ export * from './PaymentMethodField';
 export * from './PaymentMethodForm';
 export * from './PaymentMethodLabel';
 export * from './PaymentMethodsFormFooter';
-export * from './PaymentMethodsHeader';
 export * from './PaymentMethodWithIcon';
 export * from './PopoverDropdown';
 export * from './ProfileContent';
diff --git a/packages/p2p-v2/src/pages/buy-sell/components/CurrencyDropdown/CurrencyDropdown.scss b/packages/p2p-v2/src/pages/buy-sell/components/CurrencyDropdown/CurrencyDropdown.scss
index dd60cf477bf7..ac88eb2590b8 100644
--- a/packages/p2p-v2/src/pages/buy-sell/components/CurrencyDropdown/CurrencyDropdown.scss
+++ b/packages/p2p-v2/src/pages/buy-sell/components/CurrencyDropdown/CurrencyDropdown.scss
@@ -48,7 +48,6 @@
         position: absolute;
         top: 0;
         left: 0;
-        background: #fff;
         z-index: 1;
         height: calc(100vh - 12rem);
 
diff --git a/packages/p2p-v2/src/pages/my-ads/screens/MyAds/MyAdsTable/MyAdsDisplayWrapper.tsx b/packages/p2p-v2/src/pages/my-ads/screens/MyAds/MyAdsTable/MyAdsDisplayWrapper.tsx
index e8bd16bcee9e..ec1d42c72c8b 100644
--- a/packages/p2p-v2/src/pages/my-ads/screens/MyAds/MyAdsTable/MyAdsDisplayWrapper.tsx
+++ b/packages/p2p-v2/src/pages/my-ads/screens/MyAds/MyAdsTable/MyAdsDisplayWrapper.tsx
@@ -13,6 +13,7 @@ type TMyAdsDisplayWrapperProps = {
 const MyAdsDisplayWrapper = ({ children, isPaused, onClickToggle }: PropsWithChildren<TMyAdsDisplayWrapperProps>) => {
     const { isMobile } = useDevice();
     const history = useHistory();
+
     if (isMobile) {
         return (
             <FullPageMobileWrapper
diff --git a/packages/p2p-v2/src/pages/my-profile/screens/MyProfile/MyProfile.scss b/packages/p2p-v2/src/pages/my-profile/screens/MyProfile/MyProfile.scss
index 507ea425c7cb..f8a8ba9e351d 100644
--- a/packages/p2p-v2/src/pages/my-profile/screens/MyProfile/MyProfile.scss
+++ b/packages/p2p-v2/src/pages/my-profile/screens/MyProfile/MyProfile.scss
@@ -1,7 +1,7 @@
 .p2p-v2-my-profile {
     display: flex;
     flex-direction: column;
-    padding: 2.4rem 0;
+    padding-top: 2.4rem;
 
     @include mobile {
         overflow-y: scroll;
@@ -10,16 +10,17 @@
     }
 
     &__tabs {
-        & .derivs-primary-tabs {
-            width: 70rem;
-            margin: 2.4rem 0;
-            border-radius: 0.6rem;
-            padding: 0.5rem;
-        }
+        margin: 2.4rem 0;
+        border-radius: 0.6rem;
+        padding: 0.5rem;
+        width: 74rem;
 
-        & .derivs-primary-tabs__btn--active {
+        &-tab {
             border-radius: 0.4rem;
-            padding: 0.8rem 0.6rem;
+
+            & > span {
+                font-size: 1.4rem;
+            }
         }
     }
 }
diff --git a/packages/p2p-v2/src/pages/my-profile/screens/MyProfile/MyProfile.tsx b/packages/p2p-v2/src/pages/my-profile/screens/MyProfile/MyProfile.tsx
index 34b444bc4445..3567ac865562 100644
--- a/packages/p2p-v2/src/pages/my-profile/screens/MyProfile/MyProfile.tsx
+++ b/packages/p2p-v2/src/pages/my-profile/screens/MyProfile/MyProfile.tsx
@@ -22,6 +22,13 @@ const MyProfile = () => {
 
     const currentTab = queryString.tab;
 
+    const tabs = [
+        { component: <MyProfileStats />, title: 'Stats' },
+        { component: <PaymentMethods />, title: 'Payment methods' },
+        { component: <MyProfileAdDetails />, title: 'Ad details' },
+        { component: <MyProfileCounterparties />, title: 'My counterparties' },
+    ];
+
     useEffect(() => {
         const isPoaPoiVerified = (!isP2PPoaRequired || isPoaVerified) && isPoiVerified;
         if (isPoaPoiVerified && !!failureReason) setIsNicknameModalOpen(true);
@@ -49,26 +56,19 @@ const MyProfile = () => {
             <ProfileContent />
             <Tabs
                 activeTab={(currentTab !== 'default' && currentTab) || 'Stats'}
+                className='p2p-v2-my-profile__tabs'
                 onChange={index => {
                     setQueryString({
                         tab: TABS[index],
                     });
                 }}
                 variant='primary'
-                wrapperClassName='p2p-v2-my-profile__tabs'
             >
-                <Tab title='Stats'>
-                    <MyProfileStats />
-                </Tab>
-                <Tab title='Payment methods'>
-                    <PaymentMethods />
-                </Tab>
-                <Tab title='Ad details'>
-                    <MyProfileAdDetails />
-                </Tab>
-                <Tab title='My counterparties'>
-                    <MyProfileCounterparties />
-                </Tab>
+                {tabs.map(tab => (
+                    <Tab className='p2p-v2-my-profile__tabs-tab' key={tab.title} title={tab.title}>
+                        {tab.component}
+                    </Tab>
+                ))}
             </Tabs>
             <NicknameModal isModalOpen={isNicknameModalOpen} setIsModalOpen={setIsNicknameModalOpen} />
         </div>
diff --git a/packages/p2p-v2/src/pages/my-profile/screens/MyProfile/__tests__/MyProfile.spec.tsx b/packages/p2p-v2/src/pages/my-profile/screens/MyProfile/__tests__/MyProfile.spec.tsx
index 4181df7ce8cd..e7b2efc1e5db 100644
--- a/packages/p2p-v2/src/pages/my-profile/screens/MyProfile/__tests__/MyProfile.spec.tsx
+++ b/packages/p2p-v2/src/pages/my-profile/screens/MyProfile/__tests__/MyProfile.spec.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useAdvertiserStats, usePoiPoaStatus } from '@/hooks';
-import { useDevice } from '@deriv-com/ui';
 import { APIProvider, AuthProvider } from '@deriv/api-v2';
+import { useDevice } from '@deriv-com/ui';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import MyProfile from '../MyProfile';
@@ -64,9 +64,6 @@ jest.mock('@/hooks', () => ({
         failureReason: undefined,
         isLoading: false,
     }),
-    useDevice: jest.fn().mockReturnValue({
-        isMobile: false,
-    }),
     usePoiPoaStatus: jest.fn().mockReturnValue({
         data: {
             isP2PPoaRequired: false,
diff --git a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileAdDetails/MyProfileAdDetails.scss b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileAdDetails/MyProfileAdDetails.scss
index 85948470ada0..f4f879a9cc62 100644
--- a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileAdDetails/MyProfileAdDetails.scss
+++ b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileAdDetails/MyProfileAdDetails.scss
@@ -3,7 +3,6 @@
     flex-direction: column;
     align-items: flex-end;
     gap: 2.4rem;
-    width: 67vw;
 
     &__header {
         font-size: 1.6rem;
@@ -11,11 +10,16 @@
     }
 
     @include mobile {
-        width: 100vw;
         padding: 2rem;
     }
 
     &__border {
         border-top: 2px solid #f2f3f4;
     }
+
+    &__mobile-wrapper {
+        position: absolute;
+        top: 4rem;
+        height: calc(100vh - 8rem);
+    }
 }
diff --git a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileAdDetails/MyProfileAdDetails.tsx b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileAdDetails/MyProfileAdDetails.tsx
index c4cbec976aeb..da5a843fe77b 100644
--- a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileAdDetails/MyProfileAdDetails.tsx
+++ b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileAdDetails/MyProfileAdDetails.tsx
@@ -68,6 +68,7 @@ const MyProfileAdDetails = () => {
     if (isMobile) {
         return (
             <FullPageMobileWrapper
+                className='p2p-v2-my-profile-ad-details__mobile-wrapper'
                 onBack={() =>
                     setQueryString({
                         tab: 'default',
@@ -98,7 +99,7 @@ const MyProfileAdDetails = () => {
                 setContactInfo={setContactInfo}
             />
             <div className='p2p-v2-my-profile-ad-details__border' />
-            <Button disabled={!hasUpdated} onClick={submitAdDetails} size='lg'>
+            <Button disabled={!hasUpdated} onClick={submitAdDetails} size='lg' textSize='sm'>
                 Save
             </Button>
         </div>
diff --git a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterparties.tsx b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterparties.tsx
index 5c2cc3f98bc0..80ead93019fb 100644
--- a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterparties.tsx
+++ b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterparties.tsx
@@ -15,6 +15,7 @@ const MyProfileCounterpartiesDisplayWrapper = ({ children }: PropsWithChildren<u
     if (isMobile) {
         return (
             <FullPageMobileWrapper
+                className='absolute top-16'
                 onBack={() =>
                     setQueryString({
                         tab: 'default',
diff --git a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesHeader/MyProfileCounterpartiesHeader.scss b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesHeader/MyProfileCounterpartiesHeader.scss
index e388c8f69578..a1ca5262605f 100644
--- a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesHeader/MyProfileCounterpartiesHeader.scss
+++ b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesHeader/MyProfileCounterpartiesHeader.scss
@@ -1,11 +1,12 @@
 .p2p-v2-my-profile-counterparties-header {
     display: grid;
     gap: 1.6rem;
-    margin: 2.4rem 0;
+    margin-top: 2.4rem;
     grid-template-columns: repeat(3, 1fr);
 
     @include mobile {
         display: flex;
+        margin: 2.4rem 0;
 
         .p2p-v2-search {
             max-width: 28rem;
@@ -25,10 +26,5 @@
         border-radius: 4px;
         padding: 0 1rem;
         height: 4rem;
-        background-color: #fff;
-
-        &:active {
-            background-color: #fff;
-        }
     }
 }
diff --git a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesHeader/MyProfileCounterpartiesHeader.tsx b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesHeader/MyProfileCounterpartiesHeader.tsx
index bc8bdd1ec663..df190d208a0f 100644
--- a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesHeader/MyProfileCounterpartiesHeader.tsx
+++ b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesHeader/MyProfileCounterpartiesHeader.tsx
@@ -23,16 +23,21 @@ const MyProfileCounterpartiesHeader = ({
     return (
         <div className='p2p-v2-my-profile-counterparties__content-header'>
             <Text as='p' size='sm'>
-                {`When you block someone, you won’t see their ads, and they can’t see yours. Your ads will be hidden from their search results, too.`}
+                When you block someone, you won’t see their ads, and they can’t see yours. Your ads will be hidden from
+                their search results, too.
             </Text>
             <div className='p2p-v2-my-profile-counterparties-header'>
                 {/* TODO: to be replaced by deriv-com/ui search component */}
                 <Search name='counterparties-search' onSearch={setSearchValue} placeholder='Search by nickname' />
                 {/* TODO: to be replaced by deriv-com/ui dropdown component */}
                 {isMobile ? (
-                    <Button className='p2p-v2-my-profile-counterparties-header__sort-icon' onClick={onClickFilter}>
-                        <SortIcon />
-                    </Button>
+                    <Button
+                        className='p2p-v2-my-profile-counterparties-header__sort-icon'
+                        color='black'
+                        icon={<SortIcon />}
+                        onClick={onClickFilter}
+                        variant='outlined'
+                    />
                 ) : (
                     <Dropdown
                         label='Filter by'
diff --git a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTable/MyProfileCounterpartiesTable.scss b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTable/MyProfileCounterpartiesTable.scss
index 6cb15d41bb67..8f1d99a98f95 100644
--- a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTable/MyProfileCounterpartiesTable.scss
+++ b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTable/MyProfileCounterpartiesTable.scss
@@ -1,10 +1,13 @@
 .p2p-v2-my-profile-counterparties-table {
-    max-height: 16rem;
+    & .deriv-table__content {
+        max-height: 24.8rem;
 
-    @include mobile {
-        height: 100%;
-        max-height: 100%;
+        @include mobile {
+            height: calc(100vh - 30rem);
+            max-height: 100%;
+        }
     }
+
     &__row {
         &:last-child {
             position: relative;
diff --git a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTable/MyProfileCounterpartiesTable.tsx b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTable/MyProfileCounterpartiesTable.tsx
index 224cd002f80c..a5e7d7e19243 100644
--- a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTable/MyProfileCounterpartiesTable.tsx
+++ b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTable/MyProfileCounterpartiesTable.tsx
@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react';
-import { Table } from '@/components';
 import { p2p } from '@deriv/api-v2';
-import { Loader, Text } from '@deriv-com/ui';
+import { Loader, Table, Text } from '@deriv-com/ui';
 import { MyProfileCounterpartiesEmpty } from '../MyProfileCounterpartiesEmpty';
 import { MyProfileCounterpartiesTableRow } from '../MyProfileCounterpartiesTableRow';
 import './MyProfileCounterpartiesTable.scss';
@@ -20,10 +19,10 @@ type TMyProfileCounterpartiesTableRowRendererProps = {
 
 const MyProfileCounterpartiesTableRowRenderer = ({
     id,
-    is_blocked,
+    is_blocked: isBlocked,
     name,
 }: TMyProfileCounterpartiesTableRowRendererProps) => (
-    <MyProfileCounterpartiesTableRow id={id!} isBlocked={is_blocked} nickname={name!} />
+    <MyProfileCounterpartiesTableRow id={id!} isBlocked={isBlocked} nickname={name!} />
 );
 
 //TODO: rewrite the implementation in accordance with @deriv-com/ui table component
@@ -38,9 +37,9 @@ const MyProfileCounterpartiesTable = ({
         isLoading,
         loadMoreAdvertisers,
     } = p2p.advertiser.useGetList({
-        trade_partners: 1,
-        is_blocked: dropdownValue === 'blocked' ? 1 : 0,
         advertiser_name: searchValue,
+        is_blocked: dropdownValue === 'blocked' ? 1 : 0,
+        trade_partners: 1,
     });
 
     useEffect(() => {
diff --git a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTableRow/MyProfileCounterpartiesTableRow.scss b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTableRow/MyProfileCounterpartiesTableRow.scss
index afbbb6693bd2..81c0875808bb 100644
--- a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTableRow/MyProfileCounterpartiesTableRow.scss
+++ b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTableRow/MyProfileCounterpartiesTableRow.scss
@@ -2,7 +2,6 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 2rem 1.6rem;
 
     &:hover {
         background: var(--general-hover);
diff --git a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTableRow/MyProfileCounterpartiesTableRow.tsx b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTableRow/MyProfileCounterpartiesTableRow.tsx
index cea939c4f412..a7213757ee0d 100644
--- a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTableRow/MyProfileCounterpartiesTableRow.tsx
+++ b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTableRow/MyProfileCounterpartiesTableRow.tsx
@@ -23,7 +23,12 @@ const MyProfileCounterpartiesTableRow = ({ id, isBlocked, nickname }: TMyProfile
                     <Text size={isMobile ? 'md' : 'sm'}>{nickname}</Text>
                 </div>
                 {/* TODO: variant to be replaced after available in @deriv-com/ui */}
-                <Button onClick={() => setIsModalOpen(true)} variant={isBlocked ? 'outlined' : 'ghost'}>
+                <Button
+                    className='w-36 border-[1px]'
+                    color={isBlocked ? 'black' : 'primary'}
+                    onClick={() => setIsModalOpen(true)}
+                    variant='outlined'
+                >
                     {isBlocked ? 'Unblock' : 'Block'}
                 </Button>
             </div>
diff --git a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTableRow/__tests__/MyProfileCounterpartiesTableRow.spec.tsx b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTableRow/__tests__/MyProfileCounterpartiesTableRow.spec.tsx
index 6dfe15669904..4ae7cce94af6 100644
--- a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTableRow/__tests__/MyProfileCounterpartiesTableRow.spec.tsx
+++ b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTableRow/__tests__/MyProfileCounterpartiesTableRow.spec.tsx
@@ -5,10 +5,15 @@ import MyProfileCounterpartiesTableRow from '../MyProfileCounterpartiesTableRow'
 
 const mockProps = {
     id: 'id1',
+    is_blocked: false,
     nickname: 'nickname',
-    isBlocked: false,
 };
 
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: () => ({ isMobile: false }),
+}));
+
 jest.mock('@/components/UserAvatar', () => ({
     UserAvatar: () => <div>UserAvatar</div>,
 }));
@@ -26,15 +31,15 @@ jest.mock('@deriv/api-v2', () => ({
     },
 }));
 
-const el_modal = document.createElement('div');
+const elModal = document.createElement('div');
 describe('MyProfileCounterpartiesTableRow', () => {
     beforeAll(() => {
-        el_modal.setAttribute('id', 'v2_modal_root');
-        document.body.appendChild(el_modal);
+        elModal.setAttribute('id', 'v2_modal_root');
+        document.body.appendChild(elModal);
     });
 
     afterAll(() => {
-        document.body.removeChild(el_modal);
+        document.body.removeChild(elModal);
     });
     it('should render the component as expected', () => {
         render(<MyProfileCounterpartiesTableRow {...mockProps} />);
@@ -49,7 +54,7 @@ describe('MyProfileCounterpartiesTableRow', () => {
             expect(screen.getByText('Block nickname?')).toBeInTheDocument();
         });
     });
-    it('should close modal for onrequest close of modal', async () => {
+    it('should close modal for onRequest close of modal', async () => {
         render(<MyProfileCounterpartiesTableRow {...mockProps} />);
         userEvent.click(screen.getByText('Block'));
         await waitFor(() => {
diff --git a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileStats/MyProfileStatsItem.tsx b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileStats/MyProfileStatsItem.tsx
index a13e240d50e6..a4b00bc82f1c 100644
--- a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileStats/MyProfileStatsItem.tsx
+++ b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileStats/MyProfileStatsItem.tsx
@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
-import clsx from 'clsx';
-import { Text } from '@deriv-com/ui';
+import { Text, useDevice } from '@deriv-com/ui';
 import './MyProfileStatsItem.scss';
 
 type TMyProfileStatsItemProps = {
@@ -22,41 +21,45 @@ const MyProfileStatsItem = ({
     value,
 }: TMyProfileStatsItemProps) => {
     const [hasClickedLifetime, setHasClickedLifetime] = useState(false);
+    const { isMobile } = useDevice();
+    const textSize = isMobile ? 'xs' : 'sm';
 
     const onClickLabel = (showLifetime: boolean) => {
         setHasClickedLifetime(showLifetime);
         onClickLifetime?.(showLifetime);
     };
 
+    // TODO: Replace the button components below with Button once you can remove hover effect from Button
     return (
         <div className='p2p-v2-my-profile-stats__item' data-testid={testId}>
             <div>
-                <Text size='sm'>{label} </Text>
+                <Text color='less-prominent' size={textSize}>
+                    {label}{' '}
+                </Text>
                 {shouldShowDuration && (
-                    <button
-                        className={clsx('p2p-v2-my-profile-stats__item--inactive', {
-                            'p2p-v2-my-profile-stats__item--active': !hasClickedLifetime && shouldShowLifetime,
-                        })}
-                        onClick={() => onClickLabel(false)}
-                    >
-                        30d
+                    <button className='p2p-v2-my-profile-stats__item--inactive' onClick={() => onClickLabel(false)}>
+                        <Text
+                            color={!hasClickedLifetime && shouldShowLifetime ? 'red' : 'less-prominent'}
+                            size={textSize}
+                        >
+                            30d{' '}
+                        </Text>
                     </button>
                 )}{' '}
                 {shouldShowLifetime && (
                     <>
-                        |{' '}
-                        <button
-                            className={clsx('p2p-v2-my-profile-stats__item--inactive', {
-                                'p2p-v2-my-profile-stats__item--active': hasClickedLifetime,
-                            })}
-                            onClick={() => onClickLabel(true)}
-                        >
-                            lifetime
+                        <Text color='less-prominent' size={textSize}>
+                            |{' '}
+                        </Text>
+                        <button className='p2p-v2-my-profile-stats__item--inactive' onClick={() => onClickLabel(true)}>
+                            <Text color={hasClickedLifetime ? 'red' : 'less-prominent'} size={textSize}>
+                                lifetime
+                            </Text>
                         </button>
                     </>
                 )}
             </div>
-            <Text size='sm' weight='bold'>
+            <Text size={isMobile ? 'md' : 'sm'} weight='bold'>
                 {value} {currency}
             </Text>
         </div>
diff --git a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileStats/MyProfileStatsMobile.tsx b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileStats/MyProfileStatsMobile.tsx
index 5f8569b02628..61d998e64113 100644
--- a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileStats/MyProfileStatsMobile.tsx
+++ b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileStats/MyProfileStatsMobile.tsx
@@ -8,6 +8,7 @@ const MyProfileStatsMobile = () => {
     const { setQueryString } = useQueryString();
     return (
         <FullPageMobileWrapper
+            className='absolute top-16'
             onBack={() =>
                 setQueryString({
                     tab: 'default',
diff --git a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileStats/__tests__/MyProfileStats.spec.tsx b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileStats/__tests__/MyProfileStats.spec.tsx
index 459dc1926cd9..23d853c8b7a4 100644
--- a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileStats/__tests__/MyProfileStats.spec.tsx
+++ b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileStats/__tests__/MyProfileStats.spec.tsx
@@ -33,10 +33,16 @@ const mockUseActiveAccount = {
     isLoading: false,
 };
 
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: () => ({ isMobile: false }),
+}));
+
 jest.mock('@/hooks', () => ({
     ...jest.requireActual('@/hooks'),
     useAdvertiserStats: jest.fn(() => mockUseAdvertiserStats),
 }));
+
 jest.mock('@deriv/api-v2', () => ({
     ...jest.requireActual('@deriv/api-v2'),
     useActiveAccount: jest.fn(() => mockUseActiveAccount),
diff --git a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileStats/__tests__/MyProfileStatsItem.spec.tsx b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileStats/__tests__/MyProfileStatsItem.spec.tsx
index d819b5e0d49c..56b5b12b85ad 100644
--- a/packages/p2p-v2/src/pages/my-profile/screens/MyProfileStats/__tests__/MyProfileStatsItem.spec.tsx
+++ b/packages/p2p-v2/src/pages/my-profile/screens/MyProfileStats/__tests__/MyProfileStatsItem.spec.tsx
@@ -1,7 +1,12 @@
 import React, { useState } from 'react';
 import { render, screen } from '@testing-library/react';
-import MyProfileStatsItem from '../MyProfileStatsItem';
 import userEvent from '@testing-library/user-event';
+import MyProfileStatsItem from '../MyProfileStatsItem';
+
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: () => ({ isMobile: false }),
+}));
 
 const MockApp = () => {
     const [shouldShowLifetime, setShouldShowLifetime] = useState(false);
diff --git a/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsEmpty/PaymentMethodsEmpty.scss b/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsEmpty/PaymentMethodsEmpty.scss
index 06c7d03b9d42..1041ee357902 100644
--- a/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsEmpty/PaymentMethodsEmpty.scss
+++ b/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsEmpty/PaymentMethodsEmpty.scss
@@ -5,7 +5,7 @@
     width: 100%;
 
     @include mobile {
-        height: 100%;
+        margin-top: 7rem;
         justify-content: center;
     }
 
diff --git a/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsEmpty/PaymentMethodsEmpty.tsx b/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsEmpty/PaymentMethodsEmpty.tsx
index fd0d191ec39d..f7984a382051 100644
--- a/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsEmpty/PaymentMethodsEmpty.tsx
+++ b/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsEmpty/PaymentMethodsEmpty.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import { FullPageMobileWrapper, PaymentMethodsHeader } from '@/components';
-import { useDevice, useQueryString } from '@/hooks';
+import { FullPageMobileWrapper } from '@/components';
+import { useQueryString } from '@/hooks';
 import { DerivLightIcPaymentMethodsWalletIcon } from '@deriv/quill-icons';
-import { Button, Text } from '@deriv-com/ui';
+import { Button, Text, useDevice } from '@deriv-com/ui';
 import './PaymentMethodsEmpty.scss';
 
 type TPaymentMethodsEmptyProps = {
@@ -22,12 +22,17 @@ const PaymentMethodsEmpty = ({ onAddPaymentMethod }: TPaymentMethodsEmptyProps)
     if (isMobile) {
         return (
             <FullPageMobileWrapper
+                className='absolute top-16'
                 onBack={() => {
                     setQueryString({
                         tab: 'default',
                     });
                 }}
-                renderHeader={() => <PaymentMethodsHeader title='Payment methods' />}
+                renderHeader={() => (
+                    <Text size='lg' weight='bold'>
+                        Payment Methods
+                    </Text>
+                )}
             >
                 <div className='p2p-v2-payment-methods-empty'>
                     <DerivLightIcPaymentMethodsWalletIcon height='16rem' />
diff --git a/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsEmpty/__tests__/PaymentMethodsEmpty.spec.tsx b/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsEmpty/__tests__/PaymentMethodsEmpty.spec.tsx
index 5ba5b307a604..24d8b09f2a2e 100644
--- a/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsEmpty/__tests__/PaymentMethodsEmpty.spec.tsx
+++ b/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsEmpty/__tests__/PaymentMethodsEmpty.spec.tsx
@@ -1,21 +1,22 @@
 import React from 'react';
-import { useDevice, useQueryString } from '@/hooks';
+import { useQueryString } from '@/hooks';
+import { useDevice } from '@deriv-com/ui';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import PaymentMethodsEmpty from '../PaymentMethodsEmpty';
 
 jest.mock('@/hooks', () => ({
     ...jest.requireActual('@/hooks'),
-    useDevice: jest.fn().mockReturnValue({
-        isDesktop: false,
-        isMobile: false,
-        isTablet: false,
-    }),
     useQueryString: jest.fn().mockReturnValue({ setQueryString: jest.fn() }),
 }));
 
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: jest.fn().mockReturnValue({ isDesktop: false, isMobile: false, isTablet: false }),
+}));
+
 const mockUseDevice = useDevice as jest.MockedFunction<typeof useDevice>;
-const mockuseQueryString = useQueryString as jest.MockedFunction<typeof useQueryString>;
+const mockUseQueryString = useQueryString as jest.MockedFunction<typeof useQueryString>;
 
 describe('PaymentMethodsEmpty', () => {
     it('should render the component correctly', () => {
@@ -25,14 +26,14 @@ describe('PaymentMethodsEmpty', () => {
         expect(screen.getByText('Hit the button below to add payment methods.')).toBeInTheDocument();
         expect(screen.getByText('Add payment methods')).toBeInTheDocument();
     });
-    it('should call onaddpaymentmethods when ismobile is false', () => {
+    it('should call onAddPaymentMethods when isMobile is false', () => {
         const mockOnAddPaymentMethod = jest.fn();
         render(<PaymentMethodsEmpty onAddPaymentMethod={mockOnAddPaymentMethod} />);
         const button = screen.getByRole('button', { name: 'Add payment methods' });
         userEvent.click(button);
         expect(mockOnAddPaymentMethod).toHaveBeenCalled();
     });
-    it('should call onaddpaymentmethods when ismobile is true', () => {
+    it('should call onAddPaymentMethods when isMobile is true', () => {
         mockUseDevice.mockReturnValueOnce({
             isDesktop: false,
             isMobile: true,
@@ -44,15 +45,15 @@ describe('PaymentMethodsEmpty', () => {
         userEvent.click(button);
         expect(onAddPaymentMethod).toHaveBeenCalled();
     });
-    it('should render the correct content when ismobile is false', () => {
+    it('should render the correct content when isMobile is false', () => {
         const mockOnAddPaymentMethod = jest.fn();
         render(<PaymentMethodsEmpty onAddPaymentMethod={mockOnAddPaymentMethod} />);
         expect(screen.getByText('You haven’t added any payment methods yet')).toBeInTheDocument();
         expect(screen.getByText('Hit the button below to add payment methods.')).toBeInTheDocument();
         expect(screen.getByText('Add payment methods')).toBeInTheDocument();
-        expect(screen.queryByTestId('dt_p2p_v2_full_page_mobile_wrapper')).not.toBeInTheDocument();
+        expect(screen.queryByTestId('dt_p2p_v2_mobile_wrapper_button')).not.toBeInTheDocument();
     });
-    it('should render the correct content when ismobile is true', () => {
+    it('should render the correct content when isMobile is true', () => {
         mockUseDevice.mockReturnValueOnce({
             isDesktop: false,
             isMobile: true,
@@ -63,10 +64,10 @@ describe('PaymentMethodsEmpty', () => {
         expect(screen.getByText('You haven’t added any payment methods yet')).toBeInTheDocument();
         expect(screen.getByText('Hit the button below to add payment methods.')).toBeInTheDocument();
         expect(screen.getByText('Add payment methods')).toBeInTheDocument();
-        expect(screen.getByTestId('dt_p2p_v2_full_page_mobile_wrapper')).toBeInTheDocument();
+        expect(screen.getByTestId('dt_p2p_v2_mobile_wrapper_button')).toBeInTheDocument();
     });
-    it('should call setQueryString when ismobile is true', () => {
-        const { setQueryString: mockSetQueryString } = mockuseQueryString();
+    it('should call setQueryString when isMobile is true', () => {
+        const { setQueryString: mockSetQueryString } = mockUseQueryString();
         mockUseDevice.mockReturnValueOnce({
             isDesktop: false,
             isMobile: true,
diff --git a/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/AddNewButton.tsx b/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/AddNewButton.tsx
index 05394cdbb0aa..1896378eac5c 100644
--- a/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/AddNewButton.tsx
+++ b/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/AddNewButton.tsx
@@ -14,8 +14,9 @@ type TAddNewButtonProps = {
  * @example <AddNewButton isMobile={isMobile} onAdd={onAdd} />
  * **/
 const AddNewButton = ({ isMobile, onAdd }: TAddNewButtonProps) => (
-    <Button isFullWidth={isMobile} onClick={() => onAdd()} size='lg'>
-        Add new {/*  TODO Remember to translate this*/}
+    <Button isFullWidth={isMobile} onClick={() => onAdd()} size='lg' textSize={isMobile ? 'md' : 'sm'}>
+        {/*  TODO Remember to translate this*/}
+        Add new
     </Button>
 );
 
diff --git a/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/PaymentMethodsList.scss b/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/PaymentMethodsList.scss
index 449fa9d4f020..7683bac0b3ab 100644
--- a/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/PaymentMethodsList.scss
+++ b/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/PaymentMethodsList.scss
@@ -1,19 +1,19 @@
 .p2p-v2-payment-methods-list {
-    width: 100%;
-    @include mobile {
-        max-width: 67.2rem;
-        min-width: 36rem;
-        padding: 1rem 2rem;
-    }
-    &__group {
-        margin-top: 2.4rem;
-        &-body {
-            display: flex;
-            flex-wrap: wrap;
-            margin-bottom: 5rem;
-            @include mobile {
-                justify-content: flex-start;
-                gap: 1.6rem;
+    &__mobile-wrapper {
+        position: absolute;
+        top: 4rem;
+
+        & .p2p-v2-mobile-wrapper {
+            &__body {
+                height: calc(100vh - 22rem);
+                overflow-y: scroll;
+            }
+
+            &__footer {
+                position: fixed;
+                background: #fff;
+                bottom: 0;
+                width: 100%;
             }
         }
     }
diff --git a/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/PaymentMethodsList.tsx b/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/PaymentMethodsList.tsx
index f1961a5954db..ceaea2ea0ccb 100644
--- a/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/PaymentMethodsList.tsx
+++ b/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/PaymentMethodsList.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 import { THooks, TSelectedPaymentMethod } from 'types';
-import { FullPageMobileWrapper, PaymentMethodsHeader } from '@/components';
-import { useDevice, useQueryString } from '@/hooks';
+import { FullPageMobileWrapper } from '@/components';
+import { useQueryString } from '@/hooks';
 import { TFormState } from '@/reducers/types';
+import { Text, useDevice } from '@deriv-com/ui';
 import AddNewButton from './AddNewButton';
-import PaymentMethodsListContent from './PaymentMethodsListContent';
+import { PaymentMethodsListContent } from './PaymentMethodsListContent';
 import './PaymentMethodsList.scss';
 
 type TPaymentMethodsListProps = {
@@ -36,6 +37,7 @@ const PaymentMethodsList = ({
     if (isMobile) {
         return (
             <FullPageMobileWrapper
+                className='p2p-v2-payment-methods-list__mobile-wrapper'
                 onBack={() =>
                     setQueryString({
                         tab: 'default',
@@ -43,7 +45,11 @@ const PaymentMethodsList = ({
                 }
                 renderFooter={() => <AddNewButton isMobile={isMobile} onAdd={onAdd} />}
                 // TODO: Remember to translate the title
-                renderHeader={() => <PaymentMethodsHeader title='Payment methods' />}
+                renderHeader={() => (
+                    <Text size='lg' weight='bold'>
+                        Payment methods
+                    </Text>
+                )}
             >
                 {!!p2pAdvertiserPaymentMethods?.length && (
                     <PaymentMethodsListContent
diff --git a/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/PaymentMethodsListContent/PaymentMethodsListContent.scss b/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/PaymentMethodsListContent/PaymentMethodsListContent.scss
new file mode 100644
index 000000000000..3870d713cd6a
--- /dev/null
+++ b/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/PaymentMethodsListContent/PaymentMethodsListContent.scss
@@ -0,0 +1,25 @@
+.p2p-v2-payment-methods-list-content {
+    width: 100%;
+
+    @include mobile {
+        max-width: 67.2rem;
+        min-width: 36rem;
+        padding: 1rem 2rem;
+    }
+
+    &__group {
+        &:not(:first-child) {
+            margin-top: 2.4rem;
+        }
+
+        &-body {
+            display: flex;
+            flex-wrap: wrap;
+
+            @include mobile {
+                justify-content: flex-start;
+                gap: 1.6rem;
+            }
+        }
+    }
+}
diff --git a/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/PaymentMethodsListContent.tsx b/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/PaymentMethodsListContent/PaymentMethodsListContent.tsx
similarity index 95%
rename from packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/PaymentMethodsListContent.tsx
rename to packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/PaymentMethodsListContent/PaymentMethodsListContent.tsx
index 3725f6d554fa..bebf55201a9f 100644
--- a/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/PaymentMethodsListContent.tsx
+++ b/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/PaymentMethodsListContent/PaymentMethodsListContent.tsx
@@ -7,7 +7,8 @@ import { TFormState } from '@/reducers/types';
 import { sortPaymentMethods } from '@/utils';
 import { p2p } from '@deriv/api-v2';
 import { Text } from '@deriv-com/ui';
-import AddNewButton from './AddNewButton';
+import AddNewButton from '../AddNewButton';
+import './PaymentMethodsListContent.scss';
 
 type TPaymentMethodsGroup = Record<
     string,
@@ -82,15 +83,15 @@ const PaymentMethodsListContent = ({
     }, [isDeleteSuccessful, onResetFormState]);
 
     return (
-        <div className='p2p-v2-payment-methods-list'>
+        <div className='p2p-v2-payment-methods-list-content'>
             {!isMobile && <AddNewButton isMobile={isMobile} onAdd={onAdd} />}
             {Object.keys(groupedPaymentMethods)?.map(key => {
                 return (
-                    <div className='p2p-v2-payment-methods-list__group' key={key}>
-                        <Text color='black' weight='bold'>
+                    <div className='p2p-v2-payment-methods-list-content__group' key={key}>
+                        <Text size='sm' weight='bold'>
                             {groupedPaymentMethods[key].title}
                         </Text>
-                        <div className='p2p-v2-payment-methods-list__group-body'>
+                        <div className='p2p-v2-payment-methods-list-content__group-body'>
                             {groupedPaymentMethods[key].paymentMethods?.map(advertiserPaymentMethod => {
                                 return (
                                     <PaymentMethodCard
diff --git a/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/PaymentMethodsListContent/index.ts b/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/PaymentMethodsListContent/index.ts
new file mode 100644
index 000000000000..693d5c0bf1cf
--- /dev/null
+++ b/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/PaymentMethodsListContent/index.ts
@@ -0,0 +1 @@
+export { default as PaymentMethodsListContent } from './PaymentMethodsListContent';
diff --git a/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/__test__/PaymentMethodsList.spec.tsx b/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/__test__/PaymentMethodsList.spec.tsx
index bbf186641db1..3f81c8dbc36f 100644
--- a/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/__test__/PaymentMethodsList.spec.tsx
+++ b/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/__test__/PaymentMethodsList.spec.tsx
@@ -1,26 +1,29 @@
 import React from 'react';
-import { useDevice, useQueryString } from '@/hooks';
+import { useQueryString } from '@/hooks';
+import { useDevice } from '@deriv-com/ui';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import PaymentMethodsList from '../PaymentMethodsList';
 
-jest.mock('../PaymentMethodsListContent', () => jest.fn().mockReturnValue(<div>PaymentMethodsListContent</div>));
+jest.mock('../PaymentMethodsListContent/PaymentMethodsListContent', () =>
+    jest.fn().mockReturnValue(<div>PaymentMethodsListContent</div>)
+);
 
 jest.mock('@/hooks', () => ({
     ...jest.requireActual('@/hooks'),
-    useDevice: jest.fn().mockReturnValue({
-        isDesktop: false,
-        isMobile: false,
-        isTablet: false,
-    }),
     useQueryString: jest.fn().mockReturnValue({ setQueryString: jest.fn() }),
 }));
 
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: jest.fn().mockReturnValue({ isDesktop: true, isMobile: false, isTablet: false }),
+}));
+
 const mockUseDevice = useDevice as jest.MockedFunction<typeof useDevice>;
 const mockUseQueryString = useQueryString as jest.MockedFunction<typeof useQueryString>;
 
 describe('PaymentMethodsList', () => {
-    it('should render the component when an empty list of payment methods is provided and ismobile is true', () => {
+    it('should render the component when an empty list of payment methods is provided and isMobile is true', () => {
         mockUseDevice.mockReturnValueOnce({
             isDesktop: false,
             isMobile: true,
@@ -38,7 +41,7 @@ describe('PaymentMethodsList', () => {
         );
         expect(screen.queryByText('PaymentMethodsListContent')).not.toBeInTheDocument();
     });
-    it('should render the component when an empty list of payment methods is provided and ismobile is false', () => {
+    it('should render the component when an empty list of payment methods is provided and isMobile is false', () => {
         mockUseDevice.mockReturnValueOnce({
             isDesktop: false,
             isMobile: false,
@@ -56,7 +59,7 @@ describe('PaymentMethodsList', () => {
         );
         expect(screen.queryByText('PaymentMethodsListContent')).not.toBeInTheDocument();
     });
-    it('should render the component when a list of payment methods is provided and ismobile is true', () => {
+    it('should render the component when a list of payment methods is provided and isMobile is true', () => {
         mockUseDevice.mockReturnValueOnce({
             isDesktop: false,
             isMobile: true,
@@ -85,7 +88,7 @@ describe('PaymentMethodsList', () => {
         );
         expect(screen.queryByText('PaymentMethodsListContent')).toBeInTheDocument();
     });
-    it('should render the component when a list of payment methods is provided and ismobile is false', () => {
+    it('should render the component when a list of payment methods is provided and isMobile is false', () => {
         mockUseDevice.mockReturnValueOnce({
             isDesktop: false,
             isMobile: false,
diff --git a/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/__test__/PaymentMethodsListContent.spec.tsx b/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/__test__/PaymentMethodsListContent.spec.tsx
index 0388f1d0fc79..941345ed1ca3 100644
--- a/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/__test__/PaymentMethodsListContent.spec.tsx
+++ b/packages/p2p-v2/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/__test__/PaymentMethodsListContent.spec.tsx
@@ -4,7 +4,7 @@ import { PaymentMethodErrorModal, PaymentMethodModal } from '@/components/Modals
 import { APIProvider, AuthProvider, p2p } from '@deriv/api-v2';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import PaymentMethodsListContent from '../PaymentMethodsListContent';
+import { PaymentMethodsListContent } from '../PaymentMethodsListContent';
 
 const wrapper = ({ children }: { children: JSX.Element }) => (
     <APIProvider>
diff --git a/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCard.tsx b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCard.tsx
index c1a38a3d3aa9..1c98168c909a 100644
--- a/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCard.tsx
+++ b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCard.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { Divider, useDevice } from '@deriv-com/ui';
+import { LightDivider } from '@/components';
+import { useDevice } from '@deriv-com/ui';
 import { OrderDetailsCardFooter } from './OrderDetailsCardFooter';
 import { OrderDetailsCardHeader } from './OrderDetailsCardHeader';
 import { OrderDetailsCardInfo } from './OrderDetailsCardInfo';
@@ -12,9 +13,9 @@ const OrderDetailsCard = () => {
     return (
         <div className='p2p-v2-order-details-card'>
             <OrderDetailsCardHeader />
-            <Divider color='#f2f3f4' />
+            <LightDivider />
             <OrderDetailsCardInfo />
-            <Divider color='#f2f3f4' />
+            <LightDivider />
             <OrderDetailsCardReview />
             {isDesktop && <OrderDetailsCardFooter />}
         </div>
diff --git a/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardInfo/ActiveOrderInfo/ActiveOrderInfo.tsx b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardInfo/ActiveOrderInfo/ActiveOrderInfo.tsx
index f4bce14e61e5..3385934729b1 100644
--- a/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardInfo/ActiveOrderInfo/ActiveOrderInfo.tsx
+++ b/packages/p2p-v2/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardInfo/ActiveOrderInfo/ActiveOrderInfo.tsx
@@ -1,6 +1,7 @@
 import React, { Fragment } from 'react';
+import { LightDivider } from '@/components';
 import { useOrderDetails } from '@/providers/OrderDetailsProvider';
-import { Divider, Text, useDevice } from '@deriv-com/ui';
+import { Text, useDevice } from '@deriv-com/ui';
 import { PaymentMethodAccordion } from '../PaymentMethodAccordion';
 
 const ActiveOrderInfo = () => {
@@ -24,13 +25,13 @@ const ActiveOrderInfo = () => {
     if (isActiveOrder)
         return (
             <>
-                <Divider color='#f2f3f4' />
+                <LightDivider />
                 <PaymentMethodAccordion
                     paymentDetails={labels.paymentDetails}
                     paymentInfo={paymentInfo}
                     paymentMethodDetails={paymentMethodDetails}
                 />
-                <Divider color='#f2f3f4' />
+                <LightDivider />
                 {adDetails.map((detail, key) => (
                     <Fragment key={detail.text}>
                         <div className='flex flex-col p-[1.6rem] gap-2'>
@@ -39,7 +40,7 @@ const ActiveOrderInfo = () => {
                             </Text>
                             <Text size={textSize}>{detail.value}</Text>
                         </div>
-                        {key === 0 && <Divider color='#f2f3f4' />}
+                        {key === 0 && <LightDivider />}
                     </Fragment>
                 ))}
             </>
diff --git a/packages/p2p-v2/src/pages/orders/screens/OrdersChatSection/OrdersChatSection.scss b/packages/p2p-v2/src/pages/orders/screens/OrdersChatSection/OrdersChatSection.scss
index d32c37c01732..8169e18ad9c4 100644
--- a/packages/p2p-v2/src/pages/orders/screens/OrdersChatSection/OrdersChatSection.scss
+++ b/packages/p2p-v2/src/pages/orders/screens/OrdersChatSection/OrdersChatSection.scss
@@ -12,7 +12,6 @@
         position: absolute;
         top: 5rem;
         left: 0;
-        background: #fff;
         z-index: 1;
         height: calc(100vh - 9rem);
 
diff --git a/packages/p2p-v2/src/pages/orders/screens/OrdersChatSection/OrdersChatSection.tsx b/packages/p2p-v2/src/pages/orders/screens/OrdersChatSection/OrdersChatSection.tsx
index 1d3009b94ffe..85d22fb8c722 100644
--- a/packages/p2p-v2/src/pages/orders/screens/OrdersChatSection/OrdersChatSection.tsx
+++ b/packages/p2p-v2/src/pages/orders/screens/OrdersChatSection/OrdersChatSection.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import { FullPageMobileWrapper } from '@/components';
+import { FullPageMobileWrapper, LightDivider } from '@/components';
 import { useExtendedOrderDetails, useSendbird } from '@/hooks';
-import { Divider, Loader, useDevice } from '@deriv-com/ui';
+import { Loader, useDevice } from '@deriv-com/ui';
 import { ChatError, ChatFooter, ChatHeader, ChatMessages } from '../../components';
 import './OrdersChatSection.scss';
 
@@ -56,9 +56,9 @@ const OrdersChatSection = ({ id, isInactive, onReturn, otherUserDetails }: TOrde
             ) : (
                 <>
                     <ChatHeader isOnline={isOnline} lastOnlineTime={lastOnlineTime} nickname={name} />
-                    <Divider className='w-full' color='#f2f3f4' />
+                    <LightDivider className='w-full' />
                     <ChatMessages chatChannel={activeChatChannel} chatMessages={messages} userId={userId} />
-                    <Divider className='w-full' color='#f2f3f4' />
+                    <LightDivider className='w-full' />
                     <ChatFooter
                         isClosed={!!otherUserDetails?.isInactive || !!activeChatChannel?.isFrozen}
                         sendFile={sendFile}
diff --git a/packages/p2p-v2/src/routes/AppContent/index.scss b/packages/p2p-v2/src/routes/AppContent/index.scss
index 49b469675dcf..a81264640d6b 100644
--- a/packages/p2p-v2/src/routes/AppContent/index.scss
+++ b/packages/p2p-v2/src/routes/AppContent/index.scss
@@ -8,6 +8,10 @@
             @include mobile {
                 width: calc(100vw / 4);
             }
+
+            & > span {
+                font-size: 1.4rem;
+            }
         }
     }
     &__wrapper {