diff --git a/src/pages/p2p/components/_dp2p.js b/src/pages/p2p/components/_dp2p.js
index 61dfedb887f..c8bf157a565 100644
--- a/src/pages/p2p/components/_dp2p.js
+++ b/src/pages/p2p/components/_dp2p.js
@@ -3,7 +3,7 @@ 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 { Container, SectionContainer, Show } from 'components/containers'
 import { Header, Text, QueryImage } from 'components/elements'
 import { localize } from 'components/localization'
 
@@ -57,6 +57,7 @@ const StyledHeader = styled(Header)`
     line-height: 1.25;
 
     @media ${device.tabletL} {
+        width: 98%;
         margin-top: 0;
         text-align: center;
         font-size: 24px;
@@ -116,7 +117,12 @@ const DP2P = ({ P2P, reverse, two_title }) => {
                         <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>
+                                <Show.Desktop>
+                                    <Text>{item.subtitle}</Text>
+                                </Show.Desktop>
+                                <Show.Mobile>
+                                    <Text>{item.subtitle_mobile}</Text>
+                                </Show.Mobile>
                                 {two_title && (
                                     <>
                                         <StyledHeader mt="2.4rem">{item.second_title}</StyledHeader>
diff --git a/src/pages/p2p/components/_exchange-steps.js b/src/pages/p2p/components/_exchange-steps.js
index 5002d82417a..d23f143168f 100644
--- a/src/pages/p2p/components/_exchange-steps.js
+++ b/src/pages/p2p/components/_exchange-steps.js
@@ -46,7 +46,7 @@ const CardContainer = styled(Flex)`
 `
 const Card = styled(Flex)`
     flex-direction: column;
-    width: 38.4rem;
+    width: 38.1rem;
     height: auto;
     margin-right: 2.4rem;
     margin-bottom: 2rem;
diff --git a/src/pages/p2p/components/_hero.js b/src/pages/p2p/components/_hero.js
index 8801346b2f3..e91bfc6309f 100644
--- a/src/pages/p2p/components/_hero.js
+++ b/src/pages/p2p/components/_hero.js
@@ -18,16 +18,12 @@ const Wrapper = styled(Container)`
     justify-content: space-between;
     background-color: transparent;
     width: 80%;
-    height: 700px;
+    height: unset;
 
     @media ${device.tabletL} {
-        height: 95.4rem;
         flex-direction: column-reverse;
         justify-content: center;
     }
-    @media ${device.mobileM} {
-        height: 678px;
-    }
 `
 
 const ImgWrapper = styled.div`
@@ -61,11 +57,11 @@ const ImgWrapper = styled.div`
 
 const InformationWrapper = styled(Flex)`
     width: 100%;
-    max-width: 48.6rem;
+    max-width: 60.5rem;
     z-index: 1;
 
     @media ${device.tabletL} {
-        max-width: 40rem;
+        max-width: 42rem;
     }
     @media ${device.tablet} {
         top: 280px;
@@ -92,6 +88,7 @@ const HeroContent = styled(Flex)`
         display: flex;
         margin-top: 1.6rem;
         line-height: 3.6rem;
+        max-width: 78%;
     }
     @media ${device.laptopM} {
         ${Header} {
@@ -101,6 +98,7 @@ const HeroContent = styled(Flex)`
     @media ${device.tabletL} {
         ${Header} {
             font-size: 16px;
+            max-width: 74%;
         }
     }
     @media ${device.mobileL} {
@@ -110,6 +108,11 @@ const HeroContent = styled(Flex)`
             margin-top: 16px;
         }
     }
+    @media ${device.mobileS} {
+        ${Header} {
+            max-width: 98%;
+        }
+    }
 `
 const StyledHeader = styled(Header)`
     color: var(--color-white);
@@ -119,25 +122,24 @@ const StyledHeader = styled(Header)`
     font-size: 8rem;
 
     @media ${device.laptopM} {
-        width: 40rem;
+        width: 100%;
         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;
+    width: min-content;
+    white-space: nowrap;
     font-size: 14px;
     margin-top: 3.2rem;
     margin-bottom: 40px;
@@ -164,7 +166,7 @@ const HeroComponent = ({ title, content, background_data, img_data }) => {
                         {title}
                     </StyledHeader>
                     <HeroContent>
-                        <Header as="h1">{content}</Header>
+                        <Header as="h2">{content}</Header>
                     </HeroContent>
                     <TryButton
                         secondary="true"
diff --git a/src/pages/p2p/components/_numbers.js b/src/pages/p2p/components/_numbers.js
index ad29de78500..c9a3fd1e428 100644
--- a/src/pages/p2p/components/_numbers.js
+++ b/src/pages/p2p/components/_numbers.js
@@ -41,22 +41,23 @@ const ClientCard = styled.article`
     border-radius: 10px;
     box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.2);
     width: 38.4rem;
-    height: 21.6rem;
+    height: unset;
     padding: 5.2rem;
     position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
 
     :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 {
@@ -68,7 +69,6 @@ const ClientCard = styled.article`
     }
     @media ${device.mobileM} {
         max-width: 290px;
-        height: unset;
     }
 `
 const StyledHeader = styled(Header)`
@@ -95,7 +95,7 @@ const StyledLinkButton = styled(LinkButton)`
     padding: 14px 16px;
     font-size: 14px;
     border: unset;
-    width: 125px;
+    width: min-content;
     margin: 80px auto 0 auto;
     white-space: nowrap;
 
diff --git a/src/pages/p2p/components/_p2pbanner.js b/src/pages/p2p/components/_p2pbanner.js
index c28fe0c4854..fe67987cf0e 100644
--- a/src/pages/p2p/components/_p2pbanner.js
+++ b/src/pages/p2p/components/_p2pbanner.js
@@ -35,7 +35,8 @@ const Wrapper = styled(Container)`
 `
 const TryButton = styled(LinkButton)`
     padding: 14px 16px;
-    width: 125px;
+    width: min-content;
+    white-space: nowrap;
     font-size: 14px;
     margin-top: 2.4rem;
     border: unset;
@@ -43,7 +44,6 @@ const TryButton = styled(LinkButton)`
     @media ${device.mobileL} {
         padding: 1.5rem 1.6rem;
         height: 42px;
-        white-space: nowrap;
     }
     @media (max-width: 460px) {
         margin-bottom: 2rem;
@@ -84,7 +84,8 @@ const StyledHeader = styled(Header)`
         margin-top: 40px;
     }
     @media ${device.tabletS} {
-        font-size: 32px;
+        font-size: 24px;
+        max-width: 70%;
         margin-top: 20px;
     }
     @media ${device.mobileL} {
diff --git a/src/pages/p2p/v1/index.js b/src/pages/p2p/v1/index.js
index f1c796c2925..8d877130f93 100644
--- a/src/pages/p2p/v1/index.js
+++ b/src/pages/p2p/v1/index.js
@@ -13,6 +13,12 @@ const DP2P_CONTENT = [
     {
         title: <Localize translate_text="Save time" />,
         subtitle: <Localize translate_text="Exchange in minutes. Less waiting, more trading." />,
+        subtitle_mobile: (
+            <Localize
+                translate_text="Exchange in minutes.<0 />Less waiting, more trading."
+                components={[<br key={0} />]}
+            />
+        ),
 
         image_name: 'buy_sell',
         image_alt: localize('Buy and sell'),
@@ -20,6 +26,9 @@ const DP2P_CONTENT = [
     {
         title: <Localize translate_text="Works in your local currency" />,
         subtitle: <Localize translate_text="Exchange with fellow traders at pre-agreed rates." />,
+        subtitle_mobile: (
+            <Localize translate_text="Exchange with fellow traders at pre-agreed rates." />
+        ),
 
         image_name: 'local_currency',
         image_alt: localize('Local currency'),
@@ -29,6 +38,9 @@ const DP2P_CONTENT = [
         subtitle: (
             <Localize translate_text="Easily make deposits and withdrawals on your desktop and mobile devices." />
         ),
+        subtitle_mobile: (
+            <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'),
diff --git a/src/pages/p2p/v2/index.js b/src/pages/p2p/v2/index.js
index 2485a9ba411..ae0281d1559 100644
--- a/src/pages/p2p/v2/index.js
+++ b/src/pages/p2p/v2/index.js
@@ -7,12 +7,18 @@ 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'
+import { SEO, Show } from 'components/containers'
 
 const DP2P_CONTENT = [
     {
         title: <Localize translate_text="Save time" />,
         subtitle: <Localize translate_text="Exchange in minutes. Less waiting, more trading." />,
+        subtitle_mobile: (
+            <Localize
+                translate_text="Exchange in minutes.<0 />Less waiting, more trading."
+                components={[<br key={0} />]}
+            />
+        ),
 
         image_name: 'buy_sell',
         image_alt: localize('Buy and sell'),
@@ -20,6 +26,9 @@ const DP2P_CONTENT = [
     {
         title: <Localize translate_text="Works in your local currency" />,
         subtitle: <Localize translate_text="Exchange with fellow traders at pre-agreed rates." />,
+        subtitle_mobile: (
+            <Localize translate_text="Exchange with fellow traders at pre-agreed rates." />
+        ),
 
         image_name: 'local_currency',
         image_alt: localize('Local currency'),
@@ -29,6 +38,9 @@ const DP2P_CONTENT = [
         subtitle: (
             <Localize translate_text="Easily make deposits and withdrawals on your desktop and mobile devices." />
         ),
+        subtitle_mobile: (
+            <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'),
@@ -42,13 +54,29 @@ const DP2P_v2 = () => {
                 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"
-            />
+            <Show.Desktop>
+                <Hero
+                    title={
+                        <Localize
+                            translate_text="Faster <0 />deposits and withdrawals"
+                            components={[<br key={0} />]}
+                        />
+                    }
+                    content={
+                        <Localize translate_text="Waiting too long? With DP2P, it just takes minutes. Spend more time on things that really matter." />
+                    }
+                    image_name="DP2P"
+                />
+            </Show.Desktop>
+            <Show.Mobile>
+                <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"
+                />
+            </Show.Mobile>
             <DP2P reverse P2P={DP2P_CONTENT} />
             <Numbers />
             <ExchangeSteps />