diff --git a/packages/core/src/components/core/query/QuerySummaryDemographics.vue b/packages/core/src/components/core/query/QuerySummaryDemographics.vue
new file mode 100644
index 00000000..8dcc3e84
--- /dev/null
+++ b/packages/core/src/components/core/query/QuerySummaryDemographics.vue
@@ -0,0 +1,56 @@
+<script lang="ts">
+
+import { type PropType, defineComponent } from 'vue';
+import type { QuerySummaryDemographics } from '../../../domains';
+import { DChartBar, DChartDoughnut } from '../../utility';
+
+export default defineComponent({
+    components: { DChartDoughnut, DChartBar },
+    props: {
+        entity: {
+            type: Object as PropType<QuerySummaryDemographics>,
+            required: true,
+        },
+    },
+});
+</script>
+<template>
+    <div>
+        <h5>Allgemein</h5>
+        <div class="row">
+            <div class="col-12 col-xl-4">
+                <div class="entity-card text-center mb-3 w-100">
+                    <h6>
+                        Patienten pro Standort
+                    </h6>
+                    <DChartDoughnut
+                        style="max-height: 390px"
+                        :items="entity.siteDistribution"
+                    />
+                </div>
+            </div>
+            <div class="col-12 col-xl-4">
+                <div class="entity-card text-center mb-3 w-100">
+                    <h6>
+                        Verteilung von Geschlechtern
+                    </h6>
+                    <DChartDoughnut
+                        style="max-height: 390px"
+                        :items="entity.genderDistribution"
+                    />
+                </div>
+            </div>
+            <div class="col-12 col-xl-4">
+                <div class="entity-card text-center mb-3 w-100">
+                    <h6>
+                        Verteilung des Alters
+                    </h6>
+                    <DChartBar
+                        style="max-height: 390px"
+                        :items="entity.ageDistribution"
+                    />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/packages/core/src/components/core/query/QuerySummaryGrouped.vue b/packages/core/src/components/core/query/QuerySummaryGrouped.vue
index 3e8ac9be..9faeec7c 100644
--- a/packages/core/src/components/core/query/QuerySummaryGrouped.vue
+++ b/packages/core/src/components/core/query/QuerySummaryGrouped.vue
@@ -7,7 +7,8 @@ import type {
 import {
     computed, defineComponent, ref, watch,
 } from 'vue';
-import type { QuerySummaryGrouped, QuerySummaryGroupedItem } from '../../../domains';
+import type { KeyValueRecord, KeyValueRecords } from '../../../domains';
+import { generateChartLabelsForKeyValueRecord } from '../../utility/chart/utils';
 
 export default defineComponent({
     props: {
@@ -16,17 +17,17 @@ export default defineComponent({
             default: 'Gruppe',
         },
         items: {
-            type: Array as PropType<QuerySummaryGrouped>,
+            type: Array as PropType<KeyValueRecords>,
             required: true,
         },
     },
     setup(props) {
         const id = ref(undefined) as Ref<string | undefined>;
-        const item = ref(null) as Ref<QuerySummaryGroupedItem | null>;
+        const item = ref(null) as Ref<KeyValueRecord | null>;
 
-        const options = computed<FormSelectOption[]>(() => props.items.map((el) => ({
-            id: el.key.code,
-            value: el.key.display || el.key.code,
+        const options = computed<FormSelectOption[]>(() => props.items.map((el, id) => ({
+            id,
+            value: generateChartLabelsForKeyValueRecord(el),
         })));
 
         watch(id, (val) => {
@@ -35,7 +36,7 @@ export default defineComponent({
                 return;
             }
 
-            const index = props.items.findIndex((el) => el.key.code === val);
+            const index = props.items.findIndex((_el, id) => id === parseInt(val, 10));
             if (index !== -1) {
                 item.value = props.items[index];
             }
diff --git a/packages/core/src/components/core/query/index.ts b/packages/core/src/components/core/query/index.ts
index a89ab606..2e9a0f06 100644
--- a/packages/core/src/components/core/query/index.ts
+++ b/packages/core/src/components/core/query/index.ts
@@ -1 +1,2 @@
 export { default as DQuerySummaryGrouped } from './QuerySummaryGrouped.vue';
+export { default as DQuerySummaryDemographics } from './QuerySummaryDemographics.vue';
diff --git a/packages/core/src/components/utility/chart/DChartBar.vue b/packages/core/src/components/utility/chart/DChartBar.vue
index bec8a7a4..ce138135 100644
--- a/packages/core/src/components/utility/chart/DChartBar.vue
+++ b/packages/core/src/components/utility/chart/DChartBar.vue
@@ -5,9 +5,8 @@ import type {
 import { Bar } from 'vue-chartjs';
 import type { PropType } from 'vue';
 import { computed, defineComponent } from 'vue';
-import type { Coding, ConceptsCount, MinMaxRange } from '../../../domains';
-import { isCoding, isMinMaxRange } from '../../../domains';
-import { stringToColor } from '../../../utils';
+import type { Coding, KeyValueRecords, MinMaxRange } from '../../../domains';
+import { generateChartBackgroundColorForKeyValueRecord, generateChartLabelsForKeyValueRecord } from './utils';
 
 export default defineComponent({
     components: {
@@ -16,44 +15,16 @@ export default defineComponent({
     props: {
         items: {
             required: true,
-            type: Array as PropType<ConceptsCount<MinMaxRange | Coding | string[]>>,
+            type: Array as PropType<KeyValueRecords<MinMaxRange | Coding | string[] | string>>,
         },
     },
     setup(props) {
         const data = computed<ChartData<'bar'>>(() => ({
             datasets: [{
-                data: props.items.map((item) => item.count),
-                backgroundColor: props.items.map((item) => {
-                    if (isCoding(item.concept)) {
-                        return `${stringToColor(item.concept.display || item.concept.code)}`;
-                    }
-
-                    if (isMinMaxRange(item.concept)) {
-                        return `${stringToColor(`${(item.concept.min + item.concept.max) * 10}`)}`;
-                    }
-
-                    if (Array.isArray(item.concept)) {
-                        return `${stringToColor(item.concept.join('+'))}`;
-                    }
-
-                    return undefined;
-                }),
+                data: props.items.map((item) => item.value),
+                backgroundColor: props.items.map((item) => generateChartBackgroundColorForKeyValueRecord(item)),
             }],
-            labels: props.items.map((item) => {
-                if (isCoding(item.concept)) {
-                    return item.concept.display || item.concept.code;
-                }
-
-                if (isMinMaxRange(item.concept)) {
-                    return `${item.concept.min}-${item.concept.max}`;
-                }
-
-                if (Array.isArray(item.concept)) {
-                    return `${item.concept.join(', ')}`;
-                }
-
-                return undefined;
-            }),
+            labels: props.items.map((item) => generateChartLabelsForKeyValueRecord(item)),
         }));
 
         const options : ChartOptions<'bar'> = {
diff --git a/packages/core/src/components/utility/chart/DChartDoughnut.vue b/packages/core/src/components/utility/chart/DChartDoughnut.vue
index d2ad0d8a..f9b92a9b 100644
--- a/packages/core/src/components/utility/chart/DChartDoughnut.vue
+++ b/packages/core/src/components/utility/chart/DChartDoughnut.vue
@@ -6,9 +6,8 @@ import type {
 import { Doughnut } from 'vue-chartjs';
 import type { PropType } from 'vue';
 import { computed, defineComponent } from 'vue';
-import { stringToColor } from '../../../utils';
-import { isCoding } from '../../../domains';
-import type { Coding, ConceptsCount, MinMaxRange } from '../../../domains';
+import type { Coding, KeyValueRecords, MinMaxRange } from '../../../domains';
+import { generateChartBackgroundColorForKeyValueRecord, generateChartLabelsForKeyValueRecord } from './utils';
 
 export default defineComponent({
     components: {
@@ -17,24 +16,16 @@ export default defineComponent({
     props: {
         items: {
             required: true,
-            type: Array as PropType<ConceptsCount<MinMaxRange | Coding>>,
+            type: Array as PropType<KeyValueRecords<MinMaxRange | Coding>>,
         },
     },
     setup(props) {
         const data = computed<ChartData<'doughnut'>>(() => ({
             datasets: [{
-                data: props.items.map((item) => item.count),
-                backgroundColor: props.items.map(
-                    (item) => (isCoding(item.concept) ?
-                        `${stringToColor(item.concept.display || item.concept.code)}` :
-                        `${stringToColor(`${(item.concept.min + item.concept.max) * 10}`)}`),
-                ),
+                data: props.items.map((item) => item.value),
+                backgroundColor: props.items.map((item) => generateChartBackgroundColorForKeyValueRecord(item)),
             }],
-            labels: props.items.map(
-                (item) => (isCoding(item.concept) ?
-                    item.concept.display || item.concept.code :
-                    `${item.concept.min}-${item.concept.max}`),
-            ),
+            labels: props.items.map((item) => generateChartLabelsForKeyValueRecord(item)),
         }));
 
         const options : ChartOptions<'doughnut'> = {
diff --git a/packages/core/src/components/utility/chart/utils.ts b/packages/core/src/components/utility/chart/utils.ts
new file mode 100644
index 00000000..b44f41b9
--- /dev/null
+++ b/packages/core/src/components/utility/chart/utils.ts
@@ -0,0 +1,47 @@
+import type { KeyValueRecord } from '../../../domains';
+import { isCoding, isMinMaxRange } from '../../../domains';
+import { stringToColor } from '../../../utils';
+
+export function generateChartLabelsForKeyValueRecord(
+    item: KeyValueRecord,
+) : string | undefined {
+    if (isCoding(item.key)) {
+        return item.key.display || item.key.code;
+    }
+
+    if (isMinMaxRange(item.key)) {
+        return `${item.key.min}-${item.key.max}`;
+    }
+
+    if (Array.isArray(item.key)) {
+        return `${item.key.join(', ')}`;
+    }
+
+    if (typeof item.key === 'string') {
+        return item.key;
+    }
+
+    return undefined;
+}
+
+export function generateChartBackgroundColorForKeyValueRecord(
+    item: KeyValueRecord,
+) : string | undefined {
+    if (isCoding(item.key)) {
+        return `${stringToColor(item.key.display || item.key.code)}`;
+    }
+
+    if (isMinMaxRange(item.key)) {
+        return `${stringToColor(`${(item.key.min + item.key.max) * 10}`)}`;
+    }
+
+    if (Array.isArray(item.key)) {
+        return `${stringToColor(item.key.join('+'))}`;
+    }
+
+    if (typeof item.key === 'string') {
+        return stringToColor(item.key);
+    }
+
+    return undefined;
+}
diff --git a/packages/core/src/domains/query/types.ts b/packages/core/src/domains/query/types.ts
index bb97e2b4..9098bb7c 100644
--- a/packages/core/src/domains/query/types.ts
+++ b/packages/core/src/domains/query/types.ts
@@ -1,15 +1,9 @@
 import type { ObjectLiteral } from '../../types';
 import type { Coding } from '../coding';
 import type { PatientFilter } from '../patient';
+import type { KeyValueRecords } from '../types';
 import type { MinMaxRange } from '../utility';
 
-export type ConceptCount<CONCEPT = any> = {
-    concept: CONCEPT,
-    count: number
-};
-
-export type ConceptsCount<CONCEPT = any> = ConceptCount<CONCEPT>[];
-
 export type DiagnosisFilter = {
     category?: Coding[],
 };
@@ -44,16 +38,16 @@ export type QueryBase<
     lastUpdate: string
 };
 
-export type QuerySummaryGroupedItem<K = Coding, V = ConceptsCount<Coding>> = {
+export type QuerySummaryGroupedItem<K = Coding, V = KeyValueRecords<Coding>> = {
     key: K,
     value: V
 };
-export type QuerySummaryGrouped<K = Coding, V = ConceptsCount> = QuerySummaryGroupedItem<K, V>[];
+export type QuerySummaryGrouped<K = Coding, V = KeyValueRecords> = QuerySummaryGroupedItem<K, V>[];
 
 export type QuerySummaryDemographics = {
-    siteDistribution: ConceptsCount<Coding>,
-    genderDistribution: ConceptsCount<Coding>,
-    ageDistribution: ConceptsCount<MinMaxRange>,
+    siteDistribution: KeyValueRecords<Coding>,
+    genderDistribution: KeyValueRecords<Coding>,
+    ageDistribution: KeyValueRecords<MinMaxRange>,
 };
 
 export type QuerySummaryBase = {
diff --git a/packages/core/src/domains/types.ts b/packages/core/src/domains/types.ts
index 48fee1aa..c3274bd4 100644
--- a/packages/core/src/domains/types.ts
+++ b/packages/core/src/domains/types.ts
@@ -15,3 +15,9 @@ export type CodeRecord<V extends string = string> = {
     code: V,
     display?: string
 };
+
+export type KeyValueRecord<KEY = any, VALUE = number> = {
+    key: KEY,
+    value: VALUE
+};
+export type KeyValueRecords<KEY = any, VALUE = number> = KeyValueRecord<KEY, VALUE>[];
diff --git a/packages/mtb/src/runtime/components/core/MQuerySummaryMedication.vue b/packages/mtb/src/runtime/components/core/MQuerySummaryMedication.vue
index 4f7de251..e0376cdb 100644
--- a/packages/mtb/src/runtime/components/core/MQuerySummaryMedication.vue
+++ b/packages/mtb/src/runtime/components/core/MQuerySummaryMedication.vue
@@ -1,11 +1,12 @@
 <script lang="ts">
-import { DChartBar, DQuerySummaryGrouped } from '@dnpm-dip/core';
+import { DChartBar, DChartDoughnut, DQuerySummaryGrouped } from '@dnpm-dip/core';
 import { type PropType, defineComponent } from 'vue';
 import type { QuerySummaryMedication } from '../../domains';
 
 export default defineComponent({
     components: {
         DChartBar,
+        DChartDoughnut,
         DQuerySummaryGrouped,
     },
     props: {
@@ -32,11 +33,14 @@ export default defineComponent({
                     <h6>Verteilung nach Variante</h6>
 
                     <DQuerySummaryGrouped
-                        :items="entity.recommendations.distributionbySupportingVariant"
+                        :items="entity.recommendations.distributionBySupportingVariant"
                         :label="'Variante'"
                     >
                         <template #default="{ item }">
-                            {{ item }}
+                            <DChartDoughnut
+                                style="max-height: 450px"
+                                :items="item.value"
+                            />
                         </template>
                     </DQuerySummaryGrouped>
                 </div>
@@ -61,7 +65,10 @@ export default defineComponent({
                         :label="'Variante'"
                     >
                         <template #default="{ item }">
-                            {{ item }}
+                            <DChartDoughnut
+                                style="max-height: 450px"
+                                :items="item.value"
+                            />
                         </template>
                     </DQuerySummaryGrouped>
                 </div>
diff --git a/packages/mtb/src/runtime/components/core/MQuerySummaryTumorDiagnostics.vue b/packages/mtb/src/runtime/components/core/MQuerySummaryTumorDiagnostics.vue
index b55f1569..6d3ea2ba 100644
--- a/packages/mtb/src/runtime/components/core/MQuerySummaryTumorDiagnostics.vue
+++ b/packages/mtb/src/runtime/components/core/MQuerySummaryTumorDiagnostics.vue
@@ -1,10 +1,11 @@
 <script lang="ts">
-import { DChartBar, DQuerySummaryGrouped } from '@dnpm-dip/core';
+import { DChartBar, DChartDoughnut, DQuerySummaryGrouped } from '@dnpm-dip/core';
 import { type PropType, defineComponent } from 'vue';
 import type { QuerySummaryTumorDiagnostics } from '../../domains';
 
 export default defineComponent({
     components: {
+        DChartDoughnut,
         DChartBar,
         DQuerySummaryGrouped,
     },
@@ -18,33 +19,38 @@ export default defineComponent({
 </script>
 <template>
     <div>
+        <h5>Tumor-Entitäten (ICD-10-GM)</h5>
         <div class="row">
             <div class="col">
                 <div class="entity-card text-center mb-3 w-100">
-                    <h6>Tumor-Entitäten (ICD-10-GM)</h6>
-
+                    <h6>Verteilung</h6>
                     <DChartBar :items="entity.tumorEntityDistribution" />
                 </div>
             </div>
             <div class="col">
                 <div class="entity-card text-center mb-3 w-100">
-                    <h6>Tumor-Morphologie (IDC-0-3-M)</h6>
-
-                    <DChartBar :items="entity.tumorMorphologyDistribution" />
+                    <h6>Verteilung nach Variante</h6>
+                    <DQuerySummaryGrouped
+                        :items="entity.tumorEntityDistributionByVariant"
+                        :label="'Variante'"
+                    >
+                        <template #default="{ item }">
+                            <DChartDoughnut
+                                style="max-height: 450px"
+                                :items="item.value"
+                            />
+                        </template>
+                    </DQuerySummaryGrouped>
                 </div>
             </div>
         </div>
-        <div>
-            <div class="entity-card mb-3 w-100">
-                <h6>Tumor-Entitäten (ICD-10-GM) pro Variante</h6>
-                <DQuerySummaryGrouped
-                    :items="entity.tumorEntityDistributionByVariant"
-                    :label="'Variante'"
-                >
-                    <template #default="{ item }">
-                        {{ item }}
-                    </template>
-                </DQuerySummaryGrouped>
+        <h5>Tumor-Morphologie (IDC-0-3-M)</h5>
+        <div class="row">
+            <div class="col">
+                <div class="entity-card text-center mb-3 w-100">
+                    <h6>Verteilung</h6>
+                    <DChartBar :items="entity.tumorMorphologyDistribution" />
+                </div>
             </div>
         </div>
     </div>
diff --git a/packages/mtb/src/runtime/domains/query/types.ts b/packages/mtb/src/runtime/domains/query/types.ts
index 5e8c23a5..ce58c9f6 100644
--- a/packages/mtb/src/runtime/domains/query/types.ts
+++ b/packages/mtb/src/runtime/domains/query/types.ts
@@ -1,22 +1,23 @@
 import type {
     CodeRecord,
-    Coding, ConceptsCount, QueryBase, QueryRequestMode, QuerySummaryBase, QuerySummaryGrouped,
+    Coding, KeyValueRecords, QueryBase, QueryRequestMode, QuerySummaryBase, QuerySummaryGrouped,
 } from '@dnpm-dip/core';
 
 export type QuerySummaryTumorDiagnostics = {
-    tumorEntityDistribution: ConceptsCount<Coding>,
-    tumorEntityDistributionByVariant: QuerySummaryGrouped,
-    tumorMorphologyDistribution: ConceptsCount<Coding>
+    tumorEntityDistribution: KeyValueRecords<Coding>,
+    tumorEntityDistributionByVariant: KeyValueRecords<string, KeyValueRecords<Coding>>,
+    tumorMorphologyDistribution: KeyValueRecords<Coding>
 };
 
 type MedicationRecommendations = {
-    overallDistribution: ConceptsCount<Coding>,
-    distributionbySupportingVariant: QuerySummaryGrouped
+    overallDistribution: KeyValueRecords<Coding>,
+    distributionBySupportingVariant: KeyValueRecords<string, KeyValueRecords<string[]>>
 };
 
 type MedicationTherapies = {
-    overallDistribution: ConceptsCount<Coding>,
-    responseDistributionByTherapy: QuerySummaryGrouped
+    meanDurations: KeyValueRecords<string[]>,
+    overallDistribution: KeyValueRecords<string[]>,
+    responseDistributionByTherapy: KeyValueRecords<string[], KeyValueRecords<Coding>>
 };
 
 export type QuerySummaryMedication = {
diff --git a/packages/mtb/src/runtime/pages/query/[id]/index/index.vue b/packages/mtb/src/runtime/pages/query/[id]/index/index.vue
index 823192de..8a87a55f 100644
--- a/packages/mtb/src/runtime/pages/query/[id]/index/index.vue
+++ b/packages/mtb/src/runtime/pages/query/[id]/index/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import {
-    DChartBar, DChartDoughnut, type NavItem, type URLQueryRecord,
+    DChartBar, DChartDoughnut, DQuerySummaryDemographics, type NavItem, type URLQueryRecord,
 } from '@dnpm-dip/core';
 import type { PropType, Ref } from 'vue';
 import { inject, ref } from 'vue';
@@ -12,6 +12,7 @@ import type { QuerySession } from '../../../../domains';
 
 export default defineNuxtComponent({
     components: {
+        DQuerySummaryDemographics,
         MQuerySummaryMedication,
         MQuerySummaryTumorDiagnostics,
         DChartDoughnut,
@@ -30,10 +31,10 @@ export default defineNuxtComponent({
                 id: 'default', name: 'Demographie', icon: 'fas fa-globe', urlSuffix: '',
             },
             {
-                id: 'diagnostics', name: 'Diagnose', icon: 'fas fa-globe', urlSuffix: '',
+                id: 'diagnostics', name: 'Diagnose', icon: 'fas fa-stethoscope', urlSuffix: '',
             },
             {
-                id: 'medication', name: 'Medikamente', icon: 'fas fa-globe', urlSuffix: '',
+                id: 'medication', name: 'Medikamente', icon: 'fas fa-pills', urlSuffix: '',
             },
         ];
 
@@ -83,44 +84,7 @@ export default defineNuxtComponent({
             >
                 <template #default="props">
                     <template v-if="navItemId === 'default'">
-                        <div>
-                            <h5>Allgemein</h5>
-                            <div class="row">
-                                <div class="col-12 col-xl-4">
-                                    <div class="entity-card text-center mb-3 w-100">
-                                        <h6>
-                                            Patienten pro Standort
-                                        </h6>
-                                        <DChartDoughnut
-                                            style="max-height: 390px"
-                                            :items="props.data.demographics.siteDistribution"
-                                        />
-                                    </div>
-                                </div>
-                                <div class="col-12 col-xl-4">
-                                    <div class="entity-card text-center mb-3 w-100">
-                                        <h6>
-                                            Verteilung von Geschlechtern
-                                        </h6>
-                                        <DChartDoughnut
-                                            style="max-height: 390px"
-                                            :items="props.data.demographics.genderDistribution"
-                                        />
-                                    </div>
-                                </div>
-                                <div class="col-12 col-xl-4">
-                                    <div class="entity-card text-center mb-3 w-100">
-                                        <h6>
-                                            Verteilung des Alters
-                                        </h6>
-                                        <DChartBar
-                                            style="max-height: 390px"
-                                            :items="props.data.demographics.ageDistribution"
-                                        />
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
+                        <DQuerySummaryDemographics :entity="props.data.demographics" />
                     </template>
                     <template v-else-if="navItemId === 'diagnostics'">
                         <MQuerySummaryTumorDiagnostics :entity="props.data.diagnostics" />
diff --git a/packages/portal/nuxt.config.ts b/packages/portal/nuxt.config.ts
index 58cfcbdc..d9c08686 100644
--- a/packages/portal/nuxt.config.ts
+++ b/packages/portal/nuxt.config.ts
@@ -29,7 +29,7 @@ export default defineNuxtConfig({
     },
     runtimeConfig: {
         public: {
-            apiUrl: process.env.API_URL || 'https://dnpm.bwhealthcloud.de/api/',
+            apiUrl: process.env.API_URL || 'https://dnpm.bwhealthcloud.de/new_api/',
         },
     },
 });
diff --git a/packages/rd/src/runtime/components/core/QuerySummaryDistributionBar.vue b/packages/rd/src/runtime/components/core/QuerySummaryDistributionBar.vue
index 38bcf844..cda5dff3 100644
--- a/packages/rd/src/runtime/components/core/QuerySummaryDistributionBar.vue
+++ b/packages/rd/src/runtime/components/core/QuerySummaryDistributionBar.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import type { Coding, ConceptsCount, MinMaxRange } from '@dnpm-dip/core';
+import type { Coding, KeyValueRecords, MinMaxRange } from '@dnpm-dip/core';
 import { isCoding, stringToColor } from '@dnpm-dip/core';
 import type {
     ChartData, ChartOptions,
@@ -15,23 +15,23 @@ export default defineComponent({
     props: {
         items: {
             required: true,
-            type: Array as PropType<ConceptsCount<MinMaxRange | Coding>>,
+            type: Array as PropType<KeyValueRecords<MinMaxRange | Coding>>,
         },
     },
     setup(props) {
         const data = computed<ChartData<'bar'>>(() => ({
             datasets: [{
-                data: props.items.map((item) => item.count),
+                data: props.items.map((item) => item.value),
                 backgroundColor: props.items.map(
-                    (item) => (isCoding(item.concept) ?
-                        `${stringToColor(item.concept.display || item.concept.code)}` :
-                        `${stringToColor(`${(item.concept.min + item.concept.max) * 10}`)}`),
+                    (item) => (isCoding(item.key) ?
+                        `${stringToColor(item.key.display || item.key.code)}` :
+                        `${stringToColor(`${(item.key.min + item.key.max) * 10}`)}`),
                 ),
             }],
             labels: props.items.map(
-                (item) => (isCoding(item.concept) ?
-                    item.concept.display || item.concept.code :
-                    `${item.concept.min}-${item.concept.max}`),
+                (item) => (isCoding(item.key) ?
+                    item.key.display || item.key.code :
+                    `${item.key.min}-${item.key.max}`),
             ),
         }));
 
diff --git a/packages/rd/src/runtime/components/core/QuerySummaryDistributionDoughnut.vue b/packages/rd/src/runtime/components/core/QuerySummaryDistributionDoughnut.vue
index 8ff6c360..efcd8ee8 100644
--- a/packages/rd/src/runtime/components/core/QuerySummaryDistributionDoughnut.vue
+++ b/packages/rd/src/runtime/components/core/QuerySummaryDistributionDoughnut.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import type { Coding, ConceptsCount, MinMaxRange } from '@dnpm-dip/core';
+import type { Coding, KeyValueRecords, MinMaxRange } from '@dnpm-dip/core';
 import { isCoding, stringToColor } from '@dnpm-dip/core';
 import type {
     ChartData,
@@ -16,23 +16,23 @@ export default defineComponent({
     props: {
         items: {
             required: true,
-            type: Array as PropType<ConceptsCount<MinMaxRange | Coding>>,
+            type: Array as PropType<KeyValueRecords<MinMaxRange | Coding>>,
         },
     },
     setup(props, { emit }) {
         const data = computed<ChartData<'doughnut'>>(() => ({
             datasets: [{
-                data: props.items.map((item) => item.count),
+                data: props.items.map((item) => item.value),
                 backgroundColor: props.items.map(
-                    (item) => (isCoding(item.concept) ?
-                        `${stringToColor(item.concept.display || item.concept.code)}` :
-                        `${stringToColor(`${(item.concept.min + item.concept.max) * 10}`)}`),
+                    (item) => (isCoding(item.key) ?
+                        `${stringToColor(item.key.display || item.key.code)}` :
+                        `${stringToColor(`${(item.key.min + item.key.max) * 10}`)}`),
                 ),
             }],
             labels: props.items.map(
-                (item) => (isCoding(item.concept) ?
-                    item.concept.display || item.concept.code :
-                    `${item.concept.min}-${item.concept.max}`),
+                (item) => (isCoding(item.key) ?
+                    item.key.display || item.key.code :
+                    `${item.key.min}-${item.key.max}`),
             ),
         }));
 
diff --git a/packages/rd/src/runtime/components/core/RQuerySummaryDiagnostics.vue b/packages/rd/src/runtime/components/core/RQuerySummaryDiagnostics.vue
index 70815849..eecb67ed 100644
--- a/packages/rd/src/runtime/components/core/RQuerySummaryDiagnostics.vue
+++ b/packages/rd/src/runtime/components/core/RQuerySummaryDiagnostics.vue
@@ -24,19 +24,19 @@ export default defineComponent({
             <div class="col-12 col-xl-6">
                 <div class="entity-card text-center mb-3 w-100">
                     <h6 class="text-center">
-                        Verteilung von HPOTermen
+                        Verteilung von Diagnose Kategorien
                     </h6>
-                    <DChartBar
-                        :items="entity.overall.hpoTermDistribution"
-                    />
+                    <DChartBar :items="entity.overall.diseaseCategoryDistribution" />
                 </div>
             </div>
             <div class="col-12 col-xl-6">
                 <div class="entity-card text-center mb-3 w-100">
                     <h6 class="text-center">
-                        Verteilung von Diagnose Kategorien
+                        Verteilung von HPOTermen
                     </h6>
-                    <DChartBar :items="entity.overall.diseaseCategoryDistribution" />
+                    <DChartBar
+                        :items="entity.overall.hpoTermDistribution"
+                    />
                 </div>
             </div>
         </div>
diff --git a/packages/rd/src/runtime/domains/query/types.ts b/packages/rd/src/runtime/domains/query/types.ts
index c8637aaa..5210ac9b 100644
--- a/packages/rd/src/runtime/domains/query/types.ts
+++ b/packages/rd/src/runtime/domains/query/types.ts
@@ -1,7 +1,7 @@
 import type {
     CodeRecord,
     Coding,
-    ConceptsCount,
+    KeyValueRecords,
     QueryBase,
     QueryRequestMode,
     QuerySummaryBase, QuerySummaryGrouped,
@@ -38,14 +38,14 @@ export type QuerySessionCreate = {
 export type QuerySession = QueryBase<QueryCriteria>;
 
 export type VariantDistribution = QuerySummaryGrouped<Coding, {
-    diseaseCategoryDistribution: ConceptsCount<Coding>,
-    hpoTermDistribution: ConceptsCount<Coding>
+    diseaseCategoryDistribution: KeyValueRecords<Coding>,
+    hpoTermDistribution: KeyValueRecords<Coding>
 }>;
 
 export type QuerySummaryDiagnostics = {
     overall: {
-        hpoTermDistribution: ConceptsCount<Coding>,
-        diseaseCategoryDistribution: ConceptsCount<Coding>
+        hpoTermDistribution: KeyValueRecords<Coding>,
+        diseaseCategoryDistribution: KeyValueRecords<Coding>
     },
     variant: VariantDistribution[]
 };
diff --git a/packages/rd/src/runtime/pages/query/[id]/index/index.vue b/packages/rd/src/runtime/pages/query/[id]/index/index.vue
index 9b28736d..4b6ef7c5 100644
--- a/packages/rd/src/runtime/pages/query/[id]/index/index.vue
+++ b/packages/rd/src/runtime/pages/query/[id]/index/index.vue
@@ -1,9 +1,8 @@
 <script lang="ts">
-import type { NavItem, URLQueryRecord } from '@dnpm-dip/core';
+import { DQuerySummaryDemographics, type NavItem, type URLQueryRecord } from '@dnpm-dip/core';
 import type { PropType, Ref } from 'vue';
 import { inject, ref } from 'vue';
 import CollectionTransform from '@dnpm-dip/core/components/utility/DCollectionTransform.vue';
-import { DChartBar, DChartDoughnut } from '@dnpm-dip/core';
 import { defineNuxtComponent } from '#imports';
 import QuerySummaryEntity from '../../../../components/core/QuerySummaryEntity';
 import RQuerySummaryDiagnostics from '../../../../components/core/RQuerySummaryDiagnostics.vue';
@@ -11,10 +10,9 @@ import type { QuerySession } from '../../../../domains';
 
 export default defineNuxtComponent({
     components: {
+        DQuerySummaryDemographics,
         RQuerySummaryDiagnostics,
         CollectionTransform,
-        DChartBar,
-        DChartDoughnut,
         QuerySummaryEntity,
     },
     props: {
@@ -29,7 +27,7 @@ export default defineNuxtComponent({
                 id: 'default', name: 'Demographie', icon: 'fas fa-globe', urlSuffix: '',
             },
             {
-                id: 'variant', name: 'Diagnostik', icon: 'fas fa-puzzle-piece', urlSuffix: '/patients',
+                id: 'variant', name: 'Diagnostik', icon: 'fas fa-stethoscope', urlSuffix: '/patients',
             },
         ];
 
@@ -79,44 +77,7 @@ export default defineNuxtComponent({
             >
                 <template #default="props">
                     <template v-if="navItemId === 'default'">
-                        <div>
-                            <h5>Allgemein</h5>
-                            <div class="row">
-                                <div class="col-12 col-xl-4">
-                                    <div class="entity-card text-center mb-3 w-100">
-                                        <h6>
-                                            Patienten pro Standort
-                                        </h6>
-                                        <DChartDoughnut
-                                            style="max-height: 390px"
-                                            :items="props.data.demographics.siteDistribution"
-                                        />
-                                    </div>
-                                </div>
-                                <div class="col-12 col-xl-4">
-                                    <div class="entity-card text-center mb-3 w-100">
-                                        <h6>
-                                            Verteilung von Geschlechtern
-                                        </h6>
-                                        <DChartDoughnut
-                                            style="max-height: 390px"
-                                            :items="props.data.demographics.genderDistribution"
-                                        />
-                                    </div>
-                                </div>
-                                <div class="col-12 col-xl-4">
-                                    <div class="entity-card text-center mb-3 w-100">
-                                        <h6>
-                                            Verteilung des Alters
-                                        </h6>
-                                        <DChartBar
-                                            style="max-height: 390px"
-                                            :items="props.data.demographics.ageDistribution"
-                                        />
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
+                        <DQuerySummaryDemographics :entity="props.data.demographics" />
                     </template>
 
                     <template v-else>