diff --git a/apps/climatemappedafrica/eslint.webpack.config.js b/apps/climatemappedafrica/eslint.webpack.config.js
index 4242830fc..7e30d0408 100644
--- a/apps/climatemappedafrica/eslint.webpack.config.js
+++ b/apps/climatemappedafrica/eslint.webpack.config.js
@@ -19,7 +19,6 @@ module.exports = {
   resolve: {
     alias: {
       "@/climatemappedafrica": path.resolve(__dirname, "src/"),
-      content: path.resolve(__dirname, "content/"),
     },
     extensions: [".js"],
   },
diff --git a/apps/climatemappedafrica/jest.config.js b/apps/climatemappedafrica/jest.config.js
index 69bb7f133..70265641e 100644
--- a/apps/climatemappedafrica/jest.config.js
+++ b/apps/climatemappedafrica/jest.config.js
@@ -11,6 +11,8 @@ module.exports = {
       "<rootDir>/../../packages/commons-ui-core/src/$1",
     "^@/commons-ui/next/(.*)$":
       "<rootDir>/../../packages/commons-ui-next/src/$1",
+    "^@/commons-ui/payload/(.*)$":
+      "<rootDir>/../../packages/commons-ui-payload/src/$1",
   },
   transformIgnorePatterns: ["<rootDir>/node_modules/(?!camelcase-keys)"],
 };
diff --git a/apps/climatemappedafrica/jsconfig.json b/apps/climatemappedafrica/jsconfig.json
index d997fd29f..c2777f419 100644
--- a/apps/climatemappedafrica/jsconfig.json
+++ b/apps/climatemappedafrica/jsconfig.json
@@ -5,6 +5,7 @@
       "@/climatemappedafrica/*": ["./src/*"],
       "@/commons-ui/core/*": ["../../packages/commons-ui-core/src/*"],
       "@/commons-ui/next/*": ["../../packages/commons-ui-next/src/*"],
+      "@/commons-ui/payload/*": ["../../packages/commons-ui-payload/src/*"],
       "@/hurumap/core/*": ["../../packages/hurumap-core/src/*"],
       "@/hurumap/next/*": ["../../packages/hurumap-next/src/*"]
     }
diff --git a/apps/climatemappedafrica/next.config.js b/apps/climatemappedafrica/next.config.js
index ed809bcc4..9bab1d826 100644
--- a/apps/climatemappedafrica/next.config.js
+++ b/apps/climatemappedafrica/next.config.js
@@ -28,6 +28,7 @@ module.exports = {
   transpilePackages: [
     "@commons-ui/core",
     "@commons-ui/next",
+    "@commons-ui/payload",
     "@hurumap/core",
     "@hurumap/next",
   ],
diff --git a/apps/climatemappedafrica/src/components/Footer/index.js b/apps/climatemappedafrica/src/components/Footer/index.js
index 57e721b1f..aa58eba96 100644
--- a/apps/climatemappedafrica/src/components/Footer/index.js
+++ b/apps/climatemappedafrica/src/components/Footer/index.js
@@ -69,7 +69,7 @@ function Footer(props) {
                   },
                 })}
                 elements={description}
-                typographyProps={{
+                TypographyProps={{
                   LinkProps: {
                     color: "text.secondary",
                     sx: {
diff --git a/apps/climatemappedafrica/src/components/Hero/Hero.snap.js b/apps/climatemappedafrica/src/components/Hero/Hero.snap.js
index 4fc9fb1e1..df36df3f0 100644
--- a/apps/climatemappedafrica/src/components/Hero/Hero.snap.js
+++ b/apps/climatemappedafrica/src/components/Hero/Hero.snap.js
@@ -76,6 +76,7 @@ exports[`<Hero /> renders unchanged 1`] = `
               />
               <button
                 class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeSmall makeStyles-button-11 css-13dk0vd-MuiButtonBase-root-MuiIconButton-root"
+                root="[object Object]"
                 tabindex="0"
                 type="button"
               >
diff --git a/apps/climatemappedafrica/src/components/RichHeader/RichHeader.js b/apps/climatemappedafrica/src/components/RichHeader/RichHeader.js
index 68fd26425..7db5605fb 100644
--- a/apps/climatemappedafrica/src/components/RichHeader/RichHeader.js
+++ b/apps/climatemappedafrica/src/components/RichHeader/RichHeader.js
@@ -30,7 +30,7 @@ const RichHeader = React.forwardRef(function RichHeader(props, ref) {
       </RichTypography>
       <RichText
         {...TitleProps}
-        typographyProps={{
+        TypographyProps={{
           variant: "h1",
           ...TitleProps?.typographyProps,
         }}
@@ -56,7 +56,7 @@ const RichHeader = React.forwardRef(function RichHeader(props, ref) {
       />
       <RichText
         {...SubtitleProps}
-        typographyProps={{
+        TypographyProps={{
           variant: "subtitle1",
           sx: (theme) => ({
             textDecorationColor: theme.palette.text.primary,
diff --git a/apps/climatemappedafrica/src/components/Summary/Summary.js b/apps/climatemappedafrica/src/components/Summary/Summary.js
index ef260f81f..e7f7e4a71 100644
--- a/apps/climatemappedafrica/src/components/Summary/Summary.js
+++ b/apps/climatemappedafrica/src/components/Summary/Summary.js
@@ -1,28 +1,25 @@
 import { RichText } from "@commons-ui/payload";
-import { Box, Grid, Typography } from "@mui/material";
+import { Box, Grid, Typography, alpha } from "@mui/material";
 import PropTypes from "prop-types";
 import React from "react";
 
-import useStyles from "./useStyles";
-
 import Section from "@/climatemappedafrica/components/Section";
 
 const Summary = React.forwardRef(function Summary(props, ref) {
   const { content, title, subtitle } = props;
-  const classes = useStyles(props);
 
   if (!content) {
     return null;
   }
   return (
     <Box
-      className={classes.root}
       sx={{
         bgcolor: "background.paper",
+        py: { xs: 5, md: 10 },
       }}
       ref={ref}
     >
-      <Section classes={{ root: classes.section }}>
+      <Section>
         <Grid justifyContent="space-between" container>
           <Grid item xs={12} lg={4}>
             <Typography
@@ -45,15 +42,25 @@ const Summary = React.forwardRef(function Summary(props, ref) {
           <Grid item xs={12} lg={6}>
             <RichText
               elements={content}
-              typographyProps={{
-                variant: "body2",
+              MediaProps={{
+                ImageProps: {
+                  sx: (theme) => ({
+                    border: `1px solid ${theme.palette.divider}`,
+                    borderRadius: 1,
+                  }),
+                },
+                CaptionProps: {
+                  sx: (theme) => ({
+                    color: alpha(theme.palette.text.primary, 0.75),
+                  }),
+                },
+              }}
+              TypographyProps={{
                 LinkProps: {
                   color: "text.primary",
-                  sx: {
-                    textDecorationColor: "text.primary",
-                    textDecoration: "underline",
-                  },
+                  // TODO(kilemensi): Figure out why textDecorationColor doesn't change
                 },
+                variant: "body2",
               }}
               sx={{
                 "&>p": {
@@ -63,9 +70,7 @@ const Summary = React.forwardRef(function Summary(props, ref) {
                   mb: 0,
                 },
               }}
-            >
-              {content}
-            </RichText>
+            />
           </Grid>
         </Grid>
       </Section>
diff --git a/apps/climatemappedafrica/src/components/Summary/Summary.snap.js b/apps/climatemappedafrica/src/components/Summary/Summary.snap.js
index b53fa421b..ac94d3041 100644
--- a/apps/climatemappedafrica/src/components/Summary/Summary.snap.js
+++ b/apps/climatemappedafrica/src/components/Summary/Summary.snap.js
@@ -3,10 +3,10 @@
 exports[`<Summary /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiBox-root css-1fs22e1"
+    class="MuiBox-root css-dx4cvz"
   >
     <div
-      class="makeStyles-root-7 makeStyles-root-5 makeStyles-root-3 makeStyles-section-1 makeStyles-fixed-4 MuiBox-root css-0"
+      class="makeStyles-root-5 makeStyles-root-3 makeStyles-root-1 makeStyles-fixed-2 MuiBox-root css-0"
     >
       <div
         class="MuiGrid-root MuiGrid-container css-1xzqqmo-MuiGrid-root"
diff --git a/apps/climatemappedafrica/src/components/Summary/useStyles.js b/apps/climatemappedafrica/src/components/Summary/useStyles.js
deleted file mode 100644
index 1baeebdbe..000000000
--- a/apps/climatemappedafrica/src/components/Summary/useStyles.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import makeStyles from "@mui/styles/makeStyles";
-
-const useStyles = makeStyles(({ typography, breakpoints }) => ({
-  section: {
-    paddingBottom: typography.pxToRem(80),
-    paddingTop: typography.pxToRem(80),
-  },
-  container: {
-    [breakpoints.up("md")]: {
-      margin: typography.pxToRem(0),
-    },
-    "& p": {
-      paddingBottom: typography.pxToRem(24),
-      marginTop: 0,
-    },
-    "& img": {
-      width: "100%",
-      maxWidth: "100%",
-      objectFit: "contain",
-      height: "auto",
-    },
-    "& .wp-block-image": {
-      width: "100%",
-      maxWidth: "100%",
-      margin: 0,
-      marginTop: typography.pxToRem(20),
-      marginBottom: typography.pxToRem(20),
-    },
-  },
-}));
-
-export default useStyles;
diff --git a/apps/climatemappedafrica/src/lib/data/common/index.js b/apps/climatemappedafrica/src/lib/data/common/index.js
index ab0341049..e2d6d37fa 100644
--- a/apps/climatemappedafrica/src/lib/data/common/index.js
+++ b/apps/climatemappedafrica/src/lib/data/common/index.js
@@ -56,7 +56,7 @@ function getNavBar(siteSettings, variant) {
 export async function getPageProps(api, context) {
   // For now, ClimatemappedAfrica only supports single paths i.e. /, /about, etc.,
   // so params.slug[0] is good enough
-  const slugs = context.params?.slug || undefined;
+  const slugs = context.params?.slugs || undefined;
   const [slug] = slugs || ["index"];
   const { draftMode = false } = context;
   const options = { draft: draftMode };
diff --git a/apps/climatemappedafrica/src/payload/blocks/Summary.js b/apps/climatemappedafrica/src/payload/blocks/Summary.js
index b29e3202d..9478ec856 100644
--- a/apps/climatemappedafrica/src/payload/blocks/Summary.js
+++ b/apps/climatemappedafrica/src/payload/blocks/Summary.js
@@ -31,8 +31,35 @@ const Summary = {
       },
       editor: slateEditor({
         admin: {
-          elements: ["link", "ol", "ul", "indent"],
-          leaves: ["bold", "code", "italic", "underline"],
+          elements: [
+            "h2",
+            "h3",
+            "h4",
+            "h5",
+            "h6",
+            "blockquote",
+            "link",
+            "ol",
+            "ul",
+            "indent",
+            "relationship",
+            "upload",
+            "textAlign",
+          ],
+          leaves: ["bold", "code", "italic", "strikethrough", "underline"],
+          upload: {
+            collections: {
+              media: {
+                fields: [
+                  {
+                    name: "caption",
+                    type: "text",
+                    localized: true,
+                  },
+                ],
+              },
+            },
+          },
         },
       }),
       required: true,
diff --git a/apps/climatemappedafrica/src/theme/index.js b/apps/climatemappedafrica/src/theme/index.js
index eae36d1aa..3e912ee8f 100644
--- a/apps/climatemappedafrica/src/theme/index.js
+++ b/apps/climatemappedafrica/src/theme/index.js
@@ -138,7 +138,7 @@ const theme = createTheme({
   },
 });
 
-const { palette, typography, breakpoints, overrides } = theme;
+const { breakpoints, components, palette, typography } = theme;
 const { pxToRem } = typography;
 // Typography
 deepmerge(
@@ -247,7 +247,7 @@ deepmerge(
 
 // Overrides
 deepmerge(
-  overrides,
+  components,
   {
     MuiCssBaseline: {
       "@global": {
@@ -255,6 +255,14 @@ deepmerge(
           cursor: `url(${hoverIcon.src}), pointer !important`,
         },
       },
+      styleOverrides: `
+        blockquote {
+          border-left: 2px solid #333333;
+          /* MuiTypography-root has margin-left: 0 that we must override */
+          margin-left: -8px !important;
+          padding-left: 6px;
+        }
+      `,
     },
     MuiButton: {
       root: {
diff --git a/apps/climatemappedafrica/tsconfig.json b/apps/climatemappedafrica/tsconfig.json
index f15e19bc5..c73d18f31 100644
--- a/apps/climatemappedafrica/tsconfig.json
+++ b/apps/climatemappedafrica/tsconfig.json
@@ -18,6 +18,7 @@
       "@/climatemappedafrica/*": ["./src/*"],
       "@/commons-ui/core/*": ["../../packages/commons-ui-core/src/*"],
       "@/commons-ui/next/*": ["../../packages/commons-ui-next/src/*"],
+      "@/commons-ui/payload/*": ["../../packages/commons-ui-payload/src/*"],
       "@/hurumap/core/*": ["../../packages/hurumap-core/src/*"],
       "@/hurumap/next/*": ["../../packages/hurumap-next/src/*"]
     }
diff --git a/packages/commons-ui-payload/src/RichText/Media.js b/packages/commons-ui-payload/src/RichText/Media.js
new file mode 100644
index 000000000..04e47b2a3
--- /dev/null
+++ b/packages/commons-ui-payload/src/RichText/Media.js
@@ -0,0 +1,42 @@
+import { Figure, RichTypography } from "@commons-ui/next";
+import React from "react";
+
+import { imageFromMedia } from "@/commons-ui/payload/utils";
+
+const Media = React.forwardRef(function Media(props, ref) {
+  const { CaptionProps, ImageProps, media, caption, sx, ...others } = props;
+  const image = imageFromMedia(media);
+
+  return (
+    <Figure
+      {...others}
+      ImageProps={{
+        // We're going to set img size directly using style https://nextjs.org/docs/api-reference/next/image#style
+        fill: false,
+        height: 0,
+        style: { width: "100%", height: "auto" },
+        unoptimized: true,
+        width: 0,
+        ...ImageProps,
+        ...image,
+      }}
+      ref={ref}
+    >
+      <RichTypography
+        component="figcaption"
+        html={false}
+        variant="caption"
+        {...CaptionProps}
+        sx={[
+          ...(Array.isArray(CaptionProps?.sx)
+            ? CaptionProps.sx
+            : [CaptionProps?.sx]),
+        ]}
+      >
+        {caption}
+      </RichTypography>
+    </Figure>
+  );
+});
+
+export default Media;
diff --git a/packages/commons-ui-payload/src/RichText/RichText.js b/packages/commons-ui-payload/src/RichText/RichText.js
index dd1c236bd..610687984 100644
--- a/packages/commons-ui-payload/src/RichText/RichText.js
+++ b/packages/commons-ui-payload/src/RichText/RichText.js
@@ -4,10 +4,22 @@ import { Box } from "@mui/material";
 import React, { Fragment } from "react";
 import { Text } from "slate";
 
+import Media from "./Media";
+
 const DEFAULT_PROPS = {
   html: false,
 };
 
+const mostIndentedNode = (node) => {
+  let level = 1;
+  let indentedNode = node;
+  while (indentedNode.children?.type === "indent") {
+    level += 1;
+    indentedNode = indentedNode.children;
+  }
+  return { level, indentedNode };
+};
+
 const serialize = (children, props) =>
   children?.map((node, i) => {
     if (Text.isText(node)) {
@@ -21,6 +33,12 @@ const serialize = (children, props) =>
       if (node.italic) {
         text = <em key={i}>{text}</em>;
       }
+      if (node.strikethrough) {
+        text = <s key={i}>{text}</s>;
+      }
+      if (node.underline) {
+        text = <u key={i}>{text}</u>;
+      }
 
       // Handle other leaf types here...
 
@@ -30,75 +48,109 @@ const serialize = (children, props) =>
     if (!node) {
       return null;
     }
-    // TODO(kilemensi): handle node.type === indent
+    const TypographyProps = { ...DEFAULT_PROPS, ...props.TypographyProps };
     switch (node.type) {
       case "h1":
         return (
-          <RichTypography {...DEFAULT_PROPS} {...props} variant="h1" key={i}>
+          <RichTypography {...TypographyProps} variant="h1" key={i}>
             {serialize(node.children)}
           </RichTypography>
         );
       case "h2":
         return (
-          <RichTypography {...DEFAULT_PROPS} {...props} variant="h2" key={i}>
+          <RichTypography {...TypographyProps} variant="h2" key={i}>
             {serialize(node.children)}
           </RichTypography>
         );
       case "h3":
         return (
-          <RichTypography {...DEFAULT_PROPS} {...props} variant="h3" key={i}>
+          <RichTypography {...TypographyProps} variant="h3" key={i}>
             {serialize(node.children)}
           </RichTypography>
         );
       case "h4":
         return (
-          <RichTypography {...DEFAULT_PROPS} {...props} variant="h4" key={i}>
+          <RichTypography {...TypographyProps} variant="h4" key={i}>
             {serialize(node.children)}
           </RichTypography>
         );
       case "h5":
         return (
-          <RichTypography {...DEFAULT_PROPS} {...props} variant="h5" key={i}>
+          <RichTypography {...TypographyProps} variant="h5" key={i}>
             {serialize(node.children)}
           </RichTypography>
         );
       case "h6":
         return (
-          <RichTypography {...DEFAULT_PROPS} {...props} variant="h6" key={i}>
+          <RichTypography {...TypographyProps} variant="h6" key={i}>
             {serialize(node.children)}
           </RichTypography>
         );
-      case "quote":
-        return <blockquote key={i}>{serialize(node.children)}</blockquote>;
+      case "indent": {
+        const { level, indentedNode } = mostIndentedNode(node);
+        // TODO(kilemensi): Can we pass `level` to children & use `text-indent`?
+        return (
+          <Box
+            sx={{
+              pl: `${level * 16}px`, // 1 indention = 16px
+            }}
+            key={i}
+          >
+            {serialize(indentedNode.children, props)}
+          </Box>
+        );
+      }
       case "link":
+        // We use RichTypography instead of Link directly just incase props
+        // such as LinkProps, etc. were passed in.
+        // TODO(kilemensi): Figure out a better way so that we can use Link directly
         return (
-          <RichTypography component={Link} href={node.href} key={i} {...props}>
+          <RichTypography
+            {...TypographyProps}
+            component={Link}
+            href={node.href}
+            key={i}
+          >
             {serialize(node.children)}
           </RichTypography>
         );
-      default:
+      case "quote":
+        return <blockquote key={i}>{serialize(node.children)}</blockquote>;
+      case "upload":
+        if (node.relationTo === "media") {
+          const caption = node.fields?.caption;
+
+          return (
+            <Media {...props.MediaProps} media={node.value} caption={caption} />
+          );
+        }
+        // TODO(kilemensi): Do we need to handle other types of uploads such as documents?
+        return null;
+      default: {
+        const { textAlign, type: component } = node;
         return (
           <RichTypography
-            component={node.type}
-            {...DEFAULT_PROPS}
-            {...props}
+            {...TypographyProps}
+            component={component}
+            textAlign={textAlign}
             key={i}
           >
             {serialize(node.children, props)}
           </RichTypography>
         );
+      }
     }
   });
 
 const RichText = React.forwardRef(function RichText(props, ref) {
-  const { elements, variant, typographyProps, ...other } = props;
+  const { elements, variant, MediaProps, TypographyProps, ...other } = props;
 
   if (!elements?.length) {
     return null;
   }
   return (
     <Box {...other} ref={ref}>
-      {serialize(elements, typographyProps)}
+      {serialize(elements, { MediaProps, TypographyProps })}
     </Box>
   );
 });
diff --git a/packages/commons-ui-payload/src/index.js b/packages/commons-ui-payload/src/index.js
index ace4dbf6b..409a9c1a0 100644
--- a/packages/commons-ui-payload/src/index.js
+++ b/packages/commons-ui-payload/src/index.js
@@ -1,3 +1,5 @@
 /* eslint-disable import/prefer-default-export */
 
+export * from "./utils";
+
 export { default as RichText } from "./RichText";
diff --git a/packages/commons-ui-payload/src/utils/image-from-media.js b/packages/commons-ui-payload/src/utils/image-from-media.js
new file mode 100644
index 000000000..f1c380434
--- /dev/null
+++ b/packages/commons-ui-payload/src/utils/image-from-media.js
@@ -0,0 +1,9 @@
+function imageFromMedia(media, options) {
+  const { alt, url } = media || {};
+  if (!url?.length) {
+    return null;
+  }
+  return { alt, src: url, ...options };
+}
+
+export default imageFromMedia;
diff --git a/packages/commons-ui-payload/src/utils/index.js b/packages/commons-ui-payload/src/utils/index.js
new file mode 100644
index 000000000..8490ce803
--- /dev/null
+++ b/packages/commons-ui-payload/src/utils/index.js
@@ -0,0 +1,3 @@
+export { default as imageFromMedia } from "./image-from-media";
+
+export default undefined;