diff --git a/opendata.swiss/ui/app/app.vue b/opendata.swiss/ui/app/app.vue
index 5ebc5fa..bc1cf89 100644
--- a/opendata.swiss/ui/app/app.vue
+++ b/opendata.swiss/ui/app/app.vue
@@ -35,10 +35,24 @@ import OdsBottomFooter from '@/components/footer/OdsBottomFooter.vue'
 import OdsFooter from './components/footer/OdsFooter.vue';
 import type { OdsNavTabItem } from './components/headers/model/ods-nav-tab-item';
 import { APP_NAVIGATION_ITEMS } from './constants/navigation-items';
+import { useI18n } from 'vue-i18n';
+import { useLocale as piveauLocale } from '@piveau/sdk-vue' ;
+
 
 const navigationItems = ref<OdsNavTabItem[]>(APP_NAVIGATION_ITEMS);
 const isMobileMenuOpen = ref(false);
 
+const { locale } = useI18n();
+
+const { setLocale, currentLocale} = piveauLocale();
+
+watch(locale, (newLocale) => {
+  if (newLocale !== (currentLocale as Ref<string>).value) {
+    setLocale(newLocale) // set the piveau locale
+  }
+}, { immediate: true }
+)
+
 useHead({
   bodyAttrs: {
     class: 'body--ods-brand'
diff --git a/opendata.swiss/ui/app/components/LanguageSelector.vue b/opendata.swiss/ui/app/components/LanguageSelector.vue
index df567e7..51c8795 100644
--- a/opendata.swiss/ui/app/components/LanguageSelector.vue
+++ b/opendata.swiss/ui/app/components/LanguageSelector.vue
@@ -24,13 +24,10 @@
 import Select from './OdsSelect.vue'
 import { ref, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useLocale as piveauLocale } from '@piveau/sdk-vue' ;
 
 const switchLocalePath = useSwitchLocalePath()
 const { locale, locales } = useI18n()
 
-const { setLocale, currentLocale } = piveauLocale();
-
 // Props
 defineProps({
   type: {
@@ -48,21 +45,11 @@ const selectedLocale = ref(locale.value)
 // Handle language switching
 watch(selectedLocale, (newLocale) => {
   if (newLocale !== locale.value) {
-    setLocale(newLocale) // set the piveau locale
     const newPath = switchLocalePath(newLocale)
     navigateTo(newPath)
   }
 })
 
-onMounted(() => {
-  const appLocale = locale.value
-  const piveauLocale = (currentLocale as Ref<string>).value
-  if (appLocale !== piveauLocale) {
-    // this is needed to set the piveau locale on startup
-    setLocale(appLocale)
-  }
-})
-
 const { progress } = useLoadingIndicator()
 
 </script>
diff --git a/opendata.swiss/ui/app/components/OdsRelativeDateToggle.vue b/opendata.swiss/ui/app/components/OdsRelativeDateToggle.vue
new file mode 100644
index 0000000..c0f2864
--- /dev/null
+++ b/opendata.swiss/ui/app/components/OdsRelativeDateToggle.vue
@@ -0,0 +1,48 @@
+<template>
+  <NuxtTime
+        :datetime="props.date"
+        :locale="locale"
+        :relative="!showRaw"
+        :title="showRaw ? t('message.dataset_detail.show_relative') : t('message.dataset_detail.show_raw')"
+        :aria-label="showRaw ? t('message.dataset_detail.show_relative') : t('message.dataset_detail.show_raw')"
+        :hour="showRaw ? '2-digit' : undefined"
+        :minute="showRaw ? '2-digit' : undefined"
+        :second="showRaw ? '2-digit' : undefined"
+        :year="'numeric'"
+        :month="'2-digit'"
+        :day="'2-digit'"
+        class="date-toggle"
+        @click="toggle($event)"
+      />
+</template>
+
+
+<script setup lang="ts">
+
+import { useI18n } from 'vue-i18n'
+
+const { locale, t } = useI18n()
+const showRaw = ref(false)
+
+const props = defineProps({
+  date: {
+    type: Date,
+    required: true
+  }
+});
+
+function toggle(event: PointerEvent) {
+  event.preventDefault()
+  event.stopPropagation()
+  showRaw.value = !showRaw.value
+}
+
+</script>
+
+<style lang="scss" scoped>
+
+.date-toggle {
+  cursor: pointer;
+}
+
+</style>
diff --git a/opendata.swiss/ui/app/components/dataset-detail/OdsDatasetCatalogPanel.vue b/opendata.swiss/ui/app/components/dataset-detail/OdsDatasetCatalogPanel.vue
index 5f6c2d3..6ae2b90 100644
--- a/opendata.swiss/ui/app/components/dataset-detail/OdsDatasetCatalogPanel.vue
+++ b/opendata.swiss/ui/app/components/dataset-detail/OdsDatasetCatalogPanel.vue
@@ -1,121 +1,61 @@
 <template>
-  <div class="wrapper">
-  <div class="button-container">
-    <span>
- {{ t('message.dataset_detail.catalog') }}
-    </span>
-
-  <OdsButton
-    variant="link"
-    :title="showCatalogInfo ? t('message.dataset_detail.hide_catalog_entry') : t('message.dataset_detail.show_catalog_entry')"
-    :aria-label="showCatalogInfo ? t('message.dataset_detail.hide_catalog_entry') : t('message.dataset_detail.show_catalog_entry')"
-    size="sm"
-    icon-right
-    @click="showCatalogInfo = !showCatalogInfo"
-  >
-          {{ showCatalogInfo ? props.dataset.getOdsCatalogInfo.title : props.dataset.getOdsCatalogInfo.title }}
-
-          <template #icon>
-    <SvgIcon
-      icon="ChevronDown"
-      role="btn"
-      :class="{ 'rotated': showCatalogInfo }"
-    />
-          </template>
-
-  </OdsButton>
-</div>
-
-<div v-if="showCatalogInfo">
-  <p  class="meta-info">
+   <p class="meta-info">
       <span class="meta-info__item">{{ t('message.dataset_detail.catalog') }}</span>
-    <span
-      v-if="props.dataset.getOdsCatalogInfo.issued"
-      class="meta-info__item"
-      :title="showRaw ? t('message.dataset_detail.show_relative') : t('message.dataset_detail.show_raw')"
-      :aria-label="showRaw ? t('message.dataset_detail.show_relative') : t('message.dataset_detail.show_raw')"
-      @click="toggleRaw"
-    >
-      {{ t('message.dataset_detail.created_on') }}
-      <NuxtTime
-        :datetime="new Date(props.dataset.getOdsCatalogInfo.issued)"
-        :relative="!showRaw"
-        :locale="locale"
-      />
-    </span>
-    <span
-      v-if="props.dataset.getOdsCatalogInfo.modified"
-      class="meta-info__item"
-      :title="showRaw ? t('message.dataset_detail.show_relative') : t('message.dataset_detail.show_raw')"
-      :aria-label="showRaw ? t('message.dataset_detail.show_relative') : t('message.dataset_detail.show_raw')"
-      @click="toggleRaw"
-    >
-      {{ t('message.dataset_detail.modified_on') }}
-      <NuxtTime
-        :datetime="new Date(props.dataset.getOdsCatalogInfo.modified)"
-        :relative="!showRaw"
-        :locale="locale"
-      />
-    </span>
-  </p>
-  <p class="meta-info">
-          <span class="meta-info__item">{{ t('message.dataset_detail.this_dataset_record') }}</span>
+      <span class="meta-info__item">{{ props.dataset.catalog.title }}</span>
+   </p>
+    <p class="meta-info">
+      <span
+        v-if="props.dataset.catalog.issued"
+        class="meta-info__item"
+      >
+        {{ t('message.dataset_detail.created_on') }}
+        <OdsRelativeDateToggle :date="new Date(props.dataset.catalog.issued)" />
+      </span>
+      <span
+        v-if="props.dataset.catalog.modified"
+        class="meta-info__item"
+      >
+        {{ t('message.dataset_detail.modified_on') }}
+        <OdsRelativeDateToggle :date="new Date(props.dataset.catalog.modified)" />
+      </span>
+    </p>
+    <p class="meta-info" style="margin-top: 1rem">
+      <span class="meta-info__item">{{ t('message.dataset_detail.this_dataset_record') }}</span>
+    </p>
 
-    <span
-      v-if="props.dataset.getOdsCatalogInfo.record?.issued"
-      class="meta-info__item"
-      :title="showRaw ? t('message.dataset_detail.show_relative') : t('message.dataset_detail.show_raw')"
-      :aria-label="showRaw ? t('message.dataset_detail.show_relative') : t('message.dataset_detail.show_raw')"
-      @click="toggleRaw"
-    >
-      {{ t('message.dataset_detail.created_on') }}
-      <NuxtTime
-        :datetime="new Date(props.dataset.getOdsCatalogInfo.record.issued)"
-        :relative="!showRaw"
-        :locale="locale"
-      />
-    </span>
-    <span
-      v-if="props.dataset.getOdsCatalogInfo.record?.modified"
-      class="meta-info__item"
-      style="cursor: pointer"
-      :title="showRaw ? t('message.dataset_detail.show_relative') : t('message.dataset_detail.show_raw')"
-      :aria-label="showRaw ? t('message.dataset_detail.show_relative') : t('message.dataset_detail.show_raw')"
-      @click="toggleRaw"
-    >
-      {{ t('message.dataset_detail.modified_on') }}
-      <NuxtTime
-        :datetime="new Date(props.dataset.getOdsCatalogInfo.record.modified)"
-        :relative="!showRaw"
-        :locale="locale"
-      />
-    </span>
-  </p>
-  </div>
-  </div>
+    <p class="meta-info">
+      <span
+        v-if="props.dataset.catalog.record?.issued"
+        class="meta-info__item"
+      >
+        {{ t('message.dataset_detail.created_on') }}
+         <OdsRelativeDateToggle :date="new Date(props.dataset.catalog.record.issued)" />
+      </span>
+      <span
+        v-if="props.dataset.catalog.record?.modified"
+        class="meta-info__item"
+        style="cursor: pointer"
+      >
+        {{ t('message.dataset_detail.modified_on') }}
+        <OdsRelativeDateToggle :date="new Date(props.dataset.catalog.record.modified)" />
+      </span>
+    </p>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import type { Dataset } from '~/model/dataset'
-import OdsButton from '../OdsButton.vue'
-import SvgIcon from "~/components/SvgIcon.vue";
+import type { DcatApChV2DatasetAdapter } from './model/dcat-ap-ch-v2-dataset-adapter'
+import OdsRelativeDateToggle from '../OdsRelativeDateToggle.vue';
 
-const { locale, t } = useI18n()
+const { t } = useI18n()
 
-const showRaw = ref(false)
-const showCatalogInfo = ref(false)
 const props = defineProps({
   dataset: {
-    type: Object as () => Dataset,
+    type: Object as PropType<DcatApChV2DatasetAdapter>,
     required: true
   }
 })
 
-function toggleRaw() {
-  showRaw.value = !showRaw.value
-}
 </script>
 
 <style lang="scss" scoped>
@@ -126,15 +66,15 @@ function toggleRaw() {
   align-items: flex-start;
   justify-content: flex-start;
 }
+
 .button-container {
   display: flex;
   flex-direction: row;
   gap: 6px;
   align-items: center;
   justify-content: flex-start;
-
-
 }
+
 .rotated {
   transform: rotate(180deg);
   transition: transform 0.2s;
diff --git a/opendata.swiss/ui/app/components/dataset-detail/OdsDatasetMetaInfo.vue b/opendata.swiss/ui/app/components/dataset-detail/OdsDatasetMetaInfo.vue
index 302f845..fe92224 100644
--- a/opendata.swiss/ui/app/components/dataset-detail/OdsDatasetMetaInfo.vue
+++ b/opendata.swiss/ui/app/components/dataset-detail/OdsDatasetMetaInfo.vue
@@ -1,79 +1,56 @@
 <template>
-      <span class="dataset-label">{{ t('message.dataset_detail.dataset') }}</span>
-
+  <span class="dataset-label">{{ t('message.dataset_detail.dataset') }}</span>
   <p class="meta-info">
     <span
-      v-if="props.dataset.getCreated"
+      v-if="props.dataset.releaseDate"
       class="meta-info__item"
-      style="cursor: pointer"
-      :title="showRaw ? t('message.dataset_detail.show_relative') : t('message.dataset_detail.show_raw')"
-      :aria-label="showRaw ? t('message.dataset_detail.show_relative') : t('message.dataset_detail.show_raw')"
-      @click="toggleRaw"
     >
-      {{ t('message.dataset_detail.published_on') }}
-      <NuxtTime
-        :datetime="new Date(props.dataset.getCreated)"
-        :locale="locale"
-        :relative="!showRaw"
-      />
+      {{ t('message.dataset_detail.released') }}
+      <OdsRelativeDateToggle :date="props.dataset.releaseDate" />
     </span>
     <span
-      v-if="props.dataset.getModified"
+      v-if="props.dataset.modificationDate"
       class="meta-info__item"
-      style="cursor: pointer"
-      :title="showRaw ? t('message.dataset_detail.show_relative') : t('message.dataset_detail.show_raw')"
-      :aria-label="showRaw ? t('message.dataset_detail.show_relative') : t('message.dataset_detail.show_raw')"
-      @click="toggleRaw"
     >
       {{ t('message.dataset_detail.modified_on') }}
-      <NuxtTime
-        :datetime="new Date(props.dataset.getModified)"
-        :locale="locale"
-        :relative="!showRaw"
-      />
+      <OdsRelativeDateToggle :date="props.dataset.modificationDate" />
     </span>
      <span
-      v-if="props.dataset.getOdsAccrualPeriodicity"
+      v-if="props.dataset.frequency"
       class="meta-info__item"
     >
-      {{ t('message.dataset_detail.accrual_periodicity') }} <a class="link--external" :href="props.dataset.getOdsAccrualPeriodicity.resource">{{ props.dataset.getOdsAccrualPeriodicity.label }}</a>
+      {{ t('message.dataset_detail.frequency') }}
+      <a class="link--external" target="_blank" :href="props.dataset.frequency.resource">{{ props.dataset.frequency.label }}</a>
     </span>
   </p>
-  <p class="meta-info catalog-meta-info">
-      <OdsDatasetCatalogPanel style="display: inline;" :dataset="props.dataset" />
-  </p>
-
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import type { Dataset } from '~/model/dataset'
-import OdsDatasetCatalogPanel from './OdsDatasetCatalogPanel.vue'
+import type { DcatApChV2DatasetAdapter } from './model/dcat-ap-ch-v2-dataset-adapter'
+import OdsRelativeDateToggle from '../OdsRelativeDateToggle.vue'
 
-const { locale, t } = useI18n()
+const { t } = useI18n()
 
-const showRaw = ref(false)
 
 const props = defineProps({
   dataset: {
-    type: Object as () => Dataset,
+    type: Object as PropType<DcatApChV2DatasetAdapter>,
     required: true
   }
 })
 
-function toggleRaw() {
-  showRaw.value = !showRaw.value
-}
 </script>
 
 <style lang="scss" scoped>
+
 .catalog-meta-info {
   margin-top: 0 !important;
   display: flex;
   flex-direction: row;
   align-items: center;
 }
+
 .dataset-label {
   position: relative;
   background-color: #e6f0fa;
diff --git a/opendata.swiss/ui/app/components/dataset-detail/OdsDetailTermsOfUse.vue b/opendata.swiss/ui/app/components/dataset-detail/OdsDetailTermsOfUse.vue
index e79fd58..92604f9 100644
--- a/opendata.swiss/ui/app/components/dataset-detail/OdsDetailTermsOfUse.vue
+++ b/opendata.swiss/ui/app/components/dataset-detail/OdsDetailTermsOfUse.vue
@@ -1,7 +1,6 @@
 <template>
     <div class="ods-license">
       <h2 class="download-item__title">{{ t(`message.terms_of_use.ods_${termsName}.title`) }}</h2>
-
       <img
         :src="imageSrc"
         :alt="t(`message.terms_of_use.ods_${termsName}.title`)"
@@ -56,6 +55,7 @@ const imageSrc = computed(() => `/img/terms-of-use/terms_${termsName.value}.png`
   flex-direction: column;
 
 }
+
 img {
     height: 100%;
 
diff --git a/opendata.swiss/ui/app/components/dataset-detail/OdsDetailsTable.vue b/opendata.swiss/ui/app/components/dataset-detail/OdsDetailsTable.vue
index e640b37..764ac1d 100644
--- a/opendata.swiss/ui/app/components/dataset-detail/OdsDetailsTable.vue
+++ b/opendata.swiss/ui/app/components/dataset-detail/OdsDetailsTable.vue
@@ -1,76 +1,43 @@
 <template>
-<div>
-  <template v-for="row in tableEntries" :key="row.id">
-    <OdsInfoBlock :title="row.label">
-      <div v-if="row.type === 'value'">{{ row.value }}</div>
-      <div v-if="row.type === 'href'">
-        <a v-if="row.href && row.href.startsWith('http')" :href="row.href" class="link--external">{{ row.value }}</a>
-        <a v-if="row.href && !row.href.startsWith('http')" :href="row.href">{{ row.value }}</a>
-      </div>
-    </OdsInfoBlock>
-  </template>
-</div>
-
-
+  <div>
+    <template v-for="entry in props.tableEntries" :key="entry.id">
+      <OdsInfoBlock :title="entry.label">
+        <template v-for ="(data, index) in entry.value" :key="index">
+            <span v-if="data.type === 'value'">
+            <template v-if="data.value">
+              <template v-if="!isNaN(Date.parse(data.value))">
+              <OdsRelativeDateToggle :date="new Date(data.value)" />
+              </template>
+              <template v-else>
+              {{ data.value }}
+              </template>
+            </template>
+            </span>
+          <span v-if="data.type === 'href'">
+            <a :href="data.href" target="_blank" rel="noopener noreferrer" class="link--external">{{ data.value }}</a>
+          </span>
+          <span v-if="data.type === 'email'">
+            <a :href="data.href">&lt;{{ data.value }}&gt;</a>
+          </span>
+          <span>&nbsp;</span>
+        </template>
+      </OdsInfoBlock>
+    </template>
+  </div>
 </template>
 
 <script setup lang="ts">
-
-import type { PropertyTableEntry, PropertyTableEntryNode } from '@piveau/sdk-vue';
-import { computed } from 'vue'
-import OdsInfoBlock from "~/components/OdsInfoBlock.vue";
-
-interface TableEntry {
-  id: string;
-  label: string;
-  value: string;
-  href?: string;
-  type: 'value' | 'href';
-}
-
-interface Props {
-  rootNode: PropertyTableEntryNode
-}
-
-const props = defineProps<Props>()
-
-
-
-
-
-const tableEntries = computed(() => {
-//  const nodeTree = definePropertyNode({ id: 'root', data: resultEnhanced.value?.getPropertyTable }, { compact: true, maxDepth: 5 })
-  const flattenedNodes = flattenNode(props.rootNode);
-  return flattenedNodes;
-})
-
-function flattenNode(node: PropertyTableEntry): TableEntry[] {
-  if (node.type === 'node') {
-    const valueNodes = node.data?.filter(n => n.type === 'value') ?? [];
-    const hrefNodes = node.data?.filter(n => n.type === 'href') ?? [];
-    const nestedNodes = node.data?.filter(n => n.type === 'node') ?? [];
-
-    const valueEntries: TableEntry[] = valueNodes.map(n => ({
-      id: n.id,
-      label: node.label || '',
-      value: n.data || '',
-      type: 'value'
-    }));
-
-    const hrefEntries: TableEntry[] = hrefNodes.map(n => ({
-      id: n.id,
-      label: node.label || '',
-      value: n.data.label || '',
-      href: n.data.href || '',
-      type: 'href'
-    }));
-    const nestedEntries: TableEntry[] = nestedNodes.flatMap(n => flattenNode(n));
-    return [...valueEntries, ...hrefEntries, ...nestedEntries];
+import type { TableEntry } from './model/table-entry';
+import OdsInfoBlock from '../OdsInfoBlock.vue';
+import OdsRelativeDateToggle from '../OdsRelativeDateToggle.vue';
+
+const props = defineProps({
+  tableEntries: {
+    type: Array as PropType<TableEntry[]>,
+    required: true
   }
+})
 
-  return [];
-
-}
 </script>
 
 <style lang="scss">
diff --git a/opendata.swiss/ui/app/components/dataset-detail/OdsDistributionList.vue b/opendata.swiss/ui/app/components/dataset-detail/OdsDistributionList.vue
index e4908f7..d2e71fc 100644
--- a/opendata.swiss/ui/app/components/dataset-detail/OdsDistributionList.vue
+++ b/opendata.swiss/ui/app/components/dataset-detail/OdsDistributionList.vue
@@ -1,57 +1,34 @@
 <template>
-  <OdsDistributionListItem v-for="item in items" :key="item.id" :item="item" :dataset-id="props.dataset.getId" />
+  <div class="ods-distribution-list">
+    <OdsDistributionListItem v-for="dist in props.distributions" :key="dist.id" :distribution="dist" class="list-element" />
+  </div>
 </template>
 
 <script setup lang="ts">
 
-import { computed } from 'vue'
-
-import { useI18n } from 'vue-i18n'
-
-import type { Dataset } from '~/model/dataset';
-import OdsDistributionListItem, { type DistributionListItem } from './OdsDistributionListItem.vue';
-import type { PropertyTableEntryBase, PropertyTableEntryNode } from '@piveau/sdk-vue';
-
-const { locale } = useI18n()
+import OdsDistributionListItem from './OdsDistributionListItem.vue';
+import type { DcatApChV2DistributionAdapter } from './model/dcat-ap-ch-v2-distribution-adapter';
 
 
 const props = defineProps({
-  dataset: {
-    type: Object as PropType<Dataset>,
+  distributions: {
+    type: Array as PropType<DcatApChV2DistributionAdapter[]>,
     required: true
   }
 })
 
-const items = computed<DistributionListItem[]>(() => {
-  const distributions = props.dataset.getDistributions
-  return (distributions || []).map(d => {
-    const propertyTable = d.getPropertyTable ?? []
-    const byteSize = findByteSize(propertyTable)
-    return {
-    id: d.id ?? '',
-    title: d.title ?? '',
-    description: d.description ?? '',
-    format: d.format ?? '',
-    modified: d.modified ?? '',
-    created: d.created ?? '',
-    issued: d.issued ?? '',
-    accessUrls: d.accessUrls || [],
-    downloadUrls: d.downloadUrls || [],
-    languages: d.languages || [],
-    byteSize
-  }}).sort((a, b) => a.title.localeCompare(b.title, locale.value))
-})
+</script>
 
-function findByteSize(table: PropertyTableEntryNode[] | undefined): string {
-  const byteSizeNode = table?.find(entry => entry.id === 'byteSize')
-  if(!byteSizeNode) {
-    return ''
-  }
-  const valueEntry = byteSizeNode.data?.find((entry: PropertyTableEntryBase) => entry.id === 'byteSize_value')
-  if(!valueEntry) {
-    return ''
-  }
-  return valueEntry.data as string
+
+<style lang="scss" scoped>
+
+.ods-distribution-list {
+  display: flex;
+  flex-direction: column;
 }
 
-</script>
+.list-element {
+  height: 105px;
+}
+
+</style>
diff --git a/opendata.swiss/ui/app/components/dataset-detail/OdsDistributionListItem.vue b/opendata.swiss/ui/app/components/dataset-detail/OdsDistributionListItem.vue
index 3e2a373..acfd561 100644
--- a/opendata.swiss/ui/app/components/dataset-detail/OdsDistributionListItem.vue
+++ b/opendata.swiss/ui/app/components/dataset-detail/OdsDistributionListItem.vue
@@ -1,30 +1,29 @@
 <template>
-   <div class="download-item">
+  <div class="download-item">
     <!-- spacer if no download URLs -->
-    <SvgIcon v-if="!props.item.downloadUrls.length" title="No download available. This is probably an api. Check details" icon="Download" size="xl" class="download-item__icon disabled" />
+    <SvgIcon v-if="!props.distribution.downloadUrls.length" title="No download available. This is probably an api. Check details" icon="Download" size="xl" class="download-item__icon disabled" />
 
-    <a v-for="downloadUrl in props.item.downloadUrls" :key="downloadUrl" :href="downloadUrl" target="_blank" rel="noopener" :title="'Download ' + props.item.title" class="download-item__link">
+    <a v-for="downloadUrl in props.distribution.downloadUrls" :key="downloadUrl" :href="downloadUrl" target="_blank" rel="noopener" :title="'Download ' + props.distribution.title" class="download-item__link">
       <SvgIcon icon="Download" size="xl" class="download-item__icon" />
     </a>
 
-    <NuxtLink :to="`${props.datasetId}/distribution/${props.item.id}`" class="no-underline" style="flex-grow: 1;">
-      <h3 class="download-item__title">{{ props.item.title }}</h3>
+    <NuxtLink :to="`${props.distribution.dataset.id}/distribution/${props.distribution.id}`" class="no-underline no-overvlow">
+      <h3 class="download-item__title" :title="props.distribution.title">{{ props.distribution.title }}</h3>
       <p class="download-item__description" />
 
-      <p class="meta-info download-item__meta-info">
-        <span v-if="item.format" class="meta-info__item">{{ item.format }}</span>
-        <span v-if="item.issued" class="meta-info__item">{{ item.modified ? item.modified : item.issued }}</span>
-        <span v-if="item.byteSize" class="meta-info__item">{{ item.byteSize }} Bytes</span>
-      </p>
-      <div style="display: flex; justify-content: flex-end; align-items: center; height: 100%; margin-top: -10px; margin-top:-40px;">
-          <OdsButton icon="ArrowRight" variant="bare" size="sm" class="download-item__button" icon-right :to="`${props.datasetId}/distribution/${props.item.id}`" >
-           <span>{{ t('message.dataset_detail.details') }}</span>
-          </OdsButton>
+      <div class="footer">
+        <p class="meta-info download-item__meta-info">
+          <span v-if="props.distribution.format" class="meta-info__item">{{ props.distribution.format }}</span>
+          <span v-if="props.distribution.releaseDate" class="meta-info__item">
+            <OdsRelativeDateToggle :date="props.distribution.modified ? props.distribution.modified : props.distribution.releaseDate" />
+          </span>
+          <span v-if="props.distribution.formattedByteSize" class="meta-info__item">{{ props.distribution.formattedByteSize }}</span>
+        </p>
+        <OdsButton icon="ArrowRight" variant="bare" size="sm" class="download-item__button" icon-right :to="`${props.distribution.dataset.id}/distribution/${props.distribution.id}`" >
+          <span>{{ t('message.dataset_detail.details') }}</span>
+        </OdsButton>
       </div>
-
     </NuxtLink>
-
-
   </div>
 </template>
 
@@ -32,34 +31,18 @@
 import SvgIcon from '../SvgIcon.vue';
 import OdsButton from '../OdsButton.vue';
 import { useI18n } from 'vue-i18n';
+import type { DcatApChV2DistributionAdapter } from './model/dcat-ap-ch-v2-distribution-adapter';
+import OdsRelativeDateToggle from '../OdsRelativeDateToggle.vue';
 
-const {  t } = useI18n();
+const { t } = useI18n();
 
 const props = defineProps({
-  item: {
-    type: Object as PropType<DistributionListItem>,
-    required: true
-  },
-  datasetId: {
-    type: String,
+  distribution: {
+    type: Object as PropType<DcatApChV2DistributionAdapter>,
     required: true
   }
 })
 
-export interface DistributionListItem {
-  id: string,
-  title: string,
-  description: string,
-  format: string,
-  modified: string,
-  created: string,
-  issued: string,
-  accessUrls: string[],
-  downloadUrls: string[],
-  languages: string[],
-  byteSize: string
-}
-
 </script>
 
 
@@ -73,4 +56,20 @@ export interface DistributionListItem {
   text-decoration: none;
 }
 
+.no-overvlow {
+  overflow-x: hidden;
+  flex-grow: 1;
+}
+
+.download-item__title {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+}
 </style>
diff --git a/opendata.swiss/ui/app/components/dataset-detail/OdsDownloadsList.vue b/opendata.swiss/ui/app/components/dataset-detail/OdsDownloadsList.vue
deleted file mode 100644
index b2e550d..0000000
--- a/opendata.swiss/ui/app/components/dataset-detail/OdsDownloadsList.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-  <ul v-if="props.dataset && props.dataset.getDistributions" class="download-items">
-    <li v-for="distribution in props.dataset.getDistributions" :key="distribution.id" >
-      <a v-for="link in distribution.downloadUrls" :key="link" :href="link"  class="download-item"  target="_blank">
-          <SvgIcon icon="Download" size="xl" role="download-item" />
-          <div>
-            <h2 class="download-item__title">{{ distribution.title }}</h2>
-            <!---->
-            <p class="meta-info download-item__meta-info"><span class="meta-info__item">{{ distribution.format ? distribution.format : distribution.title }}</span><span class="meta-info__item">{{ distribution.languages.join(', ') }}</span></p>
-          </div>
-      </a>
-<NuxtLink :to="`${props.dataset.getId}/distribution/${distribution.id}`">ocho</NuxtLink>
-    </li>
-  </ul>
-</template>
-
-<script setup lang="ts">
-import type { Dataset } from '~/model/dataset';
-import SvgIcon from "~/components/SvgIcon.vue";
-
-interface Props {
-  dataset: Dataset
-}
-
-const props = defineProps<Props>();
-
-
-</script>
diff --git a/opendata.swiss/ui/app/components/dataset-detail/OdsKeywordTag.vue b/opendata.swiss/ui/app/components/dataset-detail/OdsKeywordTag.vue
index 7eecc12..8dac3d3 100644
--- a/opendata.swiss/ui/app/components/dataset-detail/OdsKeywordTag.vue
+++ b/opendata.swiss/ui/app/components/dataset-detail/OdsKeywordTag.vue
@@ -1,7 +1,7 @@
 <template>
-<a :href="props.link" type="false" aria-label="false">
-  <OdsTagItem :label="props.label" />
-</a>
+  <a :href="props.link" type="false" aria-label="false">
+    <OdsTagItem :label="props.label" />
+  </a>
 </template>
 
 
@@ -9,8 +9,14 @@
 
 import OdsTagItem from "~/components/OdsTagItem.vue";
 
-const props = defineProps<{
-  link: string
-  label: string
-}>()
+const props = defineProps({
+  link: {
+    type: String,
+    required: true
+  },
+  label: {
+    type: String,
+    required: true
+  }
+})
 </script>
diff --git a/opendata.swiss/ui/app/components/dataset-detail/OdsMetadataDownloadList.vue b/opendata.swiss/ui/app/components/dataset-detail/OdsMetadataDownloadList.vue
new file mode 100644
index 0000000..af9941c
--- /dev/null
+++ b/opendata.swiss/ui/app/components/dataset-detail/OdsMetadataDownloadList.vue
@@ -0,0 +1,49 @@
+<template>
+  <div v-for="path in props.dataset.getLinkedData" :key="path">
+    <a
+      :href="PIVEAU_HUB_REPO_URL + 'datasets' + path"
+      target="_blank"
+      :title="t(`message.dataset_detail.metadata_download`)"
+      :aria-label="t(`message.dataset_detail.metadata_download`)"
+      class="download-item"
+    >
+      <SvgIcon icon="Download" size="xl" class="download-item__icon" />
+      <div>
+       <h2 class="download-item__title">{{(t(`message.dataset_detail.metadata`)).toLowerCase() + '.' + path.split('.').pop() }}</h2>
+       <p class="meta-info download-item__meta-info">
+          <span class="meta-info__item">{{ path.split('.').pop() }}</span>
+        </p>
+      </div>
+    </a>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import SvgIcon from '../SvgIcon.vue';
+import type { DcatApChV2DatasetAdapter } from './model/dcat-ap-ch-v2-dataset-adapter';
+import { PIVEAU_HUB_REPO_URL } from '~/constants/piveau-endpoints';
+
+const { t } = useI18n();
+
+const props = defineProps({
+  dataset: {
+    type: Object as PropType<DcatApChV2DatasetAdapter>,
+    required: true
+  }
+});
+
+</script>
+
+<style scoped lang="scss">
+  a {
+    overflow-x: hidden;
+    word-break: break-all;
+  }
+
+  .download-item__title {
+    text-overflow: hidden;
+    overflow-x: hidden;
+    word-break: break-all;
+  }
+</style>
diff --git a/opendata.swiss/ui/app/components/dataset-detail/OdsTagList.vue b/opendata.swiss/ui/app/components/dataset-detail/OdsTagList.vue
index c838e03..53caad8 100644
--- a/opendata.swiss/ui/app/components/dataset-detail/OdsTagList.vue
+++ b/opendata.swiss/ui/app/components/dataset-detail/OdsTagList.vue
@@ -1,6 +1,6 @@
 <template>
 <ul class="list list--flex list--wrap">
-  <li v-for="(c, index) in props.tags" :key="index">
+  <li v-for="c in props.tags" :key="c.resource">
     <OdsKeywordTag :link="c.resource" :label="c.label.en ?? ''" />
   </li>
 </ul>
@@ -11,7 +11,11 @@
 import OdsKeywordTag from '@/components/dataset-detail/OdsKeywordTag.vue'
 
 import type { Category } from '@piveau/sdk-core';
-const props = defineProps<{
-  tags: Category[]
-}>()
+const props = defineProps({
+  tags: {
+    type: Array as PropType<Category[]>,
+    required: true
+  }
+});
+
 </script>
diff --git a/opendata.swiss/ui/app/components/dataset-detail/category.ts b/opendata.swiss/ui/app/components/dataset-detail/model/category.ts
similarity index 100%
rename from opendata.swiss/ui/app/components/dataset-detail/category.ts
rename to opendata.swiss/ui/app/components/dataset-detail/model/category.ts
diff --git a/opendata.swiss/ui/app/components/dataset-detail/model/dcat-ap-ch-v2-dataset-adapter.ts b/opendata.swiss/ui/app/components/dataset-detail/model/dcat-ap-ch-v2-dataset-adapter.ts
new file mode 100644
index 0000000..af73ef0
--- /dev/null
+++ b/opendata.swiss/ui/app/components/dataset-detail/model/dcat-ap-ch-v2-dataset-adapter.ts
@@ -0,0 +1,284 @@
+import type { LinkedDataFormats, PropertyTableEntryNode } from '@piveau/sdk-vue';
+import type { Dataset } from '../../../model/dataset'
+import { DcatApChV2DistributionAdapter } from './dcat-ap-ch-v2-distribution-adapter'
+import type { TableEntry } from './table-entry';
+import type { Catalog } from '~/piveau/get-ods-catalog-info';
+
+export class DcatApChV2DatasetAdapter {
+  #dataset: Dataset;
+
+  constructor(d: Dataset) {
+    this.#dataset = d;
+  }
+
+  /**
+   * Get the id of the dataset
+   *
+   */
+  get id() {
+    return this.#dataset.getId;
+  }
+
+  /**
+   * Get the title of the dataset. The title is mandatory but if not available it returns the id.
+   * The language handling is done by piveau.
+   *
+   * from dcat-ap-ch:
+   * Property	Title
+   * Requirement level	Mandatory
+   * Cardinality	1..n
+   * URI	dct:title
+   * Range	rdfs:Literal
+   * Usage Note
+   * This property contains a name given to the Dataset.
+   * This property can be repeated for parallel language versions of the title (see 2.3 Multilingualism).
+   */
+  get title(): string {
+    return this.#dataset?.getTitle ?? this.id;
+  }
+
+  /**
+   * Get the description of the dataset. A description is mandatory but if not available it returns an empty string.
+   *
+   * The language handling is done by piveau.
+   *
+   * from dcat-ap-ch:
+   * Property	description
+   * Requirement level	Mandatory
+   * Cardinality	1..n
+   * URI	dct:description
+   * Range	rdfs:Literal
+   * Usage Note
+   * This property contains a free-text account of the Dataset.
+   * This property can be repeated for parallel language versions of the description (see 2.3 Multilingualism). On the user interface of data portals, the content of the element whose language corresponds to the display language selected by the user is displayed.
+   */
+  get description(): string | undefined {
+    return this.#dataset?.getDescription ?? '';
+  }
+
+  get getCategories(): { label: Record<string, string>; id: string; resource: string; }[] {
+    return this.#dataset?.getCategories ?? [];
+  }
+
+  /**
+   * Get the publisher of the dataset.
+   *
+   * from dcat-ap-ch:
+   * Property	publisher
+   * Requirement level	Mandatory
+   * Cardinality	1..1
+   * URI	dct:publisher
+   * Range	foaf:Agent
+   * Usage Note
+   * - This property refers to an entity (organisation) responsible for making the Dataset available.
+   *
+   */
+  get publisher() {
+    const publisher = this.#dataset.getPublisher;
+    // the interface in piveau is wrong.
+    // i get this ...
+    // {
+    //   name: "Bundesamt für Lebensmittelsicherheit und Veterinärwesen BLV",
+    //   resource: "https://www.blv.admin.ch",
+    //   type: "Agent",
+    // }
+
+    if (!publisher) {
+      return undefined
+    }
+
+    return {
+      type: publisher.type ?? '',
+      name: publisher.name ?? '',
+      resource: (publisher as unknown as { resource: string }).resource ?? ''
+    }
+
+  }
+
+  get getLicenses(): string[] {
+    return this.#dataset?.getLicenses ?? [];
+  }
+  /**
+   * Get the licenses of the dataset.
+   *
+   */
+  get licenses(): string[] {
+    return this.#dataset?.getLicenses ?? [];
+  }
+
+  /**
+   * Get the release date of the dataset if available
+   *
+   * from dcat-ap-ch:
+   * Property	release date
+   * Requirement level	Recommended
+   * Cardinality	0..1
+   * URI	dct:issued
+   * Range	rdfs:Literal (typed as as xsd:date, xsd:dateTime, xsd:gYear or xsd:gYearMonth)
+   * Usage Note
+   * - This property contains the date of formal issuance (e.g., first publication of the Dataset).
+   * - If this date is not known, the date of the first referencing of the data collection in the Catalogue can be entered.
+   */
+  get releaseDate() {
+    if (!this.#dataset.getIssued) {
+      return undefined
+    }
+    return new Date(this.#dataset.getIssued)
+  }
+
+  /**
+   * Get the modification date of the dataset if available
+   *
+   * from dcat-ap-ch:
+   * Property	update/ modification date
+   * Requirement level	Recommended
+   * Cardinality	0..1
+   * URI	dct:modified
+   * Range	rdfs:Literal (typed as as xsd:date, xsd:dateTime, xsd:gYear or xsd:gYearMonth)
+   * Usage Note
+   * - This property contains the most recent date on which the Dataset was changed or modified.
+   * - No value may indicate that the Dataset has never changed after its initial publication,
+   *   or that the date of the last modification is not known, or that the Dataset is continuously updated
+   * - This property MUST only be set if the distributions (the actual data) that the Dataset describes
+   *   have been updated after it has been issued. In this case the property MUST contain the date of the last update.
+   *   That way a person or institution using the data for an analysis or application will know when to update the
+   *   report or application on their side.
+   */
+  get modificationDate() {
+    if (!this.#dataset.getModified) {
+      return undefined
+    }
+    return new Date(this.#dataset.getModified)
+  }
+
+  get getLinkedData(): Record<LinkedDataFormats, string> {
+    return this.#dataset?.getLinkedData ?? {} as Record<LinkedDataFormats, string>;
+  }
+
+  get getDistributions(): { id: string; title: string | undefined; description: string | undefined; format: string; modified: string | undefined; license: { label?: string | null | undefined; id?: string | null | undefined; description?: string | null | undefined; resource?: string | null | undefined; } | undefined; created: string | undefined; issued: string | undefined; languages: string[]; accessUrls: string[]; downloadUrls: string[]; getLinkedData: Record<LinkedDataFormats, string>; getPropertyTable: PropertyTableEntryNode[]; }[] {
+    return this.#dataset?.getDistributions ?? [];
+  }
+
+  /**
+   * Returns the distributions wrapped in DistributionAdapter instances
+   *
+   * @returns {DistributionAdapter[]} An array of DistributionAdapter instances
+   */
+  get distributions() {
+    return this.#dataset.getDistributions.map(d => new DcatApChV2DistributionAdapter(d, this));
+  }
+
+  /**
+   * Get the available formats of the dataset
+   */
+  get getOdsFormats(): { id?: string | null | undefined; label?: string | null | undefined; resource?: string | null | undefined; }[] {
+    return this.#dataset?.getOdsFormats ?? [];
+  }
+
+
+  get getKeywords(): { id: string; label: string; language: string; }[] {
+    return this.#dataset?.getKeywords ?? [];
+  }
+
+  /**
+   * Get the catalog information of the dataset if available
+   */
+  get catalog(): Catalog {
+    return this.#dataset.getOdsCatalogInfo
+  }
+
+
+  /**
+   * Get the accrual periodicity of the dataset if available
+   *
+   * from dcat-ap-ch:
+   * Property	frequency
+   * Requirement level	Optional
+   * Cardinality	0..1
+   * URI	dct:accrualPeriodicity
+   * Range	dct:Frequency
+   * Usage Note
+   * - This property refers to the frequency at which the Dataset is updated.
+   * - CV to be used: [VOCAB-EU-FREQUENCY].
+   */
+  get frequency() {
+    return this.#dataset.getOdsAccrualPeriodicity;
+  }
+
+  get propertyTable() {
+    const rootNode = this.#dataset.getPropertyTable;
+    if (!rootNode) {
+      return [];
+    }
+
+    const ignoredNode = ['catalogRecord'];
+    const nodesToConsider = rootNode.filter(n => n.data).filter(n => !ignoredNode.includes(n.id));
+
+    const table: TableEntry[] = [];
+    for (const node of nodesToConsider) {
+
+      const entry = {} as Partial<TableEntry>;
+
+      if (node.type === 'node' && node.data) {
+        entry.label = node.label;
+        entry.nodeType = 'node';
+
+        if (node.data && node.data.length > 0) {
+          for (const child of node.data) {
+            if (child.type === 'value') {
+              if (!entry.value) {
+                entry.value = [{ value: child.data as string, type: 'value' }];
+              } else {
+                entry.value.push({ value: child.data as string, type: 'value' });
+              }
+            } else if (child.type === 'href') {
+              const hrefData = child.data as { label: string; href: string };
+              if (!entry.value) {
+                entry.value = [{ value: hrefData.label, href: hrefData.href, type: 'href' }];
+              } else {
+                entry.value.push({ value: hrefData.label, href: hrefData.href, type: 'href' });
+              }
+            } else {
+              if (node.id === 'publisher') {
+                // special handling for publisher node
+                for (const data of child.data ?? []) {
+                  if (!entry.value) {
+                    entry.value = [{ value: data.data as string, type: 'value' }];
+                  } else {
+                    entry.value.push({ value: data.data as string, type: 'value' });
+                  }
+                }
+              } else if (node.id === 'contactPoint') {
+                // special handling for contactPoint node
+                const nameNode = child.data?.find(d => d.id === 'contactPointName')
+                const emailNode = child.data?.find(d => d.id === 'contactPointEmail')
+                if (nameNode && emailNode && nameNode.data && emailNode.data) {
+
+                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                  const emailData = ((emailNode.data as Array<any>)[0] as any).data;
+                  const href = emailData.href;
+                  const name = emailData.label;
+
+                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                  const nameData = ((nameNode.data as Array<any>)[0] as any).data;
+                  const publisherName = nameData as string;
+                  if (!entry.value) {
+                    entry.value = [{ value: publisherName, type: 'value' }];
+                    entry.value.push({ value: name, href, type: 'email' });
+                  }
+                }
+              }
+            }
+          }
+          table.push(entry as TableEntry);
+        }
+
+      }
+
+    }
+    return table.sort((a, b) => a.label.localeCompare(b.label));
+  }
+}
+
+
+
diff --git a/opendata.swiss/ui/app/components/dataset-detail/model/dcat-ap-ch-v2-distribution-adapter.ts b/opendata.swiss/ui/app/components/dataset-detail/model/dcat-ap-ch-v2-distribution-adapter.ts
new file mode 100644
index 0000000..03e0e79
--- /dev/null
+++ b/opendata.swiss/ui/app/components/dataset-detail/model/dcat-ap-ch-v2-distribution-adapter.ts
@@ -0,0 +1,367 @@
+import type { LinkedDataFormats } from '@piveau/sdk-vue';
+import type { Dataset } from '../../../model/dataset'
+import type { DcatApChV2DatasetAdapter } from './dcat-ap-ch-v2-dataset-adapter';
+import type { TableEntry } from './table-entry';
+
+
+type EnhancedDistribution = Dataset['getDistributions'][number]
+
+
+export class DcatApChV2DistributionAdapter {
+  #distribution: EnhancedDistribution | undefined;
+  #dataset: DcatApChV2DatasetAdapter;
+
+  constructor(d: EnhancedDistribution, dataset: DcatApChV2DatasetAdapter) {
+    this.#distribution = d;
+    this.#dataset = dataset;
+  }
+
+  /**
+   * Get the dataset this distribution belongs to
+   */
+  get dataset() {
+    return this.#dataset;
+  }
+
+  /**
+   * Get the title of the distribution.
+   *
+   * It return the title of the distribution if available, otherwise it returns the title of the dataset. The title on a distribution is not mandatory if
+   * the distribution contains the whole dataset.
+   * Language handling is done by peiveau.
+   *
+   * From dcat-ap-ch:
+   * Property	Title
+   * Requirement level	Recommended
+   * Cardinality	0..n
+   * URI	dct:title
+   * Range	rdfs:Literal
+   * Usage Note
+   * - This property contains a name given to the Distribution. This property can be repeated for parallel language versions of the description (see 2.3 Multilingualism).
+   * - The title MUST be given if the distribution contains only part of the data offered by the Dataset
+   * - The title can be given in several languages. In multilingual data portals, the title in the language selected by a user will usually be shown as title for the distribution.
+   */
+  get title() {
+    return this.#distribution?.title || this.#dataset.title;
+  }
+
+  /**
+   * Get the description of the distribution. If not available, return the description of the dataset.
+   *
+   * It returns the description of the distribution if available, otherwise it returns an empty string.
+   * Language handling is done by peiveau.
+   *
+   * Property	description
+   * Requirement level	Recommended
+   * Cardinality	0..n
+   * URI	dct:description
+   * Range	rdfs:Literal
+   * Usage Note
+   * - This property contains a free-text account of the Distribution.
+   * - The description MUST be provided if the distribution contains only part of the data offered by the Dataset.
+   * - This property can be repeated for parallel language versions of the description (see 2.3 Multilingualism).
+   *
+   */
+  get description() {
+    return this.#distribution?.description || this.#dataset.description || '';
+  }
+
+  /**
+   * Get the formattedByteSize size of the distribution if available
+   *
+   * from dcat-ap-ch:
+   * Property	byte size
+   * Requirement level	Optional
+   * Cardinality	0..1
+   * URI	dcat:byteSize
+   * Range	rdfs:Literal (typed as as xsd:decimal).
+   * Usage Note
+   * This property contains the size of a Distribution in bytes. If the precise size is not known, an approximate size can be indicated.
+   */
+  get formattedByteSize() {
+    const byteSizeNode = this.#distribution?.getPropertyTable.find(node => node.id === 'byteSize');
+
+    if (!byteSizeNode || !byteSizeNode.data?.length) {
+      return '';
+    }
+
+    const byteSizeValue = byteSizeNode.data[0]?.data;
+
+    if (!byteSizeValue || typeof byteSizeValue !== 'string') {
+      return '';
+    }
+
+    // Try to parse the byte size as a number.
+    // Piveau returns it as a string with dots as thousands separators which is not valid for Number()
+    const byteSizeNumber = Number(byteSizeValue.replace(/\./g, '').replace(/,/g, '').replace(/\s+/g, '')); // Remove spaces for thousands separators
+
+    if (isNaN(byteSizeNumber)) {
+      return byteSizeValue; // Return the raw value if parsing fails
+    }
+
+    if (byteSizeNumber === 0) {
+      return '0 B';
+    }
+
+    const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+    let size = byteSizeNumber;
+    let unitIndex = 0;
+
+    while (size >= 1024 && unitIndex < units.length - 1) {
+      size /= 1024;
+      unitIndex++;
+    }
+
+    return `${size % 1 === 0 ? size : size.toFixed(2)} ${units[unitIndex]}`;
+  }
+
+  /**
+   * Get the download URLs of the distribution.
+   *
+   * From dcat-ap-ch:
+   * Property	download URL
+   * Requirement level	Optional
+   * Cardinality	0..n
+   * URI	dcat:downloadURL
+   * Range	rdfs:Resource
+   * Usage Note
+   * - In case of a downloadable file, it is good practice to repeat the mandatory accessURL in this more specific property,
+   *   to indicate to the data user that the distribution has this extra characteristic of being downloadable. The downloadURLs
+   *   MAY thus be the same as the accessURLs but they MAY also differ.
+   */
+  get downloadUrls() {
+    return this.#distribution?.downloadUrls || [];
+  }
+
+  /**
+   * Get the access URLs of the distribution.
+   *
+   * From dcat-ap-ch:
+   * Property	access URL
+   * Requirement level	Mandatory
+   * Cardinality	1..n
+   * URI	dcat:accessURL
+   * Range	rdfs:Resource
+   * Usage Note
+   * - This property contains a URL that gives access to a Distribution of the Dataset. The resource at the access URL may contain
+   *   information about how to get the Dataset.
+   */
+  get accessUrls() {
+    return this.#distribution?.accessUrls || [];
+  }
+
+  /**
+   * Get the format of the distribution.
+   *
+   * From dcat-ap-ch:
+   * Property	format
+   * Requirement level	Recommended
+   * Cardinality	0..1
+   * URI	dct:format
+   * Range	dct:MediaTypeOrExtent
+   * Usage Note
+   * - This property refers to the file format of the Distribution.CV to be used: [VOCAB-EU-FILE-TYPE]
+   * - CV to be used: [VOCAB-EU-FILE-TYPE]
+   * - If a format is not available:
+   *   a) media type ([IANA-MEDIA-TYPES]) should be used
+   *   b) If necessary, a discussion to evaluate the adoption within the EU should be launched (Contact point: [VOCAB-EU-OP-CONTACT]).
+   */
+  get format(): string {
+    const format = this.#distribution?.format
+    if (format) {
+      return format;
+    }
+    // Fallback: get mediaType from property table
+    const mediaTypeNode = this.#distribution?.getPropertyTable.find(node => node.id === 'mediaType');
+    if (!mediaTypeNode || !mediaTypeNode.data?.length) {
+      return '';
+    }
+    const mediaType = mediaTypeNode?.data[0]?.data ?? '';
+    if (typeof mediaType !== 'string') {
+      return '';
+    }
+    return mediaType;
+  }
+
+  /**
+   * Get the license of the distribution if available
+   *
+   * From dcat-ap-ch:
+   * Property	license
+   * Requirement level	Mandatory
+   * Cardinality	1..1
+   * URI	dct:license
+   * Range	dct:LicenseDocument
+   * Usage Note
+   * This property refers to the licence under which the Distribution is made available.
+   * CV to used: [VOCAB-CH-LICENSE]
+   */
+  get license() {
+    const lic = this.#distribution?.license;
+    const licIri = lic?.resource
+    if (!licIri) {
+      return undefined;
+    }
+    return licIri
+  }
+
+
+  /**
+   * Get the release date of the distribution if available
+   * Property	release date
+   * Requirement level	Optional
+   * Cardinality	0..1
+   * URI	dct:issued
+   * Range	rdfs:Literal (typed as as xsd:date, xsd:dateTime, xsd:gYear or xsd:gYearMonth)
+   * Usage Note
+   * - This property contains the date of formal issuance (e.g., publication) of the Distribution.
+   * - Date of formal issuance (publication) of the distribution
+   * - UsageThe first time issuance of the distribution.
+   *
+   * @returns {Date | undefined} The release date as a Date object, or undefined if not available or invalid.
+   */
+  get releaseDate() {
+    const releaseDateString = this.#distribution?.issued || '';
+    if (!releaseDateString) {
+      return undefined;
+    }
+    const releaseDate = new Date(releaseDateString);
+    return isNaN(releaseDate.getTime()) ? undefined : releaseDate;
+  }
+
+  /**
+   * Get the modified date of the distribution if available
+   *
+   * from dcat-ap-ch:
+   *  Property: update/modification date
+   * This property contains the most recent date on which the Distribution was changed or modified.
+   * Property	update/ modification date
+   * Requirement level	Recommended
+   * Cardinality	0..1
+   * URI	dct:modified
+   * Range	rdfs:Literal (typed as as xsd:date, xsd:dateTime, xsd:gYear or xsd:gYearMonth)
+   * Usage Note
+   *
+   * @returns {Date | undefined} The modified date as a Date object, or undefined if not available or invalid.
+   */
+  get modified() {
+    const modifiedDateString = this.#distribution?.modified || '';
+    if (!modifiedDateString) {
+      return undefined;
+    }
+    const modifiedDate = new Date(modifiedDateString);
+    return isNaN(modifiedDate.getTime()) ? undefined : modifiedDate;
+  }
+
+  /**
+   * Get the id of the distribution
+   *
+   * Note: This is not part of dcat-ap-ch, but added by piveau
+   */
+  get id() {
+    return this.#distribution?.id || '';
+  }
+
+  /**
+   * Property	Language
+   * Requirement level	Optional
+   * Cardinality	0..n
+   * URI	dct:language
+   * Range	rdfs:Literal
+   * Usage Note
+   * - This property refers to a language used in the Distribution.
+   * - This property can be repeated if the metadata is provided in multiple languages.
+   * - The property MUST be set if the distribution is language-dependent or if it is given in some of the languages
+   *   German, French, Italian and English but not in all four languages.
+   * - CV to be used: [VOCAB-EU-LANGUAGE]
+   */
+  get languages() {
+    return this.#distribution?.languages || [];
+  }
+
+  get getLinkedData(): Record<LinkedDataFormats, string> {
+    return this.#distribution?.getLinkedData ?? {
+      rdf: '',
+      ttl: '',
+      n3: '',
+      nt: '',
+      jsonld: ''
+    };
+  }
+
+
+  get propertyTable() {
+    const rootNode = this.#distribution?.getPropertyTable;
+    if (!rootNode) {
+      return [];
+    }
+
+    const ignoredNode: string[] = ['byteSize'];
+    const nodesToConsider = rootNode.filter(n => n.data).filter(n => !ignoredNode.includes(n.id));
+
+    const table: TableEntry[] = [];
+    for (const node of nodesToConsider) {
+
+      const entry = {} as Partial<TableEntry>;
+
+      if (node.type === 'node' && node.data) {
+        entry.label = node.label;
+        entry.nodeType = 'node';
+
+        if (node.data && node.data.length > 0) {
+          for (const child of node.data) {
+            if (child.type === 'value') {
+              if (!entry.value) {
+                entry.value = [{ value: child.data as string, type: 'value' }];
+              } else {
+                entry.value.push({ value: child.data as string, type: 'value' });
+              }
+            } else if (child.type === 'href') {
+              const hrefData = child.data as { label: string; href: string };
+              if (!entry.value) {
+                entry.value = [{ value: hrefData.label, href: hrefData.href, type: 'href' }];
+              } else {
+                entry.value.push({ value: hrefData.label, href: hrefData.href, type: 'href' });
+              }
+            } else {
+              if (node.id === 'publisher') {
+                // special handling for publisher node
+                for (const data of child.data ?? []) {
+                  if (!entry.value) {
+                    entry.value = [{ value: data.data as string, type: 'value' }];
+                  } else {
+                    entry.value.push({ value: data.data as string, type: 'value' });
+                  }
+                }
+              } else if (node.id === 'contactPoint') {
+                // special handling for contactPoint node
+                const nameNode = child.data?.find(d => d.id === 'contactPointName')
+                const emailNode = child.data?.find(d => d.id === 'contactPointEmail')
+                if (nameNode && emailNode && nameNode.data && emailNode.data) {
+
+                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                  const emailData = ((emailNode.data as Array<any>)[0] as any).data;
+                  const href = emailData.href;
+                  const name = emailData.label;
+
+                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                  const nameData = ((nameNode.data as Array<any>)[0] as any).data;
+                  const publisherName = nameData as string;
+                  if (!entry.value) {
+                    entry.value = [{ value: publisherName, type: 'value' }];
+                    entry.value.push({ value: name, href, type: 'email' });
+                  }
+                }
+              }
+            }
+          }
+          table.push(entry as TableEntry);
+        }
+
+      }
+
+    }
+
+    return table.sort((a, b) => a.label.localeCompare(b.label));
+  }
+}
diff --git a/opendata.swiss/ui/app/components/dataset-detail/model/table-entry.ts b/opendata.swiss/ui/app/components/dataset-detail/model/table-entry.ts
new file mode 100644
index 0000000..d9a0927
--- /dev/null
+++ b/opendata.swiss/ui/app/components/dataset-detail/model/table-entry.ts
@@ -0,0 +1,11 @@
+export interface TableEntry {
+  label: string;
+  value: [
+    {
+      value: string;
+      href?: string;
+      type: 'value' | 'href' | 'email';
+    }
+  ];
+  nodeType: 'node' | 'value' | 'href';
+}
diff --git a/opendata.swiss/ui/app/components/dataset/OdsDatasetCardListItem.vue b/opendata.swiss/ui/app/components/dataset/OdsDatasetCardListItem.vue
index 5c071cb..73f7696 100644
--- a/opendata.swiss/ui/app/components/dataset/OdsDatasetCardListItem.vue
+++ b/opendata.swiss/ui/app/components/dataset/OdsDatasetCardListItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <OdsCard :title="props.item.getTitle" type="universal" clickable>
+  <OdsCard :title="props.item.getTitle ?? ''" type="universal" clickable class="strech-card">
     <template #top-meta>
       <div>
         <span class="meta-info__item">{{ t('message.dataset_detail.dataset') }}</span>
@@ -48,3 +48,9 @@ const props = defineProps<Props>()
 
 
 </script>
+
+<style scoped lang="scss">
+.strech-card {
+  height: 100%;
+}
+</style>
diff --git a/opendata.swiss/ui/app/components/distribution/OdsDownloadList.vue b/opendata.swiss/ui/app/components/distribution/OdsDownloadList.vue
new file mode 100644
index 0000000..a414689
--- /dev/null
+++ b/opendata.swiss/ui/app/components/distribution/OdsDownloadList.vue
@@ -0,0 +1,39 @@
+<template>
+  <ul class="download-items">
+    <li v-for="url in props.downloadUrls" :key="url">
+      <OdsDownloadListItem :download-url="url" :name="props.name" :format="props.format" :languages="props.languages" :byte-size="props.byteSize" />
+    </li>
+  </ul>
+</template>
+
+
+<script setup lang="ts">
+import OdsDownloadListItem from './OdsDownloadListItem.vue';
+
+const props = defineProps({
+  downloadUrls: {
+    type: Array as PropType<string[]>,
+    required: true
+  },
+  format : {
+    type: String,
+    required: false,
+    default: ''
+  },
+  name : {
+    type: String,
+    required: true
+  },
+  languages: {
+    type: Array as PropType<string[]>,
+    required: false,
+    default: () => []
+  },
+  byteSize: {
+    type: String,
+    required: false,
+    default: ''
+  }
+});
+
+</script>
diff --git a/opendata.swiss/ui/app/components/distribution/OdsDownloadListItem.vue b/opendata.swiss/ui/app/components/distribution/OdsDownloadListItem.vue
new file mode 100644
index 0000000..2c31cf3
--- /dev/null
+++ b/opendata.swiss/ui/app/components/distribution/OdsDownloadListItem.vue
@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <a class="download-item" :href="props.downloadUrl" target="_blank">
+      <SvgIcon icon="Download" size="xl" class="download-item__icon" />
+      <div>
+       <h2 class="download-item__title">{{ props.name }}</h2>
+       <p class="meta-info download-item__meta-info">
+          <span v-if="props.format" class="meta-info__item">{{ props.format }}</span>
+          <span v-if="props.byteSize" class="meta-info__item">{{ props.byteSize }}</span>
+          <span v-if="props.languages.length" class="meta-info__item">{{ props.languages.join(', ') }}</span>
+        </p>
+      </div>
+    </a>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+import SvgIcon from '../SvgIcon.vue';
+
+const props = defineProps({
+  downloadUrl: {
+    type: String,
+    required: true
+  },
+  name: {
+    type: String,
+    required: true
+  },
+  format : {
+    type: String,
+    required: false,
+    default: ''
+  },
+  languages: {
+    type: Array as PropType<string[]>,
+    required: false,
+    default: () => []
+  },
+  byteSize: {
+    type: String,
+    required: false,
+    default: ''
+  }
+});
+</script>
+
+<style scoped lang="scss">
+  a {
+    overflow-x: hidden;
+    word-break: break-all;
+  }
+
+  .download-item__title {
+    text-overflow: hidden;
+    overflow-x: hidden;
+    word-break: break-all;
+  }
+</style>
diff --git a/opendata.swiss/ui/app/constants/piveau-endpoints.ts b/opendata.swiss/ui/app/constants/piveau-endpoints.ts
new file mode 100644
index 0000000..3b9f0a4
--- /dev/null
+++ b/opendata.swiss/ui/app/constants/piveau-endpoints.ts
@@ -0,0 +1,2 @@
+export const PIVEAU_HUB_SEARCH_URL = 'https://piveau-hub-search-ln.zazukoians.org/';
+export const PIVEAU_HUB_REPO_URL = 'https://piveau-hub-repo-ln.zazukoians.org/';
diff --git a/opendata.swiss/ui/app/piveau/get-ods-catalog-info.ts b/opendata.swiss/ui/app/piveau/get-ods-catalog-info.ts
index a367ae9..2f25898 100644
--- a/opendata.swiss/ui/app/piveau/get-ods-catalog-info.ts
+++ b/opendata.swiss/ui/app/piveau/get-ods-catalog-info.ts
@@ -2,7 +2,7 @@ import type { Dataset } from "@piveau/sdk-core";
 import type { LocaleInstance } from "@piveau/sdk-vue";
 import { toValue } from "vue";
 
-interface Catalog {
+export interface Catalog {
   id: string;
   modified: string;
   issued: string;
diff --git a/opendata.swiss/ui/app/piveau/search.ts b/opendata.swiss/ui/app/piveau/search.ts
index b087760..8e86659 100644
--- a/opendata.swiss/ui/app/piveau/search.ts
+++ b/opendata.swiss/ui/app/piveau/search.ts
@@ -4,6 +4,7 @@ import { getKeywords } from './get-keywords'
 import { getOdsFormats } from './get-ods-formats'
 import { getOdsCatalogInfo } from './get-ods-catalog-info'
 import { getOdsAccrualPeriodicity } from './get-ods-accrual-periodicity'
+import { PIVEAU_HUB_SEARCH_URL } from '~/constants/piveau-endpoints'
 
 // export const ACTIVE_FACETS = ['categories', 'publisher', 'catalog', 'format', 'license', 'keywords']
 export const ACTIVE_FACETS = ['catalog', 'categories', 'publisher', 'format', 'license', 'keywords']
@@ -13,7 +14,7 @@ export const ACTIVE_FACETS = ['catalog', 'categories', 'publisher', 'format', 'l
  */
 export function useDatasetsSearch() {
   return defineHubSearch({
-    baseUrl: 'https://piveau-hub-search-ln.zazukoians.org/',
+    baseUrl: PIVEAU_HUB_SEARCH_URL,
     index: 'dataset',
     indexDetails: 'datasets',
     facets: ACTIVE_FACETS,
diff --git a/opendata.swiss/ui/i18n/locales/de.json b/opendata.swiss/ui/i18n/locales/de.json
index 65802fa..096fa02 100644
--- a/opendata.swiss/ui/i18n/locales/de.json
+++ b/opendata.swiss/ui/i18n/locales/de.json
@@ -40,7 +40,7 @@
             "dataset": "Datensatz",
             "catalog": "Katalog",
             "this_dataset_record": "Dieser Datensatz-Eintrag wurde",
-            "accrual_periodicity": "Aktualisierungsfrequenz",
+            "frequency": "Aktualisierungsfrequenz",
             "show_catalog_entry": "Katalogeintrag anzeigen",
             "hide_catalog_entry": "Katalogeintrag ausblenden",
             "distribution": "Distribution",
@@ -54,7 +54,10 @@
             "go_to_resource": "Gehe zur Ressource",
             "show_raw": "Datum anzeigen",
             "show_relative": "Relative Zeit anzeigen",
-            "details": "Details"
+            "details": "Details",
+            "released": "Veröffentlicht",
+            "metadata_download": "Metadaten herunterladen",
+            "metadata": "Metadaten"
         },
         "showcase": {
             "type": {
diff --git a/opendata.swiss/ui/i18n/locales/en.json b/opendata.swiss/ui/i18n/locales/en.json
index 285260b..a5dff31 100644
--- a/opendata.swiss/ui/i18n/locales/en.json
+++ b/opendata.swiss/ui/i18n/locales/en.json
@@ -40,7 +40,7 @@
             "dataset": "Dataset",
             "catalog": "Catalog",
             "this_dataset_record": "This dataset record has been",
-            "accrual_periodicity": "Update frequency",
+            "frequency": "Update frequency",
             "show_catalog_entry": "Show catalog entry",
             "hide_catalog_entry": "Hide catalog entry",
             "distribution": "Distribution",
@@ -54,7 +54,10 @@
             "go_to_resource": "Go to resource",
             "show_raw": "Show raw date",
             "show_relative": "Show relative time",
-            "details": "Details"
+            "details": "Details",
+            "released": "Released",
+            "metadata_download": "Download metadata",
+            "metadata": "Metadata"
         },
         "showcase": {
             "type": {
diff --git a/opendata.swiss/ui/i18n/locales/fr.json b/opendata.swiss/ui/i18n/locales/fr.json
index 92ee26d..ed3de56 100644
--- a/opendata.swiss/ui/i18n/locales/fr.json
+++ b/opendata.swiss/ui/i18n/locales/fr.json
@@ -40,7 +40,7 @@
             "dataset": "Jeu de données",
             "catalog": "Catalogue",
             "this_dataset_record": "Cette entrée de jeu de données a été",
-            "accrual_periodicity": "Fréquence de mise à jour",
+            "frequency": "Fréquence de mise à jour",
             "show_catalog_entry": "Afficher l’entrée du catalogue",
             "hide_catalog_entry": "Masquer l’entrée du catalogue",
             "distribution": "Distribution",
@@ -54,7 +54,10 @@
             "go_to_resource": "Aller à la ressource",
             "show_raw": "Afficher la date brute",
             "show_relative": "Afficher le temps relatif",
-            "details": "Détails"
+            "details": "Détails",
+            "released": "Publié",
+            "metadata_download": "Télécharger les métadonnées",
+            "metadata": "Métadonnées"
         },
         "showcase": {
             "type": {
diff --git a/opendata.swiss/ui/i18n/locales/it.json b/opendata.swiss/ui/i18n/locales/it.json
index f191452..f32bcae 100644
--- a/opendata.swiss/ui/i18n/locales/it.json
+++ b/opendata.swiss/ui/i18n/locales/it.json
@@ -40,7 +40,7 @@
             "dataset": "Set di dati",
             "catalog": "Catalogo",
             "this_dataset_record": "Questo record del set di dati è stato",
-            "accrual_periodicity": "Frequenza di aggiornamento",
+            "frequency": "Frequenza di aggiornamento",
             "show_catalog_entry": "Mostra la voce di catalogo",
             "hide_catalog_entry": "Nascondi la voce di catalogo",
             "distribution": "Distribuzione",
@@ -54,7 +54,10 @@
             "go_to_resource": "Vai alla risorsa",
             "show_raw": "Mostra data grezza",
             "show_relative": "Mostra tempo relativo",
-            "details": "Dettagli"
+            "details": "Dettagli",
+            "released": "Rilasciato",
+            "metadata_download": "Scarica i metadati",
+            "metadata": "Metadati"
         },
         "showcase": {
             "type": {
diff --git a/opendata.swiss/ui/package-lock.json b/opendata.swiss/ui/package-lock.json
index 0589dbf..a6d6c45 100644
--- a/opendata.swiss/ui/package-lock.json
+++ b/opendata.swiss/ui/package-lock.json
@@ -15,7 +15,7 @@
         "@nuxtjs/i18n": "^10.0.1",
         "@pinia/nuxt": "^0.11.1",
         "@piveau/sdk-core": "^0.0.0-beta.2",
-        "@piveau/sdk-vue": "^1.0.0-beta.9",
+        "@piveau/sdk-vue": "^1.0.0-beta.10",
         "better-sqlite3": "^12.2.0",
         "bootstrap": "^5.3.7",
         "decap-cms-app": "^3.8.3",
@@ -4442,9 +4442,9 @@
       }
     },
     "node_modules/@piveau/sdk-vue": {
-      "version": "1.0.0-beta.9",
-      "resolved": "https://registry.npmjs.org/@piveau/sdk-vue/-/sdk-vue-1.0.0-beta.9.tgz",
-      "integrity": "sha512-3RzdfzsToZxA0xeDgNHzjOZaf3WGKMlCTYs6PrWVPjfb5hC0PBPFlFQPcXv+QWao71DWUxpVAoxtytoia+KXPA==",
+      "version": "1.0.0-beta.10",
+      "resolved": "https://registry.npmjs.org/@piveau/sdk-vue/-/sdk-vue-1.0.0-beta.10.tgz",
+      "integrity": "sha512-aaADwEwU/cJIWBIuFRY/agvnBgRU0382W5zn7FLbugM1ZxRwzoCRApO5uUQHfOVH5b9ppE469eObSvEwew0oIQ==",
       "license": "Apache-2.0",
       "dependencies": {
         "@piveau/sdk-core": "^0.0.0-beta.2",
diff --git a/opendata.swiss/ui/package.json b/opendata.swiss/ui/package.json
index d8a2746..a9ee51d 100644
--- a/opendata.swiss/ui/package.json
+++ b/opendata.swiss/ui/package.json
@@ -22,7 +22,7 @@
     "@nuxtjs/i18n": "^10.0.1",
     "@pinia/nuxt": "^0.11.1",
     "@piveau/sdk-core": "^0.0.0-beta.2",
-    "@piveau/sdk-vue": "^1.0.0-beta.9",
+    "@piveau/sdk-vue": "^1.0.0-beta.10",
     "better-sqlite3": "^12.2.0",
     "bootstrap": "^5.3.7",
     "decap-cms-app": "^3.8.3",
@@ -52,4 +52,4 @@
     "vite-plugin-vuetify": "^2.1.1",
     "vuetify": "^3.9.2"
   }
-}
+}
\ No newline at end of file
diff --git a/opendata.swiss/ui/pages/datasets/[datasetId]/distribution/[distributionId].vue b/opendata.swiss/ui/pages/datasets/[datasetId]/distribution/[distributionId].vue
index 1f12c87..a865159 100644
--- a/opendata.swiss/ui/pages/datasets/[datasetId]/distribution/[distributionId].vue
+++ b/opendata.swiss/ui/pages/datasets/[datasetId]/distribution/[distributionId].vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { definePropertyNode, } from '@piveau/sdk-vue'
 import { useI18n } from 'vue-i18n'
 
 import { computed } from 'vue'
@@ -10,6 +9,12 @@ import OdsDetailTermsOfUse from '../../../../app/components/dataset-detail/OdsDe
 import OdsDetailsTable from '../../../../app/components/dataset-detail/OdsDetailsTable.vue'
 import OdsBreadcrumbs from "../../../../app/components/OdsBreadcrumbs.vue";
 import OdsButton from "../../../../app/components/OdsButton.vue";
+import OdsDownloadList from '../../../../app/components/distribution/OdsDownloadList.vue'
+import OdsRelativeDateToggle from '../../../../app/components/OdsRelativeDateToggle.vue';
+import { DcatApChV2DatasetAdapter } from '../../../../app/components/dataset-detail/model/dcat-ap-ch-v2-dataset-adapter.js'
+import { useSeoMeta } from 'nuxt/app';
+
+
 const { locale, t } = useI18n();
 
 const route = useRoute()
@@ -19,21 +24,27 @@ const distributionId = computed(() => route.params.distributionId as string)
 
 
 const { useResource } = useDatasetsSearch()
-const { isSuccess, resultEnhanced } = useResource(datasetId)
+const { query, isSuccess, resultEnhanced } = useResource(datasetId)
 
-const distribution = computed(() => {
-  const dists = resultEnhanced.value?.getDistributions.find(d => d.id === distributionId.value) ?? undefined
-  return dists
+const { suspense } = query
+
+const dataset = computed(() => {
+  if (!resultEnhanced.value) {
+    return undefined
+  }
+  return new DcatApChV2DatasetAdapter(resultEnhanced.value)
 })
 
-const node = computed(() => {
-  if (!distribution.value) {
-    return null
+
+const distribution = computed(() => {
+  if (!dataset.value) {
+    return undefined
   }
-  const rootNode = definePropertyNode({ id: 'root', data: distribution.value.getPropertyTable}, { compact: true, maxDepth: 2 })
-  return rootNode
+  const dists = dataset.value.distributions.find(d => d.id === distributionId.value) ?? undefined
+  return dists
 })
 
+
 const breadcrumbs = [
   await homePageBreadcrumb(locale),
   {
@@ -55,6 +66,8 @@ const breadcrumbs = [
 useSeoMeta({
   title: `${distribution.value?.title} | ${resultEnhanced.value?.getTitle} | ${t('message.header.navigation.datasets')} | opendata.swiss`,
 })
+
+await suspense()
 </script>
 
 <template>
@@ -65,63 +78,55 @@ useSeoMeta({
     <section class="hero hero--default">
       <div class="container container--grid gap--responsive">
         <div class="hero__content">
-          <p class="meta-info"><span class="meta-info__item">{{ t('message.dataset_detail.distribution') }}</span><span class="meta-info__item">{{ t('message.dataset_detail.published_on') }} {{ resultEnhanced?.getCreated }} </span><span class="meta-info__item">{{ t('message.dataset_detail.modified_on') }} {{ resultEnhanced?.getModified }} </span></p>
+          <span class="distribution-label">{{ t('message.dataset_detail.distribution') }}</span>
+
+          <p class="meta-info">
+            <span v-if="distribution.releaseDate" class="meta-info__item">
+              {{ t('message.dataset_detail.published_on') }}
+               <OdsRelativeDateToggle :date="distribution.releaseDate" />
+            </span>
+            <span v-if="distribution.modified" class="meta-info__item">{{ t('message.dataset_detail.modified_on') }}
+              <OdsRelativeDateToggle :date="distribution.modified" />
+            </span>
+          </p>
           <h1 class="hero__title"> {{ distribution.title }} </h1>
-          <h2 class="hero__subtitle"> {{ distribution.description }} </h2>
+          <MDC :value="distribution.description ?? ''" />
         </div>
       </div>
-   </section>
-  <section class="section">
-    <div class="container container--grid gap--responsive">
-      <div class="container__main vertical-spacing">
-        <div class="container__mobile">
-          <div class="box">
-            <h2 class="h5">Download</h2>
-              <ul class="download-items">
-                <li>
-                  <a v-for="link in distribution.downloadUrls" :key="link" :href="link"  class="download-item"  target="_blank">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon icon--xl icon--Download download-item__icon">
-                      <path xmlns="http://www.w3.org/2000/svg" d="m19.419 13.698-.375-.649-6.294 3.634v-12.228h-.75v12.228l-6.294-3.634-.375.649 7.044 4.067z" />
-                      <path xmlns="http://www.w3.org/2000/svg" d="m6.00576 19.91649h12.76855v.75h-12.76855z"/>
-                    </svg>
-                    <div>
-                      <h2 class="download-item__title">{{ distribution.title }}</h2>
-                      <p class="meta-info download-item__meta-info"><span class="meta-info__item">{{ distribution.format ? distribution.format : distribution.title }}</span><span class="meta-info__item">{{ distribution.languages.join(', ') }}</span></p>
-                    </div>
-                  </a>
-                </li>
-              </ul>
+    </section>
+    <section class="section">
+      <div class="container container--grid gap--responsive">
+        <div class="container__main vertical-spacing">
+          <div class="container__mobile">
+            <div v-if="distribution.downloadUrls.length > 0" class="box">
+              <h2 class="h5">Download</h2>
+                <OdsDownloadList :download-urls="distribution.downloadUrls" :name="distribution.title" :format="distribution.format" :languages="distribution.languages" :byte-size="distribution.formattedByteSize"/>
+            </div>
+            <div class="box">
+              <h2 class="h5">Access</h2>
+              <OdsDownloadList :download-urls="distribution.accessUrls" :name="distribution.title" :format="distribution.format" :languages="distribution.languages" :byte-size="distribution.formattedByteSize"/>
             </div>
             <div class="box">
               <h2 class="h5">{{ t(`message.header.navigation.terms_of_use`) }}</h2>
-              <OdsDetailTermsOfUse v-for="value in resultEnhanced?.getLicenses" :key="value" :name="value" />
+              <OdsDetailTermsOfUse v-if="distribution.license" :name="distribution.license" />
             </div>
           </div>
           <h2 class="h2">{{ t('message.dataset_detail.additional_information') }}</h2>
-          <OdsDetailsTable v-if="node" :root-node="node"/>
+          <OdsDetailsTable :table-entries="distribution.propertyTable"/>
         </div>
         <div class="hidden container__aside md:block">
           <div id="aside-content" class="sticky sticky--top">
-            <div class="box">
+            <div v-if="distribution.downloadUrls.length > 0" class="box">
               <h2 class="h5">Download</h2>
-              <ul class="download-items">
-                <li>
-                  <a v-for="link in distribution.downloadUrls" :key="link" :href="link"  class="download-item"  target="_blank">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon icon--xl icon--Download download-item__icon">
-                      <path xmlns="http://www.w3.org/2000/svg" d="m19.419 13.698-.375-.649-6.294 3.634v-12.228h-.75v12.228l-6.294-3.634-.375.649 7.044 4.067z" />
-                      <path xmlns="http://www.w3.org/2000/svg" d="m6.00576 19.91649h12.76855v.75h-12.76855z"/>
-                    </svg>
-                    <div>
-                      <h2 class="download-item__title">{{ distribution.title }}</h2>
-                      <p class="meta-info download-item__meta-info"><span class="meta-info__item">{{ distribution.format ? distribution.format : distribution.title }}</span><span class="meta-info__item">{{ distribution.languages.join(', ') }}</span></p>
-                    </div>
-                  </a>
-                </li>
-              </ul>
+              <OdsDownloadList :download-urls="distribution.downloadUrls" :name="distribution.title" :format="distribution.format" :languages="distribution.languages" :byte-size="distribution.formattedByteSize"/>
+            </div>
+             <div class="box">
+              <h2 class="h5">Access</h2>
+              <OdsDownloadList :download-urls="distribution.accessUrls" :name="distribution.title" :format="distribution.format" :languages="distribution.languages" :byte-size="distribution.formattedByteSize"/>
             </div>
             <div class="box">
               <h2 class="h5">{{ t(`message.header.navigation.terms_of_use`) }}</h2>
-              <OdsDetailTermsOfUse v-for="value in resultEnhanced?.getLicenses" :key="value" :name="value" />
+              <OdsDetailTermsOfUse v-if="distribution.license" :name="distribution.license" />
             </div>
           </div>
         </div>
@@ -129,13 +134,24 @@ useSeoMeta({
     </section>
     <section class="section publication-back-button-section">
       <div class="container">
-        <OdsButton title="Zurück" icon="ArrowLeft" class="btn--back" @click="router.back()" />
+        <OdsButton title="Zurück" icon="ArrowLeft" variant="outline" class="btn--back" @click="router.back()" />
       </div>
     </section>
-    <pre>{{ distribution }}</pre>
   </main>
 </template>
 
 <style lang="scss" scoped>
-
+.distribution-label {
+  position: relative;
+  background-color: #e6f0fa;
+  color: #1976d2;
+  padding: 2px 10px;
+  border-radius: 6px;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  display: inline-block;
+  margin-right: 10px;
+  vertical-align: middle;
+  border: 1px solid #b3d4fc;
+}
 </style>
diff --git a/opendata.swiss/ui/pages/datasets/[datasetId]/index.vue b/opendata.swiss/ui/pages/datasets/[datasetId]/index.vue
index 2ae83d0..3182692 100644
--- a/opendata.swiss/ui/pages/datasets/[datasetId]/index.vue
+++ b/opendata.swiss/ui/pages/datasets/[datasetId]/index.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
-import { definePropertyNode } from '@piveau/sdk-vue'
 import { computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n';
+
 import { useDatasetsSearch } from '../../../app/piveau/search'
+import { DcatApChV2DatasetAdapter } from '../../../app/components/dataset-detail/model/dcat-ap-ch-v2-dataset-adapter';
+
 import { homePageBreadcrumb } from "../../../app/composables/breadcrumbs";
 import OdsBreadcrumbs from "../../../app/components/OdsBreadcrumbs.vue";
 import OdsDetailTermsOfUse from '../../../app/components/dataset-detail/OdsDetailTermsOfUse.vue'
@@ -10,8 +13,11 @@ import OdsDetailsTable from '../../../app/components/dataset-detail/OdsDetailsTa
 import OdsTagList from '../../../app/components/dataset-detail/OdsTagList.vue'
 import OdsDatasetMetaInfo from '../../../app/components/dataset-detail/OdsDatasetMetaInfo.vue'
 import OdsDistributionList from '../../../app/components/dataset-detail/OdsDistributionList.vue'
-import { useI18n } from 'vue-i18n';
-import OdsButton from "../../../app/components/OdsButton.vue";
+import OdsButton from '../../../app/components/OdsButton.vue';
+import OdsDatasetCatalogPanel from '../../../app/components/dataset-detail/OdsDatasetCatalogPanel.vue'
+import OdsMetadataDownloadList from '../../../app/components/dataset-detail/OdsMetadataDownloadList.vue'
+
+import { useSeoMeta } from 'nuxt/app';
 
 const { locale, t } = useI18n();
 const route = useRoute()
@@ -19,9 +25,19 @@ const router = useRouter()
 const datasetId = computed(() => route.params.datasetId as string)
 
 const { useResource } = useDatasetsSearch()
-const { isSuccess, resultEnhanced } = useResource(datasetId)
+const { query, isSuccess, resultEnhanced } = useResource(datasetId)
+
+const { suspense } = query
+
+const dataset = computed(() => {
+  if (!resultEnhanced.value) {
+    return undefined
+  }
+  return new DcatApChV2DatasetAdapter(resultEnhanced.value)
+})
+
+const distributions = computed(() => (dataset.value?.distributions ?? []).sort((a, b) => a.title.localeCompare(b.title)))
 
-const node = computed(() => definePropertyNode({ id: 'root', data: resultEnhanced.value?.getPropertyTable }, { compact: true, maxDepth: 2 }))
 
 const homePage = await homePageBreadcrumb(locale)
 const breadcrumbs = computed(() => {
@@ -34,11 +50,14 @@ const breadcrumbs = computed(() => {
   ]
 
   if(route.query.search || typeof route.query.search === 'string') {
+    const searchQuery = Array.isArray(route.query.search) ? route.query.search[0] : route.query.search;
     result.push({
       title: t('message.dataset_search.search_results'),
       route: {
         path: '/datasets',
-        query: Object.fromEntries(new URLSearchParams(decodeURIComponent(route.query.search)))
+        query: searchQuery
+          ? Object.fromEntries(new URLSearchParams(decodeURIComponent(searchQuery)))
+          : {}
       }
     })
   }
@@ -54,13 +73,18 @@ const breadcrumbs = computed(() => {
   return result
 })
 
+
 useSeoMeta({
   title: `${resultEnhanced.value?.getTitle} | ${t('message.header.navigation.datasets')} | opendata.swiss`,
 })
+
+
+await suspense()
+
 </script>
 
 <template>
-  <div v-if="isSuccess">
+  <div v-if="isSuccess && dataset">
   <header id="main-header">
     <OdsBreadcrumbs :breadcrumbs="breadcrumbs" />
   </header>
@@ -68,16 +92,16 @@ useSeoMeta({
    <section class="hero hero--default">
       <div class="container container--grid gap--responsive">
          <div class="hero__content">
-            <OdsDatasetMetaInfo :dataset="resultEnhanced" />
-            <h1 class="hero__title"> {{ resultEnhanced?.getTitle }} </h1>
-            <MDC :value="resultEnhanced?.getDescription ?? ''" />
+            <OdsDatasetMetaInfo :dataset="dataset" />
+            <h1 class="hero__title"> {{ dataset.title }} </h1>
+            <MDC :value="dataset.description" />
             <!----><!---->
-            <aside class="authors">
-               <div class="disc-images" aria-hidden="true">
-                  <div class="disc-image"><img src="https://picsum.photos/120/120/?image=29" :title="resultEnhanced?.getPublisher?.name ?? ''"></div>
-               </div>
-               <address class="authors__names">
-                <a class="link author__name" href="#">{{ resultEnhanced?.getPublisher?.name }}</a>
+            <aside v-if="dataset.publisher" class="authors">
+              <div class="disc-images" aria-hidden="true">
+                <div class="disc-image"><img src="https://picsum.photos/120/120/?image=29" :title="dataset.publisher.name"></div>
+              </div>
+              <address class="authors__names">
+                <a class="link author__name link--external" target="_blank" :href="dataset.publisher.resource">{{ dataset.publisher.name }}</a>
               </address>
             </aside>
          </div>
@@ -90,20 +114,24 @@ useSeoMeta({
             <div class="container__mobile">
                <div class="box">
                   <h2 class="h5">{{ t(`message.header.navigation.terms_of_use`) }}</h2>
-                  <OdsDetailTermsOfUse v-for="value in resultEnhanced?.getLicenses" :key="value" :name="value" />
+                  <OdsDetailTermsOfUse v-for="value in dataset.licenses" :key="value" :name="value" />
                </div>
             </div>
             <h2 class="h2">{{ t('message.dataset_detail.distributions') }}</h2>
-            <OdsDistributionList :dataset="resultEnhanced" />
+            <OdsDistributionList :distributions="distributions" />
 
             <h2 class="h2">{{ t('message.dataset_detail.additional_information') }}</h2>
-            <OdsDetailsTable :root-node="node"/>
+            <OdsDetailsTable :table-entries="dataset.propertyTable"/>
             <div>
                <h2 class="h2">{{ t('message.dataset_detail.categories') }}</h2>
                <div>
                   <OdsTagList :tags="resultEnhanced?.getCategories ?? []" />
                </div>
             </div>
+            <div v-if="dataset.catalog" >
+              <h2 class="h2">{{ t('message.dataset_detail.catalog') }}</h2>
+              <OdsDatasetCatalogPanel :dataset="dataset" />
+            </div>
          </div>
          <div class="hidden container__aside md:block">
             <div id="aside-content" class="sticky sticky--top">
@@ -111,75 +139,20 @@ useSeoMeta({
                   <h2 class="h5">{{ t(`message.header.navigation.terms_of_use`) }}</h2>
                   <OdsDetailTermsOfUse v-for="value in resultEnhanced?.getLicenses" :key="value" :name="value" />
                </div>
+                 <div class="box">
+                  <h2 class="h5">{{ t(`message.dataset_detail.metadata_download`) }}</h2>
+                  <OdsMetadataDownloadList :dataset="dataset" />
+               </div>
             </div>
          </div>
       </div>
-
    </section>
+
    <section class="section publication-back-button-section">
       <div class="container">
         <OdsButton title="Zurück" icon="ArrowLeft" variant="outline" class="btn--back" size="sm" @click="router.back()" />
       </div>
    </section>
-   <section class="section bg--secondary-50">
-      <div class="container">
-         <h2 class="section__title">Das könnte Sie auch interessieren</h2>
-         <div class="grid grid--responsive-cols-3 gap--responsive">
-            <div class="card card--universal card--clickable">
-               <!----><!---->
-               <div class="card__content">
-                  <div class="card__body">
-                     <p class="meta-info"><span class="meta-info__item">Bericht</span><span class="meta-info__item">03. März 2000</span></p>
-                     <div class="card__title">
-                        <h3>Auswirkungen von Corona auf die Schweizer Gesellschaft</h3>
-                     </div>
-                     <p> Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
-                     <div class="card__image"><img src="https://swiss.github.io/designsystem/images/publication-cover.png" alt="cat"></div>
-                     <p class="meta-info"><span class="meta-info__item">PDF</span><span class="meta-info__item">3.8 Mb</span><span class="meta-info__item">102 Seiten</span><span class="meta-info__item">Deutsch</span></p>
-                  </div>
-                  <div class="card__footer card__footer--icon-only">
-                     <!---->
-                     <div class="card__footer__action">
-                       <OdsButton
-                         variant="outline"
-                         icon-only
-                         icon="ArrowRight"
-                         title="Weiterlesen" />
-                     </div>
-                  </div>
-               </div>
-            </div>
-            <div class="card card--universal card--clickable">
-               <!----><!---->
-               <div class="card__content">
-                  <div class="card__body">
-                     <p class="meta-info"><span class="meta-info__item">Bericht</span><span class="meta-info__item">03. März 2000</span></p>
-                     <div class="card__title">
-                        <h3>Auswirkungen von Corona auf die Schweizer Gesellschaft</h3>
-                     </div>
-                     <p> Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
-                     <div class="card__image"><img src="https://swiss.github.io/designsystem/images/publication-cover.png" alt="cat"></div>
-                     <p class="meta-info"><span class="meta-info__item">PDF</span><span class="meta-info__item">3.8 Mb</span><span class="meta-info__item">102 Seiten</span><span class="meta-info__item">Deutsch</span></p>
-                  </div>
-                  <div class="card__footer card__footer--icon-only">
-                     <!---->
-                     <div class="card__footer__action">
-                       <OdsButton
-                         variant="outline"
-                         icon-only
-                         @click="router.back()"
-                         icon="ArrowRight"
-                         title="Weiterlesen"/>
-                     </div>
-                  </div>
-               </div>
-            </div>
-         </div>
-      </div>
-
-
-   </section>
-   <pre>{{ resultEnhanced }}</pre>
   </main>
 </div>
 
diff --git a/opendata.swiss/ui/pages/datasets/index.vue b/opendata.swiss/ui/pages/datasets/index.vue
index 68fd1b6..8891818 100644
--- a/opendata.swiss/ui/pages/datasets/index.vue
+++ b/opendata.swiss/ui/pages/datasets/index.vue
@@ -17,6 +17,7 @@ import OdsSortSelect from "../../app/components/dataset/OdsSortSelect.vue";
 import {homePageBreadcrumb} from "../../app/composables/breadcrumbs";
 import SvgIcon from "../../app/components/SvgIcon.vue";
 import OdsButton from "../../app/components/OdsButton.vue";
+import { useSeoMeta } from 'nuxt/app';
 
 const { t, locale} = useI18n()
 
@@ -240,12 +241,13 @@ onMounted(() => {
   })
 })
 
-await suspense()
 
 useSeoMeta({
   title: `${t('message.header.navigation.datasets')} | opendata.swiss`,
 })
 
+await suspense()
+
 </script>
 
 <template>
diff --git a/opendata.swiss/ui/sparql/invstigations.sparqlbook b/opendata.swiss/ui/sparql/invstigations.sparqlbook
index 3b4c91d..7c83c6b 100644
--- a/opendata.swiss/ui/sparql/invstigations.sparqlbook
+++ b/opendata.swiss/ui/sparql/invstigations.sparqlbook
@@ -16,5 +16,17 @@
     "language": "sparql",
     "value": "# [endpoint=https://piveau-trifid.zazukoians.org/query]\n\n\nSELECT *   WHERE {\n   <http://publications.europa.eu/resource/authority/frequency/DAILY> ?p ?o .\n}",
     "metadata": {}
+  },
+  {
+    "kind": 2,
+    "language": "sparql",
+    "value": "# [endpoint=https://piveau-trifid.zazukoians.org/query]\nPREFIX dcat: <http://www.w3.org/ns/dcat#>\n\nSELECT ?x ?size WHERE {\n   ?x dcat:byteSize ?size .\n} ",
+    "metadata": {}
+  },
+  {
+    "kind": 2,
+    "language": "sparql",
+    "value": "# [endpoint=https://piveau-trifid.zazukoians.org/query]\nPREFIX dcat: <http://www.w3.org/ns/dcat#>\n\nSELECT * WHERE {\n   <https://piveau.io/set/data/netex_tt_odv-oevch> ?p ?o. \n} ",
+    "metadata": {}
   }
 ]
\ No newline at end of file