diff --git a/apps/vth-frontend/next.config.js b/apps/vth-frontend/next.config.js
index d402773a..4530be87 100644
--- a/apps/vth-frontend/next.config.js
+++ b/apps/vth-frontend/next.config.js
@@ -9,9 +9,6 @@ const nextConfig = {
         hostname: hostname,
         port: port,
       },
-      {
-        hostname: 'omgevingsvisie.utrecht.nl',
-      },
     ],
   },
   experimental: {
diff --git a/apps/vth-frontend/src/app/[locale]/layout.tsx b/apps/vth-frontend/src/app/[locale]/layout.tsx
index adf1f612..41684ead 100644
--- a/apps/vth-frontend/src/app/[locale]/layout.tsx
+++ b/apps/vth-frontend/src/app/[locale]/layout.tsx
@@ -134,7 +134,7 @@ const RootLayout = async ({ children, params: { locale } }: LayoutProps) => {
         <QueryClientProvider>
           <Page className="utrecht-page--full-width">
             <PageHeader>
-              <Grid>
+              <Grid className={'utrecht-grid--content-padding'}>
                 <Logo locale={locale} />
               </Grid>
             </PageHeader>
diff --git a/apps/vth-frontend/src/app/[locale]/page.tsx b/apps/vth-frontend/src/app/[locale]/page.tsx
index 27fa4233..2653c4ab 100644
--- a/apps/vth-frontend/src/app/[locale]/page.tsx
+++ b/apps/vth-frontend/src/app/[locale]/page.tsx
@@ -1,8 +1,9 @@
 import { createStrapiURL } from '@frameless/pdc-frontend/src/util/createStrapiURL';
 import { fetchData } from '@frameless/pdc-frontend/src/util/fetchData';
-import { Heading1, Heading2, Link, UnorderedList, UnorderedListItem } from '@utrecht/component-library-react';
+import { Heading1 } from '@utrecht/component-library-react';
 import { Metadata } from 'next';
 import React from 'react';
+import { Card } from '@/components/Card';
 import { Grid } from '@/components/Grid';
 import { Markdown } from '@/components/Markdown';
 import { GET_HOME_PAGE } from '@/query';
@@ -39,24 +40,27 @@ const Home = async ({ params: { locale } }: { params: any }) => {
   const themas = data?.themas?.data;
 
   return (
-    <Grid>
-      <div className={'two-thirds'}>
+    <Grid className={'utrecht-grid--content-padding'}>
+      <div className={'utrecht-grid__two-third'}>
         <Heading1>{title}</Heading1>
         <Markdown>{content}</Markdown>
       </div>
-      <div className={'two-thirds'}>
-        <Heading2>Themas</Heading2>
-        <UnorderedList>
-          {themas &&
-            themas.map((thema: any) => {
-              const { title, slug } = thema.attributes;
-              return (
-                <UnorderedListItem key={`thema-${slug}`}>
-                  <Link href={`/themas/${slug}`}>{title}</Link>
-                </UnorderedListItem>
-              );
-            })}
-        </UnorderedList>
+      <div className={'utrecht-grid__full-width utrecht-grid'}>
+        {themas &&
+          themas.map((thema: any) => {
+            const { title, description, slug } = thema.attributes;
+            return (
+              <Card
+                className={'utrecht-grid__one-third'}
+                alt={''}
+                href={`themas/${slug}`}
+                key={`thema-${slug}`}
+                title={title}
+                body={description}
+                imgSrc={''}
+              />
+            );
+          })}
       </div>
     </Grid>
   );
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 df8e1b6d..16eeaa92 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
@@ -41,8 +41,8 @@ const Thema = async ({ params: { locale, contentSlug } }: Params) => {
   const { title, content, parents } = data.findSlug.data.attributes;
 
   return (
-    <Grid>
-      <div className={'two-thirds'}>
+    <Grid className={'utrecht-grid--content-padding'}>
+      <div className={'utrecht-grid__two-third'}>
         <Heading1>{title}</Heading1>
         <Markdown strapiBackendURL={process.env.STRAPI_PUBLIC_URL}>{content}</Markdown>
         <Heading2>Themas</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 dd72f0a7..228696df 100644
--- a/apps/vth-frontend/src/app/[locale]/themas/[themaSlug]/page.tsx
+++ b/apps/vth-frontend/src/app/[locale]/themas/[themaSlug]/page.tsx
@@ -1,13 +1,6 @@
 import { createStrapiURL } from '@frameless/pdc-frontend/src/util/createStrapiURL';
 import { fetchData } from '@frameless/pdc-frontend/src/util/fetchData';
-import {
-  Heading1,
-  Heading2,
-  Link,
-  Paragraph,
-  UnorderedList,
-  UnorderedListItem,
-} from '@utrecht/component-library-react';
+import { Heading1 } from '@utrecht/component-library-react';
 import { Metadata } from 'next';
 import React from 'react';
 import { useTranslation } from '@/app/i18n';
@@ -23,9 +16,6 @@ type Params = {
   };
 };
 
-const cardBody =
-  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam aliquam, nunc nisl aliquam nisl, nec aliquam nisl nisl nec nisl.';
-
 export async function generateMetadata({ params: { locale } }: Params): Promise<Metadata> {
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const { t } = await useTranslation(locale, 'thema');
@@ -42,81 +32,45 @@ const Thema = async ({ params: { locale, themaSlug } }: Params) => {
     variables: { slug: themaSlug, locale: locale },
   });
 
-  const { title, content, parents, child_themas, child_contents } = data.findSlug.data.attributes;
+  const { title, content, child_themas, child_contents } = data.findSlug.data.attributes;
 
   return (
-    <Grid>
-      <div className={'two-thirds'}>
+    <Grid className={'utrecht-grid--content-padding'}>
+      <div className={'utrecht-grid__two-third'}>
         <Heading1>{title}</Heading1>
         <Markdown strapiBackendURL={process.env.STRAPI_PUBLIC_URL}>{content}</Markdown>
       </div>
-      <div className={'two-thirds'}>
-        <Card
-          alt={''}
-          body={cardBody}
-          href={'/themas/afval'}
-          imgSrc={'https://omgevingsvisie.utrecht.nl/fileadmin/_processed_/2/6/csm_bouwprojecten-header_b14a8b7229.jpg'}
-          title={'Afval'}
-        />
-      </div>
-      <div className={'two-thirds'}>
-        <Heading2>Hoofd-themas</Heading2>
-        {parents.data[0] ? (
-          <UnorderedList>
-            {parents.data &&
-              parents.data.map((content: any) => {
-                const { title, slug: parentSlug } = content.attributes;
-                return (
-                  <UnorderedListItem key={`thema-${parentSlug}`}>
-                    <Link href={`/themas/${parentSlug}`}>{title}</Link>
-                  </UnorderedListItem>
-                );
-              })}
-          </UnorderedList>
-        ) : (
-          <>
-            <Paragraph>Geen content paginas verbonden.</Paragraph>
-          </>
-        )}
-      </div>
-      <div className={'two-thirds'}>
-        <Heading2>Sub-themas</Heading2>
-        {child_themas.data[0] ? (
-          <UnorderedList>
-            {child_themas.data.map((thema: any) => {
-              const { title, slug: childSlug } = thema.attributes;
-              return (
-                <UnorderedListItem key={`thema-${childSlug}`}>
-                  <Link href={`/themas/${childSlug}`}>{title}</Link>
-                </UnorderedListItem>
-              );
-            })}
-          </UnorderedList>
-        ) : (
-          <>
-            <Paragraph>Geen sub-themas verbonden.</Paragraph>
-          </>
-        )}
-      </div>
-      <div className={'two-thirds'}>
-        <Heading2>Content paginas</Heading2>
-        {child_contents.data[0] ? (
-          <UnorderedList>
-            {child_contents.data &&
-              child_contents.data.map((content: any) => {
-                const { title, slug: contentSlug } = content.attributes;
-                return (
-                  <UnorderedListItem key={`thema-${contentSlug}`}>
-                    <Link href={`/themas/${themaSlug}/content/${contentSlug}`}>{title}</Link>
-                  </UnorderedListItem>
-                );
-              })}
-          </UnorderedList>
-        ) : (
-          <>
-            <Paragraph>Geen content paginas verbonden.</Paragraph>
-          </>
-        )}
+      <div className={'utrecht-grid__full-width utrecht-grid'}>
+        {child_themas.data[0] &&
+          child_themas.data.map((thema: any) => {
+            const { title, description, slug: childSlug } = thema.attributes;
+            return (
+              <Card
+                className={'utrecht-grid__one-third'}
+                alt={''}
+                title={title}
+                body={description}
+                key={`thema-${childSlug}`}
+                href={`/themas/${childSlug}`}
+                imgSrc={''}
+              />
+            );
+          })}
+        {child_contents.data[0] &&
+          child_contents.data &&
+          child_contents.data.map((content: any) => {
+            const { title, description, slug: contentSlug } = content.attributes;
+            return (
+              <Card
+                alt={''}
+                title={title}
+                body={description}
+                key={`thema-${contentSlug}`}
+                href={`/themas/${themaSlug}/content/${contentSlug}`}
+                imgSrc={''}
+              />
+            );
+          })}
       </div>
     </Grid>
   );
diff --git a/apps/vth-frontend/src/components/Card/index.style.css b/apps/vth-frontend/src/components/Card/index.style.css
index 96d56317..0a5dc092 100644
--- a/apps/vth-frontend/src/components/Card/index.style.css
+++ b/apps/vth-frontend/src/components/Card/index.style.css
@@ -4,5 +4,8 @@
 }
 
 .utrecht-card__content {
-  padding: 0 1rem 1rem 1rem;
+  padding-block-end: 1rem;
+  padding-block-start: 0;
+  padding-inline-end: 1rem;
+  padding-inline-start: 1rem;
 }
diff --git a/apps/vth-frontend/src/components/Card/index.tsx b/apps/vth-frontend/src/components/Card/index.tsx
index ca0678ab..51e4683b 100644
--- a/apps/vth-frontend/src/components/Card/index.tsx
+++ b/apps/vth-frontend/src/components/Card/index.tsx
@@ -13,10 +13,10 @@ interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
   title: string;
 }
 
-export const Card: FC<CardProps> = ({ alt, body, href, imgSrc, title, ...props }) => {
+export const Card: FC<CardProps> = ({ alt = '', body, href, imgSrc, title, ...props }) => {
   return (
     <div {...props} className={clsx('utrecht-card', props.className)}>
-      <Image src={imgSrc} alt={alt} className={'utrecht-card__image'} width={312} height={200} />
+      {imgSrc && <Image src={imgSrc} alt={alt} className={'utrecht-card__image'} width={312} height={200} />}
       <div className={'utrecht-card__content'}>
         <Link href={href} className={'utrecht-link'}>
           <Heading2 className="utrecht-card__title">{title}</Heading2>
diff --git a/apps/vth-frontend/src/components/Footer/index.module.scss b/apps/vth-frontend/src/components/Footer/index.module.scss
index d9f06d92..0a561b4f 100644
--- a/apps/vth-frontend/src/components/Footer/index.module.scss
+++ b/apps/vth-frontend/src/components/Footer/index.module.scss
@@ -9,8 +9,8 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
-  max-width: 70rem;
   margin-inline: auto;
+  max-width: 70rem;
 }
 
 .utrecht-footer__list-item--6 {
diff --git a/apps/vth-frontend/src/components/Grid/index.style.css b/apps/vth-frontend/src/components/Grid/index.style.css
index 90d32f48..606abf3e 100644
--- a/apps/vth-frontend/src/components/Grid/index.style.css
+++ b/apps/vth-frontend/src/components/Grid/index.style.css
@@ -1,131 +1,87 @@
 .utrecht-grid {
   display: grid;
-  max-width: 70rem;
-  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: auto;
   grid-column-gap: 0.5rem;
-  padding-block-start: 1rem;
-  padding-inline-start: 1rem;
-  padding-inline-end: 1rem;
+  grid-row-gap: 1rem;
+  grid-template-columns: repeat(4, 1fr);
+  max-width: 70rem;
   padding-block-end: 0;
 }
 
-.utrecht-grid-item {
+.utrecht-grid--content-padding {
+  padding-block-start: 1rem;
+  padding-inline-end: 1rem;
+  padding-inline-start: 1rem;
 }
 
-.full-width {
-  grid-column: 1/5;
+.utrecht-grid__full-width {
+  grid-column: 1/-1;
 }
 
-.two-column--first,
-.two-column--second {
-  grid-column: 1/5;
+.utrecht-grid__half-width {
+  grid-column: span 4;
 }
 
-.three-column--first,
-.three-column--second,
-.three-column--third {
-  grid-column: 1/5;
+.utrecht-grid__one-third {
+  grid-column: span 4;
 }
 
-.four-column--first,
-.four-column--second,
-.four-column--third,
-.four-column--fourth {
-  grid-column: 1/5;
+.utrecht-grid__two-third {
+  grid-column: span 4;
 }
 
-.two-thirds {
-  grid-column: 1/5;
+.utrecht-grid__one-fourth {
+  grid-column: span 4;
 }
-.one-third {
-  grid-column: 1/5;
-}
-
 
-@container(min-width: 40rem) {
+@container (min-width: 40rem) {
   .utrecht-grid {
     grid-column-gap: 1rem;
+  }
+
+  .utrecht-grid--content-padding {
     padding-block-start: 2rem;
-    padding-inline-start: 2rem;
     padding-inline-end: 2rem;
+    padding-inline-start: 2rem;
   }
 
-  .two-column--first {
-    grid-column: 1/3;
-  }
-  .two-column--second {
-    grid-column: 3/5;
+  .utrecht-grid__half-width {
+    grid-column: span 2;
   }
 
-  .four-column--first {
-    grid-column: 1/3;
-  }
-  .four-column--second {
-    grid-column: 3/5;
-  }
-  .four-column--third {
-    grid-column: 1/3;
-  }
-  .four-column--fourth {
-    grid-column: 3/5;
+  .utrecht-grid__one-fourth {
+    grid-column: span 2;
   }
 
-  .two-thirds,
-  .one-third {
-    grid-column: 1/5;
+  .utrecht-grid__one-third {
+    grid-column: span 2;
   }
-
 }
 
-@container(min-width: 60rem) {
+@container (min-width: 60rem) {
   .utrecht-grid {
     grid-template-columns: repeat(12, 1fr);
   }
 
-  .full-width {
-    grid-column: 1/13;
+  .utrecht-grid__half-width {
+    grid-column: span 6;
   }
 
-  .two-column--first {
-    grid-column: 1/7;
+  .utrecht-grid__one-third {
+    grid-column: span 4;
   }
-  .two-column--second {
-    grid-column: 7/13;
+  .utrecht-grid__two-third {
+    grid-column: span 8;
   }
 
-  .three-column--first {
-    grid-column: 1/5;
-  }
-  .three-column--second {
-    grid-column: 5/9;
-  }
-  .three-column--third {
-    grid-column: 9/13;
-  }
-
-  .four-column--first {
-    grid-column: 1/4;
-  }
-  .four-column--second {
-    grid-column: 4/7;
-  }
-  .four-column--third {
-    grid-column: 7/10;
-  }
-  .four-column--fourth {
-    grid-column: 10/13;
-  }
-
-  .two-thirds {
-    grid-column: 1/9;
-  }
-  .one-third {
-    grid-column: 9/13;
+  .utrecht-grid__one-fourth {
+    grid-column: span 3;
   }
 }
 
-@container(min-width: 70rem) {
+@container (min-width: 70rem) {
   .utrecht-grid {
     grid-column-gap: 2rem;
+    grid-row-gap: 2rem;
   }
 }
diff --git a/apps/vth-frontend/src/query/index.ts b/apps/vth-frontend/src/query/index.ts
index ac357287..da641688 100644
--- a/apps/vth-frontend/src/query/index.ts
+++ b/apps/vth-frontend/src/query/index.ts
@@ -29,6 +29,7 @@ query getHomePage {
       attributes {
         title
         slug
+        description
       }
     }
   }
diff --git a/apps/vth-frontend/src/styles/globals.css b/apps/vth-frontend/src/styles/globals.css
index 57b28720..f286dc31 100644
--- a/apps/vth-frontend/src/styles/globals.css
+++ b/apps/vth-frontend/src/styles/globals.css
@@ -38,8 +38,8 @@ a {
   --utrecht-page-padding-inline-end: 0;
 
   container-type: inline-size;
-  max-width: var(--utrecht-page-header-max-width);
   margin-inline: auto;
+  max-width: var(--utrecht-page-header-max-width);
 }
 
 .utrecht-page-content {
@@ -49,8 +49,8 @@ a {
 
   background-color: var(--utrecht-page-content-background-color);
   container-type: inline-size;
-  max-width: var(--utrecht-page-content-max-width);
   margin-inline: auto;
+  max-width: var(--utrecht-page-content-max-width);
 }
 
 .utrecht-link-social {