From 32bc244898bdb1a00270115930ba53342f7e073e Mon Sep 17 00:00:00 2001
From: Farrah Mae Ochoa <82315152+farrah-deriv@users.noreply.github.com>
Date: Mon, 18 Sep 2023 19:49:10 +0800
Subject: [PATCH] refactor: p2p structure, styles and components (#8696)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: refactor p2p styles

* refactor: refactor styles

* fix: classname typo

* fix: fix broken style

* refactor: update based on pr comments

* fix: failed tests

* fix: import error

* refactor: rename datatest id

* refactor: remove unused styles and refactor text components

* refactor: restructure the p2p package

* refactor: update translations imports

* refactor: update modal-manager import

* fix: pr review comments

* fix: fix some broken styles

* fix: review comments

* chore: change in failed test file and remove change from unrelated file

* fix: review comments

* Henry/fix: navigate to accu trade type in reports page after purchasing a c… (#8684)

* fix: navigate to accu trade type in reports page after purchasing a contract

* fix: circle CI error

* fix: codecov

* fix: circle CI issue

* refactor: refactor dpep-blocked components

* fix: failed test

* fix: review comments

* refactor: test descriptions changes

* refactor: import localize from p2p i18n instead of shared translations package

* fix: review components

* chore: refactored temporarily barred hint component

* refactor: rearrange imports to follow guidelines

* refactor: standardise react imports

* chore: refactored p2p-empty component

* chore: added default value for has_tabs

* feat: unit test added for page return component

* refactor: recommended-by component

* fix: updated index file

* chore: added test cases for star rating

* chore: changed describe

* refactor: add new test cases to increase coverage

* refactor: add comment in empty arrow function

* refactor: refactor trade-badge component

* fix: review comments fixed

* refactor: remove prop-types import

* refactor: update react import

* refactor: refactor form-submit-error-message, table-error

* refactor: nickname form

* refactor: review comments

* fix: tests

* chore: refactored user avatar component

* refactor: refactor toggle-container component

* chore: added suggestions

* refactor: delete the type and use propswithchildren

* chore: refactored FloatingRate component

* refactor: refactor block-user-empty component

* refactor: online status component refactoring

* refactor: review comments

* refactor: add margin-top

* refactor: udpated test description

* refactor: change test cases descriptions

* refactor: review comment

* refactor: refactored verification component

* chore: refactored recommend user component

* chore: removed fireEvent, used userEvent

* refactor: updated tests

* refactor: review comment fix

* refactor: added type checking for modal manager in test case

* translations: 📚 sync translations with crowdin (#8881)

Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com>

* thisyahlen/fix: change algo for realAccountSignup (#8656)

* fix: change algo for realAccountSignup

* fix: refactor

* redeploy: vercel

* translations: 📚 sync translations with crowdin (#8885)

Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com>

* translations: 📚 sync translations with crowdin (#8890)

Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com>

* likhith/fix: :bug: resolved required field error (#8886)

* fix: :bug: resolved required field error

* feat: fixed issue with Citizen field

* refactor: removed unused code

* refactor: updated test

* fix: code smells

* fix: tests

* refactor: reduce code complexity to remove code smell

* refactor: updated return

* refactor: udpated test

* refactor: delete text component and use default button text styles instead

* fix: raised subtasks

* fix: advertiser buy/sell row

* fix: style fix in edit/add payment method form in my profile

* fix: notification issue

* fix: block banned user bug

* fix: issue for popup not showing when rate updated before selecting form

* fix: removed console

* fix: added todo

* fix: added undefined check

* fix: subtasks raised

* fix: daily limit notification

* fix: tests failed

* fix: notification popup issue not shown in responsive

* fix: filter button spacing

* fix: failing tests

* fix: get server hits bump error when in advertiser page and block it from BO

* fix: revert unwanted changes from master

* fix: remove unnecessary changes

* fix: remove unnecessary changes

* fix: tests

---------

Co-authored-by: Farhan Ahmad Nurzi <farhan.nurzi@regentmarkets.com>
Co-authored-by: henry-deriv <118344354+henry-deriv@users.noreply.github.com>
Co-authored-by: ameerul hady <ameerul@deriv.com>
Co-authored-by: nada-deriv <nada.ajinas@deriv.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com>
Co-authored-by: thisyahlen <104053934+thisyahlen-deriv@users.noreply.github.com>
Co-authored-by: Likhith Kolayari <98398322+likhith-deriv@users.noreply.github.com>
---
 .../core/src/Stores/notification-store.js     |   1 -
 packages/p2p/@deriv-stores.d.ts               |  10 +
 packages/p2p/jest.config.js                   |   1 +
 packages/p2p/package.json                     |   1 +
 .../components/__tests__/app-content.spec.js  |  36 +-
 packages/p2p/src/components/app-content.jsx   |  24 +-
 .../currency-selector/currency-selector.scss  |  67 --
 .../dp2p-blocked-description.spec.tsx         |  62 ++
 .../__tests__/dp2p-blocked.spec.tsx           |  10 +
 .../__tests__/dp2p-blocked-checklist.spec.tsx |  55 ++
 .../dp2p-blocked-checklist.scss               |  13 +
 .../dp2p-blocked-checklist.tsx}               |  12 +-
 .../dp2p-blocked-checklist/index.ts           |   4 +
 ...ption.jsx => dp2p-blocked-description.tsx} |  10 +-
 .../components/dp2p-blocked/dp2p-blocked.scss |  14 -
 .../{dp2p-blocked.jsx => dp2p-blocked.tsx}    |  12 +-
 .../dp2p-blocked/{index.js => index.ts}       |   2 +-
 .../__test__/floating-rate.spec.js            |  34 -
 .../__test__/floating-rate.spec.tsx           |  72 ++
 .../floating-rate/floating-rate.scss          |   6 +
 .../{floating-rate.jsx => floating-rate.tsx}  |  96 +--
 .../floating-rate/{index.js => index.ts}      |   2 +-
 packages/p2p/src/components/form/error.jsx    |  16 -
 packages/p2p/src/components/form/form.scss    |   4 -
 .../components/i18next/{index.js => index.ts} |   8 +-
 .../misc/__test__/animation-wrapper.spec.js   |  39 -
 .../src/components/misc/animation-wrapper.jsx |  32 -
 .../components/misc/animation-wrapper.scss    |  22 -
 .../src/components/misc/toggle-container.jsx  |  11 -
 .../ad-error-tooltip-modal.jsx                |   2 +-
 .../ad-error-tooltip-modal.scss               |  17 +
 .../modals/ad-error-tooltip-modal/index.js    |   1 +
 .../ad-visibility-error-modal.jsx             |   6 +-
 .../ad-visibility-error-modal.scss            |  17 +
 .../modals/ad-visibility-error-modal/index.js |   1 +
 .../block-user-modal/block-user-modal.jsx     |   2 +-
 .../modals/buy-sell-modal/buy-sell-modal.jsx  |  38 +-
 .../modals/buy-sell-modal/buy-sell-modal.scss | 110 ++-
 .../cancel-add-payment-method-modal.jsx       |   2 +-
 .../cancel-edit-payment-method-modal.jsx      |   2 +-
 .../create-ad-add-payment-method-modal.jsx    |  20 +-
 .../create-ad-add-payment-method-modal.scss   |  75 +-
 .../create-ad-error-modal.jsx                 |   6 +-
 .../create-ad-error-modal.scss                |  17 +
 .../modals/create-ad-error-modal/index.js     |   1 +
 .../currency-selector-modal.jsx               |   2 +-
 .../modals/currency-selector-modal/index.js   |   1 -
 .../email-link-blocked-modal.jsx              |   4 +-
 .../email-link-blocked-modal.scss             |   2 +-
 .../email-link-expired-modal.jsx              |   6 +-
 .../email-link-expired-modal.scss             |   6 +-
 .../email-link-verified-modal.jsx             |   6 +-
 .../email-link-verified-modal.scss            |   4 +-
 .../email-verification-modal.jsx              |  24 +-
 .../email-verification-modal.scss             |   8 +-
 .../filter-modal/filter-modal-header.jsx      |   2 +-
 .../filter-modal/filter-modal-no-results.jsx  |   4 +-
 .../invalid-verification-link-modal.jsx       |   6 +-
 .../invalid-verification-link-modal.scss      |   4 +-
 .../my-ads-delete-error-modal.jsx             |   2 +-
 .../my-ads-delete-modal.jsx                   |   2 +-
 .../modals/nickname-modal/index.ts            |   3 +
 .../modals/nickname-modal/nickname-modal.tsx  |  26 +
 .../order-details-cancel-modal.jsx            |  10 +-
 .../order-details-cancel-modal.scss           |   4 +-
 .../order-details-confirm-modal.jsx           |   2 +-
 .../quick-add-modal/quick-add-modal.jsx       |  34 +-
 .../quick-add-modal/quick-add-modal.scss      |  52 +-
 .../rate-change-modal/rate-change-modal.jsx   |   6 +-
 .../rate-change-modal/rate-change-modal.scss  |   2 +-
 .../modals/rating-modal/rating-modal.jsx      |  10 +-
 .../modals/rating-modal/rating-modal.scss     |   6 +-
 .../modals/recommended-modal/index.js         |   1 -
 .../recommended-modal/recommended-modal.jsx   |   2 +-
 .../recommended-modal/recommended-modal.scss  |   4 -
 .../p2p/src/components/my-ads/my-ads.scss     | 775 ------------------
 .../__test__/nickname-form-wrapper.spec.js    |  47 --
 .../__test__/nickname-form.spec.js            |  76 --
 .../__tests__/nickname-form.spec.tsx          | 183 +++++
 .../nickname-form/{index.js => index.ts}      |   2 +-
 .../nickname-form/nickname-form-wrapper.jsx   |  26 -
 .../nickname-form/nickname-form.jsx           | 124 ---
 .../nickname-form/nickname-form.scss          |  95 +--
 .../nickname-form/nickname-form.tsx           | 107 +++
 .../__tests__/online-status-avatar.spec.tsx   |  17 +
 .../__tests__/online-status-icon.spec.tsx     |  19 +
 .../__tests__/online-status-label.spec.tsx    | 121 ++-
 .../online-status/{index.js => index.ts}      |   0
 ...us-avatar.jsx => online-status-avatar.tsx} |  22 +-
 ...status-icon.jsx => online-status-icon.tsx} |  14 +-
 .../online-status/online-status-label.jsx     |  22 -
 .../online-status/online-status-label.tsx     |  92 +++
 .../online-status/online-status.scss          |   5 +-
 .../__test__/order-details-footer.spec.js     |  31 +-
 .../__test__/order-details.spec.js            | 111 ++-
 .../__tests__/order-details-wrapper.spec.js   |   4 +-
 ...der-details-complain-modal-radio-group.jsx |   4 +-
 ...er-details-complain-modal-radio-group.scss |  37 +
 .../order-details-complain-modal.jsx          |   6 +-
 .../order-details-complain-modal.scss         |  38 -
 .../order-details/order-details-footer.jsx    |  17 +-
 .../order-details/order-details-footer.scss   |  19 +
 .../order-details/order-details-timer.jsx     |  12 +-
 .../order-details/order-details-timer.scss    |  11 +
 .../order-details/order-details-wrapper.jsx   |   4 +-
 .../order-details/order-details.jsx           |  29 +-
 .../order-details/order-details.scss          |  83 +-
 .../order-details/order-info-block.jsx        |   7 +-
 .../order-details/order-info-block.scss       |  10 +
 .../payment-method-accordion-header.jsx       |   9 +-
 .../payment-method-accordion-header.scss      |  34 +
 .../p2p/src/components/orders/orders.scss     | 269 ------
 .../__test__/p2p-empty.spec.tsx}              |   8 +-
 .../p2p/src/components/p2p-empty/index.ts     |   4 +
 .../empty.scss => p2p-empty/p2p-empty.scss}   |   8 +-
 .../empty.jsx => p2p-empty/p2p-empty.tsx}     |  26 +-
 .../page-return/__test__/page-return.spec.tsx |  11 +
 .../p2p/src/components/page-return/index.ts   |   4 +
 .../components/page-return/page-return.scss   |   6 +-
 .../{page-return.jsx => page-return.tsx}      |  20 +-
 .../rating-cell-renderer.jsx                  |   4 +-
 .../rating-cell-renderer.scss                 |   2 +-
 .../__test__/recommend-user.spec.tsx          |  91 ++
 .../recommend-user/{index.js => index.ts}     |   2 +-
 .../recommend-user/recommend-user.scss        |   6 +-
 ...{recommend-user.jsx => recommend-user.tsx} |  35 +-
 .../__tests__/recommended-by.spec.tsx         |  50 ++
 .../recommended-by/{index.js => index.ts}     |   2 +-
 .../recommended-by/recommended-by.scss        |   4 +-
 ...{recommended-by.jsx => recommended-by.tsx} |  25 +-
 .../__tests__/section-error.spec.tsx          |  10 +
 .../p2p/src/components/section-error/index.ts |   4 +
 .../section-error/section-error.scss          |  22 +
 .../section-error/section-error.tsx           |  16 +
 .../star-rating/__test__/star-rating.spec.tsx |  44 +
 .../p2p/src/components/star-rating/index.js   |   3 -
 .../p2p/src/components/star-rating/index.ts   |   3 +
 .../{star-rating.jsx => star-rating.tsx}      |  62 +-
 .../table/__test__/table-error.spec.js        |  11 -
 .../p2p/src/components/table/table-error.jsx  |  14 -
 packages/p2p/src/components/table/table.scss  |  12 -
 .../__test__/temporarily-barred-hint.spec.tsx |  31 +
 .../{index.js => index.ts}                    |   2 +-
 .../temporarily-barred-hint.scss              |  17 +
 ...d-hint.jsx => temporarily-barred-hint.tsx} |   4 +-
 .../__tests__/toggle-container.spec.tsx}      |   3 +-
 .../src/components/toggle-container/index.ts  |   4 +
 .../toggle-container.scss                     |   4 +-
 .../toggle-container/toggle-container.tsx     |   9 +
 .../__tests__/trade-badge.spec.tsx            |  37 +
 .../trade-badge/{index.js => index.ts}        |   2 +-
 .../{trade-badge.jsx => trade-badge.tsx}      |  43 +-
 ...er-avatar.spec.js => user-avatar.spec.tsx} |   5 +-
 .../user/user-avatar/{index.js => index.ts}   |   2 +-
 .../user/user-avatar/user-avatar.scss         |   2 +-
 .../{user-avatar.jsx => user-avatar.tsx}      |  22 +-
 .../__tests__/verification.spec.js            |  75 --
 .../__tests__/verification.spec.tsx           | 163 ++++
 .../p2p/src/components/verification/index.ts  |   4 +
 .../components/verification/verification.scss |  20 +-
 .../{verification.jsx => verification.tsx}    |  78 +-
 packages/p2p/src/constants/modals.js          |   3 +
 packages/p2p/src/constants/routes-config.js   |  10 +-
 packages/p2p/src/index.js                     |   4 +-
 .../__tests__/advertiser-page.spec.jsx        |   0
 .../advertiser-page-adverts.jsx               |  18 +-
 .../advertiser-page-adverts.scss              |  82 ++
 .../advertiser-page-dropdown-menu.jsx         |  10 +-
 .../advertiser-page-dropdown-menu.scss        |  51 ++
 .../advertiser-page/advertiser-page-row.jsx   |  35 +-
 .../advertiser-page/advertiser-page-row.scss  |   2 +
 .../advertiser-page/advertiser-page-stats.jsx | 100 +--
 .../advertiser-page-stats.scss                |  75 ++
 .../advertiser-page/advertiser-page.jsx       |  44 +-
 .../advertiser-page/advertiser-page.scss      | 208 +----
 .../block-user/block-user-count.jsx           |   2 +-
 .../block-user/block-user-count.scss          |   0
 .../block-user-overlay/block-user-overlay.jsx |   2 +-
 .../block-user-overlay.scss                   |   2 +-
 .../block-user/block-user-overlay/index.js    |   0
 .../advertiser-page/index.js                  |   0
 .../p2p/src/{components => pages}/app.jsx     |  14 +-
 .../p2p/src/{components => pages}/app.scss    |  55 +-
 .../buy-sell-form-receive-amount.spec.js      |   2 +-
 .../buy-sell/__tests__/buy-sell.spec.jsx      |  19 +-
 .../buy-sell/__tests__/sort-dropdown.spec.js  |   0
 .../buy-sell/buy-sell-form-receive-amount.jsx |   7 +-
 .../buy-sell-form-receive-amount.scss         |   7 +
 .../buy-sell/buy-sell-form.jsx                |  71 +-
 .../p2p/src/pages/buy-sell/buy-sell-form.scss | 245 ++++++
 .../buy-sell/buy-sell-header.jsx              |  28 +-
 .../buy-sell/buy-sell-header.scss             |  17 +-
 .../buy-sell/buy-sell-row.jsx                 |  30 +-
 .../buy-sell/buy-sell-row.scss                |   1 -
 .../buy-sell/buy-sell-table.jsx               |  21 +-
 .../src/pages/buy-sell/buy-sell-table.scss    |  46 ++
 .../buy-sell/buy-sell.jsx                     |   8 +-
 .../buy-sell/buy-sell.scss                    |  38 -
 .../buy-sell/currency-dropdown.jsx            |   2 +-
 .../buy-sell/currency-dropdown.scss           |   0
 .../currency-selector/currency-selector.jsx   |   2 +-
 .../currency-selector}/currency-selector.scss |   2 +-
 .../buy-sell/currency-selector/index.js       |   0
 .../{components => pages}/buy-sell/index.js   |   1 +
 .../buy-sell/no-ads/__tests__/no-ads.spec.jsx |   0
 .../buy-sell/no-ads/index.js                  |   1 +
 .../buy-sell/no-ads/no-ads.jsx                |   4 +-
 .../buy-sell/no-ads/no-ads.scss               |   0
 .../buy-sell/sort-dropdown.jsx                |   2 +-
 .../buy-sell/sort-dropdown.scss               |   0
 .../my-ads/__tests__/ad-status.spec.js        |   0
 .../my-ads/__tests__/my-ads-table.spec.jsx    |   0
 .../my-ads/ad-status.jsx                      |   0
 .../my-ads/ad-status.scss                     |   0
 .../{components => pages}/my-ads/ad-type.jsx  |  11 +-
 .../{components => pages}/my-ads/ad-type.scss |   0
 .../my-ads/buy-ad-payment-methods-list.jsx    |   6 +-
 .../my-ads/buy-ad-payment-methods-list.scss   |   0
 .../my-ads/create-ad-form-payment-methods.jsx |   6 +-
 .../my-ads/create-ad-form.jsx                 |  72 +-
 .../p2p/src/pages/my-ads/create-ad-form.scss  | 211 +++++
 .../my-ads/create-ad-summary.jsx              |  61 +-
 .../src/pages/my-ads/create-ad-summary.scss   |   7 +
 .../my-ads/create-ad.jsx                      |   2 +-
 .../my-ads/edit-ad-form-payment-methods.jsx   |   8 +-
 .../my-ads/edit-ad-form.jsx                   |  47 +-
 .../p2p/src/pages/my-ads/edit-ad-form.scss    | 239 ++++++
 .../my-ads/edit-ad-summary.jsx                |  61 +-
 .../p2p/src/pages/my-ads/edit-ad-summary.scss |   7 +
 .../{components => pages}/my-ads/edit-ad.jsx  |   0
 .../filter-payment-methods-results.jsx        |   0
 .../filter-payment-methods-results.scss       |   0
 .../filter-payment-method-results/index.js    |   0
 .../filter-payment-methods.jsx                |   0
 .../filter-payment-methods.scss               |   0
 .../my-ads/filter-payment-methods/index.js    |   0
 .../src/{components => pages}/my-ads/index.js |   0
 .../my-ads/my-ads-row-renderer.jsx            | 101 ++-
 .../my-ads/my-ads-table.jsx                   |  27 +-
 .../p2p/src/pages/my-ads/my-ads-table.scss    | 262 ++++++
 .../{components => pages}/my-ads/my-ads.jsx   |  16 +-
 packages/p2p/src/pages/my-ads/my-ads.scss     | 122 +++
 .../my-ads/sell-ad-payment-methods-list.jsx   |   6 +-
 .../my-ads/sell-ad-payment-methods-list.scss  |   2 +-
 .../my-ads/toggle-ads.jsx                     |   2 +-
 packages/p2p/src/pages/my-ads/toggle-ads.scss |   9 +
 .../block-user-dropdown.jsx                   |   0
 .../block-user-dropdown.scss                  |   0
 .../block-user/block-user-dropdown/index.js   |   0
 .../__tests__/block-user-empty.spec.tsx       |  25 +
 .../block-user-empty/block-user-empty.scss    |  10 +
 .../block-user-empty/block-user-empty.tsx}    |  24 +-
 .../block-user/block-user-empty/index.ts}     |   2 +-
 .../block-user-filter-modal.jsx               |   6 +-
 .../block-user-filter-modal/index.js          |   0
 .../block-user-list/block-user-list.jsx       |   0
 .../block-user-list/block-user-list.scss      |   0
 .../block-user/block-user-list/index.js       |   0
 .../block-user-row/block-user-row.jsx         |   4 +-
 .../block-user-row/block-user-row.scss        |   0
 .../block-user-table/block-user-row/index.js  |   0
 .../block-user-table-error.jsx                |  16 +-
 .../block-user-table-error.scss               |   0
 .../block-user-table-error/index.js           |   0
 .../block-user-table/block-user-table.jsx     |  10 +-
 .../block-user-table/block-user-table.scss    |   0
 .../block-user/block-user-table/index.js      |   0
 .../my-profile/block-user/block-user.jsx      |   0
 .../my-profile/block-user/block-user.scss     |   1 -
 .../my-profile/block-user/index.js            |   0
 .../{components => pages}/my-profile/index.js |   0
 .../my-profile/my-profile-content.jsx         |   0
 .../my-profile/my-profile-form/index.js       |   0
 .../my-profile-form/my-profile-form.jsx       |   2 +-
 .../my-profile-form/my-profile-form.scss      |   0
 .../my-profile/my-profile-header/index.js     |   0
 .../my-profile-header/my-profile-header.jsx   |   2 +-
 .../my-profile-header/my-profile-header.scss  |   0
 .../my-profile-separator-container/index.js   |   0
 .../my-profile-separator-container.jsx        |   0
 .../my-profile-separator-container.scss       |   0
 .../my-profile/my-profile-stats/index.js      |   0
 .../my-profile-balance/index.js               |   0
 .../my-profile-balance/my-profile-balance.jsx |  10 +-
 .../my-profile-balance.scss                   |   6 +-
 .../my-profile-details-container/index.js     |   0
 .../my-profile-details-container.jsx          |   2 +-
 .../my-profile-details-container.scss         |   2 +-
 .../my-profile-details-table/index.js         |   0
 .../my-profile-details-table.jsx              |  16 +-
 .../my-profile-details-table.scss             |   6 +-
 .../my-profile-stats/my-profile-name/index.js |   0
 .../my-profile-name/my-profile-name.jsx       |  32 +-
 .../my-profile-name/my-profile-name.scss      |   6 +-
 .../my-profile-privacy/index.js               |   0
 .../my-profile-privacy/my-profile-privacy.jsx |   7 +-
 .../my-profile-privacy.scss                   |   0
 .../my-profile-stats-table/index.js           |   0
 .../my-profile-stats-table.jsx                |  56 +-
 .../my-profile-stats-table.scss               |   0
 .../my-profile-stats/my-profile-stats.jsx     |   0
 .../my-profile-stats/my-profile-stats.scss    |   0
 .../my-profile/my-profile.jsx                 |   0
 .../my-profile/my-profile.scss                |   0
 .../add-payment-method-form.jsx               |   1 +
 .../add-payment-method-form.scss              |  65 ++
 .../add-payment-method/add-payment-method.jsx |   2 +-
 .../add-payment-method.scss                   |  30 +
 .../add-payment-method/index.js               |   0
 .../select-payment-method.jsx                 |   7 +-
 .../select-payment-method.scss                |  11 +
 .../my-profile/payment-methods/index.js       |   0
 .../payment-method-card/index.js              |   0
 .../payment-method-card-menu.jsx              |   8 +-
 .../payment-method-card-menu.scss             |  12 +
 .../payment-method-card.jsx                   |   0
 .../payment-method-card.scss                  |  27 +-
 .../payment-methods-empty/index.js            |   0
 .../payment-methods-empty.jsx                 |  14 +-
 .../payment-methods-empty.scss                |   6 +-
 .../edit-payment-method-form.jsx              |  19 +-
 .../edit-payment-method-form.scss             |  63 ++
 .../payment-methods-list/index.js             |   0
 .../payment-methods-list.jsx                  |   0
 .../payment-methods-list.scss                 |   1 +
 .../payment-methods/payment-methods.jsx       |   0
 .../orders/__tests__/orders.spec.js           |   2 +-
 .../chat/__tests__/chat-header.spec.tsx       |   0
 .../chat/__tests__/chat-messages.spec.jsx     |   2 +-
 .../orders/chat/__tests__/chat.spec.tsx       |   0
 .../orders/chat/chat-footer-icon.jsx          |   6 +-
 .../orders/chat/chat-footer.jsx               |  13 +-
 .../orders/chat/chat-footer.scss              |   4 +-
 .../orders/chat/chat-header.jsx               |  21 +-
 .../orders/chat/chat-header.scss              |   2 +-
 .../orders/chat/chat-message-receipt.jsx      |   3 +-
 .../orders/chat/chat-message-receipt.scss     |   3 +
 .../orders/chat/chat-message-text.jsx         |   3 +-
 .../pages/orders/chat/chat-message-text.scss  |  11 +
 .../orders/chat/chat-messages.jsx             |  21 +-
 .../orders/chat/chat-messages.scss            |  21 +-
 .../orders/chat/chat-wrapper.jsx              |   4 +-
 .../orders/chat/chat.jsx                      |  22 +-
 .../orders/chat/chat.scss                     |   6 +-
 .../src/{components => pages}/orders/index.js |   0
 .../order-table/__test__/order-table.spec.js  |   4 +-
 .../order-table/order-table-content.jsx       |  14 +-
 .../orders/order-table/order-table-header.jsx |   9 +-
 .../order-table/order-table-header.scss       |   5 +
 .../orders/order-table/order-table-row.jsx    |  33 +-
 .../orders/order-table/order-table-row.scss   |  26 +
 .../orders/order-table/order-table.jsx        |   9 +-
 .../pages/orders/order-table/order-table.scss |  77 ++
 .../{components => pages}/orders/orders.jsx   |   1 -
 packages/p2p/src/pages/orders/orders.scss     | 107 +++
 .../{components => pages}/orders/popup.jsx    |  12 +-
 .../p2p/src/stores/advertiser-page-store.js   |  14 +-
 packages/p2p/src/stores/buy-sell-store.js     |  56 +-
 packages/p2p/src/stores/general-store.js      |  11 +-
 packages/p2p/tsconfig.json                    |   3 +-
 packages/p2p/webpack.config.js                |   3 +-
 361 files changed, 4694 insertions(+), 3657 deletions(-)
 create mode 100644 packages/p2p/@deriv-stores.d.ts
 delete mode 100644 packages/p2p/src/components/buy-sell/currency-selector/currency-selector.scss
 create mode 100644 packages/p2p/src/components/dp2p-blocked/__tests__/dp2p-blocked-description.spec.tsx
 create mode 100644 packages/p2p/src/components/dp2p-blocked/__tests__/dp2p-blocked.spec.tsx
 create mode 100644 packages/p2p/src/components/dp2p-blocked/dp2p-blocked-checklist/__tests__/dp2p-blocked-checklist.spec.tsx
 create mode 100644 packages/p2p/src/components/dp2p-blocked/dp2p-blocked-checklist/dp2p-blocked-checklist.scss
 rename packages/p2p/src/components/dp2p-blocked/{dp2p-blocked-checklist.jsx => dp2p-blocked-checklist/dp2p-blocked-checklist.tsx} (71%)
 create mode 100644 packages/p2p/src/components/dp2p-blocked/dp2p-blocked-checklist/index.ts
 rename packages/p2p/src/components/dp2p-blocked/{dp2p-blocked-description.jsx => dp2p-blocked-description.tsx} (83%)
 rename packages/p2p/src/components/dp2p-blocked/{dp2p-blocked.jsx => dp2p-blocked.tsx} (57%)
 rename packages/p2p/src/components/dp2p-blocked/{index.js => index.ts} (56%)
 delete mode 100644 packages/p2p/src/components/floating-rate/__test__/floating-rate.spec.js
 create mode 100644 packages/p2p/src/components/floating-rate/__test__/floating-rate.spec.tsx
 rename packages/p2p/src/components/floating-rate/{floating-rate.jsx => floating-rate.tsx} (72%)
 rename packages/p2p/src/components/floating-rate/{index.js => index.ts} (55%)
 delete mode 100644 packages/p2p/src/components/form/error.jsx
 delete mode 100644 packages/p2p/src/components/form/form.scss
 rename packages/p2p/src/components/i18next/{index.js => index.ts} (89%)
 delete mode 100644 packages/p2p/src/components/misc/__test__/animation-wrapper.spec.js
 delete mode 100644 packages/p2p/src/components/misc/animation-wrapper.jsx
 delete mode 100644 packages/p2p/src/components/misc/animation-wrapper.scss
 delete mode 100644 packages/p2p/src/components/misc/toggle-container.jsx
 create mode 100644 packages/p2p/src/components/modal-manager/modals/ad-error-tooltip-modal/ad-error-tooltip-modal.scss
 create mode 100644 packages/p2p/src/components/modal-manager/modals/ad-visibility-error-modal/ad-visibility-error-modal.scss
 create mode 100644 packages/p2p/src/components/modal-manager/modals/create-ad-error-modal/create-ad-error-modal.scss
 create mode 100644 packages/p2p/src/components/modal-manager/modals/nickname-modal/index.ts
 create mode 100644 packages/p2p/src/components/modal-manager/modals/nickname-modal/nickname-modal.tsx
 delete mode 100644 packages/p2p/src/components/modal-manager/modals/recommended-modal/recommended-modal.scss
 delete mode 100644 packages/p2p/src/components/my-ads/my-ads.scss
 delete mode 100644 packages/p2p/src/components/nickname-form/__test__/nickname-form-wrapper.spec.js
 delete mode 100644 packages/p2p/src/components/nickname-form/__test__/nickname-form.spec.js
 create mode 100644 packages/p2p/src/components/nickname-form/__tests__/nickname-form.spec.tsx
 rename packages/p2p/src/components/nickname-form/{index.js => index.ts} (55%)
 delete mode 100644 packages/p2p/src/components/nickname-form/nickname-form-wrapper.jsx
 delete mode 100644 packages/p2p/src/components/nickname-form/nickname-form.jsx
 create mode 100644 packages/p2p/src/components/nickname-form/nickname-form.tsx
 create mode 100644 packages/p2p/src/components/online-status/__tests__/online-status-avatar.spec.tsx
 create mode 100644 packages/p2p/src/components/online-status/__tests__/online-status-icon.spec.tsx
 rename packages/p2p/src/components/online-status/{index.js => index.ts} (100%)
 rename packages/p2p/src/components/online-status/{online-status-avatar.jsx => online-status-avatar.tsx} (73%)
 rename packages/p2p/src/components/online-status/{online-status-icon.jsx => online-status-icon.tsx} (63%)
 delete mode 100644 packages/p2p/src/components/online-status/online-status-label.jsx
 create mode 100644 packages/p2p/src/components/online-status/online-status-label.tsx
 create mode 100644 packages/p2p/src/components/order-details/order-details-complain-modal-radio-group.scss
 create mode 100644 packages/p2p/src/components/order-details/order-details-footer.scss
 create mode 100644 packages/p2p/src/components/order-details/order-details-timer.scss
 create mode 100644 packages/p2p/src/components/order-details/order-info-block.scss
 create mode 100644 packages/p2p/src/components/order-details/payment-method-accordion-header.scss
 delete mode 100644 packages/p2p/src/components/orders/orders.scss
 rename packages/p2p/src/components/{empty/__test__/p2p-empty.spec.js => p2p-empty/__test__/p2p-empty.spec.tsx} (58%)
 create mode 100644 packages/p2p/src/components/p2p-empty/index.ts
 rename packages/p2p/src/components/{empty/empty.scss => p2p-empty/p2p-empty.scss} (76%)
 rename packages/p2p/src/components/{empty/empty.jsx => p2p-empty/p2p-empty.tsx} (50%)
 create mode 100644 packages/p2p/src/components/page-return/__test__/page-return.spec.tsx
 create mode 100644 packages/p2p/src/components/page-return/index.ts
 rename packages/p2p/src/components/page-return/{page-return.jsx => page-return.tsx} (54%)
 create mode 100644 packages/p2p/src/components/recommend-user/__test__/recommend-user.spec.tsx
 rename packages/p2p/src/components/recommend-user/{index.js => index.ts} (55%)
 rename packages/p2p/src/components/recommend-user/{recommend-user.jsx => recommend-user.tsx} (76%)
 create mode 100644 packages/p2p/src/components/recommended-by/__tests__/recommended-by.spec.tsx
 rename packages/p2p/src/components/recommended-by/{index.js => index.ts} (55%)
 rename packages/p2p/src/components/recommended-by/{recommended-by.jsx => recommended-by.tsx} (79%)
 create mode 100644 packages/p2p/src/components/section-error/__tests__/section-error.spec.tsx
 create mode 100644 packages/p2p/src/components/section-error/index.ts
 create mode 100644 packages/p2p/src/components/section-error/section-error.scss
 create mode 100644 packages/p2p/src/components/section-error/section-error.tsx
 create mode 100644 packages/p2p/src/components/star-rating/__test__/star-rating.spec.tsx
 delete mode 100644 packages/p2p/src/components/star-rating/index.js
 create mode 100644 packages/p2p/src/components/star-rating/index.ts
 rename packages/p2p/src/components/star-rating/{star-rating.jsx => star-rating.tsx} (50%)
 delete mode 100644 packages/p2p/src/components/table/__test__/table-error.spec.js
 delete mode 100644 packages/p2p/src/components/table/table-error.jsx
 delete mode 100644 packages/p2p/src/components/table/table.scss
 create mode 100644 packages/p2p/src/components/temporarily-barred-hint/__test__/temporarily-barred-hint.spec.tsx
 rename packages/p2p/src/components/temporarily-barred-hint/{index.js => index.ts} (54%)
 rename packages/p2p/src/components/temporarily-barred-hint/{temporarily-barred-hint.jsx => temporarily-barred-hint.tsx} (89%)
 rename packages/p2p/src/components/{misc/__test__/toggle-container.spec.js => toggle-container/__tests__/toggle-container.spec.tsx} (74%)
 create mode 100644 packages/p2p/src/components/toggle-container/index.ts
 rename packages/p2p/src/components/{misc => toggle-container}/toggle-container.scss (80%)
 create mode 100644 packages/p2p/src/components/toggle-container/toggle-container.tsx
 create mode 100644 packages/p2p/src/components/trade-badge/__tests__/trade-badge.spec.tsx
 rename packages/p2p/src/components/trade-badge/{index.js => index.ts} (56%)
 rename packages/p2p/src/components/trade-badge/{trade-badge.jsx => trade-badge.tsx} (65%)
 rename packages/p2p/src/components/user/user-avatar/__test__/{user-avatar.spec.js => user-avatar.spec.tsx} (73%)
 rename packages/p2p/src/components/user/user-avatar/{index.js => index.ts} (56%)
 rename packages/p2p/src/components/user/user-avatar/{user-avatar.jsx => user-avatar.tsx} (70%)
 delete mode 100644 packages/p2p/src/components/verification/__tests__/verification.spec.js
 create mode 100644 packages/p2p/src/components/verification/__tests__/verification.spec.tsx
 create mode 100644 packages/p2p/src/components/verification/index.ts
 rename packages/p2p/src/components/verification/{verification.jsx => verification.tsx} (50%)
 rename packages/p2p/src/{components => pages}/advertiser-page/__tests__/advertiser-page.spec.jsx (100%)
 rename packages/p2p/src/{components => pages}/advertiser-page/advertiser-page-adverts.jsx (89%)
 create mode 100644 packages/p2p/src/pages/advertiser-page/advertiser-page-adverts.scss
 rename packages/p2p/src/{components => pages}/advertiser-page/advertiser-page-dropdown-menu.jsx (86%)
 create mode 100644 packages/p2p/src/pages/advertiser-page/advertiser-page-dropdown-menu.scss
 rename packages/p2p/src/{components => pages}/advertiser-page/advertiser-page-row.jsx (80%)
 create mode 100644 packages/p2p/src/pages/advertiser-page/advertiser-page-row.scss
 rename packages/p2p/src/{components => pages}/advertiser-page/advertiser-page-stats.jsx (77%)
 create mode 100644 packages/p2p/src/pages/advertiser-page/advertiser-page-stats.scss
 rename packages/p2p/src/{components => pages}/advertiser-page/advertiser-page.jsx (95%)
 rename packages/p2p/src/{components => pages}/advertiser-page/advertiser-page.scss (51%)
 rename packages/p2p/src/{components => pages}/advertiser-page/block-user/block-user-count.jsx (96%)
 rename packages/p2p/src/{components => pages}/advertiser-page/block-user/block-user-count.scss (100%)
 rename packages/p2p/src/{components => pages}/advertiser-page/block-user/block-user-overlay/block-user-overlay.jsx (96%)
 rename packages/p2p/src/{components => pages}/advertiser-page/block-user/block-user-overlay/block-user-overlay.scss (94%)
 rename packages/p2p/src/{components => pages}/advertiser-page/block-user/block-user-overlay/index.js (100%)
 rename packages/p2p/src/{components => pages}/advertiser-page/index.js (100%)
 rename packages/p2p/src/{components => pages}/app.jsx (95%)
 rename packages/p2p/src/{components => pages}/app.scss (71%)
 rename packages/p2p/src/{components => pages}/buy-sell/__tests__/buy-sell-form-receive-amount.spec.js (95%)
 rename packages/p2p/src/{components => pages}/buy-sell/__tests__/buy-sell.spec.jsx (74%)
 rename packages/p2p/src/{components => pages}/buy-sell/__tests__/sort-dropdown.spec.js (100%)
 rename packages/p2p/src/{components => pages}/buy-sell/buy-sell-form-receive-amount.jsx (80%)
 create mode 100644 packages/p2p/src/pages/buy-sell/buy-sell-form-receive-amount.scss
 rename packages/p2p/src/{components => pages}/buy-sell/buy-sell-form.jsx (92%)
 create mode 100644 packages/p2p/src/pages/buy-sell/buy-sell-form.scss
 rename packages/p2p/src/{components => pages}/buy-sell/buy-sell-header.jsx (79%)
 rename packages/p2p/src/{components => pages}/buy-sell/buy-sell-header.scss (93%)
 rename packages/p2p/src/{components => pages}/buy-sell/buy-sell-row.jsx (92%)
 rename packages/p2p/src/{components => pages}/buy-sell/buy-sell-row.scss (99%)
 rename packages/p2p/src/{components => pages}/buy-sell/buy-sell-table.jsx (87%)
 create mode 100644 packages/p2p/src/pages/buy-sell/buy-sell-table.scss
 rename packages/p2p/src/{components => pages}/buy-sell/buy-sell.jsx (92%)
 rename packages/p2p/src/{components => pages}/buy-sell/buy-sell.scss (74%)
 rename packages/p2p/src/{components => pages}/buy-sell/currency-dropdown.jsx (96%)
 rename packages/p2p/src/{components => pages}/buy-sell/currency-dropdown.scss (100%)
 rename packages/p2p/src/{components => pages}/buy-sell/currency-selector/currency-selector.jsx (97%)
 rename packages/p2p/src/{components/modal-manager/modals/currency-selector-modal => pages/buy-sell/currency-selector}/currency-selector.scss (98%)
 rename packages/p2p/src/{components => pages}/buy-sell/currency-selector/index.js (100%)
 rename packages/p2p/src/{components => pages}/buy-sell/index.js (70%)
 rename packages/p2p/src/{components => pages}/buy-sell/no-ads/__tests__/no-ads.spec.jsx (100%)
 rename packages/p2p/src/{components => pages}/buy-sell/no-ads/index.js (70%)
 rename packages/p2p/src/{components => pages}/buy-sell/no-ads/no-ads.jsx (100%)
 rename packages/p2p/src/{components => pages}/buy-sell/no-ads/no-ads.scss (100%)
 rename packages/p2p/src/{components => pages}/buy-sell/sort-dropdown.jsx (96%)
 rename packages/p2p/src/{components => pages}/buy-sell/sort-dropdown.scss (100%)
 rename packages/p2p/src/{components => pages}/my-ads/__tests__/ad-status.spec.js (100%)
 rename packages/p2p/src/{components => pages}/my-ads/__tests__/my-ads-table.spec.jsx (100%)
 rename packages/p2p/src/{components => pages}/my-ads/ad-status.jsx (100%)
 rename packages/p2p/src/{components => pages}/my-ads/ad-status.scss (100%)
 rename packages/p2p/src/{components => pages}/my-ads/ad-type.jsx (69%)
 rename packages/p2p/src/{components => pages}/my-ads/ad-type.scss (100%)
 rename packages/p2p/src/{components => pages}/my-ads/buy-ad-payment-methods-list.jsx (99%)
 rename packages/p2p/src/{components => pages}/my-ads/buy-ad-payment-methods-list.scss (100%)
 rename packages/p2p/src/{components => pages}/my-ads/create-ad-form-payment-methods.jsx (92%)
 rename packages/p2p/src/{components => pages}/my-ads/create-ad-form.jsx (92%)
 create mode 100644 packages/p2p/src/pages/my-ads/create-ad-form.scss
 rename packages/p2p/src/{components => pages}/my-ads/create-ad-summary.jsx (62%)
 create mode 100644 packages/p2p/src/pages/my-ads/create-ad-summary.scss
 rename packages/p2p/src/{components => pages}/my-ads/create-ad.jsx (91%)
 rename packages/p2p/src/{components => pages}/my-ads/edit-ad-form-payment-methods.jsx (91%)
 rename packages/p2p/src/{components => pages}/my-ads/edit-ad-form.jsx (96%)
 create mode 100644 packages/p2p/src/pages/my-ads/edit-ad-form.scss
 rename packages/p2p/src/{components => pages}/my-ads/edit-ad-summary.jsx (62%)
 create mode 100644 packages/p2p/src/pages/my-ads/edit-ad-summary.scss
 rename packages/p2p/src/{components => pages}/my-ads/edit-ad.jsx (100%)
 rename packages/p2p/src/{components => pages}/my-ads/filter-payment-methods/filter-payment-method-results/filter-payment-methods-results.jsx (100%)
 rename packages/p2p/src/{components => pages}/my-ads/filter-payment-methods/filter-payment-method-results/filter-payment-methods-results.scss (100%)
 rename packages/p2p/src/{components => pages}/my-ads/filter-payment-methods/filter-payment-method-results/index.js (100%)
 rename packages/p2p/src/{components => pages}/my-ads/filter-payment-methods/filter-payment-methods.jsx (100%)
 rename packages/p2p/src/{components => pages}/my-ads/filter-payment-methods/filter-payment-methods.scss (100%)
 rename packages/p2p/src/{components => pages}/my-ads/filter-payment-methods/index.js (100%)
 rename packages/p2p/src/{components => pages}/my-ads/index.js (100%)
 rename packages/p2p/src/{components => pages}/my-ads/my-ads-row-renderer.jsx (78%)
 rename packages/p2p/src/{components => pages}/my-ads/my-ads-table.jsx (86%)
 create mode 100644 packages/p2p/src/pages/my-ads/my-ads-table.scss
 rename packages/p2p/src/{components => pages}/my-ads/my-ads.jsx (83%)
 create mode 100644 packages/p2p/src/pages/my-ads/my-ads.scss
 rename packages/p2p/src/{components => pages}/my-ads/sell-ad-payment-methods-list.jsx (90%)
 rename packages/p2p/src/{components => pages}/my-ads/sell-ad-payment-methods-list.scss (93%)
 rename packages/p2p/src/{components => pages}/my-ads/toggle-ads.jsx (98%)
 create mode 100644 packages/p2p/src/pages/my-ads/toggle-ads.scss
 rename packages/p2p/src/{components => pages}/my-profile/block-user/block-user-dropdown/block-user-dropdown.jsx (100%)
 rename packages/p2p/src/{components => pages}/my-profile/block-user/block-user-dropdown/block-user-dropdown.scss (100%)
 rename packages/p2p/src/{components => pages}/my-profile/block-user/block-user-dropdown/index.js (100%)
 create mode 100644 packages/p2p/src/pages/my-profile/block-user/block-user-empty/__tests__/block-user-empty.spec.tsx
 rename packages/p2p/src/{components => pages/my-profile}/block-user/block-user-empty/block-user-empty.scss (54%)
 rename packages/p2p/src/{components/block-user/block-user-empty/block-user-empty.jsx => pages/my-profile/block-user/block-user-empty/block-user-empty.tsx} (50%)
 rename packages/p2p/src/{components/block-user/block-user-empty/index.js => pages/my-profile/block-user/block-user-empty/index.ts} (55%)
 rename packages/p2p/src/{components => pages}/my-profile/block-user/block-user-filter-modal/block-user-filter-modal.jsx (83%)
 rename packages/p2p/src/{components => pages}/my-profile/block-user/block-user-filter-modal/index.js (100%)
 rename packages/p2p/src/{components => pages}/my-profile/block-user/block-user-list/block-user-list.jsx (100%)
 rename packages/p2p/src/{components => pages}/my-profile/block-user/block-user-list/block-user-list.scss (100%)
 rename packages/p2p/src/{components => pages}/my-profile/block-user/block-user-list/index.js (100%)
 rename packages/p2p/src/{components => pages}/my-profile/block-user/block-user-table/block-user-row/block-user-row.jsx (95%)
 rename packages/p2p/src/{components => pages}/my-profile/block-user/block-user-table/block-user-row/block-user-row.scss (100%)
 rename packages/p2p/src/{components => pages}/my-profile/block-user/block-user-table/block-user-row/index.js (100%)
 rename packages/p2p/src/{components => pages}/my-profile/block-user/block-user-table/block-user-table-error/block-user-table-error.jsx (78%)
 rename packages/p2p/src/{components => pages}/my-profile/block-user/block-user-table/block-user-table-error/block-user-table-error.scss (100%)
 rename packages/p2p/src/{components => pages}/my-profile/block-user/block-user-table/block-user-table-error/index.js (100%)
 rename packages/p2p/src/{components => pages}/my-profile/block-user/block-user-table/block-user-table.jsx (90%)
 rename packages/p2p/src/{components => pages}/my-profile/block-user/block-user-table/block-user-table.scss (100%)
 rename packages/p2p/src/{components => pages}/my-profile/block-user/block-user-table/index.js (100%)
 rename packages/p2p/src/{components => pages}/my-profile/block-user/block-user.jsx (100%)
 rename packages/p2p/src/{components => pages}/my-profile/block-user/block-user.scss (92%)
 rename packages/p2p/src/{components => pages}/my-profile/block-user/index.js (100%)
 rename packages/p2p/src/{components => pages}/my-profile/index.js (100%)
 rename packages/p2p/src/{components => pages}/my-profile/my-profile-content.jsx (100%)
 rename packages/p2p/src/{components => pages}/my-profile/my-profile-form/index.js (100%)
 rename packages/p2p/src/{components => pages}/my-profile/my-profile-form/my-profile-form.jsx (99%)
 rename packages/p2p/src/{components => pages}/my-profile/my-profile-form/my-profile-form.scss (100%)
 rename packages/p2p/src/{components => pages}/my-profile/my-profile-header/index.js (100%)
 rename packages/p2p/src/{components => pages}/my-profile/my-profile-header/my-profile-header.jsx (95%)
 rename packages/p2p/src/{components => pages}/my-profile/my-profile-header/my-profile-header.scss (100%)
 rename packages/p2p/src/{components => pages}/my-profile/my-profile-separator-container/index.js (100%)
 rename packages/p2p/src/{components => pages}/my-profile/my-profile-separator-container/my-profile-separator-container.jsx (100%)
 rename packages/p2p/src/{components => pages}/my-profile/my-profile-separator-container/my-profile-separator-container.scss (100%)
 rename packages/p2p/src/{components => pages}/my-profile/my-profile-stats/index.js (100%)
 rename packages/p2p/src/{components => pages}/my-profile/my-profile-stats/my-profile-balance/index.js (100%)
 rename packages/p2p/src/{components => pages}/my-profile/my-profile-stats/my-profile-balance/my-profile-balance.jsx (86%)
 rename packages/p2p/src/{components => pages}/my-profile/my-profile-stats/my-profile-balance/my-profile-balance.scss (90%)
 rename packages/p2p/src/{components => pages}/my-profile/my-profile-stats/my-profile-details-container/index.js (100%)
 rename packages/p2p/src/{components => pages}/my-profile/my-profile-stats/my-profile-details-container/my-profile-details-container.jsx (89%)
 rename packages/p2p/src/{components => pages}/my-profile/my-profile-stats/my-profile-details-container/my-profile-details-container.scss (96%)
 rename packages/p2p/src/{components => pages}/my-profile/my-profile-stats/my-profile-details-table/index.js (100%)
 rename packages/p2p/src/{components => pages}/my-profile/my-profile-stats/my-profile-details-table/my-profile-details-table.jsx (96%)
 rename packages/p2p/src/{components => pages}/my-profile/my-profile-stats/my-profile-details-table/my-profile-details-table.scss (96%)
 rename packages/p2p/src/{components => pages}/my-profile/my-profile-stats/my-profile-name/index.js (100%)
 rename packages/p2p/src/{components => pages}/my-profile/my-profile-stats/my-profile-name/my-profile-name.jsx (88%)
 rename packages/p2p/src/{components => pages}/my-profile/my-profile-stats/my-profile-name/my-profile-name.scss (97%)
 rename packages/p2p/src/{components => pages}/my-profile/my-profile-stats/my-profile-privacy/index.js (100%)
 rename packages/p2p/src/{components => pages}/my-profile/my-profile-stats/my-profile-privacy/my-profile-privacy.jsx (83%)
 rename packages/p2p/src/{components => pages}/my-profile/my-profile-stats/my-profile-privacy/my-profile-privacy.scss (100%)
 rename packages/p2p/src/{components => pages}/my-profile/my-profile-stats/my-profile-stats-table/index.js (100%)
 rename packages/p2p/src/{components => pages}/my-profile/my-profile-stats/my-profile-stats-table/my-profile-stats-table.jsx (89%)
 rename packages/p2p/src/{components => pages}/my-profile/my-profile-stats/my-profile-stats-table/my-profile-stats-table.scss (100%)
 rename packages/p2p/src/{components => pages}/my-profile/my-profile-stats/my-profile-stats.jsx (100%)
 rename packages/p2p/src/{components => pages}/my-profile/my-profile-stats/my-profile-stats.scss (100%)
 rename packages/p2p/src/{components => pages}/my-profile/my-profile.jsx (100%)
 rename packages/p2p/src/{components => pages}/my-profile/my-profile.scss (100%)
 rename packages/p2p/src/{components => pages}/my-profile/payment-methods/add-payment-method/add-payment-method-form.jsx (99%)
 create mode 100644 packages/p2p/src/pages/my-profile/payment-methods/add-payment-method/add-payment-method-form.scss
 rename packages/p2p/src/{components => pages}/my-profile/payment-methods/add-payment-method/add-payment-method.jsx (97%)
 create mode 100644 packages/p2p/src/pages/my-profile/payment-methods/add-payment-method/add-payment-method.scss
 rename packages/p2p/src/{components => pages}/my-profile/payment-methods/add-payment-method/index.js (100%)
 rename packages/p2p/src/{components => pages}/my-profile/payment-methods/add-payment-method/select-payment-method.jsx (94%)
 create mode 100644 packages/p2p/src/pages/my-profile/payment-methods/add-payment-method/select-payment-method.scss
 rename packages/p2p/src/{components => pages}/my-profile/payment-methods/index.js (100%)
 rename packages/p2p/src/{components => pages}/my-profile/payment-methods/payment-method-card/index.js (100%)
 rename packages/p2p/src/{components => pages}/my-profile/payment-methods/payment-method-card/payment-method-card-menu.jsx (76%)
 create mode 100644 packages/p2p/src/pages/my-profile/payment-methods/payment-method-card/payment-method-card-menu.scss
 rename packages/p2p/src/{components => pages}/my-profile/payment-methods/payment-method-card/payment-method-card.jsx (100%)
 rename packages/p2p/src/{components => pages}/my-profile/payment-methods/payment-method-card/payment-method-card.scss (89%)
 rename packages/p2p/src/{components => pages}/my-profile/payment-methods/payment-methods-empty/index.js (100%)
 rename packages/p2p/src/{components => pages}/my-profile/payment-methods/payment-methods-empty/payment-methods-empty.jsx (83%)
 rename packages/p2p/src/{components => pages}/my-profile/payment-methods/payment-methods-empty/payment-methods-empty.scss (82%)
 rename packages/p2p/src/{components => pages}/my-profile/payment-methods/payment-methods-list/edit-payment-method-form.jsx (91%)
 create mode 100644 packages/p2p/src/pages/my-profile/payment-methods/payment-methods-list/edit-payment-method-form.scss
 rename packages/p2p/src/{components => pages}/my-profile/payment-methods/payment-methods-list/index.js (100%)
 rename packages/p2p/src/{components => pages}/my-profile/payment-methods/payment-methods-list/payment-methods-list.jsx (100%)
 rename packages/p2p/src/{components => pages}/my-profile/payment-methods/payment-methods-list/payment-methods-list.scss (99%)
 rename packages/p2p/src/{components => pages}/my-profile/payment-methods/payment-methods.jsx (100%)
 rename packages/p2p/src/{components => pages}/orders/__tests__/orders.spec.js (94%)
 rename packages/p2p/src/{components => pages}/orders/chat/__tests__/chat-header.spec.tsx (100%)
 rename packages/p2p/src/{components => pages}/orders/chat/__tests__/chat-messages.spec.jsx (97%)
 rename packages/p2p/src/{components => pages}/orders/chat/__tests__/chat.spec.tsx (100%)
 rename packages/p2p/src/{components => pages}/orders/chat/chat-footer-icon.jsx (68%)
 rename packages/p2p/src/{components => pages}/orders/chat/chat-footer.jsx (89%)
 rename packages/p2p/src/{components => pages}/orders/chat/chat-footer.scss (97%)
 rename packages/p2p/src/{components => pages}/orders/chat/chat-header.jsx (71%)
 rename packages/p2p/src/{components => pages}/orders/chat/chat-header.scss (98%)
 rename packages/p2p/src/{components => pages}/orders/chat/chat-message-receipt.jsx (90%)
 create mode 100644 packages/p2p/src/pages/orders/chat/chat-message-receipt.scss
 rename packages/p2p/src/{components => pages}/orders/chat/chat-message-text.jsx (89%)
 create mode 100644 packages/p2p/src/pages/orders/chat/chat-message-text.scss
 rename packages/p2p/src/{components => pages}/orders/chat/chat-messages.jsx (88%)
 rename packages/p2p/src/{components => pages}/orders/chat/chat-messages.scss (80%)
 rename packages/p2p/src/{components => pages}/orders/chat/chat-wrapper.jsx (92%)
 rename packages/p2p/src/{components => pages}/orders/chat/chat.jsx (75%)
 rename packages/p2p/src/{components => pages}/orders/chat/chat.scss (83%)
 rename packages/p2p/src/{components => pages}/orders/index.js (100%)
 rename packages/p2p/src/{components => pages}/orders/order-table/__test__/order-table.spec.js (78%)
 rename packages/p2p/src/{components => pages}/orders/order-table/order-table-content.jsx (88%)
 rename packages/p2p/src/{components => pages}/orders/order-table/order-table-header.jsx (79%)
 create mode 100644 packages/p2p/src/pages/orders/order-table/order-table-header.scss
 rename packages/p2p/src/{components => pages}/orders/order-table/order-table-row.jsx (88%)
 create mode 100644 packages/p2p/src/pages/orders/order-table/order-table-row.scss
 rename packages/p2p/src/{components => pages}/orders/order-table/order-table.jsx (86%)
 create mode 100644 packages/p2p/src/pages/orders/order-table/order-table.scss
 rename packages/p2p/src/{components => pages}/orders/orders.jsx (98%)
 create mode 100644 packages/p2p/src/pages/orders/orders.scss
 rename packages/p2p/src/{components => pages}/orders/popup.jsx (94%)

diff --git a/packages/core/src/Stores/notification-store.js b/packages/core/src/Stores/notification-store.js
index c7026ae0fd39..6caa8cba6257 100644
--- a/packages/core/src/Stores/notification-store.js
+++ b/packages/core/src/Stores/notification-store.js
@@ -840,7 +840,6 @@ export default class NotificationStore extends BaseStore {
                         />
                     ),
                     platform: 'P2P',
-                    should_show_again: false,
                     type: 'announce',
                 };
             },
diff --git a/packages/p2p/@deriv-stores.d.ts b/packages/p2p/@deriv-stores.d.ts
new file mode 100644
index 000000000000..8979a64c6fc0
--- /dev/null
+++ b/packages/p2p/@deriv-stores.d.ts
@@ -0,0 +1,10 @@
+import type { TCoreStores } from '@deriv/stores/types';
+import type P2PStore from './src/stores';
+
+declare module '@deriv/stores' {
+    export function useStore(): TCoreStores & {
+        modules: {
+            p2p: P2PStore;
+        };
+    };
+}
diff --git a/packages/p2p/jest.config.js b/packages/p2p/jest.config.js
index 49aafa5bfc3f..8ee673a11aaa 100644
--- a/packages/p2p/jest.config.js
+++ b/packages/p2p/jest.config.js
@@ -9,6 +9,7 @@ module.exports = {
         '^Assets/(.*)$': '<rootDir>/src/assets/$1',
         '^Components/(.*)$': '<rootDir>/src/components/$1',
         '^Constants/(.*)$': '<rootDir>/src/constants/$1',
+        '^Pages/(.*)$': '<rootDir>/src/pages/$1',
         '^Stores/(.*)$': '<rootDir>/src/stores/$1',
         '^Stores$': '<rootDir>/src/stores/index',
         '^Translations/(.*)$': '<rootDir>/src/translations/$1',
diff --git a/packages/p2p/package.json b/packages/p2p/package.json
index 09d6fc19ded5..76bad9966094 100644
--- a/packages/p2p/package.json
+++ b/packages/p2p/package.json
@@ -38,6 +38,7 @@
         "@deriv/translations": "^1.0.0",
         "@deriv/api-types": "^1.0.118",
         "@testing-library/react": "^12.0.0",
+        "@testing-library/user-event": "^13.5.0",
         "classnames": "^2.2.6",
         "commander": "^3.0.2",
         "crc-32": "^1.2.0",
diff --git a/packages/p2p/src/components/__tests__/app-content.spec.js b/packages/p2p/src/components/__tests__/app-content.spec.js
index 433c82fad51d..af2c930c22fd 100644
--- a/packages/p2p/src/components/__tests__/app-content.spec.js
+++ b/packages/p2p/src/components/__tests__/app-content.spec.js
@@ -25,25 +25,18 @@ jest.mock('@deriv/components', () => ({
     Loading: () => <div>Loading</div>,
 }));
 
+jest.mock('@deriv/shared', () => ({
+    ...jest.requireActual('@deriv/shared'),
+    isMobile: jest.fn(() => false),
+}));
+
 // jest.mock('Components/dp2p-blocked', () => jest.fn(() => 'Dp2pBlocked'));
 jest.mock('Components/nickname-form', () => jest.fn(() => 'NicknameForm'));
 jest.mock('Components/verification/verification', () => jest.fn(() => 'Verification'));
-jest.mock('Components/my-ads/my-ads', () => jest.fn(() => 'MyAds'));
-jest.mock('Components/orders/orders', () => jest.fn(() => 'Orders'));
-jest.mock('Components/buy-sell/buy-sell', () => jest.fn(() => 'BuySell'));
-jest.mock('Components/my-profile', () => jest.fn(() => 'MyProfile'));
-
-jest.mock('@sendbird/chat', () => ({
-    SendbirdChat: jest.fn().mockReturnValue({}),
-}));
-
-jest.mock('@sendbird/chat/groupChannel', () => ({
-    SendbirdChat: jest.fn().mockReturnValue({}),
-}));
-
-jest.mock('@sendbird/chat/message', () => ({
-    SendbirdChat: jest.fn().mockReturnValue({}),
-}));
+jest.mock('Pages/my-ads/my-ads', () => jest.fn(() => 'MyAds'));
+jest.mock('Pages/orders/orders', () => jest.fn(() => 'Orders'));
+jest.mock('Pages/buy-sell/buy-sell', () => jest.fn(() => 'BuySell'));
+jest.mock('Pages/my-profile', () => jest.fn(() => 'MyProfile'));
 
 describe('<AppContent/>', () => {
     const mocked_store_values = {
@@ -93,17 +86,6 @@ describe('<AppContent/>', () => {
     //     expect(screen.getByText('Dp2pBlocked')).toBeInTheDocument();
     // });
 
-    it('should render the nick-name form component when should_show_popup state is true', () => {
-        useStores.mockImplementation(() => ({
-            general_store: { ...mocked_store_values, should_show_popup: true },
-        }));
-        render(<AppContent />, {
-            wrapper: ({ children }) => <StoreProvider store={mockStore({})}>{children}</StoreProvider>,
-        });
-
-        expect(screen.getByText('NicknameForm')).toBeInTheDocument();
-    });
-
     // it('should render only the first notification component when multiple error status is set', () => {
     //     useStores.mockImplementation(() => ({
     //         general_store: { ...mocked_store_values, should_show_popup: true, should_show_dp2p_blocked: true },
diff --git a/packages/p2p/src/components/app-content.jsx b/packages/p2p/src/components/app-content.jsx
index e364e5e5268a..18779b4c164d 100644
--- a/packages/p2p/src/components/app-content.jsx
+++ b/packages/p2p/src/components/app-content.jsx
@@ -1,16 +1,16 @@
+import classNames from 'classnames';
 import React from 'react';
-import { isAction, reaction } from 'mobx';
 import { useHistory } from 'react-router-dom';
-import { useStores } from 'Stores';
-import { isMobile } from '@deriv/shared';
+import { isAction, reaction } from 'mobx';
+import { observer } from 'mobx-react-lite';
 import { Loading, Tabs } from '@deriv/components';
-import { useStore, observer } from '@deriv/stores';
-import classNames from 'classnames';
-import { localize } from './i18next';
-import NicknameForm from './nickname-form';
-import TemporarilyBarredHint from './temporarily-barred-hint';
-import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
 import { useP2PNotificationCount } from '@deriv/hooks';
+import { isMobile } from '@deriv/shared';
+import { useStore } from '@deriv/stores';
+import TemporarilyBarredHint from 'Components/temporarily-barred-hint';
+import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
+import { useStores } from 'Stores';
+import { localize } from './i18next';
 
 const AppContent = ({ order_id }) => {
     const { buy_sell_store, general_store } = useStores();
@@ -47,10 +47,6 @@ const AppContent = ({ order_id }) => {
         return <Loading is_fullscreen={false} />;
     }
 
-    if (general_store.should_show_popup) {
-        return <NicknameForm />;
-    }
-
     // return empty or else the tabs will be shown above when displaying the advertiser page
     if (
         (buy_sell_store?.show_advertiser_page && !buy_sell_store.should_show_verification) ||
@@ -62,7 +58,7 @@ const AppContent = ({ order_id }) => {
     return (
         <Tabs
             active_index={general_store.active_index}
-            className={classNames({ 'p2p-cashier__tabs': general_store.active_index === 0 && isMobile() })}
+            className={classNames({ p2p__tabs: general_store.active_index === 0 && isMobile() })}
             header_fit_content={!isMobile()}
             is_100vw={isMobile()}
             is_scrollable
diff --git a/packages/p2p/src/components/buy-sell/currency-selector/currency-selector.scss b/packages/p2p/src/components/buy-sell/currency-selector/currency-selector.scss
deleted file mode 100644
index 1679543fa23e..000000000000
--- a/packages/p2p/src/components/buy-sell/currency-selector/currency-selector.scss
+++ /dev/null
@@ -1,67 +0,0 @@
-.buy-sell .currency-selector {
-    @include desktop {
-        position: absolute;
-        margin-top: 0.4rem;
-        width: 24rem;
-    }
-
-    &__search-icon {
-        margin-right: 1rem;
-    }
-
-    .dc-dropdown-list {
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-        margin-top: 0;
-        padding: 0.8rem;
-
-        @include mobile {
-            box-shadow: none;
-            height: 100%;
-            max-height: calc(100% - 11.8rem);
-            overflow: auto;
-            padding: 0;
-            transition: unset;
-        }
-
-        &__item {
-            border-radius: 4px;
-            padding: 0.8rem 1.6rem;
-            min-height: 36px;
-
-            @include mobile {
-                margin: 0.8rem 1.6rem;
-            }
-
-            &--active {
-                font-weight: bold;
-            }
-
-            &--not-found {
-                background: none;
-                word-break: break-word;
-
-                @include mobile {
-                    display: block;
-                    font-weight: bold;
-                    margin-top: 14rem;
-                    text-align: center;
-                    width: 100%;
-                }
-            }
-        }
-    }
-
-    .dc-input {
-        border: 0;
-        border-bottom: 1px solid var(--border-normal);
-        border-bottom-right-radius: 0;
-        border-bottom-left-radius: 0;
-        box-shadow: 0 8px 16px 0 var(--shadow-menu);
-        background: var(--general-main-2);
-
-        &__field {
-            padding-left: 3.4rem;
-        }
-    }
-}
diff --git a/packages/p2p/src/components/dp2p-blocked/__tests__/dp2p-blocked-description.spec.tsx b/packages/p2p/src/components/dp2p-blocked/__tests__/dp2p-blocked-description.spec.tsx
new file mode 100644
index 000000000000..93bd21bc186d
--- /dev/null
+++ b/packages/p2p/src/components/dp2p-blocked/__tests__/dp2p-blocked-description.spec.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useStores } from 'Stores/index';
+import Dp2pBlockedDescription from '../dp2p-blocked-description';
+
+jest.mock('Stores', () => ({
+    ...jest.requireActual('Stores'),
+    useStores: jest.fn(),
+}));
+
+describe('<Dp2pBlockedDescription />', () => {
+    it('it should return `P2P transactions are locked. This feature is not available for payment agents.`', () => {
+        (useStores as jest.Mock).mockReturnValue({
+            general_store: {
+                is_p2p_blocked_for_pa: true,
+                is_high_risk: true,
+                is_blocked: false,
+            },
+        });
+        render(<Dp2pBlockedDescription />);
+        expect(
+            screen.getByText('P2P transactions are locked. This feature is not available for payment agents.')
+        ).toBeInTheDocument();
+    });
+
+    it('it should return `To enable this feature you must complete the following:`', () => {
+        (useStores as jest.Mock).mockReturnValue({
+            general_store: {
+                is_p2p_blocked_for_pa: false,
+                is_high_risk: true,
+                is_blocked: false,
+            },
+        });
+        render(<Dp2pBlockedDescription />);
+        expect(screen.getByText('To enable this feature you must complete the following:')).toBeInTheDocument();
+    });
+
+    it('it should return `Please use live chat to contact our Customer Support team for help.` and open live chat when clicking on the `live chat`', () => {
+        (useStores as jest.Mock).mockReturnValue({
+            general_store: {
+                is_p2p_blocked_for_pa: false,
+                is_high_risk: false,
+                is_blocked: false,
+            },
+        });
+
+        window.LC_API = {
+            open_chat_window: jest.fn(),
+            on_chat_ended: jest.fn(),
+        };
+
+        render(<Dp2pBlockedDescription />);
+        expect(screen.getByText(/to contact our Customer Support team for help./)).toBeInTheDocument();
+
+        const live_chat_text = screen.getByText(/live chat/i);
+        expect(live_chat_text).toBeInTheDocument();
+
+        userEvent.click(live_chat_text);
+        expect(window.LC_API.open_chat_window).toHaveBeenCalledTimes(1);
+    });
+});
diff --git a/packages/p2p/src/components/dp2p-blocked/__tests__/dp2p-blocked.spec.tsx b/packages/p2p/src/components/dp2p-blocked/__tests__/dp2p-blocked.spec.tsx
new file mode 100644
index 000000000000..7e24f92610d8
--- /dev/null
+++ b/packages/p2p/src/components/dp2p-blocked/__tests__/dp2p-blocked.spec.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Dp2pBlocked from '../dp2p-blocked';
+
+describe('<Dp2pBlocked />', () => {
+    it('it should render <Dp2pBlocked /> component', () => {
+        render(<Dp2pBlocked />);
+        expect(screen.getByText('Your Deriv P2P cashier is blocked')).toBeInTheDocument();
+    });
+});
diff --git a/packages/p2p/src/components/dp2p-blocked/dp2p-blocked-checklist/__tests__/dp2p-blocked-checklist.spec.tsx b/packages/p2p/src/components/dp2p-blocked/dp2p-blocked-checklist/__tests__/dp2p-blocked-checklist.spec.tsx
new file mode 100644
index 000000000000..e2ec019dc182
--- /dev/null
+++ b/packages/p2p/src/components/dp2p-blocked/dp2p-blocked-checklist/__tests__/dp2p-blocked-checklist.spec.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useStores } from 'Stores/index';
+import Dp2pBlockedChecklist from '..';
+
+const mockHistoryPush = jest.fn();
+
+jest.mock('Stores', () => ({
+    ...jest.requireActual('Stores'),
+    useStores: jest.fn(),
+}));
+
+jest.mock('react-router-dom', () => ({
+    ...jest.requireActual('react-router-dom'),
+    useHistory: () => ({
+        push: mockHistoryPush,
+    }),
+}));
+
+describe('<Dp2pBlockedChecklist />', () => {
+    it('it should render <Dp2pBlockedChecklist /> component if client is high risk and not blocked', () => {
+        (useStores as jest.Mock).mockReturnValue({
+            general_store: {
+                is_high_risk: true,
+                is_blocked: false,
+            },
+        });
+        render(<Dp2pBlockedChecklist />);
+        expect(screen.getByText('Complete the financial assessment form')).toBeInTheDocument();
+    });
+
+    it('it should redirect to `/account/financial-assessment` while clicking on checklist button if client is high risk and not blocked', () => {
+        (useStores as jest.Mock).mockReturnValue({
+            general_store: {
+                is_high_risk: true,
+                is_blocked: false,
+            },
+        });
+        render(<Dp2pBlockedChecklist />);
+        userEvent.click(screen.getByTestId('dt_checklist_item_status_action'));
+        expect(mockHistoryPush).toHaveBeenCalledWith({ pathname: '/account/financial-assessment' });
+    });
+
+    it('it should return null when client is not high risk', () => {
+        (useStores as jest.Mock).mockReturnValue({
+            general_store: {
+                is_high_risk: false,
+                is_blocked: false,
+            },
+        });
+        const { container } = render(<Dp2pBlockedChecklist />);
+        expect(container).toBeEmptyDOMElement();
+    });
+});
diff --git a/packages/p2p/src/components/dp2p-blocked/dp2p-blocked-checklist/dp2p-blocked-checklist.scss b/packages/p2p/src/components/dp2p-blocked/dp2p-blocked-checklist/dp2p-blocked-checklist.scss
new file mode 100644
index 000000000000..d86686bfde69
--- /dev/null
+++ b/packages/p2p/src/components/dp2p-blocked/dp2p-blocked-checklist/dp2p-blocked-checklist.scss
@@ -0,0 +1,13 @@
+.dp2p-blocked-checklist {
+    &__container {
+        margin-top: 2.4rem;
+    }
+
+    .dc-checklist__item {
+        width: 40rem;
+
+        @include mobile {
+            width: 100%;
+        }
+    }
+}
diff --git a/packages/p2p/src/components/dp2p-blocked/dp2p-blocked-checklist.jsx b/packages/p2p/src/components/dp2p-blocked/dp2p-blocked-checklist/dp2p-blocked-checklist.tsx
similarity index 71%
rename from packages/p2p/src/components/dp2p-blocked/dp2p-blocked-checklist.jsx
rename to packages/p2p/src/components/dp2p-blocked/dp2p-blocked-checklist/dp2p-blocked-checklist.tsx
index f25f66522340..f7259c2867c5 100644
--- a/packages/p2p/src/components/dp2p-blocked/dp2p-blocked-checklist.jsx
+++ b/packages/p2p/src/components/dp2p-blocked/dp2p-blocked-checklist/dp2p-blocked-checklist.tsx
@@ -1,10 +1,10 @@
-import * as React from 'react';
+import React from 'react';
 import { useHistory } from 'react-router-dom';
+import { observer } from 'mobx-react-lite';
 import { Checklist } from '@deriv/components';
 import { routes } from '@deriv/shared';
-import { observer } from 'mobx-react-lite';
-import { useStores } from 'Stores';
-import { localize } from '../i18next';
+import { localize } from 'Components/i18next';
+import { useStores } from 'Stores/index'; // remove index when store migration to ts is done
 
 const Dp2pBlockedChecklist = () => {
     const { general_store } = useStores();
@@ -23,8 +23,8 @@ const Dp2pBlockedChecklist = () => {
         ];
 
         return (
-            <div className='dp2p-blocked__checklist-container'>
-                <Checklist className='dp2p-blocked__checklist' items={checklist_items} />
+            <div className='dp2p-blocked-checklist__container'>
+                <Checklist className='dp2p-blocked-checklist' items={checklist_items} />
             </div>
         );
     }
diff --git a/packages/p2p/src/components/dp2p-blocked/dp2p-blocked-checklist/index.ts b/packages/p2p/src/components/dp2p-blocked/dp2p-blocked-checklist/index.ts
new file mode 100644
index 000000000000..d404fc802cbf
--- /dev/null
+++ b/packages/p2p/src/components/dp2p-blocked/dp2p-blocked-checklist/index.ts
@@ -0,0 +1,4 @@
+import Dp2pBlockedChecklist from './dp2p-blocked-checklist';
+import './dp2p-blocked-checklist.scss';
+
+export default Dp2pBlockedChecklist;
diff --git a/packages/p2p/src/components/dp2p-blocked/dp2p-blocked-description.jsx b/packages/p2p/src/components/dp2p-blocked/dp2p-blocked-description.tsx
similarity index 83%
rename from packages/p2p/src/components/dp2p-blocked/dp2p-blocked-description.jsx
rename to packages/p2p/src/components/dp2p-blocked/dp2p-blocked-description.tsx
index fedfff82b7b1..a5a64e9a9522 100644
--- a/packages/p2p/src/components/dp2p-blocked/dp2p-blocked-description.jsx
+++ b/packages/p2p/src/components/dp2p-blocked/dp2p-blocked-description.tsx
@@ -1,8 +1,8 @@
-import * as React from 'react';
-import { Text } from '@deriv/components';
+import React from 'react';
 import { observer } from 'mobx-react-lite';
-import { useStores } from 'Stores';
-import { Localize } from '../i18next';
+import { Text } from '@deriv/components';
+import { Localize } from 'Components/i18next';
+import { useStores } from 'Stores/index'; //remove index when store migration to ts is done
 
 const Dp2pBlockedDescription = () => {
     const { general_store } = useStores();
@@ -26,7 +26,7 @@ const Dp2pBlockedDescription = () => {
     };
 
     return (
-        <Text className='dp2p-blocked__description' align='center' color='prominent' line_height='m' size='xs'>
+        <Text align='center' color='prominent' size='xs'>
             {getBlockedDescription()}
         </Text>
     );
diff --git a/packages/p2p/src/components/dp2p-blocked/dp2p-blocked.scss b/packages/p2p/src/components/dp2p-blocked/dp2p-blocked.scss
index cd7594a0625d..112da8c6055a 100644
--- a/packages/p2p/src/components/dp2p-blocked/dp2p-blocked.scss
+++ b/packages/p2p/src/components/dp2p-blocked/dp2p-blocked.scss
@@ -9,18 +9,4 @@
     &__title {
         margin: 2.4rem 0 1rem;
     }
-
-    &__checklist {
-        &-container {
-            margin-top: 2.4rem;
-        }
-
-        .dc-checklist__item {
-            width: 40rem;
-
-            @include mobile {
-                width: 100%;
-            }
-        }
-    }
 }
diff --git a/packages/p2p/src/components/dp2p-blocked/dp2p-blocked.jsx b/packages/p2p/src/components/dp2p-blocked/dp2p-blocked.tsx
similarity index 57%
rename from packages/p2p/src/components/dp2p-blocked/dp2p-blocked.jsx
rename to packages/p2p/src/components/dp2p-blocked/dp2p-blocked.tsx
index 3f31bf95d68e..2ebee7300ca9 100644
--- a/packages/p2p/src/components/dp2p-blocked/dp2p-blocked.jsx
+++ b/packages/p2p/src/components/dp2p-blocked/dp2p-blocked.tsx
@@ -1,14 +1,14 @@
-import * as React from 'react';
+import React from 'react';
 import { Icon, Text } from '@deriv/components';
-import Dp2pBlockedChecklist from './dp2p-blocked-checklist.jsx';
-import Dp2pBlockedDescription from './dp2p-blocked-description.jsx';
-import { Localize } from '../i18next';
+import { Localize } from 'Components/i18next';
+import Dp2pBlockedChecklist from './dp2p-blocked-checklist';
+import Dp2pBlockedDescription from './dp2p-blocked-description';
 
 const Dp2pBlocked = () => {
     return (
-        <div className='dp2p-blocked' data-testid='dp2p-Dp2pBlocked_container'>
+        <div className='dp2p-blocked' data-testid='dt_dp2p-blocked-container'>
             <Icon icon='IcCashierDp2pBlocked' size={128} />
-            <Text className='dp2p-blocked__title' color='prominent' line_height='m' size='s' weight='bold'>
+            <Text className='dp2p-blocked__title' color='prominent' weight='bold'>
                 <Localize i18n_default_text='Your Deriv P2P cashier is blocked' />
             </Text>
             <Dp2pBlockedDescription />
diff --git a/packages/p2p/src/components/dp2p-blocked/index.js b/packages/p2p/src/components/dp2p-blocked/index.ts
similarity index 56%
rename from packages/p2p/src/components/dp2p-blocked/index.js
rename to packages/p2p/src/components/dp2p-blocked/index.ts
index 78c8d0c17443..5de1075dddc8 100644
--- a/packages/p2p/src/components/dp2p-blocked/index.js
+++ b/packages/p2p/src/components/dp2p-blocked/index.ts
@@ -1,4 +1,4 @@
-import Dp2pLocked from './dp2p-blocked.jsx';
+import Dp2pLocked from './dp2p-blocked';
 import './dp2p-blocked.scss';
 
 export default Dp2pLocked;
diff --git a/packages/p2p/src/components/floating-rate/__test__/floating-rate.spec.js b/packages/p2p/src/components/floating-rate/__test__/floating-rate.spec.js
deleted file mode 100644
index dbba08886a5b..000000000000
--- a/packages/p2p/src/components/floating-rate/__test__/floating-rate.spec.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import FloatingRate from '../floating-rate.jsx';
-import { mockStore, StoreProvider } from '@deriv/stores';
-import { APIProvider } from '@deriv/api';
-
-const wrapper = ({ children }) => (
-    <APIProvider>
-        <StoreProvider store={mockStore({})}>{children}</StoreProvider>
-    </APIProvider>
-);
-
-describe('FloatingRate component', () => {
-    it('should render default state of the component with hint message and increment, decrement buttons', () => {
-        render(<FloatingRate />, { wrapper });
-        expect(screen.getByText('of the market rate')).toBeInTheDocument();
-        expect(screen.getAllByRole('button')).toHaveLength(2);
-    });
-
-    it('should display error messages when error is passed as props', () => {
-        render(<FloatingRate error_messages='Floating rate error' />, { wrapper });
-        expect(screen.getByText('Floating rate error')).toBeInTheDocument();
-    });
-
-    it('should render market rate feed based on the floating rate value passed', () => {
-        render(<FloatingRate value='+2' />, { wrapper });
-        expect(screen.getByText('Your rate is = 1.02')).toBeInTheDocument();
-    });
-
-    it('should render the exchange rate in hint', () => {
-        render(<FloatingRate fiat_currency='AED' local_currency='INR' />, { wrapper });
-        expect(screen.getByText('1 AED = 1.00')).toBeInTheDocument();
-    });
-});
diff --git a/packages/p2p/src/components/floating-rate/__test__/floating-rate.spec.tsx b/packages/p2p/src/components/floating-rate/__test__/floating-rate.spec.tsx
new file mode 100644
index 000000000000..388053116f15
--- /dev/null
+++ b/packages/p2p/src/components/floating-rate/__test__/floating-rate.spec.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { mockStore, StoreProvider } from '@deriv/stores';
+import FloatingRate from '../floating-rate';
+import { APIProvider } from '@deriv/api';
+
+const wrapper = ({ children }) => (
+    <APIProvider>
+        <StoreProvider store={mockStore({})}>{children}</StoreProvider>
+    </APIProvider>
+);
+
+describe('<FloatingRate/>', () => {
+    const floating_rate_props = {
+        change_handler: jest.fn(),
+        className: 'floating-rate',
+        data_testid: 'dt_floating_rate',
+        error_messages: '',
+        fiat_currency: 'AED',
+        local_currency: 'INR',
+        onChange: jest.fn(),
+        offset: {},
+    };
+
+    it('should render default state of the component with hint message and increment, decrement buttons', () => {
+        render(<FloatingRate {...floating_rate_props} />, { wrapper });
+
+        expect(screen.getByText('of the market rate')).toBeInTheDocument();
+        expect(screen.getAllByRole('button')).toHaveLength(2);
+    });
+
+    it('should display error messages when error is passed as props', () => {
+        render(<FloatingRate {...floating_rate_props} error_messages='Floating rate error' />, { wrapper });
+
+        expect(screen.getByText('Floating rate error')).toBeInTheDocument();
+    });
+
+    it('should render market rate feed based on the floating rate value passed', () => {
+        render(<FloatingRate {...floating_rate_props} value='+2' />, { wrapper });
+
+        expect(screen.getByText('Your rate is = 1.02 INR')).toBeInTheDocument();
+    });
+
+    it('should render the exchange rate in hint', () => {
+        render(<FloatingRate {...floating_rate_props} />, { wrapper });
+
+        expect(screen.getByText('1 AED = 1.00')).toBeInTheDocument();
+    });
+
+    it('should call onChange with the modified event object on blur', () => {
+        const onChangeMock = jest.fn();
+        render(<FloatingRate {...floating_rate_props} error_messages='' onChange={onChangeMock} />, { wrapper });
+
+        // Case 1: Value meets conditions with '+' symbol
+        const inputElement = screen.getByLabelText('Floating rate');
+        inputElement.value = '10';
+        fireEvent.blur(inputElement);
+
+        expect(onChangeMock).toHaveBeenCalledTimes(1);
+        expect(onChangeMock).toHaveBeenCalledWith(
+            expect.objectContaining({ target: expect.objectContaining({ value: '+10.00' }) })
+        );
+
+        // Case 2: Value does not meet conditions without '+' symbol
+        inputElement.value = '-5';
+        fireEvent.blur(inputElement);
+        expect(onChangeMock).toHaveBeenCalledTimes(2);
+        expect(onChangeMock).toHaveBeenCalledWith(
+            expect.objectContaining({ target: expect.objectContaining({ value: '-5.00' }) })
+        );
+    });
+});
diff --git a/packages/p2p/src/components/floating-rate/floating-rate.scss b/packages/p2p/src/components/floating-rate/floating-rate.scss
index dc25ed21dbdb..7914fe2a684f 100644
--- a/packages/p2p/src/components/floating-rate/floating-rate.scss
+++ b/packages/p2p/src/components/floating-rate/floating-rate.scss
@@ -218,3 +218,9 @@ button.dc-input-wrapper__button {
     display: flex;
     flex-direction: column;
 }
+
+.my-ads__form-field {
+    @include mobile {
+        height: auto !important;
+    }
+}
diff --git a/packages/p2p/src/components/floating-rate/floating-rate.jsx b/packages/p2p/src/components/floating-rate/floating-rate.tsx
similarity index 72%
rename from packages/p2p/src/components/floating-rate/floating-rate.jsx
rename to packages/p2p/src/components/floating-rate/floating-rate.tsx
index 014199af302a..758d1b615491 100644
--- a/packages/p2p/src/components/floating-rate/floating-rate.jsx
+++ b/packages/p2p/src/components/floating-rate/floating-rate.tsx
@@ -1,25 +1,39 @@
 import React from 'react';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
+import { setDecimalPlaces, removeTrailingZeros, percentOf, roundOffDecimal } from 'Utils/format-value';
 import { InputField, Text } from '@deriv/components';
+import { useExchangeRate, useP2PConfig } from '@deriv/hooks';
 import { formatMoney, isMobile, mobileOSDetect } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
-import { useExchangeRate, useP2PConfig } from '@deriv/hooks';
 import { localize } from 'Components/i18next';
-import { setDecimalPlaces, removeTrailingZeros, percentOf, roundOffDecimal } from 'Utils/format-value';
-import './floating-rate.scss';
+
+type TFloatingRate = {
+    change_handler?: () => void;
+    className?: string;
+    data_testid: string;
+    error_messages: string;
+    fiat_currency: string;
+    local_currency: string;
+    name?: string;
+    offset: object;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    required?: boolean;
+    value?: string;
+};
 
 const FloatingRate = ({
     change_handler,
     className,
+    data_testid,
     error_messages,
     fiat_currency,
     local_currency,
-    onChange,
+    name,
     offset,
-    data_testid,
-    ...props
-}) => {
+    onChange,
+    required,
+    value,
+}: TFloatingRate) => {
     const {
         ui: { current_focus, setCurrentFocus },
     } = useStore();
@@ -29,28 +43,28 @@ const FloatingRate = ({
     const override_exchange_rate = p2p_config?.override_exchange_rate;
     const market_rate = override_exchange_rate ? Number(override_exchange_rate) : getRate(local_currency);
     const os = mobileOSDetect();
-    const { name, value, required } = props;
     const market_feed = value ? percentOf(market_rate, value) : market_rate;
     const decimal_place = setDecimalPlaces(market_feed, 6);
 
     // Input mask for formatting value on blur of floating rate field
-    const onBlurHandler = e => {
-        let float_rate = e.target.value;
-        if (!isNaN(float_rate) && float_rate.trim().length) {
+    const onBlurHandler = (event: React.FocusEvent<HTMLInputElement>) => {
+        let float_rate = event.target.value;
+        if (!isNaN(parseFloat(float_rate)) && float_rate.trim().length) {
             float_rate = parseFloat(float_rate).toFixed(2);
-            if (/^\d+/.test(float_rate) && float_rate > 0) {
+            if (/^\d+/.test(float_rate) && parseFloat(float_rate) > 0) {
                 // Assign + symbol for positive rate
-                e.target.value = `+${float_rate}`;
+                event.target.value = `+${float_rate}`;
             } else {
-                e.target.value = float_rate;
+                event.target.value = float_rate;
             }
         }
-        onChange(e);
+        onChange(event);
     };
+
     return (
         <div className={classNames(className, 'floating-rate')}>
             <section className={classNames('floating-rate__field', { 'mobile-layout': isMobile() })}>
-                <Text as='div' size='s' weight='normal' line_height='xs' className='floating-rate__field--prefix'>
+                <Text as='div' line_height='xs' className='floating-rate__field--prefix'>
                     {localize('at')}
                 </Text>
                 <InputField
@@ -62,66 +76,50 @@ const FloatingRate = ({
                     classNameDynamicSuffix='dc-input-suffix'
                     classNameWrapper={classNames({ 'dc-input-wrapper--error': error_messages })}
                     current_focus={current_focus}
+                    data_testid={data_testid}
                     decimal_point_change={2}
                     id='floating_rate_input'
+                    increment_button_type='button'
                     inline_prefix='%'
                     is_autocomplete_disabled
                     is_float
                     is_incrementable
                     is_signed
-                    increment_button_type='button'
                     name={name}
                     onBlur={onBlurHandler}
                     onChange={change_handler}
-                    setCurrentFocus={setCurrentFocus}
                     required={required}
+                    setCurrentFocus={setCurrentFocus}
                     type={isMobile() && os !== 'iOS' ? 'tel' : 'number'}
                     value={value}
-                    data_testid={data_testid}
                 />
                 <div className='floating-rate__mkt-rate'>
                     <Text
                         as='span'
-                        size='xxs'
+                        className='floating-rate__mkt-rate--label'
                         color='hint'
-                        weight='normal'
                         line_height='xxs'
-                        className='floating-rate__mkt-rate--label'
+                        size='xxs'
                     >
                         {localize('of the market rate')}
                     </Text>
                     <Text
                         as='span'
-                        size='xxs'
+                        className='floating-rate__mkt-rate--msg'
                         color='prominent'
-                        weight='normal'
                         line_height='xs'
-                        className='floating-rate__mkt-rate--msg'
+                        size='xxs'
                     >
                         1 {fiat_currency} = {removeTrailingZeros(formatMoney(local_currency, market_rate, true, 6))}
                     </Text>
                 </div>
             </section>
             {error_messages ? (
-                <Text
-                    as='div'
-                    size='xxs'
-                    color='loss-danger'
-                    weight='normal'
-                    line_height='xs'
-                    className='floating-rate__error-message'
-                >
+                <Text as='div' className='floating-rate__error-message' color='loss-danger' line_height='xs' size='xxs'>
                     {error_messages}
                 </Text>
             ) : (
-                <Text
-                    as='div'
-                    size='xxs'
-                    color='status-info-blue'
-                    weight='normal'
-                    line_height='xs'
-                    className='floating-rate__hint'
-                >
+                <Text as='div' className='floating-rate__hint' color='status-info-blue' line_height='xs' size='xxs'>
                     {localize('Your rate is')} ={' '}
                     {removeTrailingZeros(
                         formatMoney(local_currency, roundOffDecimal(market_feed, decimal_place), true, decimal_place)
@@ -133,18 +131,4 @@ const FloatingRate = ({
     );
 };
 
-FloatingRate.propTypes = {
-    change_handler: PropTypes.func,
-    className: PropTypes.string,
-    data_testid: PropTypes.string,
-    error_messages: PropTypes.string,
-    fiat_currency: PropTypes.string,
-    local_currency: PropTypes.string,
-    name: PropTypes.string,
-    onChange: PropTypes.func,
-    offset: PropTypes.object,
-    required: PropTypes.bool,
-    value: PropTypes.string,
-};
-
 export default observer(FloatingRate);
diff --git a/packages/p2p/src/components/floating-rate/index.js b/packages/p2p/src/components/floating-rate/index.ts
similarity index 55%
rename from packages/p2p/src/components/floating-rate/index.js
rename to packages/p2p/src/components/floating-rate/index.ts
index d7cee0ed00de..96b1646b507f 100644
--- a/packages/p2p/src/components/floating-rate/index.js
+++ b/packages/p2p/src/components/floating-rate/index.ts
@@ -1,4 +1,4 @@
-import FloatingRate from './floating-rate.jsx';
+import FloatingRate from './floating-rate';
 import './floating-rate.scss';
 
 export default FloatingRate;
diff --git a/packages/p2p/src/components/form/error.jsx b/packages/p2p/src/components/form/error.jsx
deleted file mode 100644
index e794e19432a0..000000000000
--- a/packages/p2p/src/components/form/error.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './form.scss';
-import { Text } from '@deriv/components';
-
-const FormSubmitErrorMessage = ({ message }) => (
-    <Text as='p' color='loss-danger' size='xxs' className='dp2p-form-error'>
-        {message}
-    </Text>
-);
-
-FormSubmitErrorMessage.propTypes = {
-    message: PropTypes.string,
-};
-
-export default FormSubmitErrorMessage;
diff --git a/packages/p2p/src/components/form/form.scss b/packages/p2p/src/components/form/form.scss
deleted file mode 100644
index 1902ccded764..000000000000
--- a/packages/p2p/src/components/form/form.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.dp2p-form-error {
-    margin-right: auto;
-    padding-right: 0.8rem;
-}
diff --git a/packages/p2p/src/components/i18next/index.js b/packages/p2p/src/components/i18next/index.ts
similarity index 89%
rename from packages/p2p/src/components/i18next/index.js
rename to packages/p2p/src/components/i18next/index.ts
index 124a68abb48c..53b0bcdd5eb2 100644
--- a/packages/p2p/src/components/i18next/index.js
+++ b/packages/p2p/src/components/i18next/index.ts
@@ -21,7 +21,7 @@ import zh_tw from 'Translations/zh_tw.json';
 const DEFAULT_LANGUAGE = 'EN';
 let CURRENT_LANGUAGE = 'EN';
 
-export const setLanguage = lang => {
+export const setLanguage = (lang: string) => {
     CURRENT_LANGUAGE = lang || DEFAULT_LANGUAGE;
     i18n.changeLanguage(lang);
 };
@@ -48,7 +48,7 @@ const i18n_config = {
         ZH_TW: { translations: { ...zh_tw } },
     },
     react: {
-        hashTransKey(defaultValue) {
+        hashTransKey(defaultValue: string) {
             return crc32(defaultValue);
         },
     },
@@ -64,9 +64,9 @@ i18n.use(initReactI18next) // passes i18n down to react-i18next
 // <Localize /> component wrapped with i18n
 export const Localize = withI18n(i18n);
 
-export const localize = (string, values) => {
+export const localize = <T extends object>(string: string, values?: T) => {
     if (!string) return '';
-    return i18n.t(crc32(string), { defaultValue: string, ...values });
+    return i18n.t(crc32(string).toString(), { defaultValue: string, ...values });
 };
 
 export default i18n;
diff --git a/packages/p2p/src/components/misc/__test__/animation-wrapper.spec.js b/packages/p2p/src/components/misc/__test__/animation-wrapper.spec.js
deleted file mode 100644
index 029fb2b7dd54..000000000000
--- a/packages/p2p/src/components/misc/__test__/animation-wrapper.spec.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-import { isMobile } from '@deriv/shared';
-import { render, screen } from '@testing-library/react';
-import AnimationWrapper from '../animation-wrapper.jsx';
-
-jest.mock('react-transition-group', () => ({
-    ...jest.requireActual('react-transition-group'),
-    CSSTransition: jest.fn(({ children }) => <div data-testid='css-transition'>{children}</div>),
-}));
-
-jest.mock('@deriv/shared', () => ({
-    ...jest.requireActual('@deriv/shared'),
-    isMobile: jest.fn().mockReturnValue(false),
-}));
-
-describe('<AnimationWrapper/>', () => {
-    it('renders the children component in desktop view', () => {
-        render(
-            <AnimationWrapper>
-                <div>Desktop View</div>
-            </AnimationWrapper>
-        );
-
-        expect(screen.queryByTestId('css-transition')).not.toBeInTheDocument();
-        expect(screen.getByText('Desktop View')).toBeInTheDocument();
-    });
-
-    it('renders the children component in desktop view', () => {
-        isMobile.mockReturnValue(true);
-        render(
-            <AnimationWrapper>
-                <div>Mobile View</div>
-            </AnimationWrapper>
-        );
-
-        expect(screen.queryByTestId('css-transition')).toBeInTheDocument();
-        expect(screen.getByText('Mobile View')).toBeInTheDocument();
-    });
-});
diff --git a/packages/p2p/src/components/misc/animation-wrapper.jsx b/packages/p2p/src/components/misc/animation-wrapper.jsx
deleted file mode 100644
index 81deb85c6c89..000000000000
--- a/packages/p2p/src/components/misc/animation-wrapper.jsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { CSSTransition } from 'react-transition-group';
-import { isMobile } from '@deriv/shared';
-import './animation-wrapper.scss';
-
-const AnimationWrapper = ({ children, is_visible, onEntered, onExit }) => {
-    if (isMobile()) {
-        return (
-            <CSSTransition
-                in={is_visible}
-                timeout={250}
-                classNames='animation-wrapper'
-                onExit={onExit}
-                onEntered={onEntered}
-            >
-                {children}
-            </CSSTransition>
-        );
-    }
-
-    return children;
-};
-
-AnimationWrapper.propTypes = {
-    children: PropTypes.any,
-    is_visible: PropTypes.bool,
-    onEntered: PropTypes.func,
-    onExit: PropTypes.func,
-};
-
-export default AnimationWrapper;
diff --git a/packages/p2p/src/components/misc/animation-wrapper.scss b/packages/p2p/src/components/misc/animation-wrapper.scss
deleted file mode 100644
index 7c59a96e8378..000000000000
--- a/packages/p2p/src/components/misc/animation-wrapper.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-.animation-wrapper {
-    &-enter {
-        transform: scale3d(1, 0, 1);
-        opacity: 0;
-
-        &-done {
-            transform: scale3d(1, 1, 1);
-            opacity: 1;
-        }
-    }
-    &-exit {
-        transform: scale3d(1, 1, 1);
-        opacity: 1;
-
-        &-done {
-            display: none;
-            transform: scale3d(1, 0, 1);
-            opacity: 0;
-            height: 0px;
-        }
-    }
-}
diff --git a/packages/p2p/src/components/misc/toggle-container.jsx b/packages/p2p/src/components/misc/toggle-container.jsx
deleted file mode 100644
index 60339d157963..000000000000
--- a/packages/p2p/src/components/misc/toggle-container.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import './toggle-container.scss';
-
-const ToggleContainer = ({ children }) => <div className='p2p-toggle-container'>{children}</div>;
-
-ToggleContainer.propTypes = {
-    children: PropTypes.any,
-};
-
-export default ToggleContainer;
diff --git a/packages/p2p/src/components/modal-manager/modals/ad-error-tooltip-modal/ad-error-tooltip-modal.jsx b/packages/p2p/src/components/modal-manager/modals/ad-error-tooltip-modal/ad-error-tooltip-modal.jsx
index 48389602f2af..9e71ff900f40 100644
--- a/packages/p2p/src/components/modal-manager/modals/ad-error-tooltip-modal/ad-error-tooltip-modal.jsx
+++ b/packages/p2p/src/components/modal-manager/modals/ad-error-tooltip-modal/ad-error-tooltip-modal.jsx
@@ -10,7 +10,7 @@ const AdErrorTooltipModal = () => {
     const { hideModal, is_modal_open } = useModalManagerContext();
 
     return (
-        <Modal className='p2p-my-ads__modal-error' is_open={is_modal_open} small has_close_icon={false}>
+        <Modal className='ad-error-tooltip-modal' is_open={is_modal_open} small has_close_icon={false}>
             <Modal.Body>
                 <Text as='p' color='prominent' size='xs'>
                     <Localize
diff --git a/packages/p2p/src/components/modal-manager/modals/ad-error-tooltip-modal/ad-error-tooltip-modal.scss b/packages/p2p/src/components/modal-manager/modals/ad-error-tooltip-modal/ad-error-tooltip-modal.scss
new file mode 100644
index 000000000000..88903c2bdd7f
--- /dev/null
+++ b/packages/p2p/src/components/modal-manager/modals/ad-error-tooltip-modal/ad-error-tooltip-modal.scss
@@ -0,0 +1,17 @@
+.ad-error-tooltip-modal {
+    &--form {
+        height: fit-content !important;
+    }
+    .dc-modal-header__title--add-error-tooltip-modal {
+        padding: 2.4rem 2.4rem 0 !important;
+    }
+    .dc-modal__container_add-error-tooltip-modal {
+        .dc-modal-footer {
+            padding-top: 0 !important;
+        }
+
+        .dc-modal-header {
+            padding-bottom: 1rem;
+        }
+    }
+}
diff --git a/packages/p2p/src/components/modal-manager/modals/ad-error-tooltip-modal/index.js b/packages/p2p/src/components/modal-manager/modals/ad-error-tooltip-modal/index.js
index 57574a78e567..97fd80000874 100644
--- a/packages/p2p/src/components/modal-manager/modals/ad-error-tooltip-modal/index.js
+++ b/packages/p2p/src/components/modal-manager/modals/ad-error-tooltip-modal/index.js
@@ -1,3 +1,4 @@
 import AdErrorTooltipModal from './ad-error-tooltip-modal';
+import './ad-error-tooltip-modal.scss';
 
 export default AdErrorTooltipModal;
diff --git a/packages/p2p/src/components/modal-manager/modals/ad-visibility-error-modal/ad-visibility-error-modal.jsx b/packages/p2p/src/components/modal-manager/modals/ad-visibility-error-modal/ad-visibility-error-modal.jsx
index ba8fb2d85168..98e7ff97a47a 100644
--- a/packages/p2p/src/components/modal-manager/modals/ad-visibility-error-modal/ad-visibility-error-modal.jsx
+++ b/packages/p2p/src/components/modal-manager/modals/ad-visibility-error-modal/ad-visibility-error-modal.jsx
@@ -13,7 +13,7 @@ const AdVisibilityErrorModal = ({ error_code }) => {
     if (error_code === api_error_codes.AD_EXCEEDS_BALANCE) {
         return (
             <Modal
-                className='p2p-my-ads__modal-error'
+                className='ad-visibility-error-modal'
                 is_open={is_modal_open}
                 small
                 has_close_icon={false}
@@ -35,7 +35,7 @@ const AdVisibilityErrorModal = ({ error_code }) => {
     } else if (error_code === api_error_codes.AD_EXCEEDS_DAILY_LIMIT) {
         return (
             <Modal
-                className='p2p-my-ads__modal-error'
+                className='ad-visibility-error-modal'
                 is_open={is_modal_open}
                 small
                 has_close_icon={false}
@@ -70,7 +70,7 @@ const AdVisibilityErrorModal = ({ error_code }) => {
     }
     return (
         <Modal
-            className='p2p-my-ads__modal-error'
+            className='ad-visibility-error-modal'
             is_open={is_modal_open}
             small
             has_close_icon={false}
diff --git a/packages/p2p/src/components/modal-manager/modals/ad-visibility-error-modal/ad-visibility-error-modal.scss b/packages/p2p/src/components/modal-manager/modals/ad-visibility-error-modal/ad-visibility-error-modal.scss
new file mode 100644
index 000000000000..5faa62fe8449
--- /dev/null
+++ b/packages/p2p/src/components/modal-manager/modals/ad-visibility-error-modal/ad-visibility-error-modal.scss
@@ -0,0 +1,17 @@
+.ad-visibility-error-modal {
+    &--form {
+        height: fit-content !important;
+    }
+    .dc-modal-header__title--add-visibility-error-modal {
+        padding: 2.4rem 2.4rem 0 !important;
+    }
+    .dc-modal__container_add-visibility-error-modal {
+        .dc-modal-footer {
+            padding-top: 0 !important;
+        }
+
+        .dc-modal-header {
+            padding-bottom: 1rem;
+        }
+    }
+}
diff --git a/packages/p2p/src/components/modal-manager/modals/ad-visibility-error-modal/index.js b/packages/p2p/src/components/modal-manager/modals/ad-visibility-error-modal/index.js
index 7c7ac451d8aa..e053e9566589 100644
--- a/packages/p2p/src/components/modal-manager/modals/ad-visibility-error-modal/index.js
+++ b/packages/p2p/src/components/modal-manager/modals/ad-visibility-error-modal/index.js
@@ -1,3 +1,4 @@
 import AdVisibilityErrorModal from './ad-visibility-error-modal';
+import './ad-visibility-error-modal.scss';
 
 export default AdVisibilityErrorModal;
diff --git a/packages/p2p/src/components/modal-manager/modals/block-user-modal/block-user-modal.jsx b/packages/p2p/src/components/modal-manager/modals/block-user-modal/block-user-modal.jsx
index c353c7484909..477e41b1a7e2 100644
--- a/packages/p2p/src/components/modal-manager/modals/block-user-modal/block-user-modal.jsx
+++ b/packages/p2p/src/components/modal-manager/modals/block-user-modal/block-user-modal.jsx
@@ -17,7 +17,7 @@ const BlockUserModal = ({ advertiser_name, is_advertiser_blocked, onCancel, onSu
             is_open={is_modal_open && !general_store.block_unblock_user_error}
             small
             title={
-                <Text color='prominent' size='s' weight='bold'>
+                <Text color='prominent' weight='bold'>
                     {is_advertiser_blocked ? (
                         <Localize
                             i18n_default_text='Unblock {{advertiser_name}}?'
diff --git a/packages/p2p/src/components/modal-manager/modals/buy-sell-modal/buy-sell-modal.jsx b/packages/p2p/src/components/modal-manager/modals/buy-sell-modal/buy-sell-modal.jsx
index 9f81c54102fb..81e422f80ff1 100644
--- a/packages/p2p/src/components/modal-manager/modals/buy-sell-modal/buy-sell-modal.jsx
+++ b/packages/p2p/src/components/modal-manager/modals/buy-sell-modal/buy-sell-modal.jsx
@@ -20,17 +20,17 @@ import { useHistory, useLocation } from 'react-router-dom';
 import { buy_sell } from 'Constants/buy-sell';
 import { localize, Localize } from 'Components/i18next';
 import { useStores } from 'Stores';
-import BuySellForm from 'Components/buy-sell/buy-sell-form.jsx';
-import BuySellFormReceiveAmount from 'Components/buy-sell/buy-sell-form-receive-amount.jsx';
+import BuySellForm from 'Pages/buy-sell/buy-sell-form.jsx';
+import BuySellFormReceiveAmount from 'Pages/buy-sell/buy-sell-form-receive-amount.jsx';
 import NicknameForm from 'Components/nickname-form';
-import AddPaymentMethodForm from 'Components/my-profile/payment-methods/add-payment-method/add-payment-method-form.jsx';
+import AddPaymentMethodForm from 'Pages/my-profile/payment-methods/add-payment-method/add-payment-method-form.jsx';
 import { api_error_codes } from 'Constants/api-error-codes';
 import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
 
 const LowBalanceMessage = () => (
-    <div className='buy-sell__modal--error-message'>
+    <div className='buy-sell-modal--error-message'>
         <HintBox
-            className='buy-sell__modal-danger'
+            className='buy-sell-modal--danger'
             icon='IcAlertDanger'
             message={
                 <Text as='p' size='xxxs' color='prominent' line_height='s'>
@@ -49,7 +49,7 @@ const BuySellModalFooter = ({ onCancel, is_submit_disabled, onSubmit }) => {
             className={
                 my_profile_store.should_show_add_payment_method_form
                     ? 'add-payment-method__footer'
-                    : 'buy-sell__modal-footer'
+                    : 'buy-sell-modal__footer'
             }
         >
             <Button.Group>
@@ -94,7 +94,7 @@ const BuySellModalTitle = () => {
                                 my_profile_store.setShouldShowAddPaymentMethodForm(false);
                             }
                         }}
-                        className='buy-sell__modal-icon'
+                        className='buy-sell-modal__icon'
                     />
                     {localize('Add payment method')}
                 </React.Fragment>
@@ -115,7 +115,6 @@ const BuySellModal = () => {
     const [is_submit_disabled, setIsSubmitDisabled] = useSafeState(true);
     const [is_account_balance_low, setIsAccountBalanceLow] = React.useState(false);
     const [has_rate_changed_recently, setHasRateChangedRecently] = React.useState(false);
-    const MAX_ALLOWED_RATE_CHANGED_WARNING_DELAY = 2000;
     const { hideModal, is_modal_open, showModal } = useModalManagerContext();
     const history = useHistory();
     const location = useLocation();
@@ -130,9 +129,6 @@ const BuySellModal = () => {
                 const is_the_same_advert = previous_advert?.id === new_advert.id;
                 if (rate_has_changed && is_the_same_advert) {
                     setHasRateChangedRecently(true);
-                    setTimeout(() => {
-                        setHasRateChangedRecently(false);
-                    }, MAX_ALLOWED_RATE_CHANGED_WARNING_DELAY);
                 }
             }
         );
@@ -167,14 +163,15 @@ const BuySellModal = () => {
         } else {
             showModal({ key: 'MarketRateChangeErrorModal' });
         }
+        setHasRateChangedRecently(false);
     };
 
     const BuySellFormError = () => {
         if (!!error_message && buy_sell_store.form_error_code !== api_error_codes.ORDER_CREATE_FAIL_RATE_CHANGED) {
             return (
-                <div className='buy-sell__modal--error-message'>
+                <div className='buy-sell-modal--error-message'>
                     <HintBox
-                        className='buy-sell__modal-danger'
+                        className='buy-sell-modal--danger'
                         icon='IcAlertDanger'
                         message={
                             <Text as='p' size='xxxs' color='prominent' line_height='s'>
@@ -205,6 +202,7 @@ const BuySellModal = () => {
         } else {
             hideModal();
             buy_sell_store.fetchAdvertiserAdverts();
+            buy_sell_store.unsubscribeAdvertInfo();
         }
     };
 
@@ -249,12 +247,12 @@ const BuySellModal = () => {
         <React.Fragment>
             <MobileWrapper>
                 <MobileFullPageModal
-                    body_className='buy-sell__modal-body'
-                    className='buy-sell__modal'
+                    body_className='buy-sell-modal__body'
+                    className='buy-sell-modal'
                     height_offset='80px'
                     is_flex
                     is_modal_open={is_modal_open}
-                    page_header_className='buy-sell__modal-header'
+                    page_header_className='buy-sell-modal__header'
                     page_header_text={<BuySellModalTitle />}
                     pageHeaderReturnFn={onCancel}
                 >
@@ -280,7 +278,7 @@ const BuySellModal = () => {
                             <BuySellModalFooter
                                 is_submit_disabled={is_submit_disabled}
                                 onCancel={onCancel}
-                                onSubmit={submitForm.current}
+                                onSubmit={onSubmit}
                             />
                         </React.Fragment>
                     )}
@@ -288,8 +286,8 @@ const BuySellModal = () => {
             </MobileWrapper>
             <DesktopWrapper>
                 <Modal
-                    className={classNames('buy-sell__modal', {
-                        'buy-sell__modal-form': my_profile_store.should_show_add_payment_method_form,
+                    className={classNames('buy-sell-modal', {
+                        'buy-sell-modal__form': my_profile_store.should_show_add_payment_method_form,
                     })}
                     height={buy_sell_store.table_type === buy_sell.BUY ? 'auto' : '649px'}
                     width='456px'
@@ -302,7 +300,7 @@ const BuySellModal = () => {
                     <ThemedScrollbars
                         height={buy_sell_store.table_type === buy_sell.BUY ? '100%' : 'calc(100% - 5.8rem - 7.4rem)'}
                     >
-                        <Modal.Body className='buy-sell__modal--layout'>
+                        <Modal.Body className='buy-sell-modal__layout'>
                             {buy_sell_store.table_type === buy_sell.SELL && is_account_balance_low && (
                                 <LowBalanceMessage />
                             )}
diff --git a/packages/p2p/src/components/modal-manager/modals/buy-sell-modal/buy-sell-modal.scss b/packages/p2p/src/components/modal-manager/modals/buy-sell-modal/buy-sell-modal.scss
index 12455d7c2648..6b1b5c0020b0 100644
--- a/packages/p2p/src/components/modal-manager/modals/buy-sell-modal/buy-sell-modal.scss
+++ b/packages/p2p/src/components/modal-manager/modals/buy-sell-modal/buy-sell-modal.scss
@@ -1,4 +1,4 @@
-.buy-sell__modal {
+.buy-sell-modal {
     opacity: 1 !important;
 
     @include mobile {
@@ -7,7 +7,7 @@
         }
     }
 
-    &-body {
+    &__body {
         position: relative;
         display: block;
         padding-top: 2.4rem;
@@ -19,10 +19,19 @@
         }
     }
 
-    &-danger {
-        margin-bottom: 1.6rem;
-        width: fit-content;
-        align-items: flex-start;
+    &__footer {
+        @include mobile {
+            border-top: 2px solid var(--general-section-1);
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-end;
+            margin-top: auto;
+            padding: 1.6rem;
+        }
+    }
+
+    &__layout {
+        padding: unset;
     }
 
     &-field {
@@ -80,50 +89,10 @@
         }
     }
 
-    &-form {
+    &__form {
         height: fit-content !important;
     }
 
-    &-footer {
-        @include mobile {
-            border-top: 2px solid var(--general-section-1);
-            display: flex;
-            flex-direction: row;
-            justify-content: flex-end;
-            margin-top: auto;
-            padding: 1.6rem;
-        }
-    }
-
-    &--input {
-        display: flex;
-        gap: 2rem;
-        flex-direction: column;
-        padding: 0 2.4rem 2rem;
-        margin-bottom: 2rem;
-        .dc-input__wrapper {
-            margin-right: 0.2rem;
-            margin-bottom: unset;
-        }
-
-        &-field {
-            @include desktop() {
-                display: flex;
-            }
-        }
-        @include mobile {
-            .dc-input {
-                &__container {
-                    width: 100%;
-                    padding: 0.5rem 1rem 0.5rem 1.2rem;
-                }
-                &__wrapper {
-                    margin: 0.8rem 0.2rem 1.4rem 0;
-                }
-            }
-        }
-    }
-
     &-hintbox {
         margin: -0.5rem 0 2.4rem;
         padding: 0 2.4rem;
@@ -135,7 +104,7 @@
         }
     }
 
-    &-icon {
+    &__icon {
         margin-right: 0.8rem;
     }
 
@@ -172,11 +141,38 @@
         }
     }
 
-    &-receive-amount {
+    &--danger {
+        margin-bottom: 1.6rem;
+        width: fit-content;
+        align-items: flex-start;
+    }
+
+    &--input {
+        display: flex;
+        gap: 2rem;
+        flex-direction: column;
+        padding: 0 2.4rem 2rem;
+        margin-bottom: 2rem;
+        .dc-input__wrapper {
+            margin-right: 0.2rem;
+            margin-bottom: unset;
+        }
+
+        &-field {
+            @include desktop {
+                display: flex;
+            }
+        }
         @include mobile {
-            border-top: 1px solid var(--general-section-2);
-            padding: 0.8rem 1.6rem;
-            background-color: var(--general-main-1);
+            .dc-input {
+                &__container {
+                    width: 100%;
+                    padding: 0.5rem 1rem 0.5rem 1.2rem;
+                }
+                &__wrapper {
+                    margin: 0.8rem 0.2rem 1.4rem 0;
+                }
+            }
         }
     }
 
@@ -217,22 +213,18 @@
         }
     }
 
-    &--layout {
-        padding: unset;
-    }
-
     &--error-message {
         padding: 0 2.4rem;
     }
 }
 
-.buy-sell__modal-content {
+.buy-sell-modal__content {
     .dc-input {
         margin-bottom: unset;
     }
 }
-.dc-modal__container_buy-sell__modal {
-    .dc-modal-header--buy-sell__modal {
+.dc-modal__container_buy-sell-modal {
+    .dc-modal-header--buy-sell-modal {
         border-bottom: 2px solid var(--general-section-5);
     }
 
diff --git a/packages/p2p/src/components/modal-manager/modals/cancel-add-payment-method-modal.jsx b/packages/p2p/src/components/modal-manager/modals/cancel-add-payment-method-modal.jsx
index fe6a34351d6e..807d7004f4ad 100644
--- a/packages/p2p/src/components/modal-manager/modals/cancel-add-payment-method-modal.jsx
+++ b/packages/p2p/src/components/modal-manager/modals/cancel-add-payment-method-modal.jsx
@@ -15,7 +15,7 @@ const CancelAddPaymentMethodModal = ({ onCancel, should_hide_all_modals_on_cance
             is_open={is_modal_open}
             small
             title={
-                <Text color='prominent' size='s' weight='bold'>
+                <Text color='prominent' weight='bold'>
                     <Localize i18n_default_text='Cancel adding this payment method?' />
                 </Text>
             }
diff --git a/packages/p2p/src/components/modal-manager/modals/cancel-edit-payment-method-modal.jsx b/packages/p2p/src/components/modal-manager/modals/cancel-edit-payment-method-modal.jsx
index b115ec8b4de0..ff86b1fe2a48 100644
--- a/packages/p2p/src/components/modal-manager/modals/cancel-edit-payment-method-modal.jsx
+++ b/packages/p2p/src/components/modal-manager/modals/cancel-edit-payment-method-modal.jsx
@@ -15,7 +15,7 @@ const CancelEditPaymentMethodModal = () => {
             is_open={is_modal_open}
             small
             title={
-                <Text color='prominent' size='s' weight='bold'>
+                <Text color='prominent' weight='bold'>
                     <Localize i18n_default_text='Cancel your edits?' />
                 </Text>
             }
diff --git a/packages/p2p/src/components/modal-manager/modals/create-ad-add-payment-method-modal/create-ad-add-payment-method-modal.jsx b/packages/p2p/src/components/modal-manager/modals/create-ad-add-payment-method-modal/create-ad-add-payment-method-modal.jsx
index 3a76fa98060b..1c4db07c3972 100644
--- a/packages/p2p/src/components/modal-manager/modals/create-ad-add-payment-method-modal/create-ad-add-payment-method-modal.jsx
+++ b/packages/p2p/src/components/modal-manager/modals/create-ad-add-payment-method-modal/create-ad-add-payment-method-modal.jsx
@@ -5,7 +5,7 @@ import { Button, Icon, MobileFullPageModal, Modal } from '@deriv/components';
 import { isMobile } from '@deriv/shared';
 import { useStores } from 'Stores';
 import { localize, Localize } from 'Components/i18next';
-import AddPaymentMethod from 'Components/my-profile/payment-methods/add-payment-method/add-payment-method.jsx';
+import AddPaymentMethod from 'Pages/my-profile/payment-methods/add-payment-method/add-payment-method.jsx';
 import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
 
 const CreateAdAddPaymentMethodModal = () => {
@@ -30,8 +30,8 @@ const CreateAdAddPaymentMethodModal = () => {
     if (isMobile()) {
         return (
             <MobileFullPageModal
-                body_className={classNames('p2p-my-ads__modal-body', {
-                    'p2p-my-ads__modal-body--form': my_profile_store.selected_payment_method,
+                body_className={classNames('create-ad-add-payment-method-modal__body', {
+                    'create-ad-add-payment-method-modal__body--form': my_profile_store.selected_payment_method,
                 })}
                 height_offset='80px'
                 is_flex
@@ -47,22 +47,28 @@ const CreateAdAddPaymentMethodModal = () => {
 
     return (
         <Modal
-            className={classNames('p2p-my-ads__modal-error', {
-                'p2p-my-ads__modal-form': my_profile_store.selected_payment_method,
+            className={classNames('create-ad-add-payment-method-modal__error', {
+                'create-ad-add-payment-method-modal__error--form': my_profile_store.selected_payment_method,
             })}
             has_close_icon
             height='560px'
             is_open={is_modal_open}
             title={
                 <React.Fragment>
-                    <Icon icon='icArrowLeftBold' onClick={onCancel} className='p2p-my-ads__modal-icon' />
+                    <Icon
+                        icon='icArrowLeftBold'
+                        onClick={onCancel}
+                        className='create-ad-add-payment-method-modal__icon'
+                    />
                     {localize('Add payment method')}
                 </React.Fragment>
             }
             toggleModal={onCancel}
         >
             <Modal.Body
-                className={classNames({ 'p2p-my-ads__modal-body--scroll': my_profile_store.selected_payment_method })}
+                className={classNames({
+                    'create-ad-add-payment-method-modal__body--scroll': my_profile_store.selected_payment_method,
+                })}
             >
                 <AddPaymentMethod should_show_page_return={false} should_show_separated_footer={true} />
             </Modal.Body>
diff --git a/packages/p2p/src/components/modal-manager/modals/create-ad-add-payment-method-modal/create-ad-add-payment-method-modal.scss b/packages/p2p/src/components/modal-manager/modals/create-ad-add-payment-method-modal/create-ad-add-payment-method-modal.scss
index 075e8349b7ae..d3d30aa3e9d8 100644
--- a/packages/p2p/src/components/modal-manager/modals/create-ad-add-payment-method-modal/create-ad-add-payment-method-modal.scss
+++ b/packages/p2p/src/components/modal-manager/modals/create-ad-add-payment-method-modal/create-ad-add-payment-method-modal.scss
@@ -1,61 +1,44 @@
-.p2p-my-ads {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-
-    @include mobile {
-        .page-return {
-            border-bottom: 2px solid var(--general-section-1);
-            margin: 1rem 0;
-            padding: 0 1.6rem 1.6rem;
+.create-ad-add-payment-method-modal {
+    &__body {
+        display: flex;
+        flex-direction: column;
+        padding: 1rem 1.6rem 0;
+        width: 100vw;
+
+        &--form {
+            padding: 1rem 0 0;
         }
 
-        .dc-list {
-            margin-left: 1vw;
-            width: 88vw;
-
-            &__item {
-                padding-top: 0.4rem;
-            }
+        &--scroll {
+            overflow: auto;
+            padding: 0;
         }
-        .dc-mobile-full-page-modal {
-            opacity: 1 !important;
+
+        &--horizontal {
+            padding-right: 0rem;
         }
     }
 
-    &__modal {
-        &-body {
-            display: flex;
-            flex-direction: column;
-            padding: 1rem 1.6rem 0;
-            width: 100vw;
-
-            &--scroll {
-                overflow: auto;
-            }
-
-            &--horizontal {
-                padding-right: 0rem;
-            }
+    &__error {
+        &--form {
+            height: fit-content !important;
         }
 
-        &-error {
-            .dc-modal-header__title--p2p-my-ads__modal-error {
-                padding: 2.4rem 2.4rem 0 !important;
+        .dc-modal-header__title--create-ad-add-payment-method-modal__error {
+            padding: 2.4rem 2.4rem 0 !important;
+        }
+        .dc-modal__container_create-ad-add-payment-method-modal__error {
+            .dc-modal-footer {
+                padding-top: 0 !important;
             }
-            .dc-modal__container_p2p-my-ads__modal-error {
-                .dc-modal-footer {
-                    padding-top: 0 !important;
-                }
 
-                .dc-modal-header {
-                    padding-bottom: 1rem;
-                }
+            .dc-modal-header {
+                padding-bottom: 1rem;
             }
         }
+    }
 
-        &-icon {
-            margin-right: 0.8rem;
-        }
+    &__icon {
+        margin-right: 0.8rem;
     }
 }
diff --git a/packages/p2p/src/components/modal-manager/modals/create-ad-error-modal/create-ad-error-modal.jsx b/packages/p2p/src/components/modal-manager/modals/create-ad-error-modal/create-ad-error-modal.jsx
index beeab340f29a..34f5fa2ba310 100644
--- a/packages/p2p/src/components/modal-manager/modals/create-ad-error-modal/create-ad-error-modal.jsx
+++ b/packages/p2p/src/components/modal-manager/modals/create-ad-error-modal/create-ad-error-modal.jsx
@@ -13,7 +13,7 @@ const CreateAdErrorModal = () => {
     if (my_ads_store.error_code === api_error_codes.DUPLICATE_ADVERT) {
         return (
             <Modal
-                className='p2p-my-ads__modal-error'
+                className='create-ad-error-modal'
                 is_open={is_modal_open}
                 small
                 has_close_icon={false}
@@ -32,7 +32,7 @@ const CreateAdErrorModal = () => {
     } else if (my_ads_store.error_code === api_error_codes.ADVERT_SAME_LIMITS) {
         return (
             <Modal
-                className='p2p-my-ads__modal-error'
+                className='create-ad-error-modal'
                 is_open={is_modal_open}
                 small
                 has_close_icon={false}
@@ -51,7 +51,7 @@ const CreateAdErrorModal = () => {
     }
     return (
         <Modal
-            className='p2p-my-ads__modal-error'
+            className='create-ad-error-modal'
             is_open={is_modal_open}
             small
             has_close_icon={false}
diff --git a/packages/p2p/src/components/modal-manager/modals/create-ad-error-modal/create-ad-error-modal.scss b/packages/p2p/src/components/modal-manager/modals/create-ad-error-modal/create-ad-error-modal.scss
new file mode 100644
index 000000000000..921c783d401f
--- /dev/null
+++ b/packages/p2p/src/components/modal-manager/modals/create-ad-error-modal/create-ad-error-modal.scss
@@ -0,0 +1,17 @@
+.create-ad-error-modal {
+    &--form {
+        height: fit-content !important;
+    }
+    .dc-modal-header__title--create-ad-error-modal {
+        padding: 2.4rem 2.4rem 0 !important;
+    }
+    .dc-modal__container_create-ad-error-modal {
+        .dc-modal-footer {
+            padding-top: 0 !important;
+        }
+
+        .dc-modal-header {
+            padding-bottom: 1rem;
+        }
+    }
+}
diff --git a/packages/p2p/src/components/modal-manager/modals/create-ad-error-modal/index.js b/packages/p2p/src/components/modal-manager/modals/create-ad-error-modal/index.js
index 545e8d929d14..6e8383072365 100644
--- a/packages/p2p/src/components/modal-manager/modals/create-ad-error-modal/index.js
+++ b/packages/p2p/src/components/modal-manager/modals/create-ad-error-modal/index.js
@@ -1,3 +1,4 @@
 import CreateAdErrorModal from './create-ad-error-modal.jsx';
+import './create-ad-error-modal.scss';
 
 export default CreateAdErrorModal;
diff --git a/packages/p2p/src/components/modal-manager/modals/currency-selector-modal/currency-selector-modal.jsx b/packages/p2p/src/components/modal-manager/modals/currency-selector-modal/currency-selector-modal.jsx
index f6ed41f0fc4a..4753cc6494dd 100644
--- a/packages/p2p/src/components/modal-manager/modals/currency-selector-modal/currency-selector-modal.jsx
+++ b/packages/p2p/src/components/modal-manager/modals/currency-selector-modal/currency-selector-modal.jsx
@@ -3,7 +3,7 @@ import { MobileFullPageModal } from '@deriv/components';
 import { useStores } from 'Stores';
 import { observer } from 'mobx-react-lite';
 import { localize } from 'Components/i18next';
-import CurrencySelector from 'Components/buy-sell/currency-selector/currency-selector';
+import CurrencySelector from 'Pages/buy-sell/currency-selector/currency-selector';
 import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
 
 const CurrencySelectorModal = () => {
diff --git a/packages/p2p/src/components/modal-manager/modals/currency-selector-modal/index.js b/packages/p2p/src/components/modal-manager/modals/currency-selector-modal/index.js
index 2d7fe249df99..35b8ffe3fbac 100644
--- a/packages/p2p/src/components/modal-manager/modals/currency-selector-modal/index.js
+++ b/packages/p2p/src/components/modal-manager/modals/currency-selector-modal/index.js
@@ -1,4 +1,3 @@
 import CurrencySelectorModal from './currency-selector-modal';
-import './currency-selector.scss';
 
 export default CurrencySelectorModal;
diff --git a/packages/p2p/src/components/modal-manager/modals/email-link-blocked-modal/email-link-blocked-modal.jsx b/packages/p2p/src/components/modal-manager/modals/email-link-blocked-modal/email-link-blocked-modal.jsx
index 9fd9c5d60f3c..04e90769bcbd 100644
--- a/packages/p2p/src/components/modal-manager/modals/email-link-blocked-modal/email-link-blocked-modal.jsx
+++ b/packages/p2p/src/components/modal-manager/modals/email-link-blocked-modal/email-link-blocked-modal.jsx
@@ -15,10 +15,10 @@ const EmailLinkBlockedModal = ({
         <Modal has_close_icon is_open={is_modal_open} renderTitle={() => <></>} toggleModal={hideModal} width='440px'>
             <Modal.Body className='email-link-blocked-modal'>
                 <Icon icon='IcEmailVerificationLinkBlocked' size='128' />
-                <Text className='email-link-blocked-modal--text' color='prominent' size='s' weight='bold'>
+                <Text className='email-link-blocked-modal__text' color='prominent' weight='bold'>
                     <Localize i18n_default_text='Too many failed attempts' />
                 </Text>
-                <Text align='center' color='prominent' size='s'>
+                <Text align='center' color='prominent'>
                     {email_link_blocked_modal_error_message}
                 </Text>
             </Modal.Body>
diff --git a/packages/p2p/src/components/modal-manager/modals/email-link-blocked-modal/email-link-blocked-modal.scss b/packages/p2p/src/components/modal-manager/modals/email-link-blocked-modal/email-link-blocked-modal.scss
index 975c829f0532..99620511e999 100644
--- a/packages/p2p/src/components/modal-manager/modals/email-link-blocked-modal/email-link-blocked-modal.scss
+++ b/packages/p2p/src/components/modal-manager/modals/email-link-blocked-modal/email-link-blocked-modal.scss
@@ -3,7 +3,7 @@
     display: flex;
     flex-direction: column;
 
-    &--text {
+    &__text {
         margin: 2.4rem 0;
     }
 }
diff --git a/packages/p2p/src/components/modal-manager/modals/email-link-expired-modal/email-link-expired-modal.jsx b/packages/p2p/src/components/modal-manager/modals/email-link-expired-modal/email-link-expired-modal.jsx
index e68008827e7c..26479900f86e 100644
--- a/packages/p2p/src/components/modal-manager/modals/email-link-expired-modal/email-link-expired-modal.jsx
+++ b/packages/p2p/src/components/modal-manager/modals/email-link-expired-modal/email-link-expired-modal.jsx
@@ -23,13 +23,13 @@ const EmailLinkExpiredModal = () => {
             toggleModal={() => hideModal({ should_hide_all_modals: true })}
             width='440px'
         >
-            <Modal.Body className='email-link-expired-modal--body'>
+            <Modal.Body className='email-link-expired-modal__body'>
                 <Icon icon='IcEmailSentExpired' size='128' />
-                <Text align='center' className='email-link-expired-modal--text' color='prominent' weight='bold'>
+                <Text align='center' className='email-link-expired-modal__text' color='prominent' weight='bold'>
                     <Localize i18n_default_text='The verification link appears to be invalid. Hit the button below to request for a new one' />
                 </Text>
             </Modal.Body>
-            <Modal.Footer className='email-link-expired-modal--footer'>
+            <Modal.Footer className='email-link-expired-modal__footer'>
                 <Button large primary onClick={onClickHandler}>
                     <Localize i18n_default_text='Get new link' />
                 </Button>
diff --git a/packages/p2p/src/components/modal-manager/modals/email-link-expired-modal/email-link-expired-modal.scss b/packages/p2p/src/components/modal-manager/modals/email-link-expired-modal/email-link-expired-modal.scss
index 6529d9c0022b..dd3d45cf1813 100644
--- a/packages/p2p/src/components/modal-manager/modals/email-link-expired-modal/email-link-expired-modal.scss
+++ b/packages/p2p/src/components/modal-manager/modals/email-link-expired-modal/email-link-expired-modal.scss
@@ -1,17 +1,17 @@
 .email-link-expired-modal {
-    &--body {
+    &__body {
         display: flex;
         flex-direction: column;
         align-items: center;
     }
 
-    &--footer {
+    &__footer {
         display: flex;
         flex-direction: column;
         align-items: center;
     }
 
-    &--text {
+    &__text {
         margin-top: 2.4rem;
     }
 }
diff --git a/packages/p2p/src/components/modal-manager/modals/email-link-verified-modal/email-link-verified-modal.jsx b/packages/p2p/src/components/modal-manager/modals/email-link-verified-modal/email-link-verified-modal.jsx
index 5793e6c0d96d..3e4bb4e95fb4 100644
--- a/packages/p2p/src/components/modal-manager/modals/email-link-verified-modal/email-link-verified-modal.jsx
+++ b/packages/p2p/src/components/modal-manager/modals/email-link-verified-modal/email-link-verified-modal.jsx
@@ -26,17 +26,17 @@ const EmailLinkVerifiedModal = () => {
                 >
                     <Modal.Body className='email-verified-modal'>
                         <Icon icon='IcEmailVerificationLinkValid' size='128' />
-                        <Text className='email-verified-modal--text' color='prominent' size='s' weight='bold'>
+                        <Text className='email-verified-modal__text' color='prominent' weight='bold'>
                             <Localize i18n_default_text="We've verified your order" />
                         </Text>
-                        <Text align='center' color='prominent' size='s'>
+                        <Text align='center' color='prominent'>
                             <Localize
                                 i18n_default_text="Please ensure you've received {{amount}} {{local_currency}} in your account and hit Confirm to complete the transaction."
                                 values={{ amount, local_currency }}
                             />
                         </Text>
                     </Modal.Body>
-                    <Modal.Footer className='email-verified-modal--footer'>
+                    <Modal.Footer className='email-verified-modal__footer'>
                         <Button
                             large
                             primary
diff --git a/packages/p2p/src/components/modal-manager/modals/email-link-verified-modal/email-link-verified-modal.scss b/packages/p2p/src/components/modal-manager/modals/email-link-verified-modal/email-link-verified-modal.scss
index e5b0c2fbb694..13f733bfa2c1 100644
--- a/packages/p2p/src/components/modal-manager/modals/email-link-verified-modal/email-link-verified-modal.scss
+++ b/packages/p2p/src/components/modal-manager/modals/email-link-verified-modal/email-link-verified-modal.scss
@@ -3,11 +3,11 @@
     display: flex;
     flex-direction: column;
 
-    &--footer {
+    &__footer {
         align-self: center;
     }
 
-    &--text {
+    &__text {
         margin: 2.4rem 0;
     }
 }
diff --git a/packages/p2p/src/components/modal-manager/modals/email-verification-modal/email-verification-modal.jsx b/packages/p2p/src/components/modal-manager/modals/email-verification-modal/email-verification-modal.jsx
index 78c7abf95d98..28a9c0b26c1b 100644
--- a/packages/p2p/src/components/modal-manager/modals/email-verification-modal/email-verification-modal.jsx
+++ b/packages/p2p/src/components/modal-manager/modals/email-verification-modal/email-verification-modal.jsx
@@ -26,7 +26,7 @@ const EmailVerificationModal = (
             toggleModal={hideModal}
             width='440px'
         >
-            <Modal.Body className='email-verification-modal--body'>
+            <Modal.Body className='email-verification-modal__body'>
                 <Icon icon='IcEmailSentP2p' size='128' />
                 <Text
                     align='center'
@@ -40,12 +40,12 @@ const EmailVerificationModal = (
                 <Text align='center' className='email-verification-modal--email__text' color='prominent' weight='bold'>
                     <Localize i18n_default_text='Hit the link in the email we sent you to authorise this transaction.' />
                 </Text>
-                <Text align='center' color='prominent' size='s'>
+                <Text align='center' color='prominent'>
                     {/* TODO: Uncomment when time is available in BE response */}
                     <Localize i18n_default_text='The link will expire in 10 minutes.' />
                 </Text>
                 <Text
-                    className='email-verification-modal--receive_email_text'
+                    className='email-verification-modal__receive_email_text'
                     color='loss-danger'
                     onClick={() => setShouldShowReasonsIfNoEmail(true)}
                     size='xs'
@@ -55,27 +55,27 @@ const EmailVerificationModal = (
                 </Text>
                 {should_show_reasons_if_no_email && (
                     <React.Fragment>
-                        <div className='email-verification-modal--reason'>
+                        <div className='email-verification-modal__reason'>
                             <Icon icon='IcEmailSpam' size={36} />
-                            <Text className='email-verification-modal--reason__text' color='prominent' size='xxs'>
+                            <Text className='email-verification-modal__reason__text' color='prominent' size='xxs'>
                                 <Localize i18n_default_text='The email is in your spam folder (sometimes things get lost there).' />
                             </Text>
                         </div>
-                        <div className='email-verification-modal--reason'>
+                        <div className='email-verification-modal__reason'>
                             <Icon icon='IcEmail' size={36} />
-                            <Text className='email-verification-modal--reason__text' color='prominent' size='xxs'>
+                            <Text className='email-verification-modal__reason__text' color='prominent' size='xxs'>
                                 <Localize i18n_default_text='You accidentally gave us another email address (usually a work or a personal one instead of the one you meant).' />
                             </Text>
                         </div>
-                        <div className='email-verification-modal--reason'>
+                        <div className='email-verification-modal__reason'>
                             <Icon icon='IcEmailTypo' size={36} />
-                            <Text className='email-verification-modal--reason__text' color='prominent' size='xxs'>
+                            <Text className='email-verification-modal__reason__text' color='prominent' size='xxs'>
                                 <Localize i18n_default_text='The email address you entered had a mistake or typo (happens to the best of us).' />
                             </Text>
                         </div>
-                        <div className='email-verification-modal--reason'>
+                        <div className='email-verification-modal__reason'>
                             <Icon icon='IcEmailFirewall' size={36} />
-                            <Text className='email-verification-modal--reason__text' color='prominent' size='xxs'>
+                            <Text className='email-verification-modal__reason__text' color='prominent' size='xxs'>
                                 <Localize i18n_default_text="We can't deliver the email to this address (usually because of firewalls or filtering)." />
                             </Text>
                         </div>
@@ -83,7 +83,7 @@ const EmailVerificationModal = (
                 )}
             </Modal.Body>
             {should_show_reasons_if_no_email && (
-                <Modal.Footer className='email-verification-modal--footer'>
+                <Modal.Footer className='email-verification-modal__footer'>
                     <Button
                         large
                         primary
diff --git a/packages/p2p/src/components/modal-manager/modals/email-verification-modal/email-verification-modal.scss b/packages/p2p/src/components/modal-manager/modals/email-verification-modal/email-verification-modal.scss
index 0fb74ce548fe..b0438adad37f 100644
--- a/packages/p2p/src/components/modal-manager/modals/email-verification-modal/email-verification-modal.scss
+++ b/packages/p2p/src/components/modal-manager/modals/email-verification-modal/email-verification-modal.scss
@@ -4,7 +4,7 @@
 }
 
 .email-verification-modal {
-    &--body {
+    &__body {
         align-items: center;
         display: flex;
         flex-direction: column;
@@ -20,13 +20,13 @@
         }
     }
 
-    &--footer {
+    &__footer {
         @include mobile {
             justify-content: center;
         }
     }
 
-    &--reason {
+    &__reason {
         display: flex;
         flex-direction: row;
         gap: 1.6rem;
@@ -37,7 +37,7 @@
         }
     }
 
-    &--receive_email_text {
+    &__receive_email_text {
         cursor: pointer;
         margin: 2rem 0 0.6rem;
 
diff --git a/packages/p2p/src/components/modal-manager/modals/filter-modal/filter-modal-header.jsx b/packages/p2p/src/components/modal-manager/modals/filter-modal/filter-modal-header.jsx
index 8b2c61aeba6a..31f00f79b595 100644
--- a/packages/p2p/src/components/modal-manager/modals/filter-modal/filter-modal-header.jsx
+++ b/packages/p2p/src/components/modal-manager/modals/filter-modal/filter-modal-header.jsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { observer } from 'mobx-react-lite';
 import { localize, Localize } from 'Components/i18next';
 import { useStores } from 'Stores';
-import PageReturn from 'Components/page-return/page-return.jsx';
+import PageReturn from 'Components/page-return';
 import { DesktopWrapper, Icon, MobileWrapper, Text } from '@deriv/components';
 import PropTypes from 'prop-types';
 
diff --git a/packages/p2p/src/components/modal-manager/modals/filter-modal/filter-modal-no-results.jsx b/packages/p2p/src/components/modal-manager/modals/filter-modal/filter-modal-no-results.jsx
index 8c4ca61a0304..e073d5fc2ca6 100644
--- a/packages/p2p/src/components/modal-manager/modals/filter-modal/filter-modal-no-results.jsx
+++ b/packages/p2p/src/components/modal-manager/modals/filter-modal/filter-modal-no-results.jsx
@@ -6,10 +6,10 @@ import './filter-modal-no-results.scss';
 
 const FilterModalNoResults = ({ text }) => (
     <div className='filter-modal-no-result'>
-        <Text as='h2' size='s' align='center' weight='bold' className='filter-modal-no-result__title'>
+        <Text as='h2' align='center' weight='bold' className='filter-modal-no-result__title'>
             {localize('No results for "{{text}}".', { text, interpolation: { escapeValue: false } })}
         </Text>
-        <Text as='p' size='s' align='center' className='filter-modal-no-result__subtitle'>
+        <Text as='p' align='center' className='filter-modal-no-result__subtitle'>
             {localize('Check your spelling or use a different term.')}
         </Text>
     </div>
diff --git a/packages/p2p/src/components/modal-manager/modals/invalid-verification-link-modal/invalid-verification-link-modal.jsx b/packages/p2p/src/components/modal-manager/modals/invalid-verification-link-modal/invalid-verification-link-modal.jsx
index 169cbac32ec6..f1bd3c512ff9 100644
--- a/packages/p2p/src/components/modal-manager/modals/invalid-verification-link-modal/invalid-verification-link-modal.jsx
+++ b/packages/p2p/src/components/modal-manager/modals/invalid-verification-link-modal/invalid-verification-link-modal.jsx
@@ -18,14 +18,14 @@ const InvalidVerificationLinkModal = ({
         <Modal has_close_icon is_open={is_modal_open} renderTitle={() => <></>} toggleModal={hideModal} width='440px'>
             <Modal.Body className='invalid-verification-link-modal'>
                 <Icon icon='IcEmailVerificationLinkInvalid' size='128' />
-                <Text className='invalid-verification-link-modal--text' color='prominent' size='s' weight='bold'>
+                <Text className='invalid-verification-link-modal__text' color='prominent' weight='bold'>
                     <Localize i18n_default_text='Invalid verification link' />
                 </Text>
-                <Text align='center' color='prominent' size='s'>
+                <Text align='center' color='prominent'>
                     {error_message}
                 </Text>
             </Modal.Body>
-            <Modal.Footer className='invalid-verification-link-modal--footer'>
+            <Modal.Footer className='invalid-verification-link-modal__footer'>
                 <Button
                     large
                     primary
diff --git a/packages/p2p/src/components/modal-manager/modals/invalid-verification-link-modal/invalid-verification-link-modal.scss b/packages/p2p/src/components/modal-manager/modals/invalid-verification-link-modal/invalid-verification-link-modal.scss
index 887366940e0f..399dcfc678e4 100644
--- a/packages/p2p/src/components/modal-manager/modals/invalid-verification-link-modal/invalid-verification-link-modal.scss
+++ b/packages/p2p/src/components/modal-manager/modals/invalid-verification-link-modal/invalid-verification-link-modal.scss
@@ -3,11 +3,11 @@
     display: flex;
     flex-direction: column;
 
-    &--footer {
+    &__footer {
         align-self: center;
     }
 
-    &--text {
+    &__text {
         margin: 2.4rem 0;
     }
 }
diff --git a/packages/p2p/src/components/modal-manager/modals/my-ads-delete-error-modal/my-ads-delete-error-modal.jsx b/packages/p2p/src/components/modal-manager/modals/my-ads-delete-error-modal/my-ads-delete-error-modal.jsx
index 4e8ee67260b3..118edc04afca 100644
--- a/packages/p2p/src/components/modal-manager/modals/my-ads-delete-error-modal/my-ads-delete-error-modal.jsx
+++ b/packages/p2p/src/components/modal-manager/modals/my-ads-delete-error-modal/my-ads-delete-error-modal.jsx
@@ -17,7 +17,7 @@ const MyAdsDeleteErrorModal = () => {
                 has_close_icon={false}
                 is_open={is_modal_open}
                 renderTitle={() => (
-                    <Text color='prominent' line-height='m' size={isDesktop() ? 's' : 'xs'} weight='bold'>
+                    <Text color='prominent' size={isDesktop() ? 's' : 'xs'} weight='bold'>
                         <Localize i18n_default_text='Do you want to delete this ad?' />
                     </Text>
                 )}
diff --git a/packages/p2p/src/components/modal-manager/modals/my-ads-delete-modal/my-ads-delete-modal.jsx b/packages/p2p/src/components/modal-manager/modals/my-ads-delete-modal/my-ads-delete-modal.jsx
index ef5a69f03d8b..6188e109a418 100644
--- a/packages/p2p/src/components/modal-manager/modals/my-ads-delete-modal/my-ads-delete-modal.jsx
+++ b/packages/p2p/src/components/modal-manager/modals/my-ads-delete-modal/my-ads-delete-modal.jsx
@@ -39,7 +39,7 @@ const MyAdsDeleteModal = () => {
                 toggleModal={onClickCancel}
                 has_close_icon
                 renderTitle={() => (
-                    <Text color='prominent' line-height='m' size={isDesktop() ? 's' : 'xs'} weight='bold'>
+                    <Text color='prominent' size={isDesktop() ? 's' : 'xs'} weight='bold'>
                         <Localize i18n_default_text='Do you want to delete this ad?' />
                     </Text>
                 )}
diff --git a/packages/p2p/src/components/modal-manager/modals/nickname-modal/index.ts b/packages/p2p/src/components/modal-manager/modals/nickname-modal/index.ts
new file mode 100644
index 000000000000..8969470f7d70
--- /dev/null
+++ b/packages/p2p/src/components/modal-manager/modals/nickname-modal/index.ts
@@ -0,0 +1,3 @@
+import NicknameModal from './nickname-modal';
+
+export default NicknameModal;
diff --git a/packages/p2p/src/components/modal-manager/modals/nickname-modal/nickname-modal.tsx b/packages/p2p/src/components/modal-manager/modals/nickname-modal/nickname-modal.tsx
new file mode 100644
index 000000000000..225687bc6935
--- /dev/null
+++ b/packages/p2p/src/components/modal-manager/modals/nickname-modal/nickname-modal.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { Modal } from '@deriv/components';
+import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
+import NicknameForm from 'Components/nickname-form';
+import { useStores } from 'Stores';
+
+const NicknameModal = () => {
+    const { hideModal, is_modal_open } = useModalManagerContext();
+    const { general_store } = useStores();
+
+    return (
+        <Modal
+            width='440px'
+            is_open={is_modal_open}
+            renderTitle={() => <></>}
+            toggleModal={() => {
+                hideModal();
+                general_store.onNicknamePopupClose();
+            }}
+        >
+            <NicknameForm onCancel={hideModal} />
+        </Modal>
+    );
+};
+
+export default NicknameModal;
diff --git a/packages/p2p/src/components/modal-manager/modals/order-details-cancel-modal/order-details-cancel-modal.jsx b/packages/p2p/src/components/modal-manager/modals/order-details-cancel-modal/order-details-cancel-modal.jsx
index 61fe652ecdc6..83987a48c909 100644
--- a/packages/p2p/src/components/modal-manager/modals/order-details-cancel-modal/order-details-cancel-modal.jsx
+++ b/packages/p2p/src/components/modal-manager/modals/order-details-cancel-modal/order-details-cancel-modal.jsx
@@ -4,7 +4,7 @@ import { useIsMounted } from '@deriv/shared';
 import { Localize } from 'Components/i18next';
 import { requestWS } from 'Utils/websocket';
 import { useStores } from 'Stores';
-import FormError from 'Components/form/error.jsx';
+import FormError from 'Components/section-error';
 import { useModalManagerContext } from '../../modal-manager-context';
 
 const OrderDetailsCancelModal = () => {
@@ -31,12 +31,12 @@ const OrderDetailsCancelModal = () => {
 
     return (
         <Modal
-            className='cancel-modal'
+            className='order-details-cancel-modal'
             has_close_icon={false}
             is_open={is_modal_open}
             toggleModal={hideModal}
             renderTitle={() => (
-                <Text color='prominent' line-height='m' size='s' weight='bold'>
+                <Text color='prominent' weight='bold'>
                     <Localize i18n_default_text='Do you want to cancel this order?' />
                 </Text>
             )}
@@ -65,13 +65,13 @@ const OrderDetailsCancelModal = () => {
                         />
                     </Text>
                 )}
-                <div className='cancel-modal__warning'>
+                <div className='order-details-cancel-modal__warning'>
                     <Text color='loss-danger' size='xs'>
                         <Localize i18n_default_text='Please do not cancel if you have already made payment.' />
                     </Text>
                 </div>
             </Modal.Body>
-            <Modal.Footer className='cancel-modal__footer'>
+            <Modal.Footer className='order-details-cancel-modal__footer'>
                 {order_store.error_message && <FormError message={order_store.error_message} />}
                 <Button.Group>
                     <Button secondary large onClick={cancelOrderRequest}>
diff --git a/packages/p2p/src/components/modal-manager/modals/order-details-cancel-modal/order-details-cancel-modal.scss b/packages/p2p/src/components/modal-manager/modals/order-details-cancel-modal/order-details-cancel-modal.scss
index 5110b1c5f229..d73dab16f5a7 100644
--- a/packages/p2p/src/components/modal-manager/modals/order-details-cancel-modal/order-details-cancel-modal.scss
+++ b/packages/p2p/src/components/modal-manager/modals/order-details-cancel-modal/order-details-cancel-modal.scss
@@ -1,4 +1,4 @@
-.cancel-modal {
+.order-details-cancel-modal {
     &__footer {
         @include mobile {
             .dc-btn__group {
@@ -19,7 +19,7 @@
     }
 }
 
-.dc-modal__container_cancel-modal {
+.dc-modal__container_order-details-cancel-modal {
     .dc-modal-header {
         border-bottom: none;
     }
diff --git a/packages/p2p/src/components/modal-manager/modals/order-details-confirm-modal/order-details-confirm-modal.jsx b/packages/p2p/src/components/modal-manager/modals/order-details-confirm-modal/order-details-confirm-modal.jsx
index 45bfb1f2131f..8802381ec655 100644
--- a/packages/p2p/src/components/modal-manager/modals/order-details-confirm-modal/order-details-confirm-modal.jsx
+++ b/packages/p2p/src/components/modal-manager/modals/order-details-confirm-modal/order-details-confirm-modal.jsx
@@ -3,7 +3,7 @@ import { useStores } from 'Stores';
 import { Button, Modal, Text } from '@deriv/components';
 import { isMobile, formatMoney } from '@deriv/shared';
 import FileUploaderComponent from 'Components/file-uploader-component';
-import FormError from 'Components/form/error.jsx';
+import FormError from 'Components/section-error';
 import { Localize, localize } from 'Components/i18next';
 import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
 import { getErrorMessage, max_pot_file_size } from 'Utils/file-uploader';
diff --git a/packages/p2p/src/components/modal-manager/modals/quick-add-modal/quick-add-modal.jsx b/packages/p2p/src/components/modal-manager/modals/quick-add-modal/quick-add-modal.jsx
index 159dfcab6625..acdd0f879b82 100644
--- a/packages/p2p/src/components/modal-manager/modals/quick-add-modal/quick-add-modal.jsx
+++ b/packages/p2p/src/components/modal-manager/modals/quick-add-modal/quick-add-modal.jsx
@@ -6,10 +6,10 @@ import { isMobile } from '@deriv/shared';
 import { observer } from '@deriv/stores';
 import { localize, Localize } from 'Components/i18next';
 import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
-import AddPaymentMethod from 'Components/my-profile/payment-methods/add-payment-method/add-payment-method.jsx';
-import BuyAdPaymentMethodsList from 'Components/my-ads/buy-ad-payment-methods-list.jsx';
-import FilterPaymentMethods from 'Components/my-ads/filter-payment-methods';
-import SellAdPaymentMethodsList from 'Components/my-ads/sell-ad-payment-methods-list.jsx';
+import AddPaymentMethod from 'Pages/my-profile/payment-methods/add-payment-method/add-payment-method.jsx';
+import BuyAdPaymentMethodsList from 'Pages/my-ads/buy-ad-payment-methods-list.jsx';
+import FilterPaymentMethods from 'Pages/my-ads/filter-payment-methods';
+import SellAdPaymentMethodsList from 'Pages/my-ads/sell-ad-payment-methods-list.jsx';
 import { buy_sell } from 'Constants/buy-sell';
 import { useStores } from 'Stores';
 
@@ -91,14 +91,14 @@ const QuickAddModal = ({ advert }) => {
         if (is_buy_advert) {
             return (
                 <MobileFullPageModal
-                    body_className='quick-add-modal--body'
+                    body_className='quick-add-modal__body'
                     height_offset='80px'
                     is_flex
                     is_modal_open={is_modal_open}
                     page_header_text={localize('Add payment method')}
                     pageHeaderReturnFn={() => setShouldCloseAllModals(false)}
                     page_footer_className={classNames({
-                        'quick-add-modal--footer': my_ads_store.show_filter_payment_methods,
+                        'quick-add-modal__footer': my_ads_store.show_filter_payment_methods,
                     })}
                     secondary
                     text={localize('Cancel')}
@@ -134,7 +134,7 @@ const QuickAddModal = ({ advert }) => {
                         />
                     ) : (
                         <>
-                            <div className='quick-add-modal--info'>
+                            <div className='quick-add-modal__info'>
                                 <Text color='prominent' size='xxs'>
                                     <Localize i18n_default_text='You may choose up to 3 payment methods for this ad.' />
                                 </Text>
@@ -155,13 +155,13 @@ const QuickAddModal = ({ advert }) => {
 
         return (
             <MobileFullPageModal
-                body_className='quick-add-modal--body'
+                body_className='quick-add-modal__body'
                 height_offset='80px'
                 is_flex
                 is_modal_open={is_modal_open}
                 page_header_text={localize('Add payment method')}
                 page_footer_className={classNames({
-                    'quick-add-modal--footer': my_ads_store.should_show_add_payment_method,
+                    'quick-add-modal__footer': my_ads_store.should_show_add_payment_method,
                 })}
                 pageHeaderReturnFn={() => setShouldCloseAllModals(false)}
                 secondary
@@ -177,7 +177,7 @@ const QuickAddModal = ({ advert }) => {
                                 text={localize('Cancel')}
                             />
                             <Button
-                                className='quick-add-modal--button'
+                                className='quick-add-modal__button'
                                 has_effect
                                 is_disabled={
                                     selected_methods.length === 0 || my_ads_store.payment_method_ids.length === 0
@@ -213,7 +213,7 @@ const QuickAddModal = ({ advert }) => {
     if (is_buy_advert) {
         return (
             <Modal
-                className='p2p-my-ads__modal-error'
+                className='quick-add-modal'
                 has_close_icon
                 height='452px'
                 is_open={is_modal_open}
@@ -221,7 +221,7 @@ const QuickAddModal = ({ advert }) => {
                 toggleModal={() => setShouldCloseAllModals(true)}
             >
                 <Modal.Body>
-                    <div className='quick-add-modal--info'>
+                    <div className='quick-add-modal__info'>
                         <Text color='prominent' size='xxs'>
                             <Localize i18n_default_text='You may choose up to 3 payment methods for this ad.' />
                         </Text>
@@ -258,8 +258,8 @@ const QuickAddModal = ({ advert }) => {
 
     return (
         <Modal
-            className={classNames('p2p-my-ads__modal-error', {
-                'p2p-my-ads__modal-form': my_profile_store.selected_payment_method,
+            className={classNames('quick-add-modal', {
+                'quick-add-modal--form': my_profile_store.selected_payment_method,
             })}
             has_close_icon
             height={my_ads_store.should_show_add_payment_method ? '560px' : 'auto'}
@@ -268,7 +268,7 @@ const QuickAddModal = ({ advert }) => {
                 <React.Fragment>
                     {my_ads_store.should_show_add_payment_method && (
                         <Icon
-                            className='p2p-my-ads__modal-icon'
+                            className='quick-add-modal__icon'
                             icon='icArrowLeftBold'
                             onClick={() => {
                                 setShouldCloseAllModals(false);
@@ -285,8 +285,8 @@ const QuickAddModal = ({ advert }) => {
         >
             <Modal.Body
                 className={classNames({
-                    'p2p-my-ads__modal-body--horizontal': !my_ads_store.should_show_add_payment_method,
-                    'p2p-my-ads__modal-body--scroll': my_profile_store.selected_payment_method,
+                    'quick-add-modal__horizontal': !my_ads_store.should_show_add_payment_method,
+                    'quick-add-modal__scroll': my_profile_store.selected_payment_method,
                 })}
             >
                 {my_ads_store.should_show_add_payment_method ? (
diff --git a/packages/p2p/src/components/modal-manager/modals/quick-add-modal/quick-add-modal.scss b/packages/p2p/src/components/modal-manager/modals/quick-add-modal/quick-add-modal.scss
index 6afe3522fae5..af4364057e4a 100644
--- a/packages/p2p/src/components/modal-manager/modals/quick-add-modal/quick-add-modal.scss
+++ b/packages/p2p/src/components/modal-manager/modals/quick-add-modal/quick-add-modal.scss
@@ -1,42 +1,50 @@
 .quick-add-modal {
-    &--body {
-        display: flex;
-        flex-direction: column;
-        padding: 1.5rem;
+    &--form {
+        height: fit-content !important;
     }
 
-    &--button {
-        margin-left: 0.5rem;
+    .dc-modal-header__title--quick-add-modal {
+        padding: 2.4rem 2.4rem 0 !important;
     }
 
-    &--input {
-        padding-bottom: 2rem;
-        & .dc-input__field {
-            padding-left: 3rem;
+    .dc-modal__container_quick-add-modal {
+        .dc-modal-footer {
+            padding-top: 0 !important;
         }
 
-        & .dc-input__leading-icon {
-            top: auto;
+        .dc-modal-header {
+            padding-bottom: 1rem;
         }
+    }
 
-        &::placeholder {
-            padding-left: 3rem;
-        }
+    &__body {
+        display: flex;
+        flex-direction: column;
+        padding: 1.5rem;
     }
 
-    &--footer {
+    &__button {
+        margin-left: 0.5rem;
+    }
+
+    &__info {
+        margin-bottom: 1.3rem;
+    }
+
+    &__footer {
         display: none;
     }
 
-    &--text {
-        display: flex;
+    &__icon {
+        margin-right: 0.8rem;
     }
 
-    &--message {
-        margin-top: 1rem;
+    &__scroll {
+        overflow: auto;
+        padding: 1rem 0 0;
     }
 
-    &--info {
-        margin-bottom: 1.3rem;
+    &__horizontal {
+        padding-right: 0rem;
     }
 }
diff --git a/packages/p2p/src/components/modal-manager/modals/rate-change-modal/rate-change-modal.jsx b/packages/p2p/src/components/modal-manager/modals/rate-change-modal/rate-change-modal.jsx
index de7d44ec8d97..664b50902768 100644
--- a/packages/p2p/src/components/modal-manager/modals/rate-change-modal/rate-change-modal.jsx
+++ b/packages/p2p/src/components/modal-manager/modals/rate-change-modal/rate-change-modal.jsx
@@ -15,12 +15,12 @@ const RateChangeModal = ({ currency }) => {
     const { hideModal, is_modal_open } = useModalManagerContext();
 
     return (
-        <Modal is_open={is_modal_open} toggleModal={hideModal} small className='rate-changed-modal'>
+        <Modal is_open={is_modal_open} toggleModal={hideModal} small className='rate-change-modal'>
             <Modal.Body>
                 <Text
                     as='p'
                     align='left'
-                    className='rate-changed-modal__message'
+                    className='rate-change-modal__message'
                     size={isMobile() ? 'xxs' : 'xs'}
                     line_height='s'
                 >
@@ -30,7 +30,7 @@ const RateChangeModal = ({ currency }) => {
                     />
                 </Text>
             </Modal.Body>
-            <Modal.Footer className='rate-changed-modal__button'>
+            <Modal.Footer className='rate-change-modal__button'>
                 <Button onClick={hideModal} text={localize('Try again')} primary large />
             </Modal.Footer>
         </Modal>
diff --git a/packages/p2p/src/components/modal-manager/modals/rate-change-modal/rate-change-modal.scss b/packages/p2p/src/components/modal-manager/modals/rate-change-modal/rate-change-modal.scss
index 735d47d5395f..46397de41ce1 100644
--- a/packages/p2p/src/components/modal-manager/modals/rate-change-modal/rate-change-modal.scss
+++ b/packages/p2p/src/components/modal-manager/modals/rate-change-modal/rate-change-modal.scss
@@ -1,4 +1,4 @@
-.dc-modal__container_rate-changed-modal {
+.dc-modal__container_rate-change-modal {
     @include mobile {
         min-width: 328px;
     }
diff --git a/packages/p2p/src/components/modal-manager/modals/rating-modal/rating-modal.jsx b/packages/p2p/src/components/modal-manager/modals/rating-modal/rating-modal.jsx
index 473c897355ad..5f9a9b1dd936 100644
--- a/packages/p2p/src/components/modal-manager/modals/rating-modal/rating-modal.jsx
+++ b/packages/p2p/src/components/modal-manager/modals/rating-modal/rating-modal.jsx
@@ -25,12 +25,12 @@ const RatingModal = ({ is_buy_order_for_user, is_user_recommended_previously, on
             toggleModal={onClickSkip}
             width={isMobile() && '90vw'}
         >
-            <Modal.Body className='rating-modal--body'>
-                <div className='rating-modal--body__star'>
+            <Modal.Body className='rating-modal__body'>
+                <div className='rating-modal__body__star'>
                     <StarRating
-                        empty_star_className='rating-modal--star'
+                        empty_star_className='rating-modal__star'
                         empty_star_icon='IcEmptyStar'
-                        full_star_className='rating-modal--star'
+                        full_star_className='rating-modal__star'
                         full_star_icon='IcFullStar'
                         initial_value={0}
                         number_of_stars={5}
@@ -50,7 +50,7 @@ const RatingModal = ({ is_buy_order_for_user, is_user_recommended_previously, on
                     />
                 )}
             </Modal.Body>
-            <Modal.Footer className='rating-modal--footer'>
+            <Modal.Footer className='rating-modal__footer'>
                 {order_store.rating_value > 0 ? (
                     <Button primary large onClick={onClickDone}>
                         <Localize i18n_default_text='Done' />
diff --git a/packages/p2p/src/components/modal-manager/modals/rating-modal/rating-modal.scss b/packages/p2p/src/components/modal-manager/modals/rating-modal/rating-modal.scss
index 378d467f7870..c622a06d9523 100644
--- a/packages/p2p/src/components/modal-manager/modals/rating-modal/rating-modal.scss
+++ b/packages/p2p/src/components/modal-manager/modals/rating-modal/rating-modal.scss
@@ -1,5 +1,5 @@
 .rating-modal {
-    &--body {
+    &__body {
         padding: 0.8rem 2.4rem;
 
         @include mobile {
@@ -10,11 +10,11 @@
         }
     }
 
-    &--footer {
+    &__footer {
         padding: 2.4rem;
     }
 
-    &--star {
+    &__star {
         pointer-events: none;
 
         > svg {
diff --git a/packages/p2p/src/components/modal-manager/modals/recommended-modal/index.js b/packages/p2p/src/components/modal-manager/modals/recommended-modal/index.js
index b7b9a7c65b0f..65a786c59328 100644
--- a/packages/p2p/src/components/modal-manager/modals/recommended-modal/index.js
+++ b/packages/p2p/src/components/modal-manager/modals/recommended-modal/index.js
@@ -1,4 +1,3 @@
-import './recommended-modal.scss';
 import RecommendedModal from './recommended-modal';
 
 export default RecommendedModal;
diff --git a/packages/p2p/src/components/modal-manager/modals/recommended-modal/recommended-modal.jsx b/packages/p2p/src/components/modal-manager/modals/recommended-modal/recommended-modal.jsx
index 047afce684c5..5a9ba016b61d 100644
--- a/packages/p2p/src/components/modal-manager/modals/recommended-modal/recommended-modal.jsx
+++ b/packages/p2p/src/components/modal-manager/modals/recommended-modal/recommended-modal.jsx
@@ -10,7 +10,7 @@ const RecommendedModal = ({ message }) => {
     return (
         <Modal height='12.6rem' is_open={is_modal_open} width='32.8rem'>
             <Modal.Body>
-                <Text color='prominent' line_height='m' size='xxs'>
+                <Text color='prominent' size='xxs'>
                     {message}
                 </Text>
             </Modal.Body>
diff --git a/packages/p2p/src/components/modal-manager/modals/recommended-modal/recommended-modal.scss b/packages/p2p/src/components/modal-manager/modals/recommended-modal/recommended-modal.scss
deleted file mode 100644
index b26170835fbc..000000000000
--- a/packages/p2p/src/components/modal-manager/modals/recommended-modal/recommended-modal.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.recommended-modal {
-    height: 10.6rem;
-    width: 32.8rem;
-}
diff --git a/packages/p2p/src/components/my-ads/my-ads.scss b/packages/p2p/src/components/my-ads/my-ads.scss
deleted file mode 100644
index 3a4e4da4a951..000000000000
--- a/packages/p2p/src/components/my-ads/my-ads.scss
+++ /dev/null
@@ -1,775 +0,0 @@
-@mixin popoverIcons($background-color, $height, $width) {
-    align-items: center;
-    background-color: $background-color;
-    cursor: pointer;
-    display: flex;
-    height: $height;
-    justify-content: center;
-    width: $width;
-}
-
-.p2p-my-ads {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    overflow-y: auto;
-
-    @include mobile {
-        .page-return {
-            border-bottom: 2px solid var(--general-section-1);
-            margin: 0;
-            padding: 1.6rem;
-        }
-
-        .dc-list {
-            margin-left: 1vw;
-            width: 88vw;
-
-            &__item {
-                padding-top: 0.4rem;
-            }
-        }
-        .dc-mobile-full-page-modal {
-            opacity: 1 !important;
-        }
-    }
-
-    .dc-input__wrapper {
-        max-width: 67.2rem; // TODO: Kill these fixed widths.
-        margin-top: 2.1rem;
-
-        @include mobile {
-            max-width: 90vw;
-
-            .p2p-my-ads__form-field {
-                margin-bottom: 0;
-            }
-        }
-    }
-
-    &__header {
-        display: flex;
-        align-items: center;
-        margin: 1.6rem 0;
-        justify-content: space-between;
-        min-height: 50px;
-
-        @include mobile {
-            border-bottom: 1px solid var(--general-section-1);
-            justify-content: flex-end;
-            margin: unset;
-        }
-    }
-
-    &__info {
-        @include mobile {
-            padding: 1rem 0;
-        }
-    }
-
-    &__form {
-        @include mobile {
-            .dc-input__footer {
-                justify-content: space-between;
-                width: 86vw;
-            }
-
-            .dc-input__hint--relative {
-                margin-left: unset;
-            }
-        }
-
-        &-label {
-            &--focused {
-                color: var(--text-prominent);
-                background-color: var(--general-main-1);
-            }
-        }
-
-        &-payment-methods {
-            &--empty {
-                max-width: 67.2rem;
-                padding: 1.2rem 0;
-            }
-
-            &--text {
-                display: flex;
-                flex-direction: column;
-                margin-top: 3.2rem;
-                padding-bottom: 1rem;
-            }
-        }
-
-        &-radio-group {
-            display: flex;
-            margin-top: unset;
-            padding-bottom: 1.2rem;
-
-            .dc-radio-group__circle {
-                border: 2px solid var(--border-hover);
-
-                &--selected {
-                    border: 4px solid var(--brand-red-coral);
-                }
-            }
-
-            @include mobile {
-                padding: 0.5rem 0;
-            }
-        }
-
-        &-summary {
-            color: var(--text-less-prominent);
-            font-size: 1.4rem;
-            margin-bottom: 0.6rem;
-
-            @include mobile {
-                margin: 0.6rem 0;
-            }
-        }
-        &-scrollbar {
-            height: calc(100% - 2.4rem - 9.2rem);
-            position: absolute;
-            width: calc(100% - 4.8rem);
-
-            .dc-input {
-                max-width: 67.2rem;
-            }
-
-            &-container {
-                @include mobile {
-                    width: 90vw;
-                    margin: 0 1.6rem;
-
-                    .dc-input {
-                        &__wrapper {
-                            margin-top: 2.1rem;
-                        }
-                        &__hint {
-                            margin-top: 0;
-                        }
-                    }
-                }
-            }
-
-            @include mobile {
-                height: fit-content;
-                position: unset;
-                width: 100%;
-            }
-        }
-        &-container {
-            display: flex;
-            height: 8rem;
-            justify-content: space-between;
-            width: 67.2rem;
-
-            .dc-input {
-                margin-bottom: 2.1rem;
-                margin-top: 2.1rem;
-
-                &__container {
-                    padding: 0 1rem;
-                }
-                &--hint {
-                    margin-bottom: 0;
-                }
-                &__wrapper {
-                    margin-top: 0;
-                }
-            }
-
-            @include mobile {
-                flex-direction: column;
-                height: unset;
-                width: unset;
-
-                .dc-input {
-                    &__wrapper {
-                        margin-bottom: 5rem;
-                    }
-                }
-            }
-        }
-        &-field {
-            height: 4rem;
-            margin-bottom: 0;
-            margin-left: 0;
-            width: 32.4rem;
-
-            @include mobile {
-                width: inherit;
-            }
-
-            &--contact-details {
-                margin-bottom: 5.9rem;
-
-                @include mobile {
-                    margin-bottom: 3.7rem;
-                }
-            }
-            &--single {
-                width: 18.9rem;
-            }
-            &--textarea {
-                height: 9.6rem;
-                margin-bottom: 0;
-                width: 67.2rem;
-
-                @include mobile {
-                    height: 9.8rem;
-                    width: 90vw;
-                }
-
-                .dc-input {
-                    &__hint {
-                        top: 9.7rem;
-                    }
-                    &___counter {
-                        top: 9.7rem;
-                        right: 0rem;
-
-                        @include mobile {
-                            display: flex;
-                            right: 0;
-                        }
-                    }
-                    &__textarea {
-                        padding-top: 1rem;
-                        padding-left: 0;
-                    }
-                    &__container {
-                        height: 9.6rem;
-                    }
-                }
-            }
-        }
-        &-button {
-            margin-left: 0.8rem;
-        }
-        &-footer {
-            align-items: center;
-            background-color: var(--general-main-1);
-            display: flex;
-            justify-content: flex-end;
-
-            @include mobile {
-                border-top: 2px solid var(--general-section-1);
-                flex-direction: row;
-                padding: 1.6rem;
-                width: 100vw;
-            }
-        }
-    }
-
-    &__modal {
-        &-body {
-            display: flex;
-            flex-direction: column;
-            padding: 1rem 1.6rem 0;
-            width: 100vw;
-
-            &--form {
-                padding: 1rem 0 0;
-            }
-
-            &--scroll {
-                overflow: auto;
-                padding: 1rem 0 0;
-            }
-
-            &--horizontal {
-                padding-right: 0rem;
-            }
-        }
-        &-form {
-            height: fit-content !important;
-        }
-    }
-
-    &__table {
-        display: flex;
-        flex: 1;
-        flex-direction: column;
-
-        &-add {
-            align-items: center;
-            border: 1px solid var(--border-normal);
-            border-radius: 4px;
-            cursor: pointer;
-            display: flex;
-            justify-content: space-between;
-            padding: 0.3rem 0.5rem;
-
-            &--disabled {
-                cursor: not-allowed;
-            }
-        }
-
-        &-body {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-        }
-
-        &__payment-method {
-            display: flex;
-            flex-wrap: wrap;
-
-            &--label {
-                align-items: center;
-                border-radius: 0.4rem;
-                border: 1px solid var(--border-normal);
-                display: flex;
-                flex-direction: row;
-                margin: 0.25rem;
-                padding: 0 0.8rem;
-                width: fit-content;
-
-                @include mobile {
-                    height: 2.4rem;
-                    margin: 0.25rem 0.5rem 0.25rem 0;
-                }
-            }
-        }
-
-        &-price {
-            color: var(--text-profit-success);
-            font-weight: bold;
-
-            .display-layout {
-                display: flex;
-                flex-direction: column;
-            }
-        }
-        &-popovers {
-            background-color: var(--general-main-1);
-            display: flex;
-            height: 99%;
-            justify-content: center;
-            min-width: 14rem;
-            padding: 1.6rem;
-            position: absolute;
-            right: 0;
-            top: 0;
-
-            &--disable {
-                cursor: not-allowed !important;
-
-                @include mobile {
-                    background-color: var(--checkbox-disabled-grey) !important;
-                }
-            }
-
-            @include mobile {
-                display: flex;
-                justify-content: unset;
-            }
-
-            div {
-                margin: auto;
-            }
-
-            &__activate {
-                @include popoverIcons(none, 3.2rem, 3.2rem);
-
-                @include desktop {
-                    &:hover {
-                        background-color: var(--general-hover);
-                    }
-                }
-
-                @include mobile {
-                    @include popoverIcons(var(--status-warning), 100%, 6rem);
-                }
-            }
-
-            &__deactivate {
-                @include popoverIcons(none, 3.2rem, 3.2rem);
-
-                @include desktop {
-                    &:hover {
-                        background-color: var(--general-hover);
-                    }
-                }
-
-                @include mobile {
-                    @include popoverIcons(#85acb0, 100%, 6rem);
-                }
-            }
-
-            &__delete {
-                @include popoverIcons(none, 3.2rem, 3.2rem);
-
-                @include desktop {
-                    &:hover {
-                        background-color: var(--general-hover);
-                    }
-                }
-
-                @include mobile {
-                    @include popoverIcons(var(--brand-red-coral), 100%, 6rem);
-                }
-            }
-
-            &__edit {
-                @include popoverIcons(none, 3.2rem, 3.2rem);
-
-                @include desktop {
-                    &:hover {
-                        background-color: var(--general-hover);
-                    }
-                }
-
-                @include mobile {
-                    @include popoverIcons(var(--status-info), 100%, 6rem);
-                }
-            }
-        }
-        &-available {
-            align-items: flex-start;
-            flex-flow: column;
-            justify-content: center;
-            width: 85%;
-
-            &-progress {
-                margin-bottom: 0.4rem;
-
-                @include mobile {
-                    margin: 0.4rem 0;
-                }
-            }
-        }
-        &-row {
-            padding: 1.6rem;
-            grid-template-columns: 1.7fr repeat(2, 2fr) repeat(2, 2.3fr) 1.5fr;
-
-            .dc-table__cell:last-child {
-                word-break: unset;
-            }
-
-            @include mobile {
-                grid-template-columns: unset;
-                padding: 1.6rem;
-                width: 100%;
-            }
-
-            &__type-and-status {
-                display: flex;
-                justify-content: space-between;
-                margin-bottom: 0.8rem;
-            }
-
-            &-details {
-                display: flex;
-                justify-content: space-between;
-            }
-
-            &-disabled {
-                .dc-table__cell {
-                    color: var(--text-disabled);
-                }
-
-                .dc-progress-indicator {
-                    &__container {
-                        background-color: var(--general-section-1);
-                    }
-                    &__bar {
-                        background-color: var(--general-disabled);
-                    }
-                }
-
-                .dc-text {
-                    &:not(.ad-status--inactive) {
-                        color: var(--text-disabled);
-                    }
-                }
-            }
-
-            &-methods {
-                display: flex;
-                flex-wrap: wrap;
-            }
-        }
-
-        &-status {
-            width: 100%;
-
-            &-warning {
-                align-items: center;
-                display: flex;
-                flex-direction: row;
-                justify-content: space-between;
-                width: 100%;
-
-                @include mobile {
-                    align-items: center;
-                    display: flex;
-                    justify-content: unset;
-                    width: unset;
-                    gap: 1rem;
-                }
-            }
-        }
-
-        &--disabled {
-            .dc-table__cell {
-                color: var(--text-disabled);
-            }
-
-            .dc-progress-indicator {
-                &__container {
-                    background-color: var(--general-section-1);
-                }
-                &__bar {
-                    background-color: var(--general-disabled);
-                }
-            }
-        }
-    }
-
-    &__popup {
-        &-header {
-            border-bottom: 1px solid var(--general-section-2);
-
-            &_wrapper {
-                padding: 1.6rem 2.4rem;
-                display: flex;
-                align-items: center;
-                width: 100%;
-                justify-content: space-between;
-                box-sizing: border-box;
-            }
-            &_right {
-                justify-content: flex-end;
-                padding: 2.8rem 2.4rem 0;
-            }
-            &--title {
-                font-weight: bold;
-                color: var(--text-prominent);
-
-                &:first-letter {
-                    text-transform: uppercase;
-                }
-            }
-            &--no-border {
-                border: none;
-            }
-        }
-        &-content {
-            padding: 2.4rem;
-
-            &_centre {
-                padding: 0 8rem;
-                display: flex;
-                flex-direction: column;
-                justify-content: center;
-                align-items: center;
-            }
-            &--title {
-                color: var(--text-general);
-                font-size: var(--text-size-s);
-                font-weight: bold;
-                margin: 1.4rem 0 0.8rem;
-            }
-            &--text {
-                color: var(--text-general);
-                font-size: var(--text-size-xs);
-                margin-bottom: 1.6rem;
-            }
-        }
-        &-field {
-            margin-bottom: 0 !important;
-            flex: 1;
-
-            &:not(:first-child) {
-                margin-left: 2.4rem;
-            }
-            &_wrapper {
-                display: flex;
-                margin-bottom: 1.6rem;
-                align-items: center;
-            }
-            &--textarea {
-                margin-top: 4.3rem;
-                margin-bottom: 4.3rem;
-
-                .dc-input__hint {
-                    top: 9.7rem;
-                }
-                .dc-input__counter {
-                    top: 9.7rem;
-                    right: 0rem;
-                }
-            }
-            &--icon {
-                width: 3.66rem;
-                margin: 0 1.6rem;
-                transform: rotate(180deg);
-            }
-            &--trailing {
-                font-size: var(--text-size-xxs);
-                color: var(--text-less-prominent);
-            }
-        }
-        &-info {
-            margin-bottom: 1.6rem;
-
-            &_notes {
-                margin-bottom: 2rem;
-            }
-            &--title {
-                color: var(--text-less-prominent);
-                font-size: var(--text-size-xxs);
-            }
-            &--text {
-                color: var(--text-general);
-                font-size: var(--text-size-xs);
-                word-break: break-word;
-            }
-            &--strong {
-                font-weight: bold;
-            }
-        }
-        &-footer {
-            min-height: 7.2rem;
-            display: flex;
-            align-items: center;
-            justify-content: flex-end;
-            padding: 0 2.4rem;
-            border-top: 1px solid var(--general-section-2);
-        }
-        &-close_icon {
-            cursor: pointer;
-            fill: var(--text-general);
-        }
-    }
-
-    &__empty {
-        width: fit-content;
-        margin: 0 auto;
-        transform: translateX(-25%);
-        text-align: center;
-
-        &--pending {
-            transform: translateX(-30%);
-        }
-        &-button {
-            width: auto;
-            height: 40px;
-        }
-    }
-
-    &--border {
-        .dc-input__container {
-            border: 1px dashed var(--border-normal);
-        }
-    }
-
-    &__state {
-        text-align: center;
-        margin: 0 auto;
-
-        &-button {
-            margin-top: 12px;
-        }
-    }
-    &__create {
-        margin: 1.6rem;
-        width: 90vw;
-
-        &-container {
-            border-top: 2px solid var(--general-section-1);
-        }
-    }
-    &__data-list {
-        flex: 1;
-
-        &__data-list-body {
-            flex: 1;
-        }
-
-        .data-list__body-wrapper {
-            flex: 1;
-        }
-    }
-
-    &__page-return {
-        border-bottom: 2px solid var(--general-section-1);
-        margin: unset;
-        padding: 0 2rem 1.6rem;
-    }
-
-    &__warning {
-        margin-top: 1.6rem;
-        width: fit-content;
-
-        @include mobile {
-            margin: 1rem 2rem;
-
-            .dc-hint-box {
-                align-items: normal;
-
-                &__icon {
-                    width: 3.5rem;
-                    align-items: flex-start;
-                }
-            }
-        }
-    }
-
-    .toggle-ads {
-        display: flex;
-        align-items: center;
-        justify-items: flex-start;
-
-        &__message {
-            margin-right: 1.6rem;
-        }
-    }
-
-    &__expand-button {
-        vertical-align: unset;
-        border-radius: unset;
-        height: unset;
-    }
-}
-
-.p2p-my-ads__modal-error {
-    &--form {
-        height: fit-content !important;
-    }
-    .dc-modal-header__title--p2p-my-ads__modal-error {
-        padding: 2.4rem 2.4rem 0 !important;
-    }
-    .dc-modal__container_p2p-my-ads__modal-error {
-        .dc-modal-footer {
-            padding-top: 0 !important;
-        }
-
-        .dc-modal-header {
-            padding-bottom: 1rem;
-        }
-    }
-}
-
-.edit-ad__offer-amt {
-    .dc-input__label {
-        color: var(--text-general);
-        -webkit-text-fill-color: var(--text-general);
-    }
-
-    .dc-input__field:disabled {
-        color: var(--text-less-prominent);
-        -webkit-text-fill-color: var(--text-less-prominent);
-    }
-}
-
-.dc-modal__container_switch-ads {
-    @include mobile {
-        min-width: 328px !important;
-    }
-}
-.p2p-my-ads__modal-icon {
-    margin-right: 0.8rem;
-}
diff --git a/packages/p2p/src/components/nickname-form/__test__/nickname-form-wrapper.spec.js b/packages/p2p/src/components/nickname-form/__test__/nickname-form-wrapper.spec.js
deleted file mode 100644
index 8f3ef49e91b2..000000000000
--- a/packages/p2p/src/components/nickname-form/__test__/nickname-form-wrapper.spec.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-import { isMobile } from '@deriv/shared';
-import { render, screen } from '@testing-library/react';
-import NicknameFormWrapper from '../nickname-form-wrapper.jsx';
-
-jest.mock('Stores', () => ({
-    ...jest.requireActual('Stores'),
-    useStores: jest.fn(() => ({
-        general_store: { should_show_popup: true },
-    })),
-}));
-
-jest.mock('@deriv/shared', () => ({
-    ...jest.requireActual('@deriv/shared'),
-    isMobile: jest.fn(),
-}));
-
-jest.mock('@deriv/components', () => ({
-    Modal: jest.fn(() => <div>Modal</div>),
-}));
-
-jest.mock('@sendbird/chat', () => ({
-    SendbirdChat: jest.fn().mockReturnValue({}),
-}));
-
-jest.mock('@sendbird/chat/groupChannel', () => ({
-    SendbirdChat: jest.fn().mockReturnValue({}),
-}));
-
-jest.mock('@sendbird/chat/message', () => ({
-    SendbirdChat: jest.fn().mockReturnValue({}),
-}));
-
-describe('<NicknameFormWrapper/>', () => {
-    it('renders mobile view if isMobile is evaluted to true', () => {
-        isMobile.mockImplementation(() => true);
-        render(<NicknameFormWrapper />);
-        expect(screen.getByTestId('mobile_nicknme_form')).toBeInTheDocument();
-    });
-
-    it('renders the desktop view when isMobile is evaluated to false', () => {
-        isMobile.mockReset();
-        render(<NicknameFormWrapper />);
-        expect(screen.getByText('Modal')).toBeInTheDocument();
-        expect(screen.queryByTestId('mobile_nicknme_form')).not.toBeInTheDocument();
-    });
-});
diff --git a/packages/p2p/src/components/nickname-form/__test__/nickname-form.spec.js b/packages/p2p/src/components/nickname-form/__test__/nickname-form.spec.js
deleted file mode 100644
index 823e727fa36f..000000000000
--- a/packages/p2p/src/components/nickname-form/__test__/nickname-form.spec.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import React from 'react';
-import { useStores } from 'Stores';
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import NicknameForm from '../nickname-form.jsx';
-
-const mock_general_store = {
-    onNicknamePopupClose: jest.fn(),
-    createAdvertiser: jest.fn(),
-    validatePopup: jest.fn(),
-    setNicknameError: jest.fn(),
-    nickname_error: false,
-};
-
-jest.mock('Stores', () => ({
-    ...jest.requireActual('Stores'),
-    useStores: jest.fn(() => ({
-        general_store: { ...mock_general_store },
-    })),
-}));
-
-jest.mock('@deriv/shared', () => ({
-    ...jest.requireActual('@deriv/shared'),
-    isMobile: jest.fn(),
-}));
-
-jest.mock('@deriv/components', () => ({
-    ...jest.requireActual('@deriv/components'),
-    Modal: jest.fn(({ children }) => <div>{children}</div>),
-}));
-
-jest.mock('@sendbird/chat', () => ({
-    SendbirdChat: jest.fn().mockReturnValue({}),
-}));
-
-jest.mock('@sendbird/chat/groupChannel', () => ({
-    SendbirdChat: jest.fn().mockReturnValue({}),
-}));
-
-jest.mock('@sendbird/chat/message', () => ({
-    SendbirdChat: jest.fn().mockReturnValue({}),
-}));
-
-describe('<NicknameForm/>', () => {
-    it('closes the popup if close icon is clicked', () => {
-        const { general_store } = useStores();
-        render(<NicknameForm />);
-        fireEvent.click(screen.getByTestId('icon_close'));
-
-        expect(general_store.onNicknamePopupClose).toHaveBeenCalled();
-    });
-
-    it('should disable only the Subit button when empty form is present', () => {
-        render(<NicknameForm />);
-
-        expect(screen.getByRole('button', { name: 'Confirm' })).toBeDisabled();
-        expect(screen.getByRole('button', { name: 'Cancel' })).toBeEnabled();
-    });
-
-    it('shoucl submit data when valid data is present in the form', async () => {
-        const { general_store } = useStores();
-        render(<NicknameForm />);
-        fireEvent.input(screen.getByLabelText(/nickname/i), { target: { value: 'P2P Test' } });
-        fireEvent.click(screen.getByRole('button', { name: /Confirm/i }));
-
-        await waitFor(() => expect(general_store.createAdvertiser).toHaveBeenCalledWith('P2P Test'));
-    });
-
-    it('should close popup if Cancel button is clicked', () => {
-        const { general_store } = useStores();
-        render(<NicknameForm />);
-        fireEvent.input(screen.getByLabelText(/nickname/i), { target: { value: 'P2P Test' } });
-        fireEvent.click(screen.getByRole('button', { name: /Cancel/i }));
-
-        expect(general_store.onNicknamePopupClose).toHaveBeenCalled();
-    });
-});
diff --git a/packages/p2p/src/components/nickname-form/__tests__/nickname-form.spec.tsx b/packages/p2p/src/components/nickname-form/__tests__/nickname-form.spec.tsx
new file mode 100644
index 000000000000..f33cb4509e52
--- /dev/null
+++ b/packages/p2p/src/components/nickname-form/__tests__/nickname-form.spec.tsx
@@ -0,0 +1,183 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useStores } from 'Stores/index';
+import NicknameForm from '../nickname-form';
+
+let mock_store: DeepPartial<ReturnType<typeof useStores>>;
+
+jest.mock('Stores', () => ({
+    ...jest.requireActual('Stores'),
+    useStores: jest.fn(() => mock_store),
+}));
+
+jest.mock('@sendbird/chat', () => ({
+    SendbirdChat: jest.fn().mockReturnValue({}),
+}));
+
+jest.mock('@sendbird/chat/groupChannel', () => ({
+    SendbirdChat: jest.fn().mockReturnValue({}),
+}));
+
+jest.mock('@sendbird/chat/message', () => ({
+    SendbirdChat: jest.fn().mockReturnValue({}),
+}));
+
+describe('<NicknameForm/>', () => {
+    beforeEach(() => {
+        mock_store = {
+            general_store: {
+                createAdvertiser: jest.fn(),
+                nickname: '',
+                onNicknamePopupClose: jest.fn(),
+                setNicknameError: jest.fn(),
+                validatePopup: (values: { [key: string]: string }) => {
+                    const validations = {
+                        nickname: [
+                            (v: string) => !!v,
+                            (v: string) => v.length >= 2,
+                            (v: string) => v.length <= 24,
+                            (v: string) => /^[a-zA-Z0-9\\.@_-]{2,24}$/.test(v),
+                            (v: string) =>
+                                /^(?!(.*(.)\\2{4,})|.*[\\.@_-]{2,}|^([\\.@_-])|.*([\\.@_-])$)[a-zA-Z0-9\\.@_-]{2,24}$/.test(
+                                    v
+                                ),
+                            (v: string) => !/([a-zA-Z0-9\\.@_-])\1{4}/.test(v),
+                        ],
+                    };
+
+                    const nickname_messages = [
+                        'Nickname is required',
+                        'Nickname is too short',
+                        'Nickname is too long',
+                        'Can only contain letters, numbers, and special characters .- _ @.',
+                        'Cannot start, end with, or repeat special characters.',
+                        'Cannot repeat a character more than 4 times.',
+                    ];
+
+                    const errors: { key?: string } = {};
+
+                    Object.entries(validations).forEach(([key, rules]) => {
+                        const error_index = rules.findIndex(v => {
+                            return !v(values[key]);
+                        });
+
+                        if (error_index !== -1) errors[key] = nickname_messages[error_index];
+                    });
+
+                    return errors;
+                },
+            },
+        };
+    });
+    it('should render the component', () => {
+        render(<NicknameForm />);
+
+        expect(screen.getByTestId('dt_nickname_form_content')).toBeInTheDocument();
+    });
+
+    it('should accept a valid nickname', () => {
+        render(<NicknameForm />);
+        userEvent.type(screen.getByLabelText(/nickname/i), 'Advertiser');
+
+        expect(screen.getByRole('button', { name: 'Confirm' })).toBeEnabled();
+    });
+
+    describe('should show an error if the user provides an invalid nickname', () => {
+        it('should show an error if the user provides a nickname with only 1 character', async () => {
+            render(<NicknameForm />);
+            userEvent.type(screen.getByLabelText(/nickname/i), 'A');
+
+            await waitFor(() => {
+                expect(screen.getByText('Nickname is too short')).toBeInTheDocument();
+                expect(screen.getByRole('button', { name: 'Confirm' })).toBeDisabled();
+            });
+        });
+
+        it('should show an error if the user provides a nickname with more than 24 characters', async () => {
+            render(<NicknameForm />);
+            userEvent.type(screen.getByLabelText(/nickname/i), 'Advertiser123456789012345678901');
+
+            await waitFor(() => {
+                expect(screen.getByText('Nickname is too long')).toBeInTheDocument();
+                expect(screen.getByRole('button', { name: 'Confirm' })).toBeDisabled();
+            });
+        });
+
+        it('should show an error if the user provides a nickname that contains special characters other than .- _ @', async () => {
+            render(<NicknameForm />);
+            userEvent.type(screen.getByLabelText(/nickname/i), 'Advertiser!');
+
+            await waitFor(() => {
+                expect(
+                    screen.getByText('Can only contain letters, numbers, and special characters .- _ @.')
+                ).toBeInTheDocument();
+                expect(screen.getByRole('button', { name: 'Confirm' })).toBeDisabled();
+            });
+        });
+
+        it('should show an error if the user provides a nickname that starts with special characters', async () => {
+            render(<NicknameForm />);
+            userEvent.type(screen.getByLabelText(/nickname/i), '.Advertiser');
+
+            await waitFor(() => {
+                expect(screen.getByText('Cannot start, end with, or repeat special characters.')).toBeInTheDocument();
+                expect(screen.getByRole('button', { name: 'Confirm' })).toBeDisabled();
+            });
+        });
+
+        it('should show an error if the user provides a nickname that ends with special characters', async () => {
+            render(<NicknameForm />);
+            userEvent.type(screen.getByLabelText(/nickname/i), 'Advertiser.');
+
+            await waitFor(() => {
+                expect(screen.getByText('Cannot start, end with, or repeat special characters.')).toBeInTheDocument();
+                expect(screen.getByRole('button', { name: 'Confirm' })).toBeDisabled();
+            });
+        });
+
+        it('should show an error if the user provides a nickname that repeats special characters', async () => {
+            render(<NicknameForm />);
+            userEvent.type(screen.getByLabelText(/nickname/i), 'Ad__test');
+
+            await waitFor(() => {
+                expect(screen.getByText('Cannot start, end with, or repeat special characters.')).toBeInTheDocument();
+                expect(screen.getByRole('button', { name: 'Confirm' })).toBeDisabled();
+            });
+        });
+
+        it('should show an error if the user provides a nickname that repeats a character more than 4 times', async () => {
+            render(<NicknameForm />);
+            userEvent.type(screen.getByLabelText(/nickname/i), 'aaaaadvertiser');
+
+            await waitFor(() => {
+                expect(screen.getByText('Cannot repeat a character more than 4 times.')).toBeInTheDocument();
+                expect(screen.getByRole('button', { name: 'Confirm' })).toBeDisabled();
+            });
+        });
+    });
+
+    it('should call onCancel on click of Cancel button', async () => {
+        const onCancel = jest.fn();
+
+        render(<NicknameForm onCancel={onCancel} />);
+
+        userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+
+        await waitFor(() => {
+            expect(onCancel).toHaveBeenCalled();
+            expect(mock_store.general_store.onNicknamePopupClose).toHaveBeenCalled();
+        });
+    });
+
+    it('should create the advertiser on click of Confirm button', async () => {
+        render(<NicknameForm />);
+
+        userEvent.type(screen.getByLabelText(/nickname/i), 'Advertiser');
+        userEvent.click(screen.getByRole('button', { name: 'Confirm' }));
+
+        await waitFor(() => {
+            expect(mock_store.general_store.createAdvertiser).toHaveBeenCalled();
+        });
+    });
+});
diff --git a/packages/p2p/src/components/nickname-form/index.js b/packages/p2p/src/components/nickname-form/index.ts
similarity index 55%
rename from packages/p2p/src/components/nickname-form/index.js
rename to packages/p2p/src/components/nickname-form/index.ts
index f0046da32d11..df2135ab6d7a 100644
--- a/packages/p2p/src/components/nickname-form/index.js
+++ b/packages/p2p/src/components/nickname-form/index.ts
@@ -1,4 +1,4 @@
-import NicknameForm from './nickname-form.jsx';
+import NicknameForm from './nickname-form';
 import './nickname-form.scss';
 
 export default NicknameForm;
diff --git a/packages/p2p/src/components/nickname-form/nickname-form-wrapper.jsx b/packages/p2p/src/components/nickname-form/nickname-form-wrapper.jsx
deleted file mode 100644
index e7cb35b06d6c..000000000000
--- a/packages/p2p/src/components/nickname-form/nickname-form-wrapper.jsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import * as React from 'react';
-import { Modal } from '@deriv/components';
-import { isMobile } from '@deriv/shared';
-import { observer } from 'mobx-react-lite';
-import { useStores } from 'Stores';
-import './nickname-form.scss';
-
-const NicknameFormWrapper = ({ children }) => {
-    const { general_store } = useStores();
-
-    if (isMobile()) {
-        return (
-            <div className='dp2p-nickname__container' data-testid='mobile_nicknme_form'>
-                {children}
-            </div>
-        );
-    }
-
-    return (
-        <Modal className='dp2p-nickname__container' width='440px' is_open={general_store.should_show_popup}>
-            {children}
-        </Modal>
-    );
-};
-
-export default observer(NicknameFormWrapper);
diff --git a/packages/p2p/src/components/nickname-form/nickname-form.jsx b/packages/p2p/src/components/nickname-form/nickname-form.jsx
deleted file mode 100644
index 5531a54bf577..000000000000
--- a/packages/p2p/src/components/nickname-form/nickname-form.jsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import * as React from 'react';
-import { useFormikContext, Formik, Field, Form } from 'formik';
-import { Button, Input, Icon, Text } from '@deriv/components';
-import { isMobile } from '@deriv/shared';
-import { observer } from 'mobx-react-lite';
-import { useStores } from 'Stores';
-import { localize } from 'Components/i18next';
-import IconClose from 'Assets/icon-close.jsx';
-import NicknameFormWrapper from './nickname-form-wrapper.jsx';
-import './nickname-form.scss';
-
-const ButtonGroupComponent = observer(() => {
-    const { general_store } = useStores();
-    const { errors, isSubmitting, values } = useFormikContext();
-
-    return (
-        <Button.Group>
-            <Button secondary type='button' onClick={general_store.onNicknamePopupClose} large>
-                {localize('Cancel')}
-            </Button>
-            <Button
-                type='submit'
-                is_disabled={
-                    !!general_store.nickname_error || !!errors.nickname || !!isSubmitting || values.nickname === ''
-                }
-                primary
-                large
-            >
-                {localize('Confirm')}
-            </Button>
-        </Button.Group>
-    );
-});
-
-const InputComponent = observer(({ field }) => {
-    const { general_store } = useStores();
-    const { errors, handleChange } = useFormikContext();
-
-    return (
-        <Input
-            {...field}
-            data-lpignore='true'
-            error={general_store.nickname_error || errors.nickname}
-            label={localize('Your nickname')}
-            className='dp2p-nickname__form-field'
-            onChange={e => {
-                handleChange(e);
-                general_store.setNicknameError(undefined);
-            }}
-            required
-        />
-    );
-});
-
-const NicknameForm = () => {
-    const { general_store } = useStores();
-
-    const closeForm = () => {
-        general_store.setShouldShowPopup(false);
-    };
-
-    // TODO: move it to hook when this component will be changed as part of refactoring.
-    React.useEffect(() => {
-        window.addEventListener('popstate', closeForm);
-        return () => {
-            window.removeEventListener('popstate', closeForm);
-        };
-    }, [closeForm]);
-
-    return (
-        <NicknameFormWrapper>
-            {!isMobile() && (
-                <div className='dp2p-nickname__form-header dp2p-nickname__form-header--no-border'>
-                    <div className='dp2p-nickname__form-header_wrapper dp2p-nickname__form-header_right'>
-                        <IconClose
-                            className='dp2p-nickname__form-close_icon'
-                            onClick={general_store.onNicknamePopupClose}
-                        />
-                    </div>
-                </div>
-            )}
-            <Formik
-                validate={general_store.validatePopup}
-                initialValues={{ nickname: '' }}
-                onSubmit={async values => {
-                    await general_store.createAdvertiser(values.nickname);
-                }}
-            >
-                <Form className='dp2p-nickname__form-wrapper' noValidate>
-                    <div className='dp2p-nickname__form-content dp2p-nickname__form-content__centre'>
-                        <Icon icon='IcCashierP2pUser' width='128' height='128' />
-                        <Text
-                            as='h5'
-                            size='s'
-                            weight='bold'
-                            line_height='unset'
-                            className='dp2p-nickname__form-content--title'
-                        >
-                            {localize('Choose a nickname')}
-                        </Text>
-                        <Text as='p' size='xs' line_height='unset' className='dp2p-nickname__form-content--text'>
-                            {localize('You will appear to other users as')}
-                        </Text>
-                        <div className='dp2p-nickname__form-field_wrapper'>
-                            <Field name='nickname'>
-                                {({ field }) => {
-                                    return <InputComponent field={field} />;
-                                }}
-                            </Field>
-                        </div>
-                        <div className='dp2p-nickname__form-content--ps'>
-                            {localize('Once set, your nickname cannot be changed.')}
-                        </div>
-                    </div>
-                    <div className='dp2p-nickname__form-footer'>
-                        <ButtonGroupComponent />
-                    </div>
-                </Form>
-            </Formik>
-        </NicknameFormWrapper>
-    );
-};
-
-export default observer(NicknameForm);
diff --git a/packages/p2p/src/components/nickname-form/nickname-form.scss b/packages/p2p/src/components/nickname-form/nickname-form.scss
index 5d8308cb8bb2..74f7bcf06d44 100644
--- a/packages/p2p/src/components/nickname-form/nickname-form.scss
+++ b/packages/p2p/src/components/nickname-form/nickname-form.scss
@@ -1,32 +1,5 @@
-.dp2p-nickname__form {
-    &-header {
-        border-bottom: 1px solid var(--general-section-2);
-
-        &_wrapper {
-            padding: 1.6rem 2.4rem;
-            display: flex;
-            align-items: center;
-            width: 100%;
-            justify-content: space-between;
-            box-sizing: border-box;
-        }
-        &_right {
-            justify-content: flex-end;
-            padding: 2.8rem 2.4rem 0;
-        }
-        &--title {
-            font-weight: bold;
-            color: var(--text-prominent);
-
-            &:first-letter {
-                text-transform: uppercase;
-            }
-        }
-        &--no-border {
-            border: none;
-        }
-    }
-    &-content {
+.nickname-form {
+    &__content {
         &__centre {
             align-items: center;
             display: flex;
@@ -39,30 +12,21 @@
         &--title {
             margin: 1.4rem 0;
         }
+
         &--text {
             margin-bottom: 1.6rem;
         }
-        &--list {
-            color: var(--text-general);
-            font-size: var(--text-size-xs);
-            line-height: 1.43;
 
-            & li {
-                list-style-type: disc;
-                margin: 0.8rem 1.8rem 0;
-            }
-        }
         &--ps {
-            color: var(--text-general);
             padding-top: 0.5rem;
             margin: 1.6rem 0;
-            font-size: var(--text-size-xs);
             align-self: flex-start;
             width: 100%;
             text-align: center;
         }
     }
-    &-field {
+
+    &__field {
         flex: 1;
         height: 4rem;
         margin-bottom: unset;
@@ -86,51 +50,13 @@
                 margin-left: 3.9rem;
             }
         }
-        &--textarea {
-            margin-top: 4.3rem;
-
-            .dc-input__hint {
-                top: 9.7rem;
-            }
-            .dc-input__counter {
-                right: 0rem;
-                top: 9.7rem;
-            }
-        }
-        &--icon {
-            margin: 0 1.6rem;
-            transform: rotate(180deg);
-            width: 3.66rem;
-        }
-        &--trailing {
-            color: var(--text-less-prominent);
-            font-size: var(--text-size-xxs);
-        }
 
         @include mobile {
             width: 88%;
         }
     }
-    &-info {
-        margin-bottom: 1.6rem;
 
-        &_notes {
-            margin-bottom: 2rem;
-        }
-        &--title {
-            color: var(--text-less-prominent);
-            font-size: var(--text-size-xxs);
-        }
-        &--text {
-            color: var(--text-general);
-            font-size: var(--text-size-xs);
-            word-break: break-word;
-        }
-        &--strong {
-            font-weight: bold;
-        }
-    }
-    &-footer {
+    &__footer {
         align-items: center;
         bottom: 0;
         display: flex;
@@ -143,13 +69,4 @@
             padding: 1.6rem;
         }
     }
-    &-close_icon {
-        cursor: pointer;
-        fill: var(--text-general);
-    }
-    &-wrapper {
-        @include mobile {
-            height: 100%;
-        }
-    }
 }
diff --git a/packages/p2p/src/components/nickname-form/nickname-form.tsx b/packages/p2p/src/components/nickname-form/nickname-form.tsx
new file mode 100644
index 000000000000..52bef2e2e682
--- /dev/null
+++ b/packages/p2p/src/components/nickname-form/nickname-form.tsx
@@ -0,0 +1,107 @@
+import React from 'react';
+import { Formik, Field, FieldProps, Form } from 'formik';
+import { observer } from 'mobx-react-lite';
+import { Button, Input, Icon, Text } from '@deriv/components';
+import { localize } from 'Components/i18next';
+import { useStores } from 'Stores';
+import './nickname-form.scss';
+
+type TNicknameFormProps = {
+    onCancel?: () => void;
+};
+
+const NicknameForm = ({ onCancel }: TNicknameFormProps) => {
+    const { general_store } = useStores();
+
+    // TODO: move it to hook when this component will be changed as part of refactoring.
+    React.useEffect(() => {
+        const closeForm = () => {
+            general_store.setShouldShowPopup(false);
+        };
+
+        window.addEventListener('popstate', closeForm);
+        return () => {
+            window.removeEventListener('popstate', closeForm);
+        };
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    return (
+        <Formik
+            validate={general_store.validatePopup}
+            initialValues={{ nickname: '' }}
+            onSubmit={async values => {
+                await general_store.createAdvertiser(values.nickname);
+            }}
+        >
+            {({ errors, handleChange, isSubmitting, values }) => (
+                <Form noValidate>
+                    <div
+                        className='nickname-form__content nickname-form__content__centre'
+                        data-testid='dt_nickname_form_content'
+                    >
+                        <Icon icon='IcCashierP2pUser' width='128' height='128' />
+                        <Text as='h5' weight='bold' line_height='unset' className='nickname-form__content--title'>
+                            {localize('Choose a nickname')}
+                        </Text>
+                        <Text as='p' size='xs' line_height='unset' className='nickname-form__content--text'>
+                            {localize('You will appear to other users as')}
+                        </Text>
+                        <div className='nickname-form__field_wrapper'>
+                            <Field name='nickname'>
+                                {({ field }: FieldProps<string>) => (
+                                    <Input
+                                        {...field}
+                                        data-lpignore='true'
+                                        error={general_store.nickname_error || errors.nickname}
+                                        label={localize('Your nickname')}
+                                        className='nickname-form__field'
+                                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                                            handleChange(e);
+                                            general_store.setNicknameError(undefined);
+                                        }}
+                                        required
+                                    />
+                                )}
+                            </Field>
+                        </div>
+                        <Text className='nickname-form__content--ps' size='xs'>
+                            {localize('Once set, your nickname cannot be changed.')}
+                        </Text>
+                    </div>
+                    <div className='nickname-form__footer'>
+                        <Button.Group>
+                            <Button
+                                secondary
+                                type='button'
+                                onClick={() => {
+                                    onCancel?.();
+                                    general_store.onNicknamePopupClose();
+                                }}
+                                large
+                            >
+                                {localize('Cancel')}
+                            </Button>
+                            <Button
+                                type='submit'
+                                is_disabled={
+                                    !!general_store.nickname_error ||
+                                    !!errors.nickname ||
+                                    !!isSubmitting ||
+                                    values.nickname === ''
+                                }
+                                primary
+                                large
+                            >
+                                {localize('Confirm')}
+                            </Button>
+                        </Button.Group>
+                    </div>
+                </Form>
+            )}
+        </Formik>
+    );
+};
+
+export default observer(NicknameForm);
diff --git a/packages/p2p/src/components/online-status/__tests__/online-status-avatar.spec.tsx b/packages/p2p/src/components/online-status/__tests__/online-status-avatar.spec.tsx
new file mode 100644
index 000000000000..17464c3d0713
--- /dev/null
+++ b/packages/p2p/src/components/online-status/__tests__/online-status-avatar.spec.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import OnlineStatusAvatar from '../online-status-avatar';
+
+const props = {
+    is_online: 0,
+    nickname: 'test',
+    size: 40,
+    text_size: 'xs',
+};
+describe('<OnlineStatusAvatar/>', () => {
+    it('should render shortened nickname as the avatar', () => {
+        render(<OnlineStatusAvatar {...props} />);
+
+        expect(screen.getByText('TE')).toBeInTheDocument();
+    });
+});
diff --git a/packages/p2p/src/components/online-status/__tests__/online-status-icon.spec.tsx b/packages/p2p/src/components/online-status/__tests__/online-status-icon.spec.tsx
new file mode 100644
index 000000000000..6e3d49ff66b7
--- /dev/null
+++ b/packages/p2p/src/components/online-status/__tests__/online-status-icon.spec.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import OnlineStatusIcon from '../online-status-icon';
+
+describe('<OnlineStatusIcon/>', () => {
+    it('should render the default state as offline', () => {
+        render(<OnlineStatusIcon is_online={0} />);
+
+        const icon = screen.getByTestId('dt_online_status_icon');
+        expect(icon).toHaveClass('online-status__icon--offline');
+    });
+
+    it('should render online state when user is online', () => {
+        render(<OnlineStatusIcon is_online={1} />);
+
+        const icon = screen.getByTestId('dt_online_status_icon');
+        expect(icon).toHaveClass('online-status__icon--online');
+    });
+});
diff --git a/packages/p2p/src/components/online-status/__tests__/online-status-label.spec.tsx b/packages/p2p/src/components/online-status/__tests__/online-status-label.spec.tsx
index fb9f74cf4768..4a227420ed22 100644
--- a/packages/p2p/src/components/online-status/__tests__/online-status-label.spec.tsx
+++ b/packages/p2p/src/components/online-status/__tests__/online-status-label.spec.tsx
@@ -1,15 +1,126 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import OnlineStatusLabel from '../online-status-label';
+import moment from 'moment';
+import 'moment/min/locales';
+import { isMobile, toMoment } from '@deriv/shared';
+
+const props = {
+    is_online: 0,
+    last_online_time: 0,
+};
+
+let mock_value: moment.Moment = moment();
+jest.mock('@deriv/shared', () => ({
+    ...jest.requireActual('@deriv/shared'),
+    toMoment: jest.fn(() => mock_value),
+    isMobile: jest.fn(() => false),
+}));
+
+describe('<OnlineStatusLabel/>', () => {
+    it('should render the component with default state', () => {
+        render(<OnlineStatusLabel {...props} />);
+
+        expect(screen.getByText('Seen more than 6 months ago')).toBeInTheDocument();
+    });
+    it('should render component with default state in responsive view', () => {
+        (isMobile as jest.Mock).mockReturnValue(true);
+        render(<OnlineStatusLabel {...props} />);
+
+        expect(screen.getByText('Seen more than 6 months ago')).toBeInTheDocument();
+    });
+    it('should show label "Online" when "last_online_time" is not being passed', () => {
+        const newprops = { ...props, is_online: 1 };
+        render(<OnlineStatusLabel {...newprops} />);
 
-describe('<OnlineStatusLabel />', () => {
-    it('should show online status label', () => {
-        render(<OnlineStatusLabel is_online={1} />);
         expect(screen.getByText('Online')).toBeInTheDocument();
     });
+    it('should show label "Seen 3 hours ago" when last seen is in hours', () => {
+        mock_value = moment('2023-05-30T18:48:38+04:00');
+        (toMoment as jest.Mock).mockReturnValue(mock_value);
+        const newprops = { ...props, last_online_time: 1685446791 };
+        render(<OnlineStatusLabel {...newprops} />);
+
+        expect(screen.getByText('Seen 3 hours ago')).toBeInTheDocument();
+    });
+    it('should show label "Seen 1 hour ago" when user was last online 1 hour ago', () => {
+        mock_value = moment('2023-05-30T16:49:38+04:00');
+        (toMoment as jest.Mock).mockReturnValue(mock_value);
+        const newprops = { ...props, last_online_time: 1685446791 };
+        render(<OnlineStatusLabel {...newprops} />);
+
+        expect(screen.getByText('Seen 1 hour ago')).toBeInTheDocument();
+    });
+    it('should show label "Seen 1 day ago" when user was last online 1 day ago', () => {
+        mock_value = moment('2023-05-31T16:49:38+04:00');
+        (toMoment as jest.Mock).mockReturnValue(mock_value);
+        const newprops = { ...props, last_online_time: 1685446791 };
+        render(<OnlineStatusLabel {...newprops} />);
+
+        expect(screen.getByText('Seen 1 day ago')).toBeInTheDocument();
+    });
+    it('should show label "Seen 3 days ago" when last seen is in days', () => {
+        mock_value = moment('2023-06-02T16:49:38+04:00');
+        (toMoment as jest.Mock).mockReturnValue(mock_value);
+        const newprops = { ...props, last_online_time: 1685446791 };
+        render(<OnlineStatusLabel {...newprops} />);
+
+        expect(screen.getByText('Seen 3 days ago')).toBeInTheDocument();
+    });
+    it('should show label "Seen more than 6 months ago" when last seen is in years', () => {
+        mock_value = moment('2025-06-02T16:49:38+04:00');
+        (toMoment as jest.Mock).mockReturnValue(mock_value);
+        const newprops = { ...props, last_online_time: 1685446791 };
+        render(<OnlineStatusLabel {...newprops} />);
+
+        expect(screen.getByText('Seen more than 6 months ago')).toBeInTheDocument();
+    });
+    it('should show label "Seen 5 months ago" when last seen is in months', () => {
+        mock_value = moment('2023-11-02T16:49:38+04:00');
+        (toMoment as jest.Mock).mockReturnValue(mock_value);
+        const newprops = { ...props, last_online_time: 1685446791 };
+        render(<OnlineStatusLabel {...newprops} />);
+
+        expect(screen.getByText('Seen 5 months ago')).toBeInTheDocument();
+    });
+    it('should show label "Seen more than 6 months ago" when user was last online more than 6 months ago', () => {
+        mock_value = moment('2024-01-02T16:49:38+04:00');
+        (toMoment as jest.Mock).mockReturnValue(mock_value);
+        const newprops = { ...props, last_online_time: 1685446791 };
+        render(<OnlineStatusLabel {...newprops} />);
 
-    it(`should show user's last online status`, () => {
-        render(<OnlineStatusLabel is_online={0} last_online_time={1619515200} />);
         expect(screen.getByText('Seen more than 6 months ago')).toBeInTheDocument();
     });
+    it('should show label "Seen 1 month ago" when user was last online 1 month ago', () => {
+        mock_value = moment('2023-07-02T16:49:38+04:00');
+        (toMoment as jest.Mock).mockReturnValue(mock_value);
+        const newprops = { ...props, last_online_time: 1685446791 };
+        render(<OnlineStatusLabel {...newprops} />);
+
+        expect(screen.getByText('Seen 1 month ago')).toBeInTheDocument();
+    });
+    it('should show label "Seen 1 minute ago" when user was last online 1 minute ago', () => {
+        mock_value = moment('2023-05-30T15:41:38+04:00');
+        (toMoment as jest.Mock).mockReturnValue(mock_value);
+        const newprops = { ...props, last_online_time: 1685446791 };
+        render(<OnlineStatusLabel {...newprops} />);
+
+        expect(screen.getByText('Seen 1 minute ago')).toBeInTheDocument();
+    });
+    it('should show label "Seen 2 minutes ago" when last seen is in minutes', () => {
+        mock_value = moment('2023-05-30T15:42:38+04:00');
+        (toMoment as jest.Mock).mockReturnValue(mock_value);
+        const newprops = { ...props, last_online_time: 1685446791 };
+        render(<OnlineStatusLabel {...newprops} />);
+
+        expect(screen.getByText('Seen 2 minutes ago')).toBeInTheDocument();
+    });
+    it('should show label "Online" when last seen is in seconds', () => {
+        mock_value = moment('2023-05-30T15:40:38+04:00');
+        (toMoment as jest.Mock).mockReturnValue(mock_value);
+        const newprops = { ...props, last_online_time: 1685446791 };
+        render(<OnlineStatusLabel {...newprops} />);
+
+        expect(screen.getByText('Online')).toBeInTheDocument();
+    });
 });
diff --git a/packages/p2p/src/components/online-status/index.js b/packages/p2p/src/components/online-status/index.ts
similarity index 100%
rename from packages/p2p/src/components/online-status/index.js
rename to packages/p2p/src/components/online-status/index.ts
diff --git a/packages/p2p/src/components/online-status/online-status-avatar.jsx b/packages/p2p/src/components/online-status/online-status-avatar.tsx
similarity index 73%
rename from packages/p2p/src/components/online-status/online-status-avatar.jsx
rename to packages/p2p/src/components/online-status/online-status-avatar.tsx
index 29ecd9796df2..3d1ea1628e4a 100644
--- a/packages/p2p/src/components/online-status/online-status-avatar.jsx
+++ b/packages/p2p/src/components/online-status/online-status-avatar.tsx
@@ -1,15 +1,20 @@
 import React from 'react';
-import { Text } from '@deriv/components';
-import PropTypes from 'prop-types';
 import { observer } from 'mobx-react-lite';
+import { Text } from '@deriv/components';
 import { generateHexColourFromNickname, getShortNickname } from 'Utils/string';
 import OnlineStatusIcon from './online-status-icon';
-import './online-status.scss';
 
-const OnlineStatusAvatar = ({ is_online, nickname, size, text_size }) => {
+type TOnlineStatusAvatarProps = {
+    is_online: number | boolean;
+    nickname: string;
+    size: number;
+    text_size: string;
+};
+
+const OnlineStatusAvatar = ({ is_online, nickname, size, text_size }: TOnlineStatusAvatarProps) => {
     return (
         <div className='online-status__avatar'>
-            <Text className='online-status__avatar-text' color='colored-background' line_height='m' size={text_size}>
+            <Text className='online-status__avatar__text' color='colored-background' size={text_size}>
                 {getShortNickname(nickname)}
             </Text>
 
@@ -32,11 +37,4 @@ const OnlineStatusAvatar = ({ is_online, nickname, size, text_size }) => {
     );
 };
 
-OnlineStatusAvatar.propTypes = {
-    is_online: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]).isRequired,
-    nickname: PropTypes.string.isRequired,
-    size: PropTypes.number,
-    text_size: PropTypes.string.isRequired,
-};
-
 export default observer(OnlineStatusAvatar);
diff --git a/packages/p2p/src/components/online-status/online-status-icon.jsx b/packages/p2p/src/components/online-status/online-status-icon.tsx
similarity index 63%
rename from packages/p2p/src/components/online-status/online-status-icon.jsx
rename to packages/p2p/src/components/online-status/online-status-icon.tsx
index db619491dc63..05afaf8ec8ce 100644
--- a/packages/p2p/src/components/online-status/online-status-icon.jsx
+++ b/packages/p2p/src/components/online-status/online-status-icon.tsx
@@ -1,11 +1,16 @@
 import React from 'react';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import { observer } from 'mobx-react-lite';
 
-const OnlineStatusIcon = ({ is_online, size = '1em' }) => {
+type TOnlineStatusIconProps = {
+    is_online: number | boolean;
+    size?: string | number;
+};
+
+const OnlineStatusIcon = ({ is_online, size = '1em' }: TOnlineStatusIconProps) => {
     return (
         <div
+            data-testid='dt_online_status_icon'
             className={classNames('online-status__icon', {
                 'online-status__icon--offline': !is_online,
                 'online-status__icon--online': !!is_online,
@@ -18,9 +23,4 @@ const OnlineStatusIcon = ({ is_online, size = '1em' }) => {
     );
 };
 
-OnlineStatusIcon.propTypes = {
-    is_online: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]).isRequired,
-    size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-};
-
 export default observer(OnlineStatusIcon);
diff --git a/packages/p2p/src/components/online-status/online-status-label.jsx b/packages/p2p/src/components/online-status/online-status-label.jsx
deleted file mode 100644
index 3911f0a8a1bf..000000000000
--- a/packages/p2p/src/components/online-status/online-status-label.jsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-import { Text } from '@deriv/components';
-import { isMobile } from '@deriv/shared';
-import { getLastOnlineLabel } from 'Utils/adverts';
-import { observer } from 'mobx-react-lite';
-import PropTypes from 'prop-types';
-
-const OnlineStatusLabel = ({ is_online, last_online_time, size = isMobile() ? 'xxxs' : 'xs' }) => {
-    return (
-        <Text color='less-prominent' size={size}>
-            {getLastOnlineLabel(is_online, last_online_time)}
-        </Text>
-    );
-};
-
-OnlineStatusLabel.propTypes = {
-    is_online: PropTypes.number.isRequired,
-    last_online_time: PropTypes.number,
-    size: PropTypes.string,
-};
-
-export default observer(OnlineStatusLabel);
diff --git a/packages/p2p/src/components/online-status/online-status-label.tsx b/packages/p2p/src/components/online-status/online-status-label.tsx
new file mode 100644
index 000000000000..b0754fa72fab
--- /dev/null
+++ b/packages/p2p/src/components/online-status/online-status-label.tsx
@@ -0,0 +1,92 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { Duration } from 'moment';
+import { Text } from '@deriv/components';
+import { epochToMoment, getDiffDuration, isMobile, toMoment } from '@deriv/shared';
+import { localize } from 'Components/i18next';
+
+type TOnlineStatusLabelProps = {
+    is_online: number;
+    last_online_time: number;
+    size?: string;
+};
+
+const OnlineStatusLabel = ({
+    is_online,
+    last_online_time,
+    size = isMobile() ? 'xxxs' : 'xs',
+}: TOnlineStatusLabelProps) => {
+    const getDifference = (last_seen_online: number) => {
+        const start_time = epochToMoment(last_seen_online).unix();
+        const end_time = toMoment().unix();
+        return getDiffDuration(start_time, end_time);
+    };
+
+    const getStatusLabel = (diff: Duration) => {
+        if (diff.years()) return localize('Seen more than 6 months ago');
+
+        if (diff.months()) {
+            if (diff.months() > 6) {
+                return localize('Seen more than 6 months ago');
+            }
+            if (diff.months() === 1) {
+                return localize('Seen {{ duration }} month ago', {
+                    duration: diff.months(),
+                });
+            }
+            return localize('Seen {{ duration }} months ago', {
+                duration: diff.months(),
+            });
+        }
+        if (diff.days()) {
+            if (diff.days() === 1) {
+                return localize('Seen {{ duration }} day ago', {
+                    duration: diff.days(),
+                });
+            }
+            return localize('Seen {{ duration }} days ago', {
+                duration: diff.days(),
+            });
+        }
+        if (diff.hours()) {
+            if (diff.hours() === 1) {
+                return localize('Seen {{ duration }} hour ago', {
+                    duration: diff.hours(),
+                });
+            }
+            return localize('Seen {{ duration }} hours ago', {
+                duration: diff.hours(),
+            });
+        }
+        if (diff.minutes()) {
+            if (diff.minutes() === 1) {
+                return localize('Seen {{ duration }} minute ago', {
+                    duration: diff.minutes(),
+                });
+            }
+            return localize('Seen {{ duration }} minutes ago', {
+                duration: diff.minutes(),
+            });
+        }
+        return localize('Online');
+    };
+
+    const last_online_label = () => {
+        if (!is_online) {
+            if (last_online_time) {
+                const diff = getDifference(last_online_time);
+                return getStatusLabel(diff);
+            }
+            return localize('Seen more than 6 months ago');
+        }
+        return localize('Online');
+    };
+
+    return (
+        <Text color='less-prominent' size={size}>
+            {last_online_label()}
+        </Text>
+    );
+};
+
+export default observer(OnlineStatusLabel);
diff --git a/packages/p2p/src/components/online-status/online-status.scss b/packages/p2p/src/components/online-status/online-status.scss
index 916d6a53fed4..1135cb8dd82a 100644
--- a/packages/p2p/src/components/online-status/online-status.scss
+++ b/packages/p2p/src/components/online-status/online-status.scss
@@ -2,7 +2,7 @@
     &__icon {
         width: 1rem;
         height: 1rem;
-        margin: auto 0.5rem auto 0rem;
+        margin: auto 0.5rem auto 0;
         border-radius: 50%;
 
         @include mobile {
@@ -13,6 +13,7 @@
         &--online {
             background: var(--text-profit-success);
         }
+
         &--offline {
             background: var(--checkbox-disabled-grey);
         }
@@ -26,7 +27,7 @@
         width: fit-content;
         height: fit-content;
 
-        &-text {
+        &__text {
             position: absolute;
         }
 
diff --git a/packages/p2p/src/components/order-details/__test__/order-details-footer.spec.js b/packages/p2p/src/components/order-details/__test__/order-details-footer.spec.js
index 63f605bc2590..2cf460dfab3d 100644
--- a/packages/p2p/src/components/order-details/__test__/order-details-footer.spec.js
+++ b/packages/p2p/src/components/order-details/__test__/order-details-footer.spec.js
@@ -3,7 +3,7 @@ import { useStores } from 'Stores';
 import { fireEvent, render, screen } from '@testing-library/react';
 import OrderDetailsFooter from '../order-details-footer.jsx';
 
-const mock_order_store = {
+const mock_order_info = {
     is_buy_order: false,
     is_my_ad: false,
     is_sell_order: false,
@@ -12,26 +12,31 @@ const mock_order_store = {
     should_show_only_received_button: false,
     should_show_only_complain_button: false,
 };
-const mockFn = jest.fn();
+
+const mock_order_store = {
+    order_information: { ...mock_order_info },
+    getAdvertiserInfo: jest.fn(),
+    getWebsiteStatus: jest.fn(),
+    confirmOrderRequest: jest.fn(),
+};
 jest.mock('Stores', () => ({
     ...jest.requireActual('Stores'),
     useStores: jest.fn(() => ({
         order_store: {
-            order_information: { ...mock_order_store },
-            getAdvertiserInfo: jest.fn(() => mockFn()),
-            getWebsiteStatus: jest.fn(),
+            ...mock_order_store,
         },
     })),
 }));
 const setShouldShowConfirmModalFn = jest.fn();
+const setShouldShowCancelOrderModalFn = jest.fn();
 const setShouldShowComplainModalFn = jest.fn();
 
 describe('<OrderDetailsFooter />', () => {
     it('Should show Cancel order and paid button', () => {
         useStores.mockImplementation(() => ({
             order_store: {
-                order_information: { ...mock_order_store, should_show_cancel_and_paid_button: true },
-                getAdvertiserInfo: jest.fn(() => mockFn()),
+                ...mock_order_store,
+                order_information: { ...mock_order_info, should_show_cancel_and_paid_button: true },
             },
         }));
 
@@ -42,9 +47,10 @@ describe('<OrderDetailsFooter />', () => {
     });
 
     it('cancel order when clicked', () => {
+        jest.spyOn(React, 'useState').mockImplementation(init => [init, setShouldShowCancelOrderModalFn]);
         render(<OrderDetailsFooter />);
         fireEvent.click(screen.getByRole('button', { name: 'Cancel order' }));
-        expect(mockFn).toBeCalled();
+        expect(setShouldShowCancelOrderModalFn).toHaveBeenCalled();
     });
 
     it('should open confirm popup when clicked', () => {
@@ -57,7 +63,8 @@ describe('<OrderDetailsFooter />', () => {
     it('should show complain and received button', () => {
         useStores.mockImplementation(() => ({
             order_store: {
-                order_information: { ...mock_order_store, should_show_complain_and_received_button: true },
+                ...mock_order_store,
+                order_information: { ...mock_order_info, should_show_complain_and_received_button: true },
             },
         }));
         render(<OrderDetailsFooter />);
@@ -82,7 +89,8 @@ describe('<OrderDetailsFooter />', () => {
     it('should show compain button', () => {
         useStores.mockImplementation(() => ({
             order_store: {
-                order_information: { ...mock_order_store, should_show_only_complain_button: true },
+                ...mock_order_store,
+                order_information: { ...mock_order_info, should_show_only_complain_button: true },
             },
         }));
         render(<OrderDetailsFooter />);
@@ -99,7 +107,8 @@ describe('<OrderDetailsFooter />', () => {
     it('should show only received button', () => {
         useStores.mockImplementation(() => ({
             order_store: {
-                order_information: { ...mock_order_store, should_show_only_received_button: true },
+                ...mock_order_store,
+                order_information: { ...mock_order_info, should_show_only_received_button: true },
             },
         }));
         render(<OrderDetailsFooter />);
diff --git a/packages/p2p/src/components/order-details/__test__/order-details.spec.js b/packages/p2p/src/components/order-details/__test__/order-details.spec.js
index fa2945933499..698b9960cf0c 100644
--- a/packages/p2p/src/components/order-details/__test__/order-details.spec.js
+++ b/packages/p2p/src/components/order-details/__test__/order-details.spec.js
@@ -1,6 +1,7 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { StoreProvider, mockStore } from '@deriv/stores';
 import { useStores } from 'Stores';
+import { render, screen } from '@testing-library/react';
 import OrderDetails from '../order-details.jsx';
 
 const mock_order_info = {
@@ -12,7 +13,7 @@ const mock_order_info = {
     has_timer_expired: false,
     id: 123,
     is_active_order: false,
-    is_buy_order: false,
+    is_buy_order_for_user: false,
     is_buyer_confirmed_order: false,
     is_my_ad: false,
     is_pending_order: false,
@@ -45,20 +46,54 @@ const mock_order_store = {
     has_order_payment_method_details: false,
     order_payment_method_details: [],
     setOrderPaymentMethodDetails: jest.fn(),
+    getSettings: jest.fn(),
+    getWebsiteStatus: jest.fn(),
+    setRatingValue: jest.fn(),
+    setIsRecommended: jest.fn(),
+    setOrderId: jest.fn(),
+    setActiveOrder: jest.fn(),
 };
 const mock_sendbird_store = {
     should_show_chat_on_orders: false,
     setChatChannelUrl: jest.fn(),
+    setHasChatError: jest.fn(),
     createChatForNewOrder: jest.fn(),
     registerEventListeners: jest.fn().mockReturnValue(jest.fn()),
     registerMobXReactions: jest.fn().mockReturnValue(jest.fn()),
 };
 
+const mock_my_profile_store = {
+    getPaymentMethodsList: jest.fn(),
+};
+
+const mock_buy_sell_store = {
+    is_create_order_subscribed: true,
+    setIsCreateOrderSubscribed: jest.fn(),
+    unsubscribeCreateOrder: jest.fn(),
+};
+
+const mock_general_store = {
+    redirectToOrderDetails: jest.fn(),
+};
+
 jest.mock('Stores', () => ({
     ...jest.requireActual('Stores'),
     useStores: jest.fn(() => ({
         order_store: { ...mock_order_store },
         sendbird_store: { ...mock_sendbird_store },
+        my_profile_store: { ...mock_my_profile_store },
+        buy_sell_store: { ...mock_buy_sell_store },
+        general_store: { ...mock_general_store },
+    })),
+}));
+
+jest.mock('Components/modal-manager/modal-manager-context', () => ({
+    ...jest.requireActual('Components/modal-manager/modal-manager-context'),
+    useModalManagerContext: jest.fn(() => ({
+        isCurrentModal: false,
+        showModal: () => {},
+        hideModal: () => {},
+        useRegisterModalProps: () => {},
     })),
 }));
 
@@ -71,7 +106,7 @@ jest.mock('Components/order-details/order-details-footer.jsx', () => jest.fn(()
 
 jest.mock('Components/order-details/order-info-block.jsx', () => jest.fn(() => <div>Order Info Block</div>));
 
-jest.mock('Components/orders/chat/chat.jsx', () => jest.fn(() => <div>Chat section</div>));
+jest.mock('Pages/orders/chat/chat.jsx', () => jest.fn(() => <div>Chat section</div>));
 
 jest.mock('Components/p2p-accordion/p2p-accordion.jsx', () => jest.fn(() => <div>Payment methods listed</div>));
 
@@ -80,11 +115,20 @@ describe('<OrderDetails/>', () => {
         useStores.mockReturnValue({
             order_store: {
                 ...mock_order_store,
-                order_information: { ...mock_order_info, should_show_lost_funds_banner: true, chat_channel_url: null },
+                order_information: {
+                    ...mock_order_info,
+                    should_show_lost_funds_banner: true,
+                    chat_channel_url: null,
+                },
             },
             sendbird_store: { ...mock_sendbird_store },
+            my_profile_store: { ...mock_my_profile_store },
+            buy_sell_store: { ...mock_buy_sell_store },
+            general_store: { ...mock_general_store },
+        });
+        render(<OrderDetails onPageReturn={jest.fn()} />, {
+            wrapper: ({ children }) => <StoreProvider store={mockStore({})}>{children}</StoreProvider>,
         });
-        render(<OrderDetails onPageReturn={jest.fn()} />);
         expect(
             screen.getByText("Don't risk your funds with cash transactions. Use bank transfers or e-wallets instead.")
         ).toBeInTheDocument();
@@ -96,8 +140,13 @@ describe('<OrderDetails/>', () => {
                 order_information: { ...mock_order_info, should_highlight_success: true },
             },
             sendbird_store: { ...mock_sendbird_store },
+            my_profile_store: { ...mock_my_profile_store },
+            buy_sell_store: { ...mock_buy_sell_store },
+            general_store: { ...mock_general_store },
+        });
+        render(<OrderDetails onPageReturn={jest.fn()} />, {
+            wrapper: ({ children }) => <StoreProvider store={mockStore({})}>{children}</StoreProvider>,
         });
-        render(<OrderDetails onPageReturn={jest.fn()} />);
         expect(screen.getByText('Result str')).toBeInTheDocument();
     });
     it('should display footer info when show_order_footer is set', () => {
@@ -107,8 +156,13 @@ describe('<OrderDetails/>', () => {
                 order_information: { ...mock_order_info, should_show_order_footer: true },
             },
             sendbird_store: { ...mock_sendbird_store },
+            my_profile_store: { ...mock_my_profile_store },
+            buy_sell_store: { ...mock_buy_sell_store },
+            general_store: { ...mock_general_store },
+        });
+        render(<OrderDetails onPageReturn={jest.fn()} />, {
+            wrapper: ({ children }) => <StoreProvider store={mockStore({})}>{children}</StoreProvider>,
         });
-        render(<OrderDetails onPageReturn={jest.fn()} />);
         expect(screen.getByText('Order details footer')).toBeInTheDocument();
     });
     it('should display formatted currency when the order is pending', () => {
@@ -118,8 +172,13 @@ describe('<OrderDetails/>', () => {
                 order_information: { ...mock_order_info, is_pending_order: true },
             },
             sendbird_store: { ...mock_sendbird_store },
+            my_profile_store: { ...mock_my_profile_store },
+            buy_sell_store: { ...mock_buy_sell_store },
+            general_store: { ...mock_general_store },
+        });
+        render(<OrderDetails onPageReturn={jest.fn()} />, {
+            wrapper: ({ children }) => <StoreProvider store={mockStore({})}>{children}</StoreProvider>,
         });
-        render(<OrderDetails onPageReturn={jest.fn()} />);
         expect(screen.getByText('40.00 AED')).toBeInTheDocument();
     });
     it('should display payment details when Order is active', () => {
@@ -130,40 +189,44 @@ describe('<OrderDetails/>', () => {
                 has_order_payment_method_details: true,
             },
             sendbird_store: { ...mock_sendbird_store },
+            my_profile_store: { ...mock_my_profile_store },
+            buy_sell_store: { ...mock_buy_sell_store },
+            general_store: { ...mock_general_store },
+        });
+        render(<OrderDetails onPageReturn={jest.fn()} />, {
+            wrapper: ({ children }) => <StoreProvider store={mockStore({})}>{children}</StoreProvider>,
         });
-        render(<OrderDetails onPageReturn={jest.fn()} />);
         expect(screen.getByText('Payment details')).toBeInTheDocument();
     });
-    it('should render Chat component if show_chaton_orders is enabled', () => {
+    it('should render Chat component if should_show_chat_on_orders is enabled', () => {
         useStores.mockReturnValue({
             order_store: {
                 ...mock_order_store,
             },
             sendbird_store: { ...mock_sendbird_store, should_show_chat_on_orders: true },
+            my_profile_store: { ...mock_my_profile_store },
+            buy_sell_store: { ...mock_buy_sell_store },
+            general_store: { ...mock_general_store },
+        });
+        render(<OrderDetails onPageReturn={jest.fn()} />, {
+            wrapper: ({ children }) => <StoreProvider store={mockStore({})}>{children}</StoreProvider>,
         });
-        render(<OrderDetails onPageReturn={jest.fn()} />);
         expect(screen.getByText('Chat section')).toBeInTheDocument();
     });
-    it('should display Buy section when is_buy_order flag is enabled', () => {
+    it('should display Buy section when is_buy_order_for_user flag is enabled', () => {
         useStores.mockReturnValue({
             order_store: {
                 ...mock_order_store,
-                order_information: { ...mock_order_info, is_buy_order: true },
+                order_information: { ...mock_order_info, is_buy_order_for_user: true },
             },
             sendbird_store: { ...mock_sendbird_store },
+            my_profile_store: { ...mock_my_profile_store },
+            buy_sell_store: { ...mock_buy_sell_store },
+            general_store: { ...mock_general_store },
         });
-        render(<OrderDetails onPageReturn={jest.fn()} />);
-        expect(screen.getByText('Buy USD order')).toBeInTheDocument();
-    });
-    it('should display Buy section when is_sell_order as well as is_my_ad flag is enabled', () => {
-        useStores.mockReturnValue({
-            order_store: {
-                ...mock_order_store,
-                order_information: { ...mock_order_info, is_sell_order: true, is_my_ad: true },
-            },
-            sendbird_store: { ...mock_sendbird_store },
+        render(<OrderDetails onPageReturn={jest.fn()} />, {
+            wrapper: ({ children }) => <StoreProvider store={mockStore({})}>{children}</StoreProvider>,
         });
-        render(<OrderDetails onPageReturn={jest.fn()} />);
         expect(screen.getByText('Buy USD order')).toBeInTheDocument();
     });
 });
diff --git a/packages/p2p/src/components/order-details/__tests__/order-details-wrapper.spec.js b/packages/p2p/src/components/order-details/__tests__/order-details-wrapper.spec.js
index 9121b1d56b98..a8cfa8ee6bba 100644
--- a/packages/p2p/src/components/order-details/__tests__/order-details-wrapper.spec.js
+++ b/packages/p2p/src/components/order-details/__tests__/order-details-wrapper.spec.js
@@ -28,7 +28,7 @@ describe('<OrderDetailsWrapper />', () => {
         isMobile.mockReturnValue(true);
         const mobile_props = {
             className: 'order-details',
-            body_className: 'order-details--body',
+            body_className: 'order-details__body',
             height_offset: '80px',
             is_flex: true,
             is_modal_open: true,
@@ -53,7 +53,7 @@ describe('<OrderDetailsWrapper />', () => {
         render(<OrderDetailsWrapper {...desktop_props} />);
 
         await waitFor(() => {
-            expect(screen.getByTestId('order-details-wrapper-desktop')).toBeInTheDocument();
+            expect(screen.getByTestId('dt_page_return')).toBeInTheDocument();
             expect(screen.getByText('desktop test')).toBeInTheDocument();
         });
     });
diff --git a/packages/p2p/src/components/order-details/order-details-complain-modal-radio-group.jsx b/packages/p2p/src/components/order-details/order-details-complain-modal-radio-group.jsx
index 41ca978e4e54..7241e1a1cb4e 100644
--- a/packages/p2p/src/components/order-details/order-details-complain-modal-radio-group.jsx
+++ b/packages/p2p/src/components/order-details/order-details-complain-modal-radio-group.jsx
@@ -3,11 +3,11 @@ import React from 'react';
 import { RadioGroup } from '@deriv/components';
 import { isMobile } from '@deriv/shared';
 import { localize } from 'Components/i18next';
-import 'Components/order-details/order-details-complain-modal.scss';
+import 'Components/order-details/order-details-complain-modal-radio-group.scss';
 
 const OrderDetailsComplainModalRadioGroup = ({ dispute_reason, onCheckboxChange, is_buy_order_for_user }) => (
     <RadioGroup
-        className='order-details-complain-modal__radio-group'
+        className='order-details-complain-modal-radio-group'
         name='reason'
         onToggle={event => onCheckboxChange(event.target.value)}
         selected={dispute_reason}
diff --git a/packages/p2p/src/components/order-details/order-details-complain-modal-radio-group.scss b/packages/p2p/src/components/order-details/order-details-complain-modal-radio-group.scss
new file mode 100644
index 000000000000..de22f14a7f1d
--- /dev/null
+++ b/packages/p2p/src/components/order-details/order-details-complain-modal-radio-group.scss
@@ -0,0 +1,37 @@
+.order-details-complain-modal-radio-group:not(.dc-radio-group__item) {
+    display: inline;
+
+    @include mobile {
+        margin-top: 0;
+
+        .dc-radio-group__item-wrapper {
+            border-bottom: 1px solid var(--general-section-1);
+
+            > .dc-radio-group__item {
+                margin: 1.6rem;
+            }
+        }
+    }
+
+    .dc-radio-group__item {
+        @include tablet-up {
+            border-bottom: 1px solid var(--general-section-1);
+            padding: 1.6rem 0;
+        }
+
+        .dc-radio-group__label {
+            flex: 1;
+        }
+
+        .dc-radio-group__circle {
+            align-self: start;
+            margin-top: 0.3rem;
+            border: 2px solid var(--text-less-prominent);
+            transition: all 0.1s ease-in-out;
+
+            &--selected {
+                border: 4px solid var(--brand-red-coral);
+            }
+        }
+    }
+}
diff --git a/packages/p2p/src/components/order-details/order-details-complain-modal.jsx b/packages/p2p/src/components/order-details/order-details-complain-modal.jsx
index 8b08b1e2d693..8c3ae89e6c0d 100644
--- a/packages/p2p/src/components/order-details/order-details-complain-modal.jsx
+++ b/packages/p2p/src/components/order-details/order-details-complain-modal.jsx
@@ -4,13 +4,13 @@ import { Button, MobileFullPageModal, Modal, Text } from '@deriv/components';
 import { isMobile, useIsMounted } from '@deriv/shared';
 import { localize, Localize } from 'Components/i18next';
 import { requestWS } from 'Utils/websocket';
-import FormError from 'Components/form/error.jsx';
+import FormError from 'Components/section-error';
 import OrderDetailsComplainModalRadioGroup from './order-details-complain-modal-radio-group.jsx';
 import 'Components/order-details/order-details-complain-modal.scss';
 
 const ComplainExplanation = () => (
     <div className='order-details-complain-modal__explanation'>
-        <Text size='xxs' line_height='m' color='general'>
+        <Text size='xxs'>
             <Localize i18n_default_text="If your complaint isn't listed here, please contact our Customer Support team." />
         </Text>
     </div>
@@ -95,7 +95,7 @@ const OrderDetailsComplainModal = ({
             toggleModal={hideComplainOrderModal}
             has_close_icon
             renderTitle={() => (
-                <Text color='prominent' line-height='m' size='s' weight='bold'>
+                <Text color='prominent' weight='bold'>
                     <Localize i18n_default_text="What's your complaint?" />
                 </Text>
             )}
diff --git a/packages/p2p/src/components/order-details/order-details-complain-modal.scss b/packages/p2p/src/components/order-details/order-details-complain-modal.scss
index b2b0392cc17c..aa14c5b5a71a 100644
--- a/packages/p2p/src/components/order-details/order-details-complain-modal.scss
+++ b/packages/p2p/src/components/order-details/order-details-complain-modal.scss
@@ -21,44 +21,6 @@
             border-radius: 8px;
         }
     }
-
-    &__radio-group:not(.dc-radio-group__item) {
-        display: inline;
-
-        @include mobile {
-            margin-top: 0;
-
-            .dc-radio-group__item-wrapper {
-                border-bottom: 1px solid var(--general-section-1);
-
-                > .dc-radio-group__item {
-                    margin: 1.6rem;
-                }
-            }
-        }
-
-        .dc-radio-group__item {
-            @include tablet-up {
-                border-bottom: 1px solid var(--general-section-1);
-                padding: 1.6rem 0;
-            }
-
-            .dc-radio-group__label {
-                flex: 1;
-            }
-
-            .dc-radio-group__circle {
-                align-self: start;
-                margin-top: 0.3rem;
-                border: 2px solid var(--text-less-prominent);
-                transition: all 0.1s ease-in-out;
-
-                &--selected {
-                    border: 4px solid var(--brand-red-coral);
-                }
-            }
-        }
-    }
 }
 
 .dc-modal__container_order-details-complain-modal {
diff --git a/packages/p2p/src/components/order-details/order-details-footer.jsx b/packages/p2p/src/components/order-details/order-details-footer.jsx
index 72219419d554..d941bc0d2c1e 100644
--- a/packages/p2p/src/components/order-details/order-details-footer.jsx
+++ b/packages/p2p/src/components/order-details/order-details-footer.jsx
@@ -5,6 +5,7 @@ import { observer } from 'mobx-react-lite';
 import { Localize } from 'Components/i18next';
 import { useStores } from 'Stores';
 import OrderDetailsComplainModal from './order-details-complain-modal.jsx';
+import './order-details-footer.scss';
 
 const OrderDetailsFooter = observer(() => {
     const { general_store, order_store } = useStores();
@@ -48,8 +49,8 @@ const OrderDetailsFooter = observer(() => {
     if (should_show_cancel_and_paid_button) {
         return (
             <React.Fragment>
-                <div className='order-details-card__footer'>
-                    <div className='order-details-card__footer--right'>
+                <div className='order-details-footer'>
+                    <div className='order-details-footer--right'>
                         <Button.Group>
                             <Button large secondary onClick={showCancelOrderModal} is_disabled={!chat_channel_url}>
                                 <Localize i18n_default_text='Cancel order' />
@@ -67,8 +68,8 @@ const OrderDetailsFooter = observer(() => {
     if (should_show_complain_and_received_button) {
         return (
             <React.Fragment>
-                <div className='order-details-card__footer'>
-                    <div className='order-details-card__footer--right'>
+                <div className='order-details-footer'>
+                    <div className='order-details-footer--right'>
                         <Button.Group>
                             <Button large tertiary onClick={showComplainOrderModal}>
                                 <Localize i18n_default_text='Complain' />
@@ -92,8 +93,8 @@ const OrderDetailsFooter = observer(() => {
     if (should_show_only_complain_button) {
         return (
             <React.Fragment>
-                <div className='order-details-card__footer'>
-                    <div className='order-details-card__footer--right'>
+                <div className='order-details-footer'>
+                    <div className='order-details-footer--right'>
                         <Button large tertiary onClick={showComplainOrderModal}>
                             <Localize i18n_default_text='Complain' />
                         </Button>
@@ -112,8 +113,8 @@ const OrderDetailsFooter = observer(() => {
     if (should_show_only_received_button) {
         return (
             <React.Fragment>
-                <div className='order-details-card__footer'>
-                    <div className='order-details-card__footer--right'>
+                <div className='order-details-footer'>
+                    <div className='order-details-footer--right'>
                         <Button large primary onClick={showConfirmOrderModal}>
                             <Localize i18n_default_text="I've received payment" />
                         </Button>
diff --git a/packages/p2p/src/components/order-details/order-details-footer.scss b/packages/p2p/src/components/order-details/order-details-footer.scss
new file mode 100644
index 000000000000..63ccda5c7620
--- /dev/null
+++ b/packages/p2p/src/components/order-details/order-details-footer.scss
@@ -0,0 +1,19 @@
+.order-details-footer {
+    display: flex;
+    justify-content: space-between;
+    margin-top: auto;
+    padding: 1.6rem 2.4rem;
+
+    @include mobile {
+        width: 100%;
+        padding: unset;
+    }
+    @include tablet-up {
+        width: 100%;
+        padding: 0 1.6rem 1.6rem;
+    }
+
+    &--right {
+        margin-left: auto;
+    }
+}
diff --git a/packages/p2p/src/components/order-details/order-details-timer.jsx b/packages/p2p/src/components/order-details/order-details-timer.jsx
index e1cfc916d2bf..2fb4c246a08d 100644
--- a/packages/p2p/src/components/order-details/order-details-timer.jsx
+++ b/packages/p2p/src/components/order-details/order-details-timer.jsx
@@ -1,10 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react-lite';
+import { Text } from '@deriv/components';
 import { localize } from 'Components/i18next';
 import { secondsToTimer } from 'Utils/date-time';
 import ServerTime from 'Utils/server-time';
 import { useStores } from 'Stores';
+import './order-details-timer.scss';
 
 const OrderDetailsTimer = observer(() => {
     const getTimeLeft = time => {
@@ -36,9 +38,13 @@ const OrderDetailsTimer = observer(() => {
 
     if (should_show_order_timer) {
         return (
-            <div className='order-details-card__header-timer'>
-                <div>{localize('Time left')}</div>
-                <div className='order-details-card__header-timer-counter'>{remaining_time}</div>
+            <div className='order-details-timer'>
+                <Text size='xxs' align='center'>
+                    {localize('Time left')}
+                </Text>
+                <Text className='order-details-timer__counter' size='xxs' align='center'>
+                    {remaining_time}
+                </Text>
             </div>
         );
     }
diff --git a/packages/p2p/src/components/order-details/order-details-timer.scss b/packages/p2p/src/components/order-details/order-details-timer.scss
new file mode 100644
index 000000000000..b53069563ded
--- /dev/null
+++ b/packages/p2p/src/components/order-details/order-details-timer.scss
@@ -0,0 +1,11 @@
+.order-details-timer {
+    display: flex;
+    flex-direction: column;
+
+    &__counter {
+        margin-top: 0.4rem;
+        border: 1px solid var(--border-normal);
+        border-radius: 16px;
+        padding: 0.4rem 0.8rem;
+    }
+}
diff --git a/packages/p2p/src/components/order-details/order-details-wrapper.jsx b/packages/p2p/src/components/order-details/order-details-wrapper.jsx
index d67207e4124d..8192c0260b26 100644
--- a/packages/p2p/src/components/order-details/order-details-wrapper.jsx
+++ b/packages/p2p/src/components/order-details/order-details-wrapper.jsx
@@ -3,7 +3,7 @@ import { useHistory } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { Icon, MobileFullPageModal, ThemedScrollbars } from '@deriv/components';
 import { isMobile, routes } from '@deriv/shared';
-import PageReturn from 'Components/page-return/page-return.jsx';
+import PageReturn from 'Components/page-return';
 import { useStores } from 'Stores';
 import OrderDetailsFooter from 'Components/order-details/order-details-footer.jsx';
 
@@ -24,7 +24,7 @@ const OrderDetailsWrapper = ({ children, page_title }) => {
         <div data-testid='order-details-wrapper-mobile'>
             <MobileFullPageModal
                 className='order-details'
-                body_className='order-details--body'
+                body_className='order-details__body'
                 height_offset='80px'
                 is_flex
                 is_modal_open
diff --git a/packages/p2p/src/components/order-details/order-details.jsx b/packages/p2p/src/components/order-details/order-details.jsx
index 9ac983a47a37..6a2fdc92d6b1 100644
--- a/packages/p2p/src/components/order-details/order-details.jsx
+++ b/packages/p2p/src/components/order-details/order-details.jsx
@@ -6,7 +6,7 @@ import { formatMoney, isDesktop, isMobile, routes } from '@deriv/shared';
 import { useStore, observer } from '@deriv/stores';
 import { Localize, localize } from 'Components/i18next';
 import { api_error_codes } from '../../constants/api-error-codes.js';
-import Chat from 'Components/orders/chat/chat.jsx';
+import Chat from 'Pages/orders/chat/chat.jsx';
 import StarRating from 'Components/star-rating';
 import UserRatingButton from 'Components/user-rating-button';
 import OrderDetailsFooter from 'Components/order-details/order-details-footer.jsx';
@@ -17,7 +17,7 @@ import P2PAccordion from 'Components/p2p-accordion/p2p-accordion.jsx';
 import { useStores } from 'Stores';
 import PaymentMethodAccordionHeader from './payment-method-accordion-header.jsx';
 import PaymentMethodAccordionContent from './payment-method-accordion-content.jsx';
-import MyProfileSeparatorContainer from '../my-profile/my-profile-separator-container';
+import MyProfileSeparatorContainer from 'Pages/my-profile/my-profile-separator-container';
 import { setDecimalPlaces, removeTrailingZeros, roundOffDecimal } from 'Utils/format-value';
 import { getDateAfterHours } from 'Utils/date-time';
 import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
@@ -134,7 +134,7 @@ const OrderDetails = observer(() => {
             order_store.setOrderPaymentMethodDetails(undefined);
             order_store.setOrderId(null);
             order_store.setActiveOrder(null);
-            history.replace({
+            history?.replace({
                 search: '',
                 hash: location.hash,
             });
@@ -225,7 +225,7 @@ const OrderDetails = observer(() => {
                 <div className='order-details-card'>
                     <div className='order-details-card__header'>
                         <div className='order-details-card__header--left'>
-                            <div
+                            <Text
                                 className={classNames(
                                     'order-details-card__header-status',
                                     'order-details-card__header-status--info',
@@ -235,19 +235,26 @@ const OrderDetails = observer(() => {
                                         'order-details-card__header-status--success': should_highlight_success,
                                     }
                                 )}
+                                as='p'
+                                line_height='s'
+                                weight='bold'
                             >
                                 {status_string}
-                            </div>
+                            </Text>
                             {should_highlight_success && (
-                                <div className='order-details-card__message'>{labels.result_string}</div>
+                                <Text as='p' line_height='xl' size='xs'>
+                                    {labels.result_string}
+                                </Text>
                             )}
                             {!has_timer_expired && (is_pending_order || is_buyer_confirmed_order) && (
-                                <div className='order-details-card__header-amount'>
+                                <Text size='m'>
                                     {display_payment_amount} {local_currency}
-                                </div>
+                                </Text>
                             )}
                             <div className='order-details-card__header-id'>
-                                <Localize i18n_default_text='Order ID {{ id }}' values={{ id }} />
+                                <Text color='less-prominent' size='xxs' line_height='l'>
+                                    <Localize i18n_default_text='Order ID {{ id }}' values={{ id }} />
+                                </Text>
                             </div>
                         </div>
                         <div className='order-details-card__header--right'>
@@ -298,7 +305,7 @@ const OrderDetails = observer(() => {
                                                 {labels.payment_details}
                                             </Text>
                                             <Button
-                                                className='p2p-my-ads__expand-button'
+                                                className='my-ads__expand-button'
                                                 onClick={() => setShouldExpandAll(prev_state => !prev_state)}
                                                 transparent
                                             >
@@ -384,7 +391,7 @@ const OrderDetails = observer(() => {
                             <React.Fragment>
                                 <MyProfileSeparatorContainer.Line className='order-details-card--rating__line' />
                                 <div className='order-details-card__ratings'>
-                                    <Text color='prominent' size='s' weight='bold'>
+                                    <Text color='prominent' weight='bold'>
                                         <Localize i18n_default_text='Your transaction experience' />
                                     </Text>
                                     <div className='order-details-card__ratings--row'>
diff --git a/packages/p2p/src/components/order-details/order-details.scss b/packages/p2p/src/components/order-details/order-details.scss
index 4e4a02c29b75..b882bdc1ff14 100644
--- a/packages/p2p/src/components/order-details/order-details.scss
+++ b/packages/p2p/src/components/order-details/order-details.scss
@@ -19,7 +19,7 @@ $card-width: 456px;
         }
     }
 
-    &--body {
+    &__body {
         display: flex;
         flex-direction: column;
     }
@@ -154,16 +154,10 @@ $card-width: 456px;
             }
         }
         &-id {
-            color: var(--text-less-prominent);
-            font-size: var(--text-size-xxs);
-            line-height: 1.8rem;
             margin-top: 0.4rem;
         }
-        &-status {
-            font-size: var(--text-size-s);
-            line-height: 2.4rem;
-            font-weight: bold;
 
+        &-status {
             &--info {
                 color: var(--text-less-prominent);
             }
@@ -177,37 +171,6 @@ $card-width: 456px;
                 color: var(--status-warning);
             }
         }
-        &-amount {
-            line-height: 1.5;
-            font-size: 2.4rem;
-        }
-        &-method {
-            font-size: 1.2rem;
-            border: 1px solid var(--border-normal);
-            width: fit-content;
-            border-radius: 1.6rem;
-            padding: 0.4rem 1rem;
-            margin-top: 0.8rem;
-        }
-        &-timer {
-            font-size: 1.2rem;
-            line-height: 1.5;
-            text-align: center;
-
-            &-counter {
-                margin-top: 0.4rem;
-                border: 1px solid var(--border-normal);
-                border-radius: 16px;
-                padding: 0.4rem 0.8rem;
-            }
-        }
-        &-payment-info {
-            margin-top: 0.8rem;
-            font-size: 1.4rem;
-            line-height: 1.4;
-            color: var(--text-general);
-            word-break: break-word;
-        }
     }
 
     &__info {
@@ -221,20 +184,6 @@ $card-width: 456px;
             padding: 1.6rem 0;
         }
 
-        &-block {
-            margin-bottom: 1.6rem;
-
-            &-value {
-                display: flex;
-                flex-direction: column;
-                font-size: 1.4rem;
-                line-height: 1.43;
-                color: var(--text-general);
-                word-break: break-word;
-                white-space: pre-line;
-            }
-        }
-
         &-columns {
             display: flex;
             flex-flow: row nowrap;
@@ -248,28 +197,6 @@ $card-width: 456px;
             flex: 1;
         }
     }
-    &__footer {
-        display: flex;
-        justify-content: space-between;
-        margin-top: auto;
-        font-size: 1.4rem;
-        line-height: 1.43;
-        color: var(--text-general);
-        padding: 1.6rem 2.4rem;
-
-        @include mobile {
-            width: 100%;
-            padding: unset;
-        }
-        @include tablet-up {
-            width: 100%;
-            padding: 0 1.6rem 1.6rem;
-        }
-
-        &--right {
-            margin-left: auto;
-        }
-    }
 
     &--line {
         margin: 0;
@@ -277,12 +204,6 @@ $card-width: 456px;
         width: $card-width;
     }
 
-    &__message {
-        font-size: var(--text-size-xs);
-        line-height: 2rem;
-        color: var(--text-general);
-    }
-
     &__modal-checkbox {
         margin: 2.4rem -0.7rem;
     }
diff --git a/packages/p2p/src/components/order-details/order-info-block.jsx b/packages/p2p/src/components/order-details/order-info-block.jsx
index b2ddf499037c..0287c9d61b88 100644
--- a/packages/p2p/src/components/order-details/order-info-block.jsx
+++ b/packages/p2p/src/components/order-details/order-info-block.jsx
@@ -2,13 +2,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Text } from '@deriv/components';
 import classNames from 'classnames';
+import './order-info-block.scss';
 
 const OrderInfoBlock = ({ className, label, value, size = 'xxs', weight = 'normal' }) => (
-    <div className={classNames('order-details-card__info-block', className)}>
+    <div className={classNames('order-info-block', className)}>
         <Text as='p' color='prominent' size={size} weight={weight}>
             {label}
         </Text>
-        <div className='order-details-card__info-block-value'>{value}</div>
+        <Text className='order-info-block-value' line_height='s' size='xs'>
+            {value}
+        </Text>
     </div>
 );
 
diff --git a/packages/p2p/src/components/order-details/order-info-block.scss b/packages/p2p/src/components/order-details/order-info-block.scss
new file mode 100644
index 000000000000..789710e55a8c
--- /dev/null
+++ b/packages/p2p/src/components/order-details/order-info-block.scss
@@ -0,0 +1,10 @@
+.order-info-block {
+    margin-bottom: 1.6rem;
+
+    &-value {
+        display: flex;
+        flex-direction: column;
+        word-break: break-word;
+        white-space: pre-line;
+    }
+}
diff --git a/packages/p2p/src/components/order-details/payment-method-accordion-header.jsx b/packages/p2p/src/components/order-details/payment-method-accordion-header.jsx
index 84e6789b34c3..061d48119889 100644
--- a/packages/p2p/src/components/order-details/payment-method-accordion-header.jsx
+++ b/packages/p2p/src/components/order-details/payment-method-accordion-header.jsx
@@ -2,22 +2,23 @@ import React from 'react';
 import { Text } from '@deriv/components';
 import PaymentMethodIcon from 'Components/payment-method-icon';
 import classNames from 'classnames';
+import './payment-method-accordion-header.scss';
 
 const PaymentMethodAccordionHeader = ({ payment_method }) => {
     const { display_name, type } = payment_method;
 
     return (
-        <div className='order-details-card__accordion-row'>
+        <div className='payment-method-accordion-header__row'>
             <PaymentMethodIcon
                 className={classNames({
-                    'order-details-card__accordion-icon': type !== 'ewallet',
+                    'payment-method-accordion-header__icon': type !== 'ewallet',
                 })}
                 display_name={display_name}
             />
             <div
                 className={classNames({
-                    'order-details-card__accordion-title': type !== 'ewallet',
-                    'order-details-card__accordion-column': type === 'ewallet',
+                    'payment-method-accordion-header__title': type !== 'ewallet',
+                    'payment-method-accordion-header__column': type === 'ewallet',
                 })}
             >
                 <Text color='prominent' size='xs'>
diff --git a/packages/p2p/src/components/order-details/payment-method-accordion-header.scss b/packages/p2p/src/components/order-details/payment-method-accordion-header.scss
new file mode 100644
index 000000000000..082dcaad4fc6
--- /dev/null
+++ b/packages/p2p/src/components/order-details/payment-method-accordion-header.scss
@@ -0,0 +1,34 @@
+.payment-method-accordion-header {
+    &__row {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+
+    &__column {
+        display: flex;
+        flex-direction: column;
+        padding-left: 1.6rem;
+    }
+    &__icon {
+        flex-shrink: 0;
+    }
+    &__title {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        margin-left: 2rem;
+        word-break: break-word;
+    }
+
+    .dc-accordion__item {
+        border: none;
+    }
+
+    .dc-accordion__item-header {
+        align-items: center;
+        border: none;
+        display: flex;
+        justify-content: space-between;
+    }
+}
diff --git a/packages/p2p/src/components/orders/orders.scss b/packages/p2p/src/components/orders/orders.scss
deleted file mode 100644
index ca8c454bc6fb..000000000000
--- a/packages/p2p/src/components/orders/orders.scss
+++ /dev/null
@@ -1,269 +0,0 @@
-.orders {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-
-    @include mobile {
-        overflow: hidden;
-    }
-
-    & .initial-loader {
-        @include mobile {
-            height: 80%;
-        }
-    }
-    & .p2p-empty {
-        &__button {
-            @include mobile {
-                width: 100%;
-                padding: 1rem;
-            }
-        }
-        @include mobile {
-            padding: 4rem 1.6rem;
-            margin: 0rem;
-        }
-    }
-    &__empty {
-        width: fit-content;
-        margin: 0 auto;
-        transform: translate(-100%, 20%);
-        text-align: center;
-
-        &-text {
-            margin: 24px 0;
-            font-weight: 700;
-            font-size: var(--text-size-s);
-        }
-    }
-    &-tab {
-        @include mobile {
-            height: 7.7rem;
-            width: 100%;
-            display: flex;
-            justify-content: center;
-            flex-direction: column;
-            border-bottom: 1px solid var(--general-section-1);
-        }
-        &__header {
-            width: fit-content;
-            border-radius: 4px;
-
-            &-filter {
-                .dc-button-menu__wrapper {
-                    button.dc-btn {
-                        height: 3.6rem;
-                        min-width: 12rem !important;
-                        white-space: nowrap;
-                        padding: 0.8rem 1.8rem;
-                    }
-                }
-            }
-            @include mobile {
-                align-self: center;
-            }
-        }
-    }
-    &__button {
-        margin: 0 1.6rem;
-    }
-    &__dialog {
-        position: absolute;
-        height: 100%;
-        width: 100%;
-        top: 0;
-        left: 0;
-        background: var(--shadow-menu);
-
-        & .dc-dialog__dialog {
-            width: auto;
-            height: auto;
-            padding: 0;
-            max-width: 440px;
-            min-height: 0;
-            min-width: 44rem;
-        }
-        & .dc-dialog__content {
-            margin-bottom: 0;
-            width: 100%;
-            max-width: 100%;
-        }
-    }
-    &__separator {
-        width: 100%;
-        border-bottom: 1px solid var(--general-section-1);
-    }
-    &__mobile {
-        display: grid;
-        grid-template-areas: ('header header-right' 'title title');
-        padding: 1.6rem;
-        border-bottom: 1px solid var(--general-section-1);
-
-        &--attention {
-            background: var(--button-tertiary-hover);
-            border-bottom: 2px solid var(--general-section-1);
-        }
-
-        &-highlight-danger {
-            background-color: #fff8f8;
-        }
-        & .dc-table__row {
-            border-bottom: unset;
-        }
-
-        &-separator {
-            width: 100vw;
-            height: 1px;
-            border-top: 1px solid var(--general-section-1);
-            position: absolute;
-            left: 0rem;
-            margin: 1.6rem 0rem;
-        }
-        &-header {
-            grid-area: header;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            height: 2.4rem;
-
-            &-right {
-                grid-area: header-right;
-                display: flex;
-                justify-self: end;
-            }
-        }
-        &-title {
-            align-items: start;
-            display: flex;
-            flex-direction: column;
-            grid-area: title;
-            height: 4.9rem;
-            justify-content: space-around;
-            justify-self: start;
-        }
-
-        &-chat {
-            margin-left: 0.9rem;
-            display: flex;
-            align-self: center;
-        }
-        &-time {
-            border: solid 1px var(--border-normal);
-            border-radius: 1.6rem;
-            width: 7.8rem;
-            height: 2.4rem;
-            letter-spacing: 1px;
-        }
-        &-status {
-            width: auto;
-            padding: 0.2rem 1.6rem;
-            border-radius: 1.6rem;
-        }
-    }
-    &__table {
-        display: flex;
-        flex: 1;
-        flex-direction: column;
-
-        &-body {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-        }
-
-        &-row {
-            padding: 2.4rem;
-            cursor: pointer;
-
-            &--attention {
-                background: var(--button-tertiary-hover);
-            }
-            &:not(.orders__table-row--header) {
-                cursor: pointer;
-
-                &:hover {
-                    background: var(--general-hover);
-                }
-            }
-        }
-        &-time {
-            border: solid 1px var(--border-normal);
-            border-radius: 16px;
-            width: 78px;
-            height: 24px;
-            padding: 2px;
-            text-align: center;
-            font-size: var(--text-size-xxs);
-            letter-spacing: 1px;
-        }
-        &-grid {
-            // Sizes are different for inactive due to timeout being full time string.
-            grid-template-columns: 1fr 1.5fr 2fr 3fr 1.5fr 1.5fr 2fr;
-
-            &--active {
-                grid-template-columns: 1fr 1.5fr 2fr 3fr 1.5fr 1.5fr 1.5fr;
-                margin-right: 0.5rem;
-            }
-        }
-        &-status {
-            border-radius: 16px;
-            padding: 0.2rem 1.6rem;
-            white-space: nowrap;
-
-            &--danger {
-                color: var(--brand-red-coral);
-                background-color: $color-status-error;
-            }
-            &--alert {
-                color: var(--status-warning);
-                background-color: var(--status-alert-background);
-            }
-            &--success {
-                color: var(--text-profit-success);
-                background-color: $color-status-announcement;
-            }
-            &--disabled {
-                color: var(--text-less-prominent);
-                background-color: rgba(153, 153, 153, 0.16);
-            }
-            &--info {
-                color: var(--status-info);
-                background-color: rgba(28, 90, 227, 0.16);
-            }
-        }
-
-        .dc-table__header {
-            > .orders__table-grid {
-                padding: 0 2.4rem;
-            }
-        }
-    }
-
-    &__data-list {
-        flex: 1;
-
-        &__data-list-body {
-            flex: 1;
-        }
-
-        .data-list__body-wrapper {
-            flex: 1;
-        }
-    }
-    &__banner {
-        margin-top: 1.6rem;
-        width: fit-content;
-
-        @include mobile {
-            margin: 1.6rem 1.6rem 0;
-
-            .dc-hint-box {
-                align-items: normal;
-
-                &__icon {
-                    width: 3.5rem;
-                }
-            }
-        }
-    }
-}
diff --git a/packages/p2p/src/components/empty/__test__/p2p-empty.spec.js b/packages/p2p/src/components/p2p-empty/__test__/p2p-empty.spec.tsx
similarity index 58%
rename from packages/p2p/src/components/empty/__test__/p2p-empty.spec.js
rename to packages/p2p/src/components/p2p-empty/__test__/p2p-empty.spec.tsx
index 61b0f7d87a60..1cc5a8e76e15 100644
--- a/packages/p2p/src/components/empty/__test__/p2p-empty.spec.js
+++ b/packages/p2p/src/components/p2p-empty/__test__/p2p-empty.spec.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import P2pEmpty from '../empty.jsx';
+import P2pEmpty from '../p2p-empty';
 
 describe('<P2PEmpty/>', () => {
     it('renders component with passed title and children', () => {
         render(
-            <P2pEmpty title='P2P Test'>
-                <div data-testid='test_child'>Testing P2P Empty</div>
+            <P2pEmpty title='P2P Test' has_tabs={false} icon={''}>
+                <div>Testing P2P Empty</div>
             </P2pEmpty>
         );
 
         expect(screen.getByText('P2P Test')).toBeInTheDocument();
-        expect(screen.getByTestId('test_child')).toBeInTheDocument();
+        expect(screen.getByText('Testing P2P Empty')).toBeInTheDocument();
     });
 });
diff --git a/packages/p2p/src/components/p2p-empty/index.ts b/packages/p2p/src/components/p2p-empty/index.ts
new file mode 100644
index 000000000000..14a65e6c4cb7
--- /dev/null
+++ b/packages/p2p/src/components/p2p-empty/index.ts
@@ -0,0 +1,4 @@
+import P2pEmpty from './p2p-empty';
+import './p2p-empty.scss';
+
+export default P2pEmpty;
diff --git a/packages/p2p/src/components/empty/empty.scss b/packages/p2p/src/components/p2p-empty/p2p-empty.scss
similarity index 76%
rename from packages/p2p/src/components/empty/empty.scss
rename to packages/p2p/src/components/p2p-empty/p2p-empty.scss
index 56781f5e3889..a1bc763a5e7a 100644
--- a/packages/p2p/src/components/empty/empty.scss
+++ b/packages/p2p/src/components/p2p-empty/p2p-empty.scss
@@ -12,17 +12,11 @@
     &-icon {
         margin-bottom: 2.4rem;
     }
+
     &-title {
         margin: 0.8rem;
     }
-    &-text {
-        font-size: var(--text-size-xs);
-        margin: 1.2rem 0;
 
-        p {
-            line-height: 1.43;
-        }
-    }
     &__button {
         text-decoration: none;
         margin-top: 1.6rem;
diff --git a/packages/p2p/src/components/empty/empty.jsx b/packages/p2p/src/components/p2p-empty/p2p-empty.tsx
similarity index 50%
rename from packages/p2p/src/components/empty/empty.jsx
rename to packages/p2p/src/components/p2p-empty/p2p-empty.tsx
index 692a6ebdbd05..820fc5bb1a64 100644
--- a/packages/p2p/src/components/empty/empty.jsx
+++ b/packages/p2p/src/components/p2p-empty/p2p-empty.tsx
@@ -1,29 +1,25 @@
-import classNames from 'classnames';
 import React from 'react';
-import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import { Icon, Text } from '@deriv/components';
-import './empty.scss';
 
-const P2pEmpty = ({ className, children, has_tabs, icon, title }) => {
+type TP2pEmptyProps = {
+    className?: string;
+    children: React.ReactNode;
+    has_tabs?: boolean;
+    icon: string;
+    title: string;
+};
+
+const P2pEmpty = ({ className, children, has_tabs = false, icon, title }: TP2pEmptyProps) => {
     return (
         <div className={classNames(className, 'p2p-empty', { 'p2p-empty--no-tabs': !has_tabs })}>
             <Icon icon={icon} className='p2p-empty-icon' size={128} />
             <div className='p2p-empty-title'>
-                <Text color='general' line_height='m' size='s' weight='bold'>
-                    {title}
-                </Text>
+                <Text weight='bold'>{title}</Text>
             </div>
             {children}
         </div>
     );
 };
 
-P2pEmpty.propTypes = {
-    children: PropTypes.any,
-    className: PropTypes.string,
-    has_tabs: PropTypes.bool,
-    icon: PropTypes.string,
-    title: PropTypes.string,
-};
-
 export default P2pEmpty;
diff --git a/packages/p2p/src/components/page-return/__test__/page-return.spec.tsx b/packages/p2p/src/components/page-return/__test__/page-return.spec.tsx
new file mode 100644
index 000000000000..e69abe8cf85a
--- /dev/null
+++ b/packages/p2p/src/components/page-return/__test__/page-return.spec.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import PageReturn from '../page-return';
+
+describe('<PageReturn/>', () => {
+    it('renders component with passed props', () => {
+        render(<PageReturn page_title='Page Title' onClick={jest.fn()} />);
+
+        expect(screen.getByText('Page Title')).toBeInTheDocument();
+    });
+});
diff --git a/packages/p2p/src/components/page-return/index.ts b/packages/p2p/src/components/page-return/index.ts
new file mode 100644
index 000000000000..5edb225bc965
--- /dev/null
+++ b/packages/p2p/src/components/page-return/index.ts
@@ -0,0 +1,4 @@
+import PageReturn from './page-return';
+import './page-return.scss';
+
+export default PageReturn;
diff --git a/packages/p2p/src/components/page-return/page-return.scss b/packages/p2p/src/components/page-return/page-return.scss
index cc76c54d5973..f7a5378c9f14 100644
--- a/packages/p2p/src/components/page-return/page-return.scss
+++ b/packages/p2p/src/components/page-return/page-return.scss
@@ -2,14 +2,10 @@
     display: flex;
     justify-content: flex-start;
     align-items: center;
-    font-size: 1.6rem;
-    font-weight: bold;
-    line-height: 1.75;
-    color: var(--text-general);
     margin: 2.4rem 0;
 
     &__button {
-        line-height: 1rem;
+        line-height: 0.8rem;
         cursor: pointer;
         border-radius: $BORDER_RADIUS;
         padding-right: 0.8rem;
diff --git a/packages/p2p/src/components/page-return/page-return.jsx b/packages/p2p/src/components/page-return/page-return.tsx
similarity index 54%
rename from packages/p2p/src/components/page-return/page-return.jsx
rename to packages/p2p/src/components/page-return/page-return.tsx
index ae4f0edf257f..5951ac919cc2 100644
--- a/packages/p2p/src/components/page-return/page-return.jsx
+++ b/packages/p2p/src/components/page-return/page-return.tsx
@@ -1,26 +1,24 @@
 import React from 'react';
 import classNames from 'classnames';
 import { Icon, Text } from '@deriv/components';
-import PropTypes from 'prop-types';
-import './page-return.scss';
 
-const PageReturn = ({ className, onClick, page_title }) => {
+type TPageReturnProps = {
+    className?: string;
+    onClick: () => void;
+    page_title: string;
+};
+
+const PageReturn = ({ className = '', onClick, page_title }: TPageReturnProps) => {
     return (
-        <div className={classNames('page-return', className)} data-testid='order-details-wrapper-desktop'>
+        <div className={classNames('page-return', className)} data-testid='dt_page_return'>
             <div onClick={onClick} className='page-return__button'>
                 <Icon icon='IcArrowLeftBold' size={16} />
             </div>
-            <Text size='s' color='general' line_height='m' weight='bold'>
+            <Text line_height='l' weight='bold'>
                 {page_title}
             </Text>
         </div>
     );
 };
 
-PageReturn.propTypes = {
-    className: PropTypes.string,
-    onClick: PropTypes.func,
-    page_title: PropTypes.string,
-};
-
 export default PageReturn;
diff --git a/packages/p2p/src/components/rating-cell-renderer/rating-cell-renderer.jsx b/packages/p2p/src/components/rating-cell-renderer/rating-cell-renderer.jsx
index ef305ad08f99..cd712946a435 100644
--- a/packages/p2p/src/components/rating-cell-renderer/rating-cell-renderer.jsx
+++ b/packages/p2p/src/components/rating-cell-renderer/rating-cell-renderer.jsx
@@ -8,9 +8,9 @@ const RatingCellRenderer = ({ has_review_details, is_reviewable, rating, onClick
     return has_review_details ? (
         <div className='rating-cell-renderer'>
             <StarRating
-                empty_star_className='rating-cell-renderer--star'
+                empty_star_className='rating-cell-renderer__star'
                 empty_star_icon='IcEmptyStar'
-                full_star_className='rating-cell-renderer--star'
+                full_star_className='rating-cell-renderer__star'
                 full_star_icon='IcFullStar'
                 initial_value={rating}
                 is_readonly
diff --git a/packages/p2p/src/components/rating-cell-renderer/rating-cell-renderer.scss b/packages/p2p/src/components/rating-cell-renderer/rating-cell-renderer.scss
index 88d497151019..f615d56f9a2c 100644
--- a/packages/p2p/src/components/rating-cell-renderer/rating-cell-renderer.scss
+++ b/packages/p2p/src/components/rating-cell-renderer/rating-cell-renderer.scss
@@ -1,7 +1,7 @@
 .rating-cell-renderer {
     margin-left: auto;
 
-    &--star {
+    &__star {
         pointer-events: none;
 
         > svg {
diff --git a/packages/p2p/src/components/recommend-user/__test__/recommend-user.spec.tsx b/packages/p2p/src/components/recommend-user/__test__/recommend-user.spec.tsx
new file mode 100644
index 000000000000..0516a166167d
--- /dev/null
+++ b/packages/p2p/src/components/recommend-user/__test__/recommend-user.spec.tsx
@@ -0,0 +1,91 @@
+import React from 'react';
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import RecommendUser from '../recommend-user';
+
+describe('<RecommendUser />', () => {
+    const recommend_user_props = {
+        is_buy_order_for_user: false,
+        is_user_recommended_previously: null,
+        onClickClearRecommendation: jest.fn(),
+        onClickNotRecommended: jest.fn(),
+        onClickRecommended: jest.fn(),
+    };
+
+    it('should render the component with correct message if it is not a buy order for the user and both buttons', () => {
+        render(<RecommendUser {...recommend_user_props} />);
+
+        expect(screen.getByText('Would you recommend this buyer?')).toBeInTheDocument();
+        expect(screen.getAllByRole('button').length).toBe(2);
+    });
+
+    it('should render the component with correct message if it is a buy order for the user and both buttons', () => {
+        render(<RecommendUser {...recommend_user_props} is_buy_order_for_user />);
+
+        expect(screen.getByText('Would you recommend this seller?')).toBeInTheDocument();
+        expect(screen.getAllByRole('button').length).toBe(2);
+    });
+
+    it('should auto select the Yes button if the user was previously recommended', () => {
+        render(<RecommendUser {...recommend_user_props} is_user_recommended_previously={1} />);
+
+        const yesButton = screen.getByRole('button', { name: 'Yes' });
+        const noButton = screen.getByRole('button', { name: 'No' });
+
+        const yesText = within(yesButton).getByText('Yes');
+        const noText = within(noButton).getByText('No');
+
+        expect(yesText).toHaveStyle('color: var(--text-prominent)');
+        expect(noText).toHaveStyle('color: var(--text-less-prominent)');
+    });
+
+    it('should disable the Yes Button after being clicked', () => {
+        render(<RecommendUser {...recommend_user_props} is_user_recommended_previously={1} />);
+
+        const yesButton = screen.getByRole('button', { name: 'Yes' });
+        const yesText = within(yesButton).getByText('Yes');
+
+        userEvent.click(yesButton);
+
+        expect(yesText).toHaveStyle('color: var(--text-less-prominent)');
+        expect(recommend_user_props.onClickClearRecommendation).toHaveBeenCalledTimes(1);
+        expect(recommend_user_props.onClickRecommended).toHaveBeenCalledTimes(1);
+    });
+
+    it('should disable the No Button after being clicked', () => {
+        render(<RecommendUser {...recommend_user_props} is_user_recommended_previously={0} />);
+
+        const noButton = screen.getByRole('button', { name: 'No' });
+        const noText = within(noButton).getByText('No');
+
+        expect(noText).toHaveStyle('color: var(--text-prominent)');
+
+        userEvent.click(noButton);
+
+        expect(noText).toHaveStyle('color: var(--text-less-prominent)');
+        expect(recommend_user_props.onClickClearRecommendation).toHaveBeenCalledTimes(1);
+        expect(recommend_user_props.onClickNotRecommended).toHaveBeenCalledTimes(1);
+    });
+
+    it('should disable the other button if one of the buttons are selected', () => {
+        render(<RecommendUser {...recommend_user_props} is_user_recommended_previously={0} />);
+
+        const yesButton = screen.getByRole('button', { name: 'Yes' });
+        const noButton = screen.getByRole('button', { name: 'No' });
+
+        userEvent.click(yesButton);
+
+        const yesText = within(yesButton).getByText('Yes');
+        const noText = within(noButton).getByText('No');
+
+        expect(yesText).toHaveStyle('color: var(--text-prominent)');
+        expect(noText).toHaveStyle('color: var(--text-less-prominent)');
+        expect(recommend_user_props.onClickRecommended).toHaveBeenCalledTimes(1);
+
+        userEvent.click(noButton);
+
+        expect(noText).toHaveStyle('color: var(--text-prominent)');
+        expect(yesText).toHaveStyle('color: var(--text-less-prominent)');
+        expect(recommend_user_props.onClickNotRecommended).toHaveBeenCalledTimes(2);
+    });
+});
diff --git a/packages/p2p/src/components/recommend-user/index.js b/packages/p2p/src/components/recommend-user/index.ts
similarity index 55%
rename from packages/p2p/src/components/recommend-user/index.js
rename to packages/p2p/src/components/recommend-user/index.ts
index b4f72946dec0..cd50c7fec5f9 100644
--- a/packages/p2p/src/components/recommend-user/index.js
+++ b/packages/p2p/src/components/recommend-user/index.ts
@@ -1,4 +1,4 @@
-import RecommendUser from './recommend-user.jsx';
+import RecommendUser from './recommend-user';
 import './recommend-user.scss';
 
 export default RecommendUser;
diff --git a/packages/p2p/src/components/recommend-user/recommend-user.scss b/packages/p2p/src/components/recommend-user/recommend-user.scss
index 25efdc1869f0..0388bf0842e7 100644
--- a/packages/p2p/src/components/recommend-user/recommend-user.scss
+++ b/packages/p2p/src/components/recommend-user/recommend-user.scss
@@ -2,7 +2,7 @@
     display: flex;
     flex-direction: column;
 
-    &--block {
+    &__block {
         align-items: center;
         border: 1px solid var(--border-normal);
         border-radius: 4px;
@@ -16,13 +16,13 @@
         }
     }
 
-    &--row {
+    &__row {
         display: flex;
         flex-direction: row;
         gap: 0.5rem;
     }
 
-    &--text {
+    &__text {
         margin: 1.6rem 0;
     }
 }
diff --git a/packages/p2p/src/components/recommend-user/recommend-user.jsx b/packages/p2p/src/components/recommend-user/recommend-user.tsx
similarity index 76%
rename from packages/p2p/src/components/recommend-user/recommend-user.jsx
rename to packages/p2p/src/components/recommend-user/recommend-user.tsx
index c0069f1a0855..366320a0e2f2 100644
--- a/packages/p2p/src/components/recommend-user/recommend-user.jsx
+++ b/packages/p2p/src/components/recommend-user/recommend-user.tsx
@@ -1,15 +1,22 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Button, Icon, Text } from '@deriv/components';
 import { Localize } from 'Components/i18next';
 
+type TRecommendUserProps = {
+    is_buy_order_for_user: boolean;
+    is_user_recommended_previously: number | null;
+    onClickClearRecommendation: () => void;
+    onClickNotRecommended: () => void;
+    onClickRecommended: () => void;
+};
+
 const RecommendUser = ({
     is_buy_order_for_user,
     is_user_recommended_previously,
     onClickClearRecommendation,
     onClickNotRecommended,
     onClickRecommended,
-}) => {
+}: TRecommendUserProps) => {
     const [is_no_selected, setIsNoSelected] = React.useState(false);
     const [is_yes_selected, setIsYesSelected] = React.useState(false);
 
@@ -55,18 +62,18 @@ const RecommendUser = ({
 
     return (
         <div className='recommend-user'>
-            <Text className='recommend-user--text' color='prominent' size='xs'>
+            <Text className='recommend-user__text' color='prominent' size='xs'>
                 {is_buy_order_for_user ? (
                     <Localize i18n_default_text='Would you recommend this seller?' />
                 ) : (
                     <Localize i18n_default_text='Would you recommend this buyer?' />
                 )}
             </Text>
-            <div className='recommend-user--row'>
-                <Button className='recommend-user--block' onClick={handleSelectYes} secondary>
+            <div className='recommend-user__row'>
+                <Button className='recommend-user__block' onClick={handleSelectYes} secondary>
                     <Icon
-                        className='recommend-user--block__icon'
-                        color={!is_yes_selected && 'disabled'}
+                        className='recommend-user__block__icon'
+                        color={!is_yes_selected ? 'disabled' : undefined}
                         icon='IcThumbsUp'
                         size={16}
                     />
@@ -74,10 +81,10 @@ const RecommendUser = ({
                         <Localize i18n_default_text='Yes' />
                     </Text>
                 </Button>
-                <Button className='recommend-user--block' onClick={handleSelectNo} secondary>
+                <Button className='recommend-user__block' onClick={handleSelectNo} secondary>
                     <Icon
-                        className='recommend-user--block__icon'
-                        color={!is_no_selected && 'disabled'}
+                        className='recommend-user__block__icon'
+                        color={!is_no_selected ? 'disabled' : undefined}
                         icon='IcThumbsDown'
                         size={16}
                     />
@@ -90,12 +97,4 @@ const RecommendUser = ({
     );
 };
 
-RecommendUser.propTypes = {
-    is_buy_order_for_user: PropTypes.bool,
-    is_user_recommended_previously: PropTypes.number,
-    onClickClearRecommendation: PropTypes.func,
-    onClickNotRecommended: PropTypes.func,
-    onClickRecommended: PropTypes.func,
-};
-
 export default RecommendUser;
diff --git a/packages/p2p/src/components/recommended-by/__tests__/recommended-by.spec.tsx b/packages/p2p/src/components/recommended-by/__tests__/recommended-by.spec.tsx
new file mode 100644
index 000000000000..f9d91593551e
--- /dev/null
+++ b/packages/p2p/src/components/recommended-by/__tests__/recommended-by.spec.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { isMobile } from '@deriv/shared';
+import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
+import RecommendedBy from '../recommended-by';
+
+jest.mock('Components/modal-manager/modal-manager-context', () => ({
+    ...jest.requireActual('Components/modal-manager/modal-manager-context'),
+    useModalManagerContext: jest.fn().mockReturnValue({
+        showModal: jest.fn(),
+    }),
+}));
+
+jest.mock('@deriv/shared', () => ({
+    ...jest.requireActual('@deriv/shared'),
+    isMobile: jest.fn(() => false),
+}));
+
+describe('<RecommendedBy />', () => {
+    it('it should show `No one has recommended this trader yet` and `recommended_average` equals to 0% if there is no props passed', () => {
+        render(<RecommendedBy />);
+        userEvent.click(screen.getByTestId('dt_popover_wrapper'));
+        expect(screen.getByText('No one has recommended this trader yet')).toBeInTheDocument();
+        expect(screen.getByText('0%')).toBeInTheDocument();
+    });
+
+    it('it should show `Recommended by 1 trader` and `recommended_average` equals to 100%', () => {
+        render(<RecommendedBy recommended_count={1} recommended_average={100} />);
+        userEvent.click(screen.getByTestId('dt_popover_wrapper'));
+        expect(screen.getByText('Recommended by 1 trader')).toBeInTheDocument();
+        expect(screen.getByText('100%')).toBeInTheDocument();
+    });
+
+    it('it should show `Recommended by 2 traders` and `recommended_average` equals to 50%', () => {
+        render(<RecommendedBy recommended_count={2} recommended_average={50} />);
+        userEvent.click(screen.getByTestId('dt_popover_wrapper'));
+        expect(screen.getByText('Recommended by 2 traders')).toBeInTheDocument();
+        expect(screen.getByText('50%')).toBeInTheDocument();
+    });
+
+    it('should call showModal function in mobile view', () => {
+        (isMobile as jest.Mock).mockReturnValue(true);
+        const { showModal } = useModalManagerContext();
+
+        render(<RecommendedBy recommended_count={2} recommended_average={50} />);
+        userEvent.click(screen.getByTestId('dt_popover_wrapper'));
+        expect(showModal).toHaveBeenCalled();
+    });
+});
diff --git a/packages/p2p/src/components/recommended-by/index.js b/packages/p2p/src/components/recommended-by/index.ts
similarity index 55%
rename from packages/p2p/src/components/recommended-by/index.js
rename to packages/p2p/src/components/recommended-by/index.ts
index 45460269fab4..448cd6a00392 100644
--- a/packages/p2p/src/components/recommended-by/index.js
+++ b/packages/p2p/src/components/recommended-by/index.ts
@@ -1,4 +1,4 @@
-import RecommendedBy from './recommended-by.jsx';
+import RecommendedBy from './recommended-by';
 import './recommended-by.scss';
 
 export default RecommendedBy;
diff --git a/packages/p2p/src/components/recommended-by/recommended-by.scss b/packages/p2p/src/components/recommended-by/recommended-by.scss
index 20929d16b329..269b1128967f 100644
--- a/packages/p2p/src/components/recommended-by/recommended-by.scss
+++ b/packages/p2p/src/components/recommended-by/recommended-by.scss
@@ -1,12 +1,12 @@
 .recommended-by {
-    &--container {
+    &__container {
         .dc-popover__target {
             align-items: center;
             display: flex;
         }
     }
 
-    &--icon {
+    &__icon {
         margin-right: 0.5rem;
     }
 }
diff --git a/packages/p2p/src/components/recommended-by/recommended-by.jsx b/packages/p2p/src/components/recommended-by/recommended-by.tsx
similarity index 79%
rename from packages/p2p/src/components/recommended-by/recommended-by.jsx
rename to packages/p2p/src/components/recommended-by/recommended-by.tsx
index 9bfa44b71f75..9a69f40466a7 100644
--- a/packages/p2p/src/components/recommended-by/recommended-by.jsx
+++ b/packages/p2p/src/components/recommended-by/recommended-by.tsx
@@ -1,14 +1,18 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Icon, Popover, Text } from '@deriv/components';
 import { isMobile } from '@deriv/shared';
 import { localize } from 'Components/i18next';
 import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
 
-const RecommendedBy = ({ recommended_average, recommended_count }) => {
+type TRecommendedByProps = {
+    recommended_average?: number;
+    recommended_count?: number;
+};
+
+const RecommendedBy = ({ recommended_average, recommended_count }: TRecommendedByProps) => {
     const { showModal } = useModalManagerContext();
 
-    const getRecommendedMessage = () => {
+    const getRecommendedMessage = (): string => {
         if (recommended_count) {
             if (recommended_count === 1) {
                 return localize('Recommended by {{recommended_count}} trader', {
@@ -26,7 +30,7 @@ const RecommendedBy = ({ recommended_average, recommended_count }) => {
         <React.Fragment>
             <Popover
                 alignment='top'
-                className='recommended-by--container'
+                className='recommended-by__container'
                 message={getRecommendedMessage()}
                 onClick={
                     isMobile()
@@ -37,26 +41,23 @@ const RecommendedBy = ({ recommended_average, recommended_count }) => {
                                       message: getRecommendedMessage(),
                                   },
                               })
-                        : () => {}
+                        : () => {
+                              // do nothing
+                          }
                 }
             >
                 <Icon
-                    className='recommended-by--icon'
+                    className='recommended-by__icon'
                     custom_color='var(--status-success)'
                     icon='IcThumbsUp'
                     size={14}
                 />
                 <Text color='less-prominent' line_height='s' size={isMobile() ? 'xxxs' : 'xs'}>
-                    {`${recommended_average !== null ? recommended_average : 0}%`}
+                    {`${recommended_average ?? 0}%`}
                 </Text>
             </Popover>
         </React.Fragment>
     );
 };
 
-RecommendedBy.propTypes = {
-    recommended_average: PropTypes.number,
-    recommended_count: PropTypes.number,
-};
-
 export default RecommendedBy;
diff --git a/packages/p2p/src/components/section-error/__tests__/section-error.spec.tsx b/packages/p2p/src/components/section-error/__tests__/section-error.spec.tsx
new file mode 100644
index 000000000000..d59fe6cc3b55
--- /dev/null
+++ b/packages/p2p/src/components/section-error/__tests__/section-error.spec.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import SectionError from '../section-error';
+
+describe('<SectionError/>', () => {
+    it('should render default state of the component', () => {
+        render(<SectionError message='Error message to be shown' />);
+        expect(screen.getByText('Error message to be shown')).toBeInTheDocument();
+    });
+});
diff --git a/packages/p2p/src/components/section-error/index.ts b/packages/p2p/src/components/section-error/index.ts
new file mode 100644
index 000000000000..b7289003ff70
--- /dev/null
+++ b/packages/p2p/src/components/section-error/index.ts
@@ -0,0 +1,4 @@
+import SectionError from './section-error';
+import './section-error.scss';
+
+export default SectionError;
diff --git a/packages/p2p/src/components/section-error/section-error.scss b/packages/p2p/src/components/section-error/section-error.scss
new file mode 100644
index 000000000000..70f48f5b5f9d
--- /dev/null
+++ b/packages/p2p/src/components/section-error/section-error.scss
@@ -0,0 +1,22 @@
+.section-error {
+    &__form {
+        margin-right: auto;
+        padding-right: 0.8rem;
+    }
+
+    &__table {
+        height: 100%;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        margin-top: 5rem;
+
+        &--center {
+            @extend .section-error__table;
+
+            @include mobile {
+                align-items: center;
+            }
+        }
+    }
+}
diff --git a/packages/p2p/src/components/section-error/section-error.tsx b/packages/p2p/src/components/section-error/section-error.tsx
new file mode 100644
index 000000000000..dcb5a8bceee8
--- /dev/null
+++ b/packages/p2p/src/components/section-error/section-error.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Text } from '@deriv/components';
+
+type TSectionError = {
+    className?: string;
+    message: string;
+    size?: string;
+};
+
+const SectionError = ({ className = 'section-error__form', message, size = 'xxs' }: TSectionError) => (
+    <Text as='p' color='loss-danger' size={size} className={className}>
+        {message}
+    </Text>
+);
+
+export default SectionError;
diff --git a/packages/p2p/src/components/star-rating/__test__/star-rating.spec.tsx b/packages/p2p/src/components/star-rating/__test__/star-rating.spec.tsx
new file mode 100644
index 000000000000..4880e37c52c4
--- /dev/null
+++ b/packages/p2p/src/components/star-rating/__test__/star-rating.spec.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import StarRating from '../star-rating';
+
+describe('<StarRating/>', () => {
+    it('renders star rating component without initial value', () => {
+        render(
+            <div data-testid='dt_star_rating'>
+                <StarRating
+                    className='star-rating'
+                    empty_star_className='star-rating__empty'
+                    empty_star_icon='IcEmptyStar'
+                    full_star_className='star-rating__full'
+                    full_star_icon='IcFullStar'
+                    number_of_stars={5}
+                    rating_value={0}
+                    star_size={15}
+                />
+            </div>
+        );
+
+        expect(screen.getByTestId('dt_star_rating')).toBeInTheDocument();
+    });
+
+    it('renders star rating component without icons', () => {
+        render(
+            <div data-testid='dt_star_rating'>
+                <StarRating
+                    className='star-rating'
+                    empty_star_className='star-rating__empty'
+                    empty_star_icon=''
+                    full_star_className='star-rating__full'
+                    full_star_icon=''
+                    initial_value={3}
+                    number_of_stars={5}
+                    rating_value={0}
+                    star_size={15}
+                />
+            </div>
+        );
+
+        expect(screen.getByTestId('dt_star_rating')).toBeInTheDocument();
+    });
+});
diff --git a/packages/p2p/src/components/star-rating/index.js b/packages/p2p/src/components/star-rating/index.js
deleted file mode 100644
index 67e78ce25de5..000000000000
--- a/packages/p2p/src/components/star-rating/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import StarRating from './star-rating.jsx';
-
-export default StarRating;
diff --git a/packages/p2p/src/components/star-rating/index.ts b/packages/p2p/src/components/star-rating/index.ts
new file mode 100644
index 000000000000..093f6bc4e04a
--- /dev/null
+++ b/packages/p2p/src/components/star-rating/index.ts
@@ -0,0 +1,3 @@
+import StarRating from './star-rating';
+
+export default StarRating;
diff --git a/packages/p2p/src/components/star-rating/star-rating.jsx b/packages/p2p/src/components/star-rating/star-rating.tsx
similarity index 50%
rename from packages/p2p/src/components/star-rating/star-rating.jsx
rename to packages/p2p/src/components/star-rating/star-rating.tsx
index 088407487c58..02233f8b892d 100644
--- a/packages/p2p/src/components/star-rating/star-rating.jsx
+++ b/packages/p2p/src/components/star-rating/star-rating.tsx
@@ -1,9 +1,26 @@
-// TODO: Move to components package once we can install libraries there
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Rating } from 'react-simple-star-rating';
 import { Icon } from '@deriv/components';
 
+type TStarRatingProps = {
+    className?: string;
+    empty_star_className: string;
+    empty_star_color?: string;
+    empty_star_icon: string;
+    full_star_className: string;
+    full_star_color?: string;
+    full_star_icon: string;
+    initial_value?: number;
+    is_readonly?: boolean;
+    number_of_stars: number;
+    onClick?: () => void;
+    rating_value: number;
+    rtl?: boolean;
+    should_allow_half_icon?: boolean;
+    should_allow_hover_effect?: boolean;
+    star_size: number;
+};
+
 const StarRating = ({
     className,
     empty_star_color,
@@ -21,27 +38,11 @@ const StarRating = ({
     should_allow_half_icon = true,
     should_allow_hover_effect = true,
     star_size,
-}) => {
+}: TStarRatingProps) => {
     // Converts initial value to be in the form of x.0 or x.5
     // to show full and half stars only
     const fractionalized_value = Math.round(initial_value * 2) / 2;
 
-    const EmptyIcon = () => {
-        if (!!empty_star_icon && typeof empty_star_icon === 'string') {
-            return <Icon icon={empty_star_icon} size={star_size} />;
-        }
-
-        return <></>;
-    };
-
-    const FullIcon = () => {
-        if (!!full_star_icon && typeof full_star_icon === 'string') {
-            return <Icon icon={full_star_icon} size={star_size} />;
-        }
-
-        return <></>;
-    };
-
     return (
         <Rating
             allowHalfIcon={should_allow_half_icon}
@@ -49,10 +50,10 @@ const StarRating = ({
             className={className}
             emptyColor={empty_star_color}
             emptyClassName={empty_star_className}
-            emptyIcon={<EmptyIcon />}
+            emptyIcon={empty_star_icon ? <Icon icon={empty_star_icon} size={star_size} /> : <></>}
             fillColor={full_star_color}
             fullClassName={full_star_className}
-            fullIcon={<FullIcon />}
+            fullIcon={full_star_icon ? <Icon icon={full_star_icon} size={star_size} /> : <></>}
             iconsCount={number_of_stars}
             initialValue={fractionalized_value}
             onClick={onClick}
@@ -64,23 +65,4 @@ const StarRating = ({
     );
 };
 
-StarRating.propTypes = {
-    className: PropTypes.string,
-    empty_star_color: PropTypes.string,
-    empty_star_className: PropTypes.string,
-    empty_star_icon: PropTypes.string,
-    full_star_color: PropTypes.string,
-    full_star_className: PropTypes.string,
-    full_star_icon: PropTypes.string,
-    initial_value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    is_readonly: PropTypes.bool,
-    number_of_stars: PropTypes.number,
-    onClick: PropTypes.func,
-    rating_value: PropTypes.number,
-    rtl: PropTypes.bool,
-    should_allow_half_icon: PropTypes.bool,
-    should_allow_hover_effect: PropTypes.bool,
-    star_size: PropTypes.number,
-};
-
 export default React.memo(StarRating);
diff --git a/packages/p2p/src/components/table/__test__/table-error.spec.js b/packages/p2p/src/components/table/__test__/table-error.spec.js
deleted file mode 100644
index 7d790251955b..000000000000
--- a/packages/p2p/src/components/table/__test__/table-error.spec.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { TableError } from '../table-error.jsx';
-
-describe('<TableError/>', () => {
-    it('should render message passed as props', () => {
-        render(<TableError message='Test message' />);
-
-        expect(screen.getByText('Test message')).toBeInTheDocument();
-    });
-});
diff --git a/packages/p2p/src/components/table/table-error.jsx b/packages/p2p/src/components/table/table-error.jsx
deleted file mode 100644
index 809b575110e2..000000000000
--- a/packages/p2p/src/components/table/table-error.jsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './table.scss';
-import { Text } from '@deriv/components';
-
-export const TableError = ({ message }) => (
-    <Text as='p' color='loss-danger' size='xs' className='dp2p-table-error'>
-        {message}
-    </Text>
-);
-
-TableError.propTypes = {
-    message: PropTypes.string,
-};
diff --git a/packages/p2p/src/components/table/table.scss b/packages/p2p/src/components/table/table.scss
deleted file mode 100644
index ed32e17c6a44..000000000000
--- a/packages/p2p/src/components/table/table.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.dp2p-table-error {
-    height: 100%;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    // TODO: [p2p-fix-layout-size] remove this margin when container layout is ok
-    margin-top: 5rem;
-
-    @include mobile {
-        text-align: center;
-    }
-}
diff --git a/packages/p2p/src/components/temporarily-barred-hint/__test__/temporarily-barred-hint.spec.tsx b/packages/p2p/src/components/temporarily-barred-hint/__test__/temporarily-barred-hint.spec.tsx
new file mode 100644
index 000000000000..07b37fd636b6
--- /dev/null
+++ b/packages/p2p/src/components/temporarily-barred-hint/__test__/temporarily-barred-hint.spec.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import TemporarilyBarredHint from '../temporarily-barred-hint';
+import { useStores } from 'Stores/index';
+
+jest.mock('Stores', () => ({
+    ...jest.requireActual('Stores'),
+    useStores: jest.fn(),
+}));
+
+describe('<TemporarilyBarredHint />', () => {
+    it('it should render <TemporarilyBarredHint /> component if client is barred', () => {
+        (useStores as jest.Mock).mockReturnValue({
+            general_store: {
+                is_barred: true,
+            },
+        });
+        render(<TemporarilyBarredHint />);
+        expect(screen.getByTestId('dt_temporarily_barred_hint')).toBeInTheDocument();
+    });
+
+    it('it should return null when client is not barred', () => {
+        (useStores as jest.Mock).mockReturnValue({
+            general_store: {
+                is_barred: false,
+            },
+        });
+        const { container } = render(<TemporarilyBarredHint />);
+        expect(container).toBeEmptyDOMElement();
+    });
+});
diff --git a/packages/p2p/src/components/temporarily-barred-hint/index.js b/packages/p2p/src/components/temporarily-barred-hint/index.ts
similarity index 54%
rename from packages/p2p/src/components/temporarily-barred-hint/index.js
rename to packages/p2p/src/components/temporarily-barred-hint/index.ts
index a0257a800b55..c99aea010c78 100644
--- a/packages/p2p/src/components/temporarily-barred-hint/index.js
+++ b/packages/p2p/src/components/temporarily-barred-hint/index.ts
@@ -1,4 +1,4 @@
-import TemporarilyBarred from './temporarily-barred-hint.jsx';
+import TemporarilyBarred from './temporarily-barred-hint';
 import './temporarily-barred-hint.scss';
 
 export default TemporarilyBarred;
diff --git a/packages/p2p/src/components/temporarily-barred-hint/temporarily-barred-hint.scss b/packages/p2p/src/components/temporarily-barred-hint/temporarily-barred-hint.scss
index e69de29bb2d1..be015349fff2 100644
--- a/packages/p2p/src/components/temporarily-barred-hint/temporarily-barred-hint.scss
+++ b/packages/p2p/src/components/temporarily-barred-hint/temporarily-barred-hint.scss
@@ -0,0 +1,17 @@
+.temporarily-barred-hint {
+    .dc-hint-box {
+        margin-top: 1.6rem;
+
+        &__icon {
+            @include mobile {
+                align-self: flex-start;
+                min-width: 16px;
+                min-height: 16px;
+            }
+        }
+
+        @include mobile {
+            margin: 1rem 2rem;
+        }
+    }
+}
diff --git a/packages/p2p/src/components/temporarily-barred-hint/temporarily-barred-hint.jsx b/packages/p2p/src/components/temporarily-barred-hint/temporarily-barred-hint.tsx
similarity index 89%
rename from packages/p2p/src/components/temporarily-barred-hint/temporarily-barred-hint.jsx
rename to packages/p2p/src/components/temporarily-barred-hint/temporarily-barred-hint.tsx
index 2ac322bfc20b..f6abb6cf7ae6 100644
--- a/packages/p2p/src/components/temporarily-barred-hint/temporarily-barred-hint.jsx
+++ b/packages/p2p/src/components/temporarily-barred-hint/temporarily-barred-hint.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { HintBox, Text } from '@deriv/components';
 import { useStores } from 'Stores';
@@ -9,7 +9,7 @@ const TemporarilyBarredHint = () => {
 
     if (general_store.is_barred) {
         return (
-            <div className='p2p-cashier__barred-user'>
+            <div className='temporarily-barred-hint' data-testid='dt_temporarily_barred_hint'>
                 <HintBox
                     icon='IcAlertWarning'
                     message={
diff --git a/packages/p2p/src/components/misc/__test__/toggle-container.spec.js b/packages/p2p/src/components/toggle-container/__tests__/toggle-container.spec.tsx
similarity index 74%
rename from packages/p2p/src/components/misc/__test__/toggle-container.spec.js
rename to packages/p2p/src/components/toggle-container/__tests__/toggle-container.spec.tsx
index 5b749e569bec..633599887de8 100644
--- a/packages/p2p/src/components/misc/__test__/toggle-container.spec.js
+++ b/packages/p2p/src/components/toggle-container/__tests__/toggle-container.spec.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import ToggleContainer from '../toggle-container.jsx';
+import ToggleContainer from '../toggle-container';
 
 describe('<ToggleContainer/>', () => {
     it('should act as a wrapper for the child component', () => {
@@ -10,6 +10,7 @@ describe('<ToggleContainer/>', () => {
             </ToggleContainer>
         );
 
+        expect(screen.getByTestId('dt_toggle_container')).toHaveClass('toggle-container');
         expect(screen.getByText('Child component')).toBeInTheDocument();
     });
 });
diff --git a/packages/p2p/src/components/toggle-container/index.ts b/packages/p2p/src/components/toggle-container/index.ts
new file mode 100644
index 000000000000..585a6d997dfe
--- /dev/null
+++ b/packages/p2p/src/components/toggle-container/index.ts
@@ -0,0 +1,4 @@
+import ToggleContainer from './toggle-container';
+import './toggle-container.scss';
+
+export default ToggleContainer;
diff --git a/packages/p2p/src/components/misc/toggle-container.scss b/packages/p2p/src/components/toggle-container/toggle-container.scss
similarity index 80%
rename from packages/p2p/src/components/misc/toggle-container.scss
rename to packages/p2p/src/components/toggle-container/toggle-container.scss
index 1837bf528b54..4daec2726060 100644
--- a/packages/p2p/src/components/misc/toggle-container.scss
+++ b/packages/p2p/src/components/toggle-container/toggle-container.scss
@@ -1,11 +1,11 @@
-.p2p-toggle-container {
+.toggle-container {
     background: var(--state-disabled);
     padding: 0.4rem;
     width: fit-content;
     border-radius: $BORDER_RADIUS;
 
     @include tablet-up {
-        margin: 2.4rem 0 4.8rem;
+        margin: 2.4rem 0;
     }
 
     @include mobile {
diff --git a/packages/p2p/src/components/toggle-container/toggle-container.tsx b/packages/p2p/src/components/toggle-container/toggle-container.tsx
new file mode 100644
index 000000000000..39ab4aa39b7a
--- /dev/null
+++ b/packages/p2p/src/components/toggle-container/toggle-container.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+const ToggleContainer = ({ children }: React.PropsWithChildren<unknown>) => (
+    <div className='toggle-container' data-testid='dt_toggle_container'>
+        {children}
+    </div>
+);
+
+export default ToggleContainer;
diff --git a/packages/p2p/src/components/trade-badge/__tests__/trade-badge.spec.tsx b/packages/p2p/src/components/trade-badge/__tests__/trade-badge.spec.tsx
new file mode 100644
index 000000000000..58a6d0f24759
--- /dev/null
+++ b/packages/p2p/src/components/trade-badge/__tests__/trade-badge.spec.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import TradeBadge from '../trade-badge';
+
+describe('<TradeBadge />', () => {
+    it('should retuen empty DOM element when trade count is less than or equal to 100, poi and poa not verified', () => {
+        const { container } = render(<TradeBadge trade_count={99} />);
+        expect(container).toBeEmptyDOMElement();
+    });
+
+    it('should render trade badge with trade count 100+', () => {
+        render(<TradeBadge trade_count={101} />);
+        expect(screen.getByText('100+')).toBeInTheDocument();
+    });
+
+    it('should render trade badge with trade count 250+', () => {
+        render(<TradeBadge trade_count={300} />);
+        expect(screen.getByText('250+')).toBeInTheDocument();
+    });
+
+    it('should render `250+ trades` badge if trade count more than 250+ and large is true', () => {
+        render(<TradeBadge trade_count={300} large />);
+        expect(screen.getByText('250+ trades')).toBeInTheDocument();
+    });
+
+    it('should render poi verified badge', () => {
+        render(<TradeBadge is_poi_verified trade_count={0} />);
+        expect(screen.getByText(/ID/)).toBeInTheDocument();
+        expect(screen.getByText(/verified/)).toBeInTheDocument();
+    });
+
+    it('should render poa verified badge', () => {
+        render(<TradeBadge is_poa_verified trade_count={0} />);
+        expect(screen.getByText(/Address/)).toBeInTheDocument();
+        expect(screen.getByText(/verified/)).toBeInTheDocument();
+    });
+});
diff --git a/packages/p2p/src/components/trade-badge/index.js b/packages/p2p/src/components/trade-badge/index.ts
similarity index 56%
rename from packages/p2p/src/components/trade-badge/index.js
rename to packages/p2p/src/components/trade-badge/index.ts
index fbca99bbe040..d997d46864fd 100644
--- a/packages/p2p/src/components/trade-badge/index.js
+++ b/packages/p2p/src/components/trade-badge/index.ts
@@ -1,4 +1,4 @@
-import TradeBadge from './trade-badge.jsx';
+import TradeBadge from './trade-badge';
 import './trade-badge.scss';
 
 export default TradeBadge;
diff --git a/packages/p2p/src/components/trade-badge/trade-badge.jsx b/packages/p2p/src/components/trade-badge/trade-badge.tsx
similarity index 65%
rename from packages/p2p/src/components/trade-badge/trade-badge.jsx
rename to packages/p2p/src/components/trade-badge/trade-badge.tsx
index 389198aec4c3..84109e16e8c4 100644
--- a/packages/p2p/src/components/trade-badge/trade-badge.jsx
+++ b/packages/p2p/src/components/trade-badge/trade-badge.tsx
@@ -1,13 +1,19 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
+import React from 'react';
 import classNames from 'classnames';
 import { Text } from '@deriv/components';
 import { localize, Localize } from 'Components/i18next';
 
-const TradeBadge = ({ is_poa_verified = false, is_poi_verified = false, large = false, trade_count }) => {
+type TTradeBadge = {
+    is_poa_verified?: boolean;
+    is_poi_verified?: boolean;
+    large?: boolean;
+    trade_count: number;
+};
+
+const TradeBadge = ({ is_poa_verified = false, is_poi_verified = false, large = false, trade_count }: TTradeBadge) => {
     return (
         <React.Fragment>
-            {trade_count > 100 ? (
+            {trade_count > 100 && (
                 <div
                     className={classNames('trade-badge', {
                         'trade-badge--large': large,
@@ -19,13 +25,9 @@ const TradeBadge = ({ is_poa_verified = false, is_poi_verified = false, large =
                         {`${trade_count >= 250 ? '250+' : '100+'} ${large ? localize('trades') : ''}`}
                     </Text>
                 </div>
-            ) : null}
-            {is_poi_verified ? (
-                <div
-                    className={classNames('trade-badge', {
-                        'trade-badge--blue': is_poa_verified || is_poi_verified,
-                    })}
-                >
+            )}
+            {is_poi_verified && (
+                <div className='trade-badge trade-badge--blue'>
                     <Text color='colored-background' size='xxxs'>
                         <Localize
                             i18n_default_text='<0>ID</0> verified'
@@ -33,13 +35,9 @@ const TradeBadge = ({ is_poa_verified = false, is_poi_verified = false, large =
                         />
                     </Text>
                 </div>
-            ) : null}
-            {is_poa_verified ? (
-                <div
-                    className={classNames('trade-badge', {
-                        'trade-badge--blue': is_poa_verified || is_poi_verified,
-                    })}
-                >
+            )}
+            {is_poa_verified && (
+                <div className='trade-badge trade-badge--blue'>
                     <Text color='colored-background' size='xxxs'>
                         <Localize
                             i18n_default_text='<0>Address</0> verified'
@@ -47,16 +45,9 @@ const TradeBadge = ({ is_poa_verified = false, is_poi_verified = false, large =
                         />
                     </Text>
                 </div>
-            ) : null}
+            )}
         </React.Fragment>
     );
 };
 
 export default TradeBadge;
-
-TradeBadge.propTypes = {
-    is_poa_verified: PropTypes.bool,
-    is_poi_verified: PropTypes.bool,
-    large: PropTypes.bool,
-    trade_count: PropTypes.number,
-};
diff --git a/packages/p2p/src/components/user/user-avatar/__test__/user-avatar.spec.js b/packages/p2p/src/components/user/user-avatar/__test__/user-avatar.spec.tsx
similarity index 73%
rename from packages/p2p/src/components/user/user-avatar/__test__/user-avatar.spec.js
rename to packages/p2p/src/components/user/user-avatar/__test__/user-avatar.spec.tsx
index 4f8f2b02b649..ecea2dcdba62 100644
--- a/packages/p2p/src/components/user/user-avatar/__test__/user-avatar.spec.js
+++ b/packages/p2p/src/components/user/user-avatar/__test__/user-avatar.spec.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import UserAvatar from '../user-avatar.jsx';
+import UserAvatar from '../user-avatar';
 
 describe('<UserAvatar/>', () => {
     const props = {
@@ -8,7 +8,8 @@ describe('<UserAvatar/>', () => {
         size: 16,
         text_size: 'xs',
     };
-    it('should render the component with short nick name', () => {
+
+    it('should render the UserAvatar component with a short nickname', () => {
         render(<UserAvatar {...props} />);
 
         expect(screen.getByText('P2')).toBeInTheDocument();
diff --git a/packages/p2p/src/components/user/user-avatar/index.js b/packages/p2p/src/components/user/user-avatar/index.ts
similarity index 56%
rename from packages/p2p/src/components/user/user-avatar/index.js
rename to packages/p2p/src/components/user/user-avatar/index.ts
index f24485b17198..8a44da36ccdd 100644
--- a/packages/p2p/src/components/user/user-avatar/index.js
+++ b/packages/p2p/src/components/user/user-avatar/index.ts
@@ -1,4 +1,4 @@
-import UserAvatar from './user-avatar.jsx';
+import UserAvatar from './user-avatar';
 import './user-avatar.scss';
 
 export default UserAvatar;
diff --git a/packages/p2p/src/components/user/user-avatar/user-avatar.scss b/packages/p2p/src/components/user/user-avatar/user-avatar.scss
index 168ef6f08d78..52f299f23d19 100644
--- a/packages/p2p/src/components/user/user-avatar/user-avatar.scss
+++ b/packages/p2p/src/components/user/user-avatar/user-avatar.scss
@@ -1,4 +1,4 @@
-.dp2p-avatar {
+.user-avatar {
     align-items: center;
     border-radius: 50%;
     display: flex;
diff --git a/packages/p2p/src/components/user/user-avatar/user-avatar.jsx b/packages/p2p/src/components/user/user-avatar/user-avatar.tsx
similarity index 70%
rename from packages/p2p/src/components/user/user-avatar/user-avatar.jsx
rename to packages/p2p/src/components/user/user-avatar/user-avatar.tsx
index 6f8f3e6d14d6..e7a6960d03d4 100644
--- a/packages/p2p/src/components/user/user-avatar/user-avatar.jsx
+++ b/packages/p2p/src/components/user/user-avatar/user-avatar.tsx
@@ -1,13 +1,19 @@
-import classNames from 'classnames';
-import { Text } from '@deriv/components';
-import PropTypes from 'prop-types';
 import React from 'react';
+import classNames from 'classnames';
 import { generateHexColourFromNickname, getShortNickname } from 'Utils/string';
+import { Text } from '@deriv/components';
 
-const UserAvatar = React.memo(({ className, nickname, size, text_size }) => {
+type TUserAvatarProps = {
+    className?: string;
+    nickname: string;
+    size: number;
+    text_size: string;
+};
+
+const UserAvatar = React.memo(({ className, nickname, size, text_size }: TUserAvatarProps) => {
     return (
         <div
-            className={classNames('dp2p-avatar', className)}
+            className={classNames('user-avatar', className)}
             style={{
                 backgroundColor: generateHexColourFromNickname(nickname),
                 height: `${size}px`,
@@ -22,11 +28,5 @@ const UserAvatar = React.memo(({ className, nickname, size, text_size }) => {
 });
 
 UserAvatar.displayName = 'UserAvatar';
-UserAvatar.propTypes = {
-    className: PropTypes.string,
-    nickname: PropTypes.string.isRequired,
-    size: PropTypes.number.isRequired,
-    text_size: PropTypes.string.isRequired,
-};
 
 export default UserAvatar;
diff --git a/packages/p2p/src/components/verification/__tests__/verification.spec.js b/packages/p2p/src/components/verification/__tests__/verification.spec.js
deleted file mode 100644
index 2d1b8b70b74c..000000000000
--- a/packages/p2p/src/components/verification/__tests__/verification.spec.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import React from 'react';
-import { screen, render } from '@testing-library/react';
-import { useStores } from 'Stores';
-import Verification from '../verification.jsx';
-
-jest.mock('Stores', () => ({
-    ...jest.requireActual('Stores'),
-    useStores: jest.fn(),
-}));
-
-jest.mock('@sendbird/chat', () => ({
-    SendbirdChat: jest.fn().mockReturnValue({}),
-}));
-
-jest.mock('@sendbird/chat/groupChannel', () => ({
-    SendbirdChat: jest.fn().mockReturnValue({}),
-}));
-
-jest.mock('@sendbird/chat/message', () => ({
-    SendbirdChat: jest.fn().mockReturnValue({}),
-}));
-
-const mocked_store_values = {
-    is_advertiser: false,
-    nickname: '',
-    poi_status: '',
-    poiStatusText: jest.fn(),
-    props: {
-        history: '',
-    },
-};
-
-describe('<Verification />', () => {
-    it('Component should be rendered', () => {
-        useStores.mockImplementation(() => ({
-            general_store: { ...mocked_store_values },
-        }));
-
-        render(<Verification should_wrap={false} />);
-
-        const el_dp2p_verification_container = screen.getByTestId('dp2p-verification_container');
-        expect(el_dp2p_verification_container).toBeInTheDocument();
-    });
-
-    it('Should show verification wrapper if should_wrap prop is true', () => {
-        useStores.mockImplementation(() => ({
-            general_store: { ...mocked_store_values },
-        }));
-
-        render(<Verification should_wrap />);
-
-        const el_dp2p_verification_wrapper = screen.getByTestId('dp2p-verification_wrapper');
-        expect(el_dp2p_verification_wrapper).toBeInTheDocument();
-    });
-
-    it('Should render Dp2pBlocked component', () => {
-        useStores.mockImplementation(() => ({
-            general_store: { ...mocked_store_values, poi_status: 'verified', nickname: 'test' },
-        }));
-
-        render(<Verification should_wrap={false} />);
-
-        const el_dp2p_Dp2pBlocked_container = screen.getByTestId('dp2p-Dp2pBlocked_container');
-        expect(el_dp2p_Dp2pBlocked_container).toBeInTheDocument();
-    });
-    it('Should render empty content when nickname form is open', () => {
-        useStores.mockImplementation(() => ({
-            general_store: { ...mocked_store_values, should_show_popup: true },
-        }));
-
-        const { container } = render(<Verification should_wrap={false} />);
-
-        expect(container).toBeEmptyDOMElement();
-    });
-});
diff --git a/packages/p2p/src/components/verification/__tests__/verification.spec.tsx b/packages/p2p/src/components/verification/__tests__/verification.spec.tsx
new file mode 100644
index 000000000000..317ff18c1f3c
--- /dev/null
+++ b/packages/p2p/src/components/verification/__tests__/verification.spec.tsx
@@ -0,0 +1,163 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { isDesktop } from '@deriv/shared';
+import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
+import { useStores } from 'Stores/index';
+import Verification from '../verification';
+
+jest.mock('@deriv/shared', () => ({
+    ...jest.requireActual('@deriv/shared'),
+    isDesktop: jest.fn(() => false),
+}));
+
+jest.mock('@sendbird/chat', () => ({
+    SendbirdChat: jest.fn().mockReturnValue({}),
+}));
+
+jest.mock('@sendbird/chat/groupChannel', () => ({
+    SendbirdChat: jest.fn().mockReturnValue({}),
+}));
+
+jest.mock('@sendbird/chat/message', () => ({
+    SendbirdChat: jest.fn().mockReturnValue({}),
+}));
+
+const mock_modal_manager = {
+    isCurrentModal: false,
+    showModal: jest.fn(),
+    hideModal: jest.fn(),
+    random: jest.fn(),
+};
+
+jest.mock('Components/modal-manager/modal-manager-context');
+const mocked_useModalManagerContext = useModalManagerContext as jest.MockedFunction<
+    () => Partial<ReturnType<typeof useModalManagerContext>>
+>;
+
+mocked_useModalManagerContext.mockImplementation(() => mock_modal_manager);
+
+const mocked_store_values = {
+    is_advertiser: false,
+    nickname: '',
+    poi_status: '',
+    poiStatusText: jest.fn(),
+    toggleNicknamePopup: jest.fn(),
+    props: {
+        history: '',
+    },
+};
+
+jest.mock('Stores', () => ({
+    ...jest.requireActual('Stores'),
+    useStores: jest.fn(() => ({
+        general_store: { ...mocked_store_values },
+    })),
+}));
+
+describe('<Verification />', () => {
+    it('should render default state', () => {
+        render(<Verification />);
+
+        const el_dp2p_verification_container = screen.getByTestId('dt_verification_container');
+        expect(el_dp2p_verification_container).toBeInTheDocument();
+    });
+
+    it('Should show nickname checklist item as done if user has nickname', () => {
+        (useStores as jest.Mock).mockReturnValue({
+            general_store: { ...mocked_store_values, nickname: 'test', poi_status: 'verified', is_advertiser: true },
+        });
+
+        render(<Verification />);
+
+        const el_dp2p_verification_container = screen.getByTestId('dt_verification_container');
+        expect(el_dp2p_verification_container).toBeInTheDocument();
+    });
+
+    it('Should toggle nickname popup if user has not set nickname', () => {
+        (useStores as jest.Mock).mockReturnValue({
+            general_store: { ...mocked_store_values, is_advertiser: true },
+        });
+
+        render(<Verification />);
+
+        const action_button = screen.getAllByTestId('dt_checklist_item_status_action')[0];
+        expect(action_button).toBeInTheDocument();
+        userEvent.click(action_button);
+        expect(mocked_store_values.toggleNicknamePopup).toBeCalledTimes(1);
+    });
+
+    it('Should open nickname form in desktop if user has not set nickname', () => {
+        (isDesktop as jest.Mock).mockReturnValue(true);
+        (useStores as jest.Mock).mockReturnValue({
+            general_store: { ...mocked_store_values, is_advertiser: true },
+        });
+
+        render(<Verification />);
+
+        const action_button = screen.getAllByTestId('dt_checklist_item_status_action')[0];
+        expect(action_button).toBeInTheDocument();
+        userEvent.click(action_button);
+        expect(mock_modal_manager.showModal).toBeCalledTimes(1);
+    });
+
+    it('Should redirect to account poi verification if poi has not been verified', () => {
+        (useStores as jest.Mock).mockReturnValue({
+            general_store: { ...mocked_store_values, nickname: 'test', is_advertiser: true },
+        });
+
+        Object.defineProperty(window, 'location', {
+            value: {
+                href: 'https://test.com',
+            },
+            writable: true,
+        });
+
+        render(<Verification />);
+
+        const el_action_button = screen.getByTestId('dt_checklist_item_status_action');
+        userEvent.click(el_action_button);
+        expect(window.location.href).toBe('/account/proof-of-identity?ext_platform_url=/cashier/p2p');
+    });
+
+    it('Should redirect to account poi verification with updated url when search param is present and poi not verified', () => {
+        (useStores as jest.Mock).mockReturnValue({
+            general_store: { ...mocked_store_values, nickname: 'test', is_advertiser: true },
+        });
+
+        Object.defineProperty(window, 'location', {
+            value: {
+                href: 'https://test.com',
+                search: '?test=1',
+            },
+            writable: true,
+        });
+
+        render(<Verification />);
+
+        const el_action_button = screen.getByTestId('dt_checklist_item_status_action');
+        userEvent.click(el_action_button);
+        expect(window.location.href).toBe('/account/proof-of-identity?ext_platform_url=/cashier/p2p&test=1');
+    });
+
+    it('Should render Dp2pBlocked component if user is not advertiser, but is poi verified and has nickname', () => {
+        (useStores as jest.Mock).mockReturnValue({
+            general_store: { ...mocked_store_values, poi_status: 'verified', nickname: 'test' },
+        });
+
+        render(<Verification />);
+
+        const el_dp2p_Dp2pBlocked_container = screen.getByTestId('dt_dp2p-blocked-container');
+        expect(el_dp2p_Dp2pBlocked_container).toBeInTheDocument();
+    });
+
+    it('Should render empty content when nickname form is open', () => {
+        (useStores as jest.Mock).mockReturnValue({
+            general_store: { ...mocked_store_values, should_show_popup: true },
+        });
+
+        const { container } = render(<Verification should_wrap={false} />);
+
+        expect(container).toBeEmptyDOMElement();
+    });
+});
diff --git a/packages/p2p/src/components/verification/index.ts b/packages/p2p/src/components/verification/index.ts
new file mode 100644
index 000000000000..ef2346960187
--- /dev/null
+++ b/packages/p2p/src/components/verification/index.ts
@@ -0,0 +1,4 @@
+import verification from './verification';
+import './verification.scss';
+
+export default verification;
diff --git a/packages/p2p/src/components/verification/verification.scss b/packages/p2p/src/components/verification/verification.scss
index ebebd2f27113..33b622cd4150 100644
--- a/packages/p2p/src/components/verification/verification.scss
+++ b/packages/p2p/src/components/verification/verification.scss
@@ -1,4 +1,4 @@
-.dp2p-verification {
+.verification {
     width: 100%;
     max-width: 67.2rem;
     display: flex;
@@ -17,16 +17,15 @@
     &__icon {
         margin-bottom: 3.4rem;
     }
+
     &__text {
-        text-align: center;
+        display: flex;
+        flex-direction: column;
 
         &-title {
-            font-size: var(--text-size-s);
-            font-weight: bold;
             margin-bottom: 1rem;
-            line-height: 1.5;
-            color: var(--text-general);
         }
+
         &-description {
             margin-bottom: 2.4rem;
 
@@ -38,6 +37,7 @@
             }
         }
     }
+
     &__checklist {
         width: 400px;
 
@@ -52,12 +52,4 @@
             width: 100%;
         }
     }
-
-    &__wrapper {
-        padding-top: 3.5rem;
-
-        &--mobile {
-            padding: 3.5rem 2.5rem 0;
-        }
-    }
 }
diff --git a/packages/p2p/src/components/verification/verification.jsx b/packages/p2p/src/components/verification/verification.tsx
similarity index 50%
rename from packages/p2p/src/components/verification/verification.jsx
rename to packages/p2p/src/components/verification/verification.tsx
index c23a119ffc41..193071653572 100644
--- a/packages/p2p/src/components/verification/verification.jsx
+++ b/packages/p2p/src/components/verification/verification.tsx
@@ -1,43 +1,37 @@
 import React from 'react';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import { Icon, Checklist, Text } from '@deriv/components';
-import { isMobile, routes } from '@deriv/shared';
 import { observer } from 'mobx-react-lite';
-import { useStores } from 'Stores';
+import { Icon, Checklist, Text } from '@deriv/components';
+import { isDesktop, isMobile, routes } from '@deriv/shared';
 import Dp2pBlocked from 'Components/dp2p-blocked';
 import { Localize } from 'Components/i18next';
-import './verification.scss';
-
-const VerificationWrapper = ({ should_wrap, children }) => {
-    if (should_wrap) {
-        return (
-            <div
-                className={classNames('dp2p-verification__wrapper', {
-                    'dp2p-verification__wrapper--mobile': isMobile(),
-                })}
-                data-testid='dp2p-verification_wrapper'
-            >
-                {children}
-            </div>
-        );
-    }
+import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
+import NicknameForm from 'Components/nickname-form';
+import { useStores } from 'Stores/index';
 
-    return children;
-};
-
-const Verification = ({ should_wrap }) => {
+const Verification = () => {
     const { general_store } = useStores();
+    const { showModal } = useModalManagerContext();
 
     if (!general_store.is_advertiser && general_store.poi_status === 'verified' && general_store.nickname) {
         return <Dp2pBlocked />;
     }
 
+    if (isMobile() && general_store.should_show_popup) {
+        return <NicknameForm />;
+    }
+
     const checklist_items = [
         {
             content: general_store.nickname || <Localize i18n_default_text='Choose your nickname' />,
             status: general_store.nickname ? 'done' : 'action',
-            onClick: general_store.nickname ? () => {} : general_store.toggleNicknamePopup,
+            onClick: general_store.nickname
+                ? () => {
+                      //do nothing
+                  }
+                : () => {
+                      if (isDesktop()) showModal({ key: 'NicknameModal' });
+                      general_store.toggleNicknamePopup();
+                  },
         },
         {
             content: general_store.poiStatusText(general_store.poi_status),
@@ -45,7 +39,9 @@ const Verification = ({ should_wrap }) => {
             status: general_store.poi_status === 'verified' ? 'done' : 'action',
             onClick:
                 general_store.poi_status === 'verified'
-                    ? () => {}
+                    ? () => {
+                          //do nothing
+                      }
                     : () => {
                           const search = window.location.search;
                           let updated_url = `${routes.proof_of_identity}?ext_platform_url=${routes.cashier_p2p}`;
@@ -63,27 +59,21 @@ const Verification = ({ should_wrap }) => {
     if (general_store.should_show_popup) return <></>;
 
     return (
-        <VerificationWrapper should_wrap={should_wrap}>
-            <div className='dp2p-verification' data-testid='dp2p-verification_container'>
-                <Icon icon='IcCashierSendEmail' className='dp2p-verification__icon' size={102} />
-                <div className='dp2p-verification__text'>
-                    <div className='dp2p-verification__text-title'>
-                        <Localize i18n_default_text='Please register with us!' />
-                    </div>
-                    <div className='dp2p-verification__text-description'>
-                        <Text as='p' size='xs' line_height='s' align='center'>
-                            <Localize i18n_default_text='To use Deriv P2P, you need to choose a display name (a nickname) and verify your identity.' />
-                        </Text>
-                    </div>
+        <div className='verification' data-testid='dt_verification_container'>
+            <Icon icon='IcCashierSendEmail' className='verification__icon' size={102} />
+            <div className='verification__text'>
+                <Text className='verification__text-title' weight='bold' align='center'>
+                    <Localize i18n_default_text='Please register with us!' />
+                </Text>
+                <div className='verification__text-description'>
+                    <Text as='p' size='xs' line_height='s' align='center'>
+                        <Localize i18n_default_text='To use Deriv P2P, you need to choose a display name (a nickname) and verify your identity.' />
+                    </Text>
                 </div>
-                <Checklist className='dp2p-verification__checklist' items={checklist_items} />
             </div>
-        </VerificationWrapper>
+            <Checklist className='verification__checklist' items={checklist_items} />
+        </div>
     );
 };
 
-Verification.propTypes = {
-    should_wrap: PropTypes.bool,
-};
-
 export default observer(Verification);
diff --git a/packages/p2p/src/constants/modals.js b/packages/p2p/src/constants/modals.js
index 005eddf4ab86..3a6b679e3aab 100644
--- a/packages/p2p/src/constants/modals.js
+++ b/packages/p2p/src/constants/modals.js
@@ -113,6 +113,9 @@ export const modals = {
             /* webpackChunkName: "my-ads-floating-rate-switch-modal" */ 'Components/modal-manager/modals/my-ads-floating-rate-switch-modal'
         )
     ),
+    NicknameModal: React.lazy(() =>
+        import(/* webpackChunkName: "nickname-modal" */ 'Components/modal-manager/modals/nickname-modal')
+    ),
     OrderDetailsCancelModal: React.lazy(() =>
         import(
             /* webpackChunkName: "order-details-cancel-modal" */ 'Components/modal-manager/modals/order-details-cancel-modal'
diff --git a/packages/p2p/src/constants/routes-config.js b/packages/p2p/src/constants/routes-config.js
index 1b59a2be8fb9..81c894710744 100644
--- a/packages/p2p/src/constants/routes-config.js
+++ b/packages/p2p/src/constants/routes-config.js
@@ -1,11 +1,11 @@
 import React from 'react';
 import { routes } from '@deriv/shared';
 import { localize } from 'Components/i18next';
-import AdvertiserPage from '../components/advertiser-page';
-import BuySell from '../components/buy-sell';
-import MyAds from '../components/my-ads';
-import MyProfile from '../components/my-profile';
-import Orders from '../components/orders';
+import AdvertiserPage from '../pages/advertiser-page';
+import BuySell from '../pages/buy-sell';
+import MyAds from '../pages/my-ads';
+import MyProfile from '../pages/my-profile';
+import Orders from '../pages/orders';
 
 // Error Routes
 const Page404 = React.lazy(() => import(/* webpackChunkName: "404" */ '../components/page-404'));
diff --git a/packages/p2p/src/index.js b/packages/p2p/src/index.js
index 0d7f1aba2b42..1465d9ddd3ca 100644
--- a/packages/p2p/src/index.js
+++ b/packages/p2p/src/index.js
@@ -1 +1,3 @@
-export { default as P2P } from './components/app.jsx';
+import P2P from './pages/app.jsx';
+
+export default P2P;
diff --git a/packages/p2p/src/components/advertiser-page/__tests__/advertiser-page.spec.jsx b/packages/p2p/src/pages/advertiser-page/__tests__/advertiser-page.spec.jsx
similarity index 100%
rename from packages/p2p/src/components/advertiser-page/__tests__/advertiser-page.spec.jsx
rename to packages/p2p/src/pages/advertiser-page/__tests__/advertiser-page.spec.jsx
diff --git a/packages/p2p/src/components/advertiser-page/advertiser-page-adverts.jsx b/packages/p2p/src/pages/advertiser-page/advertiser-page-adverts.jsx
similarity index 89%
rename from packages/p2p/src/components/advertiser-page/advertiser-page-adverts.jsx
rename to packages/p2p/src/pages/advertiser-page/advertiser-page-adverts.jsx
index 92f7cb4a77b1..537e2effbaef 100644
--- a/packages/p2p/src/components/advertiser-page/advertiser-page-adverts.jsx
+++ b/packages/p2p/src/pages/advertiser-page/advertiser-page-adverts.jsx
@@ -5,9 +5,9 @@ import { isDesktop, isMobile } from '@deriv/shared';
 import { useStore, observer } from '@deriv/stores';
 import { localize, Localize } from 'Components/i18next';
 import { useStores } from 'Stores';
-import Empty from 'Components/empty/empty.jsx';
+import P2pEmpty from 'Components/p2p-empty';
 import AdvertiserPageRow from './advertiser-page-row.jsx';
-import './advertiser-page.scss';
+import './advertiser-page-adverts.scss';
 
 const AdvertiserPageAdverts = () => {
     const {
@@ -21,10 +21,10 @@ const AdvertiserPageAdverts = () => {
     );
 
     return (
-        <div className='advertiser-page__adverts'>
+        <div className='advertiser-page-adverts'>
             <Tabs
                 active_index={advertiser_page_store.active_index}
-                className='advertiser-page__adverts-tabs'
+                className='advertiser-page-adverts__tabs'
                 is_full_width={isMobile()}
                 onTabItemClick={advertiser_page_store.handleTabItemClick}
                 header_fit_content
@@ -34,16 +34,16 @@ const AdvertiserPageAdverts = () => {
                 <div label={localize('Sell')} />
             </Tabs>
             {advertiser_page_store.is_loading_adverts ? (
-                <div className='advertiser-page__adverts-table'>
+                <div className='advertiser-page-adverts__table'>
                     <Loading is_fullscreen={false} />
                 </div>
             ) : (
                 <React.Fragment>
                     {advertiser_page_store.adverts.length ? (
-                        <Table className='advertiser-page__adverts-table'>
+                        <Table className='advertiser-page-adverts__table'>
                             {isDesktop() && (
                                 <Table.Header>
-                                    <Table.Row className='advertiser-page__adverts-table_row'>
+                                    <Table.Row className='advertiser-page-adverts__table-row'>
                                         <Table.Head>{localize('Limits')}</Table.Head>
                                         <Table.Head>
                                             {localize('Rate (1 {{currency}})', {
@@ -57,7 +57,7 @@ const AdvertiserPageAdverts = () => {
                                     </Table.Row>
                                 </Table.Header>
                             )}
-                            <Table.Body className='advertiser-page__adverts-table-body'>
+                            <Table.Body className='advertiser-page-adverts__table-body'>
                                 <InfiniteDataList
                                     data_list_className='advertiser-page__data-list'
                                     items={advertiser_page_store.adverts}
@@ -69,7 +69,7 @@ const AdvertiserPageAdverts = () => {
                             </Table.Body>
                         </Table>
                     ) : (
-                        <Empty
+                        <P2pEmpty
                             className={classNames('', { 'advertiser-page-empty': isMobile() })}
                             icon='IcNoData'
                             title={localize('There are no ads yet')}
diff --git a/packages/p2p/src/pages/advertiser-page/advertiser-page-adverts.scss b/packages/p2p/src/pages/advertiser-page/advertiser-page-adverts.scss
new file mode 100644
index 000000000000..9cb7a4f31f7a
--- /dev/null
+++ b/packages/p2p/src/pages/advertiser-page/advertiser-page-adverts.scss
@@ -0,0 +1,82 @@
+@import 'advertiser-page.scss';
+
+.advertiser-page-adverts {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+
+    &__button {
+        align-items: center;
+        display: flex;
+        justify-content: center;
+
+        @include mobile {
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-start;
+            margin-top: 1rem;
+        }
+    }
+
+    &__table {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+
+        @include mobile {
+            display: flex;
+            flex-flow: column;
+            width: 100vw;
+        }
+
+        &-body {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+        }
+    }
+
+    &__table-row {
+        padding: 1.6rem;
+        grid-template-columns: 3fr 2fr 2.5fr 1fr;
+
+        @include mobile {
+            grid-template-columns: 2fr 1fr;
+            min-height: 105px;
+            padding: 1.6rem;
+            width: 100vw;
+        }
+    }
+
+    &__tabs {
+        width: 228px;
+    }
+
+    .dc-tabs__item {
+        @include mobile {
+            width: 50%;
+        }
+    }
+
+    &__list {
+        height: calc(100% - 200px);
+
+        @include mobile {
+            height: calc(100% - 236px);
+        }
+    }
+
+    &__scrollbar {
+        @include tablet-up {
+            height: calc(100vh - 527px);
+        }
+
+        position: absolute;
+
+        @include mobile {
+            bottom: 0;
+            max-height: calc(100vh - 440px) !important;
+            position: fixed;
+        }
+    }
+}
diff --git a/packages/p2p/src/components/advertiser-page/advertiser-page-dropdown-menu.jsx b/packages/p2p/src/pages/advertiser-page/advertiser-page-dropdown-menu.jsx
similarity index 86%
rename from packages/p2p/src/components/advertiser-page/advertiser-page-dropdown-menu.jsx
rename to packages/p2p/src/pages/advertiser-page/advertiser-page-dropdown-menu.jsx
index 2e2e7b23d5d6..51b57e2e9718 100644
--- a/packages/p2p/src/components/advertiser-page/advertiser-page-dropdown-menu.jsx
+++ b/packages/p2p/src/pages/advertiser-page/advertiser-page-dropdown-menu.jsx
@@ -4,7 +4,7 @@ import { Dropdown, Icon, Text } from '@deriv/components';
 import { Localize } from 'Components/i18next';
 import { useStores } from 'Stores';
 import { useOnClickOutside } from '../../../../components/src/hooks';
-import './advertiser-page.scss';
+import './advertiser-page-dropdown-menu.scss';
 
 const AdvertiserPageDropdownMenu = () => {
     const dropdown_menu_ref = React.useRef();
@@ -18,9 +18,9 @@ const AdvertiserPageDropdownMenu = () => {
 
     return (
         !advertiser_page_store.is_counterparty_advertiser_blocked && (
-            <div className='advertiser-page__menu-dots-toggle'>
+            <div className='advertiser-page-dropdown-menu__dots-toggle'>
                 <Icon
-                    className='advertiser-page__menu-dots-icon'
+                    className='advertiser-page-dropdown-menu__dots-icon'
                     icon='IcMenuDots'
                     onClick={() =>
                         advertiser_page_store.setIsDropdownMenuVisible(!advertiser_page_store.is_dropdown_menu_visible)
@@ -30,11 +30,11 @@ const AdvertiserPageDropdownMenu = () => {
                 {advertiser_page_store.is_dropdown_menu_visible && (
                     <div
                         ref={dropdown_menu_ref}
-                        className='advertiser-page__dropdown'
+                        className='advertiser-page-dropdown-menu'
                         onClick={advertiser_page_store.showBlockUserModal}
                     >
                         <Dropdown
-                            className='advertiser-page__dropdown-container'
+                            className='advertiser-page-dropdown-menu__container'
                             is_align_text_right
                             list={['Block']}
                             name='block_user_dropdown'
diff --git a/packages/p2p/src/pages/advertiser-page/advertiser-page-dropdown-menu.scss b/packages/p2p/src/pages/advertiser-page/advertiser-page-dropdown-menu.scss
new file mode 100644
index 000000000000..0e0ff2e5c94e
--- /dev/null
+++ b/packages/p2p/src/pages/advertiser-page/advertiser-page-dropdown-menu.scss
@@ -0,0 +1,51 @@
+.advertiser-page-dropdown-menu {
+    box-shadow: 0 1rem 2rem var(--shadow-menu);
+    border-radius: $BORDER_RADIUS;
+    cursor: pointer;
+    position: absolute;
+    right: 0;
+    z-index: 2;
+
+    .dc-dropdown__display {
+        background-color: var(--general-main-2);
+        border: 1px solid var(--general-active);
+
+        span {
+            background-color: var(--general-main-2);
+        }
+
+        &-placeholder {
+            top: auto;
+        }
+    }
+
+    &__container {
+        margin-top: 0;
+    }
+
+    &__dots-icon {
+        cursor: pointer;
+        margin-bottom: 0.8rem;
+    }
+
+    &__dots-toggle {
+        position: absolute;
+        right: 2.4rem;
+
+        @include mobile {
+            bottom: 0.8rem;
+            right: 1.2rem;
+        }
+    }
+
+    &:hover {
+        .dc-dropdown__display {
+            background-color: var(--border-normal);
+            border: 1px solid var(--border-normal);
+
+            span {
+                background-color: var(--border-normal);
+            }
+        }
+    }
+}
diff --git a/packages/p2p/src/components/advertiser-page/advertiser-page-row.jsx b/packages/p2p/src/pages/advertiser-page/advertiser-page-row.jsx
similarity index 80%
rename from packages/p2p/src/components/advertiser-page/advertiser-page-row.jsx
rename to packages/p2p/src/pages/advertiser-page/advertiser-page-row.jsx
index f67a37d78098..7b287bb0d36d 100644
--- a/packages/p2p/src/components/advertiser-page/advertiser-page-row.jsx
+++ b/packages/p2p/src/pages/advertiser-page/advertiser-page-row.jsx
@@ -9,7 +9,7 @@ import { buy_sell } from 'Constants/buy-sell';
 import { localize, Localize } from 'Components/i18next';
 import { generateEffectiveRate } from 'Utils/format-value';
 import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
-import './advertiser-page.scss';
+import './advertiser-page-row.scss';
 
 const AdvertiserPageRow = ({ row: advert }) => {
     const { advertiser_page_store, buy_sell_store, general_store } = useStores();
@@ -50,9 +50,9 @@ const AdvertiserPageRow = ({ row: advert }) => {
 
     if (isMobile()) {
         return (
-            <Table.Row className='advertiser-page__adverts-table_row'>
+            <Table.Row className='advertiser-page-adverts__table-row'>
                 <Table.Cell className='advertiser-page__cell'>
-                    <Text size='xxs' line_height='m'>
+                    <Text size='xxs'>
                         <Localize
                             i18n_default_text='Rate (1 {{currency}})'
                             values={{
@@ -60,14 +60,11 @@ const AdvertiserPageRow = ({ row: advert }) => {
                             }}
                         />
                     </Text>
-
-                    <div className='advertiser-page__adverts-price'>
-                        <Text color='profit-success' size='s' weight='bold' line_height='m'>
-                            {display_effective_rate} {local_currency}
-                        </Text>
-                    </div>
+                    <Text as='div' color='profit-success' weight='bold'>
+                        {display_effective_rate} {local_currency}
+                    </Text>
                     <div className='advertiser-page__cell-limit'>
-                        <Text size='xxs' line_height='m'>
+                        <Text size='xxs'>
                             <Localize
                                 i18n_default_text='Limits {{min_order_amount_limit_display}}-{{max_order_amount_limit_display}} {{currency}}'
                                 values={{
@@ -83,7 +80,7 @@ const AdvertiserPageRow = ({ row: advert }) => {
                             ? payment_method_names.map((payment_method, key) => {
                                   return (
                                       <div className='advertiser-page__payment-method' key={key}>
-                                          <Text color='general' line-height='l' size='xxxs'>
+                                          <Text line_height='l' size='xxxs'>
                                               {payment_method}
                                           </Text>
                                       </div>
@@ -95,7 +92,7 @@ const AdvertiserPageRow = ({ row: advert }) => {
                 {is_my_advert ? (
                     <Table.Cell />
                 ) : (
-                    <Table.Cell className='advertiser-page__adverts-button'>
+                    <Table.Cell className='advertiser-page-adverts__button'>
                         <Button primary large onClick={showAdForm} is_disabled={general_store.is_barred}>
                             {is_buy_advert ? localize('Buy') : localize('Sell')} {currency}
                         </Button>
@@ -106,20 +103,20 @@ const AdvertiserPageRow = ({ row: advert }) => {
     }
 
     return (
-        <Table.Row className='advertiser-page__adverts-table_row'>
+        <Table.Row className='advertiser-page-adverts__table-row'>
             <Table.Cell>{`${min_order_amount_limit_display}-${max_order_amount_limit_display} ${currency}`}</Table.Cell>
-            <Table.Cell className='advertiser-page__adverts-price'>
-                <Text color='profit-success' line-height='m' size='xs' weight='bold'>
+            <Table.Cell>
+                <Text color='profit-success' size='xs' weight='bold'>
                     {display_effective_rate} {local_currency}
                 </Text>
             </Table.Cell>
             <Table.Cell>
-                <div className='buy-sell-row__payment-method'>
+                <div className='advertiser-page__payment-methods-list'>
                     {payment_method_names
                         ? payment_method_names.map((payment_method, key) => {
                               return (
-                                  <div className='buy-sell-row__payment-method--label' key={key}>
-                                      <Text color='general' size='xs' line-height='l'>
+                                  <div className='advertiser-page__payment-method' key={key}>
+                                      <Text size='xs' line_height='l'>
                                           {payment_method}
                                       </Text>
                                   </div>
@@ -131,7 +128,7 @@ const AdvertiserPageRow = ({ row: advert }) => {
             {is_my_advert ? (
                 <Table.Cell />
             ) : (
-                <Table.Cell className='advertiser-page__adverts-button'>
+                <Table.Cell className='advertiser-page-adverts__button'>
                     <Button is_disabled={general_store.is_barred} onClick={showAdForm} primary small>
                         {is_buy_advert ? localize('Buy') : localize('Sell')} {currency}
                     </Button>
diff --git a/packages/p2p/src/pages/advertiser-page/advertiser-page-row.scss b/packages/p2p/src/pages/advertiser-page/advertiser-page-row.scss
new file mode 100644
index 000000000000..d604e620e267
--- /dev/null
+++ b/packages/p2p/src/pages/advertiser-page/advertiser-page-row.scss
@@ -0,0 +1,2 @@
+@import 'advertiser-page.scss';
+@import 'advertiser-page-adverts.scss';
diff --git a/packages/p2p/src/components/advertiser-page/advertiser-page-stats.jsx b/packages/p2p/src/pages/advertiser-page/advertiser-page-stats.jsx
similarity index 77%
rename from packages/p2p/src/components/advertiser-page/advertiser-page-stats.jsx
rename to packages/p2p/src/pages/advertiser-page/advertiser-page-stats.jsx
index f0afa51e934a..1c8342efa4e2 100644
--- a/packages/p2p/src/components/advertiser-page/advertiser-page-stats.jsx
+++ b/packages/p2p/src/pages/advertiser-page/advertiser-page-stats.jsx
@@ -4,7 +4,7 @@ import { isMobile } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
 import { localize, Localize } from 'Components/i18next';
 import { useStores } from 'Stores';
-import './advertiser-page.scss';
+import './advertiser-page-stats.scss';
 
 const AdvertiserPageStats = () => {
     const { advertiser_page_store, general_store } = useStores();
@@ -33,10 +33,10 @@ const AdvertiserPageStats = () => {
     if (isMobile()) {
         return (
             <React.Fragment>
-                <Table className='advertiser-page__stats--wrapper'>
-                    <Table.Row className='advertiser-page__stats'>
-                        <Table.Cell className='advertiser-page__stats-cell'>
-                            <Text as='p' color='less-prominent' line_height='m' size='xxxs'>
+                <Table className='advertiser-page-stats__wrapper'>
+                    <Table.Row className='advertiser-page-stats__row'>
+                        <Table.Cell className='advertiser-page-stats__cell'>
+                            <Text as='p' color='less-prominent' size='xxxs'>
                                 <Localize
                                     i18n_default_text='Buy completion  <0>30d</0>'
                                     components={[
@@ -49,13 +49,13 @@ const AdvertiserPageStats = () => {
                                     ]}
                                 />
                             </Text>
-                            <Text as='p' color='prominent' line_height='m' size='xs' weight='bold'>
+                            <Text as='p' color='prominent' size='xs' weight='bold'>
                                 {buy_completion_rate ? `${buy_completion_rate}% (${buy_orders_count})` : '-'}
                             </Text>
                         </Table.Cell>
-                        <div className='advertiser-page__stats-cell-separator' />
-                        <Table.Cell className='advertiser-page__stats-cell'>
-                            <Text as='p' color='less-prominent' line_height='m' size='xxxs'>
+                        <div className='advertiser-page-stats__cell-separator' />
+                        <Table.Cell className='advertiser-page-stats__cell'>
+                            <Text as='p' color='less-prominent' size='xxxs'>
                                 <Localize
                                     i18n_default_text='Avg. pay time  <0>30d</0>'
                                     components={[
@@ -78,10 +78,10 @@ const AdvertiserPageStats = () => {
                         </Table.Cell>
                     </Table.Row>
                 </Table>
-                <Table className='advertiser-page__stats--wrapper'>
-                    <Table.Row className='advertiser-page__stats'>
-                        <Table.Cell className='advertiser-page__stats-cell'>
-                            <Text as='p' color='less-prominent' line_height='m' size='xxxs'>
+                <Table className='advertiser-page-stats__wrapper'>
+                    <Table.Row className='advertiser-page-stats__row'>
+                        <Table.Cell className='advertiser-page-stats__cell'>
+                            <Text as='p' color='less-prominent' size='xxxs'>
                                 <Localize
                                     i18n_default_text='Sell completion  <0>30d</0>'
                                     components={[
@@ -94,13 +94,13 @@ const AdvertiserPageStats = () => {
                                     ]}
                                 />
                             </Text>
-                            <Text as='p' color='prominent' line_height='m' size='xs' weight='bold'>
+                            <Text as='p' color='prominent' size='xs' weight='bold'>
                                 {sell_completion_rate ? `${sell_completion_rate}% (${sell_orders_count})` : '-'}
                             </Text>
                         </Table.Cell>
-                        <div className='advertiser-page__stats-cell-separator' />
-                        <Table.Cell className='advertiser-page__stats-cell'>
-                            <Text as='p' color='less-prominent' line_height='m' size='xxxs'>
+                        <div className='advertiser-page-stats__cell-separator' />
+                        <Table.Cell className='advertiser-page-stats__cell'>
+                            <Text as='p' color='less-prominent' size='xxxs'>
                                 <Localize
                                     i18n_default_text='Avg. release time  <0>30d</0>'
                                     components={[
@@ -123,10 +123,10 @@ const AdvertiserPageStats = () => {
                         </Table.Cell>
                     </Table.Row>
                 </Table>
-                <Table className='advertiser-page__stats--wrapper'>
-                    <Table.Row className='advertiser-page__stats'>
-                        <Table.Cell className='advertiser-page__stats-cell'>
-                            <Text as='p' color='less-prominent' line_height='m' size='xxxs'>
+                <Table className='advertiser-page-stats__wrapper'>
+                    <Table.Row className='advertiser-page-stats__row'>
+                        <Table.Cell className='advertiser-page-stats__cell'>
+                            <Text as='p' color='less-prominent' size='xxxs'>
                                 <Localize
                                     i18n_default_text='Trade volume  <0>30d</0>'
                                     components={[
@@ -139,7 +139,7 @@ const AdvertiserPageStats = () => {
                                     ]}
                                 />
                             </Text>
-                            <Text as='p' color='prominent' line_height='m' size='xs' weight='bold'>
+                            <Text as='p' color='prominent' size='xs' weight='bold'>
                                 {buy_orders_amount && sell_orders_amount ? (
                                     <Money
                                         amount={Number(buy_orders_amount) + Number(sell_orders_amount)}
@@ -151,12 +151,12 @@ const AdvertiserPageStats = () => {
                                 )}
                             </Text>
                         </Table.Cell>
-                        <div className='advertiser-page__stats-cell-separator' />
-                        <Table.Cell className='advertiser-page__stats-cell'>
-                            <Text as='p' color='less-prominent' line_height='m' size='xxxs'>
+                        <div className='advertiser-page-stats__cell-separator' />
+                        <Table.Cell className='advertiser-page-stats__cell'>
+                            <Text as='p' color='less-prominent' size='xxxs'>
                                 <Localize i18n_default_text='Trade partners' />
                             </Text>
-                            <Text as='p' color='prominent' line_height='m' size='xs' weight='bold'>
+                            <Text as='p' color='prominent' size='xs' weight='bold'>
                                 {partner_count || '0'}
                             </Text>
                         </Table.Cell>
@@ -168,10 +168,10 @@ const AdvertiserPageStats = () => {
 
     return (
         <React.Fragment>
-            <Table className='advertiser-page__stats--wrapper'>
-                <Table.Row className='advertiser-page__stats'>
-                    <Table.Cell className='advertiser-page__stats-cell'>
-                        <Text as='p' color='less-prominent' line_height='m' size='xs'>
+            <Table className='advertiser-page-stats__wrapper'>
+                <Table.Row className='advertiser-page-stats__row'>
+                    <Table.Cell className='advertiser-page-stats__cell'>
+                        <Text as='p' color='less-prominent' size='xs'>
                             <Localize
                                 i18n_default_text='Buy completion  <0>30d</0>'
                                 components={[
@@ -184,13 +184,13 @@ const AdvertiserPageStats = () => {
                                 ]}
                             />
                         </Text>
-                        <Text as='p' color='prominent' line_height='m' size='m' weight='bold'>
+                        <Text as='p' color='prominent' size='m' weight='bold'>
                             {buy_completion_rate ? `${buy_completion_rate}% (${buy_orders_count})` : '-'}
                         </Text>
                     </Table.Cell>
-                    <div className='advertiser-page__stats-cell-separator' />
-                    <Table.Cell className='advertiser-page__stats-cell'>
-                        <Text as='p' color='less-prominent' line_height='m' size='xs'>
+                    <div className='advertiser-page-stats__cell-separator' />
+                    <Table.Cell className='advertiser-page-stats__cell'>
+                        <Text as='p' color='less-prominent' size='xs'>
                             <Localize
                                 i18n_default_text='Sell completion  <0>30d</0>'
                                 components={[
@@ -203,13 +203,13 @@ const AdvertiserPageStats = () => {
                                 ]}
                             />
                         </Text>
-                        <Text as='p' color='prominent' line_height='m' size='m' weight='bold'>
+                        <Text as='p' color='prominent' size='m' weight='bold'>
                             {sell_completion_rate ? `${sell_completion_rate}% (${sell_orders_count})` : '-'}
                         </Text>
                     </Table.Cell>
-                    <div className='advertiser-page__stats-cell-separator' />
-                    <Table.Cell className='advertiser-page__stats-cell'>
-                        <Text as='p' color='less-prominent' line_height='m' size='xs'>
+                    <div className='advertiser-page-stats__cell-separator' />
+                    <Table.Cell className='advertiser-page-stats__cell'>
+                        <Text as='p' color='less-prominent' size='xs'>
                             <Localize
                                 i18n_default_text='Trade volume  <0>30d</0>'
                                 components={[
@@ -222,7 +222,7 @@ const AdvertiserPageStats = () => {
                                 ]}
                             />
                         </Text>
-                        <Text as='p' color='prominent' line_height='m' size='m' weight='bold'>
+                        <Text as='p' color='prominent' size='m' weight='bold'>
                             {buy_orders_amount && sell_orders_amount ? (
                                 <Money
                                     amount={Number(buy_orders_amount) + Number(sell_orders_amount)}
@@ -236,10 +236,10 @@ const AdvertiserPageStats = () => {
                     </Table.Cell>
                 </Table.Row>
             </Table>
-            <Table className='advertiser-page__stats--wrapper'>
-                <Table.Row className='advertiser-page__stats'>
-                    <Table.Cell className='advertiser-page__stats-cell'>
-                        <Text as='p' color='less-prominent' line_height='m' size='xs'>
+            <Table className='advertiser-page-stats__wrapper'>
+                <Table.Row className='advertiser-page-stats__row'>
+                    <Table.Cell className='advertiser-page-stats__cell'>
+                        <Text as='p' color='less-prominent' size='xs'>
                             <Localize
                                 i18n_default_text='Avg. pay time  <0>30d</0>'
                                 components={[
@@ -260,9 +260,9 @@ const AdvertiserPageStats = () => {
                                 : '-'}
                         </Text>
                     </Table.Cell>
-                    <div className='advertiser-page__stats-cell-separator' />
-                    <Table.Cell className='advertiser-page__stats-cell'>
-                        <Text as='p' color='less-prominent' line_height='m' size='xs'>
+                    <div className='advertiser-page-stats__cell-separator' />
+                    <Table.Cell className='advertiser-page-stats__cell'>
+                        <Text as='p' color='less-prominent' size='xs'>
                             <Localize
                                 i18n_default_text='Avg. release time  <0>30d</0>'
                                 components={[
@@ -283,12 +283,12 @@ const AdvertiserPageStats = () => {
                                 : '-'}
                         </Text>
                     </Table.Cell>
-                    <div className='advertiser-page__stats-cell-separator' />
-                    <Table.Cell className='advertiser-page__stats-cell'>
-                        <Text as='p' color='less-prominent' line_height='m' size='xs'>
+                    <div className='advertiser-page-stats__cell-separator' />
+                    <Table.Cell className='advertiser-page-stats__cell'>
+                        <Text as='p' color='less-prominent' size='xs'>
                             <Localize i18n_default_text='Trade partners' />
                         </Text>
-                        <Text as='p' color='prominent' line_height='m' size='m' weight='bold'>
+                        <Text as='p' color='prominent' size='m' weight='bold'>
                             {partner_count || '0'}
                         </Text>
                     </Table.Cell>
diff --git a/packages/p2p/src/pages/advertiser-page/advertiser-page-stats.scss b/packages/p2p/src/pages/advertiser-page/advertiser-page-stats.scss
new file mode 100644
index 000000000000..f24a74ec89b8
--- /dev/null
+++ b/packages/p2p/src/pages/advertiser-page/advertiser-page-stats.scss
@@ -0,0 +1,75 @@
+.advertiser-page-stats {
+    &__row {
+        border-bottom: none;
+        display: flex;
+        grid-template-columns: repeat(3, 1fr);
+        height: 5rem;
+        justify-content: space-between;
+        margin: 2rem 0;
+        width: 100%;
+
+        @include mobile {
+            grid-template-columns: repeat(2, 1fr);
+            margin: 0.6rem;
+            width: 90vw;
+        }
+    }
+
+    &__cell {
+        display: grid;
+        min-width: 20rem;
+        text-align: center;
+        margin-right: 10rem;
+
+        @include mobile {
+            min-width: 12rem;
+
+            &:nth-child(5) {
+                min-width: 16rem;
+            }
+        }
+
+        &-buy {
+            margin-left: 0.5rem;
+            margin-top: 0.14rem;
+        }
+
+        &-completion {
+            display: flex;
+
+            @include mobile {
+                flex-direction: row;
+                justify-content: center;
+                padding-left: 0.5rem;
+            }
+        }
+
+        &-separator {
+            border-right: 1px solid #ededed;
+            margin-right: 2rem;
+
+            @include mobile {
+                margin: 0px 3rem 0 -4rem;
+            }
+        }
+    }
+
+    &__wrapper {
+        align-items: center;
+        display: flex;
+
+        @media (max-height: 580px) {
+            height: 5rem;
+        }
+        @include mobile {
+            display: flex;
+            justify-content: center;
+            flex: none;
+
+            background-color: var(--general-main-1);
+            z-index: 1;
+            transition: transform 0.25s linear, opacity 0.25s ease;
+            transform-origin: top;
+        }
+    }
+}
diff --git a/packages/p2p/src/components/advertiser-page/advertiser-page.jsx b/packages/p2p/src/pages/advertiser-page/advertiser-page.jsx
similarity index 95%
rename from packages/p2p/src/components/advertiser-page/advertiser-page.jsx
rename to packages/p2p/src/pages/advertiser-page/advertiser-page.jsx
index f236851cee9c..f072f53076d1 100644
--- a/packages/p2p/src/components/advertiser-page/advertiser-page.jsx
+++ b/packages/p2p/src/pages/advertiser-page/advertiser-page.jsx
@@ -8,27 +8,27 @@ import { useStores } from 'Stores';
 import { Localize, localize } from 'Components/i18next';
 import { my_profile_tabs } from 'Constants/my-profile-tabs';
 import { api_error_codes } from 'Constants/api-error-codes';
-import PageReturn from 'Components/page-return/page-return.jsx';
+import PageReturn from 'Components/page-return';
 import RecommendedBy from 'Components/recommended-by';
-import UserAvatar from 'Components/user/user-avatar/user-avatar.jsx';
+import UserAvatar from 'Components/user/user-avatar';
 import AdvertiserPageStats from './advertiser-page-stats.jsx';
 import AdvertiserPageAdverts from './advertiser-page-adverts.jsx';
 import StarRating from 'Components/star-rating';
 import AdvertiserPageDropdownMenu from './advertiser-page-dropdown-menu.jsx';
-import TradeBadge from '../trade-badge/trade-badge.jsx';
+import TradeBadge from 'Components/trade-badge';
 import BlockUserOverlay from './block-user/block-user-overlay';
 import classNames from 'classnames';
 import { OnlineStatusIcon, OnlineStatusLabel } from 'Components/online-status';
 import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
-import './advertiser-page.scss';
 
 const AdvertiserPage = () => {
     const { advertiser_page_store, buy_sell_store, general_store, my_profile_store } = useStores();
     const { hideModal, showModal, useRegisterModalProps } = useModalManagerContext();
+    const { advertiser_details_name, advertiser_details_id, counterparty_advertiser_info } = advertiser_page_store;
 
-    const is_my_advert = advertiser_page_store.advertiser_details_id === general_store.advertiser_id;
+    const is_my_advert = advertiser_details_id === general_store.advertiser_id;
     // Use general_store.advertiser_info since resubscribing to the same id from advertiser page returns error
-    const info = is_my_advert ? general_store.advertiser_info : advertiser_page_store.counterparty_advertiser_info;
+    const info = is_my_advert ? general_store.advertiser_info : counterparty_advertiser_info;
 
     const history = useHistory();
 
@@ -49,11 +49,11 @@ const AdvertiserPage = () => {
         sell_orders_count,
     } = info;
 
-    const nickname = advertiser_page_store.advertiser_details_name ?? name;
-
+    const joined_since = daysSince(created_time);
+    const nickname = advertiser_details_name ?? name;
     // rating_average_decimal converts rating_average to 1 d.p number
     const rating_average_decimal = rating_average ? Number(rating_average).toFixed(1) : null;
-    const joined_since = daysSince(created_time);
+
     const error_message = () => {
         return !!advertiser_page_store.is_counterparty_advertiser_blocked && !is_my_advert
             ? localize("Unblocking wasn't possible as {{name}} is not using Deriv P2P anymore.", {
@@ -78,11 +78,21 @@ const AdvertiserPage = () => {
             { fireImmediately: true }
         );
 
-        reaction(
+        return () => {
+            disposeCounterpartyAdvertiserIdReaction();
+            advertiser_page_store.onUnmount();
+            buy_sell_store.setShowAdvertiserPage(false);
+        };
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    React.useEffect(() => {
+        const disposeBlockUnblockUserErrorReaction = reaction(
             () => [advertiser_page_store.active_index, general_store.block_unblock_user_error],
             () => {
                 advertiser_page_store.onTabChange();
-                if (general_store.block_unblock_user_error && buy_sell_store.show_advertiser_page) {
+                if (general_store.block_unblock_user_error) {
                     showModal({
                         key: 'ErrorModal',
                         props: {
@@ -110,20 +120,15 @@ const AdvertiserPage = () => {
                             width: isMobile() ? '90rem' : '40rem',
                         },
                     });
-                    general_store.setBlockUnblockUserError(null);
                 }
             },
             { fireImmediately: true }
         );
 
         return () => {
-            disposeCounterpartyAdvertiserIdReaction();
-            advertiser_page_store.onUnmount();
-            buy_sell_store.setShowAdvertiserPage(false);
+            disposeBlockUnblockUserErrorReaction();
         };
-
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [advertiser_details_name, counterparty_advertiser_info]);
 
     useRegisterModalProps({
         key: 'BlockUserModal',
@@ -184,7 +189,7 @@ const AdvertiserPage = () => {
                         />
                         <div className='advertiser-page__header-name--column'>
                             <div className='advertiser-page__header-name'>
-                                <Text color='prominent' line-height='m' size='s' weight='bold'>
+                                <Text color='prominent' weight='bold'>
                                     {nickname}
                                 </Text>
                                 {first_name && last_name && (
@@ -195,7 +200,6 @@ const AdvertiserPage = () => {
                                     </div>
                                 )}
                             </div>
-
                             <MobileWrapper>
                                 <div className='advertiser-page__row'>
                                     <div className='advertiser-page__rating--row'>
diff --git a/packages/p2p/src/components/advertiser-page/advertiser-page.scss b/packages/p2p/src/pages/advertiser-page/advertiser-page.scss
similarity index 51%
rename from packages/p2p/src/components/advertiser-page/advertiser-page.scss
rename to packages/p2p/src/pages/advertiser-page/advertiser-page.scss
index 4427b7f4e35d..d7993f2817a5 100644
--- a/packages/p2p/src/components/advertiser-page/advertiser-page.scss
+++ b/packages/p2p/src/pages/advertiser-page/advertiser-page.scss
@@ -7,58 +7,6 @@
         overflow-y: auto;
     }
 
-    &__dropdown {
-        box-shadow: 0 1rem 2rem var(--shadow-menu);
-        border-radius: $BORDER_RADIUS;
-        cursor: pointer;
-        position: absolute;
-        right: 0;
-        z-index: 2;
-
-        .dc-dropdown__display {
-            background-color: var(--general-main-2);
-            border: 1px solid var(--general-active);
-
-            span {
-                background-color: var(--general-main-2);
-            }
-
-            &-placeholder {
-                top: auto;
-            }
-        }
-
-        &-container {
-            margin-top: 0;
-        }
-
-        &:hover {
-            .dc-dropdown__display {
-                background-color: var(--border-normal);
-                border: 1px solid var(--border-normal);
-
-                span {
-                    background-color: var(--border-normal);
-                }
-            }
-        }
-    }
-
-    &__menu-dots-icon {
-        cursor: pointer;
-        margin-bottom: 0.8rem;
-    }
-
-    &__menu-dots-toggle {
-        position: absolute;
-        right: 2.4rem;
-
-        @include mobile {
-            bottom: 0.8rem;
-            right: 1.2rem;
-        }
-    }
-
     &__page-return-header {
         position: relative;
     }
@@ -209,79 +157,6 @@
         margin-top: 0.35rem;
     }
 
-    &__stats {
-        border-bottom: none;
-        display: flex;
-        grid-template-columns: repeat(3, 1fr);
-        height: 5rem;
-        justify-content: space-between;
-        margin: 2rem 0;
-        width: 100%;
-
-        @include mobile {
-            grid-template-columns: repeat(2, 1fr);
-            margin: 0.6rem;
-            width: 90vw;
-        }
-
-        &-cell {
-            display: grid;
-            min-width: 20rem;
-            text-align: center;
-            margin-right: 10rem;
-
-            @include mobile {
-                min-width: 12rem;
-
-                &:nth-child(5) {
-                    min-width: 16rem;
-                }
-            }
-
-            &-buy {
-                margin-left: 0.5rem;
-                margin-top: 0.14rem;
-            }
-
-            &-completion {
-                display: flex;
-
-                @include mobile {
-                    flex-direction: row;
-                    justify-content: center;
-                    padding-left: 0.5rem;
-                }
-            }
-
-            &-separator {
-                border-right: 1px solid #ededed;
-                margin-right: 2rem;
-
-                @include mobile {
-                    margin: 0px 3rem 0 -4rem;
-                }
-            }
-        }
-
-        &--wrapper {
-            align-items: center;
-            display: flex;
-
-            @media (max-height: 580px) {
-                height: 5rem;
-            }
-            @include mobile {
-                display: flex;
-                justify-content: center;
-                flex: none;
-
-                background-color: var(--general-main-1);
-                z-index: 1;
-                transition: transform 0.25s linear, opacity 0.25s ease;
-                transform-origin: top;
-            }
-        }
-    }
     &__cell {
         @include mobile {
             display: block;
@@ -300,11 +175,13 @@
             }
         }
     }
+
     &__payment-methods-list {
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
     }
+
     &__payment-method {
         display: flex;
         flex-wrap: wrap;
@@ -318,86 +195,6 @@
 
         @include mobile {
             padding: 0.4rem;
-            font-size: 8px;
-        }
-    }
-    &__adverts {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-
-        &-button {
-            align-items: center;
-            display: flex;
-            justify-content: center;
-
-            @include mobile {
-                display: flex;
-                flex-direction: column;
-                justify-content: flex-start;
-                margin-top: 1rem;
-            }
-        }
-        &-table {
-            display: flex;
-            flex: 1;
-            flex-direction: column;
-
-            @include mobile {
-                display: flex;
-                flex-flow: column;
-                width: 100vw;
-            }
-
-            &-body {
-                flex: 1;
-                display: flex;
-                flex-direction: column;
-            }
-        }
-
-        &-table_row {
-            padding: 1.6rem;
-            grid-template-columns: 3fr 2fr 2.5fr 1fr;
-
-            @include mobile {
-                grid-template-columns: 2fr 1fr;
-                min-height: 105px;
-                padding: 1.6rem;
-                width: 100vw;
-            }
-        }
-
-        &-tabs {
-            width: 228px;
-        }
-
-        .dc-tabs__item {
-            @include mobile {
-                width: 50%;
-            }
-        }
-
-        &-list {
-            height: calc(100% - 200px);
-
-            @include mobile {
-                height: calc(100% - 236px);
-            }
-        }
-
-        &-scrollbar {
-            @include tablet-up {
-                height: calc(100vh - 527px);
-            }
-
-            position: absolute;
-
-            @include mobile {
-                bottom: 0;
-                max-height: calc(100vh - 440px) !important;
-                position: fixed;
-            }
         }
     }
 
@@ -411,6 +208,7 @@
             }
         }
     }
+
     &__data-list {
         flex: 1;
 
diff --git a/packages/p2p/src/components/advertiser-page/block-user/block-user-count.jsx b/packages/p2p/src/pages/advertiser-page/block-user/block-user-count.jsx
similarity index 96%
rename from packages/p2p/src/components/advertiser-page/block-user/block-user-count.jsx
rename to packages/p2p/src/pages/advertiser-page/block-user/block-user-count.jsx
index 8a86361852ae..9e460fc1419f 100644
--- a/packages/p2p/src/components/advertiser-page/block-user/block-user-count.jsx
+++ b/packages/p2p/src/pages/advertiser-page/block-user/block-user-count.jsx
@@ -57,7 +57,7 @@ const BlockUserCount = () => {
                     message={getMessage()}
                 >
                     <Icon className='block-user-count__container--icon' icon='IcUserBlockedOutline' size={16} />
-                    <Text color='less-prominent' line_height='m' size={isDesktop() ? 'xs' : 14}>
+                    <Text color='less-prominent' size={isDesktop() ? 'xs' : 14}>
                         {user_blocked_count}
                     </Text>
                 </Popover>
diff --git a/packages/p2p/src/components/advertiser-page/block-user/block-user-count.scss b/packages/p2p/src/pages/advertiser-page/block-user/block-user-count.scss
similarity index 100%
rename from packages/p2p/src/components/advertiser-page/block-user/block-user-count.scss
rename to packages/p2p/src/pages/advertiser-page/block-user/block-user-count.scss
diff --git a/packages/p2p/src/components/advertiser-page/block-user/block-user-overlay/block-user-overlay.jsx b/packages/p2p/src/pages/advertiser-page/block-user/block-user-overlay/block-user-overlay.jsx
similarity index 96%
rename from packages/p2p/src/components/advertiser-page/block-user/block-user-overlay/block-user-overlay.jsx
rename to packages/p2p/src/pages/advertiser-page/block-user/block-user-overlay/block-user-overlay.jsx
index ccdbd03eada3..5851a07bfd60 100644
--- a/packages/p2p/src/components/advertiser-page/block-user/block-user-overlay/block-user-overlay.jsx
+++ b/packages/p2p/src/pages/advertiser-page/block-user/block-user-overlay/block-user-overlay.jsx
@@ -13,7 +13,7 @@ const BlockUserOverlay = ({ children, is_visible, onClickUnblock }) => {
             <div className='block-user-overlay'>
                 <div className='block-user-overlay__wrapper'>
                     <Icon icon='IcBlock' height={159} width={256} />
-                    <Text className='block-user-overlay__wrapper-text' line_height='m' size='s' weight='bold'>
+                    <Text className='block-user-overlay__wrapper-text' weight='bold'>
                         <Localize
                             i18n_default_text='You have blocked {{advertiser_name}}.'
                             values={{ advertiser_name: advertiser_page_store.advertiser_details_name }}
diff --git a/packages/p2p/src/components/advertiser-page/block-user/block-user-overlay/block-user-overlay.scss b/packages/p2p/src/pages/advertiser-page/block-user/block-user-overlay/block-user-overlay.scss
similarity index 94%
rename from packages/p2p/src/components/advertiser-page/block-user/block-user-overlay/block-user-overlay.scss
rename to packages/p2p/src/pages/advertiser-page/block-user/block-user-overlay/block-user-overlay.scss
index 61b95397d9fc..c3fb5362157d 100644
--- a/packages/p2p/src/components/advertiser-page/block-user/block-user-overlay/block-user-overlay.scss
+++ b/packages/p2p/src/pages/advertiser-page/block-user/block-user-overlay/block-user-overlay.scss
@@ -33,7 +33,7 @@
         }
     }
 
-    .advertiser-page__adverts-table-body {
+    .advertiser-page-adverts__table-body {
         min-height: 20vh;
     }
 }
diff --git a/packages/p2p/src/components/advertiser-page/block-user/block-user-overlay/index.js b/packages/p2p/src/pages/advertiser-page/block-user/block-user-overlay/index.js
similarity index 100%
rename from packages/p2p/src/components/advertiser-page/block-user/block-user-overlay/index.js
rename to packages/p2p/src/pages/advertiser-page/block-user/block-user-overlay/index.js
diff --git a/packages/p2p/src/components/advertiser-page/index.js b/packages/p2p/src/pages/advertiser-page/index.js
similarity index 100%
rename from packages/p2p/src/components/advertiser-page/index.js
rename to packages/p2p/src/pages/advertiser-page/index.js
diff --git a/packages/p2p/src/components/app.jsx b/packages/p2p/src/pages/app.jsx
similarity index 95%
rename from packages/p2p/src/components/app.jsx
rename to packages/p2p/src/pages/app.jsx
index 5819bb98de6d..19a8e73ff08f 100644
--- a/packages/p2p/src/components/app.jsx
+++ b/packages/p2p/src/pages/app.jsx
@@ -6,13 +6,13 @@ import { getLanguage } from '@deriv/translations';
 import { Loading } from '@deriv/components';
 import { routes, WS } from '@deriv/shared';
 import ServerTime from 'Utils/server-time';
+import { init } from 'Utils/server_time';
 import { waitWS } from 'Utils/websocket';
 import { useStores } from 'Stores';
-import AppContent from './app-content.jsx';
-import { setLanguage } from './i18next';
-import { ModalManager, ModalManagerContextProvider } from './modal-manager';
-import { init } from '../utils/server_time';
-import Routes from './routes/routes.jsx';
+import AppContent from 'Components/app-content.jsx';
+import { setLanguage } from 'Components/i18next';
+import { ModalManager, ModalManagerContextProvider } from 'Components/modal-manager';
+import Routes from 'Components/routes/routes.jsx';
 import './app.scss';
 
 const App = () => {
@@ -51,7 +51,7 @@ const App = () => {
         // Check if advertiser info has been subscribed to before the user navigates to
         // /advertiser?=id{counterparty_advertiser_id} from the url
         const disposeAdvertiserInfoSubscribedReaction = reaction(
-            () => general_store.is_advertiser_info_subscribed,
+            () => general_store.is_advertiser_info_subscribed && general_store.counterparty_advertiser_id,
             () => {
                 if (
                     /\/advertiser$/.test(location.pathname) &&
@@ -245,7 +245,7 @@ const App = () => {
 
     return (
         <>
-            <main className='p2p-cashier'>
+            <main className='p2p'>
                 <ModalManagerContextProvider>
                     <ModalManager />
                     <AppContent order_id={order_id} />
diff --git a/packages/p2p/src/components/app.scss b/packages/p2p/src/pages/app.scss
similarity index 71%
rename from packages/p2p/src/components/app.scss
rename to packages/p2p/src/pages/app.scss
index 37335c3aed1d..3ed4c48db9ea 100644
--- a/packages/p2p/src/components/app.scss
+++ b/packages/p2p/src/pages/app.scss
@@ -1,7 +1,7 @@
 @import '../../../shared/src/styles/reset.scss';
 @import '../../../shared/src/styles/themes.scss';
 
-.p2p-cashier {
+.p2p {
     background: transparent;
     height: 100%;
     width: 100%;
@@ -10,29 +10,12 @@
     flex-direction: column;
     overflow: hidden;
 
-    &__barred-user {
-        .dc-hint-box {
-            margin-top: 1.6rem;
-
-            &__icon {
-                @include mobile {
-                    align-self: flex-start;
-                    min-width: 16px;
-                    min-height: 16px;
-                }
-            }
-
-            @include mobile {
-                margin: 1rem 2rem;
-            }
-        }
-    }
-
     &__content {
         padding: 0 1.6rem;
     }
+
     & .dc-tabs {
-        &--p2p-cashier__tabs {
+        &--p2p__tabs {
             @include mobile {
                 overflow: hidden;
             }
@@ -55,6 +38,7 @@
             }
         }
     }
+
     & .dc-button-menu {
         &__wrapper {
             background-color: var(--state-disabled);
@@ -80,10 +64,12 @@
             background-color: var(--state-normal) !important;
         }
     }
+
     &__separator {
         width: 100%;
         border-top: 1px solid var(--general-section-1);
     }
+
     &__advertiser-tab {
         @include mobile {
             .dc-tabs {
@@ -104,37 +90,10 @@
             }
         }
     }
+
     @include mobile {
         .dc-autocomplete__field {
             border: none;
         }
     }
 }
-
-.sendbird-fileviewer__header-delete {
-    display: none !important;
-}
-
-.p2p-nickname {
-    &__dialog {
-        @include mobile {
-            height: 100%;
-        }
-    }
-}
-
-.dc-modal__container_p2p-nickname {
-    &__dialog {
-        height: auto;
-        margin-bottom: 0;
-        max-height: 50rem !important;
-        max-width: 44rem;
-        min-width: 44rem;
-        padding: 0;
-        width: 100%;
-
-        @include mobile {
-            min-width: 0;
-        }
-    }
-}
diff --git a/packages/p2p/src/components/buy-sell/__tests__/buy-sell-form-receive-amount.spec.js b/packages/p2p/src/pages/buy-sell/__tests__/buy-sell-form-receive-amount.spec.js
similarity index 95%
rename from packages/p2p/src/components/buy-sell/__tests__/buy-sell-form-receive-amount.spec.js
rename to packages/p2p/src/pages/buy-sell/__tests__/buy-sell-form-receive-amount.spec.js
index 3b87668add14..b2281817aaa1 100644
--- a/packages/p2p/src/components/buy-sell/__tests__/buy-sell-form-receive-amount.spec.js
+++ b/packages/p2p/src/pages/buy-sell/__tests__/buy-sell-form-receive-amount.spec.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { useStores } from 'Stores';
-import BuySellFormReceiveAmount from 'Components/buy-sell/buy-sell-form-receive-amount.jsx';
+import BuySellFormReceiveAmount from 'Pages/buy-sell/buy-sell-form-receive-amount.jsx';
 
 jest.mock('Stores', () => ({
     ...jest.requireActual('Stores'),
diff --git a/packages/p2p/src/components/buy-sell/__tests__/buy-sell.spec.jsx b/packages/p2p/src/pages/buy-sell/__tests__/buy-sell.spec.jsx
similarity index 74%
rename from packages/p2p/src/components/buy-sell/__tests__/buy-sell.spec.jsx
rename to packages/p2p/src/pages/buy-sell/__tests__/buy-sell.spec.jsx
index 07e7d1367bc5..24148ec30dba 100644
--- a/packages/p2p/src/components/buy-sell/__tests__/buy-sell.spec.jsx
+++ b/packages/p2p/src/pages/buy-sell/__tests__/buy-sell.spec.jsx
@@ -6,12 +6,13 @@ import BuySell from '../buy-sell';
 const mock_store = {
     general_store: {
         should_show_popup: false,
+        setShouldShowPopup: jest.fn(),
         setActiveIndex: jest.fn(),
         active_index: 1,
     },
     buy_sell_store: {
-        registerIsListedReaction: jest.fn(),
-        registerAdvertIntervalReaction: jest.fn(),
+        registerIsListedReaction: jest.fn(() => jest.fn()),
+        registerAdvertIntervalReaction: jest.fn(() => jest.fn()),
         selected_local_currency: 'USD',
         show_advertiser_page: false,
         should_show_verification: true,
@@ -19,25 +20,13 @@ const mock_store = {
     },
 };
 
-jest.mock('Components/verification/verification.jsx', () => jest.fn(() => <div>Verification Section</div>));
+jest.mock('Components/verification/verification', () => jest.fn(() => <div>Verification Section</div>));
 
 jest.mock('Stores', () => ({
     ...jest.requireActual('Stores'),
     useStores: jest.fn(() => mock_store),
 }));
 
-jest.mock('@sendbird/chat', () => ({
-    SendbirdChat: jest.fn().mockReturnValue({}),
-}));
-
-jest.mock('@sendbird/chat/groupChannel', () => ({
-    SendbirdChat: jest.fn().mockReturnValue({}),
-}));
-
-jest.mock('@sendbird/chat/message', () => ({
-    SendbirdChat: jest.fn().mockReturnValue({}),
-}));
-
 describe('<BuySellPage/>', () => {
     it('should render the buy/sell page', () => {
         render(<BuySell />);
diff --git a/packages/p2p/src/components/buy-sell/__tests__/sort-dropdown.spec.js b/packages/p2p/src/pages/buy-sell/__tests__/sort-dropdown.spec.js
similarity index 100%
rename from packages/p2p/src/components/buy-sell/__tests__/sort-dropdown.spec.js
rename to packages/p2p/src/pages/buy-sell/__tests__/sort-dropdown.spec.js
diff --git a/packages/p2p/src/components/buy-sell/buy-sell-form-receive-amount.jsx b/packages/p2p/src/pages/buy-sell/buy-sell-form-receive-amount.jsx
similarity index 80%
rename from packages/p2p/src/components/buy-sell/buy-sell-form-receive-amount.jsx
rename to packages/p2p/src/pages/buy-sell/buy-sell-form-receive-amount.jsx
index 8de1f76d8d93..f2d6c0f4b378 100644
--- a/packages/p2p/src/components/buy-sell/buy-sell-form-receive-amount.jsx
+++ b/packages/p2p/src/pages/buy-sell/buy-sell-form-receive-amount.jsx
@@ -4,20 +4,21 @@ import { getFormattedText } from '@deriv/shared';
 import { Localize } from 'Components/i18next';
 import { roundOffDecimal } from 'Utils/format-value';
 import { useStores } from 'Stores';
+import './buy-sell-form-receive-amount.scss';
 
 const BuySellFormReceiveAmount = () => {
     const { buy_sell_store } = useStores();
 
     return (
-        <div className='buy-sell__modal-receive-amount'>
-            <Text as='p' color='less-prominent' line_height='m' size='xxs'>
+        <div className='buy-sell-form-receive-amount'>
+            <Text as='p' color='less-prominent' size='xxs'>
                 {buy_sell_store?.is_sell_advert ? (
                     <Localize i18n_default_text="You'll receive" />
                 ) : (
                     <Localize i18n_default_text="You'll send" />
                 )}
             </Text>
-            <Text as='p' color='general' line_height='m' size='xs' weight='bold'>
+            <Text as='p' size='xs' weight='bold'>
                 {getFormattedText(
                     roundOffDecimal(buy_sell_store?.receive_amount),
                     buy_sell_store?.advert?.local_currency
diff --git a/packages/p2p/src/pages/buy-sell/buy-sell-form-receive-amount.scss b/packages/p2p/src/pages/buy-sell/buy-sell-form-receive-amount.scss
new file mode 100644
index 000000000000..1bc6d4c8ce24
--- /dev/null
+++ b/packages/p2p/src/pages/buy-sell/buy-sell-form-receive-amount.scss
@@ -0,0 +1,7 @@
+.buy-sell-form-receive-amount {
+    @include mobile {
+        border-top: 1px solid var(--general-section-2);
+        padding: 0.8rem 1.6rem;
+        background-color: var(--general-main-1);
+    }
+}
diff --git a/packages/p2p/src/components/buy-sell/buy-sell-form.jsx b/packages/p2p/src/pages/buy-sell/buy-sell-form.jsx
similarity index 92%
rename from packages/p2p/src/components/buy-sell/buy-sell-form.jsx
rename to packages/p2p/src/pages/buy-sell/buy-sell-form.jsx
index 8c972da25e2d..864e3036e55c 100644
--- a/packages/p2p/src/components/buy-sell/buy-sell-form.jsx
+++ b/packages/p2p/src/pages/buy-sell/buy-sell-form.jsx
@@ -11,12 +11,13 @@ import { localize, Localize } from 'Components/i18next';
 import { ad_type } from 'Constants/floating-rate';
 import { useStores } from 'Stores';
 import BuySellFormReceiveAmount from './buy-sell-form-receive-amount.jsx';
-import PaymentMethodCard from '../my-profile/payment-methods/payment-method-card/payment-method-card.jsx';
+import PaymentMethodCard from 'Pages/my-profile/payment-methods/payment-method-card/payment-method-card.jsx';
 import { floatingPointValidator } from 'Utils/validations';
 import { countDecimalPlaces } from 'Utils/string';
 import { generateEffectiveRate, setDecimalPlaces, roundOffDecimal, removeTrailingZeros } from 'Utils/format-value';
 import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
 import PaymentMethodIcon from 'Components/payment-method-icon';
+import './buy-sell-form.scss';
 
 const BuySellForm = props => {
     const isMounted = useIsMounted();
@@ -145,7 +146,7 @@ const BuySellForm = props => {
     return (
         <React.Fragment>
             {rate_type === ad_type.FLOAT && !should_disable_field && (
-                <div className='buy-sell__modal-hintbox'>
+                <div className='buy-sell-form-hintbox'>
                     <HintBox
                         icon='IcAlertInfo'
                         message={
@@ -180,39 +181,38 @@ const BuySellForm = props => {
 
                     return (
                         <Form noValidate>
-                            <div className='buy-sell__modal-content'>
-                                <div className='buy-sell__modal-field-wrapper'>
-                                    <div className='buy-sell__modal-field'>
-                                        <Text as='p' color='less-prominent' line_height='m' size='xxs'>
+                            <div className='buy-sell-form__content'>
+                                <div className='buy-sell-form__field-wrapper'>
+                                    <div className='buy-sell-form__field'>
+                                        <Text as='p' color='less-prominent' size='xxs'>
                                             {buy_sell_store.is_buy_advert ? (
                                                 <Localize i18n_default_text='Seller' />
                                             ) : (
                                                 <Localize i18n_default_text='Buyer' />
                                             )}
                                         </Text>
-                                        <Text as='p' color='general' line_height='m' size='xs'>
+                                        <Text as='p' size='xs'>
                                             {advertiser_details.name}
                                         </Text>
                                     </div>
-                                    <div className='buy-sell__modal-field'>
-                                        <Text as='p' color='less-prominent' line_height='m' size='xxs'>
+                                    <div className='buy-sell-form__field'>
+                                        <Text as='p' color='less-prominent' size='xxs'>
                                             <Localize
                                                 i18n_default_text='Rate (1 {{ currency }})'
                                                 values={{ currency: buy_sell_store.account_currency }}
                                             />
                                         </Text>
-                                        <Text as='p' color='general' line_height='m' size='xs'>
+                                        <Text as='p' size='xs'>
                                             {display_effective_rate} {local_currency}
                                         </Text>
                                     </div>
                                 </div>
-                                <div className='buy-sell__modal-payment-method--container'>
+                                <div className='buy-sell-form-payment-method--container'>
                                     {payment_method_names && (
                                         <Text
                                             as='p'
-                                            className='buy-sell__modal-payment-method--title'
+                                            className='buy-sell-form-payment-method--title'
                                             color='less-prominent'
-                                            line_height='m'
                                             size='xxs'
                                         >
                                             <Localize i18n_default_text='Payment methods' />
@@ -220,20 +220,20 @@ const BuySellForm = props => {
                                     )}
                                     {payment_method_names &&
                                         payment_method_names.map((payment_method, key) => (
-                                            <div className='buy-sell__modal-payment-method--row' key={key}>
+                                            <div className='buy-sell-form-payment-method--row' key={key}>
                                                 <PaymentMethodIcon
-                                                    className='buy-sell__modal-payment-method--icon'
+                                                    className='buy-sell-form-payment-method--icon'
                                                     display_name={payment_method}
                                                 />
-                                                <Text as='p' color='general' line_height='m' size='xs'>
+                                                <Text as='p' size='xs'>
                                                     {payment_method}
                                                 </Text>
                                             </div>
                                         ))}
                                 </div>
-                                <div className='buy-sell__modal-field-wrapper'>
-                                    <div className='buy-sell__modal-field'>
-                                        <Text as='p' color='less-prominent' line_height='m' size='xxs'>
+                                <div className='buy-sell-form__field-wrapper'>
+                                    <div className='buy-sell-form__field'>
+                                        <Text as='p' color='less-prominent' size='xxs'>
                                             {buy_sell_store.is_buy_advert ? (
                                                 <Localize i18n_default_text="Seller's instructions" />
                                             ) : (
@@ -245,26 +245,25 @@ const BuySellForm = props => {
                                             .replace(/([\r\n]){2,}/g, '\n\n')
                                             .split('\n')
                                             .map((text, idx) => (
-                                                <Text key={idx} as='p' color='general' line_height='m' size='xs'>
+                                                <Text key={idx} as='p' size='xs'>
                                                     {text || '-'}
                                                 </Text>
                                             ))}
                                     </div>
                                 </div>
-                                <div className='buy-sell__modal-line' />
+                                <div className='buy-sell-form-line' />
                                 {buy_sell_store.is_sell_advert && payment_method_names && (
                                     <React.Fragment>
-                                        <div className='buy-sell__modal-payment-method'>
+                                        <div className='buy-sell-form-payment-method'>
                                             <Text
                                                 as='p'
-                                                className='buy-sell__modal-payment-method--title'
+                                                className='buy-sell-form-payment-method--title'
                                                 color='less-prominent'
-                                                line_height='m'
                                                 size='xxs'
                                             >
                                                 <Localize i18n_default_text='Receive payment to' />
                                             </Text>
-                                            <Text as='p' color='prominent' line_height='m' size='xxs'>
+                                            <Text as='p' color='prominent' size='xxs'>
                                                 {my_profile_store.advertiser_has_payment_methods ? (
                                                     <Localize i18n_default_text='You may choose up to 3.' />
                                                 ) : (
@@ -274,8 +273,8 @@ const BuySellForm = props => {
                                             <Observer>
                                                 {() => (
                                                     <div
-                                                        className={classNames('buy-sell__modal--sell-payment-methods', {
-                                                            'buy-sell__modal--sell-payment-methods--disable':
+                                                        className={classNames('buy-sell-form--sell-payment-methods', {
+                                                            'buy-sell-form--sell-payment-methods--disable':
                                                                 should_disable_field,
                                                         })}
                                                     >
@@ -348,16 +347,16 @@ const BuySellForm = props => {
                                                 )}
                                             </Observer>
                                         </div>
-                                        <div className='buy-sell__modal-line' />
+                                        <div className='buy-sell-form-line' />
                                     </React.Fragment>
                                 )}
-                                <div className='buy-sell__modal--input'>
+                                <div className='buy-sell-form--input'>
                                     <Text color='less-prominent' size='xxs'>
                                         {localize('Enter {{transaction_type}} amount', {
                                             transaction_type: buy_sell_store.is_buy_advert ? 'buy' : 'sell',
                                         })}
                                     </Text>
-                                    <section className='buy-sell__modal--input-field'>
+                                    <section className='buy-sell-form--input-field'>
                                         <Field name='amount'>
                                             {({ field }) => (
                                                 <Input
@@ -381,9 +380,9 @@ const BuySellForm = props => {
                                                         />
                                                     }
                                                     is_relative_hint
-                                                    className='buy-sell__modal-field'
+                                                    className='buy-sell-form__field'
                                                     trailing_icon={
-                                                        <Text color='less-prominent' line-height='m' size='xs'>
+                                                        <Text color='less-prominent' size='xs'>
                                                             {buy_sell_store.account_currency}
                                                         </Text>
                                                     }
@@ -413,8 +412,8 @@ const BuySellForm = props => {
                                         </Field>
                                         {isDesktop() && (
                                             <div
-                                                className={classNames('buy-sell__modal-field', {
-                                                    'buy-sell__modal-field--disable': should_disable_field,
+                                                className={classNames('buy-sell-form__field', {
+                                                    'buy-sell-form__field--disable': should_disable_field,
                                                 })}
                                             >
                                                 <BuySellFormReceiveAmount />
@@ -425,7 +424,7 @@ const BuySellForm = props => {
                                 {buy_sell_store.is_sell_advert && (
                                     <React.Fragment>
                                         {!payment_method_names && (
-                                            <div className='buy-sell__modal-field--textarea'>
+                                            <div className='buy-sell-form__field--textarea'>
                                                 <Field name='payment_info'>
                                                     {({ field }) => (
                                                         <Input
@@ -448,7 +447,7 @@ const BuySellForm = props => {
                                                 </Field>
                                             </div>
                                         )}
-                                        <div className='buy-sell__modal-field--textarea'>
+                                        <div className='buy-sell-form__field--textarea'>
                                             <Field name='contact_info'>
                                                 {({ field }) => (
                                                     <Input
diff --git a/packages/p2p/src/pages/buy-sell/buy-sell-form.scss b/packages/p2p/src/pages/buy-sell/buy-sell-form.scss
new file mode 100644
index 000000000000..507fdcecdb66
--- /dev/null
+++ b/packages/p2p/src/pages/buy-sell/buy-sell-form.scss
@@ -0,0 +1,245 @@
+.buy-sell-form {
+    opacity: 1 !important;
+
+    @include mobile {
+        .dc-mobile-full-page-modal__header--border-bottom {
+            border-bottom: 2px solid var(--general-section-1);
+        }
+    }
+
+    &__content {
+        .dc-input {
+            margin-bottom: unset;
+        }
+    }
+
+    &__field {
+        margin-bottom: 0 !important;
+        flex: 1;
+        height: 4rem;
+
+        .dc-input__container {
+            width: 91%;
+            padding: 0.5rem 1rem 0.5rem 1.2rem;
+        }
+
+        &--disable {
+            opacity: 0.32;
+        }
+
+        &--textarea {
+            border-top: 1px solid var(--general-section-5);
+            margin-bottom: 3.5rem;
+            padding: 1.8rem 2.4rem 0;
+
+            .dc-input {
+                &__container {
+                    height: 9.7rem;
+                }
+
+                &__field {
+                    padding-block: 1rem;
+                }
+            }
+        }
+
+        &-wrapper {
+            $gap: 2.4rem;
+            display: flex;
+            margin: -#{$gap} 0 1.6rem -#{$gap};
+            padding: 0 2.4rem;
+            word-break: break-word;
+
+            & > * {
+                margin: $gap 0 0 $gap;
+            }
+
+            @include mobile {
+                flex-direction: column;
+
+                .dc-input__wrapper {
+                    margin-top: 2.5rem;
+                    width: 90vw;
+                }
+            }
+
+            > .dc-input {
+                margin-top: 1rem; // Compensate for label.
+            }
+        }
+    }
+
+    &-body {
+        position: relative;
+        display: block;
+        padding-top: 2.4rem;
+
+        @include mobile {
+            & > form {
+                height: fit-content !important;
+            }
+        }
+    }
+
+    &-danger {
+        margin-bottom: 1.6rem;
+        width: fit-content;
+        align-items: flex-start;
+    }
+
+    &-form {
+        height: fit-content !important;
+    }
+
+    &-footer {
+        @include mobile {
+            border-top: 2px solid var(--general-section-1);
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-end;
+            margin-top: auto;
+            padding: 1.6rem;
+        }
+    }
+
+    &--input {
+        display: flex;
+        gap: 2rem;
+        flex-direction: column;
+        padding: 0 2.4rem 2rem;
+        margin-bottom: 2rem;
+        .dc-input__wrapper {
+            margin-right: 0.2rem;
+            margin-bottom: unset;
+        }
+
+        &-field {
+            @include desktop {
+                display: flex;
+            }
+        }
+        @include mobile {
+            .dc-input {
+                &__container {
+                    width: 100%;
+                    padding: 0.5rem 1rem 0.5rem 1.2rem;
+                }
+                &__wrapper {
+                    margin: 0.8rem 0.2rem 1.4rem 0;
+                }
+            }
+        }
+    }
+
+    &-hintbox {
+        margin: -0.5rem 0 2.4rem;
+        padding: 0 2.4rem;
+
+        .dc-hint-box {
+            &__icon {
+                align-self: flex-start;
+            }
+        }
+    }
+
+    &-icon {
+        margin-right: 0.8rem;
+    }
+
+    &-line {
+        border-top: 1px solid var(--general-section-5);
+        margin: 1.6rem 0;
+        width: 100%;
+    }
+
+    &-payment-method {
+        padding: 0 2.4rem;
+        &--container {
+            align-self: center;
+            display: flex;
+            flex-direction: column;
+            margin-bottom: 1.6rem;
+            padding: 0 2.4rem;
+        }
+
+        &--icon {
+            border-radius: 2px;
+            margin-right: 0.8rem;
+        }
+
+        &--row {
+            align-items: center;
+            display: flex;
+            flex-direction: row;
+            margin-bottom: 0.8rem;
+        }
+
+        &--title {
+            margin-bottom: 0.8rem;
+        }
+    }
+
+    &-receive-amount {
+        @include mobile {
+            border-top: 1px solid var(--general-section-2);
+            padding: 0.8rem 1.6rem;
+            background-color: var(--general-main-1);
+        }
+    }
+
+    &--sell-payment-methods {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.8rem;
+        margin: 1.6rem 0 2.4rem;
+
+        .payment-method-card {
+            margin: unset;
+
+            @include mobile {
+                min-height: 8.8rem;
+                min-width: unset;
+                width: 13.6rem;
+            }
+
+            &--add {
+                margin: unset;
+
+                @include mobile {
+                    min-height: 8.8rem;
+                    width: 13.6rem;
+                }
+            }
+            &__body {
+                margin-top: 0.8rem;
+
+                @include mobile {
+                    margin-top: 0;
+                }
+            }
+        }
+
+        &--disable {
+            opacity: 0.32;
+        }
+    }
+
+    &--layout {
+        padding: unset;
+    }
+
+    &--error-message {
+        padding: 0 2.4rem;
+    }
+}
+
+.dc-modal__container_buy-sell-form {
+    .dc-modal-header--buy-sell-form {
+        border-bottom: 2px solid var(--general-section-5);
+    }
+
+    .dc-modal-footer--separator {
+        margin-top: 1rem;
+        border-top: 2px solid var(--general-section-5);
+    }
+}
diff --git a/packages/p2p/src/components/buy-sell/buy-sell-header.jsx b/packages/p2p/src/pages/buy-sell/buy-sell-header.jsx
similarity index 79%
rename from packages/p2p/src/components/buy-sell/buy-sell-header.jsx
rename to packages/p2p/src/pages/buy-sell/buy-sell-header.jsx
index a095b6d0dd4f..f8ef9244fc61 100644
--- a/packages/p2p/src/components/buy-sell/buy-sell-header.jsx
+++ b/packages/p2p/src/pages/buy-sell/buy-sell-header.jsx
@@ -7,11 +7,11 @@ import { observer } from 'mobx-react-lite';
 import classNames from 'classnames';
 import { buy_sell } from 'Constants/buy-sell';
 import { localize } from 'Components/i18next';
-import ToggleContainer from 'Components/misc/toggle-container.jsx';
-import SortDropdown from 'Components/buy-sell/sort-dropdown.jsx';
+import ToggleContainer from 'Components/toggle-container';
+import SortDropdown from 'Pages/buy-sell/sort-dropdown';
 import { useStores } from 'Stores';
-import CurrencyDropdown from 'Components/buy-sell/currency-dropdown.jsx';
-import 'Components/buy-sell/buy-sell-header.scss';
+import CurrencyDropdown from 'Pages/buy-sell/currency-dropdown.jsx';
+import 'Pages/buy-sell/buy-sell-header.scss';
 
 const getBuySellFilters = () => [
     {
@@ -70,15 +70,15 @@ const BuySellHeader = ({ table_type }) => {
 
     return (
         <div
-            className={classNames('buy-sell__header', {
-                'buy-sell__header-position-static': !!buy_sell_store.api_error_message,
+            className={classNames('buy-sell-header', {
+                'buy-sell-header__position-static': !!buy_sell_store.api_error_message,
             })}
         >
-            <div className='buy-sell__header-container'>
+            <div className='buy-sell-header__container'>
                 <ToggleContainer>
                     <ButtonToggle
                         buttons_arr={getBuySellFilters()}
-                        className='buy-sell__header-filters'
+                        className='buy-sell-header__filters'
                         is_animated
                         name='filter'
                         onChange={buy_sell_store.onChangeTableType}
@@ -87,8 +87,8 @@ const BuySellHeader = ({ table_type }) => {
                     />
                 </ToggleContainer>
                 <div
-                    className={classNames('buy-sell__header-row', {
-                        'buy-sell__header-row--selector': is_currency_selector_visible,
+                    className={classNames('buy-sell-header__row', {
+                        'buy-sell-header__row--selector': is_currency_selector_visible,
                     })}
                 >
                     {is_currency_selector_visible && <CurrencyDropdown />}
@@ -98,16 +98,16 @@ const BuySellHeader = ({ table_type }) => {
                         placeholder={isDesktop() ? localize('Search by nickname') : localize('Search')}
                     />
                     <SortDropdown />
-                    <div className='buy-sell__header-row--filter'>
+                    <div className='buy-sell-header__row--filter'>
                         <div
-                            className={classNames('buy-sell__header-row--filter-status', {
-                                'buy-sell__header-row--filter-status--disabled':
+                            className={classNames('buy-sell-header__row--filter-status', {
+                                'buy-sell-header__row--filter-status--disabled':
                                     buy_sell_store.selected_payment_method_value.length === 0,
                             })}
                         />
                         <Icon
                             icon='IcFilter'
-                            className='buy-sell__header-row--filter-icon'
+                            className='buy-sell-header__row--filter-icon'
                             onClick={() => general_store.showModal({ key: 'FilterModal', props: {} })}
                             size={40}
                         />
diff --git a/packages/p2p/src/components/buy-sell/buy-sell-header.scss b/packages/p2p/src/pages/buy-sell/buy-sell-header.scss
similarity index 93%
rename from packages/p2p/src/components/buy-sell/buy-sell-header.scss
rename to packages/p2p/src/pages/buy-sell/buy-sell-header.scss
index 8f5af62af972..7b93559da498 100644
--- a/packages/p2p/src/components/buy-sell/buy-sell-header.scss
+++ b/packages/p2p/src/pages/buy-sell/buy-sell-header.scss
@@ -1,4 +1,4 @@
-.buy-sell__header {
+.buy-sell-header {
     display: flex;
     flex-direction: column;
 
@@ -21,7 +21,7 @@
         z-index: 1;
     }
 
-    &-container {
+    &__container {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
@@ -31,7 +31,7 @@
         }
     }
 
-    &-filters {
+    &__filters {
         height: 3.6rem;
         width: 16.8rem;
 
@@ -41,7 +41,7 @@
         }
     }
 
-    &-match-ads {
+    &__match-ads {
         display: flex;
         flex-direction: row;
 
@@ -61,7 +61,7 @@
         }
     }
 
-    &-row {
+    &__row {
         display: flex;
         flex-direction: row;
         align-items: center;
@@ -105,6 +105,7 @@
             @include mobile {
                 justify-self: center;
                 margin-left: 0;
+                margin-top: 0;
             }
         }
 
@@ -114,8 +115,8 @@
             }
         }
     }
-}
 
-.buy-sell__header-position-static {
-    position: static;
+    &__position-static {
+        position: static;
+    }
 }
diff --git a/packages/p2p/src/components/buy-sell/buy-sell-row.jsx b/packages/p2p/src/pages/buy-sell/buy-sell-row.jsx
similarity index 92%
rename from packages/p2p/src/components/buy-sell/buy-sell-row.jsx
rename to packages/p2p/src/pages/buy-sell/buy-sell-row.jsx
index ffb59e90c5e0..04f877f19ae6 100644
--- a/packages/p2p/src/components/buy-sell/buy-sell-row.jsx
+++ b/packages/p2p/src/pages/buy-sell/buy-sell-row.jsx
@@ -88,13 +88,7 @@ const BuySellRow = ({ row: advert }) => {
                     />
                     <div className='buy-sell-row__advertiser-name'>
                         <div className='buy-sell__cell--container__row'>
-                            <Text
-                                className='buy-sell-row__advertiser-name--text'
-                                size='xs'
-                                line_height='m'
-                                color='general'
-                                weight='bold'
-                            >
+                            <Text className='buy-sell-row__advertiser-name--text' size='xs' weight='bold'>
                                 {advertiser_name}
                             </Text>
                             <TradeBadge trade_count={advertiser_details.completed_orders_count} />
@@ -123,13 +117,13 @@ const BuySellRow = ({ row: advert }) => {
                 </div>
                 <div className='buy-sell-row__information'>
                     <div className='buy-sell-row__rate'>
-                        <Text as='div' color='general' line_height='m' size='xxs'>
+                        <Text as='div' size='xxs'>
                             <Localize i18n_default_text='Rate (1 {{currency}})' values={{ currency }} />
                         </Text>
-                        <Text as='div' color='profit-success' line_height='m' size='s' weight='bold'>
+                        <Text as='div' color='profit-success' weight='bold'>
                             {display_effective_rate} {local_currency}
                         </Text>
-                        <Text as='div' color='less-prominent' line_height='m' size='xxs'>
+                        <Text as='div' color='less-prominent' size='xxs'>
                             <Localize
                                 i18n_default_text='Limits {{ min_order }}–{{ max_order }} {{ currency }}'
                                 values={{
@@ -145,12 +139,18 @@ const BuySellRow = ({ row: advert }) => {
                             payment_method_names.map((payment_method, key) => {
                                 return (
                                     <div className='buy-sell-row__payment-method' key={key}>
-                                        {payment_method}
+                                        <Text line_height='l' size='xxxs'>
+                                            {payment_method}
+                                        </Text>
                                     </div>
                                 );
                             })
                         ) : (
-                            <div className='buy-sell-row__payment-method'>-</div>
+                            <div className='buy-sell-row__payment-method'>
+                                <Text line_height='l' size='xxxs'>
+                                    -
+                                </Text>
+                            </div>
                         )}
                     </div>
                     {!is_my_advert && (
@@ -223,7 +223,7 @@ const BuySellRow = ({ row: advert }) => {
                 {min_order_amount_limit_display}&ndash;{max_order_amount_limit_display} {account_currency}
             </Table.Cell>
             <Table.Cell>
-                <Text color='profit-success' size='xs' line-height='m' weight='bold'>
+                <Text color='profit-success' size='xs' weight='bold'>
                     {display_effective_rate} {local_currency}
                 </Text>
             </Table.Cell>
@@ -233,7 +233,7 @@ const BuySellRow = ({ row: advert }) => {
                         payment_method_names.map((payment_method, key) => {
                             return (
                                 <div className='buy-sell-row__payment-method--label' key={key}>
-                                    <Text color='general' size='xs' line-height='l'>
+                                    <Text size='xs' line_height='l'>
                                         {payment_method}
                                     </Text>
                                 </div>
@@ -241,7 +241,7 @@ const BuySellRow = ({ row: advert }) => {
                         })
                     ) : (
                         <div className='buy-sell-row__payment-method--label'>
-                            <Text color='general' size='xs' line-height='l'>
+                            <Text size='xs' line_height='l'>
                                 -
                             </Text>
                         </div>
diff --git a/packages/p2p/src/components/buy-sell/buy-sell-row.scss b/packages/p2p/src/pages/buy-sell/buy-sell-row.scss
similarity index 99%
rename from packages/p2p/src/components/buy-sell/buy-sell-row.scss
rename to packages/p2p/src/pages/buy-sell/buy-sell-row.scss
index 52b8793b0436..1923f9b81315 100644
--- a/packages/p2p/src/components/buy-sell/buy-sell-row.scss
+++ b/packages/p2p/src/pages/buy-sell/buy-sell-row.scss
@@ -84,7 +84,6 @@
 
         @media (max-width: 320px) {
             padding: 0.4rem;
-            font-size: 10px;
         }
     }
 
diff --git a/packages/p2p/src/components/buy-sell/buy-sell-table.jsx b/packages/p2p/src/pages/buy-sell/buy-sell-table.jsx
similarity index 87%
rename from packages/p2p/src/components/buy-sell/buy-sell-table.jsx
rename to packages/p2p/src/pages/buy-sell/buy-sell-table.jsx
index 7f5c6ccda4fc..afc9a3f0822c 100644
--- a/packages/p2p/src/components/buy-sell/buy-sell-table.jsx
+++ b/packages/p2p/src/pages/buy-sell/buy-sell-table.jsx
@@ -5,10 +5,11 @@ import { isDesktop } from '@deriv/shared';
 import { reaction } from 'mobx';
 import { observer, useStore } from '@deriv/stores';
 import { Localize } from 'Components/i18next';
-import { TableError } from 'Components/table/table-error.jsx';
+import TableError from 'Components/section-error';
 import { useStores } from 'Stores';
 import BuySellRow from './buy-sell-row.jsx';
-import NoAds from './no-ads/no-ads.jsx';
+import NoAds from 'Pages/buy-sell//no-ads';
+import './buy-sell-table.scss';
 
 const BuySellRowRendererComponent = row_props => {
     const { buy_sell_store } = useStores();
@@ -49,13 +50,15 @@ const BuySellTable = ({ onScroll }) => {
     }
 
     if (buy_sell_store.api_error_message) {
-        return <TableError message={buy_sell_store.api_error_message} />;
+        return (
+            <TableError message={buy_sell_store.api_error_message} className='section-error__table--center' size='xs' />
+        );
     }
 
     if (buy_sell_store.items.length) {
         return (
             <>
-                <Table className='buy-sell__table'>
+                <Table className='buy-sell-table'>
                     <Modal
                         name='sort'
                         className='sort'
@@ -76,11 +79,7 @@ const BuySellTable = ({ onScroll }) => {
                                     <RadioGroup.Item
                                         key={key}
                                         value={list_item.value}
-                                        label={
-                                            <Text color='prominent' size='s'>
-                                                {list_item.text}
-                                            </Text>
-                                        }
+                                        label={<Text color='prominent'>{list_item.text}</Text>}
                                     />
                                 );
                             })}
@@ -88,7 +87,7 @@ const BuySellTable = ({ onScroll }) => {
                     </Modal>
                     {isDesktop() && (
                         <Table.Header>
-                            <Table.Row className='buy-sell__table-header'>
+                            <Table.Row className='buy-sell-table__header'>
                                 <Table.Head>
                                     <Localize i18n_default_text='Advertisers' />
                                 </Table.Head>
@@ -105,7 +104,7 @@ const BuySellTable = ({ onScroll }) => {
                             </Table.Row>
                         </Table.Header>
                     )}
-                    <Table.Body className='buy-sell__table-body'>
+                    <Table.Body className='buy-sell-table__body'>
                         <InfiniteDataList
                             data_list_className='buy-sell__data-list'
                             items={buy_sell_store.rendered_items}
diff --git a/packages/p2p/src/pages/buy-sell/buy-sell-table.scss b/packages/p2p/src/pages/buy-sell/buy-sell-table.scss
new file mode 100644
index 000000000000..bd60bd0856c6
--- /dev/null
+++ b/packages/p2p/src/pages/buy-sell/buy-sell-table.scss
@@ -0,0 +1,46 @@
+.buy-sell-table {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+
+    &__body {
+        height: 100%;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+    }
+
+    &__header {
+        display: grid;
+        grid-template-columns: 2fr 1.5fr 1fr 1.5fr 1fr;
+
+        > .dc-table__head:first-child {
+            margin-left: 1.6rem;
+        }
+    }
+
+    &__row {
+        padding: 1.6rem;
+        grid-template-columns: 2fr 1.5fr 1fr 1.5fr 1fr;
+
+        &:hover {
+            background-color: var(--general-hover);
+        }
+    }
+
+    &--sort {
+        display: flex;
+        flex-direction: column;
+        margin: 1.2rem 2.4rem;
+
+        &--divider {
+            border-top: 1px solid var(--border-normal);
+        }
+
+        &-radiogroup {
+            height: 10rem;
+            display: flex;
+            flex-direction: column;
+        }
+    }
+}
diff --git a/packages/p2p/src/components/buy-sell/buy-sell.jsx b/packages/p2p/src/pages/buy-sell/buy-sell.jsx
similarity index 92%
rename from packages/p2p/src/components/buy-sell/buy-sell.jsx
rename to packages/p2p/src/pages/buy-sell/buy-sell.jsx
index 0f9107443b27..3e47c84232fd 100644
--- a/packages/p2p/src/components/buy-sell/buy-sell.jsx
+++ b/packages/p2p/src/pages/buy-sell/buy-sell.jsx
@@ -2,13 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react-lite';
 import { localize } from 'Components/i18next';
-import PageReturn from 'Components/page-return/page-return.jsx';
-import Verification from 'Components/verification/verification.jsx';
+import PageReturn from 'Components/page-return';
+import Verification from 'Components/verification';
 import { buy_sell } from 'Constants/buy-sell';
 import { useStores } from 'Stores';
 import BuySellHeader from './buy-sell-header.jsx';
 import BuySellTable from './buy-sell-table.jsx';
-import './buy-sell.scss';
 
 const BuySell = () => {
     const { buy_sell_store, general_store } = useStores();
@@ -23,13 +22,14 @@ const BuySell = () => {
         return () => {
             disposeIsListedReaction();
             disposeAdvertIntervalReaction();
+            general_store.setShouldShowPopup(false);
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
     const onScroll = event => {
         if (!buy_sell_store.show_advertiser_page) {
-            previous_scroll_top.current = event.target.scrollTop;
+            previous_scroll_top.current = event?.target?.scrollTop;
         }
     };
 
diff --git a/packages/p2p/src/components/buy-sell/buy-sell.scss b/packages/p2p/src/pages/buy-sell/buy-sell.scss
similarity index 74%
rename from packages/p2p/src/components/buy-sell/buy-sell.scss
rename to packages/p2p/src/pages/buy-sell/buy-sell.scss
index 5857e198168a..ee7674a1a4be 100644
--- a/packages/p2p/src/components/buy-sell/buy-sell.scss
+++ b/packages/p2p/src/pages/buy-sell/buy-sell.scss
@@ -32,35 +32,6 @@
         }
     }
 
-    &__table {
-        display: flex;
-        flex: 1;
-        flex-direction: column;
-
-        &-body {
-            height: 100%;
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-        }
-
-        &-sort {
-            display: flex;
-            flex-direction: column;
-            margin: 1.2rem 2.4rem;
-
-            &--divider {
-                border-top: 1px solid var(--border-normal);
-            }
-
-            &-radiogroup {
-                height: 10rem;
-                display: flex;
-                flex-direction: column;
-            }
-        }
-    }
-
     &__data-list {
         flex: 1;
 
@@ -77,15 +48,6 @@
         margin: 2rem;
     }
 
-    &__table-header {
-        display: grid;
-        grid-template-columns: 2fr 1.5fr 1fr 1.5fr 1fr;
-
-        > .dc-table__head:first-child {
-            margin-left: 1.6rem;
-        }
-    }
-
     &__table-row {
         padding: 1.6rem;
         grid-template-columns: 2fr 1.5fr 1fr 1.5fr 1fr;
diff --git a/packages/p2p/src/components/buy-sell/currency-dropdown.jsx b/packages/p2p/src/pages/buy-sell/currency-dropdown.jsx
similarity index 96%
rename from packages/p2p/src/components/buy-sell/currency-dropdown.jsx
rename to packages/p2p/src/pages/buy-sell/currency-dropdown.jsx
index b93ea09bd191..d3b4d6d16e85 100644
--- a/packages/p2p/src/components/buy-sell/currency-dropdown.jsx
+++ b/packages/p2p/src/pages/buy-sell/currency-dropdown.jsx
@@ -4,7 +4,7 @@ import { observer } from 'mobx-react-lite';
 import { Dropdown, useOnClickOutside } from '@deriv/components';
 import { isMobile } from '@deriv/shared';
 import { useStores } from 'Stores';
-import { CurrencySelector } from 'Components/buy-sell/currency-selector';
+import { CurrencySelector } from 'Pages/buy-sell/currency-selector';
 import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
 import './currency-dropdown.scss';
 
diff --git a/packages/p2p/src/components/buy-sell/currency-dropdown.scss b/packages/p2p/src/pages/buy-sell/currency-dropdown.scss
similarity index 100%
rename from packages/p2p/src/components/buy-sell/currency-dropdown.scss
rename to packages/p2p/src/pages/buy-sell/currency-dropdown.scss
diff --git a/packages/p2p/src/components/buy-sell/currency-selector/currency-selector.jsx b/packages/p2p/src/pages/buy-sell/currency-selector/currency-selector.jsx
similarity index 97%
rename from packages/p2p/src/components/buy-sell/currency-selector/currency-selector.jsx
rename to packages/p2p/src/pages/buy-sell/currency-selector/currency-selector.jsx
index 99a7a4d59d35..7327c3ef2ab3 100644
--- a/packages/p2p/src/components/buy-sell/currency-selector/currency-selector.jsx
+++ b/packages/p2p/src/pages/buy-sell/currency-selector/currency-selector.jsx
@@ -28,7 +28,7 @@ const CurrencySelector = ({ className, default_value, list, onSelect }) => {
                         <Autocomplete
                             {...field}
                             autoComplete='off'
-                            className={classNames('currency-selector', className)}
+                            className={classNames('buy-sell-currency-selector', className)}
                             data-lpignore='true'
                             historyValue={default_value}
                             is_list_visible
diff --git a/packages/p2p/src/components/modal-manager/modals/currency-selector-modal/currency-selector.scss b/packages/p2p/src/pages/buy-sell/currency-selector/currency-selector.scss
similarity index 98%
rename from packages/p2p/src/components/modal-manager/modals/currency-selector-modal/currency-selector.scss
rename to packages/p2p/src/pages/buy-sell/currency-selector/currency-selector.scss
index 7697c98f7e77..f2b6a1594070 100644
--- a/packages/p2p/src/components/modal-manager/modals/currency-selector-modal/currency-selector.scss
+++ b/packages/p2p/src/pages/buy-sell/currency-selector/currency-selector.scss
@@ -1,4 +1,4 @@
-.currency-selector {
+.buy-sell-currency-selector {
     @include desktop {
         position: absolute;
         margin-top: 0.4rem;
diff --git a/packages/p2p/src/components/buy-sell/currency-selector/index.js b/packages/p2p/src/pages/buy-sell/currency-selector/index.js
similarity index 100%
rename from packages/p2p/src/components/buy-sell/currency-selector/index.js
rename to packages/p2p/src/pages/buy-sell/currency-selector/index.js
diff --git a/packages/p2p/src/components/buy-sell/index.js b/packages/p2p/src/pages/buy-sell/index.js
similarity index 70%
rename from packages/p2p/src/components/buy-sell/index.js
rename to packages/p2p/src/pages/buy-sell/index.js
index 234e62879564..ce599f32c10f 100644
--- a/packages/p2p/src/components/buy-sell/index.js
+++ b/packages/p2p/src/pages/buy-sell/index.js
@@ -1,3 +1,4 @@
 import BuySell from './buy-sell.jsx';
+import './buy-sell.scss';
 
 export default BuySell;
diff --git a/packages/p2p/src/components/buy-sell/no-ads/__tests__/no-ads.spec.jsx b/packages/p2p/src/pages/buy-sell/no-ads/__tests__/no-ads.spec.jsx
similarity index 100%
rename from packages/p2p/src/components/buy-sell/no-ads/__tests__/no-ads.spec.jsx
rename to packages/p2p/src/pages/buy-sell/no-ads/__tests__/no-ads.spec.jsx
diff --git a/packages/p2p/src/components/buy-sell/no-ads/index.js b/packages/p2p/src/pages/buy-sell/no-ads/index.js
similarity index 70%
rename from packages/p2p/src/components/buy-sell/no-ads/index.js
rename to packages/p2p/src/pages/buy-sell/no-ads/index.js
index fe997122f8c3..cfa65752c5ee 100644
--- a/packages/p2p/src/components/buy-sell/no-ads/index.js
+++ b/packages/p2p/src/pages/buy-sell/no-ads/index.js
@@ -1,3 +1,4 @@
 import NoAds from './no-ads.jsx';
+import './no-ads.scss';
 
 export default NoAds;
diff --git a/packages/p2p/src/components/buy-sell/no-ads/no-ads.jsx b/packages/p2p/src/pages/buy-sell/no-ads/no-ads.jsx
similarity index 100%
rename from packages/p2p/src/components/buy-sell/no-ads/no-ads.jsx
rename to packages/p2p/src/pages/buy-sell/no-ads/no-ads.jsx
index 34fa5c3993ea..0878fb57af07 100644
--- a/packages/p2p/src/components/buy-sell/no-ads/no-ads.jsx
+++ b/packages/p2p/src/pages/buy-sell/no-ads/no-ads.jsx
@@ -1,12 +1,12 @@
 import React from 'react';
+import classNames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import { useHistory } from 'react-router-dom';
 import { Button, Icon, Text } from '@deriv/components';
+import { routes } from '@deriv/shared';
 import { Localize } from 'Components/i18next';
 import { useStores } from 'Stores';
-import { routes } from '@deriv/shared';
 import './no-ads.scss';
-import classNames from 'classnames';
 
 const NoAds = ({ is_ads_page = false }) => {
     const { buy_sell_store, general_store, my_ads_store } = useStores();
diff --git a/packages/p2p/src/components/buy-sell/no-ads/no-ads.scss b/packages/p2p/src/pages/buy-sell/no-ads/no-ads.scss
similarity index 100%
rename from packages/p2p/src/components/buy-sell/no-ads/no-ads.scss
rename to packages/p2p/src/pages/buy-sell/no-ads/no-ads.scss
diff --git a/packages/p2p/src/components/buy-sell/sort-dropdown.jsx b/packages/p2p/src/pages/buy-sell/sort-dropdown.jsx
similarity index 96%
rename from packages/p2p/src/components/buy-sell/sort-dropdown.jsx
rename to packages/p2p/src/pages/buy-sell/sort-dropdown.jsx
index 2cdee1c7381f..d85b230fa9f9 100644
--- a/packages/p2p/src/components/buy-sell/sort-dropdown.jsx
+++ b/packages/p2p/src/pages/buy-sell/sort-dropdown.jsx
@@ -4,7 +4,7 @@ import { isDesktop } from '@deriv/shared';
 import { observer } from 'mobx-react-lite';
 import { localize } from 'Components/i18next';
 import { useStores } from 'Stores';
-import 'Components/buy-sell/sort-dropdown.scss';
+import 'Pages/buy-sell/sort-dropdown.scss';
 
 const SortDropdown = () => {
     const { buy_sell_store } = useStores();
diff --git a/packages/p2p/src/components/buy-sell/sort-dropdown.scss b/packages/p2p/src/pages/buy-sell/sort-dropdown.scss
similarity index 100%
rename from packages/p2p/src/components/buy-sell/sort-dropdown.scss
rename to packages/p2p/src/pages/buy-sell/sort-dropdown.scss
diff --git a/packages/p2p/src/components/my-ads/__tests__/ad-status.spec.js b/packages/p2p/src/pages/my-ads/__tests__/ad-status.spec.js
similarity index 100%
rename from packages/p2p/src/components/my-ads/__tests__/ad-status.spec.js
rename to packages/p2p/src/pages/my-ads/__tests__/ad-status.spec.js
diff --git a/packages/p2p/src/components/my-ads/__tests__/my-ads-table.spec.jsx b/packages/p2p/src/pages/my-ads/__tests__/my-ads-table.spec.jsx
similarity index 100%
rename from packages/p2p/src/components/my-ads/__tests__/my-ads-table.spec.jsx
rename to packages/p2p/src/pages/my-ads/__tests__/my-ads-table.spec.jsx
diff --git a/packages/p2p/src/components/my-ads/ad-status.jsx b/packages/p2p/src/pages/my-ads/ad-status.jsx
similarity index 100%
rename from packages/p2p/src/components/my-ads/ad-status.jsx
rename to packages/p2p/src/pages/my-ads/ad-status.jsx
diff --git a/packages/p2p/src/components/my-ads/ad-status.scss b/packages/p2p/src/pages/my-ads/ad-status.scss
similarity index 100%
rename from packages/p2p/src/components/my-ads/ad-status.scss
rename to packages/p2p/src/pages/my-ads/ad-status.scss
diff --git a/packages/p2p/src/components/my-ads/ad-type.jsx b/packages/p2p/src/pages/my-ads/ad-type.jsx
similarity index 69%
rename from packages/p2p/src/components/my-ads/ad-type.jsx
rename to packages/p2p/src/pages/my-ads/ad-type.jsx
index a8751925d843..7d796a62a8a9 100644
--- a/packages/p2p/src/components/my-ads/ad-type.jsx
+++ b/packages/p2p/src/pages/my-ads/ad-type.jsx
@@ -7,17 +7,10 @@ import './ad-type.scss';
 const AdType = ({ ad_pause_color, float_rate }) => {
     return (
         <div className='ad-type'>
-            <Text
-                as='span'
-                className='ad-type__badge'
-                color={ad_pause_color}
-                line_height='xs'
-                size='xxs'
-                weight='normal'
-            >
+            <Text as='span' className='ad-type__badge' color={ad_pause_color} line_height='xs' size='xxs'>
                 {localize('Float')}
             </Text>
-            <Text as='span' color={ad_pause_color} line_height='xxs' size='xxs' weight='normal'>
+            <Text as='span' color={ad_pause_color} line_height='xxs' size='xxs'>
                 {float_rate}%
             </Text>
         </div>
diff --git a/packages/p2p/src/components/my-ads/ad-type.scss b/packages/p2p/src/pages/my-ads/ad-type.scss
similarity index 100%
rename from packages/p2p/src/components/my-ads/ad-type.scss
rename to packages/p2p/src/pages/my-ads/ad-type.scss
diff --git a/packages/p2p/src/components/my-ads/buy-ad-payment-methods-list.jsx b/packages/p2p/src/pages/my-ads/buy-ad-payment-methods-list.jsx
similarity index 99%
rename from packages/p2p/src/components/my-ads/buy-ad-payment-methods-list.jsx
rename to packages/p2p/src/pages/my-ads/buy-ad-payment-methods-list.jsx
index 0fb42cedfa3e..6e753c5b3a38 100644
--- a/packages/p2p/src/components/my-ads/buy-ad-payment-methods-list.jsx
+++ b/packages/p2p/src/pages/my-ads/buy-ad-payment-methods-list.jsx
@@ -134,7 +134,7 @@ const BuyAdPaymentMethodsList = ({
                                         my_ads_store.current_method.key === key &&
                                         my_ads_store.current_method.is_deleted ? (
                                             <div
-                                                className='p2p-my-ads--border'
+                                                className='my-ads--border'
                                                 ref={deleted_autocomplete_ref}
                                                 onClick={e => {
                                                     my_ads_store.setShowFilterPaymentMethods(isMobile());
@@ -291,7 +291,7 @@ const BuyAdPaymentMethodsList = ({
                             <Field name='payment_method'>
                                 {({ field }) => (
                                     <div
-                                        className='p2p-my-ads--border'
+                                        className='my-ads--border'
                                         onClick={() => my_ads_store.setShowFilterPaymentMethods(isMobile())}
                                     >
                                         <Autocomplete
@@ -348,7 +348,7 @@ const BuyAdPaymentMethodsList = ({
                     <Field name='payment_method'>
                         {({ field }) => (
                             <div
-                                className='p2p-my-ads--border'
+                                className='my-ads--border'
                                 onClick={() => my_ads_store.setShowFilterPaymentMethods(isMobile())}
                             >
                                 <Autocomplete
diff --git a/packages/p2p/src/components/my-ads/buy-ad-payment-methods-list.scss b/packages/p2p/src/pages/my-ads/buy-ad-payment-methods-list.scss
similarity index 100%
rename from packages/p2p/src/components/my-ads/buy-ad-payment-methods-list.scss
rename to packages/p2p/src/pages/my-ads/buy-ad-payment-methods-list.scss
diff --git a/packages/p2p/src/components/my-ads/create-ad-form-payment-methods.jsx b/packages/p2p/src/pages/my-ads/create-ad-form-payment-methods.jsx
similarity index 92%
rename from packages/p2p/src/components/my-ads/create-ad-form-payment-methods.jsx
rename to packages/p2p/src/pages/my-ads/create-ad-form-payment-methods.jsx
index 35f536de75b4..2c7fe0402804 100644
--- a/packages/p2p/src/components/my-ads/create-ad-form-payment-methods.jsx
+++ b/packages/p2p/src/pages/my-ads/create-ad-form-payment-methods.jsx
@@ -2,11 +2,11 @@ import * as React from 'react';
 import { observer } from 'mobx-react-lite';
 import { useP2PAdvertiserPaymentMethods } from '@deriv/hooks';
 import { useStores } from 'Stores';
+import PaymentMethodCard from 'Pages/my-profile/payment-methods/payment-method-card';
 import { localize } from 'Components/i18next';
+import BuyAdPaymentMethodsList from 'Pages/my-ads/buy-ad-payment-methods-list.jsx';
+import SellAdPaymentMethodsList from 'Pages/my-ads/sell-ad-payment-methods-list.jsx';
 import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
-import PaymentMethodCard from '../my-profile/payment-methods/payment-method-card';
-import BuyAdPaymentMethodsList from './buy-ad-payment-methods-list.jsx';
-import SellAdPaymentMethodsList from './sell-ad-payment-methods-list.jsx';
 
 const CreateAdFormPaymentMethods = ({ is_sell_advert, onSelectPaymentMethods }) => {
     const { showModal } = useModalManagerContext();
diff --git a/packages/p2p/src/components/my-ads/create-ad-form.jsx b/packages/p2p/src/pages/my-ads/create-ad-form.jsx
similarity index 92%
rename from packages/p2p/src/components/my-ads/create-ad-form.jsx
rename to packages/p2p/src/pages/my-ads/create-ad-form.jsx
index b4fad24eba60..924b7596761f 100644
--- a/packages/p2p/src/components/my-ads/create-ad-form.jsx
+++ b/packages/p2p/src/pages/my-ads/create-ad-form.jsx
@@ -1,4 +1,5 @@
-import React from 'react';
+import * as React from 'react';
+import classNames from 'classnames';
 import { Formik, Field, Form } from 'formik';
 import {
     Button,
@@ -23,6 +24,7 @@ import CreateAdSummary from './create-ad-summary.jsx';
 import CreateAdFormPaymentMethods from './create-ad-form-payment-methods.jsx';
 import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
 import { api_error_codes } from '../../constants/api-error-codes.js';
+import './create-ad-form.scss';
 
 const CreateAdFormWrapper = ({ children }) => {
     if (isMobile()) {
@@ -157,19 +159,19 @@ const CreateAdForm = () => {
                     };
 
                     return (
-                        <div className='p2p-my-ads__form' data-testid='dp2p-create-ad-form_container'>
+                        <div className='create-ad-form' data-testid='dp2p-create-ad-form_container'>
                             <Form noValidate>
                                 <ThemedScrollbars
-                                    className='p2p-my-ads__form-scrollbar'
+                                    className='create-ad-form__scrollbar'
                                     is_scrollbar_hidden={isMobile()}
                                 >
                                     <CreateAdFormWrapper>
-                                        <div className='p2p-my-ads__form-scrollbar-container'>
+                                        <div className='create-ad-form__scrollbar-container'>
                                             <Field name='type'>
                                                 {({ field }) => (
                                                     <RadioGroup
                                                         {...field}
-                                                        className='p2p-my-ads__form-radio-group'
+                                                        className='create-ad-form__radio-group'
                                                         name='type'
                                                         onToggle={event => onChangeAdTypeHandler(event.target.value)}
                                                         selected={values.type}
@@ -186,19 +188,18 @@ const CreateAdForm = () => {
                                                     </RadioGroup>
                                                 )}
                                             </Field>
-                                            <div className='p2p-my-ads__form-summary'>
-                                                <CreateAdSummary
-                                                    market_feed={
-                                                        floating_rate_store.rate_type === ad_type.FLOAT
-                                                            ? getRate(local_currency_config.currency)
-                                                            : null
-                                                    }
-                                                    offer_amount={errors.offer_amount ? '' : values.offer_amount}
-                                                    price_rate={values.rate_type}
-                                                    type={values.type}
-                                                />
-                                            </div>
-                                            <div className='p2p-my-ads__form-container'>
+                                            <CreateAdSummary
+                                                market_feed={
+                                                    floating_rate_store.rate_type === ad_type.FLOAT
+                                                        ? getRate(local_currency_config.currency)
+                                                        : null
+                                                }
+                                                offer_amount={errors.offer_amount ? '' : values.offer_amount}
+                                                price_rate={values.rate_type}
+                                                type={values.type}
+                                            />
+
+                                            <div className='create-ad-form__container'>
                                                 <Field name='offer_amount'>
                                                     {({ field }) => (
                                                         <Input
@@ -208,11 +209,13 @@ const CreateAdForm = () => {
                                                             type='text'
                                                             error={touched.offer_amount && errors.offer_amount}
                                                             label={localize('Total amount')}
-                                                            className='p2p-my-ads__form-field'
+                                                            className={classNames('create-ad-form__field', {
+                                                                'create-ad-form__offer-amt__sell-ad':
+                                                                    values.type === buy_sell.SELL,
+                                                            })}
                                                             trailing_icon={
                                                                 <Text
                                                                     color={isDesktop() ? 'less-prominent' : 'prominent'}
-                                                                    line_height='m'
                                                                     size={isDesktop() ? 'xxs' : 's'}
                                                                 >
                                                                     {currency}
@@ -248,7 +251,7 @@ const CreateAdForm = () => {
                                                     {({ field }) =>
                                                         floating_rate_store.rate_type === ad_type.FLOAT ? (
                                                             <FloatingRate
-                                                                className='p2p-my-ads__form-field'
+                                                                className='create-ad-form__field'
                                                                 data_testid='float_rate_type'
                                                                 error_messages={errors.rate_type}
                                                                 fiat_currency={currency}
@@ -279,13 +282,12 @@ const CreateAdForm = () => {
                                                                 label={localize('Fixed rate (1 {{currency}})', {
                                                                     currency,
                                                                 })}
-                                                                className='p2p-my-ads__form-field'
+                                                                className='create-ad-form__field'
                                                                 trailing_icon={
                                                                     <Text
                                                                         color={
                                                                             isDesktop() ? 'less-prominent' : 'prominent'
                                                                         }
-                                                                        line_height='m'
                                                                         size={isDesktop() ? 'xxs' : 's'}
                                                                     >
                                                                         {local_currency_config.currency}
@@ -300,7 +302,7 @@ const CreateAdForm = () => {
                                                     }
                                                 </Field>
                                             </div>
-                                            <div className='p2p-my-ads__form-container'>
+                                            <div className='create-ad-form__container'>
                                                 <Field name='min_transaction'>
                                                     {({ field }) => (
                                                         <Input
@@ -310,11 +312,10 @@ const CreateAdForm = () => {
                                                             type='text'
                                                             error={touched.min_transaction && errors.min_transaction}
                                                             label={localize('Min order')}
-                                                            className='p2p-my-ads__form-field'
+                                                            className='create-ad-form__field'
                                                             trailing_icon={
                                                                 <Text
                                                                     color={isDesktop() ? 'less-prominent' : 'prominent'}
-                                                                    line_height='m'
                                                                     size={isDesktop() ? 'xxs' : 's'}
                                                                 >
                                                                     {currency}
@@ -336,11 +337,10 @@ const CreateAdForm = () => {
                                                             type='text'
                                                             error={touched.max_transaction && errors.max_transaction}
                                                             label={localize('Max order')}
-                                                            className='p2p-my-ads__form-field'
+                                                            className='create-ad-form__field'
                                                             trailing_icon={
                                                                 <Text
                                                                     color={isDesktop() ? 'less-prominent' : 'prominent'}
-                                                                    line_height='m'
                                                                     size={isDesktop() ? 'xxs' : 's'}
                                                                 >
                                                                     {currency}
@@ -355,7 +355,7 @@ const CreateAdForm = () => {
                                                 </Field>
                                             </div>
                                             {is_sell_advert && (
-                                                <div className='p2p-my-ads__form-field--contact-details'>
+                                                <div className='create-ad-form__field--contact-details'>
                                                     <Field name='contact_info'>
                                                         {({ field }) => (
                                                             <Input
@@ -369,7 +369,7 @@ const CreateAdForm = () => {
                                                                     </Text>
                                                                 }
                                                                 error={touched.contact_info && errors.contact_info}
-                                                                className='p2p-my-ads__form-field p2p-my-ads__form-field--textarea'
+                                                                className='create-ad-form__field create-ad-form__field--textarea'
                                                                 initial_character_count={
                                                                     general_store.contact_info.length
                                                                 }
@@ -398,7 +398,7 @@ const CreateAdForm = () => {
                                                             </Text>
                                                         }
                                                         hint={localize('This information will be visible to everyone.')}
-                                                        className='p2p-my-ads__form-field p2p-my-ads__form-field--textarea'
+                                                        className='create-ad-form__field create-ad-form__field--textarea'
                                                         initial_character_count={
                                                             general_store.default_advert_description.length
                                                         }
@@ -408,7 +408,7 @@ const CreateAdForm = () => {
                                                     />
                                                 )}
                                             </Field>
-                                            <div className='p2p-my-ads__form-payment-methods--text'>
+                                            <div className='create-ad-form__payment-methods--text'>
                                                 <Text color='prominent'>
                                                     <Localize i18n_default_text='Payment methods' />
                                                 </Text>
@@ -425,9 +425,9 @@ const CreateAdForm = () => {
                                                 is_sell_advert={is_sell_advert}
                                             />
                                         </div>
-                                        <div className='p2p-my-ads__form-container p2p-my-ads__form-footer'>
+                                        <div className='create-ad-form__container create-ad-form__footer'>
                                             <Button
-                                                className='p2p-my-ads__form-button'
+                                                className='create-ad-form__button'
                                                 secondary
                                                 large
                                                 onClick={onCleanup}
@@ -436,7 +436,7 @@ const CreateAdForm = () => {
                                                 <Localize i18n_default_text='Cancel' />
                                             </Button>
                                             <Button
-                                                className='p2p-my-ads__form-button'
+                                                className='create-ad-form__button'
                                                 primary
                                                 large
                                                 is_disabled={
@@ -457,7 +457,7 @@ const CreateAdForm = () => {
                 }}
             </Formik>
             <Modal
-                className='p2p-my-ads__ad-created'
+                className='my-ads__ad-created'
                 has_close_icon={false}
                 is_open={my_ads_store.is_ad_created_modal_visible}
                 small
diff --git a/packages/p2p/src/pages/my-ads/create-ad-form.scss b/packages/p2p/src/pages/my-ads/create-ad-form.scss
new file mode 100644
index 000000000000..e1d7dead6616
--- /dev/null
+++ b/packages/p2p/src/pages/my-ads/create-ad-form.scss
@@ -0,0 +1,211 @@
+.create-ad-form {
+    @include mobile {
+        .dc-input__footer {
+            justify-content: space-between;
+            width: 86vw;
+        }
+
+        .dc-input__hint--relative {
+            margin-left: unset;
+        }
+    }
+
+    .dc-input__wrapper {
+        max-width: 67.2rem; // TODO: Kill these fixed widths.
+        margin-top: 2.1rem;
+
+        @include mobile {
+            max-width: 90vw;
+
+            .create-ad-form__field {
+                margin-bottom: 0;
+            }
+        }
+    }
+
+    &__label {
+        &--focused {
+            color: var(--text-prominent);
+            background-color: var(--general-main-1);
+        }
+    }
+
+    &__payment-methods {
+        &--empty {
+            max-width: 67.2rem;
+            padding: 1.2rem 0;
+        }
+
+        &--text {
+            display: flex;
+            flex-direction: column;
+            margin-top: 3.2rem;
+            padding-bottom: 1rem;
+        }
+    }
+
+    &__radio-group {
+        display: flex;
+        margin-top: unset;
+        padding-bottom: 1.2rem;
+
+        .dc-radio-group__circle {
+            border: 2px solid var(--border-hover);
+
+            &--selected {
+                border: 4px solid var(--brand-red-coral);
+            }
+        }
+
+        @include mobile {
+            padding: 0.5rem 0;
+        }
+    }
+
+    &__scrollbar {
+        height: calc(100% - 2.4rem - 9.2rem);
+        position: absolute;
+        width: calc(100% - 4.8rem);
+
+        .dc-input {
+            max-width: 67.2rem;
+        }
+
+        &-container {
+            @include mobile {
+                width: 90vw;
+                margin: 0 1.6rem;
+
+                .dc-input {
+                    &__wrapper {
+                        margin-top: 2.1rem;
+                    }
+                    &__hint {
+                        margin-top: 0;
+                    }
+                }
+            }
+        }
+
+        @include mobile {
+            height: fit-content;
+            position: unset;
+            width: 100%;
+        }
+    }
+
+    &__container {
+        display: flex;
+        height: 8rem;
+        justify-content: space-between;
+        width: 67.2rem;
+
+        .dc-input {
+            margin-bottom: 2.1rem;
+            margin-top: 2.1rem;
+
+            &__container {
+                padding: 0 1rem;
+            }
+            &--hint {
+                margin-bottom: 0;
+            }
+            &__wrapper {
+                margin-top: 0;
+            }
+        }
+
+        @include mobile {
+            flex-direction: column;
+            height: unset;
+            width: unset;
+
+            .dc-input {
+                &__wrapper {
+                    margin-bottom: 5rem;
+                }
+            }
+        }
+    }
+
+    &__field {
+        height: 4rem;
+        margin-bottom: 0;
+        margin-left: 0;
+        width: 32.4rem;
+
+        @include mobile {
+            width: inherit;
+        }
+
+        &--contact-details {
+            margin-bottom: 5.9rem;
+
+            @include mobile {
+                margin-bottom: 3.7rem;
+            }
+        }
+        &--single {
+            width: 18.9rem;
+        }
+        &--textarea {
+            height: 9.6rem;
+            margin-bottom: 0;
+            width: 67.2rem;
+
+            @include mobile {
+                height: 9.8rem;
+                width: 90vw;
+            }
+
+            .dc-input {
+                &__hint {
+                    top: 9.7rem;
+                }
+
+                &___counter {
+                    top: 9.7rem;
+                    right: 0rem;
+
+                    @include mobile {
+                        display: flex;
+                        right: 0;
+                    }
+                }
+
+                &__textarea {
+                    padding-top: 1rem;
+                    padding-left: 0;
+                }
+
+                &__container {
+                    height: 9.6rem;
+                }
+            }
+        }
+    }
+
+    &__button {
+        margin-left: 0.8rem;
+    }
+
+    &__footer {
+        align-items: center;
+        background-color: var(--general-main-1);
+        display: flex;
+        justify-content: flex-end;
+
+        @include mobile {
+            border-top: 2px solid var(--general-section-1);
+            flex-direction: row;
+            padding: 1.6rem;
+            width: 100vw;
+        }
+    }
+
+    &__offer-amt {
+        &__sell_ad {
+            margin-top: 0 !important;
+        }
+    }
+}
diff --git a/packages/p2p/src/components/my-ads/create-ad-summary.jsx b/packages/p2p/src/pages/my-ads/create-ad-summary.jsx
similarity index 62%
rename from packages/p2p/src/components/my-ads/create-ad-summary.jsx
rename to packages/p2p/src/pages/my-ads/create-ad-summary.jsx
index 87d48bfe572d..6b06cfc74698 100644
--- a/packages/p2p/src/components/my-ads/create-ad-summary.jsx
+++ b/packages/p2p/src/pages/my-ads/create-ad-summary.jsx
@@ -9,6 +9,7 @@ import { Localize } from 'Components/i18next';
 import { ad_type } from 'Constants/floating-rate';
 import { useStores } from 'Stores';
 import { removeTrailingZeros, roundOffDecimal, percentOf } from 'Utils/format-value';
+import './create-ad-summary.scss';
 
 const CreateAdSummary = ({ offer_amount, price_rate, type }) => {
     const {
@@ -41,8 +42,8 @@ const CreateAdSummary = ({ offer_amount, price_rate, type }) => {
 
     if (offer_amount) {
         const components = [
-            <Text key={0} weight='bold' size='xs' color='status-info-blue' />,
-            <Text key={1} weight='normal' size='xs' color='status-info-blue' />,
+            <Text key={0} className='create-ad-summary' weight='bold' size='xs' color='status-info-blue' />,
+            <Text key={1} className='create-ad-summary' size='xs' color='status-info-blue' />,
         ];
         const values = { target_amount: display_offer_amount, target_currency: currency };
         if (price_rate) {
@@ -56,46 +57,58 @@ const CreateAdSummary = ({ offer_amount, price_rate, type }) => {
 
             if (type === buy_sell.BUY) {
                 return (
-                    <Localize
-                        i18n_default_text="You're creating an ad to buy <0>{{ target_amount }} {{ target_currency }}</0> for <0>{{ local_amount }} {{ local_currency }}</0> <1>({{ price_rate }} {{local_currency}}/{{ target_currency }})</1>"
-                        components={components}
-                        values={values}
-                    />
+                    <Text className='create-ad-summary' size='xs' color='less-prominent'>
+                        <Localize
+                            i18n_default_text="You're creating an ad to buy <0>{{ target_amount }} {{ target_currency }}</0> for <0>{{ local_amount }} {{ local_currency }}</0> <1>({{ price_rate }} {{local_currency}}/{{ target_currency }})</1>"
+                            components={components}
+                            values={values}
+                        />
+                    </Text>
                 );
             }
 
             return (
-                <Localize
-                    i18n_default_text="You're creating an ad to sell <0>{{ target_amount }} {{ target_currency }}</0> for <0>{{ local_amount }} {{ local_currency }}</0> <1>({{ price_rate }} {{local_currency}}/{{ target_currency }})</1>"
-                    components={components}
-                    values={values}
-                />
+                <Text className='create-ad-summary' size='xs' color='less-prominent'>
+                    <Localize
+                        i18n_default_text="You're creating an ad to sell <0>{{ target_amount }} {{ target_currency }}</0> for <0>{{ local_amount }} {{ local_currency }}</0> <1>({{ price_rate }} {{local_currency}}/{{ target_currency }})</1>"
+                        components={components}
+                        values={values}
+                    />
+                </Text>
             );
         }
 
         if (type === buy_sell.BUY) {
             return (
-                <Localize
-                    i18n_default_text="You're creating an ad to buy <0>{{ target_amount }} {{ target_currency }}</0>..."
-                    components={components}
-                    values={values}
-                />
+                <Text className='create-ad-summary' size='xs' color='less-prominent'>
+                    <Localize
+                        i18n_default_text="You're creating an ad to buy <0>{{ target_amount }} {{ target_currency }}</0>..."
+                        components={components}
+                        values={values}
+                    />
+                </Text>
             );
         }
 
         return (
-            <Localize
-                i18n_default_text="You're creating an ad to sell <0>{{ target_amount }} {{ target_currency }}</0>..."
-                components={components}
-                values={values}
-            />
+            <Text className='create-ad-summary' size='xs' color='less-prominent'>
+                <Localize
+                    i18n_default_text="You're creating an ad to sell <0>{{ target_amount }} {{ target_currency }}</0>..."
+                    components={components}
+                    values={values}
+                />
+            </Text>
         );
     }
 
     return type === buy_sell.BUY ? (
-        <Localize i18n_default_text="You're creating an ad to buy..." />
+        <Text className='create-ad-summary' size='xs' color='less-prominent'>
+            <Localize i18n_default_text="You're creating an ad to buy..." />
+        </Text>
     ) : (
-        <Localize i18n_default_text="You're creating an ad to sell..." />
+        <Text className='create-ad-summary' size='xs' color='less-prominent'>
+            <Localize i18n_default_text="You're creating an ad to sell..." />
+        </Text>
     );
 };
 
diff --git a/packages/p2p/src/pages/my-ads/create-ad-summary.scss b/packages/p2p/src/pages/my-ads/create-ad-summary.scss
new file mode 100644
index 000000000000..91f321fc8628
--- /dev/null
+++ b/packages/p2p/src/pages/my-ads/create-ad-summary.scss
@@ -0,0 +1,7 @@
+.create-ad-summary {
+    margin-bottom: 0.6rem;
+
+    @include mobile {
+        margin: 0.6rem 0;
+    }
+}
diff --git a/packages/p2p/src/components/my-ads/create-ad.jsx b/packages/p2p/src/pages/my-ads/create-ad.jsx
similarity index 91%
rename from packages/p2p/src/components/my-ads/create-ad.jsx
rename to packages/p2p/src/pages/my-ads/create-ad.jsx
index 68cd4a8870bd..793a81734718 100644
--- a/packages/p2p/src/components/my-ads/create-ad.jsx
+++ b/packages/p2p/src/pages/my-ads/create-ad.jsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Loading } from '@deriv/components';
 import { observer } from 'mobx-react-lite';
 import { localize } from 'Components/i18next';
-import PageReturn from 'Components/page-return/page-return.jsx';
+import PageReturn from 'Components/page-return';
 import { useStores } from 'Stores';
 import CreateAdForm from './create-ad-form.jsx';
 
diff --git a/packages/p2p/src/components/my-ads/edit-ad-form-payment-methods.jsx b/packages/p2p/src/pages/my-ads/edit-ad-form-payment-methods.jsx
similarity index 91%
rename from packages/p2p/src/components/my-ads/edit-ad-form-payment-methods.jsx
rename to packages/p2p/src/pages/my-ads/edit-ad-form-payment-methods.jsx
index 1f9c41530dbc..56ed8d45d785 100644
--- a/packages/p2p/src/components/my-ads/edit-ad-form-payment-methods.jsx
+++ b/packages/p2p/src/pages/my-ads/edit-ad-form-payment-methods.jsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { observer } from 'mobx-react-lite';
 import { useP2PAdvertiserPaymentMethods } from '@deriv/hooks';
-import { localize } from 'Components/i18next';
 import { useStores } from 'Stores';
+import { localize } from 'Components/i18next';
 import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
-import PaymentMethodCard from '../my-profile/payment-methods/payment-method-card';
-import BuyAdPaymentMethodsList from './buy-ad-payment-methods-list.jsx';
-import SellAdPaymentMethodsList from './sell-ad-payment-methods-list.jsx';
+import PaymentMethodCard from 'Pages/my-profile/payment-methods/payment-method-card';
+import BuyAdPaymentMethodsList from 'Pages/my-ads/buy-ad-payment-methods-list.jsx';
+import SellAdPaymentMethodsList from 'Pages/my-ads/sell-ad-payment-methods-list.jsx';
 
 const EditAdFormPaymentMethods = ({ is_sell_advert, selected_methods, setSelectedMethods, touched }) => {
     const { showModal } = useModalManagerContext();
diff --git a/packages/p2p/src/components/my-ads/edit-ad-form.jsx b/packages/p2p/src/pages/my-ads/edit-ad-form.jsx
similarity index 96%
rename from packages/p2p/src/components/my-ads/edit-ad-form.jsx
rename to packages/p2p/src/pages/my-ads/edit-ad-form.jsx
index 69ab01a073b4..e19ee2bc01c8 100644
--- a/packages/p2p/src/components/my-ads/edit-ad-form.jsx
+++ b/packages/p2p/src/pages/my-ads/edit-ad-form.jsx
@@ -5,7 +5,7 @@ import { Button, Div100vhContainer, Input, Loading, Modal, Text, ThemedScrollbar
 import { formatMoney, isDesktop, isMobile } from '@deriv/shared';
 import { observer } from 'mobx-react-lite';
 import { Localize, localize } from 'Components/i18next';
-import PageReturn from 'Components/page-return/page-return.jsx';
+import PageReturn from 'Components/page-return';
 import { api_error_codes } from 'Constants/api-error-codes';
 import { buy_sell } from 'Constants/buy-sell';
 import { useStores } from 'Stores';
@@ -15,6 +15,7 @@ import { generateErrorDialogTitle, generateErrorDialogBody } from 'Utils/adverts
 import EditAdFormPaymentMethods from './edit-ad-form-payment-methods.jsx';
 import EditAdSummary from './edit-ad-summary.jsx';
 import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
+import './edit-ad-form.scss';
 
 const EditAdFormWrapper = ({ children }) => {
     if (isMobile()) {
@@ -168,15 +169,15 @@ const EditAdForm = () => {
                                     ? dirty || is_payment_method_touched
                                     : is_payment_method_touched;
                             return (
-                                <div className='p2p-my-ads__form'>
+                                <div className='edit-ad-form'>
                                     <Form noValidate>
                                         <ThemedScrollbars
-                                            className='p2p-my-ads__form-scrollbar'
+                                            className='edit-ad-form__scrollbar'
                                             is_scrollbar_hidden={isMobile()}
                                         >
                                             <EditAdFormWrapper>
-                                                <div className='p2p-my-ads__form-scrollbar-container'>
-                                                    <div className='p2p-my-ads__form-summary'>
+                                                <div className='edit-ad-form__scrollbar-container'>
+                                                    <div className='edit-ad-form__summary'>
                                                         <EditAdSummary
                                                             offer_amount={
                                                                 errors.offer_amount ? '' : values.offer_amount
@@ -185,7 +186,7 @@ const EditAdForm = () => {
                                                             type={values.type}
                                                         />
                                                     </div>
-                                                    <div className='p2p-my-ads__form-container'>
+                                                    <div className='edit-ad-form__container'>
                                                         <Field name='offer_amount'>
                                                             {({ field }) => (
                                                                 <Input
@@ -196,8 +197,8 @@ const EditAdForm = () => {
                                                                     error={touched.offer_amount && errors.offer_amount}
                                                                     label={localize('Total amount')}
                                                                     className={classNames(
-                                                                        'p2p-my-ads__form-field',
-                                                                        'edit-ad__offer-amt'
+                                                                        'edit-ad-form__field',
+                                                                        'edit-ad-form__offer-amt'
                                                                     )}
                                                                     trailing_icon={
                                                                         <Text
@@ -206,7 +207,6 @@ const EditAdForm = () => {
                                                                                     ? 'less-prominent'
                                                                                     : 'prominent'
                                                                             }
-                                                                            line_height='m'
                                                                             size={isDesktop() ? 'xxs' : 's'}
                                                                         >
                                                                             {account_currency}
@@ -243,7 +243,7 @@ const EditAdForm = () => {
                                                             {({ field }) =>
                                                                 my_ads_store.required_ad_type === ad_type.FLOAT ? (
                                                                     <FloatingRate
-                                                                        className='p2p-my-ads__form-field'
+                                                                        className='edit-ad-form__field'
                                                                         data_testid='float_rate_type'
                                                                         error_messages={errors.rate_type}
                                                                         fiat_currency={account_currency}
@@ -280,8 +280,8 @@ const EditAdForm = () => {
                                                                                 account_currency,
                                                                             }
                                                                         )}
-                                                                        label_className='p2p-my-ads__form-label--focused'
-                                                                        className='p2p-my-ads__form-field'
+                                                                        label_className='edit-ad-form__label--focused'
+                                                                        className='edit-ad-form__field'
                                                                         trailing_icon={
                                                                             <Text
                                                                                 color={
@@ -289,7 +289,6 @@ const EditAdForm = () => {
                                                                                         ? 'less-prominent'
                                                                                         : 'prominent'
                                                                                 }
-                                                                                line_height='m'
                                                                                 size={isDesktop() ? 'xxs' : 's'}
                                                                             >
                                                                                 {local_currency}
@@ -307,7 +306,7 @@ const EditAdForm = () => {
                                                             }
                                                         </Field>
                                                     </div>
-                                                    <div className='p2p-my-ads__form-container'>
+                                                    <div className='edit-ad-form__container'>
                                                         <Field name='min_transaction'>
                                                             {({ field }) => (
                                                                 <Input
@@ -320,7 +319,7 @@ const EditAdForm = () => {
                                                                         errors.min_transaction
                                                                     }
                                                                     label={localize('Min order')}
-                                                                    className='p2p-my-ads__form-field'
+                                                                    className='edit-ad-form__field'
                                                                     trailing_icon={
                                                                         <Text
                                                                             color={
@@ -328,7 +327,6 @@ const EditAdForm = () => {
                                                                                     ? 'less-prominent'
                                                                                     : 'prominent'
                                                                             }
-                                                                            line_height='m'
                                                                             size={isDesktop() ? 'xxs' : 's'}
                                                                         >
                                                                             {account_currency}
@@ -353,7 +351,7 @@ const EditAdForm = () => {
                                                                         errors.max_transaction
                                                                     }
                                                                     label={localize('Max order')}
-                                                                    className='p2p-my-ads__form-field'
+                                                                    className='edit-ad-form__field'
                                                                     trailing_icon={
                                                                         <Text
                                                                             color={
@@ -361,7 +359,6 @@ const EditAdForm = () => {
                                                                                     ? 'less-prominent'
                                                                                     : 'prominent'
                                                                             }
-                                                                            line_height='m'
                                                                             size={isDesktop() ? 'xxs' : 's'}
                                                                         >
                                                                             {account_currency}
@@ -392,7 +389,7 @@ const EditAdForm = () => {
                                                                         error={
                                                                             touched.contact_info && errors.contact_info
                                                                         }
-                                                                        className='p2p-my-ads__form-field p2p-my-ads__form-field--textarea'
+                                                                        className='edit-ad-form__field edit-ad-form__field--textarea'
                                                                         initial_character_count={contact_info.length}
                                                                         required
                                                                         has_character_counter
@@ -418,7 +415,7 @@ const EditAdForm = () => {
                                                                 hint={localize(
                                                                     'This information will be visible to everyone.'
                                                                 )}
-                                                                className='p2p-my-ads__form-field p2p-my-ads__form-field--textarea'
+                                                                className='edit-ad-form__field edit-ad-form__field--textarea'
                                                                 initial_character_count={
                                                                     description ? description.length : 0
                                                                 }
@@ -427,7 +424,7 @@ const EditAdForm = () => {
                                                             />
                                                         )}
                                                     </Field>
-                                                    <div className='p2p-my-ads__form-payment-methods--text'>
+                                                    <div className='edit-ad-form__payment-methods--text'>
                                                         <Text color='prominent'>
                                                             <Localize i18n_default_text='Payment methods' />
                                                         </Text>
@@ -447,9 +444,9 @@ const EditAdForm = () => {
                                                         touched={setIsPaymentMethodTouched}
                                                     />
                                                 </div>
-                                                <div className='p2p-my-ads__form-container p2p-my-ads__form-footer'>
+                                                <div className='edit-ad-form__container edit-ad-form__footer'>
                                                     <Button
-                                                        className='p2p-my-ads__form-button'
+                                                        className='edit-ad-form__button'
                                                         secondary
                                                         large
                                                         onClick={() => handleEditAdFormCancel(dirty)}
@@ -458,7 +455,7 @@ const EditAdForm = () => {
                                                         <Localize i18n_default_text='Cancel' />
                                                     </Button>
                                                     <Button
-                                                        className='p2p-my-ads__form-button'
+                                                        className='edit-ad-form__button'
                                                         has_effect
                                                         primary
                                                         large
@@ -484,7 +481,7 @@ const EditAdForm = () => {
                 </React.Fragment>
             )}
             <Modal
-                className='p2p-my-ads__modal-error'
+                className='edit-ad-form__modal'
                 is_open={my_ads_store.is_edit_ad_error_modal_visible}
                 small
                 has_close_icon={false}
diff --git a/packages/p2p/src/pages/my-ads/edit-ad-form.scss b/packages/p2p/src/pages/my-ads/edit-ad-form.scss
new file mode 100644
index 000000000000..2b4655c88ded
--- /dev/null
+++ b/packages/p2p/src/pages/my-ads/edit-ad-form.scss
@@ -0,0 +1,239 @@
+.edit-ad-form {
+    @include mobile {
+        .dc-input__footer {
+            justify-content: space-between;
+            width: 86vw;
+        }
+
+        .dc-input__hint--relative {
+            margin-left: unset;
+        }
+    }
+
+    .dc-input__wrapper {
+        max-width: 67.2rem; // TODO: Kill these fixed widths.
+        margin-top: 2.1rem;
+
+        @include mobile {
+            max-width: 90vw;
+
+            .edit-ad-form__field {
+                margin-bottom: 0;
+            }
+        }
+    }
+
+    &__label {
+        &--focused {
+            color: var(--text-prominent);
+            background-color: var(--general-main-1);
+        }
+    }
+
+    &__payment-methods {
+        &--empty {
+            max-width: 67.2rem;
+            padding: 1.2rem 0;
+        }
+
+        &--text {
+            display: flex;
+            flex-direction: column;
+            margin-top: 3.2rem;
+            padding-bottom: 1rem;
+        }
+    }
+
+    &__radio-group {
+        display: flex;
+        margin-top: unset;
+        padding-bottom: 1.2rem;
+
+        .dc-radio-group__circle {
+            border: 2px solid var(--border-hover);
+
+            &--selected {
+                border: 4px solid var(--brand-red-coral);
+            }
+        }
+
+        @include mobile {
+            padding: 0.5rem 0;
+        }
+    }
+
+    &__scrollbar {
+        height: calc(100% - 2.4rem - 9.2rem);
+        position: absolute;
+        width: calc(100% - 4.8rem);
+
+        .dc-input {
+            max-width: 67.2rem;
+        }
+
+        &-container {
+            @include mobile {
+                width: 90vw;
+                margin: 0 1.6rem;
+
+                .dc-input {
+                    &__wrapper {
+                        margin-top: 2.1rem;
+                    }
+                    &__hint {
+                        margin-top: 0;
+                    }
+                }
+            }
+        }
+
+        @include mobile {
+            height: fit-content;
+            position: unset;
+            width: 100%;
+        }
+    }
+
+    &__container {
+        display: flex;
+        height: 8rem;
+        justify-content: space-between;
+        width: 67.2rem;
+
+        .dc-input {
+            margin-bottom: 2.1rem;
+            margin-top: 2.1rem;
+
+            &__container {
+                padding: 0 1rem;
+            }
+            &--hint {
+                margin-bottom: 0;
+            }
+            &__wrapper {
+                margin-top: 0;
+            }
+        }
+
+        @include mobile {
+            flex-direction: column;
+            height: unset;
+            width: unset;
+
+            .dc-input {
+                &__wrapper {
+                    margin-bottom: 5rem;
+                }
+            }
+        }
+    }
+
+    &__field {
+        height: 4rem;
+        margin-bottom: 0;
+        margin-left: 0;
+        width: 32.4rem;
+
+        @include mobile {
+            width: inherit;
+        }
+
+        &--contact-details {
+            margin-bottom: 5.9rem;
+
+            @include mobile {
+                margin-bottom: 3.7rem;
+            }
+        }
+        &--single {
+            width: 18.9rem;
+        }
+        &--textarea {
+            height: 9.6rem;
+            margin-bottom: 0;
+            width: 67.2rem;
+
+            @include mobile {
+                height: 9.8rem;
+                width: 90vw;
+            }
+
+            .dc-input {
+                &__hint {
+                    top: 9.7rem;
+                }
+
+                &___counter {
+                    top: 9.7rem;
+                    right: 0rem;
+
+                    @include mobile {
+                        display: flex;
+                        right: 0;
+                    }
+                }
+
+                &__textarea {
+                    padding-top: 1rem;
+                    padding-left: 0;
+                }
+
+                &__container {
+                    height: 9.6rem;
+                }
+            }
+        }
+    }
+
+    &__button {
+        margin-left: 0.8rem;
+    }
+
+    &__footer {
+        align-items: center;
+        background-color: var(--general-main-1);
+        display: flex;
+        justify-content: flex-end;
+
+        @include mobile {
+            border-top: 2px solid var(--general-section-1);
+            flex-direction: row;
+            padding: 1.6rem;
+            width: 100vw;
+        }
+    }
+
+    &__offer-amt {
+        &__sell-ad {
+            margin-top: 0 !important;
+        }
+
+        .dc-input__label {
+            color: var(--text-general);
+            -webkit-text-fill-color: var(--text-general);
+        }
+
+        .dc-input__field:disabled {
+            color: var(--text-less-prominent);
+            -webkit-text-fill-color: var(--text-less-prominent);
+        }
+    }
+
+    &__modal {
+        &--form {
+            height: fit-content !important;
+        }
+        .dc-modal-header__title--edit-ad-form__modal {
+            padding: 2.4rem 2.4rem 0 !important;
+        }
+        .dc-modal__container_edit-ad-form__modal {
+            .dc-modal-footer {
+                padding-top: 0 !important;
+            }
+
+            .dc-modal-header {
+                padding-bottom: 1rem;
+            }
+        }
+    }
+}
diff --git a/packages/p2p/src/components/my-ads/edit-ad-summary.jsx b/packages/p2p/src/pages/my-ads/edit-ad-summary.jsx
similarity index 62%
rename from packages/p2p/src/components/my-ads/edit-ad-summary.jsx
rename to packages/p2p/src/pages/my-ads/edit-ad-summary.jsx
index 849b7f1e6ebe..60b55006232a 100644
--- a/packages/p2p/src/components/my-ads/edit-ad-summary.jsx
+++ b/packages/p2p/src/pages/my-ads/edit-ad-summary.jsx
@@ -9,6 +9,7 @@ import { Localize } from 'Components/i18next';
 import { ad_type } from 'Constants/floating-rate';
 import { useStores } from 'Stores';
 import { removeTrailingZeros, roundOffDecimal, percentOf } from 'Utils/format-value';
+import './edit-ad-summary.scss';
 
 const EditAdSummary = ({ offer_amount, price_rate, type }) => {
     const {
@@ -41,8 +42,8 @@ const EditAdSummary = ({ offer_amount, price_rate, type }) => {
 
     if (offer_amount) {
         const components = [
-            <Text key={0} weight='bold' size='xs' color='status-info-blue' />,
-            <Text key={1} weight='normal' size='xs' color='status-info-blue' />,
+            <Text key={0} className='edit-ad-summary' weight='bold' size='xs' color='status-info-blue' />,
+            <Text key={1} className='edit-ad-summary' size='xs' color='status-info-blue' />,
         ];
         const values = { target_amount: display_offer_amount, target_currency: currency };
 
@@ -57,46 +58,58 @@ const EditAdSummary = ({ offer_amount, price_rate, type }) => {
 
             if (type === buy_sell.BUY) {
                 return (
-                    <Localize
-                        i18n_default_text="You're editing an ad to buy <0>{{ target_amount }} {{ target_currency }}</0> for <0>{{ local_amount }} {{ local_currency }}</0> <1>({{ price_rate }} {{local_currency}}/{{ target_currency }})</1>"
-                        components={components}
-                        values={values}
-                    />
+                    <Text key={0} className='edit-ad-summary' size='xs' color='less-prominent'>
+                        <Localize
+                            i18n_default_text="You're editing an ad to buy <0>{{ target_amount }} {{ target_currency }}</0> for <0>{{ local_amount }} {{ local_currency }}</0> <1>({{ price_rate }} {{local_currency}}/{{ target_currency }})</1>"
+                            components={components}
+                            values={values}
+                        />
+                    </Text>
                 );
             }
 
             return (
-                <Localize
-                    i18n_default_text="You're editing an ad to sell <0>{{ target_amount }} {{ target_currency }}</0> for <0>{{ local_amount }} {{ local_currency }}</0> <1>({{ price_rate }} {{local_currency}}/{{ target_currency }})</1>"
-                    components={components}
-                    values={values}
-                />
+                <Text key={0} className='edit-ad-summary' size='xs' color='less-prominent'>
+                    <Localize
+                        i18n_default_text="You're editing an ad to sell <0>{{ target_amount }} {{ target_currency }}</0> for <0>{{ local_amount }} {{ local_currency }}</0> <1>({{ price_rate }} {{local_currency}}/{{ target_currency }})</1>"
+                        components={components}
+                        values={values}
+                    />
+                </Text>
             );
         }
 
         if (type === buy_sell.BUY) {
             return (
-                <Localize
-                    i18n_default_text="You're editing an ad to buy <0>{{ target_amount }} {{ target_currency }}</0>..."
-                    components={components}
-                    values={values}
-                />
+                <Text key={0} className='edit-ad-summary' size='xs' color='less-prominent'>
+                    <Localize
+                        i18n_default_text="You're editing an ad to buy <0>{{ target_amount }} {{ target_currency }}</0>..."
+                        components={components}
+                        values={values}
+                    />
+                </Text>
             );
         }
 
         return (
-            <Localize
-                i18n_default_text="You're editing an ad to sell <0>{{ target_amount }} {{ target_currency }}</0>..."
-                components={components}
-                values={values}
-            />
+            <Text key={0} className='edit-ad-summary' size='xs' color='less-prominent'>
+                <Localize
+                    i18n_default_text="You're editing an ad to sell <0>{{ target_amount }} {{ target_currency }}</0>..."
+                    components={components}
+                    values={values}
+                />
+            </Text>
         );
     }
 
     return type === buy_sell.BUY ? (
-        <Localize i18n_default_text="You're editing an ad to buy..." />
+        <Text key={0} className='edit-ad-summary' size='xs' color='less-prominent'>
+            <Localize i18n_default_text="You're editing an ad to buy..." />
+        </Text>
     ) : (
-        <Localize i18n_default_text="You're editing an ad to sell..." />
+        <Text key={0} className='edit-ad-summary' size='xs' color='less-prominent'>
+            <Localize i18n_default_text="You're editing an ad to sell..." />
+        </Text>
     );
 };
 
diff --git a/packages/p2p/src/pages/my-ads/edit-ad-summary.scss b/packages/p2p/src/pages/my-ads/edit-ad-summary.scss
new file mode 100644
index 000000000000..a74bff485a17
--- /dev/null
+++ b/packages/p2p/src/pages/my-ads/edit-ad-summary.scss
@@ -0,0 +1,7 @@
+.edit-ad-summary {
+    margin-bottom: 0.6rem;
+
+    @include mobile {
+        margin: 0.6rem 0;
+    }
+}
diff --git a/packages/p2p/src/components/my-ads/edit-ad.jsx b/packages/p2p/src/pages/my-ads/edit-ad.jsx
similarity index 100%
rename from packages/p2p/src/components/my-ads/edit-ad.jsx
rename to packages/p2p/src/pages/my-ads/edit-ad.jsx
diff --git a/packages/p2p/src/components/my-ads/filter-payment-methods/filter-payment-method-results/filter-payment-methods-results.jsx b/packages/p2p/src/pages/my-ads/filter-payment-methods/filter-payment-method-results/filter-payment-methods-results.jsx
similarity index 100%
rename from packages/p2p/src/components/my-ads/filter-payment-methods/filter-payment-method-results/filter-payment-methods-results.jsx
rename to packages/p2p/src/pages/my-ads/filter-payment-methods/filter-payment-method-results/filter-payment-methods-results.jsx
diff --git a/packages/p2p/src/components/my-ads/filter-payment-methods/filter-payment-method-results/filter-payment-methods-results.scss b/packages/p2p/src/pages/my-ads/filter-payment-methods/filter-payment-method-results/filter-payment-methods-results.scss
similarity index 100%
rename from packages/p2p/src/components/my-ads/filter-payment-methods/filter-payment-method-results/filter-payment-methods-results.scss
rename to packages/p2p/src/pages/my-ads/filter-payment-methods/filter-payment-method-results/filter-payment-methods-results.scss
diff --git a/packages/p2p/src/components/my-ads/filter-payment-methods/filter-payment-method-results/index.js b/packages/p2p/src/pages/my-ads/filter-payment-methods/filter-payment-method-results/index.js
similarity index 100%
rename from packages/p2p/src/components/my-ads/filter-payment-methods/filter-payment-method-results/index.js
rename to packages/p2p/src/pages/my-ads/filter-payment-methods/filter-payment-method-results/index.js
diff --git a/packages/p2p/src/components/my-ads/filter-payment-methods/filter-payment-methods.jsx b/packages/p2p/src/pages/my-ads/filter-payment-methods/filter-payment-methods.jsx
similarity index 100%
rename from packages/p2p/src/components/my-ads/filter-payment-methods/filter-payment-methods.jsx
rename to packages/p2p/src/pages/my-ads/filter-payment-methods/filter-payment-methods.jsx
diff --git a/packages/p2p/src/components/my-ads/filter-payment-methods/filter-payment-methods.scss b/packages/p2p/src/pages/my-ads/filter-payment-methods/filter-payment-methods.scss
similarity index 100%
rename from packages/p2p/src/components/my-ads/filter-payment-methods/filter-payment-methods.scss
rename to packages/p2p/src/pages/my-ads/filter-payment-methods/filter-payment-methods.scss
diff --git a/packages/p2p/src/components/my-ads/filter-payment-methods/index.js b/packages/p2p/src/pages/my-ads/filter-payment-methods/index.js
similarity index 100%
rename from packages/p2p/src/components/my-ads/filter-payment-methods/index.js
rename to packages/p2p/src/pages/my-ads/filter-payment-methods/index.js
diff --git a/packages/p2p/src/components/my-ads/index.js b/packages/p2p/src/pages/my-ads/index.js
similarity index 100%
rename from packages/p2p/src/components/my-ads/index.js
rename to packages/p2p/src/pages/my-ads/index.js
diff --git a/packages/p2p/src/components/my-ads/my-ads-row-renderer.jsx b/packages/p2p/src/pages/my-ads/my-ads-row-renderer.jsx
similarity index 78%
rename from packages/p2p/src/components/my-ads/my-ads-row-renderer.jsx
rename to packages/p2p/src/pages/my-ads/my-ads-row-renderer.jsx
index 2c1f54eaf343..d20908dcc850 100644
--- a/packages/p2p/src/components/my-ads/my-ads-row-renderer.jsx
+++ b/packages/p2p/src/pages/my-ads/my-ads-row-renderer.jsx
@@ -8,7 +8,7 @@ import { observer } from 'mobx-react-lite';
 import { Localize, localize } from 'Components/i18next';
 import { buy_sell } from 'Constants/buy-sell';
 import { ad_type } from 'Constants/floating-rate';
-import AdStatus from 'Components/my-ads/ad-status.jsx';
+import AdStatus from 'Pages/my-ads/ad-status.jsx';
 import { useStores } from 'Stores';
 import { generateEffectiveRate } from 'Utils/format-value';
 import AdType from './ad-type.jsx';
@@ -95,15 +95,15 @@ const MyAdsRowRenderer = observer(({ row: advert }) => {
                 is_left_swipe
                 right_hidden_component={
                     <React.Fragment>
-                        <div className='p2p-my-ads__table-popovers__edit' onClick={handleOnEdit}>
+                        <div className='my-ads-table__popovers-edit' onClick={handleOnEdit}>
                             <Icon custom_color='var(--general-main-1)' icon='IcEdit' />
                         </div>
                         <div
                             onClick={onClickActivateDeactivate}
                             className={classNames(
-                                `p2p-my-ads__table-popovers__${is_advert_active ? 'activate' : 'deactivate'}`,
+                                `my-ads-table__popovers--${is_advert_active ? 'activate' : 'deactivate'}`,
                                 {
-                                    'p2p-my-ads__table-popovers--disable':
+                                    'my-ads-table__popovers--disable':
                                         general_store.is_barred || is_activate_ad_disabled,
                                 }
                             )}
@@ -114,7 +114,7 @@ const MyAdsRowRenderer = observer(({ row: advert }) => {
                             />
                         </div>
 
-                        <div className='p2p-my-ads__table-popovers__delete'>
+                        <div className='my-ads-table__popovers-delete'>
                             <Icon icon='IcDelete' custom_color='var(--general-main-1)' onClick={onClickDelete} />
                         </div>
                     </React.Fragment>
@@ -122,19 +122,19 @@ const MyAdsRowRenderer = observer(({ row: advert }) => {
                 right_hidden_component_width='18rem'
                 visible_component={
                     <Table.Row
-                        className={classNames('p2p-my-ads__table-row', {
-                            'p2p-my-ads__table-row-disabled': !is_advert_active,
+                        className={classNames('my-ads-table__row', {
+                            'my-ads-table__row-disabled': !is_advert_active,
                         })}
                     >
-                        <Text color='less-prominent' line_height='m' size='xxs'>
+                        <Text color='less-prominent' size='xxs'>
                             <Localize i18n_default_text='Ad ID {{advert_id}} ' values={{ advert_id: id }} />
                         </Text>
-                        <div className='p2p-my-ads__table-row__type-and-status'>
-                            <Text color={ad_pause_color} line_height='m' size='s' weight='bold'>
+                        <div className='my-ads-table__row__type-and-status'>
+                            <Text color={ad_pause_color} weight='bold'>
                                 {advert_type} {account_currency}
                             </Text>
                             {enable_action_point ? (
-                                <div className='p2p-my-ads__table-status-warning'>
+                                <div className='my-ads-table__status-warning'>
                                     <div style={{ marginRight: '0.8rem' }}>
                                         <AdStatus is_active={!!is_advert_active && !general_store.is_barred} />
                                     </div>
@@ -145,45 +145,36 @@ const MyAdsRowRenderer = observer(({ row: advert }) => {
                                 <AdStatus is_active={!!is_advert_active && !general_store.is_barred} />
                             )}
                         </div>
-                        <div className='p2p-my-ads__table-row-details'>
-                            <Text
-                                color={is_advert_listed ? 'profit-success' : 'less-prominent'}
-                                line_height='m'
-                                size='xxs'
-                            >
+                        <div className='my-ads-table__row-details'>
+                            <Text color={is_advert_listed ? 'profit-success' : 'less-prominent'} size='xxs'>
                                 {`${formatMoney(account_currency, amount_dealt, true)}`} {account_currency}&nbsp;
                                 {is_buy_advert ? localize('Bought') : localize('Sold')}
                             </Text>
-                            <Text color='less-prominent' line_height='m' size='xxs'>
+                            <Text color='less-prominent' size='xxs'>
                                 {amount_display} {account_currency}
                             </Text>
                         </div>
                         <ProgressIndicator
-                            className={'p2p-my-ads__table-available-progress'}
+                            className={'my-ads-table__available-progress'}
                             value={amount_dealt}
                             total={amount}
                         />
-                        <div className='p2p-my-ads__table-row-details'>
-                            <Text color='less-prominent' line_height='m' size='xxs'>
+                        <div className='my-ads-table__row-details'>
+                            <Text color='less-prominent' size='xxs'>
                                 <Localize i18n_default_text='Limits' />
                             </Text>
-                            <Text color='less-prominent' line_height='m' size='xxs'>
+                            <Text color='less-prominent' size='xxs'>
                                 <Localize
                                     i18n_default_text='Rate (1 {{account_currency}})'
                                     values={{ account_currency }}
                                 />
                             </Text>
                         </div>
-                        <div className='p2p-my-ads__table-row-details'>
-                            <Text color={ad_pause_color} line_height='m' size='xxs'>
+                        <div className='my-ads-table__row-details'>
+                            <Text color={ad_pause_color} size='xxs'>
                                 {min_order_amount_display} - {max_order_amount_display} {account_currency}
                             </Text>
-                            <Text
-                                color={is_advert_listed ? 'profit-success' : 'disabled'}
-                                line_height='m'
-                                size='xs'
-                                weight='bold'
-                            >
+                            <Text color={is_advert_listed ? 'profit-success' : 'disabled'} size='xs' weight='bold'>
                                 <div className='display-layout'>
                                     {display_effective_rate} {local_currency}
                                     {rate_type === ad_type.FLOAT && (
@@ -192,12 +183,12 @@ const MyAdsRowRenderer = observer(({ row: advert }) => {
                                 </div>
                             </Text>
                         </div>
-                        <div className='p2p-my-ads__table-row-methods'>
+                        <div className='my-ads-table__row-methods'>
                             {payment_method_names ? (
                                 payment_method_names.map((payment_method, key) => {
                                     return (
-                                        <div className='p2p-my-ads__table__payment-method--label' key={key}>
-                                            <Text color={ad_pause_color} size='xxxs' line-height='l'>
+                                        <div className='my-ads-table__payment-method--label' key={key}>
+                                            <Text color={ad_pause_color} size='xxxs' line_height='l'>
                                                 {payment_method}
                                             </Text>
                                         </div>
@@ -205,8 +196,8 @@ const MyAdsRowRenderer = observer(({ row: advert }) => {
                                 })
                             ) : (
                                 <div
-                                    className={classNames('p2p-my-ads__table-add', {
-                                        'p2p-my-ads__table-add--disabled': !general_store.is_listed,
+                                    className={classNames('my-ads-table__add', {
+                                        'my-ads-table__add--disabled': !general_store.is_listed,
                                     })}
                                     onClick={() => onClickAdd()}
                                 >
@@ -226,8 +217,8 @@ const MyAdsRowRenderer = observer(({ row: advert }) => {
     return (
         <div onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
             <Table.Row
-                className={classNames('p2p-my-ads__table-row', {
-                    'p2p-my-ads__table-row-disabled': !is_advert_active,
+                className={classNames('my-ads-table__row', {
+                    'my-ads-table__row-disabled': !is_advert_active,
                 })}
             >
                 <Table.Cell>
@@ -236,7 +227,7 @@ const MyAdsRowRenderer = observer(({ row: advert }) => {
                 <Table.Cell>
                     {min_order_amount_display}-{max_order_amount_display} {account_currency}
                 </Table.Cell>
-                <Table.Cell className='p2p-my-ads__table-price'>
+                <Table.Cell className='my-ads-table__price'>
                     <div className='display-layout'>
                         {display_effective_rate} {local_currency}
                         {rate_type === ad_type.FLOAT && (
@@ -244,23 +235,23 @@ const MyAdsRowRenderer = observer(({ row: advert }) => {
                         )}
                     </div>
                 </Table.Cell>
-                <Table.Cell className='p2p-my-ads__table-available'>
+                <Table.Cell className='my-ads-table__available'>
                     <ProgressIndicator
-                        className={'p2p-my-ads__table-available-progress'}
+                        className={'my-ads-table__available-progress'}
                         value={remaining_amount}
                         total={amount}
                     />
-                    <div className='p2p-my-ads__table-available-value'>
+                    <div className='my-ads-table__available-value'>
                         {remaining_amount_display}/{amount_display} {account_currency}
                     </div>
                 </Table.Cell>
                 <Table.Cell>
-                    <div className='p2p-my-ads__table__payment-method'>
+                    <div className='my-ads-table__payment-method'>
                         {payment_method_names ? (
                             payment_method_names.map((payment_method, key) => {
                                 return (
-                                    <div className='p2p-my-ads__table__payment-method--label' key={key}>
-                                        <Text color={ad_pause_color} size='xs' line-height='l'>
+                                    <div className='my-ads-table__payment-method--label' key={key}>
+                                        <Text color={ad_pause_color} size='xs' line_height='l'>
                                             {payment_method}
                                         </Text>
                                     </div>
@@ -268,8 +259,8 @@ const MyAdsRowRenderer = observer(({ row: advert }) => {
                             })
                         ) : (
                             <div
-                                className={classNames('p2p-my-ads__table-add', {
-                                    'p2p-my-ads__table-add--disabled': !general_store.is_listed,
+                                className={classNames('my-ads-table__add', {
+                                    'my-ads-table__add--disabled': !general_store.is_listed,
                                 })}
                                 onClick={() => onClickAdd()}
                             >
@@ -283,25 +274,25 @@ const MyAdsRowRenderer = observer(({ row: advert }) => {
                 </Table.Cell>
                 <Table.Cell>
                     {enable_action_point ? (
-                        <div className='p2p-my-ads__table-status-warning'>
+                        <div className='my-ads-table__status-warning'>
                             <AdStatus is_active={!!is_advert_active && !general_store.is_barred} />
                             <Icon icon='IcAlertWarning' size={isMobile() ? 28 : 16} />
                         </div>
                     ) : (
-                        <div className='p2p-my-ads__table-status'>
+                        <div className='my-ads-table__status'>
                             <AdStatus is_active={!!is_advert_active && !general_store.is_barred} />
                         </div>
                     )}
                 </Table.Cell>
                 {is_popover_actions_visible && (
-                    <div className='p2p-my-ads__table-popovers'>
+                    <div className='my-ads-table__popovers'>
                         <div onClick={onClickActivateDeactivate}>
                             <Popover
                                 alignment='bottom'
                                 className={classNames(
-                                    `p2p-my-ads__table-popovers__${is_advert_active ? 'activate' : 'deactivate'}`,
+                                    `my-ads-table__popovers--${is_advert_active ? 'activate' : 'deactivate'}`,
                                     {
-                                        'p2p-my-ads__table-popovers--disable':
+                                        'my-ads-table__popovers--disable':
                                             general_store.is_barred || is_activate_ad_disabled,
                                     }
                                 )}
@@ -318,8 +309,8 @@ const MyAdsRowRenderer = observer(({ row: advert }) => {
                         <div onClick={handleOnEdit}>
                             <Popover
                                 alignment='bottom'
-                                className={classNames('p2p-my-ads__table-popovers__deactivate', {
-                                    'p2p-my-ads__table-popovers--disable':
+                                className={classNames('my-ads-table__popovers--deactivate', {
+                                    'my-ads-table__popovers--disable':
                                         general_store.is_barred || is_activate_ad_disabled,
                                 })}
                                 message={localize('Edit')}
@@ -330,8 +321,8 @@ const MyAdsRowRenderer = observer(({ row: advert }) => {
                         <div onClick={onClickDelete}>
                             <Popover
                                 alignment='bottom'
-                                className={classNames('p2p-my-ads__table-popovers__delete', {
-                                    'p2p-my-ads__table-popovers--disable':
+                                className={classNames('my-ads-table__popovers-delete', {
+                                    'my-ads-table__popovers--disable':
                                         general_store.is_barred || is_activate_ad_disabled,
                                 })}
                                 message={localize('Delete')}
diff --git a/packages/p2p/src/components/my-ads/my-ads-table.jsx b/packages/p2p/src/pages/my-ads/my-ads-table.jsx
similarity index 86%
rename from packages/p2p/src/components/my-ads/my-ads-table.jsx
rename to packages/p2p/src/pages/my-ads/my-ads-table.jsx
index ad1aa456b3f2..1857684feac8 100644
--- a/packages/p2p/src/components/my-ads/my-ads-table.jsx
+++ b/packages/p2p/src/pages/my-ads/my-ads-table.jsx
@@ -4,12 +4,13 @@ import { Button, HintBox, InfiniteDataList, Loading, Table, Text } from '@deriv/
 import { isDesktop, isMobile } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
 import { localize, Localize } from 'Components/i18next';
-import ToggleAds from 'Components/my-ads/toggle-ads.jsx';
-import { TableError } from 'Components/table/table-error.jsx';
+import ToggleAds from 'Pages/my-ads/toggle-ads.jsx';
+import TableError from 'Components/section-error';
 import { ad_type } from 'Constants/floating-rate';
 import { useStores } from 'Stores';
 import MyAdsRowRenderer from './my-ads-row-renderer.jsx';
-import NoAds from '../buy-sell/no-ads';
+import NoAds from 'Pages/buy-sell/no-ads';
+import './my-ads-table.scss';
 
 const getHeaders = offered_currency => [
     { text: localize('Ad ID') },
@@ -71,14 +72,14 @@ const MyAdsTable = () => {
     }
 
     if (my_ads_store.api_error_message) {
-        return <TableError message={my_ads_store.api_error_message} />;
+        return <TableError message={my_ads_store.api_error_message} className='section-error__table' size='xs' />;
     }
 
     if (my_ads_store.adverts.length) {
         return (
             <React.Fragment>
                 {floating_rate_store.change_ad_alert && (
-                    <div className='p2p-my-ads__warning'>
+                    <div className='my-ads__warning'>
                         <HintBox
                             icon='IcAlertWarning'
                             message={
@@ -90,7 +91,7 @@ const MyAdsTable = () => {
                         />
                     </div>
                 )}
-                <div className='p2p-my-ads__header'>
+                <div className='my-ads__header'>
                     {isDesktop() && (
                         <Button
                             is_disabled={general_store.is_barred}
@@ -104,22 +105,22 @@ const MyAdsTable = () => {
                     <ToggleAds />
                 </div>
                 <Table
-                    className={classNames('p2p-my-ads__table', {
-                        'p2p-my-ads__table--disabled': !general_store.is_listed || general_store.is_barred,
+                    className={classNames('my-ads-table', {
+                        'my-ads-table--disabled': !general_store.is_listed || general_store.is_barred,
                     })}
                 >
                     {isDesktop() && (
                         <Table.Header>
-                            <Table.Row className='p2p-my-ads__table-row'>
+                            <Table.Row className='my-ads-table__row'>
                                 {getHeaders(currency).map(header => (
                                     <Table.Head key={header.text}>{header.text}</Table.Head>
                                 ))}
                             </Table.Row>
                         </Table.Header>
                     )}
-                    <Table.Body className='p2p-my-ads__table-body'>
+                    <Table.Body className='my-ads-table__body'>
                         <InfiniteDataList
-                            data_list_className='p2p-my-ads__data-list'
+                            data_list_className='my-ads__data-list'
                             has_more_items_to_load={my_ads_store.has_more_items_to_load}
                             items={my_ads_store.adverts}
                             keyMapperFn={item => item.id}
@@ -129,9 +130,9 @@ const MyAdsTable = () => {
                     </Table.Body>
                 </Table>
                 {isMobile() && (
-                    <div className='p2p-my-ads__create-container'>
+                    <div className='my-ads__create-container'>
                         <Button
-                            className='p2p-my-ads__create'
+                            className='my-ads__create'
                             is_disabled={general_store.is_barred}
                             large
                             onClick={my_ads_store.onClickCreate}
diff --git a/packages/p2p/src/pages/my-ads/my-ads-table.scss b/packages/p2p/src/pages/my-ads/my-ads-table.scss
new file mode 100644
index 000000000000..8ae1e0c4acf5
--- /dev/null
+++ b/packages/p2p/src/pages/my-ads/my-ads-table.scss
@@ -0,0 +1,262 @@
+@mixin popoverIcons($background-color, $height, $width) {
+    align-items: center;
+    background-color: $background-color;
+    cursor: pointer;
+    display: flex;
+    height: $height;
+    justify-content: center;
+    width: $width;
+}
+
+.my-ads-table {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+
+    &__add {
+        align-items: center;
+        border: 1px solid var(--border-normal);
+        border-radius: 4px;
+        cursor: pointer;
+        display: flex;
+        justify-content: space-between;
+        padding: 0.3rem 0.5rem;
+
+        &--disabled {
+            cursor: not-allowed;
+        }
+    }
+
+    &__body {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+    }
+
+    &__create {
+        margin: 1.6rem;
+        width: 90vw;
+
+        &-container {
+            border-top: 2px solid var(--general-section-1);
+        }
+    }
+
+    &__payment-method {
+        display: flex;
+        flex-wrap: wrap;
+
+        &--label {
+            align-items: center;
+            border-radius: 0.4rem;
+            border: 1px solid var(--border-normal);
+            display: flex;
+            flex-direction: row;
+            margin: 0.25rem;
+            padding: 0 0.8rem;
+            width: fit-content;
+
+            @include mobile {
+                height: 2.4rem;
+                margin: 0.25rem 0.5rem 0.25rem 0;
+            }
+        }
+    }
+
+    &__price {
+        color: var(--text-profit-success);
+        font-weight: bold;
+
+        .display-layout {
+            display: flex;
+            flex-direction: column;
+        }
+    }
+
+    &__popovers {
+        background-color: var(--general-main-1);
+        display: flex;
+        height: 99%;
+        justify-content: center;
+        min-width: 14rem;
+        padding: 1.6rem;
+        position: absolute;
+        right: 0;
+        top: 0;
+
+        &--disable {
+            cursor: not-allowed !important;
+
+            @include mobile {
+                background-color: var(--checkbox-disabled-grey) !important;
+            }
+        }
+
+        @include mobile {
+            display: flex;
+            justify-content: unset;
+        }
+
+        div {
+            margin: auto;
+        }
+
+        &--activate {
+            @include popoverIcons(none, 3.2rem, 3.2rem);
+
+            @include desktop {
+                &:hover {
+                    background-color: var(--general-hover);
+                }
+            }
+
+            @include mobile {
+                @include popoverIcons(var(--status-warning), 100%, 6rem);
+            }
+        }
+
+        &--deactivate {
+            @include popoverIcons(none, 3.2rem, 3.2rem);
+
+            @include desktop {
+                &:hover {
+                    background-color: var(--general-hover);
+                }
+            }
+
+            @include mobile {
+                @include popoverIcons(#85acb0, 100%, 6rem);
+            }
+        }
+
+        &-delete {
+            @include popoverIcons(none, 3.2rem, 3.2rem);
+
+            @include desktop {
+                &:hover {
+                    background-color: var(--general-hover);
+                }
+            }
+
+            @include mobile {
+                @include popoverIcons(var(--brand-red-coral), 100%, 6rem);
+            }
+        }
+
+        &-edit {
+            @include popoverIcons(none, 3.2rem, 3.2rem);
+
+            @include desktop {
+                &:hover {
+                    background-color: var(--general-hover);
+                }
+            }
+
+            @include mobile {
+                @include popoverIcons(var(--status-info), 100%, 6rem);
+            }
+        }
+    }
+
+    &__available {
+        align-items: flex-start;
+        flex-flow: column;
+        justify-content: center;
+        width: 85%;
+
+        &-progress {
+            margin-bottom: 0.4rem;
+
+            @include mobile {
+                margin: 0.4rem 0;
+            }
+        }
+    }
+
+    &__row {
+        padding: 1.6rem;
+        grid-template-columns: 1.7fr repeat(2, 2fr) repeat(2, 2.3fr) 1.5fr;
+
+        .dc-table__cell:last-child {
+            word-break: unset;
+        }
+
+        @include mobile {
+            grid-template-columns: unset;
+            padding: 1.6rem;
+            width: 100%;
+        }
+
+        &__type-and-status {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 0.8rem;
+        }
+
+        &-details {
+            display: flex;
+            justify-content: space-between;
+        }
+
+        &-disabled {
+            .dc-table__cell {
+                color: var(--text-disabled);
+            }
+
+            .dc-progress-indicator {
+                &__container {
+                    background-color: var(--general-section-1);
+                }
+                &__bar {
+                    background-color: var(--general-disabled);
+                }
+            }
+
+            .dc-text {
+                &:not(.ad-status--inactive) {
+                    color: var(--text-disabled);
+                }
+            }
+        }
+
+        &-methods {
+            display: flex;
+            flex-wrap: wrap;
+        }
+    }
+
+    &__status {
+        width: 100%;
+
+        &-warning {
+            align-items: center;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            width: 100%;
+
+            @include mobile {
+                align-items: center;
+                display: flex;
+                justify-content: unset;
+                width: unset;
+                gap: 1rem;
+            }
+        }
+    }
+
+    &--disabled {
+        .dc-table__cell {
+            color: var(--text-disabled);
+        }
+
+        .dc-progress-indicator {
+            &__container {
+                background-color: var(--general-section-1);
+            }
+            &__bar {
+                background-color: var(--general-disabled);
+            }
+        }
+    }
+}
diff --git a/packages/p2p/src/components/my-ads/my-ads.jsx b/packages/p2p/src/pages/my-ads/my-ads.jsx
similarity index 83%
rename from packages/p2p/src/components/my-ads/my-ads.jsx
rename to packages/p2p/src/pages/my-ads/my-ads.jsx
index bf0e43ccc07c..b8189f1103bf 100644
--- a/packages/p2p/src/components/my-ads/my-ads.jsx
+++ b/packages/p2p/src/pages/my-ads/my-ads.jsx
@@ -4,16 +4,15 @@ import { Loading } from '@deriv/components';
 import { observer } from 'mobx-react-lite';
 import { localize } from 'Components/i18next';
 import { useStores } from 'Stores';
-import { TableError } from 'Components/table/table-error.jsx';
+import TableError from 'Components/section-error';
 import CreateAd from './create-ad.jsx';
 import EditAd from './edit-ad.jsx';
 import MyAdsTable from './my-ads-table.jsx';
-import Verification from '../verification/verification.jsx';
-import './my-ads.scss';
+import Verification from 'Components/verification';
 
 const MyAdsState = ({ message }) => (
-    <div className='p2p-my-ads__state'>
-        <TableError message={message} />
+    <div className='my-ads__state'>
+        <TableError message={message} className='section-error__table' size='xs' />
     </div>
 );
 
@@ -28,6 +27,7 @@ const MyAds = () => {
 
         return () => {
             my_ads_store.setShowAdForm(false);
+            general_store.setShouldShowPopup(false);
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
@@ -47,20 +47,20 @@ const MyAds = () => {
     if (general_store.is_advertiser) {
         if (my_ads_store.show_ad_form) {
             return (
-                <div className='p2p-my-ads'>
+                <div className='my-ads'>
                     <CreateAd />
                 </div>
             );
         } else if (my_ads_store.show_edit_ad_form) {
             return (
-                <div className='p2p-my-ads'>
+                <div className='my-ads'>
                     <EditAd />
                 </div>
             );
         }
 
         return (
-            <div className='p2p-my-ads'>
+            <div className='my-ads'>
                 <MyAdsTable />
             </div>
         );
diff --git a/packages/p2p/src/pages/my-ads/my-ads.scss b/packages/p2p/src/pages/my-ads/my-ads.scss
new file mode 100644
index 000000000000..d81ec9218f2c
--- /dev/null
+++ b/packages/p2p/src/pages/my-ads/my-ads.scss
@@ -0,0 +1,122 @@
+@mixin popoverIcons($background-color, $height, $width) {
+    align-items: center;
+    background-color: $background-color;
+    cursor: pointer;
+    display: flex;
+    height: $height;
+    justify-content: center;
+    width: $width;
+}
+
+.my-ads {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+
+    @include mobile {
+        .page-return {
+            border-bottom: 2px solid var(--general-section-1);
+            margin: 0;
+            padding: 1.6rem;
+        }
+
+        .dc-list {
+            margin-left: 1vw;
+            width: 88vw;
+
+            &__item {
+                padding-top: 0.4rem;
+            }
+        }
+        .dc-mobile-full-page-modal {
+            opacity: 1 !important;
+        }
+    }
+
+    &__header {
+        display: flex;
+        align-items: center;
+        margin: 1.6rem 0;
+        justify-content: space-between;
+        min-height: 50px;
+
+        @include mobile {
+            border-bottom: 1px solid var(--general-section-1);
+            justify-content: flex-end;
+            margin: unset;
+        }
+    }
+
+    &--border {
+        .dc-input__container {
+            border: 1px dashed var(--border-normal);
+        }
+    }
+
+    &__state {
+        text-align: center;
+        margin: 0 auto;
+
+        &-button {
+            margin-top: 12px;
+        }
+    }
+
+    &__create {
+        margin: 1.6rem;
+        width: 90vw;
+
+        &-container {
+            border-top: 2px solid var(--general-section-1);
+        }
+    }
+
+    &__data-list {
+        flex: 1;
+
+        &__data-list-body {
+            flex: 1;
+        }
+
+        .data-list__body-wrapper {
+            flex: 1;
+        }
+    }
+
+    &__page-return {
+        border-bottom: 2px solid var(--general-section-1);
+        margin: unset;
+        padding: 0 2rem 1.6rem;
+    }
+
+    &__warning {
+        margin-top: 1.6rem;
+        width: fit-content;
+
+        @include mobile {
+            margin: 1rem 2rem;
+
+            .dc-hint-box {
+                align-items: normal;
+
+                &__icon {
+                    width: 3.5rem;
+                    align-items: flex-start;
+                }
+            }
+        }
+    }
+
+    &__expand-button {
+        vertical-align: unset;
+        border-radius: unset;
+        height: unset;
+    }
+}
+
+.dc-modal__container_switch-ads {
+    @include mobile {
+        min-width: 328px !important;
+    }
+}
diff --git a/packages/p2p/src/components/my-ads/sell-ad-payment-methods-list.jsx b/packages/p2p/src/pages/my-ads/sell-ad-payment-methods-list.jsx
similarity index 90%
rename from packages/p2p/src/components/my-ads/sell-ad-payment-methods-list.jsx
rename to packages/p2p/src/pages/my-ads/sell-ad-payment-methods-list.jsx
index 3dd84efb620c..b69a8ee3f019 100644
--- a/packages/p2p/src/components/my-ads/sell-ad-payment-methods-list.jsx
+++ b/packages/p2p/src/pages/my-ads/sell-ad-payment-methods-list.jsx
@@ -5,7 +5,7 @@ import { observer } from 'mobx-react-lite';
 import { localize } from 'Components/i18next';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import PaymentMethodCard from '../my-profile/payment-methods/payment-method-card';
+import PaymentMethodCard from 'Pages/my-profile/payment-methods/payment-method-card';
 import './sell-ad-payment-methods-list.scss';
 
 const SellAdPaymentMethodsList = ({
@@ -30,8 +30,8 @@ const SellAdPaymentMethodsList = ({
 
     return (
         <ThemedScrollbars
-            className={classNames('sell-ad-payment-methods__container', {
-                'sell-ad-payment-methods__container--horizontal': is_only_horizontal,
+            className={classNames('sell-ad-payment-methods-list__container', {
+                'sell-ad-payment-methods-list__container--horizontal': is_only_horizontal,
             })}
             is_scrollbar_hidden
             is_scrollable={is_scrollable}
diff --git a/packages/p2p/src/components/my-ads/sell-ad-payment-methods-list.scss b/packages/p2p/src/pages/my-ads/sell-ad-payment-methods-list.scss
similarity index 93%
rename from packages/p2p/src/components/my-ads/sell-ad-payment-methods-list.scss
rename to packages/p2p/src/pages/my-ads/sell-ad-payment-methods-list.scss
index ac28d6eb6e3a..ca853fa98b3a 100644
--- a/packages/p2p/src/components/my-ads/sell-ad-payment-methods-list.scss
+++ b/packages/p2p/src/pages/my-ads/sell-ad-payment-methods-list.scss
@@ -1,4 +1,4 @@
-.sell-ad-payment-methods {
+.sell-ad-payment-methods-list {
     &__container {
         display: grid;
         grid-template-columns: repeat(4, 0.19fr);
diff --git a/packages/p2p/src/components/my-ads/toggle-ads.jsx b/packages/p2p/src/pages/my-ads/toggle-ads.jsx
similarity index 98%
rename from packages/p2p/src/components/my-ads/toggle-ads.jsx
rename to packages/p2p/src/pages/my-ads/toggle-ads.jsx
index fbf8d6833695..4441aab92aeb 100644
--- a/packages/p2p/src/components/my-ads/toggle-ads.jsx
+++ b/packages/p2p/src/pages/my-ads/toggle-ads.jsx
@@ -6,7 +6,7 @@ import { observer } from '@deriv/stores';
 import { Localize } from 'Components/i18next';
 import { requestWS } from 'Utils/websocket';
 import { useStores } from 'Stores';
-import './my-ads.scss';
+import './toggle-ads.scss';
 
 const ToggleAds = observer(() => {
     const { general_store, my_ads_store } = useStores();
diff --git a/packages/p2p/src/pages/my-ads/toggle-ads.scss b/packages/p2p/src/pages/my-ads/toggle-ads.scss
new file mode 100644
index 000000000000..b796181cc446
--- /dev/null
+++ b/packages/p2p/src/pages/my-ads/toggle-ads.scss
@@ -0,0 +1,9 @@
+.toggle-ads {
+    display: flex;
+    align-items: center;
+    justify-items: flex-start;
+
+    &__message {
+        margin-right: 1.6rem;
+    }
+}
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-dropdown/block-user-dropdown.jsx b/packages/p2p/src/pages/my-profile/block-user/block-user-dropdown/block-user-dropdown.jsx
similarity index 100%
rename from packages/p2p/src/components/my-profile/block-user/block-user-dropdown/block-user-dropdown.jsx
rename to packages/p2p/src/pages/my-profile/block-user/block-user-dropdown/block-user-dropdown.jsx
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-dropdown/block-user-dropdown.scss b/packages/p2p/src/pages/my-profile/block-user/block-user-dropdown/block-user-dropdown.scss
similarity index 100%
rename from packages/p2p/src/components/my-profile/block-user/block-user-dropdown/block-user-dropdown.scss
rename to packages/p2p/src/pages/my-profile/block-user/block-user-dropdown/block-user-dropdown.scss
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-dropdown/index.js b/packages/p2p/src/pages/my-profile/block-user/block-user-dropdown/index.js
similarity index 100%
rename from packages/p2p/src/components/my-profile/block-user/block-user-dropdown/index.js
rename to packages/p2p/src/pages/my-profile/block-user/block-user-dropdown/index.js
diff --git a/packages/p2p/src/pages/my-profile/block-user/block-user-empty/__tests__/block-user-empty.spec.tsx b/packages/p2p/src/pages/my-profile/block-user/block-user-empty/__tests__/block-user-empty.spec.tsx
new file mode 100644
index 000000000000..ed74cdfcc212
--- /dev/null
+++ b/packages/p2p/src/pages/my-profile/block-user/block-user-empty/__tests__/block-user-empty.spec.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import { isDesktop, isMobile } from '@deriv/shared';
+import BlockUserEmpty from '..';
+
+jest.mock('@deriv/shared', () => ({
+    ...jest.requireActual('@deriv/shared'),
+    isDesktop: jest.fn(),
+    isMobile: jest.fn(),
+}));
+
+describe('<BlockUserEmpty />', () => {
+    it('should render <BlockUserEmpty/> component in desktop view', () => {
+        (isDesktop as jest.Mock).mockReturnValueOnce(true);
+        render(<BlockUserEmpty />);
+        expect(screen.getByTestId('dt_desktop_content')).toBeInTheDocument();
+        expect(screen.getByText('No one to show here')).toBeInTheDocument();
+    });
+    it('should render <BlockUserEmpty /> component in mobile view', () => {
+        (isMobile as jest.Mock).mockReturnValueOnce(true);
+        render(<BlockUserEmpty />);
+        expect(screen.queryByTestId('dt_desktop_content')).not.toBeInTheDocument();
+        expect(screen.getByText('No one to show here')).toBeInTheDocument();
+    });
+});
diff --git a/packages/p2p/src/components/block-user/block-user-empty/block-user-empty.scss b/packages/p2p/src/pages/my-profile/block-user/block-user-empty/block-user-empty.scss
similarity index 54%
rename from packages/p2p/src/components/block-user/block-user-empty/block-user-empty.scss
rename to packages/p2p/src/pages/my-profile/block-user/block-user-empty/block-user-empty.scss
index f9320b9ffbcd..9383b2f0b715 100644
--- a/packages/p2p/src/components/block-user/block-user-empty/block-user-empty.scss
+++ b/packages/p2p/src/pages/my-profile/block-user/block-user-empty/block-user-empty.scss
@@ -14,4 +14,14 @@
     &__text {
         margin: 3rem 0 0.8rem;
     }
+
+    &__mobile {
+        &-content {
+            width: 100vw;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            margin-top: 2.6rem;
+        }
+    }
 }
diff --git a/packages/p2p/src/components/block-user/block-user-empty/block-user-empty.jsx b/packages/p2p/src/pages/my-profile/block-user/block-user-empty/block-user-empty.tsx
similarity index 50%
rename from packages/p2p/src/components/block-user/block-user-empty/block-user-empty.jsx
rename to packages/p2p/src/pages/my-profile/block-user/block-user-empty/block-user-empty.tsx
index 223c2db9649c..83485ac9f881 100644
--- a/packages/p2p/src/components/block-user/block-user-empty/block-user-empty.jsx
+++ b/packages/p2p/src/pages/my-profile/block-user/block-user-empty/block-user-empty.tsx
@@ -1,46 +1,36 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
-import { DesktopWrapper, Icon, MobileFullPageModal, MobileWrapper, Text } from '@deriv/components';
-import { my_profile_tabs } from 'Constants/my-profile-tabs';
-import { Localize, localize } from 'Components/i18next';
-import { useStores } from 'Stores';
+import { DesktopWrapper, Icon, MobileWrapper, Text } from '@deriv/components';
+import { Localize } from 'Components/i18next';
 
 const BlockUserEmpty = () => {
-    const { my_profile_store } = useStores();
-
     return (
         <React.Fragment>
             <DesktopWrapper>
-                <div className='block-user-empty'>
+                <div className='block-user-empty' data-testid='dt_desktop_content'>
                     <Icon
                         className='block-user-empty__icon'
                         icon='IcEmptyBlockedAdvertisers'
                         height={128}
                         width={128}
                     />
-                    <Text className='block-user-empty__text' line_height='m' size='s' weight='bold'>
+                    <Text className='block-user-empty__text' weight='bold'>
                         <Localize i18n_default_text='No one to show here' />
                     </Text>
                 </div>
             </DesktopWrapper>
             <MobileWrapper>
-                <MobileFullPageModal
-                    body_className='block-user-empty'
-                    height_offset='80px'
-                    is_modal_open={my_profile_store.active_tab === my_profile_tabs.MY_COUNTERPARTIES}
-                    page_header_text={localize('My counterparties')}
-                    pageHeaderReturnFn={() => my_profile_store.setActiveTab(my_profile_tabs.MY_STATS)}
-                >
+                <div className='block-user-empty__mobile-content'>
                     <Icon
                         icon='IcEmptyBlockedAdvertisers'
                         className='block-user-empty__icon'
                         height={128}
                         width={128}
                     />
-                    <Text className='block-user-empty__text' line_height='m' size='s' weight='bold'>
+                    <Text className='block-user-empty__text' weight='bold'>
                         <Localize i18n_default_text='No one to show here' />
                     </Text>
-                </MobileFullPageModal>
+                </div>
             </MobileWrapper>
         </React.Fragment>
     );
diff --git a/packages/p2p/src/components/block-user/block-user-empty/index.js b/packages/p2p/src/pages/my-profile/block-user/block-user-empty/index.ts
similarity index 55%
rename from packages/p2p/src/components/block-user/block-user-empty/index.js
rename to packages/p2p/src/pages/my-profile/block-user/block-user-empty/index.ts
index 12ae08ba102a..604eb6a5f0c1 100644
--- a/packages/p2p/src/components/block-user/block-user-empty/index.js
+++ b/packages/p2p/src/pages/my-profile/block-user/block-user-empty/index.ts
@@ -1,4 +1,4 @@
-import BlockUserEmpty from './block-user-empty.jsx';
+import BlockUserEmpty from './block-user-empty';
 import './block-user-empty.scss';
 
 export default BlockUserEmpty;
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-filter-modal/block-user-filter-modal.jsx b/packages/p2p/src/pages/my-profile/block-user/block-user-filter-modal/block-user-filter-modal.jsx
similarity index 83%
rename from packages/p2p/src/components/my-profile/block-user/block-user-filter-modal/block-user-filter-modal.jsx
rename to packages/p2p/src/pages/my-profile/block-user/block-user-filter-modal/block-user-filter-modal.jsx
index a5b40d343031..747605d9fa35 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user-filter-modal/block-user-filter-modal.jsx
+++ b/packages/p2p/src/pages/my-profile/block-user/block-user-filter-modal/block-user-filter-modal.jsx
@@ -24,11 +24,7 @@ const BlockUserFilterModal = () => {
                         <RadioGroup.Item
                             key={key}
                             value={list_item.value}
-                            label={
-                                <Text color='prominent' size='s'>
-                                    {list_item.text}
-                                </Text>
-                            }
+                            label={<Text color='prominent'>{list_item.text}</Text>}
                         />
                     );
                 })}
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-filter-modal/index.js b/packages/p2p/src/pages/my-profile/block-user/block-user-filter-modal/index.js
similarity index 100%
rename from packages/p2p/src/components/my-profile/block-user/block-user-filter-modal/index.js
rename to packages/p2p/src/pages/my-profile/block-user/block-user-filter-modal/index.js
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-list/block-user-list.jsx b/packages/p2p/src/pages/my-profile/block-user/block-user-list/block-user-list.jsx
similarity index 100%
rename from packages/p2p/src/components/my-profile/block-user/block-user-list/block-user-list.jsx
rename to packages/p2p/src/pages/my-profile/block-user/block-user-list/block-user-list.jsx
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-list/block-user-list.scss b/packages/p2p/src/pages/my-profile/block-user/block-user-list/block-user-list.scss
similarity index 100%
rename from packages/p2p/src/components/my-profile/block-user/block-user-list/block-user-list.scss
rename to packages/p2p/src/pages/my-profile/block-user/block-user-list/block-user-list.scss
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-list/index.js b/packages/p2p/src/pages/my-profile/block-user/block-user-list/index.js
similarity index 100%
rename from packages/p2p/src/components/my-profile/block-user/block-user-list/index.js
rename to packages/p2p/src/pages/my-profile/block-user/block-user-list/index.js
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.jsx b/packages/p2p/src/pages/my-profile/block-user/block-user-table/block-user-row/block-user-row.jsx
similarity index 95%
rename from packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.jsx
rename to packages/p2p/src/pages/my-profile/block-user/block-user-table/block-user-row/block-user-row.jsx
index eaf93cc337b0..79c4f9103c92 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.jsx
+++ b/packages/p2p/src/pages/my-profile/block-user/block-user-table/block-user-row/block-user-row.jsx
@@ -37,9 +37,7 @@ const BlockUserRow = ({ row: advertiser }) => {
                 >
                     <UserAvatar nickname={name} size={32} text_size='s' />
                     <div className='block-user-row__cell-container'>
-                        <Text size='xs' line_height='m' color='general'>
-                            {name}
-                        </Text>
+                        <Text size='xs'>{name}</Text>
                     </div>
                 </div>
             </Table.Cell>
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.scss b/packages/p2p/src/pages/my-profile/block-user/block-user-table/block-user-row/block-user-row.scss
similarity index 100%
rename from packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/block-user-row.scss
rename to packages/p2p/src/pages/my-profile/block-user/block-user-table/block-user-row/block-user-row.scss
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/index.js b/packages/p2p/src/pages/my-profile/block-user/block-user-table/block-user-row/index.js
similarity index 100%
rename from packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-row/index.js
rename to packages/p2p/src/pages/my-profile/block-user/block-user-table/block-user-row/index.js
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table-error/block-user-table-error.jsx b/packages/p2p/src/pages/my-profile/block-user/block-user-table/block-user-table-error/block-user-table-error.jsx
similarity index 78%
rename from packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table-error/block-user-table-error.jsx
rename to packages/p2p/src/pages/my-profile/block-user/block-user-table/block-user-table-error/block-user-table-error.jsx
index 63811a0a9b67..35867c450ca8 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table-error/block-user-table-error.jsx
+++ b/packages/p2p/src/pages/my-profile/block-user/block-user-table/block-user-table-error/block-user-table-error.jsx
@@ -19,13 +19,7 @@ const BlockUserTableError = ({ error_message }) => {
                         height={128}
                         width={128}
                     />
-                    <Text
-                        align='center'
-                        className='block-user-table-error__text'
-                        line_height='m'
-                        size='s'
-                        weight='bold'
-                    >
+                    <Text align='center' className='block-user-table-error__text' weight='bold'>
                         <Localize i18n_default_text={error_message} />
                     </Text>
                 </div>
@@ -44,13 +38,7 @@ const BlockUserTableError = ({ error_message }) => {
                         height={128}
                         width={128}
                     />
-                    <Text
-                        align='center'
-                        className='block-user-table-error__text'
-                        line_height='m'
-                        size='s'
-                        weight='bold'
-                    >
+                    <Text align='center' className='block-user-table-error__text' weight='bold'>
                         <Localize i18n_default_text={error_message} />
                     </Text>
                 </MobileFullPageModal>
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table-error/block-user-table-error.scss b/packages/p2p/src/pages/my-profile/block-user/block-user-table/block-user-table-error/block-user-table-error.scss
similarity index 100%
rename from packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table-error/block-user-table-error.scss
rename to packages/p2p/src/pages/my-profile/block-user/block-user-table/block-user-table-error/block-user-table-error.scss
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table-error/index.js b/packages/p2p/src/pages/my-profile/block-user/block-user-table/block-user-table-error/index.js
similarity index 100%
rename from packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table-error/index.js
rename to packages/p2p/src/pages/my-profile/block-user/block-user-table/block-user-table-error/index.js
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table.jsx b/packages/p2p/src/pages/my-profile/block-user/block-user-table/block-user-table.jsx
similarity index 90%
rename from packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table.jsx
rename to packages/p2p/src/pages/my-profile/block-user/block-user-table/block-user-table.jsx
index 7679294cbf30..657f6f7701ab 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table.jsx
+++ b/packages/p2p/src/pages/my-profile/block-user/block-user-table/block-user-table.jsx
@@ -6,7 +6,7 @@ import { localize } from 'Components/i18next';
 import { isMobile } from '@deriv/shared';
 import { useStores } from 'Stores';
 import BlockUserRow from './block-user-row';
-import BlockUserEmpty from 'Components/block-user/block-user-empty';
+import BlockUserEmpty from 'Pages/my-profile/block-user/block-user-empty';
 import './block-user-table.scss';
 
 const BlockUserTable = () => {
@@ -49,13 +49,7 @@ const BlockUserTable = () => {
 
     if (my_profile_store.search_term && my_profile_store.rendered_trade_partners_list.length === 0) {
         return (
-            <Text
-                align='center'
-                className='block-user-table__text'
-                line_height='m'
-                size='s'
-                weight={isMobile() ? 'normal' : 'bold'}
-            >
+            <Text align='center' className='block-user-table__text' weight={isMobile() ? 'normal' : 'bold'}>
                 {localize('There are no matching name.')}
             </Text>
         );
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table.scss b/packages/p2p/src/pages/my-profile/block-user/block-user-table/block-user-table.scss
similarity index 100%
rename from packages/p2p/src/components/my-profile/block-user/block-user-table/block-user-table.scss
rename to packages/p2p/src/pages/my-profile/block-user/block-user-table/block-user-table.scss
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user-table/index.js b/packages/p2p/src/pages/my-profile/block-user/block-user-table/index.js
similarity index 100%
rename from packages/p2p/src/components/my-profile/block-user/block-user-table/index.js
rename to packages/p2p/src/pages/my-profile/block-user/block-user-table/index.js
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user.jsx b/packages/p2p/src/pages/my-profile/block-user/block-user.jsx
similarity index 100%
rename from packages/p2p/src/components/my-profile/block-user/block-user.jsx
rename to packages/p2p/src/pages/my-profile/block-user/block-user.jsx
diff --git a/packages/p2p/src/components/my-profile/block-user/block-user.scss b/packages/p2p/src/pages/my-profile/block-user/block-user.scss
similarity index 92%
rename from packages/p2p/src/components/my-profile/block-user/block-user.scss
rename to packages/p2p/src/pages/my-profile/block-user/block-user.scss
index e2cde37cd9ce..8f11c0a17117 100644
--- a/packages/p2p/src/components/my-profile/block-user/block-user.scss
+++ b/packages/p2p/src/pages/my-profile/block-user/block-user.scss
@@ -6,7 +6,6 @@
             grid-template-rows: 1fr 8rem;
             height: 100%;
             overflow-x: hidden;
-            width: 100vw;
 
             .search-box {
                 margin: 1rem auto;
diff --git a/packages/p2p/src/components/my-profile/block-user/index.js b/packages/p2p/src/pages/my-profile/block-user/index.js
similarity index 100%
rename from packages/p2p/src/components/my-profile/block-user/index.js
rename to packages/p2p/src/pages/my-profile/block-user/index.js
diff --git a/packages/p2p/src/components/my-profile/index.js b/packages/p2p/src/pages/my-profile/index.js
similarity index 100%
rename from packages/p2p/src/components/my-profile/index.js
rename to packages/p2p/src/pages/my-profile/index.js
diff --git a/packages/p2p/src/components/my-profile/my-profile-content.jsx b/packages/p2p/src/pages/my-profile/my-profile-content.jsx
similarity index 100%
rename from packages/p2p/src/components/my-profile/my-profile-content.jsx
rename to packages/p2p/src/pages/my-profile/my-profile-content.jsx
diff --git a/packages/p2p/src/components/my-profile/my-profile-form/index.js b/packages/p2p/src/pages/my-profile/my-profile-form/index.js
similarity index 100%
rename from packages/p2p/src/components/my-profile/my-profile-form/index.js
rename to packages/p2p/src/pages/my-profile/my-profile-form/index.js
diff --git a/packages/p2p/src/components/my-profile/my-profile-form/my-profile-form.jsx b/packages/p2p/src/pages/my-profile/my-profile-form/my-profile-form.jsx
similarity index 99%
rename from packages/p2p/src/components/my-profile/my-profile-form/my-profile-form.jsx
rename to packages/p2p/src/pages/my-profile/my-profile-form/my-profile-form.jsx
index 56642eec0e40..44a55e1cd5a9 100644
--- a/packages/p2p/src/components/my-profile/my-profile-form/my-profile-form.jsx
+++ b/packages/p2p/src/pages/my-profile/my-profile-form/my-profile-form.jsx
@@ -4,7 +4,7 @@ import { Button, DesktopWrapper, Input, Loading, MobileFullPageModal, MobileWrap
 import { observer, Observer } from 'mobx-react-lite';
 import classNames from 'classnames';
 import { Localize, localize } from 'Components/i18next';
-import FormError from 'Components/form/error.jsx';
+import FormError from 'Components/section-error';
 import { my_profile_tabs } from 'Constants/my-profile-tabs';
 import { useStores } from 'Stores';
 
diff --git a/packages/p2p/src/components/my-profile/my-profile-form/my-profile-form.scss b/packages/p2p/src/pages/my-profile/my-profile-form/my-profile-form.scss
similarity index 100%
rename from packages/p2p/src/components/my-profile/my-profile-form/my-profile-form.scss
rename to packages/p2p/src/pages/my-profile/my-profile-form/my-profile-form.scss
diff --git a/packages/p2p/src/components/my-profile/my-profile-header/index.js b/packages/p2p/src/pages/my-profile/my-profile-header/index.js
similarity index 100%
rename from packages/p2p/src/components/my-profile/my-profile-header/index.js
rename to packages/p2p/src/pages/my-profile/my-profile-header/index.js
diff --git a/packages/p2p/src/components/my-profile/my-profile-header/my-profile-header.jsx b/packages/p2p/src/pages/my-profile/my-profile-header/my-profile-header.jsx
similarity index 95%
rename from packages/p2p/src/components/my-profile/my-profile-header/my-profile-header.jsx
rename to packages/p2p/src/pages/my-profile/my-profile-header/my-profile-header.jsx
index d325cddaa315..ed2e7f65255c 100644
--- a/packages/p2p/src/components/my-profile/my-profile-header/my-profile-header.jsx
+++ b/packages/p2p/src/pages/my-profile/my-profile-header/my-profile-header.jsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { observer } from 'mobx-react-lite';
 import { ButtonToggle } from '@deriv/components';
-import ToggleContainer from 'Components/misc/toggle-container.jsx';
+import ToggleContainer from 'Components/toggle-container';
 import { localize } from 'Components/i18next';
 import { my_profile_tabs } from 'Constants/my-profile-tabs';
 import { useStores } from 'Stores';
diff --git a/packages/p2p/src/components/my-profile/my-profile-header/my-profile-header.scss b/packages/p2p/src/pages/my-profile/my-profile-header/my-profile-header.scss
similarity index 100%
rename from packages/p2p/src/components/my-profile/my-profile-header/my-profile-header.scss
rename to packages/p2p/src/pages/my-profile/my-profile-header/my-profile-header.scss
diff --git a/packages/p2p/src/components/my-profile/my-profile-separator-container/index.js b/packages/p2p/src/pages/my-profile/my-profile-separator-container/index.js
similarity index 100%
rename from packages/p2p/src/components/my-profile/my-profile-separator-container/index.js
rename to packages/p2p/src/pages/my-profile/my-profile-separator-container/index.js
diff --git a/packages/p2p/src/components/my-profile/my-profile-separator-container/my-profile-separator-container.jsx b/packages/p2p/src/pages/my-profile/my-profile-separator-container/my-profile-separator-container.jsx
similarity index 100%
rename from packages/p2p/src/components/my-profile/my-profile-separator-container/my-profile-separator-container.jsx
rename to packages/p2p/src/pages/my-profile/my-profile-separator-container/my-profile-separator-container.jsx
diff --git a/packages/p2p/src/components/my-profile/my-profile-separator-container/my-profile-separator-container.scss b/packages/p2p/src/pages/my-profile/my-profile-separator-container/my-profile-separator-container.scss
similarity index 100%
rename from packages/p2p/src/components/my-profile/my-profile-separator-container/my-profile-separator-container.scss
rename to packages/p2p/src/pages/my-profile/my-profile-separator-container/my-profile-separator-container.scss
diff --git a/packages/p2p/src/components/my-profile/my-profile-stats/index.js b/packages/p2p/src/pages/my-profile/my-profile-stats/index.js
similarity index 100%
rename from packages/p2p/src/components/my-profile/my-profile-stats/index.js
rename to packages/p2p/src/pages/my-profile/my-profile-stats/index.js
diff --git a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-balance/index.js b/packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-balance/index.js
similarity index 100%
rename from packages/p2p/src/components/my-profile/my-profile-stats/my-profile-balance/index.js
rename to packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-balance/index.js
diff --git a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-balance/my-profile-balance.jsx b/packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-balance/my-profile-balance.jsx
similarity index 86%
rename from packages/p2p/src/components/my-profile/my-profile-stats/my-profile-balance/my-profile-balance.jsx
rename to packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-balance/my-profile-balance.jsx
index d9c9856a2ccc..746d39d764c2 100644
--- a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-balance/my-profile-balance.jsx
+++ b/packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-balance/my-profile-balance.jsx
@@ -34,20 +34,20 @@ const MyProfileBalance = () => {
                     />
                 </Modal.Footer>
             </Modal>
-            <div className='my-profile-balance--column'>
-                <div className='my-profile-balance--row'>
-                    <Text color='less-prominent' line_height='m' size={isMobile() ? 'xxxs' : 'xs'}>
+            <div className='my-profile-balance__column'>
+                <div className='my-profile-balance__row'>
+                    <Text color='less-prominent' size={isMobile() ? 'xxxs' : 'xs'}>
                         <Localize i18n_default_text='Available Deriv P2P balance' />
                     </Text>
                     <Icon
-                        className='my-profile-balance--icon'
+                        className='my-profile-balance__icon'
                         color='disabled'
                         icon='IcInfoOutline'
                         onClick={() => setIsBalanceTooltipOpen(true)}
                         size={isMobile() ? 12 : 16}
                     />
                 </div>
-                <Text className='my-profile-balance__amount' color='prominent' line_height='m' size='m' weight='bold'>
+                <Text className='my-profile-balance__amount' color='prominent' size='m' weight='bold'>
                     <Money amount={general_store.advertiser_info.balance_available} currency={currency} show_currency />
                 </Text>
             </div>
diff --git a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-balance/my-profile-balance.scss b/packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-balance/my-profile-balance.scss
similarity index 90%
rename from packages/p2p/src/components/my-profile/my-profile-stats/my-profile-balance/my-profile-balance.scss
rename to packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-balance/my-profile-balance.scss
index 5966b268188b..7b9233043aca 100644
--- a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-balance/my-profile-balance.scss
+++ b/packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-balance/my-profile-balance.scss
@@ -13,16 +13,16 @@
         }
     }
 
-    &--column {
+    &__column {
         flex-direction: column;
     }
 
-    &--icon {
+    &__icon {
         cursor: pointer;
         margin-left: 0.5rem;
     }
 
-    &--row {
+    &__row {
         display: flex;
         flex-direction: row;
         align-items: center;
diff --git a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-details-container/index.js b/packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-details-container/index.js
similarity index 100%
rename from packages/p2p/src/components/my-profile/my-profile-stats/my-profile-details-container/index.js
rename to packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-details-container/index.js
diff --git a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-details-container/my-profile-details-container.jsx b/packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-details-container/my-profile-details-container.jsx
similarity index 89%
rename from packages/p2p/src/components/my-profile/my-profile-stats/my-profile-details-container/my-profile-details-container.jsx
rename to packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-details-container/my-profile-details-container.jsx
index ac5e24bbb158..7b6d5b294484 100644
--- a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-details-container/my-profile-details-container.jsx
+++ b/packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-details-container/my-profile-details-container.jsx
@@ -7,7 +7,7 @@ import './my-profile-details-container.scss';
 const MyProfileDetailsContainer = () => (
     <div className='my-profile-details-container'>
         <MyProfileName />
-        <div className='my-profile-details-container--table'>
+        <div className='my-profile-details-container__table'>
             <MyProfileBalance />
             <MyProfileDetailsTable />
         </div>
diff --git a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-details-container/my-profile-details-container.scss b/packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-details-container/my-profile-details-container.scss
similarity index 96%
rename from packages/p2p/src/components/my-profile/my-profile-stats/my-profile-details-container/my-profile-details-container.scss
rename to packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-details-container/my-profile-details-container.scss
index d3a58cd0a54d..4dfde8e438d4 100644
--- a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-details-container/my-profile-details-container.scss
+++ b/packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-details-container/my-profile-details-container.scss
@@ -9,7 +9,7 @@
         padding: unset;
     }
 
-    &--table {
+    &__table {
         display: flex;
         justify-content: space-between;
 
diff --git a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-details-table/index.js b/packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-details-table/index.js
similarity index 100%
rename from packages/p2p/src/components/my-profile/my-profile-stats/my-profile-details-table/index.js
rename to packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-details-table/index.js
diff --git a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-details-table/my-profile-details-table.jsx b/packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-details-table/my-profile-details-table.jsx
similarity index 96%
rename from packages/p2p/src/components/my-profile/my-profile-stats/my-profile-details-table/my-profile-details-table.jsx
rename to packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-details-table/my-profile-details-table.jsx
index aecf7e730fe7..9f60c0fdfd4f 100644
--- a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-details-table/my-profile-details-table.jsx
+++ b/packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-details-table/my-profile-details-table.jsx
@@ -23,8 +23,8 @@ const MyProfileDetailsTable = () => {
                             <Localize i18n_default_text='Buy' />
                         </Text>
                     </Table.Head>
-                    <Table.Row className='my-profile-details-table--row'>
-                        <Table.Cell className='my-profile-details-table--cell'>
+                    <Table.Row className='my-profile-details-table__row'>
+                        <Table.Cell className='my-profile-details-table__cell'>
                             <Text color='less-prominent' size='xs'>
                                 <Localize i18n_default_text='Daily limit' />
                             </Text>
@@ -32,7 +32,7 @@ const MyProfileDetailsTable = () => {
                                 <Money amount={daily_buy_limit} currency={currency} show_currency />
                             </Text>
                         </Table.Cell>
-                        <Table.Cell className='my-profile-details-table--cell'>
+                        <Table.Cell className='my-profile-details-table__cell'>
                             <Text color='less-prominent' size='xs'>
                                 <Localize i18n_default_text='Available' />
                             </Text>
@@ -48,8 +48,8 @@ const MyProfileDetailsTable = () => {
                             <Localize i18n_default_text='Sell' />
                         </Text>
                     </Table.Head>
-                    <Table.Row className='my-profile-details-table--row'>
-                        <Table.Cell className='my-profile-details-table--cell'>
+                    <Table.Row className='my-profile-details-table__row'>
+                        <Table.Cell className='my-profile-details-table__cell'>
                             <Text color='less-prominent' size='xs'>
                                 <Localize i18n_default_text='Daily limit' />
                             </Text>
@@ -57,7 +57,7 @@ const MyProfileDetailsTable = () => {
                                 <Money amount={daily_sell_limit} currency={currency} show_currency />
                             </Text>
                         </Table.Cell>
-                        <Table.Cell className='my-profile-details-table--cell'>
+                        <Table.Cell className='my-profile-details-table__cell'>
                             <Text color='less-prominent' size='xs'>
                                 <Localize i18n_default_text='Available' />
                             </Text>
@@ -69,8 +69,8 @@ const MyProfileDetailsTable = () => {
                 </Table>
             </div>
             {upgradable_daily_limits && (
-                <Text as='div' className='my-profile-details-table--limit'>
-                    <Text color='less-prominent' line-height='l' size='xxs'>
+                <Text as='div' className='my-profile-details-table__limit'>
+                    <Text color='less-prominent' line_height='l' size='xxs'>
                         <Localize
                             i18n_default_text='Want to increase your daily limits to <0>{{max_daily_buy}} {{currency}}</0> (buy) and <1>{{max_daily_sell}} {{currency}}</1> (sell)?'
                             components={[<strong key={0} />, <strong key={1} />]}
diff --git a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-details-table/my-profile-details-table.scss b/packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-details-table/my-profile-details-table.scss
similarity index 96%
rename from packages/p2p/src/components/my-profile/my-profile-stats/my-profile-details-table/my-profile-details-table.scss
rename to packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-details-table/my-profile-details-table.scss
index 5a8920a4c059..8374f94d4930 100644
--- a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-details-table/my-profile-details-table.scss
+++ b/packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-details-table/my-profile-details-table.scss
@@ -11,7 +11,7 @@
         border-bottom: none;
     }
 
-    &--cell {
+    &__cell {
         align-items: flex-start;
         border-right: 1px solid var(--general-section-2);
         display: flex;
@@ -35,7 +35,7 @@
         }
     }
 
-    &--row {
+    &__row {
         display: flex;
         flex-direction: row;
         width: 29.2rem;
@@ -47,7 +47,7 @@
         }
     }
 
-    &--limit {
+    &__limit {
         display: flex;
         align-items: center;
 
diff --git a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-name/index.js b/packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-name/index.js
similarity index 100%
rename from packages/p2p/src/components/my-profile/my-profile-stats/my-profile-name/index.js
rename to packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-name/index.js
diff --git a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-name/my-profile-name.jsx b/packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-name/my-profile-name.jsx
similarity index 88%
rename from packages/p2p/src/components/my-profile/my-profile-stats/my-profile-name/my-profile-name.jsx
rename to packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-name/my-profile-name.jsx
index 0d3d056f86c8..e37c320b9c5d 100644
--- a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-name/my-profile-name.jsx
+++ b/packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-name/my-profile-name.jsx
@@ -1,15 +1,15 @@
 import React from 'react';
 import { DesktopWrapper, MobileWrapper, Text } from '@deriv/components';
 import { observer } from 'mobx-react-lite';
-import UserAvatar from 'Components/user/user-avatar/user-avatar.jsx';
+import UserAvatar from 'Components/user/user-avatar';
 import { useStores } from 'Stores';
 import { daysSince, isMobile } from '@deriv/shared';
 import { Localize } from 'Components/i18next';
-import TradeBadge from '../../../trade-badge';
-import MyProfilePrivacy from '../my-profile-privacy';
+import TradeBadge from 'Components/trade-badge';
+import MyProfilePrivacy from 'Pages/my-profile/my-profile-stats/my-profile-privacy/my-profile-privacy';
 import StarRating from 'Components/star-rating';
 import RecommendedBy from 'Components/recommended-by';
-import BlockUserCount from 'Components/advertiser-page/block-user/block-user-count';
+import BlockUserCount from 'Pages/advertiser-page/block-user/block-user-count';
 
 const MyProfileName = () => {
     const { general_store } = useStores();
@@ -39,15 +39,15 @@ const MyProfileName = () => {
                 text_size={isMobile() ? 's' : 'sm'}
             />
             <div className='my-profile-name__name'>
-                <div className='my-profile-name--privacy'>
-                    <div className='my-profile-name--column'>
-                        <Text color='prominent' weight='bold' size='s' line_height='m'>
+                <div className='my-profile-name__privacy'>
+                    <div className='my-profile-name__column'>
+                        <Text color='prominent' weight='bold'>
                             {general_store.nickname}
                         </Text>
                         <MobileWrapper>
                             <div className='my-profile-name__row'>
                                 <Text
-                                    className='my-profile-name--rating__row'
+                                    className='my-profile-name__rating__row'
                                     color='less-prominent'
                                     size={isMobile() ? 'xxxs' : 'xs'}
                                 >
@@ -62,10 +62,10 @@ const MyProfileName = () => {
                                 </Text>
                             </div>
                         </MobileWrapper>
-                        <div className='my-profile-name--rating'>
+                        <div className='my-profile-name__rating'>
                             <DesktopWrapper>
                                 <Text
-                                    className='my-profile-name--rating__row'
+                                    className='my-profile-name__rating__row'
                                     color='less-prominent'
                                     size={isMobile() ? 'xxxs' : 'xs'}
                                 >
@@ -81,7 +81,7 @@ const MyProfileName = () => {
                             </DesktopWrapper>
                             {rating_average ? (
                                 <React.Fragment>
-                                    <div className='my-profile-name--rating__row'>
+                                    <div className='my-profile-name__rating__row'>
                                         <StarRating
                                             empty_star_icon='IcEmptyStar'
                                             full_star_icon='IcFullStar'
@@ -91,7 +91,7 @@ const MyProfileName = () => {
                                             should_allow_hover_effect={false}
                                             star_size={isMobile() ? 17 : 20}
                                         />
-                                        <div className='my-profile-name--rating__text'>
+                                        <div className='my-profile-name__rating__text'>
                                             <Text color='prominent' size={isMobile() ? 'xxxs' : 'xs'}>
                                                 {rating_average_decimal}
                                             </Text>
@@ -110,7 +110,7 @@ const MyProfileName = () => {
                                             </Text>
                                         </div>
                                     </div>
-                                    <div className='my-profile-name--rating__row'>
+                                    <div className='my-profile-name__rating__row'>
                                         <RecommendedBy
                                             recommended_average={recommended_average}
                                             recommended_count={recommended_count}
@@ -118,14 +118,14 @@ const MyProfileName = () => {
                                     </div>
                                 </React.Fragment>
                             ) : (
-                                <div className='my-profile-name--rating__row'>
+                                <div className='my-profile-name__rating__row'>
                                     <Text color='less-prominent' size={isMobile() ? 'xxxs' : 'xs'}>
                                         <Localize i18n_default_text='Not rated yet' />
                                     </Text>
                                 </div>
                             )}
                             <DesktopWrapper>
-                                <div className='my-profile-name--rating__row'>
+                                <div className='my-profile-name__rating__row'>
                                     <BlockUserCount />
                                 </div>
                             </DesktopWrapper>
@@ -133,7 +133,7 @@ const MyProfileName = () => {
 
                         <MobileWrapper>
                             <div className='my-profile-name__row'>
-                                <div className='my-profile-name--rating__row'>
+                                <div className='my-profile-name__rating__row'>
                                     <BlockUserCount />
                                 </div>
                             </div>
diff --git a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-name/my-profile-name.scss b/packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-name/my-profile-name.scss
similarity index 97%
rename from packages/p2p/src/components/my-profile/my-profile-stats/my-profile-name/my-profile-name.scss
rename to packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-name/my-profile-name.scss
index 2172c03adad6..7c2d4883de27 100644
--- a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-name/my-profile-name.scss
+++ b/packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-name/my-profile-name.scss
@@ -15,7 +15,7 @@
         }
     }
 
-    &--column {
+    &__column {
         display: flex;
         flex-direction: column;
     }
@@ -29,14 +29,14 @@
         }
     }
 
-    &--privacy {
+    &__privacy {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         width: 100%;
     }
 
-    &--rating {
+    &__rating {
         display: flex;
         flex-direction: row;
         padding: 0.8rem 0;
diff --git a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-privacy/index.js b/packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-privacy/index.js
similarity index 100%
rename from packages/p2p/src/components/my-profile/my-profile-stats/my-profile-privacy/index.js
rename to packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-privacy/index.js
diff --git a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-privacy/my-profile-privacy.jsx b/packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-privacy/my-profile-privacy.jsx
similarity index 83%
rename from packages/p2p/src/components/my-profile/my-profile-stats/my-profile-privacy/my-profile-privacy.jsx
rename to packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-privacy/my-profile-privacy.jsx
index c057f9c1798b..e8c0a10a2292 100644
--- a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-privacy/my-profile-privacy.jsx
+++ b/packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-privacy/my-profile-privacy.jsx
@@ -11,12 +11,7 @@ const MyProfilePrivacy = () => {
     return (
         <div className='my-profile-privacy'>
             <div className='my-profile-privacy__toggle-container'>
-                <Text
-                    className='my-profile-privacy__label'
-                    color='prominent'
-                    line_height='m'
-                    size={isDesktop() ? 'xs' : 'xxs'}
-                >
+                <Text className='my-profile-privacy__label' color='prominent' size={isDesktop() ? 'xs' : 'xxs'}>
                     <Localize i18n_default_text='Show my real name' />
                 </Text>
                 <Text color='less-prominent' size='xxxs'>
diff --git a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-privacy/my-profile-privacy.scss b/packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-privacy/my-profile-privacy.scss
similarity index 100%
rename from packages/p2p/src/components/my-profile/my-profile-stats/my-profile-privacy/my-profile-privacy.scss
rename to packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-privacy/my-profile-privacy.scss
diff --git a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats-table/index.js b/packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-stats-table/index.js
similarity index 100%
rename from packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats-table/index.js
rename to packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-stats-table/index.js
diff --git a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats-table/my-profile-stats-table.jsx b/packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-stats-table/my-profile-stats-table.jsx
similarity index 89%
rename from packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats-table/my-profile-stats-table.jsx
rename to packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-stats-table/my-profile-stats-table.jsx
index 3d735d9f6731..18829ec7aeab 100644
--- a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats-table/my-profile-stats-table.jsx
+++ b/packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-stats-table/my-profile-stats-table.jsx
@@ -38,7 +38,7 @@ const MyProfileStatsTable = () => {
                 <Table>
                     <Table.Row className='my-profile-stats-table--mobile'>
                         <Table.Cell className='my-profile-stats-table__cell'>
-                            <Text as='p' color='less-prominent' line_height='m' size='xxxs'>
+                            <Text as='p' color='less-prominent' size='xxxs'>
                                 <Localize
                                     i18n_default_text='Buy completion  <0>30d</0>'
                                     components={[
@@ -51,12 +51,12 @@ const MyProfileStatsTable = () => {
                                     ]}
                                 />
                             </Text>
-                            <Text as='p' color='prominent' line_height='m' size='xs' weight='bold'>
+                            <Text as='p' color='prominent' size='xs' weight='bold'>
                                 {buy_completion_rate ? `${buy_completion_rate}% (${buy_orders_count})` : '-'}
                             </Text>
                         </Table.Cell>
                         <Table.Cell className='my-profile-stats-table__cell'>
-                            <Text as='p' color='less-prominent' line_height='m' size='xxxs'>
+                            <Text as='p' color='less-prominent' size='xxxs'>
                                 <Localize
                                     i18n_default_text='Avg pay time  <0>30d</0>'
                                     components={[
@@ -69,7 +69,7 @@ const MyProfileStatsTable = () => {
                                     ]}
                                 />
                             </Text>
-                            <Text as='p' color='prominent' line_height='m' size='xs' weight='bold'>
+                            <Text as='p' color='prominent' size='xs' weight='bold'>
                                 {buy_time_avg
                                     ? localize('{{- avg_buy_time_in_minutes}} min', {
                                           avg_buy_time_in_minutes,
@@ -80,7 +80,7 @@ const MyProfileStatsTable = () => {
                     </Table.Row>
                     <Table.Row className='my-profile-stats-table--mobile'>
                         <Table.Cell className='my-profile-stats-table__cell'>
-                            <Text as='p' color='less-prominent' line_height='m' size='xxxs'>
+                            <Text as='p' color='less-prominent' size='xxxs'>
                                 <Localize
                                     i18n_default_text='Sell completion  <0>30d</0>'
                                     components={[
@@ -93,12 +93,12 @@ const MyProfileStatsTable = () => {
                                     ]}
                                 />
                             </Text>
-                            <Text as='p' color='prominent' line_height='m' size='xs' weight='bold'>
+                            <Text as='p' color='prominent' size='xs' weight='bold'>
                                 {sell_completion_rate ? `${sell_completion_rate}% (${sell_orders_count})` : '-'}
                             </Text>
                         </Table.Cell>
                         <Table.Cell className='my-profile-stats-table__cell'>
-                            <Text as='p' color='less-prominent' line_height='m' size='xxxs'>
+                            <Text as='p' color='less-prominent' size='xxxs'>
                                 <Localize
                                     i18n_default_text='Avg release time  <0>30d</0>'
                                     components={[
@@ -111,7 +111,7 @@ const MyProfileStatsTable = () => {
                                     ]}
                                 />
                             </Text>
-                            <Text as='p' color='prominent' line_height='m' size='xs' weight='bold'>
+                            <Text as='p' color='prominent' size='xs' weight='bold'>
                                 {release_time_avg
                                     ? localize('{{- avg_release_time_in_minutes}} min', {
                                           avg_release_time_in_minutes,
@@ -122,7 +122,7 @@ const MyProfileStatsTable = () => {
                     </Table.Row>
                     <Table.Row className='my-profile-stats-table--mobile'>
                         <Table.Cell className='my-profile-stats-table__cell'>
-                            <Text as='p' color='less-prominent' line_height='m' size='xs'>
+                            <Text as='p' color='less-prominent' size='xs'>
                                 <Localize
                                     i18n_default_text='Trade volume  <0>30d</0> | <1>lifetime</1>'
                                     components={[
@@ -143,7 +143,7 @@ const MyProfileStatsTable = () => {
                                     ]}
                                 />
                             </Text>
-                            <Text as='p' color='prominent' line_height='m' size='xs' weight='bold'>
+                            <Text as='p' color='prominent' size='xs' weight='bold'>
                                 {show_lifetime_turnover_value ? (
                                     <Money amount={total_turnover} currency={currency} show_currency />
                                 ) : (
@@ -156,17 +156,17 @@ const MyProfileStatsTable = () => {
                             </Text>
                         </Table.Cell>
                         <Table.Cell className='my-profile-stats-table__cell'>
-                            <Text as='p' color='less-prominent' line_height='m' size='xxxs'>
+                            <Text as='p' color='less-prominent' size='xxxs'>
                                 <Localize i18n_default_text='Trade partners' />
                             </Text>
-                            <Text as='p' color='prominent' line_height='m' size='xs' weight='bold'>
+                            <Text as='p' color='prominent' size='xs' weight='bold'>
                                 {partner_count || '0'}
                             </Text>
                         </Table.Cell>
                     </Table.Row>
                     <Table.Row className='my-profile-stats-table--mobile'>
                         <Table.Cell className='my-profile-stats-table__cell'>
-                            <Text as='p' color='less-prominent' line_height='m' size='xxxs'>
+                            <Text as='p' color='less-prominent' size='xxxs'>
                                 <Localize
                                     i18n_default_text='Total orders  <0>30d</0> | <1>lifetime</1>'
                                     components={[
@@ -187,7 +187,7 @@ const MyProfileStatsTable = () => {
                                     ]}
                                 />
                             </Text>
-                            <Text as='p' color='prominent' line_height='m' size='xs' weight='bold'>
+                            <Text as='p' color='prominent' size='xs' weight='bold'>
                                 {show_lifetime_order_value
                                     ? total_orders_count
                                     : Number(buy_orders_count) + Number(sell_orders_count)}
@@ -204,7 +204,7 @@ const MyProfileStatsTable = () => {
             <Table>
                 <Table.Row className='my-profile-stats-table'>
                     <Table.Cell className='my-profile-stats-table__cell'>
-                        <Text as='p' color='less-prominent' line_height='m' size='xs'>
+                        <Text as='p' color='less-prominent' size='xs'>
                             <Localize
                                 i18n_default_text='Buy completion  <0>30d</0>'
                                 components={[
@@ -217,12 +217,12 @@ const MyProfileStatsTable = () => {
                                 ]}
                             />
                         </Text>
-                        <Text as='p' color='prominent' line_height='m' size='xs' weight='bold'>
+                        <Text as='p' color='prominent' size='xs' weight='bold'>
                             {buy_completion_rate ? `${buy_completion_rate}% (${buy_orders_count})` : '-'}
                         </Text>
                     </Table.Cell>
                     <Table.Cell className='my-profile-stats-table__cell'>
-                        <Text as='p' color='less-prominent' line_height='m' size='xs'>
+                        <Text as='p' color='less-prominent' size='xs'>
                             <Localize
                                 i18n_default_text='Sell completion  <0>30d</0>'
                                 components={[
@@ -235,12 +235,12 @@ const MyProfileStatsTable = () => {
                                 ]}
                             />
                         </Text>
-                        <Text as='p' color='prominent' line_height='m' size='xs' weight='bold'>
+                        <Text as='p' color='prominent' size='xs' weight='bold'>
                             {sell_completion_rate ? `${sell_completion_rate}% (${sell_orders_count})` : '-'}
                         </Text>
                     </Table.Cell>
                     <Table.Cell className='my-profile-stats-table__cell'>
-                        <Text as='p' color='less-prominent' line_height='m' size='xs'>
+                        <Text as='p' color='less-prominent' size='xs'>
                             <Localize
                                 i18n_default_text='Avg pay time  <0>30d</0>'
                                 components={[
@@ -253,7 +253,7 @@ const MyProfileStatsTable = () => {
                                 ]}
                             />
                         </Text>
-                        <Text as='p' color='prominent' line_height='m' size='xs' weight='bold'>
+                        <Text as='p' color='prominent' size='xs' weight='bold'>
                             {buy_time_avg
                                 ? localize('{{- avg_buy_time_in_minutes}} min', {
                                       avg_buy_time_in_minutes,
@@ -262,7 +262,7 @@ const MyProfileStatsTable = () => {
                         </Text>
                     </Table.Cell>
                     <Table.Cell className='my-profile-stats-table__cell'>
-                        <Text as='p' color='less-prominent' line_height='m' size='xs'>
+                        <Text as='p' color='less-prominent' size='xs'>
                             <Localize
                                 i18n_default_text='Avg release time  <0>30d</0>'
                                 components={[
@@ -275,7 +275,7 @@ const MyProfileStatsTable = () => {
                                 ]}
                             />
                         </Text>
-                        <Text as='p' color='prominent' line_height='m' size='xs' weight='bold'>
+                        <Text as='p' color='prominent' size='xs' weight='bold'>
                             {release_time_avg
                                 ? localize('{{- avg_release_time_in_minutes}} min', {
                                       avg_release_time_in_minutes,
@@ -288,7 +288,7 @@ const MyProfileStatsTable = () => {
             <Table className='my-profile-stats-table--second'>
                 <Table.Row className='my-profile-stats-table'>
                     <Table.Cell className='my-profile-stats-table__cell'>
-                        <Text as='p' color='less-prominent' line_height='m' size='xs'>
+                        <Text as='p' color='less-prominent' size='xs'>
                             <Localize
                                 i18n_default_text='Trade volume  <0>30d</0> | <1>lifetime</1>'
                                 components={[
@@ -309,7 +309,7 @@ const MyProfileStatsTable = () => {
                                 ]}
                             />
                         </Text>
-                        <Text as='p' color='prominent' line_height='m' size='xs' weight='bold'>
+                        <Text as='p' color='prominent' size='xs' weight='bold'>
                             {show_lifetime_turnover_value ? (
                                 <Money amount={total_turnover} currency={currency} show_currency />
                             ) : (
@@ -322,7 +322,7 @@ const MyProfileStatsTable = () => {
                         </Text>
                     </Table.Cell>
                     <Table.Cell className='my-profile-stats-table__cell'>
-                        <Text as='p' color='less-prominent' line_height='m' size='xs'>
+                        <Text as='p' color='less-prominent' size='xs'>
                             <Localize
                                 i18n_default_text='Total orders  <0>30d</0> | <1>lifetime</1>'
                                 components={[
@@ -343,17 +343,17 @@ const MyProfileStatsTable = () => {
                                 ]}
                             />
                         </Text>
-                        <Text as='p' color='prominent' line_height='m' size='xs' weight='bold'>
+                        <Text as='p' color='prominent' size='xs' weight='bold'>
                             {show_lifetime_order_value
                                 ? total_orders_count
                                 : Number(buy_orders_count) + Number(sell_orders_count)}
                         </Text>
                     </Table.Cell>
                     <Table.Cell className='my-profile-stats-table__cell'>
-                        <Text as='p' color='less-prominent' line_height='m' size='xs'>
+                        <Text as='p' color='less-prominent' size='xs'>
                             <Localize i18n_default_text='Trade partners' />
                         </Text>
-                        <Text as='p' color='prominent' line_height='m' size='xs' weight='bold'>
+                        <Text as='p' color='prominent' size='xs' weight='bold'>
                             {partner_count || '0'}
                         </Text>
                     </Table.Cell>
diff --git a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats-table/my-profile-stats-table.scss b/packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-stats-table/my-profile-stats-table.scss
similarity index 100%
rename from packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats-table/my-profile-stats-table.scss
rename to packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-stats-table/my-profile-stats-table.scss
diff --git a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats.jsx b/packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-stats.jsx
similarity index 100%
rename from packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats.jsx
rename to packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-stats.jsx
diff --git a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats.scss b/packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-stats.scss
similarity index 100%
rename from packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats.scss
rename to packages/p2p/src/pages/my-profile/my-profile-stats/my-profile-stats.scss
diff --git a/packages/p2p/src/components/my-profile/my-profile.jsx b/packages/p2p/src/pages/my-profile/my-profile.jsx
similarity index 100%
rename from packages/p2p/src/components/my-profile/my-profile.jsx
rename to packages/p2p/src/pages/my-profile/my-profile.jsx
diff --git a/packages/p2p/src/components/my-profile/my-profile.scss b/packages/p2p/src/pages/my-profile/my-profile.scss
similarity index 100%
rename from packages/p2p/src/components/my-profile/my-profile.scss
rename to packages/p2p/src/pages/my-profile/my-profile.scss
diff --git a/packages/p2p/src/components/my-profile/payment-methods/add-payment-method/add-payment-method-form.jsx b/packages/p2p/src/pages/my-profile/payment-methods/add-payment-method/add-payment-method-form.jsx
similarity index 99%
rename from packages/p2p/src/components/my-profile/payment-methods/add-payment-method/add-payment-method-form.jsx
rename to packages/p2p/src/pages/my-profile/payment-methods/add-payment-method/add-payment-method-form.jsx
index 17beab13431b..42081af49627 100644
--- a/packages/p2p/src/components/my-profile/payment-methods/add-payment-method/add-payment-method-form.jsx
+++ b/packages/p2p/src/pages/my-profile/payment-methods/add-payment-method/add-payment-method-form.jsx
@@ -10,6 +10,7 @@ import { useStores } from 'Stores';
 import ModalForm from 'Components/modal-manager/modal-form';
 import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
 import { useP2PAdvertiserPaymentMethods } from '@deriv/hooks';
+import './add-payment-method-form.scss';
 
 const AddPaymentMethodForm = ({ should_show_separated_footer = false }) => {
     const { hideModal, isCurrentModal, modal, showModal } = useModalManagerContext();
diff --git a/packages/p2p/src/pages/my-profile/payment-methods/add-payment-method/add-payment-method-form.scss b/packages/p2p/src/pages/my-profile/payment-methods/add-payment-method/add-payment-method-form.scss
new file mode 100644
index 000000000000..c5afd3f9b961
--- /dev/null
+++ b/packages/p2p/src/pages/my-profile/payment-methods/add-payment-method/add-payment-method-form.scss
@@ -0,0 +1,65 @@
+.add-payment-method-form {
+    &__buttons {
+        display: flex;
+        flex-direction: row;
+        justify-content: end;
+
+        &--add {
+            margin-left: 0.8rem;
+        }
+
+        &--separated-footer {
+            border-top: 2px solid var(--general-section-1);
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-end;
+            margin-top: auto;
+            padding: 1.6rem 2.4rem;
+
+            &-profile {
+                padding: 0 2.4rem 2rem;
+                margin-bottom: 4rem;
+            }
+        }
+    }
+
+    &__form-wrapper {
+        padding: 1.4rem 2.4rem;
+
+        .dc-input {
+            margin-bottom: 4rem;
+        }
+
+        .dc-input--error {
+            margin-bottom: 6rem;
+        }
+    }
+
+    &__field {
+        -webkit-text-fill-color: var(--text-prominent) !important;
+    }
+
+    &__form {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+    }
+
+    &__payment-method-field {
+        &--text-area {
+            height: auto;
+
+            & .dc-input {
+                &__container {
+                    height: 9.6rem;
+                }
+
+                &__field {
+                    height: 100% !important;
+                    padding-left: 0;
+                    padding-right: 0;
+                }
+            }
+        }
+    }
+}
diff --git a/packages/p2p/src/components/my-profile/payment-methods/add-payment-method/add-payment-method.jsx b/packages/p2p/src/pages/my-profile/payment-methods/add-payment-method/add-payment-method.jsx
similarity index 97%
rename from packages/p2p/src/components/my-profile/payment-methods/add-payment-method/add-payment-method.jsx
rename to packages/p2p/src/pages/my-profile/payment-methods/add-payment-method/add-payment-method.jsx
index 504bf66736f1..7b07572b95d7 100644
--- a/packages/p2p/src/components/my-profile/payment-methods/add-payment-method/add-payment-method.jsx
+++ b/packages/p2p/src/pages/my-profile/payment-methods/add-payment-method/add-payment-method.jsx
@@ -4,7 +4,7 @@ import { useStores } from 'Stores';
 import { localize } from 'Components/i18next';
 import { DesktopWrapper, MobileWrapper } from '@deriv/components';
 import AddPaymentMethodForm from './add-payment-method-form.jsx';
-import PageReturn from 'Components/page-return/page-return.jsx';
+import PageReturn from 'Components/page-return';
 import PropTypes from 'prop-types';
 import SelectPaymentMethod from './select-payment-method.jsx';
 import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
diff --git a/packages/p2p/src/pages/my-profile/payment-methods/add-payment-method/add-payment-method.scss b/packages/p2p/src/pages/my-profile/payment-methods/add-payment-method/add-payment-method.scss
new file mode 100644
index 000000000000..5d74de7cd81e
--- /dev/null
+++ b/packages/p2p/src/pages/my-profile/payment-methods/add-payment-method/add-payment-method.scss
@@ -0,0 +1,30 @@
+.add-payment-method {
+    &__modal {
+        @include mobile {
+            width: 100vw;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            padding: 1.5rem 2rem;
+        }
+    }
+    &__cross-icon {
+        cursor: pointer;
+    }
+
+    &__footer {
+        display: none;
+    }
+
+    &-select {
+        height: 30vh;
+
+        @include mobile {
+            height: 100%;
+        }
+    }
+
+    &-hint {
+        padding: 0.2rem 0 0 1.6rem;
+    }
+}
diff --git a/packages/p2p/src/components/my-profile/payment-methods/add-payment-method/index.js b/packages/p2p/src/pages/my-profile/payment-methods/add-payment-method/index.js
similarity index 100%
rename from packages/p2p/src/components/my-profile/payment-methods/add-payment-method/index.js
rename to packages/p2p/src/pages/my-profile/payment-methods/add-payment-method/index.js
diff --git a/packages/p2p/src/components/my-profile/payment-methods/add-payment-method/select-payment-method.jsx b/packages/p2p/src/pages/my-profile/payment-methods/add-payment-method/select-payment-method.jsx
similarity index 94%
rename from packages/p2p/src/components/my-profile/payment-methods/add-payment-method/select-payment-method.jsx
rename to packages/p2p/src/pages/my-profile/payment-methods/add-payment-method/select-payment-method.jsx
index 5c4b850adb17..407a8b344f38 100644
--- a/packages/p2p/src/components/my-profile/payment-methods/add-payment-method/select-payment-method.jsx
+++ b/packages/p2p/src/pages/my-profile/payment-methods/add-payment-method/select-payment-method.jsx
@@ -2,9 +2,10 @@ import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { Formik, Field } from 'formik';
 import { Autocomplete, Icon, Loading, Text } from '@deriv/components';
+import { isDesktop } from '@deriv/shared';
 import { useStores } from 'Stores';
 import { localize, Localize } from 'Components/i18next';
-import { isDesktop } from '@deriv/shared';
+import './select-payment-method.scss';
 
 const SelectPaymentMethod = () => {
     const { my_profile_store } = useStores();
@@ -22,7 +23,7 @@ const SelectPaymentMethod = () => {
     return (
         <Formik enableReinitialize initialValues={{}}>
             {() => (
-                <div className='add-payment-method-select'>
+                <div className='select-payment-method'>
                     <Field name='payment_method'>
                         {({ field }) => (
                             <Autocomplete
@@ -43,7 +44,7 @@ const SelectPaymentMethod = () => {
                             />
                         )}
                     </Field>
-                    <div className='add-payment-method-hint'>
+                    <div className='select-payment-method__hint'>
                         <Localize
                             i18n_default_text='<0>Don’t see your payment method?</0> <1>Add new.</1>'
                             components={[
diff --git a/packages/p2p/src/pages/my-profile/payment-methods/add-payment-method/select-payment-method.scss b/packages/p2p/src/pages/my-profile/payment-methods/add-payment-method/select-payment-method.scss
new file mode 100644
index 000000000000..91fa6be832b2
--- /dev/null
+++ b/packages/p2p/src/pages/my-profile/payment-methods/add-payment-method/select-payment-method.scss
@@ -0,0 +1,11 @@
+.select-payment-method {
+    height: 30vh;
+
+    @include mobile {
+        height: 100%;
+    }
+
+    &__hint {
+        padding: 0.2rem 0 0 1.6rem;
+    }
+}
diff --git a/packages/p2p/src/components/my-profile/payment-methods/index.js b/packages/p2p/src/pages/my-profile/payment-methods/index.js
similarity index 100%
rename from packages/p2p/src/components/my-profile/payment-methods/index.js
rename to packages/p2p/src/pages/my-profile/payment-methods/index.js
diff --git a/packages/p2p/src/components/my-profile/payment-methods/payment-method-card/index.js b/packages/p2p/src/pages/my-profile/payment-methods/payment-method-card/index.js
similarity index 100%
rename from packages/p2p/src/components/my-profile/payment-methods/payment-method-card/index.js
rename to packages/p2p/src/pages/my-profile/payment-methods/payment-method-card/index.js
diff --git a/packages/p2p/src/components/my-profile/payment-methods/payment-method-card/payment-method-card-menu.jsx b/packages/p2p/src/pages/my-profile/payment-methods/payment-method-card/payment-method-card-menu.jsx
similarity index 76%
rename from packages/p2p/src/components/my-profile/payment-methods/payment-method-card/payment-method-card-menu.jsx
rename to packages/p2p/src/pages/my-profile/payment-methods/payment-method-card/payment-method-card-menu.jsx
index 9cd1460b1fc4..29882f312bd1 100644
--- a/packages/p2p/src/components/my-profile/payment-methods/payment-method-card/payment-method-card-menu.jsx
+++ b/packages/p2p/src/pages/my-profile/payment-methods/payment-method-card/payment-method-card-menu.jsx
@@ -2,23 +2,23 @@ import React from 'react';
 import { Text } from '@deriv/components';
 import { Localize } from 'Components/i18next';
 import { useStores } from 'Stores';
+import './payment-method-card-menu.scss';
 
 const PaymentMethodCardMenu = ({ payment_method }) => {
     const { my_profile_store } = useStores();
 
     return (
-        <div className='payment-method-card__menu'>
-            <Text className='payment-method-card__menu--text' color='prominent' size='s'>
+        <div className='payment-method-card-menu'>
+            <Text className='payment-method-card-menu__text' color='prominent'>
                 <Localize i18n_default_text='Edit' />
             </Text>
             <Text
-                className='payment-method-card__menu--text'
+                className='payment-method-card-menu__text'
                 color='prominent'
                 onClick={() => {
                     my_profile_store.setPaymentMethodToDelete(payment_method);
                     my_profile_store.setIsConfirmDeleteModalOpen(true);
                 }}
-                size='s'
             >
                 <Localize i18n_default_text='Delete' />
             </Text>
diff --git a/packages/p2p/src/pages/my-profile/payment-methods/payment-method-card/payment-method-card-menu.scss b/packages/p2p/src/pages/my-profile/payment-methods/payment-method-card/payment-method-card-menu.scss
new file mode 100644
index 000000000000..829b1db3965d
--- /dev/null
+++ b/packages/p2p/src/pages/my-profile/payment-methods/payment-method-card/payment-method-card-menu.scss
@@ -0,0 +1,12 @@
+.payment-method-card-menu {
+    background-color: var(--general-main-1);
+    display: flex;
+    flex-direction: column;
+    height: 12.8rem;
+    width: 8rem;
+    z-index: 1000;
+
+    &__text {
+        cursor: pointer;
+    }
+}
diff --git a/packages/p2p/src/components/my-profile/payment-methods/payment-method-card/payment-method-card.jsx b/packages/p2p/src/pages/my-profile/payment-methods/payment-method-card/payment-method-card.jsx
similarity index 100%
rename from packages/p2p/src/components/my-profile/payment-methods/payment-method-card/payment-method-card.jsx
rename to packages/p2p/src/pages/my-profile/payment-methods/payment-method-card/payment-method-card.jsx
diff --git a/packages/p2p/src/components/my-profile/payment-methods/payment-method-card/payment-method-card.scss b/packages/p2p/src/pages/my-profile/payment-methods/payment-method-card/payment-method-card.scss
similarity index 89%
rename from packages/p2p/src/components/my-profile/payment-methods/payment-method-card/payment-method-card.scss
rename to packages/p2p/src/pages/my-profile/payment-methods/payment-method-card/payment-method-card.scss
index 0b5173f3eb0f..cea3a74bc24e 100644
--- a/packages/p2p/src/components/my-profile/payment-methods/payment-method-card/payment-method-card.scss
+++ b/packages/p2p/src/pages/my-profile/payment-methods/payment-method-card/payment-method-card.scss
@@ -4,8 +4,11 @@
     margin: 1.6rem 0;
     overflow-wrap: break-word;
 
-    .dc-dropdown__display {
-        border: unset;
+    @include mobile {
+        margin: 1rem;
+        min-height: 8.8rem;
+        min-width: 13.6rem;
+        padding-top: 0.8rem;
     }
 
     &--add {
@@ -53,13 +56,6 @@
         width: 13.6rem;
     }
 
-    @include mobile {
-        margin: 1rem;
-        min-height: 8.8rem;
-        min-width: 13.6rem;
-        padding-top: 0.8rem;
-    }
-
     &__ellipsis {
         cursor: pointer;
         height: 1rem;
@@ -99,17 +95,8 @@
         border-radius: 2px;
     }
 
-    &__menu {
-        background-color: var(--general-main-1);
-        display: flex;
-        flex-direction: column;
-        height: 12.8rem;
-        width: 8rem;
-        z-index: 1000;
-
-        &--text {
-            cursor: pointer;
-        }
+    .dc-dropdown__display {
+        border: unset;
     }
 
     .suffix-icon {
diff --git a/packages/p2p/src/components/my-profile/payment-methods/payment-methods-empty/index.js b/packages/p2p/src/pages/my-profile/payment-methods/payment-methods-empty/index.js
similarity index 100%
rename from packages/p2p/src/components/my-profile/payment-methods/payment-methods-empty/index.js
rename to packages/p2p/src/pages/my-profile/payment-methods/payment-methods-empty/index.js
diff --git a/packages/p2p/src/components/my-profile/payment-methods/payment-methods-empty/payment-methods-empty.jsx b/packages/p2p/src/pages/my-profile/payment-methods/payment-methods-empty/payment-methods-empty.jsx
similarity index 83%
rename from packages/p2p/src/components/my-profile/payment-methods/payment-methods-empty/payment-methods-empty.jsx
rename to packages/p2p/src/pages/my-profile/payment-methods/payment-methods-empty/payment-methods-empty.jsx
index e92c355e2c5a..ae717a3b1782 100644
--- a/packages/p2p/src/components/my-profile/payment-methods/payment-methods-empty/payment-methods-empty.jsx
+++ b/packages/p2p/src/pages/my-profile/payment-methods/payment-methods-empty/payment-methods-empty.jsx
@@ -13,14 +13,14 @@ const PaymentMethodsEmpty = () => {
             <DesktopWrapper>
                 <div className='payment-methods-empty'>
                     <Icon icon='IcPaymentMethodsWallet' height={159} width={256} />
-                    <Text className='payment-methods-empty--text' line_height='m' size='s' weight='bold'>
+                    <Text className='payment-methods-empty__text' weight='bold'>
                         <Localize i18n_default_text='You haven’t added any payment methods yet' />
                     </Text>
-                    <Text line_height='m' size='s'>
+                    <Text>
                         <Localize i18n_default_text='Hit the button below to add payment methods.' />
                     </Text>
                     <Button
-                        className='payment-methods-empty--button'
+                        className='payment-methods-empty__button'
                         has_effect
                         large
                         primary
@@ -40,18 +40,18 @@ const PaymentMethodsEmpty = () => {
                 >
                     <Icon
                         icon='IcPaymentMethodsWallet'
-                        className='payment-methods-empty--icon'
+                        className='payment-methods-empty__icon'
                         height={159}
                         width={256}
                     />
-                    <Text className='payment-methods-empty--text' line_height='m' size='s' weight='bold'>
+                    <Text className='payment-methods-empty__text' weight='bold'>
                         <Localize i18n_default_text='You haven’t added any payment methods yet' />
                     </Text>
-                    <Text line_height='m' size='s'>
+                    <Text>
                         <Localize i18n_default_text='Hit the button below to add payment methods.' />
                     </Text>
                     <Button
-                        className='payment-methods-empty--button'
+                        className='payment-methods-empty__button'
                         has_effect
                         large
                         primary
diff --git a/packages/p2p/src/components/my-profile/payment-methods/payment-methods-empty/payment-methods-empty.scss b/packages/p2p/src/pages/my-profile/payment-methods/payment-methods-empty/payment-methods-empty.scss
similarity index 82%
rename from packages/p2p/src/components/my-profile/payment-methods/payment-methods-empty/payment-methods-empty.scss
rename to packages/p2p/src/pages/my-profile/payment-methods/payment-methods-empty/payment-methods-empty.scss
index 5d98f621c9ba..d39461ab3a7b 100644
--- a/packages/p2p/src/components/my-profile/payment-methods/payment-methods-empty/payment-methods-empty.scss
+++ b/packages/p2p/src/pages/my-profile/payment-methods/payment-methods-empty/payment-methods-empty.scss
@@ -3,15 +3,15 @@
     display: flex;
     flex-direction: column;
 
-    &--button {
+    &__button {
         margin-top: 2.4rem;
     }
 
-    &--icon {
+    &__icon {
         margin: 11.2rem auto 0;
     }
 
-    &--text {
+    &__text {
         margin: 3.9rem 0 0.8rem;
     }
 }
diff --git a/packages/p2p/src/components/my-profile/payment-methods/payment-methods-list/edit-payment-method-form.jsx b/packages/p2p/src/pages/my-profile/payment-methods/payment-methods-list/edit-payment-method-form.jsx
similarity index 91%
rename from packages/p2p/src/components/my-profile/payment-methods/payment-methods-list/edit-payment-method-form.jsx
rename to packages/p2p/src/pages/my-profile/payment-methods/payment-methods-list/edit-payment-method-form.jsx
index 4e2d5665cef6..e4e380d457b8 100644
--- a/packages/p2p/src/components/my-profile/payment-methods/payment-methods-list/edit-payment-method-form.jsx
+++ b/packages/p2p/src/pages/my-profile/payment-methods/payment-methods-list/edit-payment-method-form.jsx
@@ -6,9 +6,10 @@ import { Button, DesktopWrapper, Input, Loading, Text } from '@deriv/components'
 import { isDesktop, isMobile } from '@deriv/shared';
 import { Localize, localize } from 'Components/i18next';
 import { useStores } from 'Stores';
-import PageReturn from 'Components/page-return/page-return.jsx';
+import PageReturn from 'Components/page-return';
 import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
 import ModalForm from 'Components/modal-manager/modal-form';
+import './edit-payment-method-form.scss';
 
 const EditPaymentMethodForm = () => {
     const { showModal } = useModalManagerContext();
@@ -57,8 +58,8 @@ const EditPaymentMethodForm = () => {
                                     page_title={localize('Edit payment method')}
                                 />
                             </DesktopWrapper>
-                            <Form className='add-payment-method-form__form'>
-                                <div className='add-payment-method-form__form-wrapper'>
+                            <Form className='edit-payment-method-form__form'>
+                                <div className='edit-payment-method-form__form-wrapper'>
                                     <Field name='choose_payment_method'>
                                         {({ field }) => (
                                             <Input
@@ -97,9 +98,9 @@ const EditPaymentMethodForm = () => {
                                                             }
                                                             label={current_field.display_name}
                                                             className={classNames({
-                                                                'add-payment-method-form__payment-method-field':
+                                                                'edit-payment-method-form__payment-method-field':
                                                                     !errors[payment_method_key]?.length,
-                                                                'add-payment-method-form__payment-method-field--text-area':
+                                                                'edit-payment-method-form__payment-method-field--text-area':
                                                                     payment_method_key === 'instructions',
                                                             })}
                                                             onChange={handleChange}
@@ -113,10 +114,10 @@ const EditPaymentMethodForm = () => {
                                     })}
                                 </div>
                                 <div
-                                    className={classNames('add-payment-method-form__buttons', {
-                                        'add-payment-method-form__buttons--separated-footer':
+                                    className={classNames('edit-payment-method-form__buttons', {
+                                        'edit-payment-method-form__buttons--separated-footer':
                                             general_store.active_index === 3 && isMobile(),
-                                        'add-payment-method-form__buttons--separated-footer-profile':
+                                        'edit-payment-method-form__buttons--separated-footer-profile':
                                             general_store.active_index === 3 && isDesktop(),
                                     })}
                                 >
@@ -138,7 +139,7 @@ const EditPaymentMethodForm = () => {
                                         <Localize i18n_default_text='Cancel' />
                                     </Button>
                                     <Button
-                                        className='add-payment-method-form__buttons--add'
+                                        className='edit-payment-method-form__buttons--add'
                                         primary
                                         large
                                         is_disabled={isSubmitting || !dirty || !!Object.keys(errors)?.length}
diff --git a/packages/p2p/src/pages/my-profile/payment-methods/payment-methods-list/edit-payment-method-form.scss b/packages/p2p/src/pages/my-profile/payment-methods/payment-methods-list/edit-payment-method-form.scss
new file mode 100644
index 000000000000..2533bb2d5c12
--- /dev/null
+++ b/packages/p2p/src/pages/my-profile/payment-methods/payment-methods-list/edit-payment-method-form.scss
@@ -0,0 +1,63 @@
+.edit-payment-method-form {
+    &__buttons {
+        display: flex;
+        flex-direction: row;
+        justify-content: end;
+
+        &--add {
+            margin-left: 0.8rem;
+        }
+
+        &--separated-footer {
+            border-top: 2px solid var(--general-section-1);
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-end;
+            margin-top: auto;
+            padding: 1.6rem 2.4rem;
+
+            &-profile {
+                padding: 0 2.4rem 2rem;
+                margin-bottom: 4rem;
+            }
+        }
+    }
+
+    &__form-wrapper {
+        padding: 1.4rem 2.4rem;
+
+        .dc-input--error {
+            margin-bottom: 6rem;
+        }
+    }
+
+    &__field {
+        -webkit-text-fill-color: var(--text-prominent) !important;
+    }
+
+    &__form {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+    }
+
+    &__payment-method-field {
+        margin: 3.8rem 0;
+
+        &--text-area {
+            height: auto;
+
+            & .dc-input {
+                &__container {
+                    height: 9.6rem;
+                }
+
+                &__field {
+                    height: 100% !important;
+                    padding-left: 0;
+                    padding-right: 0;
+                }
+            }
+        }
+    }
+}
diff --git a/packages/p2p/src/components/my-profile/payment-methods/payment-methods-list/index.js b/packages/p2p/src/pages/my-profile/payment-methods/payment-methods-list/index.js
similarity index 100%
rename from packages/p2p/src/components/my-profile/payment-methods/payment-methods-list/index.js
rename to packages/p2p/src/pages/my-profile/payment-methods/payment-methods-list/index.js
diff --git a/packages/p2p/src/components/my-profile/payment-methods/payment-methods-list/payment-methods-list.jsx b/packages/p2p/src/pages/my-profile/payment-methods/payment-methods-list/payment-methods-list.jsx
similarity index 100%
rename from packages/p2p/src/components/my-profile/payment-methods/payment-methods-list/payment-methods-list.jsx
rename to packages/p2p/src/pages/my-profile/payment-methods/payment-methods-list/payment-methods-list.jsx
diff --git a/packages/p2p/src/components/my-profile/payment-methods/payment-methods-list/payment-methods-list.scss b/packages/p2p/src/pages/my-profile/payment-methods/payment-methods-list/payment-methods-list.scss
similarity index 99%
rename from packages/p2p/src/components/my-profile/payment-methods/payment-methods-list/payment-methods-list.scss
rename to packages/p2p/src/pages/my-profile/payment-methods/payment-methods-list/payment-methods-list.scss
index 9158d9839839..2ab8fc70a0ee 100644
--- a/packages/p2p/src/components/my-profile/payment-methods/payment-methods-list/payment-methods-list.scss
+++ b/packages/p2p/src/pages/my-profile/payment-methods/payment-methods-list/payment-methods-list.scss
@@ -26,6 +26,7 @@
             padding: 1rem 2.4rem;
         }
     }
+
     &__button {
         margin: 0 0 2.4rem;
 
diff --git a/packages/p2p/src/components/my-profile/payment-methods/payment-methods.jsx b/packages/p2p/src/pages/my-profile/payment-methods/payment-methods.jsx
similarity index 100%
rename from packages/p2p/src/components/my-profile/payment-methods/payment-methods.jsx
rename to packages/p2p/src/pages/my-profile/payment-methods/payment-methods.jsx
diff --git a/packages/p2p/src/components/orders/__tests__/orders.spec.js b/packages/p2p/src/pages/orders/__tests__/orders.spec.js
similarity index 94%
rename from packages/p2p/src/components/orders/__tests__/orders.spec.js
rename to packages/p2p/src/pages/orders/__tests__/orders.spec.js
index a76c1aba3379..f6fa3044e29d 100644
--- a/packages/p2p/src/components/orders/__tests__/orders.spec.js
+++ b/packages/p2p/src/pages/orders/__tests__/orders.spec.js
@@ -30,7 +30,7 @@ jest.mock('@deriv/components', () => ({
     useSafeState: jest.fn().mockReturnValue([{}, jest.fn()]),
 }));
 
-jest.mock('Components/orders/order-table/order-table.jsx', () => jest.fn(() => <div>Order Table</div>));
+jest.mock('Pages/orders/order-table/order-table.jsx', () => jest.fn(() => <div>Order Table</div>));
 
 jest.mock('Components/order-details/order-details.jsx', () => jest.fn(() => <div>Order Details</div>));
 
diff --git a/packages/p2p/src/components/orders/chat/__tests__/chat-header.spec.tsx b/packages/p2p/src/pages/orders/chat/__tests__/chat-header.spec.tsx
similarity index 100%
rename from packages/p2p/src/components/orders/chat/__tests__/chat-header.spec.tsx
rename to packages/p2p/src/pages/orders/chat/__tests__/chat-header.spec.tsx
diff --git a/packages/p2p/src/components/orders/chat/__tests__/chat-messages.spec.jsx b/packages/p2p/src/pages/orders/chat/__tests__/chat-messages.spec.jsx
similarity index 97%
rename from packages/p2p/src/components/orders/chat/__tests__/chat-messages.spec.jsx
rename to packages/p2p/src/pages/orders/chat/__tests__/chat-messages.spec.jsx
index e7206576cc5c..7d829a0ed8c7 100644
--- a/packages/p2p/src/components/orders/chat/__tests__/chat-messages.spec.jsx
+++ b/packages/p2p/src/pages/orders/chat/__tests__/chat-messages.spec.jsx
@@ -41,6 +41,6 @@ describe('<ChatMessages />', () => {
             /Hello! This is where you can chat with the counterparty to confirm the order details. Note: In case of a dispute, we'll use this chat as a reference./
         );
         expect(bot_message).toBeInTheDocument();
-        expect(screen.getByTestId('dt_chat_message')).toHaveClass('order-chat__messages-item--admin');
+        expect(screen.getByTestId('dt_chat_message')).toHaveClass('chat-messages-item--admin');
     });
 });
diff --git a/packages/p2p/src/components/orders/chat/__tests__/chat.spec.tsx b/packages/p2p/src/pages/orders/chat/__tests__/chat.spec.tsx
similarity index 100%
rename from packages/p2p/src/components/orders/chat/__tests__/chat.spec.tsx
rename to packages/p2p/src/pages/orders/chat/__tests__/chat.spec.tsx
diff --git a/packages/p2p/src/components/orders/chat/chat-footer-icon.jsx b/packages/p2p/src/pages/orders/chat/chat-footer-icon.jsx
similarity index 68%
rename from packages/p2p/src/components/orders/chat/chat-footer-icon.jsx
rename to packages/p2p/src/pages/orders/chat/chat-footer-icon.jsx
index abcd8a326a6f..4296ebc12c23 100644
--- a/packages/p2p/src/components/orders/chat/chat-footer-icon.jsx
+++ b/packages/p2p/src/pages/orders/chat/chat-footer-icon.jsx
@@ -3,11 +3,7 @@ import { Icon } from '@deriv/components';
 import PropTypes from 'prop-types';
 
 const ChatFooterIcon = React.memo(({ should_show_attachment_icon }) => (
-    <Icon
-        className='order-chat__footer-icon'
-        icon={should_show_attachment_icon ? 'IcAttachment' : 'IcSendMessage'}
-        width={16}
-    />
+    <Icon icon={should_show_attachment_icon ? 'IcAttachment' : 'IcSendMessage'} width={16} />
 ));
 
 ChatFooterIcon.displayName = 'ChatFooterIcon';
diff --git a/packages/p2p/src/components/orders/chat/chat-footer.jsx b/packages/p2p/src/pages/orders/chat/chat-footer.jsx
similarity index 89%
rename from packages/p2p/src/components/orders/chat/chat-footer.jsx
rename to packages/p2p/src/pages/orders/chat/chat-footer.jsx
index bec8f1b93519..832955c32fd0 100644
--- a/packages/p2p/src/components/orders/chat/chat-footer.jsx
+++ b/packages/p2p/src/pages/orders/chat/chat-footer.jsx
@@ -5,9 +5,10 @@ import { isMobile } from '@deriv/shared';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react-lite';
 import { localize, Localize } from 'Components/i18next';
-import ChatFooterIcon from 'Components/orders/chat/chat-footer-icon.jsx';
+import ChatFooterIcon from 'Pages/orders/chat/chat-footer-icon.jsx';
 import { useStores } from 'Stores';
 import ChatMessage from 'Utils/chat-message';
+import './chat-footer.scss';
 
 const ChatFooter = observer(() => {
     const { order_store, sendbird_store } = useStores();
@@ -65,7 +66,7 @@ const ChatFooter = observer(() => {
 
     if (sendbird_store.is_chat_frozen || order_store.order_information.is_inactive_order) {
         return (
-            <Text align='center' className='order-chat__footer--frozen' color='prominent' line_height='s' size='xs'>
+            <Text align='center' className='chat-footer--frozen' color='prominent' line_height='s' size='xs'>
                 <Localize i18n_default_text='This conversation is closed.' />
             </Text>
         );
@@ -74,11 +75,11 @@ const ChatFooter = observer(() => {
     return (
         <React.Fragment>
             <div
-                className={classNames('order-chat__footer', {
-                    'order-chat__footer--empty': sendbird_store.chat_messages.length === 0,
+                className={classNames('chat-footer', {
+                    'chat-footer--empty': sendbird_store.chat_messages.length === 0,
                 })}
             >
-                <div className='order-chat__footer-input'>
+                <div className='chat-footer-input'>
                     <Input
                         has_character_counter
                         initial_character_count={character_count}
@@ -90,7 +91,7 @@ const ChatFooter = observer(() => {
                         rows={1}
                         trailing_icon={
                             <div
-                                className='order-chat__footer-icon-container'
+                                className='chat-footer-icon-container'
                                 onClick={
                                     should_show_attachment_icon ? () => file_input_ref.current.click() : sendMessage
                                 }
diff --git a/packages/p2p/src/components/orders/chat/chat-footer.scss b/packages/p2p/src/pages/orders/chat/chat-footer.scss
similarity index 97%
rename from packages/p2p/src/components/orders/chat/chat-footer.scss
rename to packages/p2p/src/pages/orders/chat/chat-footer.scss
index 42e6227f8e93..15ec597390b7 100644
--- a/packages/p2p/src/components/orders/chat/chat-footer.scss
+++ b/packages/p2p/src/pages/orders/chat/chat-footer.scss
@@ -1,4 +1,4 @@
-&__footer {
+.chat-footer {
     background-color: var(--general-main-1);
     border-top: 2px solid var(--general-section-1);
     max-height: 33.333%;
@@ -36,7 +36,7 @@
     &-input {
         position: relative;
         height: calc(100% - 1.6rem - 2.6rem);
-        margin: 1.6rem 2.4rem 0.8rem;
+        margin: 1.6rem 2.4rem 2.8rem;
     }
 
     .dc-input {
diff --git a/packages/p2p/src/components/orders/chat/chat-header.jsx b/packages/p2p/src/pages/orders/chat/chat-header.jsx
similarity index 71%
rename from packages/p2p/src/components/orders/chat/chat-header.jsx
rename to packages/p2p/src/pages/orders/chat/chat-header.jsx
index d6393b4303d7..8be3c30aca2f 100644
--- a/packages/p2p/src/components/orders/chat/chat-header.jsx
+++ b/packages/p2p/src/pages/orders/chat/chat-header.jsx
@@ -2,9 +2,10 @@ import React from 'react';
 import { Text } from '@deriv/components';
 import { isMobile } from '@deriv/shared';
 import { observer } from 'mobx-react-lite';
-import { useStores } from 'Stores';
 import { OnlineStatusAvatar } from 'Components/online-status';
+import { useStores } from 'Stores';
 import { getLastOnlineLabel } from 'Utils/adverts';
+import './chat-header.scss';
 
 const ChatHeaderBody = observer(() => {
     const { order_store } = useStores();
@@ -13,25 +14,17 @@ const ChatHeaderBody = observer(() => {
 
     return (
         <React.Fragment>
-            <div className='order-chat__header-icon'>
+            <div className='chat-header-icon'>
                 <OnlineStatusAvatar is_online={is_online} nickname={name} size={40} text_size='s' />
             </div>
-            <div className='order-chat__header-user'>
-                <Text
-                    as='p'
-                    className='order-chat__header-user-name'
-                    color='prominent'
-                    line_height='m'
-                    size='s'
-                    weight='bold'
-                >
+            <div className='chat-header-user'>
+                <Text as='p' className='chat-header-user-name' color='prominent' weight='bold'>
                     {name}
                 </Text>
                 <Text
                     as='p'
-                    className='order-chat__header-user-timestamp'
+                    className='chat-header-user-timestamp'
                     color='less-prominent'
-                    line_height='m'
                     size={isMobile() ? 'xxs' : 'xs'}
                 >
                     {getLastOnlineLabel(is_online, last_online_time)}
@@ -47,7 +40,7 @@ const ChatHeader = () => {
     }
 
     return (
-        <div className='order-chat__header'>
+        <div className='chat-header'>
             <ChatHeaderBody />
         </div>
     );
diff --git a/packages/p2p/src/components/orders/chat/chat-header.scss b/packages/p2p/src/pages/orders/chat/chat-header.scss
similarity index 98%
rename from packages/p2p/src/components/orders/chat/chat-header.scss
rename to packages/p2p/src/pages/orders/chat/chat-header.scss
index 1e07d198cca4..00995fff6c55 100644
--- a/packages/p2p/src/components/orders/chat/chat-header.scss
+++ b/packages/p2p/src/pages/orders/chat/chat-header.scss
@@ -1,4 +1,4 @@
-&__header {
+.chat-header {
     background-color: var(--general-main-1);
     border-bottom: 1px solid var(--general-section-1);
     display: flex;
diff --git a/packages/p2p/src/components/orders/chat/chat-message-receipt.jsx b/packages/p2p/src/pages/orders/chat/chat-message-receipt.jsx
similarity index 90%
rename from packages/p2p/src/components/orders/chat/chat-message-receipt.jsx
rename to packages/p2p/src/pages/orders/chat/chat-message-receipt.jsx
index 59b195c28d5c..9fd72a357904 100644
--- a/packages/p2p/src/components/orders/chat/chat-message-receipt.jsx
+++ b/packages/p2p/src/pages/orders/chat/chat-message-receipt.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Icon } from '@deriv/components';
 import ChatMessage from 'Utils/chat-message';
+import './chat-message-receipt.scss';
 
 const ChatMessageReceipt = ({ chat_channel, message, sendbird_user_id }) => {
     let icon_name;
@@ -21,7 +22,7 @@ const ChatMessageReceipt = ({ chat_channel, message, sendbird_user_id }) => {
         }
     }
 
-    return <Icon className='order-chat__messages-item-timestamp-receipt' icon={icon_name} size={16} />;
+    return <Icon className='chat-message-receipt' icon={icon_name} size={16} />;
 };
 
 ChatMessageReceipt.propTypes = {
diff --git a/packages/p2p/src/pages/orders/chat/chat-message-receipt.scss b/packages/p2p/src/pages/orders/chat/chat-message-receipt.scss
new file mode 100644
index 000000000000..5783011415fe
--- /dev/null
+++ b/packages/p2p/src/pages/orders/chat/chat-message-receipt.scss
@@ -0,0 +1,3 @@
+.chat-message-receipt {
+    margin-left: 0.4rem;
+}
diff --git a/packages/p2p/src/components/orders/chat/chat-message-text.jsx b/packages/p2p/src/pages/orders/chat/chat-message-text.jsx
similarity index 89%
rename from packages/p2p/src/components/orders/chat/chat-message-text.jsx
rename to packages/p2p/src/pages/orders/chat/chat-message-text.jsx
index 3f1af678f6b7..d95b96b77e6a 100644
--- a/packages/p2p/src/components/orders/chat/chat-message-text.jsx
+++ b/packages/p2p/src/pages/orders/chat/chat-message-text.jsx
@@ -2,9 +2,10 @@ import React from 'react';
 import { Text } from '@deriv/components';
 import PropTypes from 'prop-types';
 import ChatMessage from 'Utils/chat-message';
+import './chat-message-text.scss';
 
 const ChatMessageText = React.memo(({ children, color, type = '' }) => (
-    <div className={`order-chat__messages-item-message`}>
+    <div className={'chat-message-text'}>
         <Text
             as='p'
             color={color}
diff --git a/packages/p2p/src/pages/orders/chat/chat-message-text.scss b/packages/p2p/src/pages/orders/chat/chat-message-text.scss
new file mode 100644
index 000000000000..dcb08d592913
--- /dev/null
+++ b/packages/p2p/src/pages/orders/chat/chat-message-text.scss
@@ -0,0 +1,11 @@
+.chat-message-text {
+    border-radius: 1.6rem;
+    max-width: 100%;
+    padding: 0.8rem 1.6rem;
+    width: fit-content;
+    word-break: break-word;
+
+    > p {
+        white-space: pre-wrap;
+    }
+}
diff --git a/packages/p2p/src/components/orders/chat/chat-messages.jsx b/packages/p2p/src/pages/orders/chat/chat-messages.jsx
similarity index 88%
rename from packages/p2p/src/components/orders/chat/chat-messages.jsx
rename to packages/p2p/src/pages/orders/chat/chat-messages.jsx
index 0800450578ec..c0593efc5f21 100644
--- a/packages/p2p/src/components/orders/chat/chat-messages.jsx
+++ b/packages/p2p/src/pages/orders/chat/chat-messages.jsx
@@ -4,11 +4,12 @@ import PropTypes from 'prop-types';
 import { Text, ThemedScrollbars, Icon } from '@deriv/components';
 import { formatMilliseconds } from '@deriv/shared';
 import { observer } from 'mobx-react-lite';
-import ChatMessageReceipt from 'Components/orders/chat/chat-message-receipt.jsx';
-import ChatMessageText from 'Components/orders/chat/chat-message-text.jsx';
+import ChatMessageReceipt from 'Pages/orders/chat/chat-message-receipt.jsx';
+import ChatMessageText from 'Pages/orders/chat/chat-message-text.jsx';
 import { useStores } from 'Stores';
 import ChatMessage from 'Utils/chat-message';
 import { convertToMB, isImageType, isPDFType } from 'Utils/file-uploader';
+import './chat-messages.scss';
 
 const ChatMessages = observer(() => {
     const { sendbird_store } = useStores();
@@ -38,14 +39,14 @@ const ChatMessages = observer(() => {
             const { file_type, url, size, name } = chat_message ?? {};
             if (isImageType(file_type))
                 return (
-                    <a className='order-chat__messages-item-image' href={url} rel='noopener noreferrer' target='_blank'>
+                    <a className='chat-messages-item-image' href={url} rel='noopener noreferrer' target='_blank'>
                         <img src={url} onLoad={onImageLoad} />
                     </a>
                 );
             else if (isPDFType(file_type)) {
                 return (
                     <ChatMessageText color={message_color}>
-                        <div className='order-chat__messages-item-pdf'>
+                        <div className='chat-messages-item-pdf'>
                             <Icon icon='IcPdf' data_testid='dt_pdf_icon' size={20} />
                             <a href={url} rel='noopener noreferrer' target='_blank'>
                                 {name}
@@ -57,7 +58,7 @@ const ChatMessages = observer(() => {
             }
             return (
                 <ChatMessageText color={message_color}>
-                    <a className='order-chat__messages-item-file' href={url} rel='noopener noreferrer' target='_blank'>
+                    <a className='chat-messages-item-file' href={url} rel='noopener noreferrer' target='_blank'>
                         {name}
                     </a>
                 </ChatMessageText>
@@ -67,7 +68,7 @@ const ChatMessages = observer(() => {
         return (
             <ThemedScrollbars
                 autohide
-                className='order-chat__messages'
+                className='chat-messages'
                 height='unset'
                 refSetter={scroll_ref}
                 onScroll={event => sendbird_store.onMessagesScroll(event)}
@@ -84,7 +85,7 @@ const ChatMessages = observer(() => {
                     return (
                         <React.Fragment key={chat_message.id}>
                             {should_render_date && (
-                                <div className='order-chat__messages-date'>
+                                <div className='chat-messages-date'>
                                     <Text align='center' color='less-prominent' lh='m' size='xs' weight='bold'>
                                         {message_date}
                                     </Text>
@@ -92,8 +93,8 @@ const ChatMessages = observer(() => {
                             )}
                             <div
                                 className={classNames(
-                                    'order-chat__messages-item',
-                                    `order-chat__messages-item--${
+                                    'chat-messages-item',
+                                    `chat-messages-item--${
                                         is_admin_message ? 'admin' : is_my_message ? 'outgoing' : 'incoming'
                                     }`
                                 )}
@@ -128,7 +129,7 @@ const ChatMessages = observer(() => {
         );
     }
 
-    return <div className='order-chat__messages' />;
+    return <div className='chat-messages' />;
 });
 
 ChatMessages.displayName = 'ChatMessages';
diff --git a/packages/p2p/src/components/orders/chat/chat-messages.scss b/packages/p2p/src/pages/orders/chat/chat-messages.scss
similarity index 80%
rename from packages/p2p/src/components/orders/chat/chat-messages.scss
rename to packages/p2p/src/pages/orders/chat/chat-messages.scss
index 7ec289910d80..5310785b3d54 100644
--- a/packages/p2p/src/components/orders/chat/chat-messages.scss
+++ b/packages/p2p/src/pages/orders/chat/chat-messages.scss
@@ -1,4 +1,4 @@
-&__messages {
+.chat-messages {
     background-color: var(--general-main-1);
     margin-top: auto;
     margin-right: 0.8rem;
@@ -30,17 +30,6 @@
                 }
             }
         }
-        &-message {
-            border-radius: 1.6rem;
-            max-width: 100%;
-            padding: 0.8rem;
-            width: fit-content;
-            word-break: break-word;
-
-            > p {
-                white-space: pre-wrap;
-            }
-        }
         &-pdf {
             background-color: var(--general-main-1);
             border-radius: 0.8rem;
@@ -58,16 +47,12 @@
             align-items: center;
             display: flex;
             margin-top: 0.4rem;
-
-            &-receipt {
-                margin-left: 0.4rem;
-            }
         }
 
         &--incoming {
             align-items: flex-start;
 
-            .order-chat__messages-item-message {
+            .chat-message-text {
                 background-color: var(--general-active);
                 border-bottom-left-radius: 0;
             }
@@ -75,7 +60,7 @@
         &--outgoing {
             align-items: flex-end;
 
-            .order-chat__messages-item-message {
+            .chat-message-text {
                 background-color: var(--brand-secondary);
                 border-bottom-right-radius: 0;
             }
diff --git a/packages/p2p/src/components/orders/chat/chat-wrapper.jsx b/packages/p2p/src/pages/orders/chat/chat-wrapper.jsx
similarity index 92%
rename from packages/p2p/src/components/orders/chat/chat-wrapper.jsx
rename to packages/p2p/src/pages/orders/chat/chat-wrapper.jsx
index 44103879e7fb..5088377a2a3e 100644
--- a/packages/p2p/src/components/orders/chat/chat-wrapper.jsx
+++ b/packages/p2p/src/pages/orders/chat/chat-wrapper.jsx
@@ -11,11 +11,11 @@ const ChatWrapper = observer(({ children, is_modal_open }) => {
 
     return isMobile() ? (
         <MobileFullPageModal
-            className='order-chat'
+            className='chat'
             height_offset='80px'
             is_flex
             is_modal_open={is_modal_open}
-            page_header_className='order-chat__header'
+            page_header_className='chat__header'
             pageHeaderReturnFn={() => {
                 sendbird_store.setShouldShowChatModal(false);
                 sendbird_store.setShouldShowChatOnOrders(false);
diff --git a/packages/p2p/src/components/orders/chat/chat.jsx b/packages/p2p/src/pages/orders/chat/chat.jsx
similarity index 75%
rename from packages/p2p/src/components/orders/chat/chat.jsx
rename to packages/p2p/src/pages/orders/chat/chat.jsx
index c908cdd16c18..2e59a838a4d8 100644
--- a/packages/p2p/src/components/orders/chat/chat.jsx
+++ b/packages/p2p/src/pages/orders/chat/chat.jsx
@@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
 import { Button, Loading, Text } from '@deriv/components';
 import { observer } from 'mobx-react-lite';
 import { Localize, localize } from 'Components/i18next';
-import ChatHeader from 'Components/orders/chat/chat-header.jsx';
-import ChatMessages from 'Components/orders/chat/chat-messages.jsx';
-import ChatFooter from 'Components/orders/chat/chat-footer.jsx';
-import ChatWrapper from 'Components/orders/chat/chat-wrapper.jsx';
+import ChatHeader from 'Pages/orders/chat/chat-header.jsx';
+import ChatMessages from 'Pages/orders/chat/chat-messages.jsx';
+import ChatFooter from 'Pages/orders/chat/chat-footer.jsx';
+import ChatWrapper from 'Pages/orders/chat/chat-wrapper.jsx';
 import { useStores } from 'Stores';
-import 'Components/orders/chat/chat.scss';
+import 'Pages/orders/chat/chat.scss';
 
 const Chat = observer(() => {
     const { order_store, sendbird_store } = useStores();
@@ -23,7 +23,7 @@ const Chat = observer(() => {
 
     if (sendbird_store.is_chat_loading) {
         return (
-            <div className='order-chat'>
+            <div className='chat'>
                 <Loading is_fullscreen={false} />;
             </div>
         );
@@ -31,12 +31,12 @@ const Chat = observer(() => {
 
     if (sendbird_store.has_chat_error) {
         return (
-            <div className='order-chat'>
-                <div className='order-chat__error'>
-                    <Text as='p' color='prominent' line_height='m' size='s'>
+            <div className='chat'>
+                <div className='chat__error'>
+                    <Text as='p' color='prominent'>
                         <Localize i18n_default_text='Oops, something went wrong' />
                     </Text>
-                    <div className='order-chat__error-retry'>
+                    <div className='chat__error-retry'>
                         <Button
                             has_effect
                             large
@@ -57,7 +57,7 @@ const Chat = observer(() => {
 
     return (
         <ChatWrapper is_modal_open={sendbird_store.should_show_chat_modal}>
-            <div className='order-chat'>
+            <div className='chat'>
                 <ChatHeader />
                 <ChatMessages />
                 <ChatFooter />
diff --git a/packages/p2p/src/components/orders/chat/chat.scss b/packages/p2p/src/pages/orders/chat/chat.scss
similarity index 83%
rename from packages/p2p/src/components/orders/chat/chat.scss
rename to packages/p2p/src/pages/orders/chat/chat.scss
index 3825b43ad172..dba4f9e96d48 100644
--- a/packages/p2p/src/components/orders/chat/chat.scss
+++ b/packages/p2p/src/pages/orders/chat/chat.scss
@@ -1,4 +1,4 @@
-.order-chat {
+.chat {
     background-color: var(--general-main-1);
     display: flex;
     flex-direction: column;
@@ -29,8 +29,4 @@
             margin-top: 1.6rem;
         }
     }
-
-    @import './chat-header.scss';
-    @import './chat-messages.scss';
-    @import './chat-footer.scss';
 }
diff --git a/packages/p2p/src/components/orders/index.js b/packages/p2p/src/pages/orders/index.js
similarity index 100%
rename from packages/p2p/src/components/orders/index.js
rename to packages/p2p/src/pages/orders/index.js
diff --git a/packages/p2p/src/components/orders/order-table/__test__/order-table.spec.js b/packages/p2p/src/pages/orders/order-table/__test__/order-table.spec.js
similarity index 78%
rename from packages/p2p/src/components/orders/order-table/__test__/order-table.spec.js
rename to packages/p2p/src/pages/orders/order-table/__test__/order-table.spec.js
index 6b00e30f5822..80d187122cdc 100644
--- a/packages/p2p/src/components/orders/order-table/__test__/order-table.spec.js
+++ b/packages/p2p/src/pages/orders/order-table/__test__/order-table.spec.js
@@ -13,8 +13,8 @@ jest.mock('Stores', () => ({
     }),
 }));
 
-jest.mock('Components/misc/toggle-container.jsx', () => jest.fn(() => <div>Toggle</div>));
-jest.mock('Components/orders/order-table/order-table-content.jsx', () => jest.fn(() => <div>Order Table Content</div>));
+jest.mock('Components/toggle-container/toggle-container', () => jest.fn(() => <div>Toggle</div>));
+jest.mock('Pages/orders/order-table/order-table-content.jsx', () => jest.fn(() => <div>Order Table Content</div>));
 
 jest.mock('@deriv/components', () => ({
     ...jest.requireActual('@deriv/components'),
diff --git a/packages/p2p/src/components/orders/order-table/order-table-content.jsx b/packages/p2p/src/pages/orders/order-table/order-table-content.jsx
similarity index 88%
rename from packages/p2p/src/components/orders/order-table/order-table-content.jsx
rename to packages/p2p/src/pages/orders/order-table/order-table-content.jsx
index 261c0dc7ee98..4b4d84834b38 100644
--- a/packages/p2p/src/components/orders/order-table/order-table-content.jsx
+++ b/packages/p2p/src/pages/orders/order-table/order-table-content.jsx
@@ -6,10 +6,10 @@ import { reaction } from 'mobx';
 import { isMobile, routes } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
 import { Localize, localize } from 'Components/i18next';
-import { TableError } from 'Components/table/table-error.jsx';
-import Empty from 'Components/empty/empty.jsx';
-import OrderRow from 'Components/orders/order-table/order-table-row.jsx';
-import OrderTableHeader from 'Components/orders/order-table/order-table-header.jsx';
+import TableError from 'Components/section-error';
+import P2pEmpty from 'Components/p2p-empty';
+import OrderRow from 'Pages/orders/order-table/order-table-row.jsx';
+import OrderTableHeader from 'Pages/orders/order-table/order-table-header.jsx';
 import { useStores } from 'Stores';
 import { createExtendedOrderDetails } from 'Utils/orders';
 
@@ -46,7 +46,7 @@ const OrderTableContent = () => {
     }
 
     if (order_store.api_error_message) {
-        return <TableError message={order_store.api_error_message} />;
+        return <TableError message={order_store.api_error_message} size='xs' className='section-error__table' />;
     }
 
     if (order_store.orders.length) {
@@ -72,7 +72,7 @@ const OrderTableContent = () => {
     }
 
     return (
-        <Empty has_tabs icon='IcNoOrder' title={localize('You have no orders.')}>
+        <P2pEmpty has_tabs icon='IcNoOrder' title={localize('You have no orders.')}>
             {general_store.is_active_tab && (
                 <Button
                     primary
@@ -86,7 +86,7 @@ const OrderTableContent = () => {
                     <Localize i18n_default_text='Buy/Sell' />
                 </Button>
             )}
-        </Empty>
+        </P2pEmpty>
     );
 };
 
diff --git a/packages/p2p/src/components/orders/order-table/order-table-header.jsx b/packages/p2p/src/pages/orders/order-table/order-table-header.jsx
similarity index 79%
rename from packages/p2p/src/components/orders/order-table/order-table-header.jsx
rename to packages/p2p/src/pages/orders/order-table/order-table-header.jsx
index 3f62f84326b4..86d0304327a2 100644
--- a/packages/p2p/src/components/orders/order-table/order-table-header.jsx
+++ b/packages/p2p/src/pages/orders/order-table/order-table-header.jsx
@@ -5,16 +5,17 @@ import { Table } from '@deriv/components';
 import { observer } from 'mobx-react-lite';
 import { localize } from 'Components/i18next';
 import { useStores } from 'Stores';
+import './order-table-header.scss';
 
 const OrderTableHeader = observer(({ children }) => {
     const { general_store } = useStores();
 
     return (
-        <Table className='orders__table'>
+        <Table className='order-table-header'>
             <Table.Header>
                 <Table.Row
-                    className={classnames('orders__table-grid', {
-                        'orders__table-grid--active': general_store.is_active_tab,
+                    className={classnames('order-table-grid', {
+                        'order-table-grid--active': general_store.is_active_tab,
                     })}
                 >
                     <Table.Head>{localize('Order')}</Table.Head>
@@ -26,7 +27,7 @@ const OrderTableHeader = observer(({ children }) => {
                     {general_store.order_table_type === 'active' && <Table.Head>{localize('Time')}</Table.Head>}
                 </Table.Row>
             </Table.Header>
-            <Table.Body className='orders__table-body'>{children}</Table.Body>
+            <Table.Body className='order-table-body'>{children}</Table.Body>
         </Table>
     );
 });
diff --git a/packages/p2p/src/pages/orders/order-table/order-table-header.scss b/packages/p2p/src/pages/orders/order-table/order-table-header.scss
new file mode 100644
index 000000000000..3bb603be3e70
--- /dev/null
+++ b/packages/p2p/src/pages/orders/order-table/order-table-header.scss
@@ -0,0 +1,5 @@
+.order-table-header {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+}
diff --git a/packages/p2p/src/components/orders/order-table/order-table-row.jsx b/packages/p2p/src/pages/orders/order-table/order-table-row.jsx
similarity index 88%
rename from packages/p2p/src/components/orders/order-table/order-table-row.jsx
rename to packages/p2p/src/pages/orders/order-table/order-table-row.jsx
index 4fcf93f66ae8..b28129c96be9 100644
--- a/packages/p2p/src/components/orders/order-table/order-table-row.jsx
+++ b/packages/p2p/src/pages/orders/order-table/order-table-row.jsx
@@ -12,6 +12,7 @@ import { formatMoney, routes } from '@deriv/shared';
 import { localize } from 'Components/i18next';
 import RatingCellRenderer from 'Components/rating-cell-renderer';
 import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
+import './order-table-row.scss';
 
 const Title = ({ send_amount, currency, order_purchase_datetime, order_type }) => {
     return (
@@ -150,9 +151,9 @@ const OrderRow = ({ row: order }) => {
             <div onClick={onRowClick}>
                 <DesktopWrapper>
                     <Table.Row
-                        className={classNames('orders__table-row orders__table-grid', {
-                            'orders__table-grid--active': general_store.is_active_tab,
-                            'orders__table-row--attention': !isOrderSeen(id),
+                        className={classNames('order-table-row order-table-grid', {
+                            'order-table-grid--active': general_store.is_active_tab,
+                            'order-table-row--attention': !isOrderSeen(id),
                         })}
                     >
                         <Table.Cell>{order_type}</Table.Cell>
@@ -163,11 +164,11 @@ const OrderRow = ({ row: order }) => {
                                 as='div'
                                 size='xxs' // TODO: Change the font-size once design is ready
                                 weight='bold'
-                                className={classNames('orders__table-status', {
-                                    'orders__table-status--danger': should_highlight_danger,
-                                    'orders__table-status--alert': should_highlight_alert,
-                                    'orders__table-status--success': should_highlight_success,
-                                    'orders__table-status--disabled': should_highlight_disabled,
+                                className={classNames('order-table-status', {
+                                    'order-table-status--danger': should_highlight_danger,
+                                    'order-table-status--alert': should_highlight_alert,
+                                    'order-table-status--success': should_highlight_success,
+                                    'order-table-status--disabled': should_highlight_disabled,
                                 })}
                             >
                                 {status_string}
@@ -177,7 +178,11 @@ const OrderRow = ({ row: order }) => {
                         <Table.Cell>{is_buy_order_for_user ? offer_amount : transaction_amount}</Table.Cell>
                         <Table.Cell>
                             {general_store.is_active_tab ? (
-                                <div className='orders__table-time'>{remaining_time}</div>
+                                <div className='order-table-row-time'>
+                                    <Text align='center' size='xxs'>
+                                        {remaining_time}
+                                    </Text>
+                                </div>
                             ) : (
                                 is_completed_order && (
                                     <RatingCellRenderer
@@ -202,7 +207,7 @@ const OrderRow = ({ row: order }) => {
                     >
                         <Table.Cell
                             className={classNames('orders__mobile-header', {
-                                'orders__table-grid--active': general_store.is_active_tab,
+                                'order-table-grid--active': general_store.is_active_tab,
                             })}
                         >
                             <Text
@@ -211,10 +216,10 @@ const OrderRow = ({ row: order }) => {
                                 size='xxs' // TODO: Change the font-size once design is ready
                                 weight='bold'
                                 className={classNames('orders__mobile-status', {
-                                    'orders__table-status--danger': should_highlight_danger,
-                                    'orders__table-status--alert': should_highlight_alert,
-                                    'orders__table-status--success': should_highlight_success,
-                                    'orders__table-status--disabled': should_highlight_disabled,
+                                    'order-table-status--danger': should_highlight_danger,
+                                    'order-table-status--alert': should_highlight_alert,
+                                    'order-table-status--success': should_highlight_success,
+                                    'order-table-status--disabled': should_highlight_disabled,
                                 })}
                             >
                                 {status_string}
diff --git a/packages/p2p/src/pages/orders/order-table/order-table-row.scss b/packages/p2p/src/pages/orders/order-table/order-table-row.scss
new file mode 100644
index 000000000000..90ca205352c7
--- /dev/null
+++ b/packages/p2p/src/pages/orders/order-table/order-table-row.scss
@@ -0,0 +1,26 @@
+.order-table-row {
+    padding: 2.4rem;
+    cursor: pointer;
+
+    &-time {
+        display: flex;
+        justify-content: center;
+        border: solid 1px var(--border-normal);
+        border-radius: 16px;
+        width: 78px;
+        height: 24px;
+        padding: 2px;
+        letter-spacing: 1px;
+    }
+
+    &--attention {
+        background: var(--button-tertiary-hover);
+    }
+    &:not(.order-table-row--header) {
+        cursor: pointer;
+
+        &:hover {
+            background: var(--general-hover);
+        }
+    }
+}
diff --git a/packages/p2p/src/components/orders/order-table/order-table.jsx b/packages/p2p/src/pages/orders/order-table/order-table.jsx
similarity index 86%
rename from packages/p2p/src/components/orders/order-table/order-table.jsx
rename to packages/p2p/src/pages/orders/order-table/order-table.jsx
index 41907000c542..4b8d7248fd88 100644
--- a/packages/p2p/src/components/orders/order-table/order-table.jsx
+++ b/packages/p2p/src/pages/orders/order-table/order-table.jsx
@@ -3,10 +3,11 @@ import PropTypes from 'prop-types';
 import { ButtonToggle } from '@deriv/components';
 import { observer } from 'mobx-react-lite';
 import { localize } from 'Components/i18next';
-import ToggleContainer from 'Components/misc/toggle-container.jsx';
+import ToggleContainer from 'Components/toggle-container';
 import { order_list } from 'Constants/order-list';
 import { useStores } from 'Stores';
 import OrderTableContent from './order-table-content.jsx';
+import './order-table.scss';
 
 const OrderTable = ({ showDetails }) => {
     const { general_store } = useStores();
@@ -27,12 +28,12 @@ const OrderTable = ({ showDetails }) => {
     const is_active_tab = general_store.order_table_type === order_list.ACTIVE;
     return (
         <React.Fragment>
-            <div className='orders-tab'>
-                <div className='orders-tab__header '>
+            <div className='order-table'>
+                <div className='order-table__toggle-wrapper '>
                     <ToggleContainer>
                         <ButtonToggle
                             buttons_arr={orders_list_filters}
-                            className='orders-tab__header-filter'
+                            className='order-table__toggle-wrapper-filter'
                             is_animated
                             name='filter'
                             onChange={({ target: { value } }) => general_store.setOrderTableType(value)}
diff --git a/packages/p2p/src/pages/orders/order-table/order-table.scss b/packages/p2p/src/pages/orders/order-table/order-table.scss
new file mode 100644
index 000000000000..f9a214f8d07d
--- /dev/null
+++ b/packages/p2p/src/pages/orders/order-table/order-table.scss
@@ -0,0 +1,77 @@
+.order-table {
+    @include mobile {
+        height: 7.7rem;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        border-bottom: 1px solid var(--general-section-1);
+    }
+
+    &__toggle-wrapper {
+        width: fit-content;
+        border-radius: 4px;
+
+        &-filter {
+            .dc-button-menu__wrapper {
+                button.dc-btn {
+                    height: 3.6rem;
+                    min-width: 12rem !important;
+                    white-space: nowrap;
+                    padding: 0.8rem 1.8rem;
+                }
+            }
+        }
+        @include mobile {
+            align-self: center;
+        }
+    }
+
+    &-body {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+    }
+
+    &-grid {
+        // Sizes are different for inactive due to timeout being full time string.
+        grid-template-columns: 1fr 1.5fr 2fr 3fr 1.5fr 1.5fr 2fr;
+
+        &--active {
+            grid-template-columns: 1fr 1.5fr 2fr 3fr 1.5fr 1.5fr 1.5fr;
+            margin-right: 0.5rem;
+        }
+    }
+    &-status {
+        border-radius: 16px;
+        padding: 0.2rem 1.6rem;
+        white-space: nowrap;
+
+        &--danger {
+            color: var(--brand-red-coral);
+            background-color: $color-status-error;
+        }
+        &--alert {
+            color: var(--status-warning);
+            background-color: var(--status-alert-background);
+        }
+        &--success {
+            color: var(--text-profit-success);
+            background-color: $color-status-announcement;
+        }
+        &--disabled {
+            color: var(--text-less-prominent);
+            background-color: rgba(153, 153, 153, 0.16);
+        }
+        &--info {
+            color: var(--status-info);
+            background-color: rgba(28, 90, 227, 0.16);
+        }
+    }
+
+    .dc-table-header {
+        > .order-table-grid {
+            padding: 0 2.4rem;
+        }
+    }
+}
diff --git a/packages/p2p/src/components/orders/orders.jsx b/packages/p2p/src/pages/orders/orders.jsx
similarity index 98%
rename from packages/p2p/src/components/orders/orders.jsx
rename to packages/p2p/src/pages/orders/orders.jsx
index 8844dbbe7d0f..0fbbef6d0c84 100644
--- a/packages/p2p/src/components/orders/orders.jsx
+++ b/packages/p2p/src/pages/orders/orders.jsx
@@ -5,7 +5,6 @@ import { observer } from '@deriv/stores';
 import OrderDetails from 'Components/order-details/order-details.jsx';
 import { useStores } from 'Stores';
 import OrderTable from './order-table/order-table.jsx';
-import './orders.scss';
 
 const Orders = observer(() => {
     const { order_store, general_store } = useStores();
diff --git a/packages/p2p/src/pages/orders/orders.scss b/packages/p2p/src/pages/orders/orders.scss
new file mode 100644
index 000000000000..75ff1242e103
--- /dev/null
+++ b/packages/p2p/src/pages/orders/orders.scss
@@ -0,0 +1,107 @@
+.orders {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+
+    @include mobile {
+        overflow: hidden;
+    }
+
+    & .initial-loader {
+        @include mobile {
+            height: 80%;
+        }
+    }
+    & .p2p-empty {
+        &__button {
+            @include mobile {
+                width: 100%;
+                padding: 1rem;
+            }
+        }
+        @include mobile {
+            padding: 4rem 1.6rem;
+            margin: 0rem;
+        }
+    }
+
+    &__data-list {
+        flex: 1;
+
+        &__data-list-body {
+            flex: 1;
+        }
+
+        .data-list__body-wrapper {
+            flex: 1;
+        }
+    }
+
+    &__mobile {
+        display: grid;
+        grid-template-areas: ('header header-right' 'title title');
+        padding: 1.6rem;
+        border-bottom: 1px solid var(--general-section-1);
+
+        &--attention {
+            background: var(--button-tertiary-hover);
+            border-bottom: 2px solid var(--general-section-1);
+        }
+
+        &-highlight-danger {
+            background-color: #fff8f8;
+        }
+        & .dc-table__row {
+            border-bottom: unset;
+        }
+
+        &-separator {
+            width: 100vw;
+            height: 1px;
+            border-top: 1px solid var(--general-section-1);
+            position: absolute;
+            left: 0rem;
+            margin: 1.6rem 0rem;
+        }
+        &-header {
+            grid-area: header;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            height: 2.4rem;
+
+            &-right {
+                grid-area: header-right;
+                display: flex;
+                justify-self: end;
+            }
+        }
+        &-title {
+            align-items: start;
+            display: flex;
+            flex-direction: column;
+            grid-area: title;
+            height: 4.9rem;
+            justify-content: space-around;
+            justify-self: start;
+        }
+
+        &-chat {
+            margin-left: 0.9rem;
+            display: flex;
+            align-self: center;
+        }
+        &-time {
+            border: solid 1px var(--border-normal);
+            border-radius: 1.6rem;
+            width: 7.8rem;
+            height: 2.4rem;
+            letter-spacing: 1px;
+        }
+        &-status {
+            width: auto;
+            padding: 0.2rem 1.6rem;
+            border-radius: 1.6rem;
+        }
+    }
+}
diff --git a/packages/p2p/src/components/orders/popup.jsx b/packages/p2p/src/pages/orders/popup.jsx
similarity index 94%
rename from packages/p2p/src/components/orders/popup.jsx
rename to packages/p2p/src/pages/orders/popup.jsx
index 4ac36e9b2d7b..af3ac1ab1cc8 100644
--- a/packages/p2p/src/components/orders/popup.jsx
+++ b/packages/p2p/src/pages/orders/popup.jsx
@@ -3,8 +3,8 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { Formik, Field, Form } from 'formik';
 import { Button, Checkbox, Modal, Text, useSafeState } from '@deriv/components';
-import { localize } from '../i18next';
-import FormError from '../form/error.jsx';
+import { localize } from 'Components/i18next';
+import FormError from 'Components/section-error';
 
 const FormWithConfirmation = ({
     cancel_text,
@@ -31,7 +31,7 @@ const FormWithConfirmation = ({
                         is_open={should_show_popup}
                         portalId='modal_root'
                         renderTitle={() => (
-                            <Text color='prominent' line-height='m' size='s' weight='bold'>
+                            <Text color='prominent' weight='bold'>
                                 {title}
                             </Text>
                         )}
@@ -40,7 +40,7 @@ const FormWithConfirmation = ({
                     >
                         <Modal.Body>
                             <div className='orders__popup-content'>
-                                <Text color='prominent' line_height='m' size='xs'>
+                                <Text color='prominent' size='xs'>
                                     {message}
                                 </Text>
                                 <div className='orders__popup-field'>
@@ -122,7 +122,7 @@ const FormWithoutConfirmation = ({
             is_open={should_show_popup}
             portalId='modal_root'
             renderTitle={() => (
-                <Text color='prominent' line-height='m' size='s' weight='bold'>
+                <Text color='prominent' weight='bold'>
                     {title}
                 </Text>
             )}
@@ -131,7 +131,7 @@ const FormWithoutConfirmation = ({
         >
             <Modal.Body>
                 <div className='orders__popup-content'>
-                    <Text color='prominent' line_height='m' size='xs'>
+                    <Text color='prominent' size='xs'>
                         {message}
                     </Text>
                     {should_confirm_payment && (
diff --git a/packages/p2p/src/stores/advertiser-page-store.js b/packages/p2p/src/stores/advertiser-page-store.js
index 973c18d6c178..3c3b86e80235 100644
--- a/packages/p2p/src/stores/advertiser-page-store.js
+++ b/packages/p2p/src/stores/advertiser-page-store.js
@@ -224,17 +224,19 @@ export default class AdvertiserPageStore extends BaseStore {
     }
 
     onSubmit() {
-        this.root_store.general_store.blockUnblockUser(
-            !this.is_counterparty_advertiser_blocked,
-            this.advertiser_details_id
-        );
+        const current_advertiser_id = this.advertiser_details_id ?? this.counterparty_advertiser_info?.id;
+        this.root_store.general_store.blockUnblockUser(!this.is_counterparty_advertiser_blocked, current_advertiser_id);
         if (this.is_counterparty_advertiser_blocked) this.getCounterpartyAdvertiserList(this.advertiser_details_id);
         this.setIsDropdownMenuVisible(false);
     }
 
     onTabChange() {
-        this.setAdverts([]);
-        this.loadMoreAdvertiserAdverts({ startIndex: 0 });
+        const { general_store } = this.root_store;
+        const advertiser_id = general_store.counterparty_advertiser_id || this.advertiser_details_id;
+        if (advertiser_id) {
+            this.setAdverts([]);
+            this.loadMoreAdvertiserAdverts({ startIndex: 0 });
+        }
     }
 
     onUnmount() {
diff --git a/packages/p2p/src/stores/buy-sell-store.js b/packages/p2p/src/stores/buy-sell-store.js
index 309384ef7c32..fbbb5db992a0 100644
--- a/packages/p2p/src/stores/buy-sell-store.js
+++ b/packages/p2p/src/stores/buy-sell-store.js
@@ -95,6 +95,7 @@ export default class BuySellStore extends BaseStore {
             rendered_items: computed,
             should_filter_by_payment_method: computed,
             getWebsiteStatus: action.bound,
+            handleAdvertInfoResponse: action.bound,
             handleChange: action.bound,
             handleSubmit: action.bound,
             hideAdvertiserPage: action.bound,
@@ -142,9 +143,11 @@ export default class BuySellStore extends BaseStore {
             fetchAdvertiserAdverts: action.bound,
             handleResponse: action.bound,
             setIsCreateOrderSubscribed: action.bound,
+            unsubscribeAdvertInfo: action.bound,
         });
     }
 
+    advert_info_subscription = {};
     create_order_subscription = {};
 
     get account_currency() {
@@ -688,35 +691,48 @@ export default class BuySellStore extends BaseStore {
         return errors;
     }
 
+    handleAdvertInfoResponse(response) {
+        //TODO: error handling for response
+        if (response?.error) return;
+        const { p2p_advert_info } = response ?? {};
+        if (this.selected_ad_state?.id === p2p_advert_info.id) {
+            this.setSelectedAdState(p2p_advert_info);
+        }
+    }
+
+    subscribeAdvertInfo() {
+        this.advert_info_subscription = subscribeWS(
+            {
+                p2p_advert_info: 1,
+                id: this.selected_ad_state.id,
+                use_client_limits: 1,
+                subscribe: 1,
+            },
+            [this.handleAdvertInfoResponse]
+        );
+    }
+
     registerAdvertIntervalReaction() {
         const disposeAdvertIntervalReaction = reaction(
-            () => this.selected_ad_state,
+            () => this.selected_ad_state.id,
             () => {
-                clearInterval(this.limits_interval);
-
-                if (this.selected_ad_state) {
-                    const updateAdvert = () => {
-                        requestWS({ p2p_advert_info: 1, id: this.selected_ad_state.id, use_client_limits: 1 }).then(
-                            response => {
-                                // Added a check to prevent console errors
-                                if (response?.error) return;
-                                const { p2p_advert_info } = response;
-
-                                if (this.selected_ad_state?.id === p2p_advert_info.id) {
-                                    this.setSelectedAdState(p2p_advert_info);
-                                }
-                            }
-                        );
-                    };
-
-                    this.limits_interval = setInterval(updateAdvert, 10000);
+                if (this.selected_ad_state.id) {
+                    this.subscribeAdvertInfo();
                 }
-            }
+            },
+            { fireImmediately: true }
         );
 
         return () => disposeAdvertIntervalReaction();
     }
 
+    unsubscribeAdvertInfo = () => {
+        if (this.advert_info_subscription.unsubscribe) {
+            this.advert_info_subscription.unsubscribe();
+            this.setSelectedAdState({});
+        }
+    };
+
     unsubscribeCreateOrder = () => {
         if (this.create_order_subscription.unsubscribe) {
             this.create_order_subscription.unsubscribe();
diff --git a/packages/p2p/src/stores/general-store.js b/packages/p2p/src/stores/general-store.js
index 0d66f66f3575..e9d7e52863e2 100644
--- a/packages/p2p/src/stores/general-store.js
+++ b/packages/p2p/src/stores/general-store.js
@@ -239,6 +239,7 @@ export default class GeneralStore extends BaseStore {
                         );
                     }
                 } else {
+                    this.hideModal();
                     const { code, message } = response.error;
                     this.setErrorCode(code);
                     this.setBlockUnblockUserError(message);
@@ -903,15 +904,7 @@ export default class GeneralStore extends BaseStore {
                 return !v(values[key]);
             });
 
-            if (error_index !== -1) {
-                switch (key) {
-                    case 'nickname':
-                    default: {
-                        errors[key] = nickname_messages[error_index];
-                        break;
-                    }
-                }
-            }
+            if (error_index !== -1) errors[key] = nickname_messages[error_index];
         });
 
         return errors;
diff --git a/packages/p2p/tsconfig.json b/packages/p2p/tsconfig.json
index b1dc30054dc3..e4616a4c1f20 100644
--- a/packages/p2p/tsconfig.json
+++ b/packages/p2p/tsconfig.json
@@ -6,6 +6,7 @@
             "Assets/*": ["src/assets/*"],
             "Components/*": ["src/components/*"],
             "Constants/*": ["src/constants/*"],
+            "Pages/*": ["src/pages/*"],
             "Stores/*": ["src/stores/*"],
             "Translations/*": ["src/translations/*"],
             "Utils/*": ["src/utils/*"],
@@ -13,5 +14,5 @@
         },
         "outDir": "./lib"
     },
-    "include": ["src"]
+    "include": ["src", "@deriv-stores.d.ts"]
 }
diff --git a/packages/p2p/webpack.config.js b/packages/p2p/webpack.config.js
index 511dd3a646e0..7ea13495edba 100644
--- a/packages/p2p/webpack.config.js
+++ b/packages/p2p/webpack.config.js
@@ -13,7 +13,7 @@ module.exports = function (env) {
 
     return {
         entry: {
-            index: path.resolve(__dirname, 'src/components', 'app.jsx'),
+            index: path.resolve(__dirname, 'src/pages', 'app.jsx'),
         },
         mode: is_release ? 'production' : 'development',
         output: {
@@ -30,6 +30,7 @@ module.exports = function (env) {
                 Assets: path.resolve(__dirname, 'src/assets'),
                 Components: path.resolve(__dirname, 'src/components'),
                 Constants: path.resolve(__dirname, 'src/constants'),
+                Pages: path.resolve(__dirname, 'src/pages'),
                 Translations: path.resolve(__dirname, 'src/translations'),
                 Utils: path.resolve(__dirname, 'src/utils'),
                 Stores: path.resolve(__dirname, 'src/stores'),