diff --git a/apps/climatemappedafrica/public/images/payload/blocks/page-hero.jpg b/apps/climatemappedafrica/public/images/payload/blocks/page-hero.jpg
new file mode 100644
index 000000000..d68e89bb5
Binary files /dev/null and b/apps/climatemappedafrica/public/images/payload/blocks/page-hero.jpg differ
diff --git a/apps/climatemappedafrica/public/images/payload/blocks/summary.jpg b/apps/climatemappedafrica/public/images/payload/blocks/summary.jpg
new file mode 100644
index 000000000..cb72293a1
Binary files /dev/null and b/apps/climatemappedafrica/public/images/payload/blocks/summary.jpg differ
diff --git a/apps/climatemappedafrica/public/images/payload/blocks/team.jpg b/apps/climatemappedafrica/public/images/payload/blocks/team.jpg
new file mode 100644
index 000000000..4af575caf
Binary files /dev/null and b/apps/climatemappedafrica/public/images/payload/blocks/team.jpg differ
diff --git a/apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.js b/apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.js
index cfbb83f7e..f5167ad09 100644
--- a/apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.js
+++ b/apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.js
@@ -76,7 +76,7 @@ function AboutTeam({ title, members: membersProp, ...props }) {
               key={uniqueId("team-chunk-")}
             >
               {membersChunks.map((member) => (
-                <Grid item key={title}>
+                <Grid item key={member.title}>
                   <Card {...member} mediaProps={{ square: true }} />
                 </Grid>
               ))}
diff --git a/apps/climatemappedafrica/src/components/Card/ActionArea.js b/apps/climatemappedafrica/src/components/Card/ActionArea.js
index d6f547012..0e8c2d68f 100644
--- a/apps/climatemappedafrica/src/components/Card/ActionArea.js
+++ b/apps/climatemappedafrica/src/components/Card/ActionArea.js
@@ -43,10 +43,4 @@ ActionArea.propTypes = {
   onClick: PropTypes.func,
 };
 
-ActionArea.defaultProps = {
-  children: undefined,
-  href: undefined,
-  onClick: undefined,
-};
-
 export default ActionArea;
diff --git a/apps/climatemappedafrica/src/components/PageHero/PageHero.js b/apps/climatemappedafrica/src/components/PageHero/PageHero.js
new file mode 100644
index 000000000..3d4dd937b
--- /dev/null
+++ b/apps/climatemappedafrica/src/components/PageHero/PageHero.js
@@ -0,0 +1,79 @@
+import { Box, Grid } from "@mui/material";
+import PropTypes from "prop-types";
+import React from "react";
+
+import useStyles from "./useStyles";
+
+import RichHeader from "@/climatemappedafrica/components/RichHeader";
+import Section from "@/climatemappedafrica/components/Section";
+
+function PageHero({ background, overline, subtitle, title, ...props }) {
+  const classes = useStyles(props);
+  let backgroundSx;
+  if (background?.src?.length) {
+    backgroundSx = {
+      background: `url('${background.src}')`,
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+    };
+  }
+
+  return (
+    <Box
+      sx={{
+        ...backgroundSx,
+        margin: 0,
+        position: "relative",
+        "&:after": {
+          content: "''",
+          background: {
+            xs: `linear-gradient(to right, #ffffffE6 0%, #ffffffE6 87.5%, transparent 87.5%, transparent 100%)`,
+            md: `linear-gradient(to right, #ffffffE6 0%, #ffffffE6 62.5%, transparent 62.5%, transparent 100%)`,
+            lg: `linear-gradient(to right, #ffffffE6 0%, #ffffffE6 56%, transparent 56%, transparent 100%)`,
+          },
+          position: "absolute",
+          left: 0,
+          top: { xs: "70px", lg: "100px" },
+          bottom: { xs: "70px", lg: "100px" },
+          width: "100%",
+        },
+      }}
+    >
+      <Section classes={{ root: classes.section }}>
+        <Grid container>
+          <Grid
+            item
+            xs={9}
+            lg={6}
+            sx={{
+              height: "100%",
+              py: { xs: "43px", md: "74px" },
+            }}
+          >
+            <RichHeader
+              SubtitleProps={{
+                sx: {
+                  mr: 0,
+                  maxWidth: 376,
+                },
+              }}
+              overline={overline}
+              subtitle={subtitle}
+            >
+              {title}
+            </RichHeader>
+          </Grid>
+        </Grid>
+      </Section>
+    </Box>
+  );
+}
+
+PageHero.propTypes = {
+  background: PropTypes.shape({}),
+  overline: PropTypes.string,
+  subtitle: PropTypes.arrayOf(PropTypes.shape({})),
+  title: PropTypes.arrayOf(PropTypes.shape({})),
+};
+
+export default PageHero;
diff --git a/apps/climatemappedafrica/src/components/PageHero/PageHero.snap.js b/apps/climatemappedafrica/src/components/PageHero/PageHero.snap.js
new file mode 100644
index 000000000..c9ef55b49
--- /dev/null
+++ b/apps/climatemappedafrica/src/components/PageHero/PageHero.snap.js
@@ -0,0 +1,68 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<PageHero /> renders unchanged 1`] = `
+<div>
+  <div
+    class="MuiBox-root css-u361uw"
+  >
+    <div
+      class="makeStyles-root-6 makeStyles-root-4 makeStyles-root-2 makeStyles-section-1 makeStyles-fixed-3 MuiBox-root css-0"
+    >
+      <div
+        class="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
+      >
+        <div
+          class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-9 MuiGrid-grid-lg-6 css-a17ihx-MuiGrid-root"
+        >
+          <header
+            class="MuiBox-root css-0"
+          >
+            <div
+              class="MuiTypography-root makeStyles-root-7 MuiTypography-overline css-uwhb1p-MuiTypography-root"
+            >
+              About
+            </div>
+            <div
+              class="MuiBox-root css-1ki7zn5"
+            >
+              <h1
+                class="MuiTypography-root MuiTypography-h1 css-qt60le-MuiTypography-root"
+              >
+                Project  
+                <strong>
+                  background
+                </strong>
+                 and team
+              </h1>
+            </div>
+            <div
+              class="MuiBox-root css-1yyblq"
+            >
+              <h6
+                class="MuiTypography-root MuiTypography-subtitle1 css-1d1ipbv-MuiTypography-root"
+              >
+                Learn more about 
+                <strong>
+                  the team
+                </strong>
+                 behind the project,
+                <em>
+                   the development stages
+                </em>
+                 and how you can help improve 
+                <a
+                  class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-subtitle1 active css-c4fo0t-MuiTypography-root-MuiLink-root-MuiTypography-root"
+                  href="/"
+                >
+                  ClimateMap
+                </a>
+                .
+              </h6>
+            </div>
+          </header>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/apps/climatemappedafrica/src/components/PageHero/PageHero.test.js b/apps/climatemappedafrica/src/components/PageHero/PageHero.test.js
new file mode 100644
index 000000000..85994fd80
--- /dev/null
+++ b/apps/climatemappedafrica/src/components/PageHero/PageHero.test.js
@@ -0,0 +1,87 @@
+import { createRender } from "@commons-ui/testing-library";
+import React from "react";
+
+import PageHero from ".";
+
+import theme from "@/climatemappedafrica/theme";
+
+// eslint-disable-next-line testing-library/render-result-naming-convention
+const render = createRender({ theme });
+
+const defaultProps = {
+  overline: "About",
+  title: [
+    {
+      children: [
+        {
+          text: "Project  ",
+          children: null,
+        },
+        {
+          text: "background",
+          bold: true,
+          children: null,
+        },
+        {
+          text: " and team",
+          children: null,
+        },
+      ],
+    },
+  ],
+  subtitle: [
+    {
+      children: [
+        {
+          text: "Learn more about ",
+          children: null,
+        },
+        {
+          text: "the team",
+          bold: true,
+          children: null,
+        },
+        {
+          text: " behind the project,",
+          children: null,
+        },
+        {
+          text: " the development stages",
+          italic: true,
+          children: null,
+        },
+        {
+          text: " and how you can help improve ",
+          children: null,
+        },
+        {
+          children: [
+            {
+              text: "ClimateMap",
+              children: null,
+            },
+          ],
+          linkType: "custom",
+          type: "link",
+          url: "/",
+          href: "/",
+        },
+        {
+          text: ".",
+          children: null,
+        },
+      ],
+    },
+  ],
+  background: {
+    alt: "Mt. Kenya",
+    src: "/media/sat-mtKenya-2@2x.jpg",
+  },
+};
+
+describe("<PageHero />", () => {
+  it("renders unchanged", () => {
+    const { container } = render(<PageHero {...defaultProps} />);
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/apps/climatemappedafrica/src/components/PageHero/index.js b/apps/climatemappedafrica/src/components/PageHero/index.js
new file mode 100644
index 000000000..21e049ca2
--- /dev/null
+++ b/apps/climatemappedafrica/src/components/PageHero/index.js
@@ -0,0 +1,3 @@
+import PageHero from "./PageHero";
+
+export default PageHero;
diff --git a/apps/climatemappedafrica/src/components/PageHero/useStyles.js b/apps/climatemappedafrica/src/components/PageHero/useStyles.js
new file mode 100644
index 000000000..579cd75b2
--- /dev/null
+++ b/apps/climatemappedafrica/src/components/PageHero/useStyles.js
@@ -0,0 +1,16 @@
+import makeStyles from "@mui/styles/makeStyles";
+
+const useStyles = makeStyles(({ breakpoints, typography }) => ({
+  section: {
+    zIndex: 1,
+    position: "relative",
+    paddingBottom: `${typography.pxToRem(70)} !important`,
+    paddingTop: `${typography.pxToRem(70)} !important`,
+    [breakpoints.up("lg")]: {
+      paddingBottom: `${typography.pxToRem(100)} !important`,
+      paddingTop: `${typography.pxToRem(100)} !important`,
+    },
+  },
+}));
+
+export default useStyles;
diff --git a/apps/climatemappedafrica/src/components/RichHeader/RichHeader.js b/apps/climatemappedafrica/src/components/RichHeader/RichHeader.js
new file mode 100644
index 000000000..68fd26425
--- /dev/null
+++ b/apps/climatemappedafrica/src/components/RichHeader/RichHeader.js
@@ -0,0 +1,88 @@
+import { RichTypography } from "@commons-ui/core";
+import { RichText } from "@commons-ui/payload";
+import { Box } from "@mui/material";
+import PropTypes from "prop-types";
+import React from "react";
+
+const RichHeader = React.forwardRef(function RichHeader(props, ref) {
+  const {
+    OverlineProps,
+    SubtitleProps,
+    TitleProps,
+    children,
+    overline,
+    subtitle,
+    sx,
+    ...others
+  } = props;
+
+  return (
+    <Box component="header" {...others} sx={sx} ref={ref}>
+      <RichTypography
+        variant="overline"
+        {...OverlineProps}
+        sx={{
+          mb: 1.5,
+          ...OverlineProps?.sx,
+        }}
+      >
+        {overline}
+      </RichTypography>
+      <RichText
+        {...TitleProps}
+        typographyProps={{
+          variant: "h1",
+          ...TitleProps?.typographyProps,
+        }}
+        elements={children}
+        sx={{
+          "& strong": {
+            display: "inline-block",
+            font: "inherit",
+            position: "relative",
+            "&:after": {
+              borderBottom: "30px solid",
+              borderColor: "primary.main",
+              bottom: 0,
+              content: '""',
+              left: 0,
+              opacity: 0.1,
+              position: "absolute",
+              width: "100%",
+            },
+            ...TitleProps?.sx,
+          },
+        }}
+      />
+      <RichText
+        {...SubtitleProps}
+        typographyProps={{
+          variant: "subtitle1",
+          sx: (theme) => ({
+            textDecorationColor: theme.palette.text.primary,
+          }),
+          LinkProps: {
+            color: "text.primary",
+            sx: {
+              textDecoration: "underline",
+            },
+          },
+          ...SubtitleProps?.typographyProps,
+        }}
+        elements={subtitle}
+        sx={{
+          mt: 2.5,
+          ...SubtitleProps?.sx,
+        }}
+      />
+    </Box>
+  );
+});
+
+RichHeader.propTypes = {
+  className: PropTypes.string,
+  overline: PropTypes.string,
+  subtitle: PropTypes.arrayOf(PropTypes.shape({})),
+};
+
+export default RichHeader;
diff --git a/apps/climatemappedafrica/src/components/RichHeader/RichHeader.snap.js b/apps/climatemappedafrica/src/components/RichHeader/RichHeader.snap.js
new file mode 100644
index 000000000..c9622ab92
--- /dev/null
+++ b/apps/climatemappedafrica/src/components/RichHeader/RichHeader.snap.js
@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<RichHeader /> renders unchanged 1`] = `
+<div>
+  <header
+    class="MuiBox-root css-0"
+    title="[object Object]"
+  >
+    <div
+      class="MuiTypography-root makeStyles-root-1 MuiTypography-overline css-uwhb1p-MuiTypography-root"
+    >
+      About
+    </div>
+    <div
+      class="MuiBox-root css-1xaekgw"
+    >
+      <h6
+        class="MuiTypography-root MuiTypography-subtitle1 css-1d1ipbv-MuiTypography-root"
+      >
+        Learn more about 
+        <strong>
+          the team
+        </strong>
+         behind the project,
+        <em>
+           the development stages
+        </em>
+         and how you can help improve 
+        <a
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-subtitle1 active css-c4fo0t-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          href="/"
+        >
+          ClimateMap
+        </a>
+        .
+      </h6>
+    </div>
+  </header>
+</div>
+`;
diff --git a/apps/climatemappedafrica/src/components/RichHeader/RichHeader.test.js b/apps/climatemappedafrica/src/components/RichHeader/RichHeader.test.js
new file mode 100644
index 000000000..634a8acdb
--- /dev/null
+++ b/apps/climatemappedafrica/src/components/RichHeader/RichHeader.test.js
@@ -0,0 +1,83 @@
+import { createRender } from "@commons-ui/testing-library";
+import React from "react";
+
+import RichHeader from ".";
+
+import theme from "@/climatemappedafrica/theme";
+
+// eslint-disable-next-line testing-library/render-result-naming-convention
+const render = createRender({ theme });
+
+const defaultProps = {
+  overline: "About",
+  title: [
+    {
+      children: [
+        {
+          text: "Project  ",
+          children: null,
+        },
+        {
+          text: "background",
+          bold: true,
+          children: null,
+        },
+        {
+          text: " and team",
+          children: null,
+        },
+      ],
+    },
+  ],
+  subtitle: [
+    {
+      children: [
+        {
+          text: "Learn more about ",
+          children: null,
+        },
+        {
+          text: "the team",
+          bold: true,
+          children: null,
+        },
+        {
+          text: " behind the project,",
+          children: null,
+        },
+        {
+          text: " the development stages",
+          italic: true,
+          children: null,
+        },
+        {
+          text: " and how you can help improve ",
+          children: null,
+        },
+        {
+          children: [
+            {
+              text: "ClimateMap",
+              children: null,
+            },
+          ],
+          linkType: "custom",
+          type: "link",
+          url: "/",
+          href: "/",
+        },
+        {
+          text: ".",
+          children: null,
+        },
+      ],
+    },
+  ],
+};
+
+describe("<RichHeader />", () => {
+  it("renders unchanged", () => {
+    const { container } = render(<RichHeader {...defaultProps} />);
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/apps/climatemappedafrica/src/components/RichHeader/index.js b/apps/climatemappedafrica/src/components/RichHeader/index.js
new file mode 100644
index 000000000..7d9e46155
--- /dev/null
+++ b/apps/climatemappedafrica/src/components/RichHeader/index.js
@@ -0,0 +1,3 @@
+import RichHeader from "./RichHeader";
+
+export default RichHeader;
diff --git a/apps/climatemappedafrica/src/lib/data/blockify/index.js b/apps/climatemappedafrica/src/lib/data/blockify/index.js
index af50c6631..07d61107f 100644
--- a/apps/climatemappedafrica/src/lib/data/blockify/index.js
+++ b/apps/climatemappedafrica/src/lib/data/blockify/index.js
@@ -1,6 +1,8 @@
+import pageHero from "./page-hero";
 import team from "./team";
 
 const propsifyBlockBySlug = {
+  "page-hero": pageHero,
   team,
 };
 
diff --git a/apps/climatemappedafrica/src/lib/data/blockify/page-hero.js b/apps/climatemappedafrica/src/lib/data/blockify/page-hero.js
new file mode 100644
index 000000000..0a732a785
--- /dev/null
+++ b/apps/climatemappedafrica/src/lib/data/blockify/page-hero.js
@@ -0,0 +1,16 @@
+import { imageFromMedia } from "@/climatemappedafrica/lib/data/utils";
+
+async function pageHero(block) {
+  const { background: media, ...others } = block;
+  let background = null;
+  if (media) {
+    background = imageFromMedia(media);
+  }
+  return {
+    ...others,
+    background,
+    slug: block.blockType,
+  };
+}
+
+export default pageHero;
diff --git a/apps/climatemappedafrica/src/lib/data/utils/getMembers.js b/apps/climatemappedafrica/src/lib/data/utils/get-members.js
similarity index 100%
rename from apps/climatemappedafrica/src/lib/data/utils/getMembers.js
rename to apps/climatemappedafrica/src/lib/data/utils/get-members.js
diff --git a/apps/climatemappedafrica/src/lib/data/utils/index.js b/apps/climatemappedafrica/src/lib/data/utils/index.js
index 553889702..52ea9d7ef 100644
--- a/apps/climatemappedafrica/src/lib/data/utils/index.js
+++ b/apps/climatemappedafrica/src/lib/data/utils/index.js
@@ -1,4 +1,4 @@
-export * from "./getMembers";
+export * from "./get-members";
 
 export function imageFromMedia({ alt = null, url = null }) {
   return { alt, src: url };
diff --git a/apps/climatemappedafrica/src/pages/[[...slug]].js b/apps/climatemappedafrica/src/pages/[[...slug]].js
index 566308264..690f52524 100644
--- a/apps/climatemappedafrica/src/pages/[[...slug]].js
+++ b/apps/climatemappedafrica/src/pages/[[...slug]].js
@@ -3,10 +3,12 @@ import { SWRConfig } from "swr";
 
 import AboutTeam from "@/climatemappedafrica/components/AboutTeam";
 import Page from "@/climatemappedafrica/components/Page";
+import PageHero from "@/climatemappedafrica/components/PageHero";
 import Summary from "@/climatemappedafrica/components/Summary";
 import { getPageServerSideProps } from "@/climatemappedafrica/lib/data";
 
 const componentsBySlugs = {
+  "page-hero": PageHero,
   summary: Summary,
   team: AboutTeam,
 };
@@ -26,11 +28,12 @@ function Index({ blocks, fallback, ...props }) {
     <Page {...props}>
       <PageConfig {...pageConfigProps}>
         {blocks.map((block) => {
-          const Component = componentsBySlugs[block.slug];
+          const Component = componentsBySlugs[block.blockType];
           if (!Component) {
             return null;
           }
-          return <Component {...block} key={block.slug} />;
+          // Just in case a block appears twice on the same page, use id as key
+          return <Component {...block} key={block.id} />;
         })}
       </PageConfig>
     </Page>
diff --git a/apps/climatemappedafrica/src/payload/blocks/PageHero.js b/apps/climatemappedafrica/src/payload/blocks/PageHero.js
new file mode 100644
index 000000000..cbeead4c4
--- /dev/null
+++ b/apps/climatemappedafrica/src/payload/blocks/PageHero.js
@@ -0,0 +1,59 @@
+import { slateEditor } from "@payloadcms/richtext-slate";
+
+import image from "../fields/image";
+import richText from "../fields/richText";
+
+const PageHero = {
+  slug: "page-hero",
+  imageURL: "/images/payload/blocks/page-hero.jpg",
+  fields: [
+    {
+      name: "overline",
+      label: {
+        en: "Overline",
+      },
+      type: "text",
+      required: true,
+      localized: true,
+    },
+    richText({
+      name: "title",
+      label: {
+        en: "Title",
+      },
+      editor: slateEditor({
+        admin: {
+          elements: [],
+          leaves: ["bold"],
+        },
+      }),
+      required: true,
+      localized: true,
+    }),
+    richText({
+      name: "subtitle",
+      label: {
+        en: "Subtitle",
+      },
+      editor: slateEditor({
+        admin: {
+          elements: ["link"],
+          leaves: ["bold", "code", "italic", "underline"],
+        },
+      }),
+      required: true,
+      localized: true,
+    }),
+    // NOTE(kilemensi): We can add a 'variant' / 'select' here to support
+    //                  different page heros e.g. 2 background images as in
+    //                  /data or /stories pages
+    image({
+      overrides: {
+        name: "background",
+        required: true,
+      },
+    }),
+  ],
+};
+
+export default PageHero;
diff --git a/apps/climatemappedafrica/src/payload/blocks/Summary.js b/apps/climatemappedafrica/src/payload/blocks/Summary.js
index c3d71796b..b29e3202d 100644
--- a/apps/climatemappedafrica/src/payload/blocks/Summary.js
+++ b/apps/climatemappedafrica/src/payload/blocks/Summary.js
@@ -4,6 +4,7 @@ import richText from "../fields/richText";
 
 const Summary = {
   slug: "summary",
+  imageURL: "/images/payload/blocks/summary.jpg",
   fields: [
     {
       name: "title",
diff --git a/apps/climatemappedafrica/src/payload/blocks/Team.js b/apps/climatemappedafrica/src/payload/blocks/Team.js
index c5831807d..e78293795 100644
--- a/apps/climatemappedafrica/src/payload/blocks/Team.js
+++ b/apps/climatemappedafrica/src/payload/blocks/Team.js
@@ -1,5 +1,6 @@
 const Team = {
   slug: "team",
+  imageURL: "/images/payload/blocks/team.jpg",
   fields: [
     {
       name: "title",
diff --git a/apps/climatemappedafrica/src/payload/collections/Pages.js b/apps/climatemappedafrica/src/payload/collections/Pages.js
index 666cfd805..b12ef87f3 100644
--- a/apps/climatemappedafrica/src/payload/collections/Pages.js
+++ b/apps/climatemappedafrica/src/payload/collections/Pages.js
@@ -1,3 +1,4 @@
+import PageHero from "../blocks/PageHero";
 import Summary from "../blocks/Summary";
 import Team from "../blocks/Team";
 import fullTitle from "../fields/fullTitle";
@@ -29,7 +30,7 @@ const Pages = {
     {
       name: "blocks",
       type: "blocks",
-      blocks: [Summary, Team],
+      blocks: [PageHero, Summary, Team],
       localized: true,
       admin: {
         initCollapsed: true,