diff --git a/src/components/form/button.js b/src/components/form/button.js
index bb77fa24da4..1dae9325065 100644
--- a/src/components/form/button.js
+++ b/src/components/form/button.js
@@ -101,6 +101,7 @@ export const SharedButtonStyle = css`
                 padding: 17px 24px;
                 font-size: 20px;
                 line-height: 30px;
+                border-radius: 8px;
 
                 &:hover {
                     background-color: var(--color-red-3);
diff --git a/src/pages/careers/locations/_location-layout-new-offices.tsx b/src/pages/careers/locations/_location-layout-new-offices.tsx
index 7f33c7b9d24..65b512f977d 100644
--- a/src/pages/careers/locations/_location-layout-new-offices.tsx
+++ b/src/pages/careers/locations/_location-layout-new-offices.tsx
@@ -36,17 +36,7 @@ const SecondStyledHeader = styled(Header)`
 
     margin-bottom: 0 24px;
 `
-const StyledLinkButton = styled(LinkButton)`
-    font-size: 20px;
-    line-height: 30px;
-    @media ${device.tablet} {
-        font-size: 18px;
-        max-width: 317px;
-    }
-    @media (max-width: 340px) {
-        font-size: 15px;
-    }
-`
+
 type HeroProps = {
     display_name: string
     img_data: string
@@ -57,16 +47,16 @@ const Hero = ({ display_name, img_data }: HeroProps) => {
         <StyledBackground data={img_data} alt={display_name}>
             <StyledContainer>
                 <StyledHeader as="h1">{display_name}</StyledHeader>
-                <StyledLinkButton
+                <LinkButton
+                    hero
                     has_no_end_slash
-                    secondary="true"
                     to={zoho_url}
                     target="_blank"
                     rel="noopener noreferrer"
                     external
                 >
                     View open positions in {display_name}
-                </StyledLinkButton>
+                </LinkButton>
             </StyledContainer>
         </StyledBackground>
     )
@@ -240,11 +230,12 @@ export const NewLocationLayout = ({ location, images }: LocationLayoutProps) =>
                     align="center"
                     as="h2"
                     size="var(--text-size-header-5)"
+                    color="black-6"
                 >
                     Deriv in {display_name}
                 </SecondStyledHeader>
                 <Flex tablet_direction="column">
-                    <Text>{location.first_p}</Text>
+                    <Text color="black-6">{location.first_p}</Text>
                     <StyledImageWrapper>
                         <QueryImage
                             data={images[location.first_img]}
@@ -266,10 +257,10 @@ export const NewLocationLayout = ({ location, images }: LocationLayoutProps) =>
                         />
                         <WorkingInformation p="3.2rem 6rem" direction="column">
                             <StyledDiv>
-                                <Header as="h3" type="subtitle-1">
+                                <Header as="h3" type="subtitle-1" color="black-6">
                                     {`Working at Deriv ${map_office_name}`}
                                 </Header>
-                                <CardText>{location.map_text}</CardText>
+                                <CardText color="black-6">{location.map_text}</CardText>
                             </StyledDiv>
                         </WorkingInformation>
                     </WorkingFlex>
diff --git a/src/pages/careers/locations/_location-layout.tsx b/src/pages/careers/locations/_location-layout.tsx
index c25b4683674..ded23108471 100644
--- a/src/pages/careers/locations/_location-layout.tsx
+++ b/src/pages/careers/locations/_location-layout.tsx
@@ -46,17 +46,7 @@ const SecondStyledHeader = styled(Header)`
 
     margin-bottom: 0 24px;
 `
-const StyledLinkButton = styled(LinkButton)`
-    font-size: 20px;
-    line-height: 30px;
-    @media ${device.tablet} {
-        font-size: 18px;
-        max-width: 317px;
-    }
-    @media (max-width: 340px) {
-        font-size: 15px;
-    }
-`
+
 type HeroProps = {
     display_name: string
     img_data: string
@@ -67,16 +57,16 @@ const Hero = ({ display_name, img_data }: HeroProps) => {
         <StyledBackground data={img_data} alt={display_name}>
             <StyledContainer>
                 <StyledHeader as="h1">{display_name}</StyledHeader>
-                <StyledLinkButton
+                <LinkButton
+                    hero
                     has_no_end_slash
-                    secondary="true"
                     to={zoho_url}
                     target="_blank"
                     rel="noopener noreferrer"
                     external
                 >
                     View open positions in {display_name}
-                </StyledLinkButton>
+                </LinkButton>
             </StyledContainer>
         </StyledBackground>
     )
@@ -358,6 +348,7 @@ export const LocationLayout = ({ location, images }: LocationLayoutProps) => {
             <Hero display_name={display_name} img_data={images[location.name]} />
             <FirstSection>
                 <SecondStyledHeader
+                    color="black-6"
                     type="unset"
                     align="center"
                     as="h2"
@@ -366,7 +357,7 @@ export const LocationLayout = ({ location, images }: LocationLayoutProps) => {
                     Deriv in {display_name}
                 </SecondStyledHeader>
                 <Flex tablet_direction="column">
-                    <Text>{location.first_p}</Text>
+                    <Text color="black-6">{location.first_p}</Text>
                     <StyledImageWrapper>
                         <QueryImage
                             data={images[location.first_img]}
@@ -380,6 +371,7 @@ export const LocationLayout = ({ location, images }: LocationLayoutProps) => {
             <SecondSection padding="0px 16px">
                 <SectionContainer padding="0">
                     <Header
+                        color="black-6"
                         type="unset"
                         align="center"
                         as="h2"
@@ -457,10 +449,10 @@ export const LocationLayout = ({ location, images }: LocationLayoutProps) => {
                             max_width="44.4rem"
                         >
                             <StyledDiv>
-                                <Header as="h3" type="subtitle-1">
+                                <Header as="h3" type="subtitle-1" color="black-6">
                                     {`Working at Deriv ${map_office_name}`}
                                 </Header>
-                                <CardText>{location.map_text}</CardText>
+                                <CardText color="black-6">{location.map_text}</CardText>
                                 <Flex jc="unset">
                                     <Pin src={MapPin} alt="map pin" />
                                     {location.google_map_link ? (