diff --git a/src/images/common/about/about_us_logo.png b/src/images/common/about/about_us_logo.png
index 5a010a4990c..5cd57092a55 100644
Binary files a/src/images/common/about/about_us_logo.png and b/src/images/common/about/about_us_logo.png differ
diff --git a/src/images/common/about/about_us_logo_desktop.png b/src/images/common/about/about_us_logo_desktop.png
deleted file mode 100644
index e35502d1343..00000000000
Binary files a/src/images/common/about/about_us_logo_desktop.png and /dev/null differ
diff --git a/src/pages/who-we-are/_AboutUsBanner.tsx b/src/pages/who-we-are/_AboutUsBanner.tsx
index d90a9a943ab..0228ac79efb 100644
--- a/src/pages/who-we-are/_AboutUsBanner.tsx
+++ b/src/pages/who-we-are/_AboutUsBanner.tsx
@@ -5,7 +5,7 @@ import Bg from 'images/common/who-we-are/about-us-banner.jpg'
 import { localize } from 'components/localization'
 import { SectionContainer, Flex } from 'components/containers'
 import device from 'themes/device'
-import { Header, Text } from 'components/elements'
+import { Header } from 'components/elements'
 import { zoho_url } from 'common/constants'
 import { LinkButton } from 'components/form'
 
@@ -13,13 +13,13 @@ const StyledSectionContainer = styled(SectionContainer)`
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 0 40px;
+    padding: 0 40px 120px;
     flex-wrap: nowrap;
     @media ${device.tablet} {
-        padding: 0 40px;
+        padding: 0 40px 40px;
     }
     @media ${device.mobileL} {
-        padding: 0 16px;
+        padding: 0 16px 40px;
     }
 `
 
@@ -52,10 +52,40 @@ const PictureFlex = styled(Flex)`
         margin: 40px 0 0 29px;
         width: 250px;
     }
+    @media (max-width: 359px) {
+        margin: 10px 10px 0 29px;
+    }
+`
+
+const StyledHeader = styled(Header)`
+    line-height: 40px;
+    @media ${device.laptop} {
+        line-height: 34px;
+    }
+    @media ${device.tabletL} {
+        font-size: 30px;
+    }
+    @media ${device.tablet} {
+        font-size: 28px;
+    }
 `
-const Styledtext = styled(Text)`
+
+const StyledHeader2 = styled(Header)`
     color: var(--color-white);
-    margin-bottom: 24px;
+    margin: 18px 0 24px;
+    @media ${device.tablet} {
+        margin: 6px 0 10px;
+        font-size: 11px;
+        font-weight: 400;
+        line-height: 17px;
+        letter-spacing: 0em;
+    }
+`
+
+const StyledLinkButton = styled(LinkButton)`
+    @media ${device.tablet} {
+        padding: 8px 16px;
+    }
 `
 
 const AboutUsBanner = () => {
@@ -63,13 +93,19 @@ const AboutUsBanner = () => {
         <StyledSectionContainer>
             <StyledFlex direction="column" height="288px" width="1200px">
                 <PictureFlex jc="start" ai="start" direction="column">
-                    <Header as="h3" width="100%" type="heading-3" color="white" mb="18px">
+                    <StyledHeader as="h3" width="100%" type="unset" size="32px" color="white">
                         {localize('We have a huge mission, an incredible team, and rapid growth.')}
-                    </Header>
-                    <Styledtext width="100%" type="subtitle-1" as="p">
+                    </StyledHeader>
+                    <StyledHeader2
+                        width="100%"
+                        type="sub-paragraph"
+                        as="p"
+                        size="16px"
+                        weight="400px"
+                    >
                         {localize('Join and grow with us.')}
-                    </Styledtext>
-                    <LinkButton
+                    </StyledHeader2>
+                    <StyledLinkButton
                         secondary="true"
                         to={zoho_url}
                         external="true"
@@ -77,7 +113,7 @@ const AboutUsBanner = () => {
                         rel="noopener noreferrer"
                     >
                         {localize('See our open positions')}
-                    </LinkButton>
+                    </StyledLinkButton>
                 </PictureFlex>
             </StyledFlex>
         </StyledSectionContainer>
diff --git a/src/pages/who-we-are/_DerivNumbers.tsx b/src/pages/who-we-are/_DerivNumbers.tsx
index 5681997de97..7d6e5064b9e 100644
--- a/src/pages/who-we-are/_DerivNumbers.tsx
+++ b/src/pages/who-we-are/_DerivNumbers.tsx
@@ -10,11 +10,11 @@ const StyledSection = styled(SectionContainer)`
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    padding: 200px 16px 120px;
+    padding: 180px 16px 200px;
     background-color: var(--color-white);
 
     @media ${device.tablet} {
-        padding: 40px 16px;
+        padding: 30px 16px 40px;
     }
 `
 
diff --git a/src/pages/who-we-are/_OurLeadership.tsx b/src/pages/who-we-are/_OurLeadership.tsx
index 04e89c8b21e..3c8640ce5cc 100644
--- a/src/pages/who-we-are/_OurLeadership.tsx
+++ b/src/pages/who-we-are/_OurLeadership.tsx
@@ -61,9 +61,7 @@ const StyledSectionContainer = styled(SectionContainer)`
     flex-direction: column;
     align-items: center;
     margin: 0;
-    @media ${device.tablet} {
-        padding: 0 16px 40px;
-    }
+    padding: 0 16px;
 `
 
 const StyledCssGrid = styled(CssGrid)`
@@ -78,6 +76,11 @@ const StyledCssGrid = styled(CssGrid)`
         padding: 0;
         grid-template-columns: ;
     }
+    @media (max-width: 359px) {
+        grid-template-columns: repeat(3, 88px);
+        grid-column-gap: 12px;
+        grid-row-gap: 4px;
+    }
 `
 
 const StyledHeader = styled(Header)`
@@ -93,6 +96,7 @@ const ModalFlex = styled(Flex)`
     position: absolute;
     top: 130px;
     background-color: white;
+    padding: 8px 16px 6px;
     z-index: 1;
     border-radius: 5px;
     box-shadow: rgba(0, 0, 0, 0.35) 0px 4px 15px;
@@ -105,7 +109,7 @@ const ModalFlex = styled(Flex)`
         top: 108px;
     }
     @media ${device.mobileL} {
-        top: 98px;
+        top: 93px;
     }
 `
 type MouseEvent = React.MouseEventHandler<HTMLDivElement> &
@@ -125,7 +129,7 @@ const StyledImageWrapper = styled(ImageWrapper)<StyledImageWrapperPropsType>`
     padding-bottom: 20px;
     @media ${device.tabletS} {
         width: 104px;
-        height: 124px;
+        height: 114px;
     }
     
     @media ${device.tabletL} {
@@ -141,21 +145,16 @@ const StyledImageWrapper = styled(ImageWrapper)<StyledImageWrapperPropsType>`
             }
         }
     }
-
+    @media ${device.tabletS} {
+        padding-bottom: 10px;
+    }  
     @media ${device.mobileL} {
         width: 88px;
-        height: 108px;
+        height: 98px;
     }  
 }
 `
 
-const ModalHeader = styled(Header)`
-    font-size: 14px;
-    @media ${device.tabletL} {
-        font-size: 11px;
-    }
-`
-
 type ModalPropsType = {
     name: string
     position: string
@@ -168,7 +167,6 @@ const StyledLogo = styled.img<StyledLogoType>`
     width: 32px;
     height: 32px;
     filter: grayscale(100%);
-    margin-bottom: 5px;
     &:hover {
         filter: ${(props) => (props.link ? 'unset' : 'grayscale(100%)')};
     }
@@ -176,22 +174,22 @@ const StyledLogo = styled.img<StyledLogoType>`
 
 const Modal = ({ name, position, link }: ModalPropsType) => {
     return (
-        <ModalFlex ai="center" direction="column" width="unset" height="unset">
-            <ModalHeader type="unset" as="h4" padding="5px 5px 0" align="center">
+        <ModalFlex
+            ai="center"
+            direction="column"
+            width="unset"
+            height="unset"
+            padding="0px 16px 5px"
+        >
+            <Header type="unset" as="h4" padding="0" align="center" size="14px">
                 {name}
-            </ModalHeader>
-            <Header
-                as="h4"
-                padding="0px 10px 5px"
-                type="sub-paragraph"
-                weight="normal"
-                align="center"
-            >
+            </Header>
+            <Header as="h4" padding="0" type="sub-paragraph" weight="normal" align="center">
                 {position}
             </Header>
             {link && (
                 <LocalizedLink external="true" to={link} target="_blank" rel="noopener noreferrer">
-                    <StyledLogo src={Linkedin} alt="" link={link} />
+                    <StyledLogo width="32px" height="32px" src={Linkedin} alt="" link={link} />
                 </LocalizedLink>
             )}
         </ModalFlex>
@@ -342,7 +340,7 @@ const OurLeadership = () => {
                 tablet_row_gap="60px"
                 mobile_columns="repeat(3, 88px)"
                 mobile_column_gap="24px"
-                mobile_row_gap="4px"
+                mobile_row_gap="6px"
             >
                 {leaders.map((leader: LeaderType, index: number) => (
                     <Leader leader={leader} key={index} />
diff --git a/src/pages/who-we-are/_OurOffices.tsx b/src/pages/who-we-are/_OurOffices.tsx
index 6ee7976a50c..6926e6a922d 100644
--- a/src/pages/who-we-are/_OurOffices.tsx
+++ b/src/pages/who-we-are/_OurOffices.tsx
@@ -23,23 +23,24 @@ const StyledSectionContainer = styled(SectionContainer)`
     overflow: hidden;
     flex-direction: column;
     align-items: center;
-    margin: 0;
+    margin-top: 120px;
 
     @media ${device.tablet} {
+        margin-top: 40px;
         padding: 0 16px 40px;
     }
 `
 
 const StyledHeader = styled(Header)`
     line-height: 4rem;
-    margin-bottom: 69px;
+    margin-bottom: 40px;
     @media ${device.laptop} {
         font-size: 28px;
-        margin-bottom: 40px;
     }
 `
 
 const NumberSection = styled(CssGrid)`
+    margin-top: 40px;
     max-width: 788px;
 
     @media ${device.tablet} {
@@ -156,7 +157,7 @@ const OurOffices = () => {
     return (
         <StyledSectionContainer padding="0 16px 120px" background="var(--color-white)">
             <StyledHeader as="h2" size="32px" align="center" type="page-title">
-                {localize('Our global offices')}
+                {localize('Our locations')}
             </StyledHeader>
 
             <Flex>
@@ -222,9 +223,18 @@ const OurOffices = () => {
                             title={localize('Labuan')}
                             link="/careers/locations/labuan"
                         />
-                        {/*  Uncomment after new offices will be shown and add links!  */}
-                        {/* <MapPin left="45.8%" top="28%" title={localize('London')} link="" />
-                        <MapPin left="47.4%" top="30.9%" title={localize('Paris')} link="" /> */}
+                        <MapPin
+                            left="45.8%"
+                            top="28%"
+                            title={localize('London')}
+                            link="/careers/locations/london"
+                        />
+                        <MapPin
+                            left="47.4%"
+                            top="30.9%"
+                            title={localize('Paris')}
+                            link="/careers/locations/paris"
+                        />
                         <MapPin
                             left="44.5%"
                             top="30.9%"
@@ -295,9 +305,18 @@ const OurOffices = () => {
                             title={localize('Labuan')}
                             link="/careers/locations/labuan"
                         />
-                        {/*  Uncomment after new offices will be shown and add links!  */}
-                        {/* <MapPin left="44.3%" top="24%" title={localize('London')} link="" />
-                        <MapPin left="45.9%" top="26.9%" title={localize('Paris')} link="" /> */}
+                        <MapPin
+                            left="44.3%"
+                            top="24%"
+                            title={localize('London')}
+                            link="/careers/locations/london"
+                        />
+                        <MapPin
+                            left="45.9%"
+                            top="26.9%"
+                            title={localize('Paris')}
+                            link="/careers/locations/paris"
+                        />
                         <MapPin
                             left="43%"
                             top="26.9%"
@@ -311,25 +330,25 @@ const OurOffices = () => {
             <NumberSection columns="1fr 1fr 1fr 1fr" column_gap="120px" row_gap="4rem">
                 <StyledFlex fd="column">
                     <NumberHeader size="32px">{localize('750+')}</NumberHeader>
-                    <NumberText size="20px" align="center">
+                    <NumberText size="16px" align="center">
                         {localize('employees')}
                     </NumberText>
                 </StyledFlex>
                 <StyledFlex fd="column">
                     <NumberHeader size="32px">{localize('50+')}</NumberHeader>
-                    <NumberText size="20px" align="center">
+                    <NumberText size="16px" align="center">
                         {localize('nationalities')}
                     </NumberText>
                 </StyledFlex>
                 <StyledFlex fd="column">
-                    <NumberHeader size="32px">{localize('11')}</NumberHeader>
-                    <NumberText size="20px" align="center">
+                    <NumberHeader size="32px">{localize('13')}</NumberHeader>
+                    <NumberText size="16px" align="center">
                         {localize('offices')}
                     </NumberText>
                 </StyledFlex>
                 <StyledFlex fd="column">
-                    <NumberHeader size="32px">{localize('8')}</NumberHeader>
-                    <NumberText size="20px" align="center">
+                    <NumberHeader size="32px">{localize('10')}</NumberHeader>
+                    <NumberText size="16px" align="center">
                         {localize('countries')}
                     </NumberText>
                 </StyledFlex>
diff --git a/src/pages/who-we-are/_OurPrinciples.tsx b/src/pages/who-we-are/_OurPrinciples.tsx
index bc8fc221181..a456c434e1a 100644
--- a/src/pages/who-we-are/_OurPrinciples.tsx
+++ b/src/pages/who-we-are/_OurPrinciples.tsx
@@ -49,6 +49,9 @@ const StyledText = styled(Header)`
     max-width: 551px;
     margin: 16px 0;
     font-size: 16px;
+    @media ${device.tablet} {
+        font-size: 14px;
+    }
 `
 
 const StyledLinkButton = styled(LinkButton)`
@@ -70,6 +73,7 @@ const ColoredBox = styled(Box)`
     background-color: ${(props) => props.bgcolor};
     border-radius: 8px;
     font-weight: bold;
+    color: #333333;
     font-size: 24px;
     line-height: 36px;
 
diff --git a/src/pages/who-we-are/carousel/_Carousel.tsx b/src/pages/who-we-are/carousel/_Carousel.tsx
index 3438acc2eb5..3dfc6bfa7b9 100644
--- a/src/pages/who-we-are/carousel/_Carousel.tsx
+++ b/src/pages/who-we-are/carousel/_Carousel.tsx
@@ -33,7 +33,6 @@ const Carousel = styled.div`
     position: relative;
     margin-left: auto;
     margin-right: auto;
-    padding-bottom: 50px;
 `
 
 type CarouselViewportType = {
diff --git a/src/pages/who-we-are/components/_hero.tsx b/src/pages/who-we-are/components/_hero.tsx
index 5b44dc7a3ad..f12034355bf 100644
--- a/src/pages/who-we-are/components/_hero.tsx
+++ b/src/pages/who-we-are/components/_hero.tsx
@@ -11,9 +11,6 @@ import { getWindowWidth } from 'common/utility'
 
 const query = graphql`
     query {
-        about_us_logo_desktop: file(relativePath: { eq: "about/about_us_logo_desktop.png" }) {
-            ...fadeIn
-        }
         about_us_logo: file(relativePath: { eq: "about/about_us_logo.png" }) {
             ...fadeIn
         }
@@ -50,6 +47,7 @@ const DesktopWrapper = styled(Flex)`
 `
 const MobileWrapper = styled.div`
     display: none;
+    margin: 0 31px;
 
     @media ${device.tabletL} {
         display: flex;
@@ -90,10 +88,13 @@ const StyledFlex = styled(Flex)`
 `
 
 const StyledQueryImage = styled(QueryImage)`
+    max-width: 591px;
     z-index: 2;
     position: absolute;
 `
-
+const StyledMobileQueryImage = styled(QueryImage)`
+    max-width: 445px;
+`
 const Hero = () => {
     const data = useStaticQuery(query)
     const title =
@@ -113,16 +114,20 @@ const Hero = () => {
                 <DesktopWrapper>
                     <StyledFlex>
                         <StyledQueryImage
-                            data={data['about_us_logo_desktop']}
+                            data={data['about_us_logo']}
                             alt="example"
-                            width="100%"
+                            width="unset"
                         />
                         <StyledH1>{title}</StyledH1>
                     </StyledFlex>
                 </DesktopWrapper>
                 <MobileWrapper>
                     <Flex fd="column">
-                        <QueryImage data={data['about_us_logo']} alt="example" />
+                        <StyledMobileQueryImage
+                            data={data['about_us_logo']}
+                            alt="example"
+                            width="unset"
+                        />
                         <StyledHeader as="h1" color="white" align="center" mt="40px" type="unset">
                             {localize('Who \nwe are')}
                         </StyledHeader>
diff --git a/src/pages/who-we-are/index.tsx b/src/pages/who-we-are/index.tsx
index 29a7d446949..42f100d3fbf 100644
--- a/src/pages/who-we-are/index.tsx
+++ b/src/pages/who-we-are/index.tsx
@@ -52,10 +52,10 @@ const AboutUs = () => {
             <EndSeparator />
             <OurPrinciples />
             <OurLeadership />
-            <AboutUsBanner />
             <DerivNumbers />
             <EmblaCarousel />
             <OurOffices />
+            <AboutUsBanner />
         </Layout>
     )
 }