diff --git a/apps/climatemappedafrica/public/images/cms/blocks/data-visualisation-guide.png b/apps/climatemappedafrica/public/images/cms/blocks/data-visualisation-guide.png
new file mode 100644
index 000000000..45cfe06a6
Binary files /dev/null and b/apps/climatemappedafrica/public/images/cms/blocks/data-visualisation-guide.png differ
diff --git a/apps/climatemappedafrica/src/components/Card/Card.js b/apps/climatemappedafrica/src/components/Card/Card.js
index 70ac97701..455d17b43 100644
--- a/apps/climatemappedafrica/src/components/Card/Card.js
+++ b/apps/climatemappedafrica/src/components/Card/Card.js
@@ -1,6 +1,5 @@
 import { Link } from "@commons-ui/next";
 import { Card as MuiCard } from "@mui/material";
-import clsx from "clsx";
 import PropTypes from "prop-types";
 import React from "react";
 
@@ -28,6 +27,7 @@ function Card({
   title,
   titleProps,
   variant,
+  sx,
   ...props
 }) {
   const squareMedia = mediaProps?.square;
@@ -43,7 +43,29 @@ function Card({
   };
 
   return (
-    <MuiCard elevation={0} square className={clsx(classes.root, className)}>
+    <MuiCard
+      elevation={0}
+      square
+      sx={(theme) => ({
+        backgroundColor: "inherit",
+        boxShadow: "none",
+        borderRadius: 0,
+        padding: {
+          xs: squareMedia ? `0 ${theme.typography.pxToRem(36)}` : 0,
+          md: 0,
+        },
+        minWidth: {
+          xs: theme.typography.pxToRem(350),
+          md: "unset",
+        },
+        width: {
+          xs: "100%",
+          md: theme.typography.pxToRem(squareMedia ? 278 : 296),
+          lg: theme.typography.pxToRem(squareMedia ? 278 : 376),
+        },
+        ...sx,
+      })}
+    >
       <CardActionArea
         {...actionAreaProps}
         classes={{
diff --git a/apps/climatemappedafrica/src/components/Card/Card.snap.js b/apps/climatemappedafrica/src/components/Card/Card.snap.js
index 809758cb6..faa79b3df 100644
--- a/apps/climatemappedafrica/src/components/Card/Card.snap.js
+++ b/apps/climatemappedafrica/src/components/Card/Card.snap.js
@@ -3,7 +3,7 @@
 exports[`<Card /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiCard-root makeStyles-root-1 makeStyles-root-11 css-1rw30ef-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiCard-root css-s2nibj-MuiPaper-root-MuiCard-root"
   />
 </div>
 `;
diff --git a/apps/climatemappedafrica/src/components/Card/Content.js b/apps/climatemappedafrica/src/components/Card/Content.js
index 82ba9751e..ebcbfccaf 100644
--- a/apps/climatemappedafrica/src/components/Card/Content.js
+++ b/apps/climatemappedafrica/src/components/Card/Content.js
@@ -1,4 +1,5 @@
 import { RichTypography } from "@commons-ui/core";
+import { RichText } from "@commons-ui/payload";
 import { CardContent } from "@mui/material";
 import makeStyles from "@mui/styles/makeStyles";
 import clsx from "clsx";
@@ -44,13 +45,22 @@ function Content({
       <RichTypography variant="h5" {...titleProps} className={classes.title}>
         {title}
       </RichTypography>
-      <RichTypography
-        variant="subtitle2"
-        {...descriptionProps}
-        className={classes.description}
-      >
-        {description}
-      </RichTypography>
+      {/* Support for rich text while keeping backwards compatibility */}
+      {Array.isArray(description) ? (
+        <RichText
+          {...descriptionProps}
+          className={classes.description}
+          elements={description}
+        />
+      ) : (
+        <RichTypography
+          variant="subtitle2"
+          {...descriptionProps}
+          className={classes.description}
+        >
+          {description}
+        </RichTypography>
+      )}
     </CardContent>
   );
 }
diff --git a/apps/climatemappedafrica/src/components/DataVisualisationGuide/index.js b/apps/climatemappedafrica/src/components/DataVisualisationGuide/index.js
new file mode 100644
index 000000000..55b86a7fd
--- /dev/null
+++ b/apps/climatemappedafrica/src/components/DataVisualisationGuide/index.js
@@ -0,0 +1,92 @@
+import { RichTypography } from "@commons-ui/core";
+import { useMediaQuery, Box, Grid } from "@mui/material";
+import PropTypes from "prop-types";
+import React from "react";
+
+import Card from "@/climatemappedafrica/components/Card";
+import Carousel from "@/climatemappedafrica/components/Carousel";
+import Section from "@/climatemappedafrica/components/Section";
+
+function DataVisualisationGuide({ title, items }) {
+  const isDesktop = useMediaQuery((theme) => theme.breakpoints.up("lg"));
+
+  if (!items?.length) {
+    return null;
+  }
+  return (
+    <Box
+      sx={(theme) => ({
+        padding: `${theme.typography.pxToRem(40)} 0`,
+      })}
+    >
+      <Section>
+        <RichTypography component="h4" variant="h4">
+          {title}
+        </RichTypography>
+        <Box
+          sx={{
+            display: {
+              xs: "none",
+              md: "block",
+            },
+          }}
+        >
+          <Carousel showDots={!isDesktop}>
+            {items.map((item) => (
+              <Card
+                key={item.id}
+                {...item}
+                sx={{
+                  marginTop: "40px",
+                  "& .bold": {
+                    fontWeight: "bold",
+                  },
+                }}
+              />
+            ))}
+          </Carousel>
+        </Box>
+        <Box
+          sx={{
+            display: {
+              xs: "block",
+              md: "none",
+            },
+          }}
+        >
+          <Grid
+            container
+            direction={{ xs: "column", md: "row" }}
+            justifyContent={{ md: "space-between" }}
+          >
+            {items.map((item) => (
+              <Grid item xs={12} key={item.id}>
+                <Card
+                  {...item}
+                  sx={(theme) => ({
+                    marginTop: theme.typography.pxToRem(40),
+                    "& .bold": {
+                      fontWeight: "bold",
+                    },
+                  })}
+                />
+              </Grid>
+            ))}
+          </Grid>
+        </Box>
+      </Section>
+    </Box>
+  );
+}
+
+DataVisualisationGuide.propTypes = {
+  title: PropTypes.string,
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      description: PropTypes.string || PropTypes.array,
+      image: PropTypes.string,
+    }),
+  ),
+};
+
+export default DataVisualisationGuide;
diff --git a/apps/climatemappedafrica/src/pages/[[...slugs]].js b/apps/climatemappedafrica/src/pages/[[...slugs]].js
index b82b526b5..1fcaa711e 100644
--- a/apps/climatemappedafrica/src/pages/[[...slugs]].js
+++ b/apps/climatemappedafrica/src/pages/[[...slugs]].js
@@ -3,6 +3,7 @@ import React from "react";
 import { SWRConfig } from "swr";
 
 import AboutTeam from "@/climatemappedafrica/components/AboutTeam";
+import DataVisualisationGuide from "@/climatemappedafrica/components/DataVisualisationGuide";
 import Footer from "@/climatemappedafrica/components/Footer";
 import Hero from "@/climatemappedafrica/components/Hero";
 import HowItWorks from "@/climatemappedafrica/components/HowItWorks";
@@ -12,6 +13,7 @@ import Summary from "@/climatemappedafrica/components/Summary";
 import { getPageServerSideProps } from "@/climatemappedafrica/lib/data";
 
 const componentsBySlugs = {
+  "data-visualisation-guide": DataVisualisationGuide,
   hero: Hero,
   "how-it-works": HowItWorks,
   "page-hero": PageHero,
diff --git a/apps/climatemappedafrica/src/payload/blocks/DataVisualisationGuide.js b/apps/climatemappedafrica/src/payload/blocks/DataVisualisationGuide.js
new file mode 100644
index 000000000..dc0a7d67e
--- /dev/null
+++ b/apps/climatemappedafrica/src/payload/blocks/DataVisualisationGuide.js
@@ -0,0 +1,41 @@
+import { slateEditor } from "@payloadcms/richtext-slate";
+
+import image from "../fields/image";
+
+const DataVisualisationGuide = {
+  slug: "data-visualisation-guide",
+  imageURL: "/images/cms/blocks/data-visualisation-guide.png",
+  fields: [
+    {
+      name: "title",
+      type: "text",
+      required: true,
+      localized: true,
+    },
+    {
+      name: "items",
+      type: "array",
+      minRows: 1,
+      fields: [
+        image({
+          overrides: {
+            required: true,
+          },
+        }),
+        {
+          name: "description",
+          type: "richText",
+          required: true,
+          editor: slateEditor({
+            admin: {
+              elements: ["link"],
+              leaves: ["bold", "code", "italic", "underline"],
+            },
+          }),
+        },
+      ],
+    },
+  ],
+};
+
+export default DataVisualisationGuide;
diff --git a/apps/climatemappedafrica/src/payload/collections/Pages.js b/apps/climatemappedafrica/src/payload/collections/Pages.js
index ac157c44b..d8ac00aea 100644
--- a/apps/climatemappedafrica/src/payload/collections/Pages.js
+++ b/apps/climatemappedafrica/src/payload/collections/Pages.js
@@ -1,3 +1,4 @@
+import DataVisualisationGuide from "../blocks/DataVisualisationGuide";
 import Hero from "../blocks/Hero";
 import HowItWorks from "../blocks/HowItWorks";
 import PageHero from "../blocks/PageHero";
@@ -32,7 +33,14 @@ const Pages = {
     {
       name: "blocks",
       type: "blocks",
-      blocks: [Hero, HowItWorks, PageHero, Summary, Team],
+      blocks: [
+        DataVisualisationGuide,
+        Hero,
+        HowItWorks,
+        PageHero,
+        Summary,
+        Team,
+      ],
       localized: true,
       admin: {
         initCollapsed: true,