diff --git a/.gitignore b/.gitignore
index 6706cd8d..1dda4a95 100644
--- a/.gitignore
+++ b/.gitignore
@@ -134,4 +134,5 @@ dist/
 ############################
 # overige-objecten-api
 ############################
-apps/overige-objecten-api/src/types
\ No newline at end of file
+apps/overige-objecten-api/src/types
+output-html
diff --git a/apps/overige-objecten-api/package.json b/apps/overige-objecten-api/package.json
index 2084ce2c..df9f7e59 100644
--- a/apps/overige-objecten-api/package.json
+++ b/apps/overige-objecten-api/package.json
@@ -27,7 +27,11 @@
     "js-yaml": "4.1.0",
     "swagger-ui-express": "5.0.1",
     "lodash.merge": "4.6.2",
-    "lodash.snakecase": "4.1.1"
+    "lodash.snakecase": "4.1.1",
+    "react": "18.2.0",
+    "@utrecht/web-component-library-react": "3.0.0",
+    "@utrecht/component-library-react": "7.3.5",
+    "@frameless/ui": "0.1.0"
   },
   "devDependencies": {
     "@types/cors": "2.8.17",
diff --git a/apps/overige-objecten-api/src/components/AccordionSection.tsx b/apps/overige-objecten-api/src/components/AccordionSection.tsx
new file mode 100644
index 00000000..448e8b2d
--- /dev/null
+++ b/apps/overige-objecten-api/src/components/AccordionSection.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Markdown } from './Markdown';
+
+export interface AccordionSectionProps {
+  label: string;
+  body: string;
+  headingLevel: number;
+}
+export const AccordionSection = ({ body, headingLevel = 2, label }: AccordionSectionProps) => {
+  const CustomHeading = `h${headingLevel}` as keyof React.JSX.IntrinsicElements;
+  return (
+    <div>
+      <CustomHeading>{label}</CustomHeading>
+      <Markdown>{body}</Markdown>
+    </div>
+  );
+};
diff --git a/apps/overige-objecten-api/src/components/Markdown.tsx b/apps/overige-objecten-api/src/components/Markdown.tsx
new file mode 100644
index 00000000..69f917e6
--- /dev/null
+++ b/apps/overige-objecten-api/src/components/Markdown.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+import xss from 'xss';
+
+export const Markdown = ({ children }: { children: string }) =>
+  children ? <div dangerouslySetInnerHTML={{ __html: xss(children) }} /> : null;
diff --git a/apps/overige-objecten-api/src/queries/index.ts b/apps/overige-objecten-api/src/queries/index.ts
index 29035b50..2d6ee81d 100644
--- a/apps/overige-objecten-api/src/queries/index.ts
+++ b/apps/overige-objecten-api/src/queries/index.ts
@@ -40,28 +40,127 @@ query getAllProducts(
           description
         }
         sections {
+          ... on ComponentComponentsInternalBlockContent {
+                component: __typename
+                internal_field {
+                  data {
+                    attributes {
+                      content {
+                        uuid
+                        contentBlock {
+                          content
+                          kennisartikelCategorie
+                        }
+                      }
+                    }
+                  }
+                }
+              }
           ... on ComponentComponentsUtrechtRichText {
             id
             content
             kennisartikelCategorie
             component: __typename
           }
-          ... on ComponentComponentsInternalBlockContent {
+          ... on ComponentComponentsUtrechtImage {
             component: __typename
-            internal_field {
+            categorie2:kennisartikelCategorie
+            imageData {
               data {
                 attributes {
-                  content {
-                    uuid
-                    contentBlock {
-                      content
-                      kennisartikelCategorie
-                    }
+                  name
+                  alternativeText
+                  caption
+                  width
+                  height
+                  formats
+                  url
+                }
+              }
+            }
+          }
+          ... on ComponentComponentsUtrechtLogoButton {
+            component: __typename
+            categorie3:kennisartikelCategorie
+            appearance
+            href
+            label
+            logo
+            openFormsEmbed
+            textContent
+          }
+          ... on ComponentComponentsUtrechtSpotlight {
+            component: __typename
+            categorie4:kennisartikelCategorie
+            content
+            type
+            logoButton {
+              id
+              label
+              href
+              textContent
+              logo
+              appearance
+              __typename
+            }
+          }
+          ... on ComponentComponentsUtrechtRichText {
+            component: __typename
+            categorie5:kennisartikelCategorie
+            content
+          }
+          ... on ComponentComponentsUtrechtMultiColumnsButton {
+            component: __typename
+            categorie6:kennisartikelCategorie
+            column {
+              id
+              title
+              logoButton {
+                component: __typename
+                appearance
+                href
+                label
+                logo
+                openFormsEmbed
+                textContent
+              }
+            }
+          }
+          ... on ComponentComponentsUtrechtLink {
+            component: __typename
+            categorie7:kennisartikelCategorie
+            href
+            textContent
+            icon
+            language
+          }
+          ... on ComponentComponentsFaq {
+            component: __typename
+            categorie8:kennisartikelCategorie
+            pdc_faq {
+              data {
+                attributes {
+                  title
+                  faq(pagination: { start: 0, limit: -1 }) {
+                    body
+                    headingLevel
+                    id
+                    label
                   }
                 }
               }
             }
           }
+          ... on ComponentComponentsUtrechtAccordion {
+            component: __typename
+            categorie9:kennisartikelCategorie
+            item(pagination: { start: 0, limit: -1 }) {
+              body
+              headingLevel
+              id
+              label
+            }
+          }
         }
         kennisartikelMetadata {
           uuid
@@ -83,7 +182,6 @@ query getAllProducts(
     }
   }
 }
-
 `);
 
 export const GET_PRODUCT_BY_UUID = gql(`
@@ -108,12 +206,6 @@ export const GET_PRODUCT_BY_UUID = gql(`
               description
             }
             sections {
-              ... on ComponentComponentsUtrechtRichText {
-                id
-                content
-                kennisartikelCategorie
-                component:__typename
-              }
               ... on ComponentComponentsInternalBlockContent {
                 component: __typename
                 internal_field {
@@ -130,6 +222,111 @@ export const GET_PRODUCT_BY_UUID = gql(`
                   }
                 }
               }
+          ... on ComponentComponentsUtrechtRichText {
+            id
+            content
+            kennisartikelCategorie
+            component: __typename
+          }
+          ... on ComponentComponentsUtrechtImage {
+            component: __typename
+            categorie2:kennisartikelCategorie
+            imageData {
+              data {
+                attributes {
+                  name
+                  alternativeText
+                  caption
+                  width
+                  height
+                  formats
+                  url
+                }
+              }
+            }
+          }
+          ... on ComponentComponentsUtrechtLogoButton {
+            component: __typename
+            categorie3:kennisartikelCategorie
+            appearance
+            href
+            label
+            logo
+            openFormsEmbed
+            textContent
+          }
+          ... on ComponentComponentsUtrechtSpotlight {
+            component: __typename
+            categorie4:kennisartikelCategorie
+            content
+            type
+            logoButton {
+              id
+              label
+              href
+              textContent
+              logo
+              appearance
+              __typename
+            }
+          }
+          ... on ComponentComponentsUtrechtRichText {
+            component: __typename
+            categorie5:kennisartikelCategorie
+            content
+          }
+          ... on ComponentComponentsUtrechtMultiColumnsButton {
+            component: __typename
+            categorie6:kennisartikelCategorie
+            column {
+              id
+              title
+              logoButton {
+                component: __typename
+                appearance
+                href
+                label
+                logo
+                openFormsEmbed
+                textContent
+              }
+            }
+          }
+          ... on ComponentComponentsUtrechtLink {
+            component: __typename
+            categorie7:kennisartikelCategorie
+            href
+            textContent
+            icon
+            language
+          }
+          ... on ComponentComponentsFaq {
+            component: __typename
+            categorie8:kennisartikelCategorie
+            pdc_faq {
+              data {
+                attributes {
+                  title
+                  faq(pagination: { start: 0, limit: -1 }) {
+                    body
+                    headingLevel
+                    id
+                    label
+                  }
+                }
+              }
+            }
+          }
+          ... on ComponentComponentsUtrechtAccordion {
+            component: __typename
+            categorie9:kennisartikelCategorie
+            item(pagination: { start: 0, limit: -1 }) {
+              body
+              headingLevel
+              id
+              label
+            }
+          }
             }
             kennisartikelMetadata {
                 uuid
diff --git a/apps/overige-objecten-api/src/utils/convertLogoButtonToHTML.tsx b/apps/overige-objecten-api/src/utils/convertLogoButtonToHTML.tsx
new file mode 100644
index 00000000..4f2042f1
--- /dev/null
+++ b/apps/overige-objecten-api/src/utils/convertLogoButtonToHTML.tsx
@@ -0,0 +1,115 @@
+import { ButtonLink, Heading } from '@utrecht/component-library-react';
+import { UtrechtDigidLogo, UtrechtEherkenningLogo, UtrechtEidasLogo } from '@utrecht/web-component-library-react';
+import kebabCase from 'lodash.kebabcase';
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+
+interface IconProps {
+  logo?: string;
+}
+
+export const Icon = ({ logo }: IconProps) => {
+  switch (logo) {
+    case 'eidas':
+      return <UtrechtEidasLogo />;
+    case 'digid':
+      return <UtrechtDigidLogo />;
+    case 'eherkenning':
+      return <UtrechtEherkenningLogo />;
+    default:
+      return null;
+  }
+};
+export type LogoButtonItemType = {
+  logo?: string;
+  href?: string;
+  appearance?: string;
+  label?: string;
+  openFormsEmbed?: string | null;
+  textContent?: string | null;
+};
+export interface LogoButtonProps {
+  item: LogoButtonItemType;
+  headingLevel?: number;
+  withDesignSystem?: boolean;
+}
+export interface BasicLogoButtonProps {
+  item: LogoButtonItemType;
+  headingLevel?: number;
+}
+export const BasicLogoButton = ({ item, headingLevel }: BasicLogoButtonProps) => {
+  const HeadingComponent = `h${headingLevel || 3}` as keyof React.JSX.IntrinsicElements;
+  const mappingIcon = {
+    eidas: 'eIDAS',
+    digid: 'DigiD',
+    eherkenning: 'eHerkenning',
+    without_logo: null,
+  };
+  return (
+    <div>
+      {item?.label && <HeadingComponent>{item.label}</HeadingComponent>}
+      <div>
+        {item?.logo && <span>{mappingIcon[item?.logo as keyof typeof mappingIcon]}</span>}{' '}
+        {item?.href && item?.textContent && <a href={item.href}>{item.textContent}</a>}
+      </div>
+    </div>
+  );
+};
+export const LogoButton = ({ item, headingLevel, withDesignSystem = false }: LogoButtonProps) => {
+  const getOpenFormsEmbed = (openFormsEmbed: any) => {
+    if (!openFormsEmbed) return null;
+    const parsOpenFormsEmbedData = new URLSearchParams(openFormsEmbed);
+    const slug = parsOpenFormsEmbedData.get('slug');
+    const label = parsOpenFormsEmbedData.get('label');
+    const pdcFrontendURL = 'http://localhost:3000'; //TODO use env variable or update strapi-plugin-open-forms-embed package to send the frontend URL
+    return {
+      href: `${pdcFrontendURL}/form/${slug}`,
+      textContent: label,
+    };
+  };
+  const openFormsEmbed = getOpenFormsEmbed(item?.openFormsEmbed);
+  if (withDesignSystem) {
+    if (openFormsEmbed) {
+      return (
+        <div>
+          <Heading level={headingLevel || 3}>{item?.label}</Heading>
+          <div className="utrecht-logo-button">
+            <Icon logo={item?.logo} />
+            <ButtonLink href={openFormsEmbed.href} appearance={kebabCase(item?.appearance)}>
+              {item?.textContent || openFormsEmbed.textContent}
+            </ButtonLink>
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div>
+        <Heading level={headingLevel || 3}>{item?.label}</Heading>
+        <div className="utrecht-logo-button">
+          <Icon logo={item?.logo} />
+          <ButtonLink href={item?.href} appearance={kebabCase(item?.appearance)}>
+            {item?.textContent}
+          </ButtonLink>
+        </div>
+      </div>
+    );
+  }
+  if (openFormsEmbed) {
+    return (
+      <BasicLogoButton
+        item={{
+          ...item,
+          href: openFormsEmbed.href,
+          textContent: item?.textContent || openFormsEmbed.textContent,
+        }}
+        headingLevel={headingLevel}
+      />
+    );
+  }
+  return <BasicLogoButton item={item} headingLevel={headingLevel} />;
+};
+
+export const convertLogoButtonToHTML = (item: any) => {
+  return renderToString(<LogoButton item={item} />);
+};
diff --git a/apps/overige-objecten-api/src/utils/convertMultiColumnsButtonToHTML.tsx b/apps/overige-objecten-api/src/utils/convertMultiColumnsButtonToHTML.tsx
new file mode 100644
index 00000000..ddadb96c
--- /dev/null
+++ b/apps/overige-objecten-api/src/utils/convertMultiColumnsButtonToHTML.tsx
@@ -0,0 +1,40 @@
+import { Heading } from '@utrecht/component-library-react';
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import type { LogoButtonItemType } from './convertLogoButtonToHTML';
+import { BasicLogoButton, LogoButton } from './convertLogoButtonToHTML';
+
+type MultiColumnsButtonType = {
+  title: string;
+  logoButton: LogoButtonItemType[];
+};
+interface MultiColumnsButtonProps {
+  item: MultiColumnsButtonType;
+  withDesignSystem?: boolean;
+}
+
+const MultiColumnsButton = ({ item, withDesignSystem }: MultiColumnsButtonProps) => {
+  if (withDesignSystem) {
+    return (
+      <div style={{ display: 'inline-grid' }}>
+        <Heading level={3}>{item.title}</Heading>
+        {item.logoButton.map((btn: LogoButtonItemType, index: number) => (
+          <LogoButton item={btn} headingLevel={4} key={index} />
+        ))}
+      </div>
+    );
+  }
+  return (
+    <div style={{ display: 'inline-grid' }}>
+      <h3>{item.title}</h3>
+      {item.logoButton.map((btn: LogoButtonItemType, index: number) => (
+        <BasicLogoButton item={btn} headingLevel={4} key={index} />
+      ))}
+    </div>
+  );
+};
+
+export const convertMultiColumnsButtonToHTML = (item: any, withDesignSystem?: boolean) =>
+  item.column.map((col: any) =>
+    renderToString(<MultiColumnsButton item={col} withDesignSystem={withDesignSystem} key={col.title} />),
+  );
diff --git a/apps/overige-objecten-api/src/utils/convertSpotlightToHTML.tsx b/apps/overige-objecten-api/src/utils/convertSpotlightToHTML.tsx
new file mode 100644
index 00000000..10debde7
--- /dev/null
+++ b/apps/overige-objecten-api/src/utils/convertSpotlightToHTML.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import { BasicLogoButton } from './convertLogoButtonToHTML';
+import { Markdown } from '../components/Markdown';
+export const convertSpotlightToHTML = (item: any) => {
+  return renderToString(
+    <section>
+      <Markdown>{item?.content}</Markdown>
+      {item.logoButton && item.logoButton.map((btn: any, index: number) => <BasicLogoButton item={btn} key={index} />)}
+    </section>,
+  );
+};
diff --git a/apps/overige-objecten-api/src/utils/createHTMLFiles.tsx b/apps/overige-objecten-api/src/utils/createHTMLFiles.tsx
new file mode 100644
index 00000000..e9514f07
--- /dev/null
+++ b/apps/overige-objecten-api/src/utils/createHTMLFiles.tsx
@@ -0,0 +1,140 @@
+import { Document, Heading, Page, PageContent, Separator } from '@utrecht/component-library-react';
+import fs from 'node:fs';
+import path from 'node:path';
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import { Markdown } from '../components/Markdown';
+
+const categoryStyle = { border: '1px solid #ccc', padding: '10px', marginBottom: '10px' };
+const Category = ({ data }: { data: any }) => {
+  return (
+    <>
+      {data?.tekst && (
+        <div style={categoryStyle}>
+          <Heading level={2}>Categorie - Tekst</Heading>
+          <Separator />
+          <Markdown>{data?.tekst}</Markdown>
+        </div>
+      )}
+      {data?.procedureBeschrijving && (
+        <div style={categoryStyle}>
+          <Heading level={2}>Categorie - Procedure Beschrijving</Heading>
+          <Separator />
+          <Markdown>{data?.procedureBeschrijving}</Markdown>
+        </div>
+      )}
+      {data?.bewijs && (
+        <div style={categoryStyle}>
+          <Heading level={2}>Categorie - Bewijs</Heading>
+          <Separator />
+          <Markdown>{data?.bewijs}</Markdown>
+        </div>
+      )}
+      {data?.uitvoeringsinstructies && (
+        <div style={categoryStyle}>
+          <Heading level={2}>Categorie - Uitvoeringsinstructies</Heading>
+          <Separator />
+          <Markdown>{data?.uitvoeringsinstructies}</Markdown>
+        </div>
+      )}
+      {data?.bezwaarEnBeroep && (
+        <div style={categoryStyle}>
+          <Heading level={2}>Categorie - Bezwaar</Heading>
+          <Separator />
+          <Markdown>{data?.bezwaarEnBeroep}</Markdown>
+        </div>
+      )}
+      {data?.vereisten && (
+        <div style={categoryStyle}>
+          <Heading level={2}>Categorie - Vereisten</Heading>
+          <Separator />
+          <Markdown>{data?.vereisten}</Markdown>
+        </div>
+      )}
+      {data?.kostenEnBetaalmethoden && (
+        <div style={categoryStyle}>
+          <Heading level={2}>Categorie - Kosten en betaalmethoden</Heading>
+          <Separator />
+          <Markdown>{data?.kostenEnBetaalmethoden}</Markdown>
+        </div>
+      )}
+      {data?.contact && (
+        <div style={categoryStyle}>
+          <Heading level={2}>Categorie - Contact</Heading>
+          <Separator />
+          <Markdown>{data?.contact}</Markdown>
+        </div>
+      )}
+      {data?.wtdBijGeenReactie && (
+        <div style={categoryStyle}>
+          <Heading level={2}>Categorie - WTD Bij Geen Reactie</Heading>
+          <Separator />
+          <Markdown>{data?.wtdBijGeenReactie}</Markdown>
+        </div>
+      )}
+      {data?.notice && (
+        <div style={categoryStyle}>
+          <Heading level={2}>Categorie - Notice</Heading>
+          <Separator />
+          <Markdown>{data?.notice}</Markdown>
+        </div>
+      )}
+      {data?.deskMemo && (
+        <div style={categoryStyle}>
+          <Heading level={2}>Categorie - Desk Memo (Interne velden)</Heading>
+          <Separator />
+          <Markdown>{data?.deskMemo}</Markdown>
+        </div>
+      )}
+    </>
+  );
+};
+
+const PageComponent = ({ data }: { data: any }) => (
+  <html lang="nl">
+    <head>
+      <meta charSet="utf-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
+      <link rel="stylesheet" href="https://unpkg.com/@utrecht/component-library-css@1.0.2-alpha.0/dist/index.css" />
+      <link rel="stylesheet" href="https://unpkg.com/@utrecht/component-library-css@1.0.2-alpha.0/dist/html.css" />
+      <link rel="stylesheet" href="https://unpkg.com/@utrecht/design-tokens@1.0.0-alpha.601/dist/index.css" />
+      <script
+        src="https://unpkg.com/@utrecht/web-component-library-stencil/dist/utrecht/utrecht.esm.js"
+        type="module"
+      ></script>
+      <style>
+        {`
+        :root {
+          --utrecht-space-around: 1;
+          }
+          img {
+            max-width: 100%;
+            block-size: auto;
+          }
+        `}
+      </style>
+      <title>Kennisartikelen Categories</title>
+    </head>
+    <body>
+      <Document className="utrecht-theme">
+        <Page>
+          <PageContent>
+            <Heading level={1}>Kennisartikelen Categories</Heading>
+            <Separator />
+            <Category data={data} />
+          </PageContent>
+        </Page>
+      </Document>
+    </body>
+  </html>
+);
+
+export const createHTMLFiles = (data: any) => {
+  const outputDir = './output-html';
+
+  if (!fs.existsSync(outputDir)) {
+    fs.mkdirSync(outputDir, { recursive: true });
+  }
+  const filePath = path.join(outputDir, `preview.html`);
+  fs.writeFileSync(filePath, renderToString(<PageComponent data={data} />), 'utf8');
+};
diff --git a/apps/overige-objecten-api/src/utils/generateKennisartikelObject.ts b/apps/overige-objecten-api/src/utils/generateKennisartikelObject.ts
index 57b8abc8..5ebd5396 100644
--- a/apps/overige-objecten-api/src/utils/generateKennisartikelObject.ts
+++ b/apps/overige-objecten-api/src/utils/generateKennisartikelObject.ts
@@ -1,9 +1,7 @@
-import { combineSimilarCategories } from './combineSimilarCategories';
-import { mapContentByCategory } from './mapContentByCategory';
+import { combineSimilarCategories, createHTMLFiles, normalizeCategories, processData } from './index';
 import { processToDeskMemo } from './processToDeskMemo';
 import { Attributes } from '../strapi-product-type';
 import { components } from '../types/openapi';
-
 interface GenerateKennisartikelObjectTypes {
   attributes: Attributes;
   url: string;
@@ -15,19 +13,16 @@ export const generateKennisartikelObject = ({ attributes, url, id }: GenerateKen
   const trefwoorden = metaTags?.keymatch?.split(', ').map((trefwoord: string) => ({ trefwoord })) || [];
   const kennisartikelMetadata = attributes.kennisartikelMetadata;
   const publicatieDatum = new Date(attributes.createdAt).toISOString().split('T')[0];
-  const contentBlock = attributes?.sections
-    .filter(({ component }) => component === 'ComponentComponentsUtrechtRichText')
-    .map(({ kennisartikelCategorie, content }) => mapContentByCategory(kennisartikelCategorie, content));
   const getInternalBlockComponent = attributes?.sections.find(
     ({ component }) => component === 'ComponentComponentsInternalBlockContent',
   );
 
   const deskMemoInternalBlock = getInternalBlockComponent?.internal_field?.data?.attributes?.content?.contentBlock;
   const { deskMemo } = deskMemoInternalBlock ? processToDeskMemo(deskMemoInternalBlock) : { deskMemo: '' };
+  const sections = combineSimilarCategories(processData(normalizeCategories(attributes?.sections)));
 
-  // combine similar categories
-  const reducedContentBlock = combineSimilarCategories(contentBlock);
-  const bothContentBlock = { ...reducedContentBlock, deskMemo };
+  const bothContentBlock = { ...sections, deskMemo };
+  createHTMLFiles(bothContentBlock);
   const vertalingen = [
     {
       ...bothContentBlock,
diff --git a/apps/overige-objecten-api/src/utils/index.ts b/apps/overige-objecten-api/src/utils/index.ts
index f0d2d2d4..0dfb8ace 100644
--- a/apps/overige-objecten-api/src/utils/index.ts
+++ b/apps/overige-objecten-api/src/utils/index.ts
@@ -7,8 +7,14 @@ export { getCurrentTypeParam } from './getCurrentTypeParam';
 export { getPaginatedResponse } from './getPaginatedResponse';
 export { getTheServerURL } from './getTheServerURL';
 export { mapContentByCategory } from './mapContentByCategory';
+export { normalizeCategories } from './normalizeCategories';
 export { processToDeskMemo } from './processToDeskMemo';
 export { readFile } from './readFile';
 export type { CombineSimilarCategoriesProps } from './combineSimilarCategories';
 export type { PaginationType } from './getPaginatedResponse';
 export type { ProcessToDeskMemoData } from './processToDeskMemo';
+export { convertLogoButtonToHTML } from './convertLogoButtonToHTML';
+export { processData } from './processData';
+export { convertSpotlightToHTML } from './convertSpotlightToHTML';
+export { convertMultiColumnsButtonToHTML } from './convertMultiColumnsButtonToHTML';
+export { createHTMLFiles } from './createHTMLFiles';
diff --git a/apps/overige-objecten-api/src/utils/normalizeCategories.ts b/apps/overige-objecten-api/src/utils/normalizeCategories.ts
new file mode 100644
index 00000000..3587e496
--- /dev/null
+++ b/apps/overige-objecten-api/src/utils/normalizeCategories.ts
@@ -0,0 +1,13 @@
+export const normalizeCategories = (data: any) => {
+  return data.map((item: any) => {
+    // Find the key that starts with 'categorie'
+    const categorieKey = Object.keys(item).find((key) => key.startsWith('categorie'));
+    if (categorieKey) {
+      const { [categorieKey]: categorieValue, ...rest } = item;
+      return { ...rest, categorie: categorieValue };
+    }
+
+    // Return the item unchanged if no 'categorieX' field is found
+    return item;
+  });
+};
diff --git a/apps/overige-objecten-api/src/utils/processData.tsx b/apps/overige-objecten-api/src/utils/processData.tsx
new file mode 100644
index 00000000..35fdd1fd
--- /dev/null
+++ b/apps/overige-objecten-api/src/utils/processData.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import {
+  convertLogoButtonToHTML,
+  convertMultiColumnsButtonToHTML,
+  convertSpotlightToHTML,
+  mapContentByCategory,
+} from './index';
+import { AccordionSection, type AccordionSectionProps } from '../components/AccordionSection';
+import { Markdown } from '../components/Markdown';
+
+export const processData = (data: any) =>
+  data.map((item: any) => {
+    if (item.component === 'ComponentComponentsUtrechtRichText') {
+      return mapContentByCategory(item.categorie, renderToString(<Markdown>{item?.content}</Markdown>));
+    }
+    if (item.component === 'ComponentComponentsUtrechtLogoButton') {
+      const mappedContent = mapContentByCategory(item.categorie, convertLogoButtonToHTML(item));
+      return mappedContent;
+    }
+    if (item.component === 'ComponentComponentsUtrechtSpotlight') {
+      const mappedContent = mapContentByCategory(item.categorie, convertSpotlightToHTML(item));
+      return mappedContent;
+    }
+    if (item.component === 'ComponentComponentsUtrechtMultiColumnsButton') {
+      const mappedContent = mapContentByCategory(item.categorie, convertMultiColumnsButtonToHTML(item));
+      return mappedContent;
+    }
+    if (item.component === 'ComponentComponentsUtrechtImage') {
+      const imageUrl = item.imageData.data.attributes.url;
+
+      if (!imageUrl) return {};
+      if (!item.categorie) return {};
+
+      const mappedContent = mapContentByCategory(
+        item.categorie,
+        renderToString(
+          <img
+            src={`${new URL(imageUrl, process.env.STRAPI_PRIVATE_URL)}`}
+            alt={item?.imageData?.data?.attributes?.alternativeText ?? item?.imageData?.data?.attributes?.name}
+          />,
+        ),
+      );
+      return mappedContent;
+    }
+    if (item.component === 'ComponentComponentsFaq') {
+      const FAQs = item?.pdc_faq?.data?.attributes?.faq.map((faq: AccordionSectionProps, index: number) => (
+        <AccordionSection key={index} label={faq.label} body={faq.body} headingLevel={3} />
+      ));
+      const mappedContent = mapContentByCategory(item.categorie, renderToString(FAQs));
+      return mappedContent;
+    }
+    if (item.component === 'ComponentComponentsUtrechtLink') {
+      if (!item.categorie) return {};
+      const mappedContent = mapContentByCategory(
+        item.categorie,
+        renderToString(<a href={item.href}>{item.textContent}</a>),
+      );
+      return mappedContent;
+    }
+    if (item.component === 'ComponentComponentsUtrechtAccordion') {
+      if (!item.categorie) return {};
+
+      const mappedContent = mapContentByCategory(
+        item.categorie,
+        renderToString(
+          Array.isArray(item.item) &&
+            item.item.map((accordionItem: AccordionSectionProps) => (
+              <AccordionSection
+                key={accordionItem.label}
+                label={accordionItem.label}
+                body={accordionItem.body}
+                headingLevel={accordionItem.headingLevel}
+              />
+            )),
+        ),
+      );
+      if (Object.keys(mappedContent).length > 0) {
+        return mappedContent;
+      }
+    }
+    return {};
+  });
diff --git a/apps/overige-objecten-api/tsconfig.json b/apps/overige-objecten-api/tsconfig.json
index 88a636e4..86357fba 100644
--- a/apps/overige-objecten-api/tsconfig.json
+++ b/apps/overige-objecten-api/tsconfig.json
@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "jsx": "react",
     "moduleResolution": "node",
     "noUnusedLocals": true,
     "noUnusedParameters": true,
diff --git a/yarn.lock b/yarn.lock
index 9c7678f0..2bed3a4f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8149,6 +8149,43 @@
   resolved "https://registry.yarnpkg.com/@utrecht/backdrop-css/-/backdrop-css-1.1.0.tgz#08f8f9efbfdf87866216c03f17a74ac56d0a9bba"
   integrity sha512-oTGdo7OdFH4FJRqcwJp1DpxZQAR5LQWITYe1IJ7X+px9Wuu+9zSabYGn2dfIZgWaPYUAvAboiUtMpn21Z9yE3g==
 
+"@utrecht/button-react@2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@utrecht/button-react/-/button-react-2.0.2.tgz#7bc99dcbd45ff944c2ee8de0531e5ad500953f87"
+  integrity sha512-Nt8hSZApoACqUtu/nTRCjELWAi9KQ7n1Vffs5sXyA0Xjw9r99xRkrIQsFyDxJV2y14Kisp89fkDNY8MwAtJYDA==
+  dependencies:
+    clsx "2.1.1"
+
+"@utrecht/calendar-css@1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@utrecht/calendar-css/-/calendar-css-1.3.0.tgz#6d462e436c5f700381d1d5c659aa9784552ad082"
+  integrity sha512-4w1CLoKhw6PVDg8NHvgYBvzQMFsqPizQzcmQF17x3AACURdsrlc/99De2ou5JXs2KZM4xLtaiWKTLtE06iz9aA==
+
+"@utrecht/calendar-react@1.0.5":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@utrecht/calendar-react/-/calendar-react-1.0.5.tgz#635be175f0e5ef514019a4537a3d43fa44caffc8"
+  integrity sha512-HlfT6cEE0T8gGu3bpWJRvTNwY9rGNHnJC9nCA6reCn9Nn6uC0A2c6rdy5BAH4I6CdZM71rVpCOP1VC7fPBSSGg==
+  dependencies:
+    "@utrecht/button-react" "2.0.2"
+    "@utrecht/calendar-css" "1.3.0"
+    clsx "2.1.1"
+    date-fns "2.30.0"
+    lodash-es "4.17.21"
+
+"@utrecht/checkbox-react@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@utrecht/checkbox-react/-/checkbox-react-1.0.2.tgz#19adb0e5ddf6f2cd061ebe8243d2936f347b118e"
+  integrity sha512-WYqGXgBJ2W/4xGzKlLVjyToM7N2aCzWIdcAftnfp3pGg3mJ0L2i2TmVMJQKDh2RwLq5lsftk3OxPhH3IxOMWJA==
+  dependencies:
+    clsx "2.1.1"
+
+"@utrecht/combobox-react@0.0.3":
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/@utrecht/combobox-react/-/combobox-react-0.0.3.tgz#3e07f44ebe72cb785b2cab4877dc723d41d41a8b"
+  integrity sha512-l543Y0iaw68ZT0SuETjvzGp37pLtw72sfzh/QzkNGyr9kk9twUmo+gYEp1QedAsOGaK9ETjcAoeKL2lgreiUKQ==
+  dependencies:
+    clsx "2.1.1"
+
 "@utrecht/component-library-css@4.2.0":
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/@utrecht/component-library-css/-/component-library-css-4.2.0.tgz#16475b4af03daf238a4fac58b8b2a4b320286657"
@@ -8162,31 +8199,128 @@
     clsx "2.1.1"
     lodash.chunk "4.2.0"
 
+"@utrecht/component-library-react@7.3.5":
+  version "7.3.5"
+  resolved "https://registry.yarnpkg.com/@utrecht/component-library-react/-/component-library-react-7.3.5.tgz#19c3fbbb81775b4424fdd4ab16c9e57b1aa5731b"
+  integrity sha512-ZVkwZ9HsF9VMDq5qUh2tLp9o2zIbrf/rY1oSBDAfltkBc+qNURBanLmwxVU77qebpM9hUP8UqERMHYOQMvW2gQ==
+  dependencies:
+    "@utrecht/button-react" "2.0.2"
+    "@utrecht/calendar-react" "1.0.5"
+    "@utrecht/checkbox-react" "1.0.2"
+    "@utrecht/combobox-react" "0.0.3"
+    "@utrecht/fieldset-react" "1.0.2"
+    "@utrecht/form-field-checkbox-react" "1.0.4"
+    "@utrecht/form-field-description-react" "1.0.2"
+    "@utrecht/form-field-error-message-react" "1.0.2"
+    "@utrecht/form-field-react" "1.0.2"
+    "@utrecht/form-label-react" "1.0.2"
+    "@utrecht/link-react" "1.0.2"
+    "@utrecht/listbox-react" "1.0.3"
+    "@utrecht/radio-button-react" "1.0.2"
+    "@utrecht/textbox-react" "1.0.2"
+    clsx "2.1.1"
+    lodash.chunk "4.2.0"
+
 "@utrecht/design-tokens@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@utrecht/design-tokens/-/design-tokens-1.1.0.tgz#0377dbfac70564fc8fc33f9ad53323351f83004e"
   integrity sha512-1P9aVSL5xlBx2sFEzm1v+obgAPvwiLj4dg0vAZnFxLF6ZLbPPu0kP+tQhW3Gj945DU3qkwL/tIuimObYulYVAg==
 
+"@utrecht/fieldset-react@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@utrecht/fieldset-react/-/fieldset-react-1.0.2.tgz#b126b7bc0c77c6037dc7e06812002096efbd600f"
+  integrity sha512-I44EK9yrsGNfKvfijIWxymxXGt+iBw8J0t3aZISF6oqnDOIPOgU25bDiTVxgnuXc0QRz1fpyLiy11Zl0PHL2pQ==
+  dependencies:
+    clsx "2.1.1"
+
 "@utrecht/focus-ring-css@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@utrecht/focus-ring-css/-/focus-ring-css-1.1.0.tgz#3a3b426b81d9aefc792288287e7ffc6981ab1ed6"
   integrity sha512-MDxrC7b1AZ+S0+oqfMA/QD05GDhBTnc7q5VR3a+39jwJkgXtG7gJSQ7Pr8kdK8/Brx94SayIAEP5vAjuBee6bQ==
 
+"@utrecht/form-field-checkbox-react@1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@utrecht/form-field-checkbox-react/-/form-field-checkbox-react-1.0.4.tgz#879efaf6c68c281de8b042c65383133df7d5c367"
+  integrity sha512-rsVs0wQd9q/Es8LTiJKbuRlIGigjTix5QCqJ8PdIexOJ7AgyAl2O0Z57EuDsUVQm5rvz/F8LvD0eRRakAkFeeA==
+  dependencies:
+    "@utrecht/checkbox-react" "1.0.2"
+    "@utrecht/form-field-description-react" "1.0.2"
+    "@utrecht/form-field-error-message-react" "1.0.2"
+    "@utrecht/form-field-react" "1.0.2"
+    "@utrecht/form-label-react" "1.0.2"
+    clsx "2.1.1"
+
+"@utrecht/form-field-description-react@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@utrecht/form-field-description-react/-/form-field-description-react-1.0.2.tgz#c7b133b1d0d49860a571e537fdee7cd2593d7809"
+  integrity sha512-trki74s07AAMp59SO/VpR4RguvepaMGZ89xp54mbzYeJMqEspCCyEzKJSL/UdM0Kv8IVc3YpDv8grDV4hpT4Kw==
+  dependencies:
+    clsx "2.1.1"
+
+"@utrecht/form-field-error-message-react@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@utrecht/form-field-error-message-react/-/form-field-error-message-react-1.0.2.tgz#27db05351c210f0e91423ab56a8098be85421aa6"
+  integrity sha512-SwJWACl09GHbXVK7LhliHeU8steEqMED8rb2GTppJz8N4SN0J97Z43rPaVxdfpX4vxslb60M3+b33GO5UQ8Uuw==
+  dependencies:
+    clsx "2.1.1"
+
+"@utrecht/form-field-react@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@utrecht/form-field-react/-/form-field-react-1.0.2.tgz#3d6f312bf56580046a856f10ca360dda0953768a"
+  integrity sha512-8R8cjpX6pGgUwjEeQVQrqt+Rrdfir4QcNKY4QuPvixJo9Xk78RQYITt0HwrGHNSI2JbuyUIVnwCTZmwkfm+bLA==
+  dependencies:
+    clsx "2.1.1"
+
 "@utrecht/form-label-css@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@utrecht/form-label-css/-/form-label-css-1.1.0.tgz#aa611c084fff3157b345e4b5c0ac3756d59b1163"
   integrity sha512-6DeD2tLgSm8PiflP4jCk5D70H4RptEP6aJnHmXJCc0mbhHz0obONkrcl9pf4urRLQ+DuYa8x9fiHQHvjNCTeRg==
 
+"@utrecht/form-label-react@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@utrecht/form-label-react/-/form-label-react-1.0.2.tgz#9620218979dce23f04b9513cde27202d11108502"
+  integrity sha512-7VgtnaVSQqImpehEvubxyq/7JO+AdBM6DWWmRv8qjm1WxqSs8ZCUDJkwH7OrFY405DVWJB2Yi4PZwD/jUT/nIQ==
+  dependencies:
+    clsx "2.1.1"
+
+"@utrecht/link-react@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@utrecht/link-react/-/link-react-1.0.2.tgz#244e00418e7114a325bdcc338cd3b2619580df84"
+  integrity sha512-eOckJ+pTOc8qHTP6zvgiNufTO7p7SjxDUT5ncoXAvxGlmDY0znqyfq8sXuTWGm4rpuq4k7vbLKozVmq+jxue0g==
+  dependencies:
+    clsx "2.1.1"
+
+"@utrecht/listbox-react@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@utrecht/listbox-react/-/listbox-react-1.0.3.tgz#9b9e636a7e87c5a4bf884627ce83aaf230f6b2e2"
+  integrity sha512-Pjp4jCJTrPOj9GpmIvf2EKYSZDJD4OFxC73GXfxEwQpyFLYC+x8Q2mKuth044jFhNZm1+G0lEAeUH9fZ3u+kPg==
+  dependencies:
+    clsx "2.1.1"
+
 "@utrecht/multiline-data-css@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@utrecht/multiline-data-css/-/multiline-data-css-1.1.0.tgz#1cebc601d155efa57153fcd9709815547e18da26"
   integrity sha512-9ZqOZ6TVzA4TTAp64UWND99+8Bb6tVmO6GUrLHibs69hVT6sCMXpI0H9a0LtHHkFg5KURqGonISzzKcWXzvxIg==
 
+"@utrecht/radio-button-react@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@utrecht/radio-button-react/-/radio-button-react-1.0.2.tgz#3431f124aff2996e30623b6f44849bd1d89b021f"
+  integrity sha512-y4r3913L0PxIZqVQbjs1bV8cuiez6X4Oaqhjo7d8tdeOtnMjIjvv2s8tyRzDuyU8PioGXcMjtfavY+bDdrfc7g==
+  dependencies:
+    clsx "2.1.1"
+
 "@utrecht/textbox-css@1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@utrecht/textbox-css/-/textbox-css-1.2.0.tgz#41be4783d178ab227b9bd188253407a688e69226"
   integrity sha512-b7bfn3Vo/iSepcglS1+jGyoUMpSfL0N7Dc0J8HKpAZSm8452I5s3SUHJyCiB/fsbM2F4ZFafwYT5n0rKucKZLQ==
 
+"@utrecht/textbox-react@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@utrecht/textbox-react/-/textbox-react-1.0.2.tgz#54f849a977b065dd63582b32f0d5ed399d33c97f"
+  integrity sha512-qO8/1bOL+6NdEtPz6y1hQot0Jex3qNCa/vnJSmuQZbFSy70vRkeancP6Khl8q7o1YIvqpMpbSG3nhZaVM3lIiw==
+  dependencies:
+    clsx "2.1.1"
+
 "@utrecht/web-component-library-react@1.3.0":
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/@utrecht/web-component-library-react/-/web-component-library-react-1.3.0.tgz#5caae1ace5a76ea987f95c31ea9d69c045c8d99e"
@@ -8194,6 +8328,13 @@
   dependencies:
     "@utrecht/web-component-library-stencil" "1.4.0"
 
+"@utrecht/web-component-library-react@3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@utrecht/web-component-library-react/-/web-component-library-react-3.0.0.tgz#c7d08359cd99f43e126691fcf648d19a872141c1"
+  integrity sha512-lgJOzhRK1/9TRTz6ECgJk3yJPhh+t2Df1uj0xjTzca0qWU2UVR/kQwbdlmKRqu7D86iOm5kBfa0jP2yzUkLFvw==
+  dependencies:
+    "@utrecht/web-component-library-stencil" "2.2.0"
+
 "@utrecht/web-component-library-stencil@1.4.0":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@utrecht/web-component-library-stencil/-/web-component-library-stencil-1.4.0.tgz#a880bea2e9f2ffb4375c43fa248b79233ef4c027"
@@ -8201,6 +8342,13 @@
   dependencies:
     "@stencil/core" "4.18.3"
 
+"@utrecht/web-component-library-stencil@2.2.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@utrecht/web-component-library-stencil/-/web-component-library-stencil-2.2.0.tgz#26a2239d578d2be8b0074e33cf3b03e7aedf97d4"
+  integrity sha512-2ny336xp8dVcUaey0bWe65V+zqooyeApyMW8Vi44IxKJTcqNvKdOawT/mI1t1lTTsGoUhxxi0QQYT4AfXMU0aQ==
+  dependencies:
+    "@stencil/core" "4.18.3"
+
 "@vercel/blob@0.12.5":
   version "0.12.5"
   resolved "https://registry.yarnpkg.com/@vercel/blob/-/blob-0.12.5.tgz#1816a9bcac95bf45b690e15beb3f7a4d501d5511"
@@ -18244,7 +18392,7 @@ locate-path@^7.1.0:
   dependencies:
     p-locate "^6.0.0"
 
-lodash-es@^4.17.15, lodash-es@^4.17.21:
+lodash-es@4.17.21, lodash-es@^4.17.15, lodash-es@^4.17.21:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
   integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==