diff --git a/src/common/utility.js b/src/common/utility.js
index f324f9d5b85..f917dd72239 100644
--- a/src/common/utility.js
+++ b/src/common/utility.js
@@ -87,7 +87,7 @@ function debounce(func, wait, immediate) {
     }
 }
 
-const trimSpaces = value => value.trim()
+const trimSpaces = (value) => value.trim()
 
 const deriv_app_url = 'https://app.deriv.com'
 const deriv_bot_app_url = 'https://app.deriv.com/bot'
diff --git a/src/components/elements/background-image.js b/src/components/elements/background-image.js
index dc43ace003b..541b396650e 100644
--- a/src/components/elements/background-image.js
+++ b/src/components/elements/background-image.js
@@ -12,7 +12,7 @@ const StyledBackground = styled(BackgroundImage)`
     }
 `
 
-const Background = ({ children, data, style, dark, ...props }) => {
+export const Background = ({ children, data, style, dark, ...props }) => {
     return (
         <StyledBackground
             Tag="div"
diff --git a/src/components/elements/image.js b/src/components/elements/image.js
index 05c981c2af4..d4f94f10610 100644
--- a/src/components/elements/image.js
+++ b/src/components/elements/image.js
@@ -4,7 +4,7 @@ import { StaticQuery, graphql } from 'gatsby'
 import Img from 'gatsby-image'
 import PropTypes from 'prop-types'
 
-const ImageWrapper = styled.div`
+export const ImageWrapper = styled.div`
     & .gatsby-image-wrapper {
         width: ${(props) => props.width};
         height: ${(props) => props.height};
diff --git a/src/components/elements/index.js b/src/components/elements/index.js
index 8dd1926b7c2..d67cf155137 100644
--- a/src/components/elements/index.js
+++ b/src/components/elements/index.js
@@ -7,7 +7,7 @@ import DotLoader from './dot-loader'
 import Dropdown from './dropdown'
 import Checkbox from './checkbox'
 import Image from './image'
-import QueryImage from './query-image'
+import QueryImage, { ImageWrapper } from './query-image'
 import { StyledLink } from './link'
 import {
     OffCanvasMenuWrapper as OffCanvasMenu,
@@ -16,7 +16,7 @@ import {
 } from './off-canvas-menu'
 import SideTab from './side-tab'
 import Tabs from './default-tab'
-import { Text, LinkText, LocalizedLinkText, Header, BaseElement } from './typography'
+import { Text, LinkText, LocalizedLinkText, Header, BaseElement, SpanLinkText } from './typography'
 import Timeline from './timeline'
 import { Ul, Li } from './lists'
 import { Carousel } from './carousel'
@@ -37,6 +37,7 @@ export {
     Dropdown,
     Checkbox,
     Image,
+    ImageWrapper,
     QueryImage,
     StyledLink,
     NavCard,
@@ -49,6 +50,7 @@ export {
     LinkText,
     LocalizedLinkText,
     Header,
+    SpanLinkText,
     Timeline,
     Ul,
     Li,
diff --git a/src/components/elements/query-image.js b/src/components/elements/query-image.js
index 0fb54266bf3..93a3a551ada 100644
--- a/src/components/elements/query-image.js
+++ b/src/components/elements/query-image.js
@@ -4,7 +4,7 @@ import styled from 'styled-components'
 import Img from 'gatsby-image'
 import PropTypes from 'prop-types'
 
-const ImageWrapper = styled.div`
+export const ImageWrapper = styled.div`
     width: ${(props) => (props.width ? props.width : '100%')};
     height: ${(props) => props.height};
 
diff --git a/src/components/elements/typography.js b/src/components/elements/typography.js
index 455a65928aa..3282d9b7708 100644
--- a/src/components/elements/typography.js
+++ b/src/components/elements/typography.js
@@ -6,6 +6,16 @@ import device from 'themes/device'
 
 const createElement = React.createElement
 
+export const BaseLink = css`
+    text-decoration: none;
+    cursor: pointer;
+
+    &:hover {
+        color: var(--color-red);
+        text-decoration: underline;
+    }
+`
+
 export const BaseElement = css`
     text-align: ${(props) => props.align || 'left'};
     padding: ${(props) => props.padding || ''};
@@ -46,13 +56,11 @@ export const Header = styled(({ as = 'h1', children, ...props }) =>
 `
 
 export const LinkText = styled(Text).attrs({ as: 'a' })`
-    text-decoration: none;
-    cursor: pointer;
+    ${BaseLink}
+`
 
-    &:hover {
-        color: var(--color-red);
-        text-decoration: underline;
-    }
+export const SpanLinkText = styled(Text).attrs({ as: 'span' })`
+    ${BaseLink}
 `
 
 export const LocalizedLinkText = styled((props) => <LocalizedLink {...props} />)`
diff --git a/src/components/layout/copyright.js b/src/components/layout/copyright.js
index 9bae2dfc494..1c1a99e6364 100644
--- a/src/components/layout/copyright.js
+++ b/src/components/layout/copyright.js
@@ -2,13 +2,13 @@ import React from 'react'
 import { Box, Container } from 'components/containers'
 import { Text } from 'components/elements'
 import { localize } from 'components/localization'
-import CopyrightIc from 'images/svg/copyright.svg'
+import CopyrightIc from 'images/svg/copyright-white.svg'
 
 const Copyright = () => {
     return (
         <Box bg="var(--color-black)">
             <Container jc="flex-start" p="1.5rem 0" ai="center">
-                <img src={CopyrightIc} alt="copyright ic" width="1.6rem" />
+                <img src={CopyrightIc} alt="copyright ic" width="16px" />
                 <Text color="white" ml="0.4rem">
                     {localize('2020 Deriv | All rights reserved')}
                 </Text>
diff --git a/src/components/layout/layout.js b/src/components/layout/layout.js
index 14051de7c8f..5c7a128b202 100644
--- a/src/components/layout/layout.js
+++ b/src/components/layout/layout.js
@@ -6,6 +6,7 @@ import Footer from './footer'
 import Copyright from './copyright'
 import { Nav, NavStatic, NavPartners, NavInterim } from './nav'
 import { NavCareers } from './nav-careers'
+import { NavP2P } from './nav-p2p'
 import { LocationProvider } from './location-context'
 import EURedirect, { useModal } from 'components/custom/_eu-redirect-modal.js'
 import CookieBanner from 'components/custom/cookie-banner'
@@ -27,7 +28,15 @@ const has_dataLayer = isBrowser() && window.dataLayer
 const TRACKING_STATUS_KEY = 'tracking_status'
 const tracking_status_cookie = new CookieStorage(TRACKING_STATUS_KEY)
 
-const Layout = ({ children, type, interim_type, padding_top, no_login_signup }) => {
+const Layout = ({
+    children,
+    type,
+    interim_type,
+    padding_top,
+    no_login_signup,
+    no_live_chat,
+    nav_type,
+}) => {
     const { is_eu_country } = React.useContext(DerivStore)
     const [has_mounted, setMounted] = React.useState(false)
     const [show_cookie_banner, setShowCookieBanner] = React.useState(false)
@@ -88,6 +97,10 @@ const Layout = ({ children, type, interim_type, padding_top, no_login_signup })
             Navigation = <NavCareers />
             FooterNav = <Footer no_language={true} />
             break
+        case 'p2p':
+            Navigation = <NavP2P nav_type={nav_type} />
+            FooterNav = <Copyright />
+            break
         default:
             Navigation = <Nav />
             FooterNav = <Footer />
@@ -114,11 +127,13 @@ const Layout = ({ children, type, interim_type, padding_top, no_login_signup })
                     is_open={show_cookie_banner}
                 />
             )}
-            <LiveChat
-                LC_API={LC_API}
-                is_livechat_interactive={is_livechat_interactive}
-                setLiveChatInteractive={setLiveChatInteractive}
-            />
+            {!no_live_chat && (
+                <LiveChat
+                    LC_API={LC_API}
+                    is_livechat_interactive={is_livechat_interactive}
+                    setLiveChatInteractive={setLiveChatInteractive}
+                />
+            )}
             {FooterNav}
             <EURedirect
                 toggle={toggleModal}
@@ -137,6 +152,8 @@ const Layout = ({ children, type, interim_type, padding_top, no_login_signup })
 Layout.propTypes = {
     children: PropTypes.node.isRequired,
     interim_type: PropTypes.string,
+    nav_type: PropTypes.string,
+    no_live_chat: PropTypes.bool,
     no_login_signup: PropTypes.bool,
     padding_top: PropTypes.string,
     type: PropTypes.string,
diff --git a/src/components/layout/nav-p2p.js b/src/components/layout/nav-p2p.js
new file mode 100644
index 00000000000..08eb45d7c55
--- /dev/null
+++ b/src/components/layout/nav-p2p.js
@@ -0,0 +1,96 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import { graphql, useStaticQuery } from 'gatsby'
+import { StyledNav, NavWrapper, LogoLink, Wrapper, NavLeft } from './nav'
+import { localize } from 'components/localization'
+import { QueryImage } from 'components/elements'
+import { Show } from 'components/containers'
+import device from 'themes/device'
+import LogoCombinedShape from 'images/svg/logo-combined-shape.svg'
+
+const query = graphql`
+    query {
+        deriv: file(relativePath: { eq: "logo.png" }) {
+            ...fadeIn
+        }
+    }
+`
+
+const StyledWrapper = styled(Wrapper)`
+    @media ${device.tabletL} {
+        justify-content: center;
+    }
+`
+
+const StyledLogoLink = styled(LogoLink)`
+    @media ${device.tabletS} {
+        & svg,
+        .gatsby-image-wrapper {
+            width: 100%;
+        }
+    }
+`
+
+const P2PNavLeft = styled(NavLeft)`
+    @media ${device.tabletL} {
+        display: flex;
+        width: 180px;
+    }
+`
+
+const Line = styled.div`
+    width: 1px;
+    height: 28px;
+    margin-right: 8px;
+    margin-left: 8px;
+    background-color: var(--color-white);
+
+    @media ${device.tabletL} {
+        height: 16px;
+        margin-left: 5px;
+        margin-right: 4px;
+    }
+`
+
+export const NavP2P = ({ nav_type }) => {
+    const data = useStaticQuery(query)
+
+    return (
+        <>
+            <NavWrapper>
+                <StyledNav>
+                    <StyledWrapper>
+                        <P2PNavLeft>
+                            <StyledLogoLink
+                                to={nav_type === 'p2p-v1' ? '/p2p/v1' : '/p2p/v2'}
+                                aria-label={localize('Home')}
+                            >
+                                <QueryImage
+                                    data={data['deriv']}
+                                    alt={localize('Deriv')}
+                                    max_width="16.4rem"
+                                    width="100%"
+                                    height="auto"
+                                />
+                            </StyledLogoLink>
+                            <Line />
+                            <Show.Desktop min_width="992">
+                                <img src={LogoCombinedShape} alt="get trading" />
+                            </Show.Desktop>
+                            <Show.Mobile>
+                                <img src={LogoCombinedShape} alt="get trading" width="71px" />
+                            </Show.Mobile>
+                        </P2PNavLeft>
+                    </StyledWrapper>
+                </StyledNav>
+            </NavWrapper>
+        </>
+    )
+}
+
+NavP2P.propTypes = {
+    nav_type: PropTypes.string,
+}
+
+export default { NavP2P }
diff --git a/src/images/common/p2p_banner.png b/src/images/common/p2p_banner.png
new file mode 100644
index 00000000000..17934f1c342
Binary files /dev/null and b/src/images/common/p2p_banner.png differ
diff --git a/src/images/common/p2p_banner_mobile.png b/src/images/common/p2p_banner_mobile.png
new file mode 100644
index 00000000000..bdc39b2d0e2
Binary files /dev/null and b/src/images/common/p2p_banner_mobile.png differ
diff --git a/src/images/common/p2p_buy_sell.png b/src/images/common/p2p_buy_sell.png
new file mode 100644
index 00000000000..79cd479eb32
Binary files /dev/null and b/src/images/common/p2p_buy_sell.png differ
diff --git a/src/images/common/p2p_hero_background.png b/src/images/common/p2p_hero_background.png
new file mode 100644
index 00000000000..eaf58a16a2b
Binary files /dev/null and b/src/images/common/p2p_hero_background.png differ
diff --git a/src/images/common/p2p_hero_background_mobile.png b/src/images/common/p2p_hero_background_mobile.png
new file mode 100644
index 00000000000..bb228014f45
Binary files /dev/null and b/src/images/common/p2p_hero_background_mobile.png differ
diff --git a/src/images/common/p2p_hero_img.png b/src/images/common/p2p_hero_img.png
new file mode 100644
index 00000000000..c9f0672a924
Binary files /dev/null and b/src/images/common/p2p_hero_img.png differ
diff --git a/src/images/common/p2p_local_currency.png b/src/images/common/p2p_local_currency.png
new file mode 100644
index 00000000000..bebc633c93c
Binary files /dev/null and b/src/images/common/p2p_local_currency.png differ
diff --git a/src/images/common/p2p_web_and_mobile.png b/src/images/common/p2p_web_and_mobile.png
new file mode 100644
index 00000000000..3df93a3a189
Binary files /dev/null and b/src/images/common/p2p_web_and_mobile.png differ
diff --git a/src/images/svg/complete-order.svg b/src/images/svg/complete-order.svg
new file mode 100644
index 00000000000..e8e850b08b8
--- /dev/null
+++ b/src/images/svg/complete-order.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="384" height="216" viewBox="0 0 384 216">
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g>
+                <g>
+                    <path fill-rule="nonzero" d="M0 0H384V216H0z" transform="translate(-936 -2778) translate(120 2678) translate(816 100)"/>
+                    <g stroke="#FF444F" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+                        <path d="M120.744 35.063c10.123 19.801 9.217 43.442-2.392 62.41-11.609 18.968-32.248 30.532-54.487 30.527-3.335-.002-6.666-.258-9.963-.766M0 64.135c-.005-21.947 11.26-42.36 29.83-54.055C48.401-1.616 71.677-2.957 91.468 6.528M63.865 1.419L63.865 13.323M63.865 114.946L63.865 126.85M1.15 64.135L13.054 64.135M114.677 64.135L126.581 64.135M19.517 19.787L27.935 28.204M99.796 100.065L108.213 108.483M63.865 24.921L63.865 64.135 82.182 48.092" transform="translate(-936 -2778) translate(120 2678) translate(816 100) translate(128 44)"/>
+                        <path d="M106.17.27c-11.287 0-20.437 9.15-20.437 20.436 0 11.287 9.15 20.437 20.437 20.437s20.437-9.15 20.437-20.437c0-5.42-2.154-10.618-5.986-14.45C116.788 2.422 111.59.268 106.17.268z" transform="translate(-936 -2778) translate(120 2678) translate(816 100) translate(128 44)"/>
+                        <path d="M116.235 17.462l-10.589 10.576c-.541.553-1.283.862-2.057.856-.772.001-1.513-.307-2.056-.856l-5.352-5.288c-1.037-1.151-.99-2.913.105-4.008 1.095-1.096 2.857-1.142 4.008-.105l3.232 3.232 8.532-8.533c.737-.746 1.816-1.042 2.83-.777 1.015.265 1.811 1.052 2.09 2.063.277 1.011-.006 2.094-.743 2.84zM0 70.713H45.817V128H0zM11.036 105.852L36.058 105.852M11.036 115.201L36.058 115.201" transform="translate(-936 -2778) translate(120 2678) translate(816 100) translate(128 44)"/>
+                        <path d="M26.108 91.699c0 1.967 2.235 3.564 4.982 3.564 2.746 0 4.968-1.597 4.968-3.564s-2.222-3.564-4.968-3.564c-2.747 0-4.982-1.584-4.982-3.55 0-1.968 2.235-3.564 4.982-3.564 2.746 0 4.968 1.596 4.968 3.563M31.09 78.709L31.09 81.021M31.09 96.106L31.09 97.677" transform="translate(-936 -2778) translate(120 2678) translate(816 100) translate(128 44)"/>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/src/images/svg/copyright-white.svg b/src/images/svg/copyright-white.svg
new file mode 100644
index 00000000000..aa84a6f774e
--- /dev/null
+++ b/src/images/svg/copyright-white.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" aria-labelledby="copyright">
+    <path
+        d="M8 0a8 8 0 110 16A8 8 0 018 0zm0 1a7 7 0 100 14A7 7 0 008 1zm.22 3c.719 0 1.295.156 1.729.469.434.313.758.721.973 1.225l-.938.476a1.7 1.7 0 00-.644-.868c-.299-.205-.672-.308-1.12-.308-.336 0-.63.054-.882.161a1.722 1.722 0 00-.63.448c-.168.191-.294.42-.378.686a2.894 2.894 0 00-.126.875v1.232c0 .635.17 1.155.511 1.561.34.406.842.609 1.505.609.905 0 1.559-.42 1.96-1.26l.812.546a2.87 2.87 0 01-1.043 1.246c-.462.308-1.038.462-1.729.462-.504 0-.957-.089-1.358-.266a2.774 2.774 0 01-1.015-.756 3.37 3.37 0 01-.63-1.19A5.285 5.285 0 015 7.78c0-.579.072-1.101.217-1.568a3.37 3.37 0 01.63-1.19 2.774 2.774 0 011.015-.756A3.326 3.326 0 018.22 4z"
+        fill="#fff" fill-rule="nonzero" />
+</svg>
\ No newline at end of file
diff --git a/src/images/svg/copyright.svg b/src/images/svg/copyright.svg
index 1389f17664a..2d1d441bdf3 100644
--- a/src/images/svg/copyright.svg
+++ b/src/images/svg/copyright.svg
@@ -1,13 +1,5 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="copyright">
-    <!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
-    <title>Codestin Search App</title>
-    <desc>Created with Sketch.</desc>
-    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="navigations/footer/black-copy-2" transform="translate(-120.000000, -744.000000)" fill="#333333" fill-rule="nonzero">
-            <g id="Copyright" transform="translate(120.000000, 741.000000)">
-                <path d="M8,3 C12.418278,3 16,6.581722 16,11 C16,15.418278 12.418278,19 8,19 C3.581722,19 0,15.418278 0,11 C0,6.581722 3.581722,3 8,3 Z M8,4 C4.13400675,4 1,7.13400675 1,11 C1,14.8659932 4.13400675,18 8,18 C11.8659932,18 15,14.8659932 15,11 C15,7.13400675 11.8659932,4 8,4 Z M8.22,7 C8.93867026,7 9.51499783,7.15633177 9.949,7.469 C10.3830022,7.78166823 10.7073323,8.18999748 10.922,8.694 L9.984,9.17 C9.85333268,8.7966648 9.63866816,8.50733436 9.34,8.302 C9.04133184,8.09666564 8.66800224,7.994 8.22,7.994 C7.88399832,7.994 7.59000126,8.04766613 7.338,8.155 C7.08599874,8.26233387 6.87600084,8.41166571 6.708,8.603 C6.53999916,8.79433429 6.41400042,9.02299867 6.33,9.289 C6.24599958,9.55500133 6.204,9.84666508 6.204,10.164 L6.204,11.396 C6.204,12.0306698 6.37433163,12.550998 6.715,12.957 C7.05566837,13.363002 7.55733002,13.566 8.22,13.566 C9.12533786,13.566 9.77866466,13.1460042 10.18,12.306 L10.992,12.852 C10.7586655,13.3746693 10.4110023,13.7899985 9.949,14.098 C9.48699769,14.4060015 8.91067012,14.56 8.22,14.56 C7.71599748,14.56 7.26333534,14.4713342 6.862,14.294 C6.46066466,14.1166658 6.12233471,13.8646683 5.847,13.538 C5.57166529,13.2113317 5.36166739,12.814669 5.217,12.348 C5.07233261,11.881331 5,11.3586696 5,10.78 C5,10.2013304 5.07233261,9.678669 5.217,9.212 C5.36166739,8.745331 5.57166529,8.3486683 5.847,8.022 C6.12233471,7.6953317 6.46066466,7.44333422 6.862,7.266 C7.26333534,7.08866578 7.71599748,7 8.22,7 Z" id="Combined-Shape"></path>
-            </g>
-        </g>
-    </g>
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" aria-labelledby="copyright">
+    <path
+        d="M8 0a8 8 0 110 16A8 8 0 018 0zm0 1a7 7 0 100 14A7 7 0 008 1zm.22 3c.719 0 1.295.156 1.729.469.434.313.758.721.973 1.225l-.938.476a1.7 1.7 0 00-.644-.868c-.299-.205-.672-.308-1.12-.308-.336 0-.63.054-.882.161a1.722 1.722 0 00-.63.448c-.168.191-.294.42-.378.686a2.894 2.894 0 00-.126.875v1.232c0 .635.17 1.155.511 1.561.34.406.842.609 1.505.609.905 0 1.559-.42 1.96-1.26l.812.546a2.87 2.87 0 01-1.043 1.246c-.462.308-1.038.462-1.729.462-.504 0-.957-.089-1.358-.266a2.774 2.774 0 01-1.015-.756 3.37 3.37 0 01-.63-1.19A5.285 5.285 0 015 7.78c0-.579.072-1.101.217-1.568a3.37 3.37 0 01.63-1.19 2.774 2.774 0 011.015-.756A3.326 3.326 0 018.22 4z"
+        fill="#333" fill-rule="nonzero" />
 </svg>
\ No newline at end of file
diff --git a/src/images/svg/p2p-desktop.svg b/src/images/svg/p2p-desktop.svg
new file mode 100644
index 00000000000..61d4bdd86b8
--- /dev/null
+++ b/src/images/svg/p2p-desktop.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="66" height="64"><g stroke="#FF4449" stroke-linecap="round" stroke-linejoin="round" transform="translate(1 5)" fill="none" fill-rule="evenodd"><rect width="64" height="43.733" rx="4.251"/><path d="M3.941 4.421h56.117v30.72H3.941zm22.982 48.912l1.312-9.562h7.53l1.312 9.562zm-6.022 0h22.198"/><path d="M27.03 11.557l6.367 8.438-10.202 8.421h10.298a6.486 6.486 0 006.294-5.088l.853-3.733a6.665 6.665 0 00-1.243-5.563 6.399 6.399 0 00-5.045-2.475h-7.323z"/><path d="M28.912 28.437h-5.717l10.197-8.426z"/></g></svg>
\ No newline at end of file
diff --git a/src/images/svg/p2p-mobile.svg b/src/images/svg/p2p-mobile.svg
new file mode 100644
index 00000000000..f81c139d0d3
--- /dev/null
+++ b/src/images/svg/p2p-mobile.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="66"><g stroke="#FF4449" stroke-linecap="round" stroke-linejoin="round" transform="translate(11 1)" fill="none" fill-rule="evenodd"><rect width="40.96" height="64" rx="7.443"/><path d="M29.798 7.04l4.013.064a3.429 3.429 0 013.437 3.437v46.15a3.43 3.43 0 01-3.437 3.469l-26.662.064a3.425 3.425 0 01-2.441-1.014 3.426 3.426 0 01-.996-2.448V10.509a3.429 3.429 0 013.437-3.437l4.013-.064 18.636.032z"/><path d="M14.515 18.502h0l7.642 10.125L9.914 38.733h12.358a7.784 7.784 0 007.552-6.093l1.024-4.48a8 8 0 00-1.491-6.675 7.685 7.685 0 00-6.055-2.97l-8.787-.013z"/><path d="M22.15 28.653l-5.376 10.105h-6.86zM17.056 3.846h6.848"/><rect width="4.224" height="4.224" x="8.544" y="51.706" rx="1.382"/><rect width="4.224" height="4.224" x="18.368" y="51.706" rx="1.382"/><rect width="4.224" height="4.224" x="28.192" y="51.706" rx="1.382"/><path d="M41.114 27.226h1.747v9.548h-1.747m0-23.059h1.747v4.96h-1.747"/></g></svg>
\ No newline at end of file
diff --git a/src/images/svg/right-ad.svg b/src/images/svg/right-ad.svg
new file mode 100644
index 00000000000..e72edca204d
--- /dev/null
+++ b/src/images/svg/right-ad.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="384" height="216" viewBox="0 0 384 216">
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g>
+                <g>
+                    <path fill-rule="nonzero" d="M0 0H384V216H0z" transform="translate(-120 -2778) translate(120 2678) translate(0 100)"/>
+                    <g stroke="#FF444F" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" transform="translate(-120 -2778) translate(120 2678) translate(0 100) translate(128 44)">
+                        <path d="M77.146 63.027c2.413.056 4.34 2.028 4.339 4.442V81.92c-.003.923.627 1.727 1.523 1.946 3.36 1.073 6.779 1.949 10.24 2.624 3.675.704 7.3 1.645 10.854 2.816 2.04.759 3.4 2.7 3.418 4.876v18.535c-.294 4.185-6.49 8.627-7.117 15.283H77.07c-3.175-6.131-7.68-11.136-9.626-15.936l-.205-.397c-3.955-5.683-9.254-6.4-11.776-8.128-2.521-1.728-.64-10.24 5.556-7.475l8.73 4.237c.643.308 1.402.254 1.996-.143.594-.396.934-1.077.896-1.79V67.482c-.004-1.2.478-2.352 1.337-3.19.858-.84 2.02-1.296 3.22-1.265h-.051zM90.445 86.029L90.445 95.258M81.472 81.958L81.472 92.198M99.418 88.717L99.418 97.946M32 16.998c-5.009-.005-9.527 3.009-11.446 7.635-1.919 4.627-.86 9.954 2.68 13.495 3.543 3.542 8.87 4.6 13.496 2.681 4.626-1.92 7.64-6.437 7.635-11.446 0-3.28-1.303-6.424-3.622-8.743S35.28 16.998 32 16.998z"/>
+                        <circle cx="31.962" cy="26.803" r="4.198"/>
+                        <path d="M25.83 39.398v-2.65c0-3.173 2.574-5.746 5.748-5.746h.768c3.169.007 5.734 2.578 5.734 5.747v2.65M19.584 52.915L65.574 52.915M19.584 63.181L65.574 63.181"/>
+                        <rect width="28.634" height="12.173" x="89.997" y="51.955" rx="5.568"/>
+                        <path d="M72.077 75.878H16.973c-1.639 0-3.21-.651-4.367-1.811-1.158-1.16-1.806-2.733-1.803-4.371v-54.54c-.007-1.642.64-3.217 1.798-4.38 1.158-1.162 2.731-1.816 4.372-1.816H121.83c1.641 0 3.214.654 4.372 1.816 1.158 1.163 1.805 2.738 1.798 4.38v54.54c.003 1.638-.645 3.211-1.803 4.37-1.157 1.16-2.728 1.812-4.367 1.812H87.5"/>
+                        <path d="M118.118 18.38l-7.91 7.911c-.408.41-.963.641-1.542.641-.58 0-1.134-.23-1.543-.64l-3.955-3.956M10.317 66.893H6.17c-3.408 0-6.17-2.762-6.17-6.17V6.17C0 2.762 2.762 0 6.17 0h98.457c3.408 0 6.17 2.762 6.17 6.17v2.79"/>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/src/images/svg/settle-payment.svg b/src/images/svg/settle-payment.svg
new file mode 100644
index 00000000000..d6102c40b54
--- /dev/null
+++ b/src/images/svg/settle-payment.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="384" height="216" viewBox="0 0 384 216">
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g>
+                <g>
+                    <path fill-rule="nonzero" d="M0 0H384V216H0z" transform="translate(-528 -2778) translate(120 2678) translate(408 100)"/>
+                    <g stroke="#FF444F" stroke-width="2">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M103.68 0C90.955 0 80.64 10.315 80.64 23.04s10.315 23.04 23.04 23.04 23.04-10.315 23.04-23.04c0-6.11-2.427-11.97-6.748-16.292C115.65 2.428 109.79 0 103.68 0z" transform="translate(-528 -2778) translate(120 2678) translate(408 100) translate(128 44)"/>
+                        <path d="M97.869 28.045c0 2.803 3.174 5.12 7.091 5.12 3.917 0 7.091-2.266 7.091-5.12 0-2.855-3.174-5.12-7.091-5.12-3.917 0-7.091-2.279-7.091-5.12 0-2.842 3.174-5.12 7.091-5.12 3.917 0 7.091 2.265 7.091 5.12M104.96 8.23L104.96 12.813M104.96 34.317L104.96 37.85" transform="translate(-528 -2778) translate(120 2678) translate(408 100) translate(128 44)"/>
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M122.15 85.555h.18c1.364-.819 2.444-.69 3.673.32.635.507 1.085 1.209 1.28 1.997.327 1.657.278 3.349-1.126 4.288h-.154l-40.525 31.424c-4.559 2.826-9.804 4.353-15.168 4.416l-48.192-6.106c-2.405-.269-4.836-.191-7.219.23V85.76l1.28-.538c1.51-.512 22.208-7.244 36.096-.576 8.526 4.122 18.147 5.41 27.456 3.674 1.798-.36 3.636-.485 5.466-.371 1.201.425 2.2 1.283 2.803 2.406.54 1.571.42 3.294-.333 4.775-2.56 2.035-9.651 6.22-23.232 6.259-1.906-.02-3.506 1.43-3.673 3.328-.057.972.29 1.924.959 2.631.669.708 1.6 1.108 2.573 1.106 11.981 0 22.375-3.545 28.16-7.308l29.696-15.59zM0 81.139H14.899V128H0zM84.088 10.637L16.563 10.637 16.563 67.046 111.437 67.046 111.437 52.237" transform="translate(-528 -2778) translate(120 2678) translate(408 100) translate(128 44)"/>
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M72.653 46.08c-.512 4.006-4.199 6.848-7.757 7.757v3.635h-6.208v-3.98c-3.107-1.136-5.708-3.341-7.334-6.222-.681-1.453-.139-3.187 1.25-3.992 1.389-.806 3.163-.418 4.087.895 1.562 2.56 3.994 4.096 6.221 3.725 1.728-.295 3.328-1.613 3.443-2.484.167-1.587 0-2.035-2.201-2.777-1.408-.474-2.56-.794-3.572-1.088-3.123-.909-5.593-1.6-7.488-4.48-2.6-4.045-1.459-9.43 2.56-12.07.894-.615 1.898-1.05 2.957-1.28V20.21h6.208v4.109c3.17 1.036 5.813 3.261 7.373 6.208.529 1.483-.134 3.128-1.544 3.83-1.41.7-3.121.238-3.986-1.078-.887-1.677-2.446-2.897-4.288-3.354-1.063-.37-2.23-.296-3.238.205-1.191.73-1.578 2.278-.87 3.482.588.909 1.152 1.126 4.019 1.945 1.088.295 2.278.666 3.84 1.165 1.817.563 7.168 2.432 6.528 9.357z" transform="translate(-528 -2778) translate(120 2678) translate(408 100) translate(128 44)"/>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/src/pages/p2p/components/_availability.js b/src/pages/p2p/components/_availability.js
new file mode 100644
index 00000000000..3e12de2e5c2
--- /dev/null
+++ b/src/pages/p2p/components/_availability.js
@@ -0,0 +1,204 @@
+import React from 'react'
+import styled from 'styled-components'
+import Desktop from 'images/svg/p2p-desktop.svg'
+import Mobile from 'images/svg/p2p-mobile.svg'
+import { localize, Localize } from 'components/localization'
+import { Header, LocalizedLinkText, SpanLinkText, Text } from 'components/elements'
+import { Flex, SectionContainer } from 'components/containers'
+import Login from 'common/login'
+import device from 'themes/device'
+
+const Row = styled.div`
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+`
+
+const Section = styled(SectionContainer)`
+    display: flex;
+    flex-direction: column;
+    padding: 0 12rem 8rem 12rem;
+    max-width: 1440px;
+    margin: 0 auto;
+    align-items: center;
+    justify-content: center;
+
+    @media ${device.tablet} {
+        padding: 0 16px 40px 16px;
+    }
+`
+
+const PlatformCard = styled.article`
+    background-color: var(--color-white);
+    width: 48.6rem;
+    position: relative;
+
+    @media ${device.laptopM} {
+        min-height: 22rem;
+        height: 100%;
+    }
+    @media ${device.tablet} {
+        max-height: unset;
+        padding: 0 24px;
+        max-width: 328px;
+    }
+    @media ${device.mobileM} {
+        max-width: 310px;
+    }
+`
+const StyledHeader = styled(Header)`
+    @media ${device.tablet} {
+        margin-bottom: 40px;
+    }
+    @media ${device.mobileL} {
+        font-size: 24px;
+        margin-bottom: 24px;
+    }
+`
+const StyledCardHeader = styled(Header)`
+    font-size: 24px;
+    margin-top: 1.6rem;
+    margin-bottom: 4rem;
+
+    @media ${device.mobileL} {
+        font-size: 20px;
+        margin-bottom: 24px;
+    }
+`
+const StyledText = styled(Text)`
+    font-size: 24px;
+    margin-bottom: 3rem;
+
+    :last-child {
+        margin-bottom: 0;
+    }
+
+    @media ${device.mobileL} {
+        font-size: 16px;
+    }
+`
+const Line = styled.div`
+    width: 1px;
+    height: 38rem;
+    border: solid 1px var(--color-grey-21);
+    margin: 0 4.5rem;
+
+    @media ${device.laptop} {
+        height: 47rem;
+    }
+    @media ${device.tablet} {
+        height: 1px;
+        width: 50rem;
+        margin: 24px 0;
+        border: solid 1px #979797;
+    }
+
+    @media ${device.mobileL} {
+        width: 40rem;
+    }
+
+    @media ${device.mobileS} {
+        width: 30rem;
+    }
+`
+
+const Availability = () => {
+    const handleLogin = () => {
+        Login.redirectToLogin()
+    }
+
+    return (
+        <Section>
+            <StyledHeader
+                mobile_font_size="32px"
+                mobile_margin="0 0 24px"
+                align="center"
+                as="h2"
+                mb="4rem"
+            >
+                {localize('Available on desktop and mobile')}
+            </StyledHeader>
+            <Flex
+                tablet_direction="column"
+                tablet_ai="center"
+                tablet={{ m: '0' }}
+                jc="space-between"
+            >
+                <PlatformCard>
+                    <Row>
+                        <img src={Desktop} alt="Desktop" />
+                    </Row>
+                    <Row>
+                        <StyledCardHeader mobile_margin="unset" as="h4">
+                            <Localize translate_text="DP2P on your computer" />
+                        </StyledCardHeader>
+                    </Row>
+                    <div>
+                        <StyledText>
+                            <Localize
+                                translate_text="1. <0>Log in</0> to your Deriv account. Don’t have one? <1>Sign up</1> for free."
+                                components={[
+                                    <SpanLinkText
+                                        size={24}
+                                        onClick={handleLogin}
+                                        color="red"
+                                        external
+                                        key={0}
+                                    />,
+                                    <LocalizedLinkText
+                                        to="/signup"
+                                        size={24}
+                                        color="red"
+                                        key={1}
+                                    />,
+                                ]}
+                            />
+                        </StyledText>
+                        <StyledText>
+                            <Localize translate_text="2. Go to Cashier > DP2P and register." />
+                        </StyledText>
+                        <StyledText>
+                            <Localize translate_text="3. Start exchanging." />
+                        </StyledText>
+                    </div>
+                </PlatformCard>
+                <Line />
+                <PlatformCard>
+                    <Row>
+                        <img src={Mobile} alt="Mobile" />
+                    </Row>
+                    <Row>
+                        <StyledCardHeader mobile_margin="unset" as="h4">
+                            <Localize translate_text="DP2P on your mobile" />
+                        </StyledCardHeader>
+                    </Row>
+                    <div>
+                        <StyledText>
+                            <Localize
+                                translate_text="1. Get the app from the <0>Google Play Store</0>."
+                                components={[
+                                    <LocalizedLinkText
+                                        external
+                                        to="https://play.google.com/store/apps/details?id=com.deriv.dp2p"
+                                        target="_blank"
+                                        size={24}
+                                        color="red"
+                                        key={0}
+                                    />,
+                                ]}
+                            />
+                        </StyledText>
+                        <StyledText>
+                            <Localize translate_text="2. Log in to your Deriv account, and register for DP2P." />
+                        </StyledText>
+                        <StyledText>
+                            <Localize translate_text="3. Start exchanging." />
+                        </StyledText>
+                    </div>
+                </PlatformCard>
+            </Flex>
+        </Section>
+    )
+}
+
+export default Availability
diff --git a/src/pages/p2p/components/_dp2p.js b/src/pages/p2p/components/_dp2p.js
new file mode 100644
index 00000000000..a037cb03b29
--- /dev/null
+++ b/src/pages/p2p/components/_dp2p.js
@@ -0,0 +1,148 @@
+import React from 'react'
+import styled from 'styled-components'
+import PropTypes from 'prop-types'
+import { graphql, useStaticQuery } from 'gatsby'
+import device from 'themes/device'
+import { Container, SectionContainer } from 'components/containers'
+import { Header, Text, QueryImage } from 'components/elements'
+import { localize } from 'components/localization'
+
+const StyledSection = styled(SectionContainer)`
+    background-color: var(--color-white);
+    padding: 8rem 0 0 0;
+
+    @media ${device.tabletL} {
+        padding-top: 40px;
+    }
+`
+const StyledContainer = styled(Container)`
+    display: flex;
+    flex-direction: column;
+`
+const Content = styled.div`
+    width: 100%;
+    max-width: 58.8rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-right: ${(props) => props.margin_right};
+
+    ${Text} {
+        font-size: 2.4rem;
+        margin-top: 0.8rem;
+
+        @media ${device.tabletL} {
+            text-align: center;
+            font-size: 16px;
+        }
+    }
+
+    @media ${device.tabletL} {
+        margin: 0 auto;
+    }
+`
+
+const ImageWrapper = styled.div`
+    max-width: 47.1rem;
+    width: 100%;
+    max-height: 30rem;
+    margin-right: ${(props) => props.margin_right};
+
+    @media ${device.tabletL} {
+        margin: 2rem auto;
+    }
+`
+const StyledHeader = styled(Header)`
+    font-size: var(--text-size-l);
+    line-height: 1.25;
+
+    @media ${device.tabletL} {
+        margin-top: 0;
+        text-align: center;
+        font-size: 24px;
+    }
+`
+const StyledText = styled(Text)`
+    font-size: 3.2rem;
+    line-height: 40px;
+    text-align: center;
+
+    @media ${device.tabletL} {
+        font-size: 16px;
+        line-height: 24px;
+    }
+`
+const Row = styled.div`
+    flex-direction: ${(props) => props.flex_direction};
+    width: 100%;
+    display: flex;
+    margin-top: 8rem;
+
+    &:first-child {
+        margin-top: 0;
+    }
+
+    @media ${device.tabletL} {
+        flex-direction: column;
+        margin-top: 40px;
+    }
+`
+const query = graphql`
+    query {
+        buy_sell: file(relativePath: { eq: "p2p_buy_sell.png" }) {
+            ...fadeIn
+        }
+        local_currency: file(relativePath: { eq: "p2p_local_currency.png" }) {
+            ...fadeIn
+        }
+        web_and_mobile: file(relativePath: { eq: "p2p_web_and_mobile.png" }) {
+            ...fadeIn
+        }
+    }
+`
+const DP2P = ({ P2P, reverse, two_title }) => {
+    const data = useStaticQuery(query)
+    return (
+        <StyledSection>
+            <StyledContainer>
+                <StyledText>
+                    {localize(
+                        'DP2P is Deriv’s peer-to-peer deposit and withdrawal service. It’s where you can get money in and out of your Deriv account via exchanges with fellow traders.',
+                    )}
+                </StyledText>
+                {P2P.map((item, index) => {
+                    let is_even = reverse ? (index + 1) % 2 : index % 2
+                    return (
+                        <Row flex_direction={!is_even ? 'row' : 'row-reverse'} key={index}>
+                            <Content margin_right={!is_even ? '12.6rem' : '0'}>
+                                <StyledHeader>{item.title}</StyledHeader>
+                                <Text>{item.subtitle}</Text>
+                                {two_title && (
+                                    <>
+                                        <StyledHeader mt="2.4rem">{item.second_title}</StyledHeader>
+                                        <Text>{item.second_subtitle}</Text>
+                                    </>
+                                )}
+                            </Content>
+                            <ImageWrapper margin_right={!is_even ? '0' : '12.6rem'}>
+                                <QueryImage
+                                    data={data[item.image_name]}
+                                    alt={data[item.image_alt]}
+                                    width="100%"
+                                />
+                            </ImageWrapper>
+                        </Row>
+                    )
+                })}
+            </StyledContainer>
+        </StyledSection>
+    )
+}
+
+DP2P.propTypes = {
+    P2P: PropTypes.array,
+    reverse: PropTypes.bool,
+    two_title: PropTypes.bool,
+}
+
+export default DP2P
diff --git a/src/pages/p2p/components/_exchange-steps.js b/src/pages/p2p/components/_exchange-steps.js
new file mode 100644
index 00000000000..5002d82417a
--- /dev/null
+++ b/src/pages/p2p/components/_exchange-steps.js
@@ -0,0 +1,178 @@
+import React from 'react'
+import styled from 'styled-components'
+import RightAd from 'images/svg/right-ad.svg'
+import SettlePayment from 'images/svg/settle-payment.svg'
+import CompleteOrder from 'images/svg/complete-order.svg'
+import { localize } from 'components/localization'
+import { Header, Text } from 'components/elements'
+import { Flex, SectionContainer } from 'components/containers'
+import device from 'themes/device'
+
+const Column = styled.div`
+    display: flex;
+    flex-direction: column;
+    flex-basis: 100%;
+    flex-grow: 0;
+    width: 10rem;
+
+    :first-child {
+        flex-basis: 10%;
+    }
+`
+
+const Row = styled.div`
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+`
+
+const Section = styled(SectionContainer)`
+    display: flex;
+    flex-direction: column;
+    padding: 8rem auto;
+    align-items: center;
+    justify-content: center;
+    box-shadow: inset 0 1px 0 0 var(--color-grey-8);
+
+    @media ${device.tablet} {
+        padding: 40px 16px;
+    }
+`
+const CardContainer = styled(Flex)`
+    @media ${device.laptopM} {
+        max-width: 58rem;
+        flex-wrap: wrap;
+    }
+`
+const Card = styled(Flex)`
+    flex-direction: column;
+    width: 38.4rem;
+    height: auto;
+    margin-right: 2.4rem;
+    margin-bottom: 2rem;
+    justify-content: flex-start;
+
+    :last-child {
+        margin-right: 0;
+    }
+
+    @media ${device.laptopM} {
+        margin-right: 0;
+        width: 328px;
+    }
+    @media ${device.tablet} {
+        margin-bottom: 40px;
+        max-width: 100%;
+
+        :last-child {
+            margin-bottom: 0;
+        }
+    }
+    @media ${device.mobileL} {
+        height: auto;
+
+        :last-child {
+            padding-bottom: 0;
+        }
+    }
+`
+const StyledHeader = styled(Header)`
+    @media ${device.tablet} {
+        margin-bottom: 24px;
+    }
+    @media ${device.mobileL} {
+        font-size: 24px;
+    }
+`
+const StyledCardHeader = styled(Header)`
+    font-size: 24px;
+
+    @media ${device.mobileL} {
+        font-size: 20px;
+        margin-bottom: 8px;
+        margin-top: 16px;
+        line-height: 1.2;
+    }
+`
+const StyledText = styled(Text)`
+    font-size: 2.4rem;
+
+    @media ${device.tabletL} {
+        font-size: 16px;
+    }
+`
+const ExchangeSteps = () => {
+    return (
+        <Section>
+            <StyledHeader align="center" mb="4rem" as="h2">
+                {localize('Exchange in 3 easy steps')}
+            </StyledHeader>
+            <CardContainer>
+                <Card>
+                    <Row>
+                        <img src={RightAd} alt="right ad" width="100%" />
+                    </Row>
+                    <Row>
+                        <Column>
+                            <StyledCardHeader mt="0.8rem" mb="0.8rem" as="h4">
+                                {'1.'}
+                            </StyledCardHeader>
+                        </Column>
+                        <Column>
+                            <StyledCardHeader mt="0.8rem" mb="0.8rem" as="h4">
+                                {localize('Find the right ad or create your own')}
+                            </StyledCardHeader>
+                            <StyledText>
+                                {localize(
+                                    'Look for the right rates and create an order. Don’t see the rates you want? Create your own ad!',
+                                )}
+                            </StyledText>
+                        </Column>
+                    </Row>
+                </Card>
+                <Card>
+                    <Row>
+                        <img src={SettlePayment} alt="settle payments" width="100%" />
+                    </Row>
+                    <Row>
+                        <Column>
+                            <StyledCardHeader mt="0.8rem" mb="0.8rem" as="h4">
+                                {'2.'}
+                            </StyledCardHeader>
+                        </Column>
+                        <Column>
+                            <StyledCardHeader mt="0.8rem" mb="0.8rem" as="h4">
+                                {localize('Settle the payment')}
+                            </StyledCardHeader>
+                            <StyledText>
+                                {localize('Send or receive payment via funds transfer.')}
+                            </StyledText>
+                        </Column>
+                    </Row>
+                </Card>
+                <Card>
+                    <Row>
+                        <img src={CompleteOrder} alt="complete order" width="100%" />
+                    </Row>
+                    <Row>
+                        <Column>
+                            <StyledCardHeader mt="0.8rem" mb="0.8rem" as="h4">
+                                {'3.'}
+                            </StyledCardHeader>
+                        </Column>
+                        <Column>
+                            <StyledCardHeader mt="0.8rem" mb="0.8rem" as="h4">
+                                {localize('Complete the exchange')}
+                            </StyledCardHeader>
+                            <StyledText>
+                                {localize('Every order must be completed within 2 hours.')}
+                            </StyledText>
+                        </Column>
+                    </Row>
+                </Card>
+            </CardContainer>
+        </Section>
+    )
+}
+
+export default ExchangeSteps
diff --git a/src/pages/p2p/components/_hero.js b/src/pages/p2p/components/_hero.js
new file mode 100644
index 00000000000..525355f9bb6
--- /dev/null
+++ b/src/pages/p2p/components/_hero.js
@@ -0,0 +1,244 @@
+import React from 'react'
+import styled from 'styled-components'
+import PropTypes from 'prop-types'
+import { graphql, useStaticQuery } from 'gatsby'
+import { Flex, Container, Show } from 'components/containers'
+import { Header, QueryImage, ImageWrapper } from 'components/elements'
+import { localize } from 'components/localization'
+import { Background } from 'components/elements/background-image'
+import { LinkButton } from 'components/form'
+import device from 'themes/device.js'
+
+const BackgroundWrapper = styled(Background)`
+    height: 100%;
+    width: 100%;
+`
+
+const Wrapper = styled(Container)`
+    justify-content: space-between;
+    background-color: transparent;
+    width: 80%;
+    height: 700px;
+
+    @media ${device.tabletL} {
+        height: 95.4rem;
+        flex-direction: column-reverse;
+        justify-content: center;
+    }
+    @media ${device.mobileM} {
+        height: 678px;
+    }
+`
+
+const ImgWrapper = styled.div`
+    width: 100%;
+    height: 100%;
+    max-width: 576px;
+    max-height: 700px;
+
+    .gatsby-image-wrapper {
+        width: 100%;
+        height: 100%;
+    }
+    ${ImageWrapper} {
+        width: 100%;
+        height: 100%;
+
+        picture > img {
+            object-fit: contain !important;
+        }
+    }
+
+    @media ${device.tabletL} {
+        max-width: 313px;
+        max-height: 380px;
+    }
+    @media ${device.mobileL} {
+        max-width: 240px;
+        max-height: 292px;
+    }
+`
+
+const InformationWrapper = styled(Flex)`
+    width: 100%;
+    max-width: 48.6rem;
+    z-index: 1;
+
+    @media ${device.tabletL} {
+        max-width: 40rem;
+    }
+    @media ${device.tablet} {
+        top: 280px;
+        max-width: 350px;
+        padding: 0 16px;
+    }
+    @media ${device.mobileL} {
+        max-width: 328px;
+    }
+    @media ${device.mobileM} {
+        padding: 0;
+    }
+`
+
+const HeroContent = styled(Flex)`
+    flex-direction: column;
+    justify-content: flex-start;
+    height: unset;
+
+    ${Header} {
+        font-size: 24px;
+        font-weight: 200;
+        color: var(--color-white);
+        display: flex;
+        margin-top: 1.6rem;
+        line-height: 3.6rem;
+    }
+    @media ${device.laptopM} {
+        ${Header} {
+            font-size: 22px;
+        }
+    }
+    @media ${device.tabletL} {
+        ${Header} {
+            font-size: 16px;
+        }
+    }
+    @media ${device.mobileL} {
+        ${Header} {
+            font-size: 20px;
+            line-height: 25px;
+            margin-top: 16px;
+        }
+    }
+`
+const StyledHeader = styled(Header)`
+    color: var(--color-white);
+    line-height: 10rem;
+    font-weight: 600;
+    display: flex;
+    font-size: 8rem;
+
+    @media ${device.laptopM} {
+        width: 40rem;
+        font-size: 6rem;
+        line-height: 8rem;
+    }
+    @media ${device.tabletL} {
+        margin-top: 2rem;
+        width: 45rem;
+        font-size: 40px;
+        line-height: 6rem;
+    }
+    @media ${device.mobileL} {
+        width: 250px;
+        line-height: 50px;
+    }
+`
+
+const TryButton = styled(LinkButton)`
+    padding: 14px 16px;
+    width: 125px;
+    font-size: 14px;
+    margin-top: 3.2rem;
+    margin-bottom: 40px;
+    border: unset;
+
+    @media ${device.mobileL} {
+        padding: 1.5rem 1.6rem;
+        height: 42px;
+        white-space: nowrap;
+        margin-bottom: 2rem;
+    }
+    @media ${device.mobileL} {
+        margin-top: 24px;
+        margin-bottom: 40px;
+    }
+`
+
+const HeroComponent = ({ title, content, background_data, img_data }) => {
+    return (
+        <BackgroundWrapper data={background_data}>
+            <Wrapper>
+                <InformationWrapper height="unset" direction="column">
+                    <StyledHeader as="h1" weight={500}>
+                        {title}
+                    </StyledHeader>
+                    <HeroContent>
+                        <Header as="h1">{content}</Header>
+                    </HeroContent>
+                    <TryButton
+                        secondary="true"
+                        to="/cashier/P2P"
+                        external="true"
+                        is_deriv_app_link
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        {localize('Try DP2P now')}
+                    </TryButton>
+                </InformationWrapper>
+                <ImgWrapper>
+                    <QueryImage
+                        data={img_data}
+                        alt={'p2p background'}
+                        height={'700px'}
+                        width={'576px'}
+                    />
+                </ImgWrapper>
+            </Wrapper>
+        </BackgroundWrapper>
+    )
+}
+
+const query = graphql`
+    query {
+        p2p_hero_background: file(relativePath: { eq: "p2p_hero_background.png" }) {
+            ...fadeIn
+        }
+        p2p_hero_background_mobile: file(relativePath: { eq: "p2p_hero_background_mobile.png" }) {
+            ...fadeIn
+        }
+        p2p_hero_img: file(relativePath: { eq: "p2p_hero_img.png" }) {
+            ...fadeIn
+        }
+    }
+`
+
+const Hero = ({ title, content }) => {
+    const data = useStaticQuery(query)
+
+    return (
+        <div>
+            <Show.Desktop min_width="992">
+                <HeroComponent
+                    title={title}
+                    content={content}
+                    background_data={data['p2p_hero_background']}
+                    img_data={data['p2p_hero_img']}
+                />
+            </Show.Desktop>
+            <Show.Mobile>
+                <HeroComponent
+                    title={title}
+                    content={content}
+                    background_data={data['p2p_hero_background_mobile']}
+                    img_data={data['p2p_hero_img']}
+                />
+            </Show.Mobile>
+        </div>
+    )
+}
+
+HeroComponent.propTypes = {
+    background_data: PropTypes.any,
+    content: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+    img_data: PropTypes.any,
+    title: PropTypes.string,
+}
+
+Hero.propTypes = {
+    content: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+    title: PropTypes.string,
+}
+
+export default Hero
diff --git a/src/pages/p2p/components/_numbers.js b/src/pages/p2p/components/_numbers.js
new file mode 100644
index 00000000000..ad29de78500
--- /dev/null
+++ b/src/pages/p2p/components/_numbers.js
@@ -0,0 +1,143 @@
+import React from 'react'
+import styled from 'styled-components'
+import { Flex, SectionContainer } from 'components/containers'
+import { Header, Text } from 'components/elements'
+import { Localize, localize } from 'components/localization'
+import { LinkButton } from 'components/form'
+import device from 'themes/device'
+
+const content = [
+    {
+        header: <Localize translate_text="2000+" />,
+        text: <Localize translate_text="active users" />,
+    },
+    {
+        header: <Localize translate_text="USD500k+" />,
+        text: <Localize translate_text="exchanged to date" />,
+    },
+]
+
+const Section = styled(SectionContainer)`
+    display: flex;
+    padding: 8rem 12rem;
+    margin-top: 20rem;
+    justify-content: center;
+    flex-direction: column;
+    background-color: var(--color-grey-30);
+
+    @media ${device.tabletL} {
+        padding: 6.4rem 7.2rem;
+    }
+    @media ${device.tablet} {
+        margin-top: 40px;
+        padding: 40px 16px;
+    }
+`
+
+const ClientCard = styled.article`
+    margin-left: 2.4rem;
+    margin-top: -20rem;
+    background-color: var(--color-white);
+    border-radius: 10px;
+    box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.2);
+    width: 38.4rem;
+    height: 21.6rem;
+    padding: 5.2rem;
+    position: relative;
+
+    :first-child {
+        margin: -20rem 0 0 0;
+    }
+    @media ${device.laptopM} {
+        min-height: 22rem;
+        height: 100%;
+    }
+    @media ${device.tablet} {
+        margin: 0 0 24px 0;
+        max-height: unset;
+        width: 328px;
+        height: 184px;
+        padding: 46px 44px;
+
+        :first-child {
+            margin: 0 0 24px 0;
+        }
+        :last-child {
+            margin-bottom: 0;
+        }
+    }
+    @media ${device.mobileM} {
+        max-width: 290px;
+        height: unset;
+    }
+`
+const StyledHeader = styled(Header)`
+    text-align: center;
+    font-size: 48px;
+
+    @media ${device.tablet} {
+        font-size: 40px;
+        line-height: 50px;
+        margin-bottom: 16px;
+    }
+`
+const StyledText = styled(Text)`
+    font-size: 24px;
+    text-align: center;
+
+    @media ${device.tablet} {
+        font-size: 20px;
+        line-height: 25px;
+    }
+`
+
+const StyledLinkButton = styled(LinkButton)`
+    padding: 14px 16px;
+    font-size: 14px;
+    border: unset;
+    width: 125px;
+    margin: 80px auto 0 auto;
+    white-space: nowrap;
+
+    @media ${device.tablet} {
+        margin-top: 40px;
+    }
+`
+
+const Numbers = () => {
+    return (
+        <Section>
+            <Flex tablet_direction="column" tablet_ai="center" tablet={{ m: '0' }}>
+                {content.map((item, idx) => {
+                    return (
+                        <ClientCard key={idx}>
+                            <Flex height="unset" ai="center" mobileL={{ mb: '8px' }}>
+                                <StyledHeader
+                                    mobile_margin="unset"
+                                    mobile_font_size="20px"
+                                    mb="0.8rem"
+                                    as="h4"
+                                >
+                                    {item.header}
+                                </StyledHeader>
+                            </Flex>
+                            <StyledText>{item.text}</StyledText>
+                        </ClientCard>
+                    )
+                })}
+            </Flex>
+            <StyledLinkButton
+                secondary="true"
+                to="/cashier/p2p"
+                external="true"
+                is_deriv_app_link
+                target="_blank"
+                rel="noopener noreferrer"
+            >
+                {localize('Try DP2P now')}
+            </StyledLinkButton>
+        </Section>
+    )
+}
+
+export default Numbers
diff --git a/src/pages/p2p/components/_p2pbanner.js b/src/pages/p2p/components/_p2pbanner.js
new file mode 100644
index 00000000000..d787a1891d6
--- /dev/null
+++ b/src/pages/p2p/components/_p2pbanner.js
@@ -0,0 +1,168 @@
+import React from 'react'
+import styled from 'styled-components'
+import PropTypes from 'prop-types'
+import { graphql, useStaticQuery } from 'gatsby'
+import { Flex, Container, Show } from 'components/containers'
+import { Header } from 'components/elements'
+import { LinkButton } from 'components/form'
+import { localize } from 'components/localization'
+import device from 'themes/device.js'
+import { Background } from 'components/elements/background-image'
+
+const Wrapper = styled(Container)`
+    padding-left: 8rem;
+    height: 34rem;
+    justify-content: flex-start;
+    background-color: transparent;
+
+    @media ${device.tabletL} {
+        justify-content: center;
+        align-items: flex-start;
+        height: 402px;
+        padding-left: 0;
+        padding-right: 0;
+    }
+    @media ${device.laptopM} {
+        padding-left: 80px;
+    }
+    @media ${device.tabletL} {
+        height: unset;
+        padding: 0 16px 40px 16px;
+    }
+    @media ${device.mobileL} {
+        padding: 0 0 40px 0;
+    }
+`
+const TryButton = styled(LinkButton)`
+    padding: 14px 16px;
+    width: 125px;
+    font-size: 14px;
+    margin-top: 2.4rem;
+    border: unset;
+
+    @media ${device.mobileL} {
+        padding: 1.5rem 1.6rem;
+        height: 42px;
+        white-space: nowrap;
+    }
+    @media (max-width: 460px) {
+        margin-bottom: 2rem;
+    }
+`
+const InformationWrapper = styled(Flex)`
+    width: 100%;
+    max-width: 48.6rem;
+    z-index: 1;
+
+    @media (max-width: 1376px) {
+        max-width: 44rem;
+    }
+    @media ${device.tabletL} {
+        max-width: 576px;
+        margin-top: 2.5rem;
+        align-items: center;
+    }
+    @media ${device.tablet} {
+        top: 280px;
+        max-width: 576px;
+        padding: 0 0;
+    }
+`
+const StyledHeader = styled(Header)`
+    font-size: 3.2rem;
+    font-weight: bold;
+    line-height: 1.25;
+    color: var(--color-white);
+
+    @media ${device.laptopM} {
+        font-size: 4rem;
+        max-width: 60rem;
+    }
+    @media ${device.tabletL} {
+        font-size: 40px;
+        text-align: center;
+        margin-top: 40px;
+    }
+    @media ${device.tabletS} {
+        font-size: 32px;
+        margin-top: 20px;
+    }
+    @media ${device.mobileL} {
+        margin-top: 0;
+    }
+`
+
+const query = graphql`
+    query {
+        p2p_banner: file(relativePath: { eq: "p2p_banner.png" }) {
+            ...fadeIn
+        }
+        p2p_banner_mobile: file(relativePath: { eq: "p2p_banner_mobile.png" }) {
+            ...fadeIn
+        }
+    }
+`
+
+const P2PBanner = ({ title }) => {
+    const data = useStaticQuery(query)
+
+    return (
+        <div>
+            <Show.Desktop min_width="992">
+                <Background
+                    style={{ height: '340px', backgroundPosition: '20% 20%' }}
+                    data={data['p2p_banner']}
+                >
+                    <Wrapper>
+                        <InformationWrapper height="unset" direction="column">
+                            <StyledHeader as="h3" weight={500}>
+                                {title}
+                            </StyledHeader>
+                            <TryButton
+                                secondary="true"
+                                to="/cashier/P2P"
+                                external="true"
+                                is_deriv_app_link
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                {localize('Try DP2P now')}
+                            </TryButton>
+                        </InformationWrapper>
+                    </Wrapper>
+                </Background>
+            </Show.Desktop>
+            <Show.Mobile>
+                <Background
+                    style={{ height: '402px', backgroundPosition: '40% 50%' }}
+                    data={data['p2p_banner_mobile']}
+                >
+                    <Wrapper>
+                        <InformationWrapper height="unset" direction="column">
+                            <StyledHeader as="h3" weight={500}>
+                                {title}
+                            </StyledHeader>
+                            <TryButton
+                                secondary="true"
+                                to="/cashier/P2P"
+                                external="true"
+                                is_deriv_app_link
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                {localize('Try DP2P now')}
+                            </TryButton>
+                        </InformationWrapper>
+                    </Wrapper>
+                </Background>
+            </Show.Mobile>
+        </div>
+    )
+}
+
+P2PBanner.propTypes = {
+    image_name: PropTypes.string,
+    title: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+}
+
+export default P2PBanner
diff --git a/src/pages/p2p/v1/index.js b/src/pages/p2p/v1/index.js
new file mode 100644
index 00000000000..f1c796c2925
--- /dev/null
+++ b/src/pages/p2p/v1/index.js
@@ -0,0 +1,64 @@
+import React from 'react'
+import Hero from '../components/_hero'
+import DP2P from '../components/_dp2p'
+import ExchangeSteps from '../components/_exchange-steps'
+import P2PBanner from '../components/_p2pbanner'
+import Numbers from '../components/_numbers'
+import Availability from '../components/_availability'
+import { localize, Localize, WithIntl } from 'components/localization'
+import Layout from 'components/layout/layout'
+import { SEO } from 'components/containers'
+
+const DP2P_CONTENT = [
+    {
+        title: <Localize translate_text="Save time" />,
+        subtitle: <Localize translate_text="Exchange in minutes. Less waiting, more trading." />,
+
+        image_name: 'buy_sell',
+        image_alt: localize('Buy and sell'),
+    },
+    {
+        title: <Localize translate_text="Works in your local currency" />,
+        subtitle: <Localize translate_text="Exchange with fellow traders at pre-agreed rates." />,
+
+        image_name: 'local_currency',
+        image_alt: localize('Local currency'),
+    },
+    {
+        title: <Localize translate_text="Available as web and mobile apps" />,
+        subtitle: (
+            <Localize translate_text="Easily make deposits and withdrawals on your desktop and mobile devices." />
+        ),
+
+        image_name: 'web_and_mobile',
+        image_alt: localize('Web and mobile apps'),
+    },
+]
+
+const DP2P_v1 = () => {
+    return (
+        <Layout type="p2p" nav_type="p2p-v1" no_live_chat>
+            <SEO
+                title={localize('DP2P')}
+                description={localize('Hassle-free deposits and withdrawals')}
+            />
+            <Hero
+                title={localize('Hassle-free deposits and withdrawals')}
+                content={
+                    <Localize translate_text="Can’t make deposits and withdrawals in your local currency? No problem. Exchange with fellow traders in minutes." />
+                }
+                image_name="DP2P"
+            />
+            <DP2P reverse P2P={DP2P_CONTENT} />
+            <Numbers />
+            <ExchangeSteps />
+            <Availability />
+            <P2PBanner
+                title={localize('Get hassle-free deposits and withdrawals today')}
+                image_name="DP2P"
+            />
+        </Layout>
+    )
+}
+
+export default WithIntl()(DP2P_v1)
diff --git a/src/pages/p2p/v2/index.js b/src/pages/p2p/v2/index.js
new file mode 100644
index 00000000000..2485a9ba411
--- /dev/null
+++ b/src/pages/p2p/v2/index.js
@@ -0,0 +1,64 @@
+import React from 'react'
+import Hero from '../components/_hero'
+import DP2P from '../components/_dp2p'
+import ExchangeSteps from '../components/_exchange-steps'
+import P2PBanner from '../components/_p2pbanner'
+import Numbers from '../components/_numbers'
+import Availability from '../components/_availability'
+import { localize, Localize, WithIntl } from 'components/localization'
+import Layout from 'components/layout/layout'
+import { SEO } from 'components/containers'
+
+const DP2P_CONTENT = [
+    {
+        title: <Localize translate_text="Save time" />,
+        subtitle: <Localize translate_text="Exchange in minutes. Less waiting, more trading." />,
+
+        image_name: 'buy_sell',
+        image_alt: localize('Buy and sell'),
+    },
+    {
+        title: <Localize translate_text="Works in your local currency" />,
+        subtitle: <Localize translate_text="Exchange with fellow traders at pre-agreed rates." />,
+
+        image_name: 'local_currency',
+        image_alt: localize('Local currency'),
+    },
+    {
+        title: <Localize translate_text="Available as web and mobile apps" />,
+        subtitle: (
+            <Localize translate_text="Easily make deposits and withdrawals on your desktop and mobile devices." />
+        ),
+
+        image_name: 'web_and_mobile',
+        image_alt: localize('Web and mobile apps'),
+    },
+]
+
+const DP2P_v2 = () => {
+    return (
+        <Layout type="p2p" no_live_chat>
+            <SEO
+                title={localize('DP2P')}
+                description={localize('Faster deposits and withdrawals')}
+            />
+            <Hero
+                title={localize('Faster deposits and withdrawals')}
+                content={
+                    <Localize translate_text="Waiting too long? With DP2P, it just takes minutes. Spend more time on things that really matter." />
+                }
+                image_name="DP2P"
+            />
+            <DP2P reverse P2P={DP2P_CONTENT} />
+            <Numbers />
+            <ExchangeSteps />
+            <Availability />
+            <P2PBanner
+                title={localize('Get speedier deposits and withdrawals today')}
+                image_name="DP2P"
+            />
+        </Layout>
+    )
+}
+
+export default WithIntl()(DP2P_v2)
diff --git a/src/pages/reset-password/index.js b/src/pages/reset-password/index.js
index 0cf368b69f3..095a216328a 100644
--- a/src/pages/reset-password/index.js
+++ b/src/pages/reset-password/index.js
@@ -47,7 +47,9 @@ const resetSubmission = (values, actions) => {
     const binary_socket = BinarySocketBase.init()
 
     binary_socket.onopen = () => {
-        binary_socket.send(JSON.stringify({ verify_email: trimSpaces(values.email), type: 'reset_password' }))
+        binary_socket.send(
+            JSON.stringify({ verify_email: trimSpaces(values.email), type: 'reset_password' }),
+        )
     }
     binary_socket.onmessage = (msg) => {
         const response = JSON.parse(msg.data)