diff --git a/apps/directory/package.json b/apps/directory/package.json
index bb73d94455..fe92c1eaef 100644
--- a/apps/directory/package.json
+++ b/apps/directory/package.json
@@ -3,7 +3,6 @@
   "version": "0.0.1",
   "description": "BBMRI Directory app, for browsing collections and biobanks in EMX2",
   "main": "index.js",
-  "author": "Jelmer Veen <https://github.com/jelmerveen>",
   "license": "LGPL3",
   "private": true,
   "scripts": {
diff --git a/apps/directory/src/App.vue b/apps/directory/src/App.vue
index 148a03bd82..a076dc3624 100644
--- a/apps/directory/src/App.vue
+++ b/apps/directory/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <Molgenis v-model="session">
+  <Molgenis v-model="session" style="background-color: white">
     <template v-if="banner" #banner>
       <div v-html="banner"></div>
     </template>
@@ -44,7 +44,11 @@ watch(
       newQuery &&
       Object.keys(newQuery).length === 0
     ) {
-      createBookmark(filtersStore.filters, checkoutStore.selectedCollections);
+      createBookmark(
+        filtersStore.filters,
+        checkoutStore.selectedCollections,
+        checkoutStore.selectedServices
+      );
       applyBookmark(newQuery);
     }
 
diff --git a/apps/directory/src/components/Card.vue b/apps/directory/src/components/Card.vue
new file mode 100644
index 0000000000..8c0313e804
--- /dev/null
+++ b/apps/directory/src/components/Card.vue
@@ -0,0 +1,55 @@
+<template>
+  <article>
+    <section class="d-flex flex-column align-items-center">
+      <div class="d-flex flex-column h-100 align-self-stretch">
+        <header class="border-0 biobank-card-header p-1">
+          <slot name="header"></slot>
+        </header>
+
+        <Tabs :tabs="tabs" @update:active-tab="updateTab" />
+
+        <slot></slot>
+      </div>
+    </section>
+  </article>
+</template>
+
+<script setup lang="ts">
+import Tabs from "./Tabs.vue";
+
+defineProps<{
+  tabs: Record<
+    string,
+    { id: string; label: string; active: boolean; disabled: boolean }
+  >;
+}>();
+
+const emit = defineEmits(["update:activeTab"]);
+
+function updateTab(tab: string) {
+  emit("update:activeTab", tab);
+}
+</script>
+
+<style>
+article {
+  padding: 0;
+  position: relative;
+  height: 28rem;
+}
+
+article {
+  box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132),
+    0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
+}
+
+article section {
+  height: 100%;
+  width: 100%;
+}
+
+/* TODO put in theme */
+.biobank-card-header {
+  background-color: #efefef;
+}
+</style>
diff --git a/apps/directory/src/components/CardItem.vue b/apps/directory/src/components/CardItem.vue
new file mode 100644
index 0000000000..7eafd56c18
--- /dev/null
+++ b/apps/directory/src/components/CardItem.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="card-item mx-1">
+    <div class="ml-1 pt-2 d-flex">
+      <slot name="title"></slot>
+    </div>
+
+    <slot></slot>
+  </div>
+</template>
+
+<style>
+.card-item {
+  word-break: break-word;
+}
+
+.card-item th {
+  width: 25%;
+}
+</style>
diff --git a/apps/directory/src/components/CheckBox.vue b/apps/directory/src/components/CheckBox.vue
new file mode 100644
index 0000000000..bc1d8131ec
--- /dev/null
+++ b/apps/directory/src/components/CheckBox.vue
@@ -0,0 +1,24 @@
+<template>
+  <input
+    type="checkbox"
+    :id="id"
+    @change="emit('change', ($event.target as HTMLInputElement).checked)"
+    :checked="isChecked"
+    hidden
+  />
+  <label class="btn" :for="id">
+    <span v-show="!isChecked"><i class="fa-regular fa-lg fa-square"></i></span>
+    <span v-show="isChecked"
+      ><i class="fa-regular fa-lg fa-check-square"></i
+    ></span>
+  </label>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  id: string;
+  isChecked?: boolean;
+}>();
+
+const emit = defineEmits(["change"]);
+</script>
diff --git a/apps/directory/src/components/Tabs.vue b/apps/directory/src/components/Tabs.vue
new file mode 100644
index 0000000000..32c1f1bb90
--- /dev/null
+++ b/apps/directory/src/components/Tabs.vue
@@ -0,0 +1,26 @@
+<template>
+  <ul class="nav nav-tabs mb-2 mt-2 pl-2">
+    <li v-for="tab in Object.keys(tabs)" class="nav-item">
+      <button
+        type="button"
+        class="btn btn-link nav-link shadow-none"
+        :disabled="tabs[tab].disabled"
+        :class="{ active: tabs[tab].active }"
+        @click="() => $emit('update:activeTab', tab)"
+      >
+        {{ tabs[tab].label ?? tabs[tab].id }}
+      </button>
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  tabs: Record<
+    string,
+    { id: string; label: string; active: boolean; disabled: boolean }
+  >;
+}>();
+
+defineEmits(["update:activeTab"]);
+</script>
diff --git a/apps/directory/src/components/biobankcards-components/BiobankCard.vue b/apps/directory/src/components/biobankcards-components/BiobankCard.vue
index 1aaf5f1c24..b2bff5db00 100644
--- a/apps/directory/src/components/biobankcards-components/BiobankCard.vue
+++ b/apps/directory/src/components/biobankcards-components/BiobankCard.vue
@@ -1,313 +1,190 @@
 <template>
-  <article
+  <Card
+    class="biobank-card"
     :class="[
       {
         'border border-secondary': biobankInSelection,
         'back-side': showCollections,
       },
-      'biobank-card',
     ]"
+    :tabs="tabs"
+    @update:active-tab="changeTab"
   >
-    <section class="d-flex flex-column align-items-center">
-      <div class="d-flex flex-column h-100 align-self-stretch">
-        <header class="border-0 biobank-card-header p-1">
-          <h5 class="pt-1 pl-1 pr-1 mt-1">
-            <router-link :to="'/biobank/' + biobank.id" class="text-dark">
-              <span class="fa fa-server mr-2 text-primary" aria-hidden="true" />
-              <span class="biobank-name">{{ biobank.name }}</span>
-              <sup
-                v-if="hasBiobankQuality"
-                class="d-inline-block"
-                aria-hidden="true"
-              >
-                <info-popover
-                  faIcon="fa-regular fa-circle-check"
-                  textColor="text-success"
-                  class="ml-1 certificate-icon"
-                  popover-placement="bottom"
-                >
-                  <div
-                    class="popover-content"
-                    v-for="quality of biobankQualities"
-                    :key="quality.label"
-                  >
-                    <div v-if="quality.quality_standard">
-                      <div class="quality-standard-label">
-                        {{
-                          getQualityInfo(quality.quality_standard.name)?.label
-                        }}
-                      </div>
-                      <div class="quality-standard-definition">
-                        {{
-                          getQualityInfo(quality.quality_standard.name)
-                            ?.definition
-                        }}
-                      </div>
-                    </div>
-                  </div>
-                </info-popover>
-              </sup>
-            </router-link>
-          </h5>
-          <MatchesOn :viewmodel="biobank" />
-        </header>
-
-        <template v-if="!showCollections">
-          <div class="mb-1 shadow-sm" v-if="numberOfCollections">
-            <button
-              class="btn btn-link text-info pl-2"
-              @click.prevent="showCollections = true"
-            >
-              {{ uiText["card_collections_details"] }}
-            </button>
-          </div>
-          <div class="p-2 pt-1 biobank-section flex-grow-1">
-            <small>
-              <ViewGenerator :viewmodel="biobankcardViewmodel" />
-              <MatchesOn :viewmodel="biobank" />
-              <router-link
-                :to="'/biobank/' + biobank.id"
-                :title="`${biobank.name} details`"
-                class="text-info ml-1"
-              >
-                <span>More details</span>
-              </router-link>
-            </small>
-          </div>
-        </template>
-
-        <template v-else>
-          <div class="d-flex mb-1 shadow-sm">
-            <button
-              class="btn btn-link text-info pl-2"
-              @click.prevent="showCollections = false"
-            >
-              {{ uiText["card_biobank_details"] }}
-            </button>
-          </div>
-          <div class="collections-section flex-grow-1">
-            <div class="pl-2 pt-2 d-flex" v-if="numberOfCollections">
-              <h5>
-                {{
-                  `${numberOfCollections} collection${
-                    numberOfCollections === 1 ? "" : "s"
-                  } ${hasActiveFilters ? "found" : "available"}`
-                }}
-              </h5>
-              <collection-selector
-                v-if="numberOfCollections > 1"
-                class="text-right mr-1 ml-auto align-self-center"
-                :biobankData="biobank"
-                :collectionData="biobank.collections"
-                bookmark
-                iconOnly
-                multi
-              />
-            </div>
-            <hr class="mt-1" v-if="numberOfCollections" />
-            <div v-else class="pl-2">
-              {{
-                hasActiveFilters
-                  ? "No collections found with currently active filters"
-                  : "This biobank has no collections yet."
-              }}
-            </div>
-            <div
-              class="collection-items mx-1"
-              v-for="(collectionDetail, index) of biobank.collectionDetails"
-              :key="collectionDetail.id"
-            >
-              <div v-if="showCollections" class="mb-2">
-                <div class="pl-2 pt-2 d-flex">
-                  <router-link
-                    :to="'/collection/' + collectionDetail.id"
-                    title="Collection details"
-                    class="text-dark"
-                  >
-                    <span
-                      class="fa fa-server collection-icon fa-lg mr-2 text-primary"
-                      aria-hidden="true"
-                    />
-                    <span class="collection-name">
-                      {{ collectionDetail.name }}
-                    </span>
-                  </router-link>
-                  <div class="ml-auto">
-                    <collection-selector
-                      class="ml-auto"
-                      :biobankData="biobank"
-                      :collectionData="collectionDetail"
-                      iconOnly
-                      bookmark
-                    />
-                  </div>
-                </div>
-
-                <small>
-                  <ViewGenerator
-                    class="p-1"
-                    :viewmodel="collectionViewmodel(collectionDetail)"
-                  />
-
-                  <MatchesOn :viewmodel="collectionDetail" class="px-1 ml-1" />
-                  <router-link
-                    :to="'/collection/' + collectionDetail.id"
-                    :title="`${collectionDetail.name} details`"
-                    class="text-info ml-1 pl-1"
-                  >
-                    <span>More details</span>
-                  </router-link>
-                </small>
-                <hr v-if="index != lastCollection" />
-                <div v-else class="pb-3"></div>
-              </div>
-            </div>
-          </div>
-        </template>
-      </div>
-    </section>
-  </article>
+    <template #header>
+      <HeaderSection
+        :biobank="biobank"
+        :hasBiobankQuality="hasBiobankQuality"
+        :qualityInfo="qualityInfo"
+      />
+    </template>
+
+    <CollectionsSection
+      v-if="tabs['Collections'].active"
+      class="px-3 py-1"
+      :biobank="biobank"
+      :has-active-filters="filtersStore.hasActiveFilters"
+    />
+
+    <ServiceSection
+      v-else-if="tabs['Services'].active"
+      class="px-3 py-1"
+      :services="biobank.services"
+      :selected-services="selectedServices"
+      @update:addServices="handleAddServices"
+      @update:remove-services="handleRemoveServices"
+    ></ServiceSection>
+
+    <OrganizationSection
+      v-else-if="tabs['Organization'].active"
+      class="px-3 py-1"
+      :biobank="biobank"
+    />
+  </Card>
 </template>
 
-<script lang="ts">
-import {
-  getBiobankDetails,
-  getCollectionDetails,
-} from "../../functions/viewmodelMapper";
-import ViewGenerator from "../generators/ViewGenerator.vue";
-import CollectionSelector from "../checkout-components/CollectionSelector.vue";
-//@ts-ignore
-import { InfoPopover } from "molgenis-components";
-import MatchesOn from "../biobankcards-components/MatchesOn.vue";
+<script setup lang="ts">
+import { getBiobankDetails } from "../../functions/viewmodelMapper";
 import { useSettingsStore } from "../../stores/settingsStore";
 import { useQualitiesStore } from "../../stores/qualitiesStore";
-import { useCheckoutStore } from "../../stores/checkoutStore";
 import { useFiltersStore } from "../../stores/filtersStore";
+import HeaderSection from "./HeaderSection.vue";
+import OrganizationSection from "./OrganizationSection.vue";
+import Card from "../Card.vue";
+import { computed, onBeforeMount, ref } from "vue";
+import { IBiobanks } from "../../interfaces/directory";
+import ServiceSection from "./ServiceSection.vue";
+import CollectionsSection from "./CollectionsSection.vue";
+import { useCheckoutStore } from "../../stores/checkoutStore";
 
-export default {
-  setup() {
-    const settingsStore = useSettingsStore();
-    const qualitiesStore = useQualitiesStore();
-    const checkoutStore = useCheckoutStore();
-    const filtersStore = useFiltersStore();
-    return { settingsStore, qualitiesStore, checkoutStore, filtersStore };
-  },
-  components: {
-    ViewGenerator,
-    CollectionSelector,
-    InfoPopover,
-    MatchesOn,
-  },
-  props: {
-    fullSize: {
-      type: Boolean,
-      default: () => false,
-    },
-    biobank: {
-      type: [Object],
-      required: true,
-    },
-  },
-  data() {
-    return {
-      biobankSelected: false,
-      showCollections: false,
-    };
-  },
-  methods: {
-    getCollectionDetails,
-    collectionViewmodel(collectiondetails: Record<string, any>) {
-      const attributes = [];
-      for (const item of this.settingsStore.config.collectionColumns) {
-        if (item.showOnBiobankCard) {
-          attributes.push(
-            collectiondetails.viewmodel.attributes.find(
-              (vm: Record<string, any>) => vm.label === item.label
-            )
-          );
-        }
-      }
-      return { attributes };
-    },
-    getQualityInfo(key: string) {
-      return this.qualityStandardsDictionary[key];
-    },
-  },
-  computed: {
-    hasActiveFilters() {
-      return this.filtersStore.hasActiveFilters;
-    },
-    uiText() {
-      return this.settingsStore.uiText;
-    },
-    lastCollection() {
-      return this.biobank.collectionDetails.length - 1;
-    },
-    numberOfCollections() {
-      return this.biobank.collections ? this.biobank.collections.length : 0;
-    },
-    biobankcardViewmodel() {
-      const { viewmodel } = getBiobankDetails(this.biobank);
-      const attributes = [];
-
-      for (const item of this.settingsStore.config.biobankColumns) {
-        if (item.showOnBiobankCard) {
-          attributes.push(
-            viewmodel.attributes.find(
-              (vm: Record<string, any>) => vm.label === item.label
-            )
-          );
-        }
-      }
-      return { attributes };
-    },
-    hasBiobankQuality() {
-      return this.biobankcardViewmodel.attributes.some(
-        (attr) => attr.type === "quality" && attr.value && attr.value.length
-      );
-    },
-    biobankQualities() {
-      return this.biobankcardViewmodel.attributes.find(
-        (attr) => attr.type === "quality"
-      ).value;
+const settingsStore = useSettingsStore();
+const qualitiesStore = useQualitiesStore();
+const checkoutStore = useCheckoutStore();
+const filtersStore = useFiltersStore();
+
+const props = withDefaults(
+  defineProps<{
+    biobank: IBiobanks;
+    fullSize?: boolean;
+  }>(),
+  {
+    fullSize: false,
+  }
+);
+
+type IBiobankCardTab = "Collections" | "Services" | "Organization";
+const showCollections = ref(false);
+const activeTab = ref<IBiobankCardTab>("Collections");
+const tabs = computed(() => {
+  return {
+    Collections: {
+      id: "Collections",
+      label: "Collections",
+      active: activeTab.value === "Collections",
+      disabled: props.biobank?.collections?.length === 0,
     },
-    qualityStandardsDictionary(): Record<string, any> {
-      return this.qualitiesStore.qualityStandardsDictionary;
+    Services: {
+      id: "Services",
+      label: "Services",
+      active: activeTab.value === "Services",
+      disabled: props.biobank?.services?.length === 0,
     },
-    biobankInSelection(): boolean {
-      const biobankIdentifier: string = this.biobank.label || this.biobank.name;
-      return (
-        //@ts-ignore can be removed once checkoutStore is ts
-        this.checkoutStore.selectedCollections[biobankIdentifier] !== undefined
-      );
+    Organization: {
+      id: "Organization",
+      label: "Organization",
+      active: activeTab.value === "Organization",
+      disabled: false,
     },
-  },
-  async beforeMount() {
-    await this.qualitiesStore.getQualityStandardInformation();
-  },
-  mounted() {
-    this.showCollections = this.settingsStore.config.biobankCardShowCollections;
-  },
-};
-</script>
+  };
+});
 
-<style scoped>
-.collection-icon {
-  position: relative;
-  top: 0.25em;
-  line-height: unset;
-  clip-path: inset(0% 0% 50% 0%);
+onBeforeMount(async () => {
+  await qualitiesStore.getQualityStandardInformation();
+  showCollections.value = settingsStore.config.biobankCardShowCollections;
+});
+
+function changeTab(tab: IBiobankCardTab) {
+  activeTab.value = tab;
 }
 
-.certificate-icon {
-  font-size: 0.8rem;
+const selectedServices = computed(() => {
+  return (
+    checkoutStore.selectedServices[props.biobank.name]?.map(
+      (selectedService) => selectedService.value
+    ) ?? []
+  );
+});
+
+function handleAddServices(selectedServiceIds: string[]) {
+  const selectedServices =
+    props.biobank.services?.filter((service) =>
+      selectedServiceIds.includes(service.id)
+    ) ?? [];
+  const servicesLabelValuePair = selectedServices.map((service) => {
+    return { label: service.name, value: service.id };
+  });
+
+  checkoutStore.addServicesToSelection(
+    props.biobank,
+    servicesLabelValuePair,
+    true
+  );
 }
-</style>
+
+function handleRemoveServices(selectedServiceIds: string[]) {
+  checkoutStore.removeServicesFromSelection(
+    props.biobank,
+    selectedServiceIds,
+    true
+  );
+}
+
+const qualityInfo = computed(() => {
+  return biobankcardViewmodel.value.attributes
+    .find((attr) => attr.type === "quality")
+    .value.map((quality: Record<string, any>) => {
+      return (qualitiesStore.qualityStandardsDictionary as Record<string, any>)[
+        quality.quality_standard.name
+      ];
+    });
+});
+
+const biobankcardViewmodel = computed(() => {
+  const { viewmodel } = getBiobankDetails(props.biobank);
+  const attributes = [];
+
+  for (const item of settingsStore.config.biobankColumns) {
+    if (item.showOnBiobankCard) {
+      attributes.push(
+        viewmodel.attributes.find(
+          (vm: Record<string, any>) => vm.label === item.label
+        )
+      );
+    }
+  }
+  return { attributes };
+});
+
+const hasBiobankQuality = computed(() => {
+  return biobankcardViewmodel.value.attributes.some(
+    (attr) => attr.type === "quality" && attr.value && attr.value.length
+  );
+});
+
+const biobankInSelection = computed(() => {
+  const biobankIdentifier: string = props.biobank.name;
+  return (
+    checkoutStore.selectedCollections[biobankIdentifier] !== undefined ||
+    checkoutStore.selectedServices[biobankIdentifier] !== undefined
+  );
+});
+</script>
 
 <style scoped>
 .collection-icon {
   position: relative;
   top: 0.25em;
+  line-height: unset;
+
   clip-path: inset(-15% 0% 75% 0%);
 }
 
@@ -326,14 +203,6 @@ export default {
   overflow: auto;
 }
 
-.collection-items {
-  word-break: break-word;
-}
-
-.collection-items th {
-  width: 25%;
-}
-
 .biobank-card {
   width: 25rem;
 }
@@ -346,11 +215,6 @@ export default {
   justify-content: center;
 }
 
-/* TODO put in theme */
-.biobank-card-header {
-  background-color: #efefef;
-}
-
 article {
   padding: 1.5rem;
 }
@@ -358,6 +222,7 @@ article {
 article footer {
   padding: 1.5rem 0 0 0;
 }
+
 article {
   padding: 0;
   position: relative;
@@ -378,6 +243,7 @@ article section {
   list-style-type: none;
   margin-left: -2.5rem;
 }
+
 .right-content-list:not(:last-child) {
   margin-bottom: 1.5rem;
 }
diff --git a/apps/directory/src/components/biobankcards-components/CollectionsSection.vue b/apps/directory/src/components/biobankcards-components/CollectionsSection.vue
new file mode 100644
index 0000000000..e7e541c0a6
--- /dev/null
+++ b/apps/directory/src/components/biobankcards-components/CollectionsSection.vue
@@ -0,0 +1,108 @@
+<template>
+  <div class="collections-section flex-grow-1">
+    <div class="pl-2 pt-2 d-flex" v-if="numberOfCollections > 1">
+      <h5 v-if="numberOfCollections > 1" class="font-weight-light">
+        {{
+          `${numberOfCollections} collections ${
+            hasActiveFilters ? "found" : "available"
+          }`
+        }}
+      </h5>
+      <collection-selector
+        class="text-right mr-1 ml-auto align-self-center"
+        :biobankData="biobank"
+        :collectionData="biobank.collections"
+        bookmark
+        iconOnly
+        multi
+      />
+    </div>
+
+    <div v-if="!numberOfCollections" class="pl-2">
+      {{
+        hasActiveFilters
+          ? "No collections found with currently active filters"
+          : "This biobank has no collections yet."
+      }}
+    </div>
+
+    <CardItem v-for="(collectionDetail, index) of biobank.collectionDetails">
+      <template #title>
+        <router-link
+          :to="'/collection/' + collectionDetail.id"
+          title="Collection details"
+          class="text-dark"
+        >
+          <h5>
+            {{ collectionDetail.name }}
+          </h5>
+        </router-link>
+        <div class="ml-auto">
+          <collection-selector
+            class="ml-auto"
+            :biobankData="biobank"
+            :collectionData="collectionDetail"
+            iconOnly
+            bookmark
+          />
+        </div>
+      </template>
+
+      <small>
+        <ViewGenerator
+          class="p-1"
+          :viewmodel="collectionViewmodel(collectionDetail)"
+        />
+
+        <MatchesOn :viewmodel="collectionDetail" class="px-1 ml-1" />
+        <router-link
+          :to="'/collection/' + collectionDetail.id"
+          :title="`${collectionDetail.name} details`"
+          class="text-info ml-1 pl-1"
+        >
+          <span>More details</span>
+        </router-link>
+      </small>
+      <hr v-if="index != biobank.collectionDetails.length - 1" />
+      <div v-else class="pb-3"></div>
+    </CardItem>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { IBiobanks } from "../../interfaces/directory";
+import { useSettingsStore } from "../../stores/settingsStore";
+import { computed } from "vue";
+import CollectionSelector from "../../components/checkout-components/CollectionSelector.vue";
+import ViewGenerator from "../generators/ViewGenerator.vue";
+import MatchesOn from "./MatchesOn.vue";
+import CardItem from "../CardItem.vue";
+
+const props = withDefaults(
+  defineProps<{
+    biobank: IBiobanks;
+    hasActiveFilters?: boolean;
+  }>(),
+  {
+    hasActiveFilters: false,
+  }
+);
+
+const numberOfCollections = computed(() =>
+  props.biobank.collections ? props.biobank.collections.length : 0
+);
+
+function collectionViewmodel(collectiondetails: Record<string, any>) {
+  const attributes = [];
+  for (const item of useSettingsStore().config.collectionColumns) {
+    if (item.showOnBiobankCard) {
+      attributes.push(
+        collectiondetails.viewmodel.attributes.find(
+          (vm: Record<string, any>) => vm.label === item.label
+        )
+      );
+    }
+  }
+  return { attributes };
+}
+</script>
diff --git a/apps/directory/src/components/biobankcards-components/HeaderSection.vue b/apps/directory/src/components/biobankcards-components/HeaderSection.vue
new file mode 100644
index 0000000000..c5ce35f28a
--- /dev/null
+++ b/apps/directory/src/components/biobankcards-components/HeaderSection.vue
@@ -0,0 +1,43 @@
+<template>
+  <h5 class="pt-1 pl-1 pr-1 mt-1">
+    <router-link :to="'/biobank/' + biobank.id" class="text-dark">
+      <span class="fa fa-server mr-2 text-primary" aria-hidden="true" />
+      <span class="biobank-name">{{ biobank.name }}</span>
+      <span v-if="hasBiobankQuality" class="d-inline-block" aria-hidden="true">
+        <InfoPopover
+          faIcon="fa-regular fa-circle-check"
+          textColor="text-success"
+          class="ml-2 certificate-icon"
+          popover-placement="bottom"
+        >
+          <div class="popover-content" v-for="info of qualityInfo">
+            <template v-if="info">
+              <div class="quality-standard-label">
+                {{ info.label }}
+              </div>
+              <div class="quality-standard-definition">
+                {{ info.definition }}
+              </div>
+            </template>
+          </div>
+        </InfoPopover>
+      </span>
+    </router-link>
+  </h5>
+  <MatchesOn :viewmodel="biobank" />
+</template>
+
+<script setup lang="ts">
+import MatchesOn from "../biobankcards-components/MatchesOn.vue";
+//@ts-ignore
+import { InfoPopover } from "molgenis-components";
+
+defineProps<{
+  biobank: {
+    id: string;
+    name: string;
+  };
+  hasBiobankQuality: boolean;
+  qualityInfo: { label: string; definition: string }[];
+}>();
+</script>
diff --git a/apps/directory/src/components/biobankcards-components/OrganizationSection.vue b/apps/directory/src/components/biobankcards-components/OrganizationSection.vue
new file mode 100644
index 0000000000..0e34694be7
--- /dev/null
+++ b/apps/directory/src/components/biobankcards-components/OrganizationSection.vue
@@ -0,0 +1,48 @@
+<template>
+  <CardItem>
+    <template #title>
+      <h5>{{ biobank.name }}</h5>
+    </template>
+
+    <small>
+      <ViewGenerator :viewmodel="{ attributes }" />
+      <MatchesOn :viewmodel="biobank" />
+      <router-link
+        :to="'/biobank/' + biobank.id"
+        :title="`${biobank.name} details`"
+        class="text-info ml-1"
+      >
+        <span>More details</span>
+      </router-link>
+    </small>
+  </CardItem>
+</template>
+
+<script setup lang="ts">
+import { getViewmodel } from "../../functions/viewmodelMapper";
+import { IBiobanks } from "../../interfaces/directory";
+import { useSettingsStore } from "../../stores/settingsStore";
+import CardItem from "../CardItem.vue";
+import ViewGenerator from "../generators/ViewGenerator.vue";
+import MatchesOn from "./MatchesOn.vue";
+import { computed } from "vue";
+
+const props = defineProps<{
+  biobank: IBiobanks;
+}>();
+
+const attributes = computed(() => {
+  const viewmodel = getViewmodel(
+    props.biobank,
+    useSettingsStore().config.biobankColumns
+  );
+  const columns = useSettingsStore().config.biobankColumns;
+  return columns
+    .filter((item) => item.showOnBiobankCard)
+    .map((item) =>
+      viewmodel.attributes.find(
+        (vm: { label: string | undefined }) => vm.label === item.label
+      )
+    );
+});
+</script>
diff --git a/apps/directory/src/components/biobankcards-components/ResultHeader.vue b/apps/directory/src/components/biobankcards-components/ResultHeader.vue
index 0b365e2772..3b668e1fb0 100644
--- a/apps/directory/src/components/biobankcards-components/ResultHeader.vue
+++ b/apps/directory/src/components/biobankcards-components/ResultHeader.vue
@@ -1,6 +1,6 @@
 <template>
-  <small class="d-inline">
-    <table class="text-right">
+  <small>
+    <table class="table table-sm table-borderless">
       <thead>
         <tr>
           <th colspan="2">Search results</th>
@@ -8,16 +8,20 @@
       </thead>
       <tbody>
         <tr>
-          <td class="pr-1">Organisations:</td>
-          <td>{{ biobanksStore.biobankCardsBiobankCount }}</td>
+          <td class="text-nowrap">
+            Organisation(s): {{ biobanksStore.biobankCardsBiobankCount }}
+          </td>
+          <td class="text-nowrap">
+            Collection(s): {{ biobanksStore.biobankCardsCollectionCount }}
+          </td>
         </tr>
         <tr>
-          <td class="pr-1">Collection(s):</td>
-          <td>{{ biobanksStore.biobankCardsCollectionCount }}</td>
-        </tr>
-        <tr v-if="biobanksStore.biobankCardsSubcollectionCount > 0">
-          <td class="pr-1">Subcollection(s):</td>
-          <td>{{ biobanksStore.biobankCardsSubcollectionCount }}</td>
+          <td class="text-nowrap">
+            Service(s): {{ biobanksStore.biobankCardsServicesCount }}
+          </td>
+          <td class="text-nowrap">
+            Subcollection(s): {{ biobanksStore.biobankCardsSubcollectionCount }}
+          </td>
         </tr>
       </tbody>
     </table>
diff --git a/apps/directory/src/components/biobankcards-components/Service.vue b/apps/directory/src/components/biobankcards-components/Service.vue
new file mode 100644
index 0000000000..c79db283a2
--- /dev/null
+++ b/apps/directory/src/components/biobankcards-components/Service.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="d-flex">
+    <router-link
+      :to="'/service/' + service.id"
+      title="Service details"
+      class="text-dark"
+    >
+      <h5>
+        {{ service.name }}
+      </h5>
+    </router-link>
+    <div class="ml-auto">
+      <CheckBox
+        :id="service.id"
+        :is-checked="isSelected"
+        @change="handleCheckBox"
+      />
+    </div>
+  </div>
+  <div>
+    <small>
+      <table class="layout-table w-100">
+        <tbody>
+          <tr>
+            <th scope="row" class="pr-1 align-top text-nowrap">Type:</th>
+            <td>
+              <span>{{
+                service.serviceTypes.map((type) => type.label).join(", ")
+              }}</span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <RouterLink
+        :to="'/service/' + service.id"
+        title="Service details"
+        class="text-info"
+        >More details
+      </RouterLink>
+    </small>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { IServices } from "../../interfaces/directory";
+import CheckBox from "../CheckBox.vue";
+
+const props = withDefaults(
+  defineProps<{
+    service: IServices;
+    isSelected?: boolean;
+  }>(),
+  {
+    isSelected: false,
+  }
+);
+
+const emit = defineEmits(["update:isAdded", "update:isRemoved"]);
+
+function handleCheckBox(isChecked: boolean) {
+  isChecked ? emit("update:isAdded") : emit("update:isRemoved");
+}
+</script>
diff --git a/apps/directory/src/components/biobankcards-components/ServiceSection.vue b/apps/directory/src/components/biobankcards-components/ServiceSection.vue
new file mode 100644
index 0000000000..07cc3a9e20
--- /dev/null
+++ b/apps/directory/src/components/biobankcards-components/ServiceSection.vue
@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <CardItem v-if="services.length > 1">
+      <div class="d-flex">
+        <router-link
+          :to="'/service/'"
+          title="Service details"
+          class="text-dark"
+        >
+          <h5 class="font-weight-light">
+            {{ services.length }} collections available
+          </h5>
+        </router-link>
+        <div class="ml-auto">
+          <CheckBox
+            id="ds"
+            :is-checked="isAllSelected"
+            @change="handleSelectAll"
+          />
+        </div>
+      </div>
+    </CardItem>
+
+    <CardItem v-for="(service, index) in services">
+      <Service
+        :service="service"
+        :is-selected="selectedServices?.includes(service.id)"
+        @update:is-added="() => addService(service.id)"
+        @update:is-removed="() => removeService(service.id)"
+      />
+      <hr v-if="index != services.length - 1" />
+      <div v-else class="pb-3"></div>
+    </CardItem>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { IServices } from "../../interfaces/directory";
+import CardItem from "../CardItem.vue";
+import CheckBox from "../CheckBox.vue";
+import Service from "./Service.vue";
+
+const props = withDefaults(
+  defineProps<{
+    services?: IServices[];
+    selectedServices?: string[];
+  }>(),
+  {
+    services: () => [],
+    selectedServices: () => [],
+  }
+);
+
+const emit = defineEmits(["update:addServices", "update:removeServices"]);
+
+function addService(serviceId: string) {
+  emit("update:addServices", [serviceId]);
+}
+
+function removeService(serviceId: string) {
+  emit("update:removeServices", [serviceId]);
+}
+
+const isAllSelected = computed(
+  () =>
+    props.services.length > 0 &&
+    props.services.length === props.selectedServices.length
+);
+
+function handleSelectAll(isChecked: boolean) {
+  if (isChecked) {
+    emit(
+      "update:addServices",
+      props.services.map((service) => service.id)
+    );
+  } else {
+    emit(
+      "update:removeServices",
+      props.services.map((service) => service.id)
+    );
+  }
+}
+</script>
diff --git a/apps/directory/src/components/cart/CartItem.vue b/apps/directory/src/components/cart/CartItem.vue
new file mode 100644
index 0000000000..c5368b2fe2
--- /dev/null
+++ b/apps/directory/src/components/cart/CartItem.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="card-body d-flex border-bottom">
+    <div>
+      <span
+        v-if="isNonCommercial"
+        class="fa-brands fa-creative-commons-nc-eu text-danger non-commercial mr-2"
+        title="Not available for commercial use"
+      ></span>
+
+      <span> {{ item.label }}</span>
+    </div>
+    <div class="pl-3 ml-auto" @click="$emit('removeItemFromCart', item.value)">
+      <span class="fa fa-times text-bold remove-item" title="Remove"></span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.remove-item:hover {
+  cursor: pointer;
+}
+</style>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    item: { label: string; value: string };
+    isNonCommercial?: boolean;
+  }>(),
+  {
+    isNonCommercial: false,
+  }
+);
+
+const emit = defineEmits(["removeItemFromCart"]);
+</script>
diff --git a/apps/directory/src/components/cart/NegotiatorSelection.vue b/apps/directory/src/components/cart/NegotiatorSelection.vue
new file mode 100644
index 0000000000..b0ab3fa964
--- /dev/null
+++ b/apps/directory/src/components/cart/NegotiatorSelection.vue
@@ -0,0 +1,257 @@
+<template>
+  <SimpleModal :open="modelValue" :bodyClass="'w-50'">
+    <template v-if="selectionCount > 0 && !loading">
+      <TabsSection
+        :tabs="tabs"
+        :active-tab="activeTab"
+        @update:active-tab="changeTab"
+      />
+      <div
+        class="card mb-3 border"
+        v-if="activeTab === 'Collections' && selectionCount > 0"
+        v-for="(collections, biobankName) in selectedCollections"
+      >
+        <div class="card-header font-weight-bold">
+          {{ biobankName }}
+        </div>
+
+        <CartItem
+          v-for="collection in collections"
+          :item="collection"
+          :isNonCommercial="isNonCommercialCollection(collection.value)"
+          @removeItemFromCart="
+            removeCollection({ name: biobankName }, collection.value)
+          "
+        />
+      </div>
+      <div
+        class="card mb-3 border"
+        v-if="
+          activeTab === 'Services' && Object.keys(selectedServices).length > 0
+        "
+        v-for="(services, biobankName) in selectedServices"
+      >
+        <div class="card-header font-weight-bold">
+          {{ biobankName }}
+        </div>
+        <CartItem
+          v-for="service in services"
+          :item="service"
+          @removeItemFromCart="
+            checkoutStore.removeServicesFromSelection(
+              { name: biobankName },
+              [service.value],
+              bookmark
+            )
+          "
+        />
+      </div>
+    </template>
+
+    <template v-else>
+      <p class="py-3 pl-1">
+        You haven't selected any collections or services yet.
+      </p>
+    </template>
+
+    <template v-if="errorMessage">
+      <div class="alert alert-danger" role="alert">
+        {{ errorMessage }}
+      </div>
+    </template>
+
+    <template v-slot:modal-footer>
+      <div class="bg-primary d-flex align-items-center p-2">
+        <button class="btn btn-dark mr-auto" @click="removeAll">
+          {{ uiText["remove_all"] }}
+        </button>
+        <div>
+          <span class="text-white font-weight-bold d-block">{{
+            modalFooterText
+          }}</span>
+          <span
+            class="text-white"
+            v-if="!loading && nSelectedNonCommercialCollections > 0"
+          >
+            <span
+              title="Not available for commercial use"
+              class="text-white non-commercial mr-1 fa-brands fa-creative-commons-nc-eu"
+            ></span>
+            {{ nSelectedNonCommercialCollections }} are non-commercial only
+          </span>
+        </div>
+        <div class="ml-auto">
+          <button
+            class="btn btn-dark mr-2"
+            @click="$emit('update:modelValue', false)"
+          >
+            {{ uiText["close"] }}
+          </button>
+          <button
+            :disabled="selectionCount === 0"
+            class="btn btn-secondary ml-auto"
+            @click="sendRequest"
+          >
+            {{ uiText["send_to_negotiator"] }}
+          </button>
+        </div>
+      </div>
+    </template>
+  </SimpleModal>
+</template>
+
+<script setup lang="ts">
+import { useCheckoutStore } from "../../stores/checkoutStore";
+import { useSettingsStore } from "../../stores/settingsStore";
+// @ts-ignore
+import { SimpleModal } from "molgenis-components";
+import { computed, ref, watch } from "vue";
+import { IBiobankIdentifier } from "../../interfaces/interfaces";
+import TabsSection from "../Tabs.vue";
+import QueryEMX2 from "../../../../molgenis-components/src/queryEmx2/queryEmx2";
+import CartItem from "./CartItem.vue";
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean;
+    bookmark: boolean;
+  }>(),
+  {
+    bookmark: true,
+  }
+);
+
+// make sure the active tab is always the one with the non empty items
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (newValue) {
+      activeTab.value =
+        checkoutStore.collectionSelectionCount > 0 ? "Collections" : "Services";
+    }
+  }
+);
+
+type ICardTab = "Collections" | "Services";
+
+const settingsStore = useSettingsStore();
+const checkoutStore = useCheckoutStore();
+const graphqlEndpoint = settingsStore.config.graphqlEndpoint;
+
+const tabs = computed(() => {
+  return {
+    Collections: {
+      id: "Collections",
+      label: `Collections (${checkoutStore.collectionSelectionCount})`,
+      active: activeTab.value === "Collections",
+      disabled: checkoutStore.collectionSelectionCount === 0,
+    },
+    Services: {
+      id: "Services",
+      label: `Services (${checkoutStore.serviceSelectionCount})`,
+      active: activeTab.value === "Services",
+      disabled: checkoutStore.serviceSelectionCount === 0,
+    },
+  };
+});
+
+const activeTab = ref<ICardTab>(
+  checkoutStore.collectionSelectionCount > 0 ? "Collections" : "Services"
+);
+
+const commercialAvailableCollections = ref<string[]>([]);
+
+const loading = ref(true);
+
+new QueryEMX2(graphqlEndpoint)
+  .table("Collections")
+  .select("id")
+  .where("commercial_use")
+  .equals(true)
+  .execute()
+  .then((response) => {
+    const collectionsResponse = response as { Collections: { id: string }[] };
+    if (
+      collectionsResponse.Collections &&
+      collectionsResponse.Collections.length
+    ) {
+      commercialAvailableCollections.value =
+        collectionsResponse.Collections.map((collection) => collection.id);
+      loading.value = false;
+    }
+  });
+
+const emit = defineEmits(["update:modelValue"]);
+
+const errorMessage = ref(""); // New reactive error state
+
+function changeTab(tab: ICardTab) {
+  activeTab.value = tab;
+}
+
+function isNonCommercialCollection(collectionId: string) {
+  const isCommercial = commercialAvailableCollections.value.find(
+    (colId) => colId === collectionId
+  );
+
+  return !isCommercial;
+}
+
+function removeCollection(biobank: IBiobankIdentifier, collectionId: string) {
+  checkoutStore.removeCollectionsFromSelection(
+    biobank,
+    [collectionId],
+    props.bookmark
+  );
+}
+
+function removeAll() {
+  checkoutStore.removeAllFromSelection(props.bookmark);
+  emit("update:modelValue", false);
+}
+
+async function sendRequest() {
+  errorMessage.value = "";
+  try {
+    await checkoutStore.sendToNegotiator();
+    emit("update:modelValue", false);
+  } catch (err) {
+    console.info("Negotiator is unavailable. Please try again later.");
+    errorMessage.value = "Negotiator is unavailable. Please try again later.";
+  }
+}
+
+const uiText = computed(() => settingsStore.uiText);
+
+const selectionCount = computed(
+  () =>
+    checkoutStore.collectionSelectionCount + checkoutStore.serviceSelectionCount
+);
+
+const modalFooterText = computed(
+  () => `${selectionCount.value} item(s) selected`
+);
+
+const selectedCollections = computed(() => checkoutStore.selectedCollections);
+
+const selectedServices = computed(() => checkoutStore.selectedServices);
+
+const nSelectedNonCommercialCollections = computed(() => {
+  let allCollectionIds: string[] = [];
+  for (const biobank in selectedCollections.value) {
+    allCollectionIds = allCollectionIds.concat(
+      selectedCollections.value[biobank].map((col) => col.value)
+    );
+  }
+  const nonCommercialCollections = allCollectionIds.filter(
+    (col: string) => !commercialAvailableCollections.value.includes(col)
+  );
+  return nonCommercialCollections.length;
+});
+</script>
+
+<style scoped>
+.cart-selection > div:last-child {
+  border: none !important;
+}
+</style>
diff --git a/apps/directory/src/components/checkout-components/CheckOut.vue b/apps/directory/src/components/checkout-components/CheckOut.vue
index 20d1a6688a..c3561b62cb 100644
--- a/apps/directory/src/components/checkout-components/CheckOut.vue
+++ b/apps/directory/src/components/checkout-components/CheckOut.vue
@@ -6,53 +6,41 @@
       :disabled="disableButton"
     >
       <span>{{ uiText["request"] }}</span
-      ><span class="badge badge-light ml-2">
-        {{ collectionSelectionCount }}</span
-      >
+      ><span class="badge badge-light ml-2"> {{ nItemsInCart }}</span>
     </button>
-    <negotiator-selection v-model="showCart" :bookmark="bookmark" />
+    <NegotiatorSelection v-model="showCart" :bookmark="bookmark" />
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
+import { computed, ref } from "vue";
 import { useCheckoutStore } from "../../stores/checkoutStore";
 import { useSettingsStore } from "../../stores/settingsStore";
-import NegotiatorSelection from "../popovers/NegotiatorSelection.vue";
+import NegotiatorSelection from "../cart/NegotiatorSelection.vue";
 
-export default {
-  setup() {
-    const settingsStore = useSettingsStore();
-    const checkoutStore = useCheckoutStore();
-    return { settingsStore, checkoutStore };
-  },
-  components: {
-    NegotiatorSelection,
-  },
-  props: {
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: () => false,
-    },
-    bookmark: {
-      type: Boolean,
-      required: false,
-      default: () => true,
-    },
-  },
-  computed: {
-    uiText() {
-      return this.settingsStore.uiText;
-    },
-    collectionSelectionCount() {
-      return this.checkoutStore.collectionSelectionCount;
-    },
-    disableButton() {
-      return this.disabled || this.collectionSelectionCount === 0;
-    },
-  },
-  data: () => ({
-    showCart: false,
-  }),
-};
+const settingsStore = useSettingsStore();
+const checkoutStore = useCheckoutStore();
+
+const props = withDefaults(
+  defineProps<{
+    disabled?: boolean;
+    bookmark?: boolean;
+  }>(),
+  {
+    disabled: false,
+    bookmark: false,
+  }
+);
+
+const showCart = ref(false);
+
+const uiText = computed(() => settingsStore.uiText);
+const nItemsInCart = computed(
+  () =>
+    checkoutStore.collectionSelectionCount + checkoutStore.serviceSelectionCount
+);
+
+const disableButton = computed(
+  () => props.disabled || nItemsInCart.value === 0
+);
 </script>
diff --git a/apps/directory/src/components/checkout-components/CollectionSelector.vue b/apps/directory/src/components/checkout-components/CollectionSelector.vue
index fe32080c96..fad4b040ab 100644
--- a/apps/directory/src/components/checkout-components/CollectionSelector.vue
+++ b/apps/directory/src/components/checkout-components/CollectionSelector.vue
@@ -91,16 +91,21 @@ export default {
   methods: {
     handleCollectionStatus(event) {
       const { checked } = event.target;
-      const collectionData = {
-        biobank: this.biobankData,
-        collections: JSON.parse(JSON.stringify(this.collections)),
-        bookmark: this.bookmark,
-      };
-
       if (checked) {
-        this.checkoutStore.addCollectionsToSelection(collectionData);
+        this.checkoutStore.addCollectionsToSelection(
+          this.biobankData,
+          this.collections.map((collection) => ({
+            label: collection.label,
+            value: collection.value,
+          })),
+          this.bookmark
+        );
       } else {
-        this.checkoutStore.removeCollectionsFromSelection(collectionData);
+        this.checkoutStore.removeCollectionsFromSelection(
+          { name: this.biobankData.name },
+          this.collections.map((collection) => collection.value),
+          this.bookmark
+        );
       }
     },
   },
diff --git a/apps/directory/src/components/generators/ViewGenerator.vue b/apps/directory/src/components/generators/ViewGenerator.vue
index 38930c0f5b..6dab70382b 100644
--- a/apps/directory/src/components/generators/ViewGenerator.vue
+++ b/apps/directory/src/components/generators/ViewGenerator.vue
@@ -1,12 +1,14 @@
 <template>
   <div>
     <table class="layout-table w-100">
-      <component
-        v-for="attribute in attributes"
-        :is="component(attribute.type)"
-        :attribute="attribute"
-        :key="attribute.id"
-      />
+      <tbody>
+        <component
+          v-for="attribute in attributes"
+          :is="component(attribute.type)"
+          :attribute="attribute"
+          :key="attribute.id"
+        />
+      </tbody>
     </table>
 
     <component
@@ -96,6 +98,7 @@ export default {
 
 <style>
 .layout-table {
-  border-collapse: unset; /* override theme */
+  border-collapse: unset;
+  /* override theme */
 }
 </style>
diff --git a/apps/directory/src/components/popovers/NegotiatorSelection.vue b/apps/directory/src/components/popovers/NegotiatorSelection.vue
deleted file mode 100644
index e653f58ab6..0000000000
--- a/apps/directory/src/components/popovers/NegotiatorSelection.vue
+++ /dev/null
@@ -1,216 +0,0 @@
-<template>
-  <simple-modal :open="cartVisible" :bodyClass="'w-50'">
-    <template v-if="collectionCount > 0">
-      <div
-        :key="biobankName"
-        class="card mb-3 border"
-        v-for="(collections, biobankName) in collectionCart"
-      >
-        <div class="card-header font-weight-bold">
-          {{ biobankName }}
-        </div>
-        <div class="collection-cart">
-          <div
-            class="card-body d-flex border-bottom"
-            :key="`${collection.label}-${index}`"
-            v-for="(collection, index) in sortedAlphabetically(collections)"
-          >
-            <div>
-              <span
-                v-if="isNonCommercialCollection(collection.value)"
-                class="fa-brands fa-creative-commons-nc-eu text-danger non-commercial mr-2"
-                title="Not available for commercial use"
-              ></span>
-
-              <span> {{ collection.label }}</span>
-            </div>
-            <div
-              class="pl-3 ml-auto"
-              @click="
-                removeCollectionsFromSelection({
-                  biobank: { name: biobankName },
-                  collections: [collection],
-                  bookmark: bookmark,
-                })
-              "
-            >
-              <span
-                class="fa fa-times text-bold remove-collection"
-                title="Remove collection"
-              ></span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </template>
-
-    <template v-else>
-      <p class="py-3 pl-1">You haven't selected any collections yet.</p>
-    </template>
-
-    <template v-if="errorMessage">
-      <div class="alert alert-danger" role="alert">
-        {{ errorMessage }}
-      </div>
-    </template>
-
-    <template v-slot:modal-footer>
-      <div class="bg-primary d-flex align-items-center p-2">
-        <button class="btn btn-dark mr-auto" @click="removeAllCollections">
-          {{ uiText["remove_all"] }}
-        </button>
-        <div>
-          <span class="text-white font-weight-bold d-block">{{
-            modalFooterText
-          }}</span>
-          <span class="text-white" v-if="anyCollectionNonCommercial">
-            <span
-              title="Not available for commercial use"
-              class="text-white non-commercial mr-1 fa-brands fa-creative-commons-nc-eu"
-            ></span>
-            {{ selectedNonCommercialCollections }} are non-commercial only
-          </span>
-        </div>
-        <div class="ml-auto">
-          <button class="btn btn-dark mr-2" @click="cartVisible = false">
-            {{ uiText["close"] }}
-          </button>
-          <button
-            :disabled="collectionCount === 0"
-            class="btn btn-secondary ml-auto"
-            @click="sendRequest"
-          >
-            {{ uiText["send_to_negotiator"] }}
-          </button>
-        </div>
-      </div>
-    </template>
-  </simple-modal>
-</template>
-
-<script>
-import { useCheckoutStore } from "../../stores/checkoutStore";
-import { useCollectionStore } from "../../stores/collectionStore";
-import { useSettingsStore } from "../../stores/settingsStore";
-import { sortCollectionsByLabel } from "../../functions/sorting";
-import { SimpleModal } from "molgenis-components";
-
-export default {
-  setup() {
-    const settingsStore = useSettingsStore();
-    const checkoutStore = useCheckoutStore();
-    const collectionStore = useCollectionStore();
-
-    return { settingsStore, checkoutStore, collectionStore };
-  },
-  components: { SimpleModal },
-  props: {
-    modelValue: {
-      type: Boolean,
-      required: true,
-      default: () => false,
-    },
-    biobankName: {
-      type: String,
-      required: false,
-    },
-    bookmark: {
-      type: Boolean,
-      required: false,
-      default: () => true,
-    },
-  },
-  data: function () {
-    return {
-      cartVisible: false,
-      commercialAvailableCollections: [],
-      errorMessage: "", // New reactive error state
-    };
-  },
-  methods: {
-    isNonCommercialCollection(collectionId) {
-      const isCommercial = this.commercialAvailableCollections.find(
-        (colId) => colId === collectionId
-      );
-
-      return !isCommercial;
-    },
-    removeCollectionsFromSelection(collectionData) {
-      this.checkoutStore.removeCollectionsFromSelection(collectionData);
-    },
-    removeAllCollections() {
-      this.cartVisible = false;
-      this.checkoutStore.removeAllCollectionsFromSelection({
-        bookmark: this.bookmark,
-      });
-    },
-    sortedAlphabetically(collectionArray) {
-      return sortCollectionsByLabel(collectionArray);
-    },
-    async sendRequest() {
-      this.errorMessage = ""; // Reset error message before request
-      try {
-        await this.checkoutStore.sendToNegotiator();
-        this.cartVisible = false;
-      } catch (err) {
-        console.info("Negotiator is unavailable. Please try again later.");
-        this.errorMessage =
-          "Negotiator is unavailable. Please try again later.";
-      }
-    },
-  },
-  watch: {
-    /** if toggled from outside */
-    modelValue(newValue) {
-      /** only trigger if different */
-      if (this.newValue !== this.cartVisible) {
-        this.cartVisible = newValue;
-      }
-    },
-    cartVisible(visibility) {
-      /** send back to parent */
-      this.$emit("update:modelValue", visibility);
-    },
-  },
-  computed: {
-    uiText() {
-      return this.settingsStore.uiText;
-    },
-    collectionCount() {
-      return this.checkoutStore.collectionSelectionCount;
-    },
-    modalFooterText() {
-      return `${this.collectionCount} collection(s) selected`;
-    },
-    collectionCart() {
-      return this.checkoutStore.selectedCollections;
-    },
-    anyCollectionNonCommercial() {
-      return this.selectedNonCommercialCollections > 0;
-    },
-
-    selectedNonCommercialCollections() {
-      let allCollectionIds = [];
-      for (const biobank in this.collectionCart) {
-        allCollectionIds = allCollectionIds.concat(
-          this.collectionCart[biobank].map((col) => col.value)
-        );
-      }
-      const nonCommercialCollections = allCollectionIds.filter(
-        (col) => !this.commercialAvailableCollections.includes(col)
-      );
-      return nonCommercialCollections.length;
-    },
-  },
-  async onMount() {
-    this.commercialAvailableCollections =
-      await this.collectionStore.getCommercialAvailableCollections();
-  },
-};
-</script>
-
-<style scoped>
-.collection-cart > div:last-child {
-  border: none !important;
-}
-</style>
diff --git a/apps/directory/src/components/report-components/ContactInformation.vue b/apps/directory/src/components/report-components/ContactInformation.vue
index 6f87cb6e48..5f41ff74fc 100644
--- a/apps/directory/src/components/report-components/ContactInformation.vue
+++ b/apps/directory/src/components/report-components/ContactInformation.vue
@@ -30,12 +30,12 @@
 import { computed } from "vue";
 import { getName } from "../../functions/viewmodelMapper";
 import { useSettingsStore } from "../../stores/settingsStore";
-import { IContactInformation } from "./reportInterfaces";
+import { IPersons } from "../../interfaces/directory";
 
 const settingsStore = useSettingsStore();
 
 const { contactInformation } = defineProps<{
-  contactInformation: IContactInformation;
+  contactInformation: IPersons;
   website?: string;
 }>();
 
diff --git a/apps/directory/src/components/report-components/reportInterfaces.ts b/apps/directory/src/components/report-components/reportInterfaces.ts
index 15cb5eefe5..e386edccf2 100644
--- a/apps/directory/src/components/report-components/reportInterfaces.ts
+++ b/apps/directory/src/components/report-components/reportInterfaces.ts
@@ -1,15 +1,3 @@
-export interface IContactInformation {
-  title_before_name: string;
-  first_name: string;
-  last_name: string;
-  email: string;
-  role: string;
-  address: string;
-  zip: string;
-  city: string;
-  country: { name: string; label: string };
-}
-
 export interface IReportDetail {
   value: string;
   type:
diff --git a/apps/directory/src/components/tables/QualityColumn.vue b/apps/directory/src/components/tables/QualityColumn.vue
index 3d0fceeff9..694aeea251 100644
--- a/apps/directory/src/components/tables/QualityColumn.vue
+++ b/apps/directory/src/components/tables/QualityColumn.vue
@@ -7,10 +7,10 @@
       class="d-flex"
     >
       <a
+        v-if="quality.certification_report"
         :href="quality.certification_report"
         target="_blank"
         rel="noopener noreferrer"
-        v-if="quality.certification_report"
       >
         <span v-if="!quality.certification_image_link">
           {{ quality.label }}
diff --git a/apps/directory/src/dev-assets/mg-bbmri-eric-4.css b/apps/directory/src/dev-assets/mg-bbmri-eric-4.css
index 669d6fa138..9da3a08973 100644
--- a/apps/directory/src/dev-assets/mg-bbmri-eric-4.css
+++ b/apps/directory/src/dev-assets/mg-bbmri-eric-4.css
@@ -9642,7 +9642,7 @@ body .select2-drop-active {
   content: "";
   display: inline-block;
   margin-left: 4px;
-  margin-top: 24px;
+  margin-top: 0.75rem;
 }
 .pincode-input-container {
   display: inline-block;
diff --git a/apps/directory/src/filter-config/initialFilterFacets.js b/apps/directory/src/filter-config/initialFilterFacets.js
index 4264ca4446..4501441367 100644
--- a/apps/directory/src/filter-config/initialFilterFacets.js
+++ b/apps/directory/src/filter-config/initialFilterFacets.js
@@ -94,15 +94,15 @@ export const initialFilterFacets = [
     showFacet: true,
   },
   {
-    facetTitle: "Biobank services",
+    facetTitle: "Services type",
     component: "CheckboxFilter",
     sourceSchema: ontologySchema,
-    sourceTable: "Capabilities",
-    applyToColumn: "capabilities.name",
+    sourceTable: "ServiceTypes",
+    applyToColumn: "services.serviceTypes.name",
     filterValueAttribute: "name",
     filterLabelAttribute: "label",
     negotiatorRequestString: "Biobank services:",
-    sortColumn: "label",
+    sortColumn: "name",
     sortDirection: "asc",
     showFacet: true,
   },
diff --git a/apps/directory/src/functions/arrayUtilities.js b/apps/directory/src/functions/arrayUtilities.js
deleted file mode 100644
index 9156308520..0000000000
--- a/apps/directory/src/functions/arrayUtilities.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- *
- * @param {*} fullArray the array which you want to divide.
- * @param {*} chunkSize the amount per array in the array
- *
- * returns for given input: ([11], 5): [[5],[5],[1]]
- */
-export const convertArrayToChunks = function (fullArray, chunkSize = 100) {
-  let chunkArray = [];
-  const arrayLength = fullArray.length;
-
-  let chunk = [];
-  if (fullArray.length > 20) {
-    for (let index = 0; index < arrayLength; index++) {
-      chunk.push(fullArray[index]);
-      if (chunk.length === chunkSize) {
-        chunkArray.push(chunk);
-        chunk = [];
-      }
-    }
-    if (chunk.length) {
-      chunkArray.push(chunk);
-      chunk = [];
-    }
-  } else {
-    chunkArray = [fullArray];
-  }
-
-  return chunkArray;
-};
diff --git a/apps/directory/src/functions/bookmarkMapper.js b/apps/directory/src/functions/bookmarkMapper.ts
similarity index 69%
rename from apps/directory/src/functions/bookmarkMapper.js
rename to apps/directory/src/functions/bookmarkMapper.ts
index 55c78a2322..6161fc1174 100644
--- a/apps/directory/src/functions/bookmarkMapper.js
+++ b/apps/directory/src/functions/bookmarkMapper.ts
@@ -1,52 +1,45 @@
 import router from "../router";
 import { useFiltersStore } from "../stores/filtersStore";
 import { useCollectionStore } from "../stores/collectionStore";
-import { useCheckoutStore } from "../stores/checkoutStore";
+import { labelValuePair, useCheckoutStore } from "../stores/checkoutStore";
 
 let bookmarkApplied = false;
 
-function setBookmark(bookmark) {
-  bookmarkApplied = true;
-
-  router.push({
-    name: router.currentRoute.name,
-    query: bookmark,
-  });
-}
-
-export async function applyBookmark(watchedQuery) {
+export async function applyBookmark(watchedQuery: Record<string, string>) {
   if (bookmarkApplied) {
     bookmarkApplied = false;
     return;
   }
+
+  if (!watchedQuery || !(Object.keys(watchedQuery).length > 0)) {
+    return;
+  }
+
   const checkoutStore = useCheckoutStore();
   const collectionStore = useCollectionStore();
   const filtersStore = useFiltersStore();
-  let query = watchedQuery;
-  if (!query) {
-    const route = router.currentRoute.value;
-    if (!route.query) return;
-    query = route.query;
-  }
-  if (!query || !Object.keys(query).length > 0) return;
+
   /**  negotiator token */
-  if (query.nToken) {
-    checkoutStore.nToken = query.nToken;
+  if (watchedQuery.nToken) {
+    checkoutStore.nToken = watchedQuery.nToken;
   }
-  if (query.cart) {
-    const decoded = decodeURIComponent(query.cart);
+
+  if (watchedQuery.cart) {
+    const decoded = decodeURIComponent(watchedQuery.cart);
     const cartIdString = atob(decoded);
     const cartIds = cartIdString.split(",");
     const missingCollections =
       await collectionStore.getMissingCollectionInformation(cartIds);
     if (missingCollections && Object.keys(missingCollections).length) {
       for (const collection of missingCollections) {
-        checkoutStore.addCollectionsToSelection({
-          biobank: collection.biobank,
-          collections: [{ label: collection.name, value: collection.id }],
-        });
+        checkoutStore.addCollectionsToSelection(
+          collection.biobank,
+          [{ label: collection.name, value: collection.id }],
+          false
+        );
       }
     }
+
     /** add the beginning of history if from a link-back url */
     if (checkoutStore.searchHistory.length === 0) {
       checkoutStore.searchHistory.push(
@@ -56,16 +49,19 @@ export async function applyBookmark(watchedQuery) {
   }
   /** we load the filters, grab the names, so we can loop over it to map the selections */
   const filters = Object.keys(filtersStore.facetDetails);
-  if (query.matchAll) {
-    const matchAllFilters = decodeURIComponent(query.matchAll).split(",");
+  if (watchedQuery.matchAll) {
+    const matchAllFilters = decodeURIComponent(watchedQuery.matchAll).split(
+      ","
+    );
     for (const filterName of matchAllFilters) {
       filtersStore.updateFilterType(filterName, "all", true);
     }
   }
 
   for (const filterName of filters) {
-    if (query[filterName]) {
-      let filtersToAdd = decodeURIComponent(query[filterName]);
+    if (watchedQuery[filterName]) {
+      const filtersToAdd: string = decodeURIComponent(watchedQuery[filterName]);
+
       if (filterName === "Diagnosisavailable") {
         const diagnosisFacetDetails = filtersStore.facetDetails[filterName];
         /** the diagnosis available has been encoded, to discourage messing with the tree and breaking stuff. */
@@ -80,22 +76,25 @@ export async function applyBookmark(watchedQuery) {
         const filterOptions = filtersStore.filterOptionsCache[filterName];
         if (filterOptions) {
           const queryValues = filtersToAdd.split(",");
-          filtersToAdd = filterOptions.filter((fo) =>
-            queryValues.includes(fo.value)
+          const activeFilters = filterOptions.filter((filterOption) =>
+            queryValues.includes(filterOption.value)
           );
-        } else {
-          filtersToAdd = filtersToAdd === "true" ? true : filtersToAdd;
+          filtersStore.updateFilter(filterName, activeFilters, true);
         }
-        filtersStore.updateFilter(filterName, filtersToAdd, true);
       }
     }
   }
   filtersStore.bookmarkWaitingForApplication = false;
 }
 
-export function createBookmark(filters, collectionCart) {
+export function createBookmark(
+  filters: Record<string, any>,
+  collectionCart: Record<string, labelValuePair[]>,
+  serviceCart: Record<string, labelValuePair[]>
+) {
+  console.log("createBookmark", filters, collectionCart, serviceCart);
   const filtersStore = useFiltersStore();
-  const bookmark = {};
+  const bookmark: Record<string, string> = {};
   const matchAll = [];
 
   if (filters) {
@@ -142,7 +141,7 @@ export function createBookmark(filters, collectionCart) {
           bookmarkValue = btoa(bookmarkValue);
         }
 
-        bookmark[filterName] = encodeURI();
+        bookmark[filterName] = encodeURI(value);
       } else {
         let bookmarkValue = value;
         if (filterName === "Diagnosisavailable") {
@@ -154,23 +153,38 @@ export function createBookmark(filters, collectionCart) {
     }
   }
 
+  if (matchAll.length) {
+    bookmark.matchAll = encodeURI(matchAll.join(","));
+  }
+
   /** This manages the selection in the cart */
   if (collectionCart && Object.keys(collectionCart).length) {
     const bookmarkIds = [];
     for (const biobank in collectionCart) {
-      bookmarkIds.push(collectionCart[biobank].map((s) => s.value));
+      bookmarkIds.push(
+        collectionCart[biobank].map((collection) => collection.value)
+      );
     }
 
     const encodedCart = btoa(bookmarkIds.join(","));
     bookmark.cart = encodeURI(encodedCart);
   }
 
-  if (matchAll.length) {
-    bookmark.matchAll = encodeURI(matchAll.join(","));
+  if (serviceCart && Object.keys(serviceCart).length) {
+    const bookmarkIds = [];
+    for (const service in serviceCart) {
+      bookmarkIds.push(serviceCart[service].map((service) => service.value));
+    }
+
+    const encodedCart = btoa(bookmarkIds.join(","));
+    bookmark.serviceCart = encodeURI(encodedCart);
   }
 
   if (!filtersStore.bookmarkWaitingForApplication) {
-    setBookmark(bookmark);
+    router.push({
+      name: router.currentRoute.value.name,
+      query: bookmark,
+    });
   }
 }
 
diff --git a/apps/directory/src/functions/sorting.js b/apps/directory/src/functions/sorting.js
deleted file mode 100644
index 977eae8e3c..0000000000
--- a/apps/directory/src/functions/sorting.js
+++ /dev/null
@@ -1,35 +0,0 @@
-export const sortCollectionsByName = function (collectionArray) {
-  const newArray = [
-    ...new Set(collectionArray),
-  ]; /** remove the in place sorting */
-
-  return newArray.sort((a, b) => {
-    if (!a.name || !b.name) return 0;
-
-    if (a.name.toLowerCase() < b.name.toLowerCase()) {
-      return -1;
-    }
-    if (a.name.toLowerCase() > b.name.toLowerCase()) {
-      return 1;
-    }
-    return 0;
-  });
-};
-
-export const sortCollectionsByLabel = function (collectionArray) {
-  const newArray = [
-    ...new Set(collectionArray),
-  ]; /** remove the in place sorting */
-
-  return newArray.sort((a, b) => {
-    if (!a.label || !b.label) return 0;
-
-    if (a.label.toLowerCase() < b.label.toLowerCase()) {
-      return -1;
-    }
-    if (a.label.toLowerCase() > b.label.toLowerCase()) {
-      return 1;
-    }
-    return 0;
-  });
-};
diff --git a/apps/directory/src/functions/sorting.ts b/apps/directory/src/functions/sorting.ts
new file mode 100644
index 0000000000..e315ed8bcf
--- /dev/null
+++ b/apps/directory/src/functions/sorting.ts
@@ -0,0 +1,17 @@
+export const sortCollectionsByName = function (
+  collectionArray: { name?: string }[]
+) {
+  const shallowCopy = [...collectionArray];
+
+  return shallowCopy.sort((a, b) => {
+    if (!a.name || !b.name) return 0;
+
+    if (a.name.toLowerCase() < b.name.toLowerCase()) {
+      return -1;
+    }
+    if (a.name.toLowerCase() > b.name.toLowerCase()) {
+      return 1;
+    }
+    return 0;
+  });
+};
diff --git a/apps/directory/src/i18n/i18n.js b/apps/directory/src/i18n/i18n.js
index ab0597ad36..3b2cf8b415 100644
--- a/apps/directory/src/i18n/i18n.js
+++ b/apps/directory/src/i18n/i18n.js
@@ -13,8 +13,8 @@ export const i18n = {
     remove_all: "Remove all",
     send_to_negotiator: "Send to the Negotiator",
     send_to_podium: "Send to Podium",
-    card_biobank_details: "View biobank",
-    card_collections_details: "View biobank collections",
+    card_biobank_details: "Organisation",
+    card_collections_details: "Collections",
     match_option1: "Match all",
     match_option2: "Match any",
     filter_loading: "Loading filters",
diff --git a/apps/directory/src/interfaces/directory.ts b/apps/directory/src/interfaces/directory.ts
new file mode 100644
index 0000000000..d7eed67c80
--- /dev/null
+++ b/apps/directory/src/interfaces/directory.ts
@@ -0,0 +1,560 @@
+// Generated (on: 2024-11-20T11:45:09.401243) from Generator.java for schema: directory
+
+export interface IFile {
+  id?: string;
+  size?: number;
+  extension?: string;
+  url?: string;
+}
+
+export interface ITreeNode {
+  name: string;
+  children?: ITreeNode[];
+  parent?: {
+    name: string;
+  };
+}
+
+export interface IOntologyNode extends ITreeNode {
+  label: string;
+  code?: string;
+  definition?: string;
+  ontologyTermURI?: string;
+  order?: number;
+}
+
+export interface IAccessTypes {
+  order?: number;
+  name: string;
+  label?: string;
+  tags?: string[];
+  parent?: IAccessTypes;
+  codesystem?: string;
+  code?: string;
+  ontologyTermURI?: string;
+  definition?: string;
+  children?: IAccessTypes[];
+}
+
+export interface IAgeRanges {
+  order?: number;
+  name: string;
+  label?: string;
+  tags?: string[];
+  parent?: IAgeRanges;
+  codesystem?: string;
+  code?: string;
+  ontologyTermURI?: string;
+  definition?: string;
+  children?: IAgeRanges[];
+}
+
+export interface IAgeUnits {
+  order?: number;
+  name: string;
+  label?: string;
+  tags?: string[];
+  parent?: IAgeUnits;
+  codesystem?: string;
+  code?: string;
+  ontologyTermURI?: string;
+  definition?: string;
+  children?: IAgeUnits[];
+}
+
+export interface IAlsoKnownIn {
+  id: string;
+  name_system: string;
+  pid?: string;
+  url: string;
+  national_node: INationalNodes;
+  label?: string;
+}
+
+export interface IAssessmentLevels {
+  order?: number;
+  name: string;
+  label?: string;
+  tags?: string[];
+  parent?: IAssessmentLevels;
+  codesystem?: string;
+  code?: string;
+  ontologyTermURI?: string;
+  definition?: string;
+  children?: IAssessmentLevels[];
+}
+
+export interface IBiobanks {
+  id: string;
+  pid: string;
+  name: string;
+  acronym?: string;
+  description: string;
+  url?: string;
+  location?: string;
+  country: IOntologyNode;
+  latitude?: string;
+  longitude?: string;
+  head?: IPersons;
+  contact: IPersons;
+  juridical_person: string;
+  network?: INetworks[];
+  also_known?: IAlsoKnownIn[];
+  collections?: ICollections[];
+  services?: IServices[];
+  quality?: IQualityInfoBiobanks[];
+  collaboration_commercial?: boolean;
+  collaboration_non_for_profit?: boolean;
+  national_node: INationalNodes;
+  withdrawn: boolean;
+}
+
+export interface IBodyParts {
+  order?: number;
+  name: string;
+  label?: string;
+  tags?: string[];
+  parent?: IBodyParts;
+  codesystem?: string;
+  code?: string;
+  ontologyTermURI?: string;
+  definition?: string;
+  children?: IBodyParts[];
+}
+
+export interface ICategories {
+  order?: number;
+  name: string;
+  label?: string;
+  tags?: string[];
+  parent?: ICategories;
+  codesystem?: string;
+  code?: string;
+  ontologyTermURI?: string;
+  definition?: string;
+  children?: ICategories[];
+}
+
+export interface ICollectionFacts {
+  id: string;
+  collection: ICollections;
+  sex?: IOntologyNode;
+  age_range?: IOntologyNode;
+  sample_type?: IOntologyNode;
+  disease?: IDiseaseTypes;
+  number_of_samples?: number;
+  number_of_donors?: number;
+  last_update: string;
+  national_node: INationalNodes;
+}
+
+export interface ICollectionTypes {
+  order?: number;
+  name: string;
+  label?: string;
+  tags?: string[];
+  parent?: ICollectionTypes;
+  codesystem?: string;
+  code?: string;
+  ontologyTermURI?: string;
+  definition?: string;
+  children?: ICollectionTypes[];
+}
+
+export interface ICollections {
+  id: string;
+  name: string;
+  acronym?: string;
+  description: string;
+  url?: string;
+  location?: string;
+  country: IOntologyNode;
+  latitude?: string;
+  longitude?: string;
+  head?: IPersons;
+  contact: IPersons;
+  national_node: INationalNodes;
+  withdrawn: boolean;
+  parent_collection?: ICollections;
+  sub_collections?: ICollections[];
+  biobank: IBiobanks;
+  biobank_label: string;
+  network?: INetworks[];
+  combined_network?: INetworks[];
+  also_known?: IAlsoKnownIn[];
+  studies?: IStudies[];
+  type: IOntologyNode[];
+  data_categories: IOntologyNode[];
+  order_of_magnitude: IOntologyNode;
+  size?: number;
+  categories?: IOntologyNode[];
+  timestamp?: string;
+  quality?: IQualityInfoCollections[];
+  combined_quality?: IOntologyNode[];
+  number_of_donors?: number;
+  order_of_magnitude_donors?: IOntologyNode;
+  sex?: IOntologyNode[];
+  diagnosis_available?: IDiseaseTypes[];
+  age_low?: number;
+  age_high?: number;
+  age_unit?: IOntologyNode;
+  facts?: ICollectionFacts[];
+  materials?: IOntologyNode[];
+  storage_temperatures?: IOntologyNode[];
+  body_part_examined?: IOntologyNode[];
+  imaging_modality?: IOntologyNode[];
+  image_dataset_type?: IOntologyNode[];
+  collaboration_commercial?: boolean;
+  collaboration_non_for_profit?: boolean;
+  data_use?: IOntologyNode[];
+  duc_profile?: string;
+  commercial_use?: boolean;
+  access_fee?: IOntologyNode[];
+  access_joint_project?: IOntologyNode[];
+  access_description?: string;
+  access_uri?: string;
+  sop?: IOntologyNode[];
+}
+
+export interface ICommonNetworkElements {
+  order?: number;
+  name: string;
+  label?: string;
+  tags?: string[];
+  parent?: ICommonNetworkElements;
+  codesystem?: string;
+  code?: string;
+  ontologyTermURI?: string;
+  definition?: string;
+  children?: ICommonNetworkElements[];
+}
+
+export interface IContactPersonsNationalNodes {
+  id: string;
+  first_name?: string;
+  last_name: string;
+  email: string;
+  role: string;
+}
+
+export interface ICountries {
+  order?: number;
+  name: string;
+  label?: string;
+  tags?: string[];
+  parent?: ICountries;
+  codesystem?: string;
+  code?: string;
+  ontologyTermURI?: string;
+  definition?: string;
+  children?: ICountries[];
+}
+
+export interface IDataCategories {
+  order?: number;
+  name: string;
+  label?: string;
+  tags?: string[];
+  parent?: IDataCategories;
+  codesystem?: string;
+  code?: string;
+  ontologyTermURI?: string;
+  definition?: string;
+  children?: IDataCategories[];
+}
+
+export interface IDataRefreshTypes {
+  order?: number;
+  name: string;
+  label?: string;
+  tags?: string[];
+  parent?: IDataRefreshTypes;
+  codesystem?: string;
+  code?: string;
+  ontologyTermURI?: string;
+  definition?: string;
+  children?: IDataRefreshTypes[];
+}
+
+export interface IDataUseOntologies {
+  order?: number;
+  name: string;
+  label?: string;
+  tags?: string[];
+  parent?: IDataUseOntologies;
+  codesystem?: string;
+  code?: string;
+  ontologyTermURI?: string;
+  definition?: string;
+  children?: IDataUseOntologies[];
+}
+
+export interface IDiseaseTypes {
+  order?: number;
+  name: string;
+  label?: string;
+  parent?: IDiseaseTypes[];
+  codesystem?: string;
+  code?: string;
+  ontologyTermURI?: string;
+  definition?: string;
+  children?: IDiseaseTypes[];
+  exact_mapping?: IDiseaseTypes[];
+  btnt_mapping?: IDiseaseTypes[];
+  ntbt_mapping?: IDiseaseTypes[];
+}
+
+export interface IImageDatasetTypes {
+  order?: number;
+  name: string;
+  label?: string;
+  tags?: string[];
+  parent?: IImageDatasetTypes;
+  codesystem?: string;
+  code?: string;
+  ontologyTermURI?: string;
+  definition?: string;
+  children?: IImageDatasetTypes[];
+}
+
+export interface IImagingModalities {
+  order?: number;
+  name: string;
+  label?: string;
+  tags?: string[];
+  parent?: IImagingModalities;
+  codesystem?: string;
+  code?: string;
+  ontologyTermURI?: string;
+  definition?: string;
+  children?: IImagingModalities[];
+}
+
+export interface IMaterialTypes {
+  order?: number;
+  name: string;
+  label?: string;
+  tags?: string[];
+  parent?: IMaterialTypes;
+  codesystem?: string;
+  code?: string;
+  ontologyTermURI?: string;
+  definition?: string;
+  children?: IMaterialTypes[];
+}
+
+export interface INationalNodes {
+  id: string;
+  description: string;
+  dns?: string;
+  contact_persons?: IContactPersonsNationalNodes[];
+  data_refresh: IOntologyNode;
+  date_start?: string;
+  date_end?: string;
+}
+
+export interface INetworks {
+  id: string;
+  name: string;
+  acronym?: string;
+  description: string;
+  location?: string;
+  latitude?: string;
+  longitude?: string;
+  also_known?: IAlsoKnownIn[];
+  url?: string;
+  juridical_person?: string;
+  contact: IPersons;
+  parent_network?: INetworks[];
+  common_network_elements?: IOntologyNode[];
+  national_node: INationalNodes;
+  withdrawn: boolean;
+}
+
+export interface IPersons {
+  id: string;
+  title_before_name?: string;
+  first_name?: string;
+  last_name?: string;
+  title_after_name?: string;
+  email: string;
+  phone?: string;
+  address?: string;
+  zip?: string;
+  city?: string;
+  country: IOntologyNode;
+  role?: string;
+  biobanks?: IBiobanks[];
+  collections?: ICollections[];
+  networks?: INetworks[];
+  national_node: INationalNodes;
+}
+
+export interface IQualityInfoBiobanks {
+  id: string;
+  biobank: IBiobanks;
+  quality_standard: IOntologyNode;
+  assess_level_bio: IOntologyNode;
+  certification_number?: string;
+  certification_report?: string;
+  certification_image_link?: string;
+}
+
+export interface IQualityInfoCollections {
+  id: string;
+  collection: ICollections;
+  quality_standard: IOntologyNode;
+  assess_level_col: IOntologyNode;
+  certification_number?: string;
+  certification_report?: string;
+  certification_image_link?: string;
+}
+
+export interface IQualityInfoServices {
+  id: string;
+  service: IServices;
+  qualityStandard: IOntologyNode;
+  assessmentLevel: IOntologyNode;
+  certificationNumber?: string;
+  certificationReport?: string;
+  certificationImageLink?: string;
+}
+
+export interface IQualityStandards {
+  order?: number;
+  name: string;
+  label?: string;
+  tags?: string[];
+  parent?: IQualityStandards;
+  codesystem?: string;
+  code?: string;
+  ontologyTermURI?: string;
+  definition?: string;
+  children?: IQualityStandards[];
+}
+
+export interface ISOPs {
+  order?: number;
+  name: string;
+  label?: string;
+  tags?: string[];
+  parent?: ISOPs;
+  codesystem?: string;
+  code?: string;
+  ontologyTermURI?: string;
+  definition?: string;
+  children?: ISOPs[];
+}
+
+export interface ISampleSizes {
+  order?: number;
+  name: string;
+  label?: string;
+  tags?: string[];
+  parent?: ISampleSizes;
+  codesystem?: string;
+  code?: string;
+  ontologyTermURI?: string;
+  definition?: string;
+  children?: ISampleSizes[];
+}
+
+export interface IServiceCategories {
+  order?: number;
+  name: string;
+  label?: string;
+  tags?: string[];
+  parent?: IServiceCategories;
+  codesystem?: string;
+  code?: string;
+  ontologyTermURI?: string;
+  definition?: string;
+  children?: IServiceCategories[];
+}
+
+export interface IServiceTypes {
+  order?: number;
+  name: string;
+  label?: string;
+  parent?: IServiceTypes;
+  codesystem?: string;
+  code?: string;
+  ontologyTermURI?: string;
+  definition?: string;
+  children?: IServiceTypes[];
+  serviceCategory: IOntologyNode;
+}
+
+export interface IServices {
+  id: string;
+  name: string;
+  serviceTypes: IServiceTypes[];
+  acronym?: string;
+  description: string;
+  descriptionUrl?: string;
+  device?: string;
+  deviceSystem?: string;
+  tRL?: IOntologyNode;
+  accessDescriptionUrl?: string;
+  unitOfAccess?: string;
+  accessDescription: string;
+  unitCost?: string;
+  qualityStandards?: IQualityInfoServices[];
+  contactInformation?: IPersons;
+  national_node: INationalNodes;
+  biobank: IBiobanks;
+}
+
+export interface ISexTypes {
+  order?: number;
+  name: string;
+  label?: string;
+  tags?: string[];
+  parent?: ISexTypes;
+  codesystem?: string;
+  code?: string;
+  ontologyTermURI?: string;
+  definition?: string;
+  children?: ISexTypes[];
+}
+
+export interface IStorageTemperatureTypes {
+  order?: number;
+  name: string;
+  label?: string;
+  tags?: string[];
+  parent?: IStorageTemperatureTypes;
+  codesystem?: string;
+  code?: string;
+  ontologyTermURI?: string;
+  definition?: string;
+  children?: IStorageTemperatureTypes[];
+}
+
+export interface IStudies {
+  id: string;
+  title: string;
+  description?: string;
+  type?: string;
+  sex?: IOntologyNode[];
+  age_low?: number;
+  age_high?: number;
+  age_unit?: IOntologyNode;
+  number_of_subjects?: number;
+  also_known?: IAlsoKnownIn[];
+  collections?: ICollections[];
+  national_node: INationalNodes;
+}
+
+export interface ITRLs {
+  order?: number;
+  name: string;
+  label?: string;
+  tags?: string[];
+  parent?: ITRLs;
+  codesystem?: string;
+  code?: string;
+  ontologyTermURI?: string;
+  definition?: string;
+  children?: ITRLs[];
+}
diff --git a/apps/directory/src/interfaces/interfaces.ts b/apps/directory/src/interfaces/interfaces.ts
index 47524d754e..1898bafa0c 100644
--- a/apps/directory/src/interfaces/interfaces.ts
+++ b/apps/directory/src/interfaces/interfaces.ts
@@ -5,3 +5,12 @@ export interface IOntologyItem {
   parent?: { name: string }[];
   children?: IOntologyItem[];
 }
+
+export interface IBiobankIdentifier {
+  name: string;
+}
+
+export interface IFilterOption {
+  text: string;
+  value: string;
+}
diff --git a/apps/directory/src/property-config/initialBiobankColumns.js b/apps/directory/src/property-config/initialBiobankColumns.js
index 4be2cf4b59..af02ce84ed 100644
--- a/apps/directory/src/property-config/initialBiobankColumns.js
+++ b/apps/directory/src/property-config/initialBiobankColumns.js
@@ -33,7 +33,7 @@ export const initialBiobankColumns = [
   },
   {
     label: "Biobank capabilities:",
-    column: { capabilities: ["name", "label"] },
+    column: { services: ["name"] },
     type: "array",
     showOnBiobankCard: true,
   },
diff --git a/apps/directory/src/property-config/initialBiobankReportColumns.js b/apps/directory/src/property-config/initialBiobankReportColumns.js
index 88afdef44a..4514634ebf 100644
--- a/apps/directory/src/property-config/initialBiobankReportColumns.js
+++ b/apps/directory/src/property-config/initialBiobankReportColumns.js
@@ -21,7 +21,20 @@ export const initialBiobankReportColumns = [
     },
   },
   { label: "Juridical person:", column: "juridical_person" },
-  { label: "Biobank capabilities:", column: { capabilities: ["label"] } },
+  {
+    label: "Biobank capabilities:",
+    column: {
+      services: [
+        "id",
+        "name",
+        "acronym",
+        "description",
+        "device",
+        "deviceSystem",
+        { serviceTypes: ["name", "label", { serviceCategory: ["name"] }] },
+      ],
+    },
+  },
   /** properties that are required but should not be rendered as attributes */
   {
     column: [
diff --git a/apps/directory/src/router/index.js b/apps/directory/src/router/index.js
index f9728b66b9..42c6401351 100644
--- a/apps/directory/src/router/index.js
+++ b/apps/directory/src/router/index.js
@@ -3,6 +3,7 @@ import HomeView from "../views/HomeView.vue";
 import AboutView from "../views/AboutView.vue";
 import Landingpage from "../views/Landingpage.vue";
 import BiobankReport from "../views/BiobankReport.vue";
+import ServiceReport from "../views/ServiceReport.vue";
 import NetworkReport from "../views/NetworkReport.vue";
 import CollectionReport from "../views/CollectionReport.vue";
 import StudyReport from "../views/StudyReport.vue";
@@ -27,6 +28,11 @@ const router = createRouter({
       name: "collectiondetails",
       component: CollectionReport,
     },
+    {
+      path: "/service/:id",
+      name: "servicedetails",
+      component: ServiceReport,
+    },
     {
       path: "/biobank/:id",
       name: "biobankdetails",
diff --git a/apps/directory/src/stores/biobanksStore.js b/apps/directory/src/stores/biobanksStore.js
index fb3f08a13f..360c48ff89 100644
--- a/apps/directory/src/stores/biobanksStore.js
+++ b/apps/directory/src/stores/biobanksStore.js
@@ -1,4 +1,4 @@
-import { QueryEMX2 } from "molgenis-components";
+import QueryEMX2 from "../../../molgenis-components/src/queryEmx2/queryEmx2.ts";
 import { defineStore } from "pinia";
 import { computed, ref } from "vue";
 import { extractValue } from "../functions/extractValue";
@@ -71,6 +71,13 @@ export const useBiobanksStore = defineStore("biobanksStore", () => {
     return totalCount - biobankCardsSubcollectionCount.value;
   });
 
+  const biobankCardsServicesCount = computed(
+    () =>
+      biobankCards.value
+        .filter((bc) => bc.services)
+        .flatMap((biobank) => biobank.services).length
+  );
+
   function getFacetColumnDetails() {
     if (!facetBiobankColumnDetails.value.length) {
       const filterFacetProperties = [];
@@ -217,6 +224,7 @@ export const useBiobanksStore = defineStore("biobanksStore", () => {
     biobankCardsHaveResults,
     biobankCardsBiobankCount,
     biobankCardsCollectionCount,
+    biobankCardsServicesCount,
     biobankCardsSubcollectionCount,
     biobankCards,
     baseQuery,
diff --git a/apps/directory/src/stores/checkoutStore.js b/apps/directory/src/stores/checkoutStore.ts
similarity index 52%
rename from apps/directory/src/stores/checkoutStore.js
rename to apps/directory/src/stores/checkoutStore.ts
index 4ef8eb6f8e..ed1af32283 100644
--- a/apps/directory/src/stores/checkoutStore.js
+++ b/apps/directory/src/stores/checkoutStore.ts
@@ -3,6 +3,13 @@ import { computed, ref, toRaw, watch } from "vue";
 import { createBookmark } from "../functions/bookmarkMapper";
 import { useFiltersStore } from "./filtersStore";
 import { useSettingsStore } from "./settingsStore";
+import { IBiobanks } from "../interfaces/directory";
+import { IBiobankIdentifier } from "../interfaces/interfaces";
+
+export interface labelValuePair {
+  label: string;
+  value: string;
+}
 
 export const useCheckoutStore = defineStore("checkoutStore", () => {
   const filtersStore = useFiltersStore();
@@ -10,16 +17,24 @@ export const useCheckoutStore = defineStore("checkoutStore", () => {
   const checkoutValid = ref(false);
   const cartUpdated = ref(false);
 
-  const searchHistory = ref([]);
+  const searchHistory = ref<string[]>([]);
   const nToken = ref("");
 
-  const biobankIdDictionary = ref({});
+  const biobankIdDictionary = ref<Record<string, string>>({});
 
-  const selectedCollections = ref({});
+  const selectedCollections = ref<
+    Record<string, { label: string; value: string }[]>
+  >({});
+  const selectedServices = ref<
+    Record<string, { label: string; value: string }[]>
+  >({});
 
   const serializedSelectedCollections = localStorage.getItem(
     "selectedCollections"
   );
+
+  const serializedSelectedServices = localStorage.getItem("selectedServices");
+
   if (serializedSelectedCollections) {
     const deserializedSelectedCollections = JSON.parse(
       serializedSelectedCollections
@@ -27,6 +42,11 @@ export const useCheckoutStore = defineStore("checkoutStore", () => {
     selectedCollections.value = deserializedSelectedCollections;
   }
 
+  if (serializedSelectedServices) {
+    const deserializedSelectedServices = JSON.parse(serializedSelectedServices);
+    selectedServices.value = deserializedSelectedServices;
+  }
+
   watch(
     selectedCollections,
     (newSelectedCollections) => {
@@ -38,6 +58,17 @@ export const useCheckoutStore = defineStore("checkoutStore", () => {
     { deep: true }
   );
 
+  watch(
+    selectedServices,
+    (newSelectedServices) => {
+      localStorage.setItem(
+        "selectedServices",
+        JSON.stringify(toRaw(newSelectedServices))
+      );
+    },
+    { deep: true }
+  );
+
   const collectionSelectionCount = computed(() => {
     const allBiobanks = Object.keys(selectedCollections.value);
     return allBiobanks.reduce((accum, biobank) => {
@@ -45,7 +76,14 @@ export const useCheckoutStore = defineStore("checkoutStore", () => {
     }, 0);
   });
 
-  function setSearchHistory(history) {
+  const serviceSelectionCount = computed(() => {
+    const allBiobanks = Object.keys(selectedServices.value);
+    return allBiobanks.reduce((accum, biobank) => {
+      return accum + selectedServices.value[biobank].length;
+    }, 0);
+  });
+
+  function setSearchHistory(history: string) {
     if (history === "") {
       history = "No filters used.";
     }
@@ -59,9 +97,64 @@ export const useCheckoutStore = defineStore("checkoutStore", () => {
     }
   }
 
-  function addCollectionsToSelection({ biobank, collections, bookmark }) {
+  function addServicesToSelection(
+    biobank: IBiobanks,
+    services: labelValuePair[],
+    bookmark: boolean
+  ) {
+    checkoutValid.value = false;
+    const biobankIdentifier = biobank.name;
+    biobankIdDictionary.value[biobankIdentifier] = biobank.id;
+    const currentSelectionForBiobank =
+      selectedServices.value[biobankIdentifier];
+
+    if (currentSelectionForBiobank && currentSelectionForBiobank.length) {
+      const currentIds = currentSelectionForBiobank.map((sc) => sc.value);
+      const newServices = services.filter(
+        (cf) => !currentIds.includes(cf.value)
+      );
+
+      setSearchHistory(
+        `Selected ${newServices
+          .map((nc) => nc.label)
+          .join(", ")} from ${biobankIdentifier}`
+      );
+
+      selectedServices.value[biobankIdentifier] =
+        currentSelectionForBiobank.concat(newServices);
+    } else {
+      selectedServices.value[biobankIdentifier] = services;
+
+      setSearchHistory(
+        `Selected ${services
+          .map((nc) => nc.label)
+          .join(", ")} from ${biobankIdentifier}`
+      );
+
+      if (bookmark) {
+        checkoutValid.value = true;
+        // todo need to add service stuff to the bookmark
+        createBookmark(
+          filtersStore.filters,
+          selectedCollections.value,
+          selectedServices.value
+        );
+      } else {
+        /** we should not refresh on a cart update, so track this */
+        cartUpdated.value = true;
+      }
+
+      return { services, bookmark };
+    }
+  }
+
+  function addCollectionsToSelection(
+    biobank: IBiobanks,
+    collections: labelValuePair[],
+    bookmark: boolean
+  ) {
     checkoutValid.value = false;
-    const biobankIdentifier = biobank.label || biobank.name;
+    const biobankIdentifier = biobank.name;
     biobankIdDictionary.value[biobankIdentifier] = biobank.id;
     const currentSelectionForBiobank =
       selectedCollections.value[biobankIdentifier];
@@ -74,7 +167,7 @@ export const useCheckoutStore = defineStore("checkoutStore", () => {
 
       setSearchHistory(
         `Selected ${newCollections
-          .map((nc) => nc.label)
+          .map((collection) => collection.label)
           .join(", ")} from ${biobankIdentifier}`
       );
 
@@ -85,14 +178,18 @@ export const useCheckoutStore = defineStore("checkoutStore", () => {
 
       setSearchHistory(
         `Selected ${collections
-          .map((nc) => nc.label)
+          .map((collection) => collection.label)
           .join(", ")} from ${biobankIdentifier}`
       );
     }
 
     if (bookmark) {
       checkoutValid.value = true;
-      createBookmark(filtersStore.filters, selectedCollections.value);
+      createBookmark(
+        filtersStore.filters,
+        selectedCollections.value,
+        selectedServices.value
+      );
     } else {
       /** we should not refresh on a cart update, so track this */
       cartUpdated.value = true;
@@ -101,15 +198,62 @@ export const useCheckoutStore = defineStore("checkoutStore", () => {
     return { collections, bookmark };
   }
 
-  function removeCollectionsFromSelection({ biobank, collections, bookmark }) {
+  function removeServicesFromSelection(
+    biobank: IBiobankIdentifier,
+    serviceIds: string[],
+    bookmark: boolean
+  ) {
     checkoutValid.value = false;
-    const biobankIdentifier = biobank.label || biobank.name;
+    const biobankIdentifier = biobank.name;
+
+    if (selectedServices.value[biobankIdentifier]) {
+      const serviceSelectionForBiobank =
+        selectedServices.value[biobankIdentifier];
+      for (const serviceId of serviceIds) {
+        const getRemoveIdIndex = serviceSelectionForBiobank.findIndex(
+          (service) => service.value === serviceId
+        );
+
+        if (getRemoveIdIndex < 0) {
+          break;
+        } else {
+          serviceSelectionForBiobank.splice(getRemoveIdIndex, 1);
+        }
+      }
+
+      if (serviceSelectionForBiobank.length) {
+        selectedServices.value[biobankIdentifier] = serviceSelectionForBiobank;
+      } else {
+        delete selectedServices.value[biobankIdentifier];
+      }
+    }
+
+    if (bookmark) {
+      checkoutValid.value = true;
+      createBookmark(
+        filtersStore.filters,
+        selectedCollections.value,
+        selectedServices.value
+      );
+    } else {
+      /** we should not refresh on a cart update, so track this */
+      cartUpdated.value = true;
+    }
+  }
+
+  function removeCollectionsFromSelection(
+    biobank: IBiobankIdentifier,
+    collectionIds: string[],
+    bookmark: boolean
+  ) {
+    checkoutValid.value = false;
+    const biobankIdentifier = biobank.name;
 
     if (selectedCollections.value[biobankIdentifier]) {
       const collectionSelectionForBiobank =
         selectedCollections.value[biobankIdentifier];
-      const collectionsToRemove = collections.map((c) => c.value);
-      for (const collectionId of collectionsToRemove) {
+
+      for (const collectionId of collectionIds) {
         const getRemoveIdIndex = collectionSelectionForBiobank.findIndex(
           (collection) => collection.value === collectionId
         );
@@ -131,21 +275,30 @@ export const useCheckoutStore = defineStore("checkoutStore", () => {
 
     if (bookmark) {
       checkoutValid.value = true;
-      createBookmark(filtersStore.filters, selectedCollections.value);
+      createBookmark(
+        filtersStore.filters,
+        selectedCollections.value,
+        selectedServices.value
+      );
     } else {
       /** we should not refresh on a cart update, so track this */
       cartUpdated.value = true;
     }
   }
 
-  function removeAllCollectionsFromSelection({ bookmark }) {
+  function removeAllFromSelection(bookmark: boolean) {
     checkoutValid.value = false;
 
     selectedCollections.value = {};
+    selectedServices.value = {};
 
     if (bookmark) {
       checkoutValid.value = true;
-      createBookmark(filtersStore.filters, selectedCollections.value);
+      createBookmark(
+        filtersStore.filters,
+        selectedCollections.value,
+        selectedServices.value
+      );
     }
   }
 
@@ -156,7 +309,7 @@ export const useCheckoutStore = defineStore("checkoutStore", () => {
 
     let humanReadableString = "";
     const additionText = " and ";
-    const humanReadableStart = {};
+    const humanReadableStart: Record<string, string> = {};
 
     /** Get all the filterdefinitions for current active filters and make a dictionary name: humanreadable */
     filtersStore.filterFacets
@@ -213,11 +366,31 @@ export const useCheckoutStore = defineStore("checkoutStore", () => {
           toRaw({
             id: collection.value,
             name: collection.label,
-            organization: {
-              id: biobank.id,
-              externalId: biobank.id,
-              name: biobank.label,
-            },
+            // todo: This expects an organization object, but its inclear how the organization is supposed to be mapped to the biobank
+            // organization: {
+            //   id: biobank.value,
+            //   externalId: biobank.id,
+            //   name: biobank.label,
+            // },
+          })
+        );
+      }
+    }
+
+    for (const biobank in selectedServices.value) {
+      const serviceSelection = selectedServices.value[biobank];
+
+      for (const service of serviceSelection) {
+        resources.push(
+          toRaw({
+            id: service.value,
+            name: service.label,
+            // todo: This expects an organization object, but its inclear how the organization is supposed to be mapped to the biobank
+            // organization: {
+            //   id: biobank.value,
+            //   externalId: biobank.id,
+            //   name: biobank.label,
+            // },
           })
         );
       }
@@ -227,11 +400,9 @@ export const useCheckoutStore = defineStore("checkoutStore", () => {
     const humanReadable = getHumanReadableString() + createHistoryJournal();
     const negotiatorUrl = settingsStore.config.negotiatorUrl;
 
-    const payload = { url, humanReadable, resources };
-
-    if (nToken.value) {
-      payload.nToken = nToken.value;
-    }
+    const payload = nToken.value
+      ? { url, humanReadable, resources, nToken: nToken.value }
+      : { url, humanReadable, resources };
 
     // todo: show a success or failure message and close modal if needed.
     const response = await fetch(negotiatorUrl, {
@@ -243,7 +414,7 @@ export const useCheckoutStore = defineStore("checkoutStore", () => {
     });
 
     if (response.ok) {
-      removeAllCollectionsFromSelection({});
+      removeAllFromSelection(false);
     } else {
       throw new Error("Negotiator is not available. Please try again later.");
     }
@@ -260,9 +431,13 @@ export const useCheckoutStore = defineStore("checkoutStore", () => {
     cartUpdated,
     sendToNegotiator,
     selectedCollections,
+    selectedServices,
     collectionSelectionCount,
+    serviceSelectionCount,
     addCollectionsToSelection,
+    addServicesToSelection,
     removeCollectionsFromSelection,
-    removeAllCollectionsFromSelection,
+    removeServicesFromSelection,
+    removeAllFromSelection,
   };
 });
diff --git a/apps/directory/src/stores/collectionStore.js b/apps/directory/src/stores/collectionStore.js
index 1ee26cc71a..4a6458628b 100644
--- a/apps/directory/src/stores/collectionStore.js
+++ b/apps/directory/src/stores/collectionStore.js
@@ -1,7 +1,6 @@
 import { defineStore } from "pinia";
 import { QueryEMX2 } from "molgenis-components";
 import { useSettingsStore } from "./settingsStore";
-import { ref } from "vue";
 import { useCheckoutStore } from "./checkoutStore";
 
 export const useCollectionStore = defineStore("collectionStore", () => {
@@ -10,8 +9,6 @@ export const useCollectionStore = defineStore("collectionStore", () => {
   const collectionColumns = settingsStore.config.collectionColumns;
   const graphqlEndpoint = settingsStore.config.graphqlEndpoint;
 
-  const commercialAvailableCollections = ref([]);
-
   function getCollectionColumns() {
     const properties = collectionColumns
       .filter((column) => column.column)
@@ -67,29 +64,6 @@ export const useCollectionStore = defineStore("collectionStore", () => {
     }
   }
 
-  async function getCommercialAvailableCollections() {
-    if (!commercialAvailableCollections.value.length) {
-      const commercialCollectionQuery = new QueryEMX2(graphqlEndpoint)
-        .table("Collections")
-        .select("id")
-        .where("commercial_use")
-        .equals(true);
-      const commercialAvailableCollectionsResponse =
-        await commercialCollectionQuery.execute();
-      if (
-        commercialAvailableCollectionsResponse.Collections &&
-        commercialAvailableCollectionsResponse.Collections.length
-      ) {
-        commercialAvailableCollections.value =
-          commercialAvailableCollectionsResponse.Collections.map(
-            (collection) => collection.id
-          );
-      }
-    }
-
-    return commercialAvailableCollections.value;
-  }
-
   async function getCollectionReport(id) {
     const collectionReportQuery = new QueryEMX2(graphqlEndpoint)
       .table("Collections")
@@ -124,6 +98,5 @@ export const useCollectionStore = defineStore("collectionStore", () => {
     getCollectionColumns,
     getMissingCollectionInformation,
     getCollectionReport,
-    getCommercialAvailableCollections,
   };
 });
diff --git a/apps/directory/src/stores/filtersStore.ts b/apps/directory/src/stores/filtersStore.ts
index f3585f21c4..649584cede 100644
--- a/apps/directory/src/stores/filtersStore.ts
+++ b/apps/directory/src/stores/filtersStore.ts
@@ -1,5 +1,5 @@
 import { defineStore } from "pinia";
-import { computed, ref, watch } from "vue";
+import { computed, ref, unref, watch } from "vue";
 import { createFilters } from "../filter-config/facetConfigurator";
 import { applyFiltersToQuery } from "../functions/applyFiltersToQuery";
 import { useBiobanksStore } from "./biobanksStore";
@@ -8,9 +8,9 @@ import { useCheckoutStore } from "./checkoutStore";
 import { applyBookmark, createBookmark } from "../functions/bookmarkMapper";
 //@ts-ignore
 import { QueryEMX2 } from "molgenis-components";
-import { convertArrayToChunks } from "../functions/arrayUtilities";
-import { IOntologyItem } from "../interfaces/interfaces";
+import { IFilterOption, IOntologyItem } from "../interfaces/interfaces";
 import * as _ from "lodash";
+import router from "../router";
 
 export const useFiltersStore = defineStore("filtersStore", () => {
   const biobankStore = useBiobanksStore();
@@ -32,7 +32,8 @@ export const useFiltersStore = defineStore("filtersStore", () => {
 
   let filters = ref<Record<string, any>>({});
   let filterType = ref<Record<string, any>>({});
-  let filterOptionsCache = ref<Record<string, any>>({});
+
+  let filterOptionsCache = ref<Record<string, IFilterOption[]>>({});
   let filterFacets = ref<any[]>([]);
   const facetDetailsDictionary = ref<Record<string, any>>({});
 
@@ -97,9 +98,13 @@ export const useFiltersStore = defineStore("filtersStore", () => {
   });
 
   watch(filtersReady, (filtersReady) => {
+    const route = router.currentRoute.value;
     if (filtersReady) {
       const waitForStore = setTimeout(() => {
-        applyBookmark();
+        if (route.query) {
+          applyBookmark(route.query as Record<string, string>);
+        }
+
         clearTimeout(waitForStore);
       }, 350);
     }
@@ -242,7 +247,7 @@ export const useFiltersStore = defineStore("filtersStore", () => {
 
   async function getOntologyOptionsForCodes(
     filterFacet: Record<string, any>,
-    codes: any[][]
+    codes: any[]
   ) {
     const { sourceTable, sortColumn, sortDirection } = filterFacet;
     const attributes = getOntologyAttributes(filterFacet);
@@ -297,32 +302,34 @@ export const useFiltersStore = defineStore("filtersStore", () => {
 
   function clearAllFilters() {
     filters.value = {};
-    createBookmark(filters.value, checkoutStore.selectedCollections);
+    createBookmark(
+      filters.value,
+      checkoutStore.selectedCollections,
+      checkoutStore.selectedServices
+    );
   }
 
-  function updateFilter(filterName: string, value: any, fromBookmark: any) {
-    bookmarkTriggeredFilter.value = fromBookmark;
+  function updateFilter(
+    filterName: string,
+    value?: IFilterOption[] | string | boolean,
+    fromBookmark?: boolean
+  ) {
+    bookmarkTriggeredFilter.value = fromBookmark ?? false;
 
-    /** filter reset, so delete */
-    if (
-      value === null ||
-      value === "" ||
-      value === undefined ||
-      value.length === 0
-    ) {
+    if (typeof value === "string" || typeof value === "boolean") {
+      filters.value[filterName] = value;
+      checkoutStore.setSearchHistory(`${filterName} filtered on ${value}`);
+    } else if (Array.isArray(value) && value.length) {
+      filters.value[filterName] = value;
+
+      checkoutStore.setSearchHistory(
+        `${filterName} filtered on ${value
+          .map((v: Record<string, any>) => v.text)
+          .join(", ")}`
+      );
+    } else {
       delete filters.value[filterName];
       checkoutStore.setSearchHistory(`Filter ${filterName} removed`);
-    } else {
-      filters.value[filterName] = value;
-      if (typeof value === "string" || typeof value === "boolean") {
-        checkoutStore.setSearchHistory(`${filterName} filtered on ${value}`);
-      } else {
-        checkoutStore.setSearchHistory(
-          `${filterName} filtered on ${value
-            .map((v: Record<string, any>) => v.text)
-            .join(", ")}`
-        );
-      }
     }
   }
 
@@ -334,7 +341,6 @@ export const useFiltersStore = defineStore("filtersStore", () => {
     bookmarkTriggeredFilter.value = fromBookmark;
 
     if (value === "" || value === undefined || value.length === 0) {
-      /** filter reset, so delete */
       delete filterType.value[filterName];
     } else {
       filterType.value[filterName] = value;
@@ -357,11 +363,42 @@ export const useFiltersStore = defineStore("filtersStore", () => {
     );
 
     if (!bookmarkTriggeredFilter.value) {
-      createBookmark(newFilters, checkoutStore.selectedCollections);
+      createBookmark(
+        newFilters,
+        checkoutStore.selectedCollections,
+        checkoutStore.selectedServices
+      );
     }
     bookmarkTriggeredFilter.value = false;
   }
 
+  /**
+   * returns for given input: ([11], 5): [[5],[5],[1]]
+   */
+  function convertArrayToChunks(fullArray: any[], chunkSize = 100) {
+    let chunkArray = [];
+    const arrayLength = fullArray.length;
+
+    let chunk = [];
+    if (fullArray.length > 20) {
+      for (let index = 0; index < arrayLength; index++) {
+        chunk.push(fullArray[index]);
+        if (chunk.length === chunkSize) {
+          chunkArray.push(chunk);
+          chunk = [];
+        }
+      }
+      if (chunk.length) {
+        chunkArray.push(chunk);
+        chunk = [];
+      }
+    } else {
+      chunkArray = [fullArray];
+    }
+
+    return chunkArray;
+  }
+
   return {
     facetDetails,
     updateFilter,
diff --git a/apps/directory/src/views/HomeView.vue b/apps/directory/src/views/HomeView.vue
index e3cc75d11c..0567ef1332 100644
--- a/apps/directory/src/views/HomeView.vue
+++ b/apps/directory/src/views/HomeView.vue
@@ -12,7 +12,11 @@ const filtersStore = useFiltersStore();
 onMounted(() => {
   /** mutated cart on another page */
   if (!checkoutStore.checkoutValid) {
-    createBookmark(filtersStore.filters, checkoutStore.selectedCollections);
+    createBookmark(
+      filtersStore.filters,
+      checkoutStore.selectedCollections,
+      checkoutStore.selectedServices
+    );
     checkoutStore.checkoutValid = true;
   }
 });
diff --git a/apps/directory/src/views/ServiceReport.vue b/apps/directory/src/views/ServiceReport.vue
new file mode 100644
index 0000000000..467c66495d
--- /dev/null
+++ b/apps/directory/src/views/ServiceReport.vue
@@ -0,0 +1,238 @@
+<template>
+  <div class="container">
+    <div v-if="service" class="container-fluid">
+      <div class="row">
+        <div class="col my-3 shadow-sm d-flex p-2 align-items-center bg-white">
+          <Breadcrumb
+            class="directory-nav"
+            :crumbs="{
+              ['Back to catalogue']: '../#/',
+              [service.biobank.name]: `../biobank/${service.biobank.id}`,
+              [service.name]: `../#/service/${service.id}`,
+            }"
+            useRouterLink
+          />
+          <check-out class="ml-auto" :bookmark="false" />
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col p-0">
+          <ReportTitle type="Service" :name="service.name" />
+          <ReportDescription :description="service.description" />
+
+          <div class="container p-0">
+            <div class="row">
+              <div class="col-md-8">
+                <table class="table-layout w-100">
+                  <tbody>
+                    <string :attribute="{ label: 'Id:', value: service.id }" />
+
+                    <string
+                      :attribute="{ label: 'Name:', value: service.name }"
+                    />
+
+                    <string
+                      :attribute="{ label: 'Acronym:', value: service.acronym }"
+                    />
+
+                    <string
+                      :attribute="{
+                        label: 'Description:',
+                        value: service.description,
+                      }"
+                    />
+
+                    <string
+                      :attribute="{
+                        label: 'Description URL:',
+                        value: service.descriptionUrl,
+                      }"
+                    />
+
+                    <string
+                      :attribute="{ label: 'Device:', value: service.device }"
+                    />
+
+                    <string
+                      :attribute="{
+                        label: 'Device System:',
+                        value: service.deviceSystem,
+                      }"
+                    />
+
+                    <string
+                      :attribute="{
+                        label: 'Access Description URL:',
+                        value: service.accessDescriptionUrl,
+                      }"
+                    />
+
+                    <string
+                      :attribute="{
+                        label: 'Unit of Access:',
+                        value: service.unitOfAccess,
+                      }"
+                    />
+
+                    <string
+                      :attribute="{
+                        label: 'Access Description:',
+                        value: service.accessDescription,
+                      }"
+                    />
+
+                    <string
+                      :attribute="{
+                        label: 'Unit Cost:',
+                        value: service.unitCost,
+                      }"
+                    />
+
+                    <tr>
+                      <th scope="row" class="pr-1 align-top text-nowrap">
+                        Service Type:
+                      </th>
+                      <td>
+                        <div v-for="serviceType in service.serviceTypes">
+                          {{ serviceType.name }} ({{
+                            serviceType.serviceCategory.name
+                          }})
+                        </div>
+                      </td>
+                    </tr>
+
+                    <tr v-if="service.tRL">
+                      <th scope="row" class="pr-1 align-top text-nowrap">
+                        TRL:
+                      </th>
+                      <td>
+                        {{ service.tRL.label ?? service.tRL.name }}
+                      </td>
+                    </tr>
+
+                    <quality
+                      v-if="service.qualityStandards"
+                      :attribute="qualityProps"
+                    />
+                  </tbody>
+                </table>
+              </div>
+              <!-- Right side card -->
+              <div class="col-md-4">
+                <div class="card">
+                  <div class="card-body">
+                    <div class="card-text">
+                      <h5>Contact Information</h5>
+                      <ul class="right-content-list">
+                        <li v-if="service.contactInformation">
+                          <ContactInformation
+                            :contactInformation="service.contactInformation"
+                          />
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import QueryEMX2 from "../../../molgenis-components/src/queryEmx2/queryEmx2";
+// @ts-ignore
+import { Breadcrumb } from "molgenis-components";
+import { IServices } from "../interfaces/directory";
+import { useSettingsStore } from "../stores/settingsStore";
+import { useRoute } from "vue-router";
+import ReportTitle from "../components/report-components/ReportTitle.vue";
+import ReportDescription from "../components/report-components/ReportDescription.vue";
+import CheckOut from "../components/checkout-components/CheckOut.vue";
+import string from "../components/generators/view-components/string.vue";
+import Quality from "../components/generators/view-components/quality.vue";
+import ContactInformation from "../components/report-components/ContactInformation.vue";
+
+const service = ref<IServices | null>(null);
+
+new QueryEMX2(useSettingsStore().config.graphqlEndpoint)
+  .table("Services")
+  .select([
+    "id",
+    { biobank: ["id", "name"] },
+    "name",
+    { serviceTypes: ["name", "label", { serviceCategory: ["name"] }] },
+    "acronym",
+    "description",
+    "descriptionUrl",
+    "device",
+    "deviceSystem",
+    { tRL: ["order", "name", "label", "code", "definition"] },
+    "accessDescriptionUrl",
+    "unitOfAccess",
+    "accessDescription",
+    "unitCost",
+    {
+      qualityStandards: [
+        "id",
+        { qualityStandard: ["order", "name", "label", "code", "definition"] },
+        { assessmentLevel: ["order", "name", "label", "code", "definition"] },
+        "certificationNumber",
+        "certificationReport",
+        "certificationImageLink",
+      ],
+    },
+    {
+      contactInformation: [
+        "id",
+        "title_before_name",
+        "first_name",
+        "last_name",
+        "title_after_name",
+        "email",
+        "phone",
+        "address",
+        "zip",
+        "city",
+        { country: ["order", "name", "label", "code", "definition"] },
+        "role",
+      ],
+    },
+    {
+      national_node: [
+        "id",
+        "description",
+        "dns",
+        { data_refresh: ["order", "name", "label", "code", "definition"] },
+        "date_start",
+        "date_end",
+      ],
+    },
+  ])
+  .where("id")
+  .equals(useRoute().params.id)
+  .execute()
+  .then((data) => {
+    // @ts-ignore
+    service.value = data.Services[0];
+  });
+
+const qualityProps = computed(() => {
+  return {
+    label: "Quality labels",
+    value: service.value?.qualityStandards?.map((quality) => {
+      return {
+        label: quality.qualityStandard.label,
+        certification_report: quality.certificationReport,
+        certification_image_link: quality.certificationImageLink,
+        quality_standard: quality.qualityStandard,
+      };
+    }),
+  };
+});
+</script>
diff --git a/apps/directory/vite.config.js b/apps/directory/vite.config.js
index 935d3fcf7c..8501bd1abe 100644
--- a/apps/directory/vite.config.js
+++ b/apps/directory/vite.config.js
@@ -6,7 +6,7 @@ import monacoEditorPlugin from "vite-plugin-monaco-editor";
 
 const HOST =
   process.env.MOLGENIS_APPS_HOST || "https://bbmri-emx2-test.molgeniscloud.org";
-const SCHEMA = process.env.MOLGENIS_APPS_SCHEMA || "ERIC";
+const SCHEMA = process.env.MOLGENIS_APPS_SCHEMA || "directory";
 
 const opts = { changeOrigin: true, secure: false, logLevel: "debug" };
 
diff --git a/data/biobank-directory/demo/Services.csv b/data/biobank-directory/demo/Services.csv
index 116baa3ccd..12055272b6 100644
--- a/data/biobank-directory/demo/Services.csv
+++ b/data/biobank-directory/demo/Services.csv
@@ -1,3 +1,3 @@
-id,name,serviceTypes,acronym,description,descriptionUrl,device,deviceSystem,tRL,accessDescriptionUrl,unitOfAccess,accessDescription,unitCost,contactInformation,national_node
-bbmri-eric:serviceID:DE_1234,Biobank Service,"microbiome-analysis, sample-storage",,Service provided by this biobank,,,,TRL-4,,,https://myservice-access.de,,bbmri-eric:contactID:contact_bb1,DE
-bbmri-eric:serviceID:NL_541,Dutch Biobank Service,"PET-Scans, TrainingResourceLabProtocols",,Services provided by Biobank2,,,,TRL-2,,,https://biobank2-service-access.nl,,,NL
\ No newline at end of file
+id,name,serviceTypes,acronym,description,descriptionUrl,device,deviceSystem,tRL,accessDescriptionUrl,unitOfAccess,accessDescription,unitCost,contactInformation,national_node,biobank
+bbmri-eric:serviceID:DE_1234,Biobank Service,"microbiome-analysis, sample-storage",,Service provided by this biobank,,,,TRL-4,,,https://myservice-access.de,,bbmri-eric:contactID:contact_bb1,DE,bbmri-eric:ID:DE_biobank1
+bbmri-eric:serviceID:NL_541,Dutch Biobank Service,"PET-Scans, TrainingResourceLabProtocols",,Services provided by Biobank2,,,,TRL-2,,,https://biobank2-service-access.nl,,,NL,bbmri-eric:ID:NL_biobank2
\ No newline at end of file
diff --git a/data/biobank-directory/molgenis.csv b/data/biobank-directory/molgenis.csv
index e59a97c34e..4377bde714 100644
--- a/data/biobank-directory/molgenis.csv
+++ b/data/biobank-directory/molgenis.csv
@@ -32,7 +32,7 @@ Biobanks,,network,Networks,ref_array,,false,,"Reference to a biobank network ID,
 Biobanks,,combined_network,Combined Network,ref_array,,false,,"Reference to one or more network IDs, to which the biobank belongs directly or indirectly (i.e., either the biobank is explicitly marked as part of the network or its network is).",,Networks,,${name},,,,,
 Biobanks,,also_known,Also Known In,ref_array,,false,,The biobank also exists in …,,AlsoKnownIn,,${name_system},,,,,
 Biobanks,,collections,Collections,refback,,false,,Collections belonging to the biobank.,,Collections,biobank,${name},,,,,
-Biobanks,,services,Services,ref_array,,false,,Capabilities and services that the biobank organisation can offer to a researcher.,,Services,,${name},,,,,
+Biobanks,,services,Services,refback,,false,,Capabilities and services that the biobank organisation can offer to a researcher.,,Services,biobank,${name},,,,,
 Biobanks,,quality,Quality Standards,refback,,false,true,The biobank is marked with this/these quality standard(s).,,QualityInfoBiobanks,biobank,${quality_standard.label},,,,,
 Biobanks,,collaboration_commercial,Commercial Collaboration,bool,,false,,The biobank can be used for collaboration with commercial partners.,,,,,,,,,
 Biobanks,,collaboration_non_for_profit,Non-for-profit Collaboration,bool,,false,,The biobank can be used for collaboration with non-for-profit partners.,,,,,,,,,
@@ -190,6 +190,7 @@ Services,,unitCost,Unit Cost,string,,false,,Cost per unit.,,,,,,,,,
 Services,,qualityStandards,Quality Standards,refback,,false,true,The standards and/or technical specifications that the service is certified or accredited for.,,QualityInfoServices,service,${qualityStandard.label},,,,,
 Services,,contactInformation,Contact Information,ref,,false,,Contact information for the contact person or responsible person of the service,,Persons,,,,,,,
 Services,,national_node,National Node,ref,,true,,The study originates from this national node.,,NationalNodes,,${description},,,,,
+Services,,biobank,Biobank,ref,,true,,"Reference to a biobank ID, to which the service belongs.",,Biobanks,,${name},,,,,
 Studies,,,,,,,,Table with information about the studies in which context the collection was generated,,,,,,,,,
 Studies,,id,ID,string,1,true,,"Unique ID of the study, prefixed with bbmri-eric:studyID:<id_of_the_study>",,,,,,,,,
 Studies,,title,Title,text,,true,,The title of the study,,,,,,,,,