diff --git a/src/components/layout/layout.js b/src/components/layout/layout.js
index aff8858691d..504ad26e702 100644
--- a/src/components/layout/layout.js
+++ b/src/components/layout/layout.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import useGTMData from '../hooks/use-gtm-data'
 import Copyright from './copyright'
-import { Nav, NavStatic, NavPartners, NavInterim, NavAboutUs } from './nav'
+import { Nav, NavStatic, NavPartners, NavInterim, NavSticky } from './nav'
 import JumpIndicesNav from './jump-indices/nav'
 import { NavCareers } from './nav-careers'
 import { LocationProvider } from './location-context'
@@ -205,7 +205,7 @@ const Layout = ({
             FooterNav = <Footer no_language={true} type={type} />
             break
         case 'about-us':
-            Navigation = <NavAboutUs is_ppc_redirect={is_ppc_redirect} is_ppc={is_ppc} />
+            Navigation = <NavSticky is_ppc_redirect={is_ppc_redirect} is_ppc={is_ppc} />
             FooterNav = <Footer is_ppc={is_ppc} is_ppc_redirect={is_ppc_redirect} />
             break
         default:
diff --git a/src/components/layout/nav.js b/src/components/layout/nav.js
index b813d98cee5..cc56668298f 100644
--- a/src/components/layout/nav.js
+++ b/src/components/layout/nav.js
@@ -7,7 +7,7 @@ import PlatformsDropdown from '../custom/platforms-dropdown'
 import { useOutsideClick } from 'components/hooks/use-outside-click'
 import { LocalizedLink, localize, LanguageSwitcher } from 'components/localization'
 import { Button, LinkButton } from 'components/form'
-import { Container, Show, Flex, SectionContainer } from 'components/containers'
+import { Container, Flex, SectionContainer } from 'components/containers'
 import {
     OffCanvasMenu,
     OffCanvasMenuPartner,
@@ -44,6 +44,20 @@ const query = graphql`
     }
 `
 
+export const DesktopWrapper = styled.div`
+    display: block;
+    @media ${(props) => props.media || device.tabletL} {
+        display: none;
+    }
+`
+
+export const MobileWrapper = styled.div`
+    display: none;
+    @media ${(props) => props.media || device.tabletL} {
+        display: block;
+    }
+`
+
 const LanguageSwitcherNavDesktop = ({ no_language }) =>
     !no_language && <LanguageSwitcher short_name="true" is_high_nav />
 
@@ -653,7 +667,7 @@ export const Nav = ({
         <>
             <NavWrapperMain>
                 <StyledNavMain>
-                    <Show.Desktop max_width="bp1060">
+                    <DesktopWrapper media={device.bp1060}>
                         <NavDesktop
                             no_language={no_language}
                             academy_logo={academy_logo}
@@ -663,8 +677,8 @@ export const Nav = ({
                             is_logged_in={is_logged_in}
                             hide_signup_login={hide_signup_login}
                         />
-                    </Show.Desktop>
-                    <Show.Mobile min_width="bp1060">
+                    </DesktopWrapper>
+                    <MobileWrapper media={device.bp1060}>
                         <NavMobile
                             no_language={no_language}
                             academy_logo={academy_logo}
@@ -672,7 +686,7 @@ export const Nav = ({
                             is_logged_in={is_logged_in}
                             hide_signup_login={hide_signup_login}
                         />
-                    </Show.Mobile>
+                    </MobileWrapper>
                 </StyledNavMain>
             </NavWrapperMain>
             <CFDWarning />
@@ -748,7 +762,7 @@ export const NavInterim = ({ interim_type }) => (
         <NavInterimContainer>
             <Container jc="space-between" p="2.4rem 0">
                 <Flex ai="center" jc="flex-start">
-                    <Show.Desktop>
+                    <DesktopWrapper>
                         <StyledLogo to={`/interim/${interim_type}`} aria-label={localize('Home')}>
                             <Flex ai="center">
                                 <img src={Logo} alt="logo" width="190" height="27" />
@@ -760,8 +774,8 @@ export const NavInterim = ({ interim_type }) => (
                                 />
                             </Flex>
                         </StyledLogo>
-                    </Show.Desktop>
-                    <Show.Mobile>
+                    </DesktopWrapper>
+                    <MobileWrapper>
                         <LogoLinkMobile
                             to={`/interim/${interim_type}`}
                             aria-label={localize('Home')}
@@ -779,7 +793,7 @@ export const NavInterim = ({ interim_type }) => (
                                 </LogoDescription>
                             </Flex>
                         </LogoLinkMobile>
-                    </Show.Mobile>
+                    </MobileWrapper>
                 </Flex>
                 <Auto jc="flex-end" ai="center">
                     <LanguageSwitcher short_name="true" />
@@ -889,7 +903,7 @@ const StyledNavWrapper = styled(Wrapper)`
     }
 `
 
-const Mobile = styled(Show.Mobile)`
+const Mobile = styled(MobileWrapper)`
     width: 100%;
 `
 
@@ -929,7 +943,7 @@ const LSContainer = styled(Container)`
     margin-left: 200px;
 `
 
-const DesktopLS = styled(Show.Desktop)`
+const DesktopLS = styled(DesktopWrapper)`
     z-index: 2;
 `
 
@@ -1099,12 +1113,12 @@ export const NavPartners = ({ no_login_signup }) => {
                                         target="_blank"
                                         primary
                                     >
-                                        <Show.Desktop>
+                                        <DesktopWrapper>
                                             <span>{localize('Affiliate & IB log in')}</span>
-                                        </Show.Desktop>
-                                        <Show.Mobile>
+                                        </DesktopWrapper>
+                                        <MobileWrapper>
                                             <span>{localize('Log in')}</span>
-                                        </Show.Mobile>
+                                        </MobileWrapper>
                                     </LinkMobileLogin>
                                 )}
                             </Flex>
@@ -1158,7 +1172,7 @@ const Section = styled(SectionContainer)`
     }
 `
 
-export const NavAboutUs = ({ is_ppc, hide_signup_login, no_language }) => {
+export const NavSticky = ({ is_ppc, hide_signup_login, no_language }) => {
     const [is_logged_in, setLoggedIn] = useState(true)
     const [prevScrollPos, setPrevScrollPos] = useState(0)
     const [visible, setVisible] = useState(true)
@@ -1189,29 +1203,29 @@ export const NavAboutUs = ({ is_ppc, hide_signup_login, no_language }) => {
     return (
         <>
             <Section background={visible}>
-                <Show.Desktop max_width="bp1060">
+                <DesktopWrapper media={device.bp1060}>
                     <NavDesktop
                         no_language={no_language}
                         is_ppc={is_ppc}
                         is_logged_in={is_logged_in}
                         hide_signup_login={hide_signup_login}
                     />
-                </Show.Desktop>
-                <Show.Mobile min_width="bp1060">
+                </DesktopWrapper>
+                <MobileWrapper media={device.bp1060}>
                     <NavMobile
                         no_language={no_language}
                         is_ppc={is_ppc}
                         is_logged_in={is_logged_in}
                         hide_signup_login={hide_signup_login}
                     />
-                </Show.Mobile>
+                </MobileWrapper>
             </Section>
             <CFDWarning no_eu_banner={true} />
         </>
     )
 }
 
-NavAboutUs.propTypes = {
+NavSticky.propTypes = {
     academy_logo: PropTypes.bool,
     base: PropTypes.string,
     hide_signup_login: PropTypes.bool,
diff --git a/src/pages/about-us/_AboutUsBanner.tsx b/src/pages/about-us/_AboutUsBanner.tsx
index 13e3631f5af..a60aa0f82b2 100644
--- a/src/pages/about-us/_AboutUsBanner.tsx
+++ b/src/pages/about-us/_AboutUsBanner.tsx
@@ -53,16 +53,6 @@ const PictureFlex = styled(Flex)`
         width: 250px;
     }
 `
-const StyledHeader = styled(Header)`
-    color: var(--color-white);
-    margin-bottom: 16px;
-    line-height: 40px;
-
-    @media ${device.tablet} {
-        font-size: 28px;
-        line-height: 34px;
-    }
-`
 const Styledtext = styled(Text)`
     color: var(--color-white);
     margin-bottom: 24px;
@@ -73,10 +63,10 @@ const AboutUsBanner = () => {
         <StyledSectionContainer>
             <StyledFlex direction="column" height="288px" width="1200px">
                 <PictureFlex jc="start" ai="start" direction="column">
-                    <StyledHeader width="100%" type="unset" as="h2" size="32px">
+                    <Header as="h3" width="100%" type="heading-3" color="white" mb="18px">
                         {localize('We have a huge mission, an incredible team, and rapid growth.')}
-                    </StyledHeader>
-                    <Styledtext width="100%" type="paragraph-2" as="p">
+                    </Header>
+                    <Styledtext width="100%" type="subtitle-1" as="p">
                         {localize('Join and grow with us.')}
                     </Styledtext>
                     <LinkButton
diff --git a/src/pages/about-us/_OurPrinciples.tsx b/src/pages/about-us/_OurPrinciples.tsx
index a77a447e525..bc8fc221181 100644
--- a/src/pages/about-us/_OurPrinciples.tsx
+++ b/src/pages/about-us/_OurPrinciples.tsx
@@ -19,14 +19,7 @@ const StyledSection = styled(SectionContainer)`
         padding: 40px 16px;
     }
 `
-const StyledHeader = styled(Header)`
-    margin: 0 0 40px 0;
-    padding: 0;
-    @media ${device.laptop} {
-        font-size: 28px;
-        margin-bottom: 24px;
-    }
-`
+
 const StyledDivider = styled(Divider)`
     margin: 0;
     @media (min-width: 824px) {
@@ -88,9 +81,9 @@ const ColoredBox = styled(Box)`
 const OurPrinciples = () => {
     return (
         <StyledSection>
-            <StyledHeader as="h2" size="48px" align="center" type="page-title">
+            <Header as="h2" align="center" type="heading-2" mb="40px" laptop={{ mb: '24px' }}>
                 {localize('Our principles are the framework for our decisions')}
-            </StyledHeader>
+            </Header>
             <StyledFlex wrap="wrap" jc="left" ai="center">
                 {our_principles.map((principle) => (
                     <div key={principle.title}>
diff --git a/src/pages/our-principles/index.tsx b/src/pages/our-principles/index.tsx
index 689dbbf403d..eec1a4d29fe 100644
--- a/src/pages/our-principles/index.tsx
+++ b/src/pages/our-principles/index.tsx
@@ -33,16 +33,6 @@ const ColorHeader = styled(Header)`
     }
 `
 
-const MainHeader = styled(Header)`
-    padding-bottom: 24px;
-
-    @media ${device.mobileM} {
-        padding-bottom: 24px;
-        font-size: 40px;
-        line-height: 50px;
-    }
-`
-
 const StyledMainText = styled(Text)`
     font-size: 24px;
     font-weight: 400;
@@ -65,18 +55,6 @@ const StyledText = styled(Text)`
     }
 `
 
-const StyledHeader = styled(Header)`
-    padding-bottom: 8px;
-    font-size: 24px;
-    line-height: 36px;
-    font-weight: 700;
-
-    @media ${device.mobileM} {
-        font-size: 18px;
-        line-height: 26px;
-    }
-`
-
 const StyledContainer = styled(Container)`
     max-width: 1098px;
     flex-direction: column;
@@ -99,16 +77,6 @@ const PrinciplesSection = styled(SectionContainer)`
     }
 `
 
-const StyledCardContainer = styled(Flex)`
-    @media ${device.tablet} {
-        flex-direction: column;
-    }
-
-    @media ${device.mobileM} {
-        margin: 0px 0px;
-    }
-`
-
 const StyledImg = styled.img`
     @media ${device.tablet} {
         width: 104px;
@@ -131,9 +99,9 @@ const OurPrinciples = (): React.ReactNode => {
             <SEO title={localize('Our principles | Deriv')} />
             <TitleSection padding="120px 0 24px 10rem">
                 <StyledContainer>
-                    <MainHeader type="display-title" color="black" weight="700" align="left">
+                    <Header as="h1" type="hero" align="left" mb="24px">
                         {localize('Our principles')}
-                    </MainHeader>
+                    </Header>
                     <StyledMainText>
                         {localize(
                             'We are honoured to serve everyone who relies on our products and services, and we only want to offer the best. That’s why our principles and values are so important in defining who we are, why we do what we do, and how we treat our clients and each other. Across our international offices, we are committed to the following principles in everything that we do.',
@@ -145,7 +113,7 @@ const OurPrinciples = (): React.ReactNode => {
                 {principles.map((principle, index) => (
                     <StyledContainer key={index}>
                         <Separator background={principle.separator} />
-                        <StyledCardContainer jc="space-between">
+                        <Flex jc="space-between" tablet={{ fd: 'column' }} mobileM={{ m: '0 0' }}>
                             <StyledFlex max_width="180px" m="10px">
                                 <StyledImg src={principle.img} />
                             </StyledFlex>
@@ -155,12 +123,14 @@ const OurPrinciples = (): React.ReactNode => {
                                 </ColorHeader>
                                 {principle.description.map((description, key) => (
                                     <Flex key={key} fd="column">
-                                        <StyledHeader as="h3">{description.title}</StyledHeader>
+                                        <Header as="h3" type="subtitle-1">
+                                            {description.title}
+                                        </Header>
                                         <StyledText>{description.text} </StyledText>
                                     </Flex>
                                 ))}
                             </Flex>
-                        </StyledCardContainer>
+                        </Flex>
                     </StyledContainer>
                 ))}
             </PrinciplesSection>