diff --git a/src/components/InfoButton.vue b/src/components/InfoButton.vue
new file mode 100644
index 00000000..22842953
--- /dev/null
+++ b/src/components/InfoButton.vue
@@ -0,0 +1,16 @@
+<template>
+    <b-button size="sm" variant="link" v-b-tooltip.click :title="info">
+        <b-icon-question-circle class="mr-1"/>
+    </b-button>
+</template>
+
+<script lang="ts">
+    // eslint-disable-next-line no-unused-vars
+    import Vue, {PropType} from 'vue'
+
+    export default Vue.extend({
+        props: {
+            info: String as PropType<string>
+        }
+    })
+</script>
\ No newline at end of file
diff --git a/src/components/RecordCommonDetails.vue b/src/components/RecordCommonDetails.vue
new file mode 100644
index 00000000..4b8786ee
--- /dev/null
+++ b/src/components/RecordCommonDetails.vue
@@ -0,0 +1,104 @@
+<template>
+    <div>
+        <b-table
+                small
+                responsive=true
+                borderless
+                :fields="fields"
+                :items="items">
+            <template v-slot:head()>
+                {{ '' }}
+            </template>
+            <template v-slot:cell(key)="data">
+                <span v-if="data.item.key === 'c'">
+                    {{ $t('chr') }}
+                </span>
+                <span v-else-if="data.item.key === 'p'">
+                    {{ $t('pos') }}
+                </span>
+                <span v-else-if="data.item.key === 'i'">
+                    {{ $t('id') }}
+                </span>
+                <span v-else-if="data.item.key === 'r'">
+                    {{ $t('ref') }}
+                </span>
+                <span v-else-if="data.item.key === 'a'">
+                    {{ $t('alt') }}
+                </span>
+                <span v-else-if="data.item.key === 'q'">
+                    {{ $t('qual') }}
+                </span>
+                <span v-else-if="data.item.key === 'f'">
+                    {{ $t('filter') }}
+                </span>
+            </template>
+            <template v-slot:cell(val)="data">
+                <span v-if="data.item.key === 'c'">
+                    {{ data.item.val }}
+                </span>
+                <span v-else-if="data.item.key === 'p'">
+                    {{ data.item.val }}
+                </span>
+                <span v-else-if="data.item.key === 'i'">
+                    <Identifiers :identifiers="data.item.val" />
+                </span>
+                <span v-else-if="data.item.key === 'r'">
+                    <Allele :allele="data.item.val"/>
+                </span>
+                <span v-else-if="data.item.key === 'a'">
+                    <span v-for="(alt, index) in data.item.val" :key="index">
+                        <Allele :allele="alt"/>
+                        <span v-if="index < data.item.val.length - 1">, </span>
+                    </span>
+                </span>
+                <span v-else-if="data.item.key === 'q'">
+                    {{ data.item.val }}
+                </span>
+                <span v-else-if="data.item.key === 'f'">
+                    {{ data.item.val }}
+                </span>
+            </template>
+        </b-table>
+    </div>
+</template>
+
+<script lang="ts">
+    // eslint-disable-next-line no-unused-vars
+    import Vue, {PropType} from 'vue'
+    // eslint-disable-next-line no-unused-vars
+    import {Record} from '@molgenis/vip-report-api'
+    import Allele from '@/components/Allele.vue'
+    import Identifiers from '@/components/Identifiers.vue'
+
+    export default Vue.extend({
+        components: {Allele, Identifiers},
+        props: {
+            record: Object as PropType<Record>
+        },
+        computed: {
+            fields: function () {
+                return [
+                    {key: 'key', label: 'key'},
+                    {key: 'val', label: 'value'}]
+            },
+            items() {
+                const items:object[] = [{key: 'c', val: this.record['c']},{key: 'p', val: this.record['p']}]
+                // eslint-disable-next-line
+                if(this.record.hasOwnProperty('i')) {
+                    items.push({key: 'i', val: this.record['i']})
+                }
+                items.push({key: 'r', val: this.record['r']})
+                items.push({key: 'a', val: this.record['a']})
+                // eslint-disable-next-line
+                if(this.record.hasOwnProperty('q')) {
+                    items.push({key: 'q', val: this.record['q']})
+                }
+                // eslint-disable-next-line
+                if(this.record.hasOwnProperty('f')) {
+                    items.push({key: 'f', val: this.record['f']})
+                }
+                return items
+            }
+        }
+    })
+</script>
\ No newline at end of file
diff --git a/src/components/RecordDetails.vue b/src/components/RecordDetails.vue
index f95e13be..75a01be0 100644
--- a/src/components/RecordDetails.vue
+++ b/src/components/RecordDetails.vue
@@ -1,75 +1,10 @@
 <template>
     <div>
-        <b-table
-                small
-                responsive=true
-                :fields="fields"
-                :items="items">
-            <template v-slot:head()="data">
-                {{ data.label ? $t(data.label) : '' }}
-            </template>
-            <template v-slot:cell(key)="data">
-                <span v-if="data.item.key === 'c'">
-                    {{ $t('chr') }}
-                </span>
-                <span v-else-if="data.item.key === 'p'">
-                    {{ $t('pos') }}
-                </span>
-                <span v-else-if="data.item.key === 'i'">
-                    {{ $t('id') }}
-                </span>
-                <span v-else-if="data.item.key === 'r'">
-                    {{ $t('ref') }}
-                </span>
-                <span v-else-if="data.item.key === 'a'">
-                    {{ $t('alt') }}
-                </span>
-                <span v-else-if="data.item.key === 'q'">
-                    {{ $t('qual') }}
-                </span>
-                <span v-else-if="data.item.key === 'f'">
-                    {{ $t('filter') }}
-                </span>
-                <span v-else-if="data.item.key === 'n'">
-                    {{ $t('info') }}
-                </span>
-                <span v-else-if="data.item.key === 's'">
-                    {{ $t('sample') }}
-                </span>
-            </template>
-            <template v-slot:cell(val)="data">
-                <span v-if="data.item.key === 'c'">
-                    {{ data.item.val }}
-                </span>
-                <span v-else-if="data.item.key === 'p'">
-                    {{ data.item.val }}
-                </span>
-                <span v-else-if="data.item.key === 'i'">
-                    <Identifiers :identifiers="data.item.val" />
-                </span>
-                <span v-else-if="data.item.key === 'r'">
-                    <Allele :allele="data.item.val"/>
-                </span>
-                <span v-else-if="data.item.key === 'a'">
-                    <span v-for="(alt, index) in data.item.val" :key="index">
-                        <Allele :allele="alt"/>
-                        <span v-if="index < data.item.val.length - 1">, </span>
-                    </span>
-                </span>
-                <span v-else-if="data.item.key === 'q'">
-                    {{ data.item.val }}
-                </span>
-                <span v-else-if="data.item.key === 'f'">
-                    {{ data.item.val }}
-                </span>
-                <span v-else-if="data.item.key === 'n'">
-                    <RecordInfoDetails :metadata="metadata.info" :info="data.item.val" />
-                </span>
-                <span v-else-if="data.item.key === 's'">
-                    {{ data.item.val[sample.index] }}
-                </span>
-            </template>
-        </b-table>
+        <RecordCommonDetails :record="record" />
+        <h4>Info</h4>
+        <RecordInfoDetails :metadata="metadata.info" :info="record.n" />
+        <h4>Sample</h4>
+        <RecordSampleDetails :data="record.s[sample.index]" />
     </div>
 </template>
 
@@ -78,31 +13,16 @@
     import Vue, {PropType} from 'vue'
     // eslint-disable-next-line no-unused-vars
     import {Record, RecordsMetadata, Sample} from '@molgenis/vip-report-api'
-    import Allele from '@/components/Allele.vue'
-    import Identifiers from '@/components/Identifiers.vue'
+    import RecordCommonDetails from '@/components/RecordCommonDetails.vue'
     import RecordInfoDetails from '@/components/RecordInfoDetails.vue'
+    import RecordSampleDetails from '@/components/RecordSampleDetails.vue'
 
     export default Vue.extend({
-        components: {Allele, Identifiers, RecordInfoDetails},
+        components: {RecordCommonDetails, RecordInfoDetails, RecordSampleDetails},
         props: {
             metadata: Object as PropType<RecordsMetadata>,
             record: Object as PropType<Record>,
             sample: Object as PropType<Sample>
-        },
-        computed: {
-            fields: function () {
-                return [
-                    {key: 'key', label: 'prop'},
-                    {key: 'val', label: 'value'}]
-            },
-            items() {
-                const items = []
-                for (let key in this.record) {
-                    const item = {key: key, val: this.record[key]}
-                    items.push(item)
-                }
-                return items
-            }
         }
     })
 </script>
\ No newline at end of file
diff --git a/src/components/RecordInfoDetails.vue b/src/components/RecordInfoDetails.vue
index 29138ecb..47f19e7f 100644
--- a/src/components/RecordInfoDetails.vue
+++ b/src/components/RecordInfoDetails.vue
@@ -1,21 +1,13 @@
 <template>
     <div>
-        <b-table
-                small
-                responsive=true
-                :fields="fields"
-                :items="items">
-            <template v-slot:head()="data">
-                {{ $t(data.label) }}
-            </template>
-            <template v-slot:cell(key)="data">
-                <!-- todo: show description in addition to key: {{ getInfoMetadata(data.item.key).description }} -->
-                {{ data.item.key }}
-            </template>
-            <template v-slot:cell(val)="data">
-                <RecordInfoDetailsItem :metadata="getInfoMetadata(data.item.key)" :value="data.item.val"/>
-            </template>
-        </b-table>
+        <RecordInfoUnnestedDetails :metadata="unnestedMetadata" :info="info" />
+        <div v-for="metadata in nestedMetadata" :key="metadata.key">
+            <h5>
+                {{ metadata.id }}
+                <InfoButton :info="metadata.description" />
+            </h5>
+            <RecordInfoNestedDetails :metadata="metadata.nested" :info="getNestedInfo(metadata)" />
+        </div>
     </div>
 </template>
 
@@ -24,40 +16,42 @@
     import Vue, {PropType} from 'vue'
     // eslint-disable-next-line no-unused-vars
     import {InfoMetadata} from '@molgenis/vip-report-api'
-    import RecordInfoDetailsItem from '@/components/RecordInfoDetailsItem.vue'
+    import RecordInfoNestedDetails from '@/components/RecordInfoNestedDetails.vue'
+    import RecordInfoUnnestedDetails from '@/components/RecordInfoUnnestedDetails.vue'
+    import InfoButton from '@/components/InfoButton.vue'
 
     export default Vue.extend({
-        components: {RecordInfoDetailsItem},
+        components: {InfoButton, RecordInfoNestedDetails, RecordInfoUnnestedDetails},
         props: {
             metadata: Array as PropType<InfoMetadata[]>,
             info: Object as PropType<object>
         },
         computed: {
-            fields: function () {
-                return [
-                    {key: 'key', label: 'prop'},
-                    {key: 'val', label: 'value'}]
+            unnestedMetadata: function () {
+                const unnestedMetadata = this.metadata.filter(infoMetadata => infoMetadata.type !== 'NESTED')
+                unnestedMetadata.sort(this.sortMetadata)
+                return unnestedMetadata
             },
-            items() {
-                const items = []
-                for (let key in this.info) {
-                    // fix for invalid VCF
-                    if (key !== '') {
-                        // @ts-ignore
-                        const item = {key: key, val: this.info[key]}
-                        items.push(item)
-                    }
-                }
-                return items
+            nestedMetadata: function () {
+                const nestedMetadata = this.metadata.filter(infoMetadata => infoMetadata.type === 'NESTED')
+                nestedMetadata.sort(this.sortMetadata)
+                return nestedMetadata
             }
         },
         methods: {
-            getInfoMetadata(key: string): InfoMetadata {
-                const infoMetadata = this.metadata.find(item => item.id === key)
-                if (infoMetadata === undefined) {
-                    throw new Error('missing info metadata for \'' + key + '\'')
+            sortMetadata(thisItem: InfoMetadata, thatItem: InfoMetadata): number {
+                return thisItem.id.localeCompare(thatItem.id)
+            },
+            getNestedInfo(metadata: InfoMetadata): object[] {
+                let nestedInfo: object[]
+                if(metadata.number && metadata.number.count === 1) {
+                    // @ts-ignore
+                    nestedInfo = [this.info[metadata.id]]
+                } else {
+                    // @ts-ignore
+                    nestedInfo = this.info[metadata.id]
                 }
-                return infoMetadata
+                return nestedInfo
             }
         }
     })
diff --git a/src/components/RecordInfoDetailsItem.vue b/src/components/RecordInfoDetailsItem.vue
index 426f8404..0be18c77 100644
--- a/src/components/RecordInfoDetailsItem.vue
+++ b/src/components/RecordInfoDetailsItem.vue
@@ -4,21 +4,11 @@
             {{ value }}
         </span>
         <span v-else-if="metadata.number && metadata.number.type === 'NUMBER' && metadata.number.count === 1">
-            <span v-if="metadata.type === 'NESTED'">
-                <RecordInfoNestedDetails :metadata="metadata.nested" :info="[value]"/>
-            </span>
-            <span v-else>
-                {{ value }}
-            </span>
+            {{ value }}
         </span>
         <span v-else>
-            <span v-if="metadata.type === 'NESTED'">
-                <RecordInfoNestedDetails :metadata="metadata.nested" :info="value"/>
-            </span>
-            <span v-else>
-                <span v-for="(item, index) in value" :key="index">
-                {{ item }}<span v-if="index < value.length - 1">, </span>
-                </span>
+            <span v-for="(item, index) in value" :key="index">
+            {{ item }}<span v-if="index < value.length - 1">, </span>
             </span>
         </span>
     </div>
@@ -29,10 +19,8 @@
     import Vue, {PropType} from 'vue'
     // eslint-disable-next-line no-unused-vars
     import {InfoMetadata} from '@molgenis/vip-report-api'
-    import RecordInfoNestedDetails from '@/components/RecordInfoNestedDetails.vue'
 
     export default Vue.extend({
-        components: {RecordInfoNestedDetails},
         props: {
             metadata: Object as PropType<InfoMetadata>,
             value: [String, Number, Boolean, Array, Object] as PropType<string | number | boolean | object | string[] | number[] | boolean[] | object[]>
diff --git a/src/components/RecordInfoNestedDetails.vue b/src/components/RecordInfoNestedDetails.vue
index 3a892476..20bb911b 100644
--- a/src/components/RecordInfoNestedDetails.vue
+++ b/src/components/RecordInfoNestedDetails.vue
@@ -5,7 +5,7 @@
                 :fields="fields"
                 :items="items">
             <template v-slot:head()="data">
-                {{ $t(data.label) }}
+                {{ data.label }}
             </template>
             <template v-slot:cell()="data">
                 <span v-if="data.field.metadata.number === undefined">
diff --git a/src/components/RecordInfoUnnestedDetails.vue b/src/components/RecordInfoUnnestedDetails.vue
new file mode 100644
index 00000000..b5c3f453
--- /dev/null
+++ b/src/components/RecordInfoUnnestedDetails.vue
@@ -0,0 +1,70 @@
+<template>
+    <div>
+        <b-table
+                small
+                responsive=true
+                borderless
+                :fields="fields"
+                :items="items">
+            <template v-slot:head()>
+                {{ '' }}
+            </template>
+            <template v-slot:cell(actions)="data">
+                <InfoButton :info="data.item.metadata.description" />
+            </template>
+            <template v-slot:cell(key)="data">
+                {{ data.item.key }}
+            </template>
+            <template v-slot:cell(val)="data">
+                <RecordInfoDetailsItem :metadata="data.item.metadata" :value="data.item.val"/>
+            </template>
+        </b-table>
+    </div>
+</template>
+
+<script lang="ts">
+    // eslint-disable-next-line no-unused-vars
+    import Vue, {PropType} from 'vue'
+    // eslint-disable-next-line no-unused-vars
+    import {InfoMetadata} from '@molgenis/vip-report-api'
+    import RecordInfoDetailsItem from '@/components/RecordInfoDetailsItem.vue'
+    import InfoButton from '@/components/InfoButton.vue'
+
+    export default Vue.extend({
+        components: {InfoButton, RecordInfoDetailsItem},
+        props: {
+            metadata: Array as PropType<InfoMetadata[]>,
+            info: Object as PropType<object>
+        },
+        computed: {
+            fields: function () {
+                return [
+                    {key: 'actions', label: '', class: ['compact', 'align-middle']},
+                    {key: 'key', label: 'key'},
+                    {key: 'val', label: 'value'}]
+            },
+            items() {
+                const items: object[] = []
+                for (let metadata of this.metadata) {
+                    // @ts-ignore
+                    const item = {key: metadata.id, val: this.info[metadata.id], metadata: metadata}
+                    items.push(item)
+                }
+                items.sort(function (thisItem, thatItem) {
+                    // @ts-ignore
+                    return thisItem.key.localeCompare(thatItem.key)
+                })
+                return items
+            }
+        },
+        methods: {
+            getInfoMetadata(key: string): InfoMetadata {
+                const infoMetadata = this.metadata.find(item => item.id === key)
+                if (infoMetadata === undefined) {
+                    throw new Error('missing info metadata for \'' + key + '\'')
+                }
+                return infoMetadata
+            }
+        }
+    })
+</script>
\ No newline at end of file
diff --git a/src/components/RecordSampleDetails.vue b/src/components/RecordSampleDetails.vue
new file mode 100644
index 00000000..46297258
--- /dev/null
+++ b/src/components/RecordSampleDetails.vue
@@ -0,0 +1,18 @@
+<template>
+    <div>
+        <!-- TODO: improve rendering once we have format metadata available -->
+        {{ data }}
+    </div>
+</template>
+
+<script lang="ts">
+    // eslint-disable-next-line no-unused-vars
+    import Vue, {PropType} from 'vue'
+    // eslint-disable-next-line no-unused-vars
+
+    export default Vue.extend({
+        props: {
+            data: Object as PropType<object>
+        }
+    })
+</script>
\ No newline at end of file
diff --git a/src/components/RecordTable.vue b/src/components/RecordTable.vue
index eb9fa1ac..cd1dd765 100644
--- a/src/components/RecordTable.vue
+++ b/src/components/RecordTable.vue
@@ -1,7 +1,8 @@
 f
 <template>
     <div>
-        <b-row>
+        <!-- hidden, see note in methods.provider -->
+        <b-row style="display: none; visibility: hidden">
             <b-col md="4">
                 <b-form-group>
                     <b-input-group class="mt-3">
@@ -49,7 +50,7 @@ f
                     <b-icon-search/>
                 </b-button>
             </template>
-            <template v-slot:cell(pos)="data">
+            <template v-slot:cell(p)="data">
                 <a v-if="genomeBrowserDb"
                    :href="'https://genome-euro.ucsc.edu/cgi-bin/hgTracks?db=' + encodeURIComponent(genomeBrowserDb) + '&position=' + encodeURIComponent('chr' + data.item.c + ':' + Math.max(0, (data.item.p - 500)) + '-' + (data.item.p + 500))"
                    target="_blank">
@@ -58,19 +59,19 @@ f
                 </a>
                 <span v-else>{{ data.item.c }}:{{ data.item.p | numberWithCommas }}</span>
             </template>
-            <template v-slot:cell(id)="data">
+            <template v-slot:cell(i)="data">
                 <Identifiers :identifiers="data.item.i"/>
             </template>
-            <template v-slot:cell(ref)="data">
+            <template v-slot:cell(r)="data">
                 <Allele :allele="data.item.r"/>
             </template>
-            <template v-slot:cell(alt)="data">
+            <template v-slot:cell(a)="data">
                 <span v-for="(alt, index) in data.item.a" :key="index">
                     <Allele :allele="alt"/>
                     <span v-if="index < data.item.a.length - 1">, </span>
                 </span>
             </template>
-            <template v-slot:cell(sample)="data">
+            <template v-slot:cell(s)="data">
                 <span v-for="(alt, index) in data.item.s[sample.index].gt.a" :key="index">
                     <Allele :allele="alt"/>
                     <span v-if="index < data.item.s[sample.index].gt.a.length - 1"> {{ data.item.s[sample.index].gt.p ? '|' : '/'}} </span>
@@ -88,10 +89,10 @@ f
                     <span v-if="index < data.item.s[sampleMaternal.index].gt.a.length - 1"> {{ data.item.s[sampleMaternal.index].gt.p ? '|' : '/'}} </span>
                 </span>
             </template>
-            <template v-slot:cell(qual)="data">
+            <template v-slot:cell(q)="data">
                 {{ data.item.q }}
             </template>
-            <template v-slot:cell(filter)="data">
+            <template v-slot:cell(f)="data">
                 <span v-for="(filter, index) in data.item.f" :key="filter">
                     <span>{{ filter }}</span>
                     <span v-if="index < data.item.f.length - 1">, </span>
@@ -173,21 +174,23 @@ f
                 return maternalId !== '0' ? this.getSampleById(maternalId) : null
             },
             fields: function () {
+                // field keys must much report api field ids
                 return [
                     {key: 'actions', label: '', class: ['compact', 'align-middle']},
-                    {key: 'pos', label: 'pos', sortable: true},
-                    {key: 'id', label: 'id'},
-                    {key: 'ref', label: 'ref'},
-                    this.sample ? {key: 'sample', label: 'sample'} : {key: 'alt', label: 'alt'},
+                    {key: 'p', label: 'pos', sortable: true},
+                    {key: 'i', label: 'id'},
+                    {key: 'r', label: 'ref'},
+                    this.sample ? {key: 's', label: 'sample'} : {key: 'a', label: 'alt'},
                     this.sample && this.samplePaternal ? {key: 'father', label: 'father'} : null,
                     this.sample && this.sampleMaternal ? {key: 'mother', label: 'mother'} : null,
-                    {key: 'qual', label: 'qual', sortable: true},
-                    {key: 'filter', label: 'filter'}]
+                    {key: 'q', label: 'qual', sortable: true},
+                    {key: 'f', label: 'filter'}]
             }
         },
         methods: {
             ...mapActions(['loadRecords']),
             provider(ctx: BvTableCtxObject) {
+                // todo: translate filter param to query
                 const params: any = {
                     page: ctx.currentPage - 1,
                     size: ctx.perPage,
diff --git a/src/locales/en.json b/src/locales/en.json
index ce549df3..27391210 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -29,5 +29,6 @@
   "recordDetails": "Record Details",
   "ok": "Ok",
   "prop": "Property",
+  "key": "Key",
   "value": "Value"
 }
\ No newline at end of file
diff --git a/src/plugins/bootstrap-vue.ts b/src/plugins/bootstrap-vue.ts
index 693b8dfa..a7b1ccc3 100644
--- a/src/plugins/bootstrap-vue.ts
+++ b/src/plugins/bootstrap-vue.ts
@@ -1,9 +1,10 @@
 import Vue from 'vue'
-import { BootstrapVue, BIcon, BIconBoxArrowInUpRight, BIconSearch } from 'bootstrap-vue'
+import { BootstrapVue, BIcon, BIconBoxArrowInUpRight, BIconQuestionCircle, BIconSearch } from 'bootstrap-vue'
 import 'bootstrap/dist/css/bootstrap.min.css'
 import 'bootstrap-vue/dist/bootstrap-vue.css'
 
 Vue.use(BootstrapVue)
 Vue.component('BIcon', BIcon)
 Vue.component('BIconBoxArrowInUpRight', BIconBoxArrowInUpRight)
+Vue.component('BIconQuestionCircle', BIconQuestionCircle)
 Vue.component('BIconSearch', BIconSearch)