diff --git a/apps/tailwind-components/app/components/editor/HtmlPreview.vue b/apps/tailwind-components/app/components/editor/HtmlPreview.vue
index 25cd87eb062..65ef3bfc2aa 100644
--- a/apps/tailwind-components/app/components/editor/HtmlPreview.vue
+++ b/apps/tailwind-components/app/components/editor/HtmlPreview.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useTemplateRef, watch } from "vue";
 import type { IDeveloperPages } from "../../../types/cms";
-import { generateHtmlPreview } from "../../utils/Pages";
+import { generateHtmlPreview } from "../../utils/cms";
 
 const props = defineProps<{
   content: IDeveloperPages;
diff --git a/apps/tailwind-components/app/components/pages/ConfigurablePage.vue b/apps/tailwind-components/app/components/pages/ConfigurablePage.vue
index 559c1154519..4adf87b0c10 100644
--- a/apps/tailwind-components/app/components/pages/ConfigurablePage.vue
+++ b/apps/tailwind-components/app/components/pages/ConfigurablePage.vue
@@ -1,14 +1,10 @@
 <script setup lang="ts">
 import type { IConfigurablePages } from "../../../types/cms";
 
+import PageComponent from "./PageComponent.vue";
 import PageBanner from "../pages/Banner.vue";
 import PageSection from "../pages/Section.vue";
-import TextHeading from "../text/Heading.vue";
-import TextParagraph from "../text/Paragraph.vue";
-import Image from "../pages/Image.vue";
-import NavigationGroups from "./Navigation/NavigationGroups.vue";
-
-import { parsePageText } from "../../utils/Pages";
+import TextParagraph from "./Paragraph.vue";
 
 const props = defineProps<{ content: IConfigurablePages }>();
 </script>
@@ -33,49 +29,10 @@ const props = defineProps<{ content: IConfigurablePages }>();
         v-for="orderedComponent in orderedBlock.block.componentOrder"
         :key="orderedComponent.id"
       >
-        <TextHeading
-          v-if="orderedComponent.component.mg_tableclass === 'cms.Headings'"
-          :id="orderedComponent.component.id"
-          :heading-is-centered="orderedComponent.component.headingIsCentered"
-          :level="orderedComponent.component.level"
-          class="mb-5"
-        >
-          {{ parsePageText(orderedComponent.component.text) }}
-        </TextHeading>
-        <TextParagraph
-          v-else-if="
-            orderedComponent.component.mg_tableclass === 'cms.Paragraphs'
-          "
-          :id="orderedComponent.component.id"
-          :paragraph-is-centered="
-            orderedComponent.component.paragraphIsCentered
-          "
-          class="mb-2.5 last:mb-0"
-        >
-          {{ parsePageText(orderedComponent.component.text) }}
-        </TextParagraph>
-        <Image
-          v-else-if="orderedComponent.component.mg_tableclass === 'cms.Images'"
-          :id="orderedComponent.component.id"
-          :image="orderedComponent.component.image"
-          :width="orderedComponent.component.width"
-          :height="orderedComponent.component.height"
-          :alt="orderedComponent.component.alt"
-          :image-is-centered="orderedComponent.component.imageIsCentered"
-        />
-        <NavigationGroups
-          v-else-if="
-            orderedComponent.component.mg_tableclass === 'cms.Navigation groups'
-          "
-          :id="orderedComponent.component.id"
-          :links="orderedComponent.component.links"
+        <PageComponent
+          :mg_tableclass="orderedComponent.component.mg_tableclass"
+          :component="orderedComponent.component"
         />
-        <div v-else>
-          <TextParagraph id="component-does-not-exist-message">
-            Component {{ orderedComponent.component.mg_tableclass }} is not yet
-            supported.
-          </TextParagraph>
-        </div>
       </template>
     </PageSection>
     <div v-else>
diff --git a/apps/tailwind-components/app/components/text/Heading.vue b/apps/tailwind-components/app/components/pages/Heading.vue
similarity index 100%
rename from apps/tailwind-components/app/components/text/Heading.vue
rename to apps/tailwind-components/app/components/pages/Heading.vue
diff --git a/apps/tailwind-components/app/components/pages/PageComponent.vue b/apps/tailwind-components/app/components/pages/PageComponent.vue
new file mode 100644
index 00000000000..11be9d5dc90
--- /dev/null
+++ b/apps/tailwind-components/app/components/pages/PageComponent.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import Heading from "./Heading.vue";
+import Paragraph from "./Paragraph.vue";
+import Image from "../pages/Image.vue";
+import NavigationGroups from "./Navigation/NavigationGroups.vue";
+
+import { parsePageText } from "../../utils/cms";
+import type { IPageComponent } from "../../../types/CmsComponents";
+
+const props = withDefaults(
+  defineProps<{
+    component: IPageComponent;
+    mg_tableclass: string;
+    isEditable?: boolean;
+  }>(),
+  {
+    isEditable: false,
+  }
+);
+</script>
+
+<template>
+  <Heading
+    v-if="mg_tableclass === 'cms.Headings'"
+    :id="component.id"
+    :heading-is-centered="component.headingIsCentered"
+    :level="component.level"
+    class="mb-5"
+  >
+    {{ parsePageText(component.text) }}
+  </Heading>
+  <Paragraph
+    v-else-if="mg_tableclass === 'cms.Paragraphs'"
+    :id="component.id"
+    :paragraph-is-centered="component.paragraphIsCentered"
+    class="mb-2.5 last:mb-0"
+  >
+    {{ parsePageText(component.text) }}
+  </Paragraph>
+  <Image
+    v-else-if="mg_tableclass === 'cms.Images'"
+    :id="component.id"
+    :image="component.image"
+    :width="component.width"
+    :height="component.height"
+    :alt="component.alt"
+    :image-is-centered="component.imageIsCentered"
+  />
+  <NavigationGroups
+    v-else-if="mg_tableclass === 'cms.Navigation groups'"
+    :id="component.id"
+    :links="component.links"
+  />
+  <div v-else>
+    <Paragraph id="component-does-not-exist-message">
+      Component {{ mg_tableclass }} is not yet supported
+    </Paragraph>
+  </div>
+</template>
diff --git a/apps/tailwind-components/app/components/text/Paragraph.vue b/apps/tailwind-components/app/components/pages/Paragraph.vue
similarity index 100%
rename from apps/tailwind-components/app/components/text/Paragraph.vue
rename to apps/tailwind-components/app/components/pages/Paragraph.vue
diff --git a/apps/tailwind-components/app/pages/pages/Banner.story.vue b/apps/tailwind-components/app/pages/pages/Banner.story.vue
index 83c0875f57e..4a87f33690f 100644
--- a/apps/tailwind-components/app/pages/pages/Banner.story.vue
+++ b/apps/tailwind-components/app/pages/pages/Banner.story.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import PageBanner from "../../components/pages/Banner.vue";
 import DemoImage from "../../assets/img/molgenis-banner.jpg";
-import TextHeading from "../../components/text/Heading.vue";
+import TextHeading from "../../components/pages/Heading.vue";
 </script>
 
 <template>
diff --git a/apps/tailwind-components/app/pages/text/Heading.story.vue b/apps/tailwind-components/app/pages/pages/Heading.story.vue
similarity index 86%
rename from apps/tailwind-components/app/pages/text/Heading.story.vue
rename to apps/tailwind-components/app/pages/pages/Heading.story.vue
index 691d2dcb3a0..044d37cb035 100644
--- a/apps/tailwind-components/app/pages/text/Heading.story.vue
+++ b/apps/tailwind-components/app/pages/pages/Heading.story.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import TextHeading from "../../components/text/Heading.vue";
+import TextHeading from "../../components/pages/Heading.vue";
 </script>
 
 <template>
diff --git a/apps/tailwind-components/app/pages/text/Paragraph.story.vue b/apps/tailwind-components/app/pages/pages/Paragraph.story.vue
similarity index 91%
rename from apps/tailwind-components/app/pages/text/Paragraph.story.vue
rename to apps/tailwind-components/app/pages/pages/Paragraph.story.vue
index 3d23dad786d..ca458d29229 100644
--- a/apps/tailwind-components/app/pages/text/Paragraph.story.vue
+++ b/apps/tailwind-components/app/pages/pages/Paragraph.story.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import TextParagraph from "../../components/text/Paragraph.vue";
+import TextParagraph from "../../components/pages/Paragraph.vue";
 </script>
 
 <template>
diff --git a/apps/tailwind-components/app/utils/Pages.ts b/apps/tailwind-components/app/utils/cms.ts
similarity index 99%
rename from apps/tailwind-components/app/utils/Pages.ts
rename to apps/tailwind-components/app/utils/cms.ts
index a8660122881..45ac16f1cfd 100644
--- a/apps/tailwind-components/app/utils/Pages.ts
+++ b/apps/tailwind-components/app/utils/cms.ts
@@ -8,6 +8,7 @@ import type {
 
 export function newDeveloperPage(): IDeveloperPages {
   return {
+    mg_tableclass: "",
     name: "",
     description: "",
     html: "",
diff --git a/apps/tailwind-components/tests/vitest/components/text/Heading.spec.ts b/apps/tailwind-components/tests/vitest/components/pages/Heading.spec.ts
similarity index 88%
rename from apps/tailwind-components/tests/vitest/components/text/Heading.spec.ts
rename to apps/tailwind-components/tests/vitest/components/pages/Heading.spec.ts
index 8f92731c8dd..8a0614bd830 100644
--- a/apps/tailwind-components/tests/vitest/components/text/Heading.spec.ts
+++ b/apps/tailwind-components/tests/vitest/components/pages/Heading.spec.ts
@@ -1,7 +1,7 @@
 import { mount } from "@vue/test-utils";
 import { describe, expect, test } from "vitest";
 
-import TextHeading from "../../../../app/components/text/Heading.vue";
+import TextHeading from "../../../../app/components/pages/Heading.vue";
 
 const wrapper = mount(TextHeading, {
   props: {
diff --git a/apps/tailwind-components/tests/vitest/components/text/Paragraph.spec.ts b/apps/tailwind-components/tests/vitest/components/pages/Paragraph.spec.ts
similarity index 88%
rename from apps/tailwind-components/tests/vitest/components/text/Paragraph.spec.ts
rename to apps/tailwind-components/tests/vitest/components/pages/Paragraph.spec.ts
index 41ece6ea805..7bf6225d8b4 100644
--- a/apps/tailwind-components/tests/vitest/components/text/Paragraph.spec.ts
+++ b/apps/tailwind-components/tests/vitest/components/pages/Paragraph.spec.ts
@@ -1,7 +1,7 @@
 import { mount } from "@vue/test-utils";
 import { describe, expect, test } from "vitest";
 
-import Paragraph from "../../../../app/components/text/Paragraph.vue";
+import Paragraph from "../../../../app/components/pages/Paragraph.vue";
 
 const wrapper = mount(Paragraph, {
   props: {
diff --git a/apps/tailwind-components/tests/vitest/utils/parsePageText.spec.ts b/apps/tailwind-components/tests/vitest/utils/parsePageText.spec.ts
index c0191102148..e5d28dcc3a1 100644
--- a/apps/tailwind-components/tests/vitest/utils/parsePageText.spec.ts
+++ b/apps/tailwind-components/tests/vitest/utils/parsePageText.spec.ts
@@ -1,5 +1,5 @@
 import { expect, test, describe } from "vitest";
-import { parsePageText } from "../../../app/utils/Pages";
+import { parsePageText } from "../../../app/utils/cms";
 
 describe("parsePageText:", () => {
   test("extra leading and trailing quotes are removed", () => {
diff --git a/apps/tailwind-components/types/CmsComponents.ts b/apps/tailwind-components/types/CmsComponents.ts
new file mode 100644
index 00000000000..a652887851d
--- /dev/null
+++ b/apps/tailwind-components/types/CmsComponents.ts
@@ -0,0 +1,12 @@
+import type {
+  IHeadings,
+  IParagraphs,
+  IImages,
+  INavigationGroups,
+} from "./cms.ts";
+
+export interface IPageComponent
+  extends IHeadings,
+    IParagraphs,
+    IImages,
+    INavigationGroups {}
diff --git a/apps/tailwind-components/types/cms.ts b/apps/tailwind-components/types/cms.ts
index 1cb2228f976..4a4fe2320e5 100644
--- a/apps/tailwind-components/types/cms.ts
+++ b/apps/tailwind-components/types/cms.ts
@@ -1,5 +1,11 @@
+// Generated (on: 2026-03-12T14:34:05.146698) from Generator.java for schema: cms
+
+export interface IMgTableClass {
+  mg_tableclass?: string;
+}
+
 export interface IFile {
-  id: string;
+  id?: string;
   size?: number;
   extension?: string;
   url?: string;
@@ -20,42 +26,90 @@ export interface IOntologyNode extends ITreeNode {
   order?: number;
 }
 
-export interface IContainers {
-  mg_tableclass?: string;
+export interface IBlockOrders extends IMgTableClass {
+  id: string;
+  configurablePage?: any;
+  block?: any;
+  order?: number;
+}
+
+export interface IBlockOrders_agg {
+  count: number;
+}
+
+export interface IBlocks extends IMgTableClass {
+  enableFullScreenWidth?: boolean;
+  inContainer?: any;
+  components?: IComponents[];
+  componentOrder?: IComponentOrders[];
+  id: string;
+}
+
+export interface IBlocks_agg {
+  count: number;
+}
+
+export interface IComponentOrders extends IMgTableClass {
+  id: string;
+  block?: any;
+  component?: any;
+  order?: number;
+}
+
+export interface IComponentOrders_agg {
+  count: number;
+}
+
+export interface IComponents extends IMgTableClass {
+  inBlock?: any;
+  id: string;
+}
+
+export interface IComponents_agg {
+  count: number;
+}
+
+export interface IConfigurablePages extends IMgTableClass {
   name: string;
   description?: string;
+  blocks?: IBlocks[];
+  blockOrder?: IBlockOrders[];
 }
 
-// developer page defintions
-export interface IDeveloperPages extends IContainers {
-  mg_tableclass?: string;
+export interface IConfigurablePages_agg {
+  count: number;
+}
+
+export interface IContainers extends IMgTableClass {
   name: string;
   description?: string;
-  html?: string;
-  css?: string;
-  javascript?: string;
-  dependencies?: IDependencies[];
-  enableBaseStyles?: boolean;
-  enableButtonStyles?: boolean;
-  enableFullScreen?: boolean;
 }
 
-export interface IDependencies {
-  mg_tableclass?: string;
+export interface IContainers_agg {
+  count: number;
+}
+
+export interface IDependencies extends IMgTableClass {
   name: string;
   url?: string;
   fetchPriority?: IOntologyNode;
 }
 
-export interface IDependenciesCSS {
-  mg_tableclass?: string;
+export interface IDependencies_agg {
+  count: number;
+}
+
+export interface IDependenciesCSS extends IMgTableClass {
   name: string;
   url?: string;
   fetchPriority?: IOntologyNode;
 }
 
-export interface IDependenciesJS {
-  mg_tableclass?: string;
+export interface IDependenciesCSS_agg {
+  count: number;
+}
+
+export interface IDependenciesJS extends IMgTableClass {
   name: string;
   url?: string;
   fetchPriority?: IOntologyNode;
@@ -63,130 +117,149 @@ export interface IDependenciesJS {
   defer?: boolean;
 }
 
-// configurable page definitions
-export interface IConfigurablePages extends IContainers {
-  mg_tableclass?: string;
-  name: string;
-  description?: string;
-  blockOrder: IBlockOrders[];
-}
-
-export interface IBlockOrders {
-  id: string;
-  block: IBlocks;
-  order: number;
+export interface IDependenciesJS_agg {
+  count: number;
 }
 
-export interface IBlocks extends IHeaders, ISections {
-  mg_tableclass: string;
-  id: string;
-  componentOrder?: IComponentOrders[];
-  enableFullScreenWidth?: boolean;
-}
-
-export interface IComponentOrders {
-  id: string;
-  component: IComponents;
-  order?: number;
+export interface IDeveloperPages extends IMgTableClass {
+  name: string;
+  description?: string;
+  html?: string;
+  css?: string;
+  javascript?: string;
+  dependencies?: IDependencies[];
+  enableBaseStyles?: boolean;
+  enableButtonStyles?: boolean;
+  enableFullScreen?: boolean;
 }
 
-export interface IComponents
-  extends IFile,
-    IHeadings,
-    IImages,
-    IOrderedLists,
-    IParagraphs,
-    ITextElements,
-    IUnorderedLists,
-    INavigationGroups,
-    INavigationCards {
-  mg_tableclass?: string;
-  id: string;
-  inBlock?: any;
+export interface IDeveloperPages_agg {
+  count: number;
 }
 
-// block defintions
-export interface IHeaders {
-  id: string;
+export interface IHeaders extends IMgTableClass {
   title?: string;
   subtitle?: string;
   backgroundImage?: any;
   titleIsCentered?: boolean;
   enableFullScreenWidth?: boolean;
+  inContainer?: any;
+  components?: IComponents[];
+  componentOrder?: IComponentOrders[];
+  id: string;
 }
 
-export interface ISections {
-  mg_tableclass?: string;
-  id: string;
-  enableFullScreenWidth?: boolean;
+export interface IHeaders_agg {
+  count: number;
 }
 
-export interface IHeadings {
-  mg_tableclass?: string;
-  id: string;
-  inBlock?: any;
+export interface IHeadings extends IMgTableClass {
   text?: string;
   level?: number;
   headingIsCentered?: boolean;
+  headingIsHidden?: boolean;
+  inBlock?: any;
+  id: string;
 }
 
-export interface IImages {
-  mg_tableclass?: string;
-  id: string;
-  inBlock?: any;
+export interface IHeadings_agg {
+  count: number;
+}
+
+export interface IImages extends IMgTableClass {
   displayName?: string;
   image?: IFile;
   alt?: string;
   width?: string;
   height?: string;
   imageIsCentered?: boolean;
+  inBlock?: any;
+  id: string;
 }
 
-export interface IOrderedLists {
-  id: string;
+export interface IImages_agg {
+  count: number;
+}
+
+export interface INavigationCards extends IMgTableClass {
+  title?: string;
+  description?: string;
+  url?: string;
+  urlLabel?: string;
+  urlIsExternal?: boolean;
+  displayedInNavigationGroup?: any;
   inBlock?: any;
-  items?: string[];
+  id: string;
 }
 
-export interface IParagraphs {
-  mg_tableclass?: string;
+export interface INavigationCards_agg {
+  count: number;
+}
+
+export interface INavigationGroups extends IMgTableClass {
+  links?: INavigationCards[];
+  inBlock?: any;
   id: string;
+}
+
+export interface INavigationGroups_agg {
+  count: number;
+}
+
+export interface IOrderedLists extends IMgTableClass {
+  items?: string[];
   inBlock?: any;
+  id: string;
+}
+
+export interface IOrderedLists_agg {
+  count: number;
+}
+
+export interface IParagraphs extends IMgTableClass {
   text?: string;
   paragraphIsCentered?: boolean;
+  inBlock?: any;
+  id: string;
 }
 
-export interface ITextElements {
-  mg_tableclass?: string;
-  id: string;
-  inBlock?: any;
-  text?: string;
+export interface IParagraphs_agg {
+  count: number;
 }
 
-export interface IUnorderedLists {
-  mg_tableclass?: string;
+export interface ISections extends IMgTableClass {
+  enableFullScreenWidth?: boolean;
+  inContainer?: any;
+  components?: IComponents[];
+  componentOrder?: IComponentOrders[];
   id: string;
-  inBlock?: any;
-  items?: string[];
 }
 
-export interface INavigationGroups {
-  mg_tableclass?: string;
+export interface ISections_agg {
+  count: number;
+}
+
+export interface ITextElements extends IMgTableClass {
+  text?: string;
+  inBlock?: any;
   id: string;
-  links?: INavigationCards[];
 }
 
-export interface INavigationCards {
+export interface ITextElements_agg {
+  count: number;
+}
+
+export interface IUnorderedLists extends IMgTableClass {
+  items?: string[];
+  inBlock?: any;
   id: string;
-  title?: string;
-  description?: string;
-  url?: string;
-  urlLabel?: string;
-  urlIsExternal?: boolean;
-  displayedInNavigationGroup?: INavigationGroups[];
 }
 
-export interface IWebFetchPriorities {
+export interface IUnorderedLists_agg {
+  count: number;
+}
+
+export interface IWebFetchPriorities extends IMgTableClass {
   order?: number;
   name: string;
   label?: string;
@@ -198,3 +271,7 @@ export interface IWebFetchPriorities {
   definition?: string;
   children?: IWebFetchPriorities[];
 }
+
+export interface IWebFetchPriorities_agg {
+  count: number;
+}
diff --git a/apps/ui/app/pages/[schema]/pages/[page]/edit.vue b/apps/ui/app/pages/[schema]/pages/[page]/edit.vue
index 9364d39f807..dbb943c650a 100644
--- a/apps/ui/app/pages/[schema]/pages/[page]/edit.vue
+++ b/apps/ui/app/pages/[schema]/pages/[page]/edit.vue
@@ -22,7 +22,7 @@ import HtmlPreview from "../../../../../../tailwind-components/app/components/ed
 import {
   getPage,
   newDeveloperPage,
-} from "../../../../../../tailwind-components/app/utils/Pages";
+} from "../../../../../../tailwind-components/app/utils/cms";
 
 import { useSession } from "../../../../../../tailwind-components/app/composables/useSession";
 
diff --git a/apps/ui/app/pages/[schema]/pages/[page]/index.vue b/apps/ui/app/pages/[schema]/pages/[page]/index.vue
index 71568f4cbe0..ef42d9bcf2a 100644
--- a/apps/ui/app/pages/[schema]/pages/[page]/index.vue
+++ b/apps/ui/app/pages/[schema]/pages/[page]/index.vue
@@ -6,7 +6,7 @@ import Container from "../../../../../../tailwind-components/app/components/Cont
 import BreadCrumbs from "../../../../../../tailwind-components/app/components/BreadCrumbs.vue";
 import DeveloperPage from "../../../../../../tailwind-components/app/components/editor/HtmlPreview.vue";
 import ConfigurablePage from "../../../../../../tailwind-components/app/components/pages/ConfigurablePage.vue";
-import { getPage } from "../../../../../../tailwind-components/app/utils/Pages";
+import { getPage } from "../../../../../../tailwind-components/app/utils/cms";
 import type { Crumb } from "../../../../../../tailwind-components/types/types";
 import type { IConfigurablePages } from "../../../../../../tailwind-components/types/cms";
 
diff --git a/apps/ui/app/pages/[schema]/pages/index.vue b/apps/ui/app/pages/[schema]/pages/index.vue
index 7ce2839138b..35226d7509f 100644
--- a/apps/ui/app/pages/[schema]/pages/index.vue
+++ b/apps/ui/app/pages/[schema]/pages/index.vue
@@ -11,6 +11,10 @@ import Message from "../../../../../tailwind-components/app/components/Message.v
 import type { Crumb } from "../../../../../tailwind-components/types/types";
 import type { IContainers } from "../../../../../tailwind-components/types/cms";
 
+interface ICmsPage extends IContainers {
+  mg_tableclass: string;
+}
+
 const route = useRoute();
 const schema = Array.isArray(route.params.schema)
   ? route.params.schema[0]
@@ -19,7 +23,7 @@ const schema = Array.isArray(route.params.schema)
 useHead({ title: `Pages - ${schema} - Molgenis` });
 
 interface PagesResponse {
-  data: { Containers: IContainers[] };
+  data: { Containers: ICmsPage[] };
   error: Record<string, any>[];
 }