diff --git a/apps/codeforafrica/src/components/Project/Project.js b/apps/codeforafrica/src/components/Project/Project.js
new file mode 100644
index 000000000..3e4376c41
--- /dev/null
+++ b/apps/codeforafrica/src/components/Project/Project.js
@@ -0,0 +1,90 @@
+import { Section } from "@commons-ui/core";
+import { Box } from "@mui/material";
+import React from "react";
+
+import AccoladeBadgeList from "@/codeforafrica/components/AccoladeBadgeList";
+import ProjectDetails from "@/codeforafrica/components/ProjectDetails";
+import ProjectPageHeader from "@/codeforafrica/components/ProjectPageHeader";
+import RelatedProjects from "@/codeforafrica/components/RelatedProjects";
+import RelatedStories from "@/codeforafrica/components/RelatedStories";
+import SectionDivider from "@/codeforafrica/components/SectionDivider";
+import TeamMembers from "@/codeforafrica/components/TeamMembers";
+
+function Project(props) {
+  const {
+    badges,
+    description,
+    donors,
+    links,
+    partners,
+    relatedProjectsTitle,
+    relatedProjects,
+    team,
+    stories,
+  } = props;
+
+  return (
+    <Box>
+      <ProjectPageHeader {...props} />
+      <Section
+        sx={{
+          marginTop: { xs: "26.6px", sm: "20px", md: "56px" },
+          marginBottom: "42px",
+          px: { xs: 2.5, sm: 0 },
+        }}
+      >
+        <AccoladeBadgeList badges={badges} />
+      </Section>
+      <ProjectDetails
+        description={description}
+        donors={donors}
+        links={links}
+        partners={partners}
+        sx={{
+          my: "42px",
+          px: { xs: 2.5, sm: 0 },
+        }}
+      />
+      {stories ? (
+        <>
+          <SectionDivider
+            sx={{
+              px: { xs: 2.5, sm: 0 },
+              py: "42px",
+            }}
+          />
+          <RelatedStories {...stories} sx={{ py: 0 }} />{" "}
+        </>
+      ) : null}
+      {team ? (
+        <>
+          <SectionDivider
+            sx={{
+              px: { xs: 2.5, sm: 0 },
+              py: "42px",
+            }}
+          />
+          <TeamMembers
+            {...team}
+            sx={{ px: { xs: 2.5, sm: 0 }, overflowX: "visible" }}
+          />
+        </>
+      ) : null}
+      <Box
+        sx={{
+          bgcolor: { xs: "none", md: "background.main" },
+        }}
+      >
+        <RelatedProjects
+          sx={{
+            py: { xs: 5, md: 8, lg: 10 },
+          }}
+          title={relatedProjectsTitle}
+          projects={relatedProjects}
+        />
+      </Box>
+    </Box>
+  );
+}
+
+export default Project;
diff --git a/apps/codeforafrica/src/components/Project/Project.snap.js b/apps/codeforafrica/src/components/Project/Project.snap.js
new file mode 100644
index 000000000..5d077a335
--- /dev/null
+++ b/apps/codeforafrica/src/components/Project/Project.snap.js
@@ -0,0 +1,224 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Project /> renders unchanged 1`] = `
+<div>
+  <div
+    class="MuiBox-root css-0"
+  >
+    <div
+      class="MuiBox-root css-h16mw8"
+    >
+      <div
+        class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-adddkm-MuiContainer-root"
+      >
+        <div
+          class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiCard-root css-1rwywmd-MuiPaper-root-MuiCard-root"
+        >
+          <nav
+            class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-15752dv-MuiTypography-root-MuiBreadcrumbs-root"
+          >
+            <ol
+              class="MuiBreadcrumbs-ol css-4pdmu4-MuiBreadcrumbs-ol"
+            >
+              <li
+                class="MuiBreadcrumbs-li"
+              >
+                <a
+                  class="MuiTypography-root MuiTypography-body1Underline MuiLink-root MuiLink-underlineAlways css-1xj2ue7-MuiTypography-root-MuiLink-root"
+                  href="/projects"
+                >
+                  Our Work
+                </a>
+              </li>
+              <li
+                aria-hidden="true"
+                class="MuiBreadcrumbs-separator css-1wuw8dw-MuiBreadcrumbs-separator"
+              >
+                /
+              </li>
+              <li
+                class="MuiBreadcrumbs-li"
+              />
+            </ol>
+          </nav>
+          <img
+            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-tm1rxb-MuiCardMedia-root"
+          />
+          <div
+            class="MuiBox-root css-1ntmuzk"
+          >
+            <nav
+              class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-mdodgn-MuiTypography-root-MuiBreadcrumbs-root"
+            >
+              <ol
+                class="MuiBreadcrumbs-ol css-4pdmu4-MuiBreadcrumbs-ol"
+              >
+                <li
+                  class="MuiBreadcrumbs-li"
+                >
+                  <a
+                    class="MuiTypography-root MuiTypography-body1Underline MuiLink-root MuiLink-underlineAlways css-1xj2ue7-MuiTypography-root-MuiLink-root"
+                    href="/projects"
+                  >
+                    Our Work
+                  </a>
+                </li>
+                <li
+                  aria-hidden="true"
+                  class="MuiBreadcrumbs-separator css-1wuw8dw-MuiBreadcrumbs-separator"
+                >
+                  /
+                </li>
+                <li
+                  class="MuiBreadcrumbs-li"
+                />
+              </ol>
+            </nav>
+            <div
+              class="MuiCardContent-root css-nvlyan-MuiCardContent-root"
+            >
+              <div
+                class="MuiPaper-root MuiPaper-outlined css-1irxcig-MuiPaper-root"
+              >
+                <div
+                  class="MuiBox-root css-uq7i85"
+                >
+                  <h4
+                    class="MuiTypography-root MuiTypography-h4 css-yd0a7d-MuiTypography-root"
+                  />
+                  <div
+                    class="MuiStack-root css-1v20l1v-MuiStack-root"
+                  >
+                    <span
+                      class="MuiTypography-root MuiTypography-body3SemiBold css-dyfp2-MuiTypography-root"
+                    />
+                    <p
+                      class="MuiTypography-root MuiTypography-body2 css-1rafkl6-MuiTypography-root"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="MuiCardActions-root MuiCardActions-spacing css-1jzc3k6-MuiCardActions-root"
+            >
+              <button
+                class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-12dqrmj-MuiButtonBase-root-MuiButton-root"
+                tabindex="0"
+                type="button"
+              >
+                Launch Project
+                <span
+                  class="MuiButton-endIcon MuiButton-iconSizeMedium css-1gnd1fd-MuiButton-endIcon"
+                >
+                  <div
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+                    focusable="false"
+                    viewbox="0 0 24 24"
+                  />
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1mtya01-MuiContainer-root"
+    />
+    <div
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-kxk6gi-MuiContainer-root"
+    >
+      <div
+        class="MuiGrid-root MuiGrid-container css-1ldf9ke-MuiGrid-root"
+      >
+        <div
+          class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-true css-1vcuf8r-MuiGrid-root"
+        >
+          <div
+            class="MuiStack-root css-h9vuy5-MuiStack-root"
+          >
+            <div
+              class="MuiTypography-root MuiTypography-h5Small css-1rq9mfe-MuiTypography-root"
+            >
+              Details
+            </div>
+            <div
+              class="MuiStack-root css-1025p66-MuiStack-root"
+            >
+              <div
+                class="MuiTypography-root MuiTypography-footerCap css-scsc4a-MuiTypography-root"
+              >
+                Share This Project
+              </div>
+              <div
+                class="MuiStack-root css-1jqw290-MuiStack-root"
+              >
+                <button
+                  aria-label="Twitter"
+                  class="react-share__ShareButton MuiBox-root css-15p9n5u"
+                  data-mui-internal-clone-element="true"
+                  style="background-color: transparent; padding: 0px; cursor: pointer;"
+                >
+                  <div
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+                    focusable="false"
+                    viewbox="0 0 24 24"
+                  />
+                </button>
+                <button
+                  aria-label="Linkedin"
+                  class="react-share__ShareButton MuiBox-root css-15p9n5u"
+                  data-mui-internal-clone-element="true"
+                  style="background-color: transparent; padding: 0px; cursor: pointer;"
+                >
+                  <div
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+                    focusable="false"
+                    viewbox="0 0 24 24"
+                  />
+                </button>
+                <button
+                  aria-label="Facebook"
+                  class="react-share__ShareButton MuiBox-root css-15p9n5u"
+                  data-mui-internal-clone-element="true"
+                  style="background-color: transparent; padding: 0px; cursor: pointer;"
+                >
+                  <div
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
+                    focusable="false"
+                    viewbox="0 0 24 24"
+                  />
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <hr
+          class="MuiDivider-root MuiDivider-fullWidth MuiDivider-flexItem css-11319uf-MuiDivider-root"
+        />
+        <div
+          class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-auto css-17q9xai-MuiGrid-root"
+        >
+          <div
+            class="MuiStack-root css-hqqldn-MuiStack-root"
+          >
+            <div
+              class="MuiTypography-root MuiTypography-h5 css-1a7nesc-MuiTypography-root"
+            >
+              Description
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="MuiBox-root css-em1l33"
+    />
+  </div>
+</div>
+`;
diff --git a/apps/codeforafrica/src/components/Project/Project.test.js b/apps/codeforafrica/src/components/Project/Project.test.js
new file mode 100644
index 000000000..19ce985fb
--- /dev/null
+++ b/apps/codeforafrica/src/components/Project/Project.test.js
@@ -0,0 +1,40 @@
+import { createRender } from "@commons-ui/testing-library";
+import React from "react";
+
+import Project from "./Project";
+
+import theme from "@/codeforafrica/theme";
+
+// eslint-disable-next-line testing-library/render-result-naming-convention
+const render = createRender({ theme });
+
+const defaultProps = {
+  project: {
+    slug: "knowledge-africa",
+    name: "knowledgeAFRICA",
+    tagLine: "Knowledge tag line",
+    title:
+      'Empowering citizens through <span class="highlight">drone technology</span>',
+    subtitle:
+      "AfricanDRONE brings together communities of drone operators, enthusiasts, journalists, activists, and entrepreneurs in Africa who use drones for good.",
+    description:
+      "This award-winning initiative works to give citizens a new perspective on their lives. Using drone technology, africanDRONE empowers local pilots through a self-help network that offers seed funding, skills development, resource sharing, advocacy, and networking opportunities for members. The goal is to support the evolution of a vibrant and diverse drone ecosystem across Africa.",
+    icon: {
+      src: "https://res.cloudinary.com/code-for-africa/image/upload/v1652431402/codeforafrica/icons/Type_SourceAfrica_m7yvmt.svg",
+    },
+    thumbnail: {
+      src: "https://res.cloudinary.com/code-for-africa/image/upload/v1652705959/codeforafrica/images/Property_1_PesaCheck_iahlrh.jpg",
+    },
+    tag: "Knowedge",
+    href: "/projects/knowledge-africa",
+    externalHref: "https://codeforafrica.org",
+  },
+  sections: [],
+};
+
+describe("<Project />", () => {
+  it("renders unchanged", () => {
+    const { container } = render(<Project {...defaultProps} />);
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/apps/codeforafrica/src/components/Project/index.js b/apps/codeforafrica/src/components/Project/index.js
new file mode 100644
index 000000000..f3c656ec0
--- /dev/null
+++ b/apps/codeforafrica/src/components/Project/index.js
@@ -0,0 +1,3 @@
+import Project from "./Project";
+
+export default Project;
diff --git a/apps/codeforafrica/src/components/ProjectDetails/ProjectDescription.js b/apps/codeforafrica/src/components/ProjectDetails/ProjectDescription.js
index 83fb25bd0..1b7de5601 100644
--- a/apps/codeforafrica/src/components/ProjectDetails/ProjectDescription.js
+++ b/apps/codeforafrica/src/components/ProjectDetails/ProjectDescription.js
@@ -4,9 +4,11 @@ import React from "react";
 
 import Button from "./ProjectDescriptionButton";
 
+import RichText from "@/codeforafrica/components/RichText";
+
 const ProjectDescription = React.forwardRef(
   function ProjectDescription(props, ref) {
-    const { children, links, sx, title, ...other } = props;
+    const { description, links, sx, title, ...other } = props;
 
     if (!title?.length) {
       return null;
@@ -19,14 +21,16 @@ const ProjectDescription = React.forwardRef(
         ref={ref}
       >
         <RichTypography variant="h5">{title}</RichTypography>
-        <RichTypography variant="body1" sx={{ typography: { md: "body2" } }}>
-          {children}
-        </RichTypography>
+        <RichText
+          variant="body1"
+          elements={description}
+          sx={{ typography: { md: "body2" } }}
+        />
         {links?.length > 0 ? (
           <Stack direction="row" spacing={2.5}>
-            {links.map(({ content, href, slug }) => (
-              <Button key={slug} href={href} slug={slug}>
-                {content}
+            {links.map(({ label, href, slug }) => (
+              <Button key={href} href={href} slug={slug}>
+                {label}
               </Button>
             ))}
           </Stack>
diff --git a/apps/codeforafrica/src/components/ProjectDetails/ProjectDescription.snap.js b/apps/codeforafrica/src/components/ProjectDetails/ProjectDescription.snap.js
index 1a36215e8..b52607f5e 100644
--- a/apps/codeforafrica/src/components/ProjectDetails/ProjectDescription.snap.js
+++ b/apps/codeforafrica/src/components/ProjectDetails/ProjectDescription.snap.js
@@ -20,7 +20,6 @@ exports[`<ProjectDescription /> renders unchanged 1`] = `
         tabindex="0"
         target="_blank"
       >
-        Github
         <span
           class="MuiButton-endIcon MuiButton-iconSizeSmall css-jcxoq4-MuiButton-endIcon"
         >
diff --git a/apps/codeforafrica/src/components/ProjectDetails/ProjectDetails.js b/apps/codeforafrica/src/components/ProjectDetails/ProjectDetails.js
index 5329fcd30..6e5a50895 100644
--- a/apps/codeforafrica/src/components/ProjectDetails/ProjectDetails.js
+++ b/apps/codeforafrica/src/components/ProjectDetails/ProjectDetails.js
@@ -6,7 +6,7 @@ import ProjectDescription from "./ProjectDescription";
 import ProjectStakeholders from "./ProjectStakeholders";
 
 const ProjectDetails = React.forwardRef(function ProjectDetails(props, ref) {
-  const { content, donors, links, partners, ...other } = props;
+  const { description, donors, links, partners, ...other } = props;
   const isDesktop = useMediaQuery((theme) => theme.breakpoints.up("md"));
 
   return (
@@ -32,9 +32,11 @@ const ProjectDetails = React.forwardRef(function ProjectDetails(props, ref) {
           }}
         />
         <Grid item xs={12} md="auto" sx={{ order: { xs: 2, md: 0 } }}>
-          <ProjectDescription links={links} title="Description">
-            {content}
-          </ProjectDescription>
+          <ProjectDescription
+            description={description}
+            links={links}
+            title="Description"
+          />
         </Grid>
       </Grid>
     </Section>
diff --git a/apps/codeforafrica/src/components/ProjectDetails/ProjectDetails.snap.js b/apps/codeforafrica/src/components/ProjectDetails/ProjectDetails.snap.js
index fbff2bee7..135f6aad6 100644
--- a/apps/codeforafrica/src/components/ProjectDetails/ProjectDetails.snap.js
+++ b/apps/codeforafrica/src/components/ProjectDetails/ProjectDetails.snap.js
@@ -4,7 +4,6 @@ exports[`<ProjectDetails /> renders unchanged 1`] = `
 <div>
   <div
     class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-eoqn3z-MuiContainer-root"
-    description="This award-winning initiative works to give citizens a new perspective on their lives. Using drone technology, africanDRONE empowers local pilots through a self-help network that offers seed funding, skills development, resource sharing, advocacy, and networking opportunities for members. The goal is to support the evolution of a vibrant and diverse drone ecosystem across Africa."
   >
     <div
       class="MuiGrid-root MuiGrid-container css-1ldf9ke-MuiGrid-root"
@@ -88,6 +87,11 @@ exports[`<ProjectDetails /> renders unchanged 1`] = `
           >
             Description
           </div>
+          <div
+            class="MuiBox-root css-cmetz8"
+          >
+            This award-winning initiative works to give citizens a new perspective on their lives. Using drone technology, africanDRONE empowers local pilots through a self-help network that offers seed funding, skills development, resource sharing, advocacy, and networking opportunities for members. The goal is to support the evolution of a vibrant and diverse drone ecosystem across Africa.
+          </div>
           <div
             class="MuiStack-root css-1dhgtrr-MuiStack-root"
           >
@@ -98,7 +102,6 @@ exports[`<ProjectDetails /> renders unchanged 1`] = `
               tabindex="0"
               target="_blank"
             >
-              Launch Project
               <span
                 class="MuiButton-endIcon MuiButton-iconSizeSmall css-jcxoq4-MuiButton-endIcon"
               >
@@ -117,7 +120,6 @@ exports[`<ProjectDetails /> renders unchanged 1`] = `
               tabindex="0"
               target="_blank"
             >
-              GitHub
               <span
                 class="MuiButton-endIcon MuiButton-iconSizeSmall css-jcxoq4-MuiButton-endIcon"
               >
diff --git a/apps/codeforafrica/src/components/ProjectDetails/ProjectDetails.test.js b/apps/codeforafrica/src/components/ProjectDetails/ProjectDetails.test.js
index abdc916f8..9965b3be5 100644
--- a/apps/codeforafrica/src/components/ProjectDetails/ProjectDetails.test.js
+++ b/apps/codeforafrica/src/components/ProjectDetails/ProjectDetails.test.js
@@ -9,8 +9,11 @@ import theme from "@/codeforafrica/theme";
 const render = createRender({ theme });
 
 const defaultProps = {
-  description:
-    "This award-winning initiative works to give citizens a new perspective on their lives. Using drone technology, africanDRONE empowers local pilots through a self-help network that offers seed funding, skills development, resource sharing, advocacy, and networking opportunities for members. The goal is to support the evolution of a vibrant and diverse drone ecosystem across Africa.",
+  description: [
+    {
+      text: "This award-winning initiative works to give citizens a new perspective on their lives. Using drone technology, africanDRONE empowers local pilots through a self-help network that offers seed funding, skills development, resource sharing, advocacy, and networking opportunities for members. The goal is to support the evolution of a vibrant and diverse drone ecosystem across Africa.",
+    },
+  ],
   links: [
     {
       slug: "data",
diff --git a/apps/codeforafrica/src/components/ProjectPageHeader/ProjectPageHeader.js b/apps/codeforafrica/src/components/ProjectPageHeader/ProjectPageHeader.js
index 474b227ec..baf6f7498 100644
--- a/apps/codeforafrica/src/components/ProjectPageHeader/ProjectPageHeader.js
+++ b/apps/codeforafrica/src/components/ProjectPageHeader/ProjectPageHeader.js
@@ -15,6 +15,7 @@ import ExternalLinkIcon from "@/codeforafrica/assets/icons/Type=external-link, S
 import Breadcrumbs from "@/codeforafrica/components/Breadcrumbs";
 import ProjectCardMedia from "@/codeforafrica/components/ProjectCardMedia";
 import ProjectTile from "@/codeforafrica/components/ProjectTile";
+import RichText from "@/codeforafrica/components/RichText";
 import TwoToneBackground from "@/codeforafrica/components/TwoToneBackground";
 
 const Background = styled(TwoToneBackground, {
@@ -124,12 +125,11 @@ const ProjectPageHeader = React.forwardRef(
                 >
                   {title}
                 </ProjectTitle>
-                <RichTypography
+                <RichText
                   variant="body2"
                   sx={{ mt: 2.5, typography: { md: "subheading" } }}
-                >
-                  {subtitle}
-                </RichTypography>
+                  elements={subtitle}
+                />
               </CardContent>
               <CardActions sx={{ mt: 2, p: 0 }}>
                 <Button
diff --git a/apps/codeforafrica/src/lib/data/pagify/index.js b/apps/codeforafrica/src/lib/data/pagify/index.js
index 62f8f69dd..681a3eda7 100644
--- a/apps/codeforafrica/src/lib/data/pagify/index.js
+++ b/apps/codeforafrica/src/lib/data/pagify/index.js
@@ -1,13 +1,16 @@
 import partners from "./partners";
+import projects from "./projects";
 
 const COLLECTION_BY_SLUG = {
   partners,
+  work: projects,
 };
 
 async function pagify(parentPage, api, context) {
-  const { slug: collection } = parentPage;
+  const { slug: collection, meta = {} } = parentPage;
   const pageProps = COLLECTION_BY_SLUG[collection];
-  return pageProps?.(api, context) ?? null;
+  const props = (await pageProps?.(api, context)) ?? null;
+  return { ...props, meta };
 }
 
 export default pagify;
diff --git a/apps/codeforafrica/src/lib/data/pagify/projects.js b/apps/codeforafrica/src/lib/data/pagify/projects.js
new file mode 100644
index 000000000..caec0df99
--- /dev/null
+++ b/apps/codeforafrica/src/lib/data/pagify/projects.js
@@ -0,0 +1,42 @@
+import formatDate from "@/codeforafrica/utils/formatDate";
+
+async function projects(api, context) {
+  const { params, locale } = context;
+  const slug = params.slugs[2];
+  const { docs } = await api.getCollection("projects", {
+    locale,
+    where: {
+      slug: {
+        equals: slug,
+      },
+    },
+  });
+  if (!docs?.length) {
+    return null;
+  }
+  const [project] = docs;
+  return {
+    blocks: [
+      {
+        ...project,
+        tag: project.tag?.name,
+        donors: {
+          title: "Donors",
+          list: project.donors,
+        },
+        badges: project.badges.map(({ name, date }) => ({
+          name,
+          date: formatDate(date, {
+            includeTime: false,
+            month: "short",
+          }),
+        })),
+        partners: { list: project.partners, title: "Partners" },
+        externalHref: project.externalHref?.url,
+        blockType: "project",
+      },
+    ],
+  };
+}
+
+export default projects;
diff --git a/apps/codeforafrica/src/pages/[...slugs].page.js b/apps/codeforafrica/src/pages/[...slugs].page.js
index 1400e6e65..b86f875ce 100644
--- a/apps/codeforafrica/src/pages/[...slugs].page.js
+++ b/apps/codeforafrica/src/pages/[...slugs].page.js
@@ -16,6 +16,7 @@ import OurPartners from "@/codeforafrica/components/OurPartners";
 import OurTeam from "@/codeforafrica/components/OurTeam";
 import PageHeader from "@/codeforafrica/components/PageHeader";
 import Partner from "@/codeforafrica/components/Partner";
+import Project from "@/codeforafrica/components/Project";
 import Projects from "@/codeforafrica/components/Projects";
 import { getPageServerSideProps } from "@/codeforafrica/lib/data";
 
@@ -36,6 +37,7 @@ const componentsBySlugs = {
   "our-work": Projects,
   projects: FeaturedProjects,
   partner: Partner,
+  project: Project,
 };
 
 function Index({ blocks, fallback }) {
diff --git a/apps/codeforafrica/src/utils/formatDate.js b/apps/codeforafrica/src/utils/formatDate.js
new file mode 100644
index 000000000..f119f3d84
--- /dev/null
+++ b/apps/codeforafrica/src/utils/formatDate.js
@@ -0,0 +1,23 @@
+const formatDate = (date, options) => {
+  const { locale = "en", includeTime, ...restOptions } = options;
+
+  const formatOptions = {
+    ...(includeTime
+      ? { hour: "numeric", minute: "numeric", second: "2-digit" }
+      : {}),
+    ...restOptions,
+  };
+  try {
+    const formattedDate = new Date(date).toLocaleString(locale, {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+      ...formatOptions,
+    });
+    return formattedDate;
+  } catch (error) {
+    return null;
+  }
+};
+
+export default formatDate;