diff --git a/packages/portal/assets/css/bootstrap-override.css b/packages/portal/assets/css/bootstrap-override.css
index ae6e3143..4a3a160c 100644
--- a/packages/portal/assets/css/bootstrap-override.css
+++ b/packages/portal/assets/css/bootstrap-override.css
@@ -123,3 +123,7 @@ a:focus{
     padding: .5rem;
 }
 
+
+.b-form-tag {
+    margin-bottom: 0.25rem;
+}
diff --git a/packages/portal/assets/css/list.css b/packages/portal/assets/css/list.css
new file mode 100644
index 00000000..d6d4ce47
--- /dev/null
+++ b/packages/portal/assets/css/list.css
@@ -0,0 +1,36 @@
+.list {
+    display: flex;
+    flex-direction: column;
+}
+
+.list .list-items {
+    padding: 0;
+    margin: 0;
+}
+
+.list-header,
+.list-search {
+    margin-bottom: 0.5rem;
+}
+
+.list .list-item {
+    padding: 0.25rem 0.25rem;
+    margin-bottom: 0.5rem;
+    vertical-align: middle;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.list .list-card {
+    background-color: #ececec;
+    border: 1px solid #dedede;
+
+    box-shadow: 0 4px 25px 0 rgba(0,0,0,.1);
+    transition: all .3s ease-in-out;
+
+    border-radius: 4px;
+
+    padding: 0.5rem 1rem;
+    width: 100%;
+}
diff --git a/packages/portal/nuxt.config.ts b/packages/portal/nuxt.config.ts
index 04998612..6ef46f31 100644
--- a/packages/portal/nuxt.config.ts
+++ b/packages/portal/nuxt.config.ts
@@ -10,6 +10,7 @@ export default defineNuxtConfig({
     css: [
         '@fortawesome/fontawesome-free/css/all.css',
         'bootstrap/dist/css/bootstrap.css',
+        'bootstrap-vue-next/dist/bootstrap-vue-next.css',
         '@/assets/css/bootstrap-override.css',
         '@/assets/css/layout/body.css',
         '@/assets/css/layout/footer.css',
@@ -18,6 +19,7 @@ export default defineNuxtConfig({
         '@/assets/css/layout/shared.css',
         '@/assets/css/layout/sidebar.css',
         '@/assets/css/vue-layout-navigation.css',
+        '@/assets/css/list.css',
     ],
     alias: {
         '@dnpm-dip/core': path.join(__dirname, '..', 'core', 'src'),
diff --git a/packages/portal/package.json b/packages/portal/package.json
index c35bea7d..91629e34 100644
--- a/packages/portal/package.json
+++ b/packages/portal/package.json
@@ -27,6 +27,7 @@
         "@vue-layout/preset-font-awesome": "^3.0.0",
         "@vuelidate/core": "^2.0.3",
         "@vuelidate/validators": "^2.0.4",
+        "bootstrap-vue-next": "^0.14.10",
         "bootstrap": "^5.3.2",
         "nuxt": "^3.8.0",
         "vue": "^3.3.5",
diff --git a/packages/rare-diseases/src/runtime/components/FormSelectSearch.vue b/packages/rare-diseases/src/runtime/components/FormSelectSearch.vue
index 14f3d584..dc89b391 100644
--- a/packages/rare-diseases/src/runtime/components/FormSelectSearch.vue
+++ b/packages/rare-diseases/src/runtime/components/FormSelectSearch.vue
@@ -61,7 +61,7 @@ export default defineComponent({
             default: 6,
         },
     },
-    emits: ['update:modelValue'],
+    emits: ['update:modelValue', 'changed'],
     async setup(props, { emit }) {
         const q = ref('');
         q.value = props.modelValue;
@@ -100,6 +100,7 @@ export default defineComponent({
             q.value = option.value;
 
             emit('update:modelValue', option.id);
+            emit('changed', option);
         };
 
         const display = () => {
diff --git a/packages/rare-diseases/src/runtime/components/SearchForm.vue b/packages/rare-diseases/src/runtime/components/SearchForm.vue
index 1b7e9816..b8af1cb3 100644
--- a/packages/rare-diseases/src/runtime/components/SearchForm.vue
+++ b/packages/rare-diseases/src/runtime/components/SearchForm.vue
@@ -1,94 +1,90 @@
 <script lang="ts">
-import { FormInput, FormInputCheckbox, FormSelect } from '@vue-layout/form-controls';
-import { defineComponent, reactive } from 'vue';
+import type { FormSelectOption } from '@vue-layout/form-controls';
+import { FormInput } from '@vue-layout/form-controls';
+import { defineComponent, reactive, ref } from 'vue';
 import type { QueryRequestMode, ValueSetCoding } from '@dnpm-dip/core';
 import { ValueSetEntity } from '@dnpm-dip/core';
 import { useRDAPIClient } from '#imports';
 import type { RDQueryCriteriaScopeValue, RDQueryCriteriaScopes } from '../domains';
 import FormSelectSearch from './FormSelectSearch.vue';
+import Tags from './Tags.vue';
 import ValueSetCodings from './ValueSetCodings.vue';
 
 export default defineComponent({
     components: {
+        Tags,
         ValueSetCodings,
         FormInput,
-        FormInputCheckbox,
-        FormSelect,
         FormSelectSearch,
         ValueSetEntity,
     },
     emits: ['failed', 'created'],
     async setup(props, { emit }) {
-        // todo: how to know the key of the query request body?
-        const form = reactive({
-            // hpoTerms
-            hpo_term: '',
+        const categories = ref<FormSelectOption[]>([]);
+        const hpoTerms = ref<FormSelectOption[]>([]);
 
-            // diagnosis
-            category: '',
+        const selectCategory = (item: FormSelectOption) => {
+            const index = categories.value.findIndex((el) => el.id === item.id);
+            if (index === -1) {
+                categories.value.push(item);
+            }
+        };
+
+        const selectHPOTerm = (item: FormSelectOption) => {
+            const index = hpoTerms.value.findIndex((el) => el.id === item.id);
+            if (index === -1) {
+                hpoTerms.value.push(item);
+            }
+        };
 
-            // variants
+        const variants = reactive({
             gene: '',
             cDNAChange: '',
             gDNAChange: '',
             proteinChange: '',
-
-            // todo: what scope?!
-            vital_status: '',
         });
 
         const apiClient = useRDAPIClient();
 
         const submit = async (mode: `${QueryRequestMode}`) => {
-            let diagnoses : Record<string, RDQueryCriteriaScopeValue> | undefined;
-            let hpoTerms : RDQueryCriteriaScopeValue | undefined;
-            let variants : Record<string, RDQueryCriteriaScopeValue> | undefined;
-
-            const keys = Object.keys(form);
-            for (let i = 0; i < keys.length; i++) {
-                if (form[keys[i]].length === 0) {
-                    continue;
-                }
-
-                switch (keys[i]) {
-                    case 'hpo_term': {
-                        hpoTerms = {
-                            code: form.hpo_term,
-                        };
-                        break;
-                    }
-                    case 'category': {
-                        diagnoses = {
-                            category: {
-                                code: form.category,
-                            },
-                        };
-                        break;
-                    }
-                    case 'vital_status': {
-                        break;
-                    }
-                    default: {
-                        if (typeof variants === 'undefined') {
-                            variants = {};
-                        }
-                        variants[keys[i]] = {
-                            code: form[keys[i]] as string,
+            const criteria : RDQueryCriteriaScopes = {};
+            const keys = Object.keys(variants);
+            if (keys.length > 0) {
+                let isValid = false;
+                const group : Record<string, RDQueryCriteriaScopeValue> = {};
+                for (let i = 0; i < keys.length; i++) {
+                    const code = variants[keys[i] as keyof typeof variants];
+                    if (code.length > 0) {
+                        group[keys[i]] = {
+                            code,
                         };
-                        break;
+                        isValid = true;
                     }
                 }
-            }
 
-            const criteria : RDQueryCriteriaScopes = {};
-            if (diagnoses) {
-                criteria.diagnoses = [diagnoses];
+                if (isValid) {
+                    criteria.variants = [group];
+                }
             }
-            if (hpoTerms) {
-                criteria.hpoTerms = [hpoTerms];
+
+            if (hpoTerms.value.length > 0) {
+                criteria.hpoTerms = [];
+
+                for (let i = 0; i < hpoTerms.value.length; i++) {
+                    criteria.hpoTerms.push({
+                        code: `${hpoTerms.value[i].id}`,
+                    });
+                }
             }
-            if (variants) {
-                criteria.variants = [variants];
+
+            if (categories.value.length > 0) {
+                criteria.diagnoses = [];
+
+                for (let i = 0; i < categories.value.length; i++) {
+                    criteria.diagnoses.push({
+                        code: `${categories.value[i].id}`,
+                    });
+                }
             }
 
             try {
@@ -111,7 +107,13 @@ export default defineComponent({
         });
 
         return {
-            form,
+            hpoTerms,
+            categories,
+
+            selectCategory,
+            selectHPOTerm,
+
+            form: variants,
             submit,
             transformCodingsForSelect,
         };
@@ -137,8 +139,8 @@ export default defineComponent({
                                 >
                                     <template #default="options">
                                         <FormSelectSearch
-                                            v-model="form.category"
                                             :options="options"
+                                            @changed="selectCategory"
                                         />
                                     </template>
                                 </ValueSetCodings>
@@ -153,6 +155,11 @@ export default defineComponent({
                             </div>
                         </template>
                     </ValueSetEntity>
+
+                    <Tags
+                        v-model="categories"
+                        tag-variant="dark"
+                    />
                 </div>
                 <div class="col">
                     <h6>HPO</h6>
@@ -170,8 +177,8 @@ export default defineComponent({
                                 >
                                     <template #default="options">
                                         <FormSelectSearch
-                                            v-model="form.hpo_term"
                                             :options="options"
+                                            @changed="selectHPOTerm"
                                         />
                                     </template>
                                 </ValueSetCodings>
@@ -186,6 +193,11 @@ export default defineComponent({
                             </div>
                         </template>
                     </ValueSetEntity>
+
+                    <Tags
+                        v-model="hpoTerms"
+                        tag-variant="dark"
+                    />
                 </div>
             </div>
             <div class="row mb-2">
diff --git a/packages/rare-diseases/src/runtime/components/Tags.vue b/packages/rare-diseases/src/runtime/components/Tags.vue
new file mode 100644
index 00000000..f459471c
--- /dev/null
+++ b/packages/rare-diseases/src/runtime/components/Tags.vue
@@ -0,0 +1,83 @@
+<script lang="ts">
+import type { ColorVariant } from 'bootstrap-vue-next';
+import { BFormTag } from 'bootstrap-vue-next';
+import type { PropType } from 'vue';
+import { defineComponent, ref } from 'vue';
+
+type Tag = {
+    id: string | number,
+    value: string
+};
+export default defineComponent({
+    components: {
+        BFormTag,
+    },
+    props: {
+        modelValue: {
+            type: Array as PropType<Tag[]>,
+            required: true,
+        },
+        tagClass: {
+            type: String as PropType<any>,
+        },
+        tagPills: {
+            type: Boolean,
+        },
+        tagValidator: {
+            type: Function as PropType<(t: string) => boolean>,
+        },
+        tagVariant: {
+            type: String as PropType<ColorVariant>,
+        },
+    },
+    emits: ['update:modelValue'],
+    setup(props, { emit }) {
+        const items = ref<Tag[]>([]);
+        items.value = props.modelValue;
+
+        const drop = (value: string) => {
+            const index = items.value.findIndex((el) => el.value === value);
+            if (index !== -1) {
+                items.value.splice(index, 1);
+            }
+
+            emit('update:modelValue', items);
+        };
+
+        return {
+            items,
+            drop,
+        };
+    },
+});
+</script>
+<template>
+    <slot>
+        <ul class="list-unstyled mb-0 d-flex flex-wrap align-items-center">
+            <template
+                v-for="(item, index) in items"
+                :key="index"
+            >
+                <slot
+                    name="tag"
+                    :tag="item.id"
+                    :tag-class="tagClass"
+                    :tag-variant="tagVariant"
+                    :tag-pills="tagPills"
+                    :remove-tag="drop"
+                >
+                    <BFormTag
+                        :key="item.id"
+                        :class="tagClass"
+                        tag="li"
+                        :variant="tagVariant"
+                        :pill="tagPills"
+                        @remove="drop"
+                    >
+                        {{ item.value }}
+                    </BFormTag>
+                </slot>
+            </template>
+        </ul>
+    </slot>
+</template>
diff --git a/packages/rare-diseases/src/runtime/domains/query/types.ts b/packages/rare-diseases/src/runtime/domains/query/types.ts
index 8bdbbda8..3c434527 100644
--- a/packages/rare-diseases/src/runtime/domains/query/types.ts
+++ b/packages/rare-diseases/src/runtime/domains/query/types.ts
@@ -6,7 +6,7 @@ export type RDQueryCriteriaScopeValue = {
 };
 
 export type RDQueryCriteriaScopes = {
-    diagnoses?: Record<string, RDQueryCriteriaScopeValue>[],
+    diagnoses?: RDQueryCriteriaScopeValue[],
     hpoTerms?: RDQueryCriteriaScopeValue[],
     variants?: Record<string, RDQueryCriteriaScopeValue>[]
 };
diff --git a/packages/rare-diseases/src/runtime/pages/query/[id]/index.vue b/packages/rare-diseases/src/runtime/pages/query/[id]/index.vue
index fb09ee49..8dea6c10 100644
--- a/packages/rare-diseases/src/runtime/pages/query/[id]/index.vue
+++ b/packages/rare-diseases/src/runtime/pages/query/[id]/index.vue
@@ -2,10 +2,12 @@
 import { Nav } from '@dnpm-dip/core';
 import type { PropType } from 'vue';
 import { defineNuxtComponent } from '#app';
+import QueryPatientList from '../../../components/QueryPatientList';
 import type { RDQuerySession } from '../../../domains';
 
 export default defineNuxtComponent({
     components: {
+        QueryPatientList,
         Nav,
     },
     props: {
@@ -15,34 +17,99 @@ export default defineNuxtComponent({
         },
     },
     setup() {
-        const navItems = [
-            {
-                name: 'Overview', icon: 'fas fa-bars', urlSuffix: '',
-            },
-            {
-                name: 'Summary', icon: 'fa-solid fa-newspaper', urlSuffix: '/summary',
-            },
-        ];
 
-        return {
-            navItems,
-        };
     },
 });
 </script>
 <template>
     <div>
-        <div>
-            <h4>Query <small class="text-muted">{{ entity.id }}</small></h4>
+        <div class="d-flex flex-row">
+            <h4>
+                <NuxtLink
+                    class="btn btn-xs btn-dark me-1"
+                    :to="'/rd/search'"
+                >
+                    <i class="fa fa-arrow-left" />
+                </NuxtLink>
+                Query <small class="text-muted">{{ entity.id }}</small>
+            </h4>
         </div>
-        <div class="mb-3">
-            <Nav
-                :items="navItems"
-                :path="'/rd/query/' + entity.id"
-                :prev-link="'/rd/search'"
-            />
+
+        <div class="mb-2">
+            <div>
+                Die Anfrage wurde <strong>{{ entity.mode.display.toLowerCase() }}</strong> ausgeführt und umfasst
+                Patienten mit folgenden Eigenschaften
+            </div>
+            <div>
+                <strong>Alter:</strong> {{ entity.filters.patientFilter.ageRange.min }} - {{ entity.filters.patientFilter.ageRange.max }}
+            </div>
+            <div>
+                <strong>Geschlecht:</strong>
+                <template
+                    v-for="(item, index) in entity.filters.patientFilter.genders"
+                    :key="item.code"
+                >
+                    {{ index > 0 ? ', ' : '' }} {{ item.display }}
+                </template>
+            </div>
+            <div>
+                <strong>Vital Status:</strong>
+                <template
+                    v-for="(item, index) in entity.filters.patientFilter.vitalStatus"
+                    :key="item.code"
+                >
+                    {{ index > 0 ? ', ' : '' }} {{ item.display }}
+                </template>
+            </div>
         </div>
 
-        <NuxtPage :entity="entity" />
+        <hr>
+
+        <h6>Patienten</h6>
+        <QueryPatientList :query-id="entity.id">
+            <template #default="props">
+                <div class="list">
+                    <ul class="list-body list-unstyled">
+                        <template
+                            v-for="(item, index) in props.data"
+                            :key="item.id"
+                        >
+                            <li class="list-item flex-row">
+                                <div class="list-card">
+                                    <div class="d-flex flex-row">
+                                        <div>
+                                            <strong># {{ index + 1 }}</strong>
+
+                                            {{ item.gender.display }}, {{ item.age.value }} Jahre
+                                            (<template v-if="item.vitalStatus.code === 'alive'">
+                                                <span class="text-success">{{ item.vitalStatus.display }}</span>
+                                            </template>
+                                            <template v-else-if="item.vitalStatus.code === 'deceased'">
+                                                <span class="text-danger">{{ item.vitalStatus.display }}</span>
+                                            </template>
+                                            <template v-else>
+                                                {{ item.vitalStatus.display }}
+                                            </template>)
+                                        </div>
+                                        <div class="ms-auto">
+                                            <button class="btn btn-dark btn-xs">
+                                                <i class="fa fa-chevron-down" />
+                                            </button>
+
+                                            <NuxtLink
+                                                :to="'/rd/query/'+ entity.id + '/patients/' +item.id"
+                                                class="btn btn-xs btn-outline-primary ms-1"
+                                            >
+                                                <i class="fa-solid fa-bars" />
+                                            </NuxtLink>
+                                        </div>
+                                    </div>
+                                </div>
+                            </li>
+                        </template>
+                    </ul>
+                </div>
+            </template>
+        </QueryPatientList>
     </div>
 </template>
diff --git a/packages/rare-diseases/src/runtime/pages/query/[id]/index/index.vue b/packages/rare-diseases/src/runtime/pages/query/[id]/index/index.vue
deleted file mode 100644
index 3c7add55..00000000
--- a/packages/rare-diseases/src/runtime/pages/query/[id]/index/index.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<script lang="ts">
-import { BTable } from 'bootstrap-vue-next';
-import type { PropType } from 'vue';
-import { defineNuxtComponent } from '#app';
-import QueryPatientList from '../../../../components/QueryPatientList';
-import type { RDQuerySession } from '../../../../domains/query';
-
-export default defineNuxtComponent({
-    components: {
-        BTable,
-        QueryPatientList,
-    },
-    props: {
-        entity: {
-            type: Object as PropType<RDQuerySession>,
-            required: true,
-        },
-    },
-    async setup() {
-        const fields = [
-            {
-                key: 'id', label: 'ID', thClass: 'text-left', tdClass: 'text-left',
-            },
-            {
-                key: 'gender', label: 'Gender', thClass: 'text-left', tdClass: 'text-left',
-            },
-            {
-                key: 'vitalStatus', label: 'Status', thClass: 'text-left', tdClass: 'text-left',
-            },
-            {
-                key: 'age', label: 'Age', thClass: 'text-left', tdClass: 'text-left',
-            },
-            { key: 'options', label: '', tdClass: 'text-left' },
-        ];
-
-        return {
-            fields,
-        };
-    },
-});
-</script>
-<template>
-    <div>
-        <h6>Patients</h6>
-        <QueryPatientList :query-id="entity.id">
-            <template #default="props">
-                <BTable
-                    :items="props.data"
-                    :fields="fields"
-                    :busy="props.busy"
-                    head-variant="'dark'"
-                    outlined
-                    class="table-striped"
-                >
-                    <template #cell(gender)="data">
-                        {{ data.item.gender.display }}
-                    </template>
-                    <template #cell(vitalStatus)="data">
-                        {{ data.item.vitalStatus.display }}
-                    </template>
-                    <template #cell(age)="data">
-                        {{ data.item.age.value }}
-                    </template>
-                    <template #cell(options)="data">
-                        <NuxtLink
-                            :to="'/rd/query/'+ entity.id + '/patients/' +data.item.id"
-                            class="btn btn-xs btn-outline-primary me-1"
-                        >
-                            <i class="fa-solid fa-bars" />
-                        </NuxtLink>
-                    </template>
-                </BTable>
-            </template>
-            <template #error="{ error}">
-                {{ error }}
-            </template>
-        </QueryPatientList>
-    </div>
-</template>
diff --git a/packages/rare-diseases/src/runtime/pages/query/[id]/index/summary.vue b/packages/rare-diseases/src/runtime/pages/query/[id]/index/summary.vue
deleted file mode 100644
index 744658ae..00000000
--- a/packages/rare-diseases/src/runtime/pages/query/[id]/index/summary.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<script lang="ts">
-import type { PropType } from 'vue';
-import { defineNuxtComponent } from '#app';
-import QuerySummaryEntity from '../../../../components/QuerySummaryEntity';
-import type { RDQuerySession } from '../../../../domains/query';
-
-export default defineNuxtComponent({
-    components: { QuerySummaryEntity },
-    props: {
-        entity: {
-            type: Object as PropType<RDQuerySession>,
-            required: true,
-        },
-    },
-});
-</script>
-<template>
-    <div>
-        <QuerySummaryEntity
-            :query-id="entity.id"
-            :lazy="true"
-        >
-            <template #default="{data }">
-                <div>
-                    <div><strong><i class="fas fa-users" /> Total</strong> {{ data.numPatients }}</div>
-                </div>
-            </template>
-        </QuerySummaryEntity>
-    </div>
-</template>
diff --git a/packages/rare-diseases/src/runtime/pages/search.vue b/packages/rare-diseases/src/runtime/pages/search.vue
index 1d00106d..17e01643 100644
--- a/packages/rare-diseases/src/runtime/pages/search.vue
+++ b/packages/rare-diseases/src/runtime/pages/search.vue
@@ -1,7 +1,8 @@
 <script lang="ts">
-import { APIClientErrorBox } from '@dnpm-dip/core';
+import { APIClientErrorBox, PageMetaKey } from '@dnpm-dip/core';
 import type { ClientError } from 'hapic';
 import { ref } from 'vue';
+import { definePageMeta } from '#imports';
 import { defineNuxtComponent, navigateTo } from '#app';
 import SearchForm from '../components/SearchForm.vue';
 import type { RDQuerySession } from '../domains';
@@ -12,6 +13,11 @@ export default defineNuxtComponent({
         SearchForm,
     },
     setup() {
+        definePageMeta({
+            [PageMetaKey.NAVIGATION_TOP_ID]: 'rd',
+            [PageMetaKey.NAVIGATION_SIDE_ID]: 'rd-search',
+        });
+
         const error = ref<null | ClientError>(null);
         const handleFailed = (e: ClientError) => {
             error.value = e;