diff --git a/apps/vth-dashboard/src/api/thema-content/content-types/thema-content/schema.json b/apps/vth-dashboard/src/api/thema-content/content-types/thema-content/schema.json
index a114f1f77..7928b005e 100644
--- a/apps/vth-dashboard/src/api/thema-content/content-types/thema-content/schema.json
+++ b/apps/vth-dashboard/src/api/thema-content/content-types/thema-content/schema.json
@@ -31,6 +31,16 @@
       "relation": "manyToMany",
       "target": "api::thema.thema",
       "mappedBy": "child_contents"
+    },
+    "previewImage": {
+      "allowedTypes": [
+        "images",
+        "files",
+        "videos",
+        "audios"
+      ],
+      "type": "media",
+      "multiple": false
     }
   }
 }
diff --git a/apps/vth-dashboard/src/api/thema/content-types/thema/schema.json b/apps/vth-dashboard/src/api/thema/content-types/thema/schema.json
index 097c9e988..a2429f481 100644
--- a/apps/vth-dashboard/src/api/thema/content-types/thema/schema.json
+++ b/apps/vth-dashboard/src/api/thema/content-types/thema/schema.json
@@ -44,6 +44,16 @@
     },
     "description": {
       "type": "text"
+    },
+    "previewImage": {
+      "allowedTypes": [
+        "images",
+        "files",
+        "videos",
+        "audios"
+      ],
+      "type": "media",
+      "multiple": false
     }
   }
 }
diff --git a/apps/vth-frontend/src/app/[locale]/page.tsx b/apps/vth-frontend/src/app/[locale]/page.tsx
index 7fc3121a0..7a1890a5b 100644
--- a/apps/vth-frontend/src/app/[locale]/page.tsx
+++ b/apps/vth-frontend/src/app/[locale]/page.tsx
@@ -1,5 +1,5 @@
-import { createStrapiURL } from '@frameless/pdc-frontend/src/util/createStrapiURL';
-import { fetchData } from '@frameless/pdc-frontend/src/util/fetchData';
+import { createStrapiURL } from '@frameless/vth-frontend/src/util/createStrapiURL';
+import { fetchData } from '@frameless/vth-frontend/src/util/fetchData';
 import { Heading1 } from '@utrecht/component-library-react';
 import { Metadata } from 'next';
 import React from 'react';
@@ -7,6 +7,7 @@ import { Card } from '@/components/Card';
 import { Grid } from '@/components/Grid';
 import { Markdown } from '@/components/Markdown';
 import { GET_HOME_PAGE } from '@/query';
+import { buildImgURL } from '@/util/buildImgURL';
 import { useTranslation } from '../i18n';
 
 export interface Fields {
@@ -43,19 +44,19 @@ const Home = async ({ params: { locale } }: { params: any }) => {
     <Grid className={'utrecht-grid--content-padding'}>
       <div className={'utrecht-grid__two-third'}>
         <Heading1>{title}</Heading1>
-        <Markdown>{content}</Markdown>
+        <Markdown strapiBackendURL={process.env.STRAPI_PUBLIC_URL}>{content}</Markdown>
       </div>
       <Grid className={'utrecht-grid__full-width'}>
         {themas &&
           themas.map((thema: any) => {
-            const { title, description, slug } = thema.attributes;
+            const { title, description, slug, previewImage } = thema.attributes;
             return (
               <Card
                 className={'utrecht-grid__one-third'}
                 key={`thema-${slug}`}
                 title={title}
                 description={description}
-                image={{ url: '', alt: '' }}
+                image={{ url: previewImage && buildImgURL(previewImage), alt: '' }}
                 link={{ href: `/themas/${slug}` }}
               />
             );
diff --git a/apps/vth-frontend/src/app/[locale]/themas/[themaSlug]/content/[contentSlug]/page.tsx b/apps/vth-frontend/src/app/[locale]/themas/[themaSlug]/content/[contentSlug]/page.tsx
index 16eeaa92b..4bfc96a3d 100644
--- a/apps/vth-frontend/src/app/[locale]/themas/[themaSlug]/content/[contentSlug]/page.tsx
+++ b/apps/vth-frontend/src/app/[locale]/themas/[themaSlug]/content/[contentSlug]/page.tsx
@@ -1,5 +1,5 @@
-import { createStrapiURL } from '@frameless/pdc-frontend/src/util/createStrapiURL';
-import { fetchData } from '@frameless/pdc-frontend/src/util/fetchData';
+import { createStrapiURL } from '@frameless/vth-frontend/src/util/createStrapiURL';
+import { fetchData } from '@frameless/vth-frontend/src/util/fetchData';
 import {
   Heading1,
   Heading2,
diff --git a/apps/vth-frontend/src/app/[locale]/themas/[themaSlug]/page.tsx b/apps/vth-frontend/src/app/[locale]/themas/[themaSlug]/page.tsx
index 671edc16e..7bb1c1f1b 100644
--- a/apps/vth-frontend/src/app/[locale]/themas/[themaSlug]/page.tsx
+++ b/apps/vth-frontend/src/app/[locale]/themas/[themaSlug]/page.tsx
@@ -1,5 +1,5 @@
-import { createStrapiURL } from '@frameless/pdc-frontend/src/util/createStrapiURL';
-import { fetchData } from '@frameless/pdc-frontend/src/util/fetchData';
+import { createStrapiURL } from '@frameless/vth-frontend/src/util/createStrapiURL';
+import { fetchData } from '@frameless/vth-frontend/src/util/fetchData';
 import { Heading1 } from '@utrecht/component-library-react';
 import { Metadata } from 'next';
 import React from 'react';
@@ -8,6 +8,7 @@ import { Card } from '@/components/Card';
 import { Grid } from '@/components/Grid';
 import { Markdown } from '@/components/Markdown';
 import { GET_THEMA_BY_SLUG } from '@/query';
+import {buildImgURL} from "@/util/buildImgURL";
 
 type Params = {
   params: {
@@ -43,11 +44,11 @@ const Thema = async ({ params: { locale, themaSlug } }: Params) => {
       <Grid className={'utrecht-grid__full-width'}>
         {child_themas.data[0] &&
           child_themas.data.map((thema: any) => {
-            const { title, description, slug: childSlug } = thema.attributes;
+            const { title, description, slug: childSlug, previewImage } = thema.attributes;
             return (
               <Card
                 className={'utrecht-grid__one-third'}
-                image={{ url: '', alt: '' }}
+                image={{ url: previewImage && buildImgURL(previewImage), alt: '' }}
                 title={title}
                 description={description}
                 key={`thema-${childSlug}`}
@@ -58,14 +59,14 @@ const Thema = async ({ params: { locale, themaSlug } }: Params) => {
         {child_contents.data[0] &&
           child_contents.data &&
           child_contents.data.map((content: any) => {
-            const { title, description, slug: contentSlug } = content.attributes;
+            const { title, description, slug: contentSlug, previewImage } = content.attributes;
             return (
               <Card
                 className={'utrecht-grid__one-third'}
                 title={title}
                 description={description}
                 key={`thema-${contentSlug}`}
-                image={{ url: '', alt: '' }}
+                image={{ url: previewImage && buildImgURL(previewImage), alt: '' }}
                 link={{ href: `/themas/${themaSlug}/content/${contentSlug}` }}
               />
             );
diff --git a/apps/vth-frontend/src/util/buildImgURL.ts b/apps/vth-frontend/src/util/buildImgURL.ts
new file mode 100644
index 000000000..a6258bbe6
--- /dev/null
+++ b/apps/vth-frontend/src/util/buildImgURL.ts
@@ -0,0 +1,12 @@
+export const buildImgURL = (src: string) => {
+  if (!process.env.STRAPI_PUBLIC_URL) {
+    throw new Error('`STRAPI_PUBLIC_URL` is required to construct the image URL in the Markdown component.');
+  }
+  const url = new URL(process.env.STRAPI_PUBLIC_URL);
+  // if we need to support a different image-provider-upload, we can use the following approach
+  // just rename env variable
+  // if (process.env.DEPLOY_TO_VERCEL && Boolean(process.env.DEPLOY_TO_VERCEL)) {
+  //   return src;
+  // }
+  return `${url?.origin}${src}`;
+};