diff --git a/docs/public/static/branding/about/illustrations/team-globe-distribution-dark.png b/docs/public/static/branding/about/illustrations/team-globe-distribution-dark.png
index ec22861ffc46dd..8b59dc339963b1 100644
Binary files a/docs/public/static/branding/about/illustrations/team-globe-distribution-dark.png and b/docs/public/static/branding/about/illustrations/team-globe-distribution-dark.png differ
diff --git a/docs/public/static/branding/about/illustrations/team-globe-distribution-light.png b/docs/public/static/branding/about/illustrations/team-globe-distribution-light.png
index 8e6bd82280614b..57efc00531a072 100644
Binary files a/docs/public/static/branding/about/illustrations/team-globe-distribution-light.png and b/docs/public/static/branding/about/illustrations/team-globe-distribution-light.png differ
diff --git a/docs/src/components/about/AboutEnd.tsx b/docs/src/components/about/AboutEnd.tsx
index 205a51a9646695..9d319e17675274 100644
--- a/docs/src/components/about/AboutEnd.tsx
+++ b/docs/src/components/about/AboutEnd.tsx
@@ -11,14 +11,13 @@ import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
 
 export default function AboutEnd() {
   return (
-    <Section bg="gradient" sx={{ p: { xs: 4, sm: 8 } }}>
+    <Section bg="gradient" sx={{ p: { sm: 8 } }}>
       <Box
         sx={{
           display: 'flex',
           flexDirection: 'column',
           alignItems: 'center',
           position: 'relative',
-          zIdex: 10,
         }}
       >
         <SectionHeadline
diff --git a/docs/src/components/about/AboutHero.tsx b/docs/src/components/about/AboutHero.tsx
index cced67ef05d8a9..d5ff899ceb7eea 100644
--- a/docs/src/components/about/AboutHero.tsx
+++ b/docs/src/components/about/AboutHero.tsx
@@ -5,6 +5,7 @@ import { styled, keyframes } from '@mui/material/styles';
 import Section from 'docs/src/layouts/Section';
 import GradientText from 'docs/src/components/typography/GradientText';
 import TeamStatistics from 'docs/src/components/about/TeamStatistics';
+import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
 
 const teamPhotos = [
   {
@@ -148,32 +149,17 @@ function PhotoGallery() {
 export default function AboutHero() {
   return (
     <Section cozy bg="gradient">
-      <Box
-        sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          alignItems: 'center',
-        }}
-      >
-        <Typography color="primary.main" variant="body2" fontWeight="bold">
-          About us
-        </Typography>
-        <Typography component="h1" variant="h2" sx={{ my: 1, textAlign: 'center' }}>
-          We&apos;re on a mission to make <br />{' '}
-          <GradientText>building better UIs effortless</GradientText>
-        </Typography>
-        <Typography
-          color="text.secondary"
-          textAlign="center"
-          sx={{
-            maxWidth: { md: 450 },
-          }}
-        >
-          We aim high at enabling developers & designers to bring stunning UIs to life with
-          unrivalled speed and ease.
-        </Typography>
-      </Box>
+      <SectionHeadline
+        alwaysCenter
+        overline="About us"
+        title={
+          <Typography variant="h2" sx={{ maxWidth: 600, mx: 'auto' }}>
+            We&apos;re on a mission to make <br />{' '}
+            <GradientText>building better UIs effortless</GradientText>
+          </Typography>
+        }
+        description="Together, we are enabling developers & designers to bring stunning UIs to life with unrivalled speed and ease."
+      />
       <PhotoGallery />
       <TeamStatistics />
     </Section>
diff --git a/docs/src/components/about/TeamStatistics.tsx b/docs/src/components/about/TeamStatistics.tsx
index 7a9bcfe4283c16..a05ccc95f87984 100644
--- a/docs/src/components/about/TeamStatistics.tsx
+++ b/docs/src/components/about/TeamStatistics.tsx
@@ -5,7 +5,7 @@ import Typography from '@mui/material/Typography';
 const data = [
   { number: '2014', metadata: 'The starting year' },
   { number: '100%', metadata: 'Remote global team' },
-  { number: '+20', metadata: 'Countries represented' },
+  { number: '20+', metadata: 'Countries represented' },
 ];
 
 export default function TeamStatistics() {