diff --git a/src/api/mehari/constants.ts b/src/api/mehari/constants.ts
new file mode 100644
index 0000000..68e2345
--- /dev/null
+++ b/src/api/mehari/constants.ts
@@ -0,0 +1,10 @@
+/** Mapping from transcript effect to label. */
+export const TX_EFFECT_LABELS: { [key: string]: string } = {
+  transcript_variant: 'whole tx',
+  exon_variant: 'exonic',
+  splice_region_variant: 'splicing',
+  intron_variant: 'intronic',
+  upstream_variant: 'upstream',
+  downstream_variant: 'downstream',
+  other: 'other'
+}
diff --git a/src/api/mehari/index.ts b/src/api/mehari/index.ts
index 886d07b..ff84328 100644
--- a/src/api/mehari/index.ts
+++ b/src/api/mehari/index.ts
@@ -1,2 +1,3 @@
 export * from './types'
 export * from './client'
+export * from './constants'
diff --git a/src/components/StrucvarGeneListCard/GeneDosage.vue b/src/components/StrucvarGeneListCard/GeneDosage.vue
new file mode 100644
index 0000000..dad2672
--- /dev/null
+++ b/src/components/StrucvarGeneListCard/GeneDosage.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import {
+  CLINGEN_DOSAGE_COLOR,
+  CLINGEN_DOSAGE_SCORES
+} from '@/components/GeneDetails/PathogenicityCard.c'
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const props = defineProps<{
+  dosage?: string
+  geneSymbol?: string
+}>()
+</script>
+
+<template>
+  <template v-if="dosage === 'CLINGEN_DOSAGE_SCORE_RECESSIVE'">
+    <a
+      :href="`https://search.clinicalgenome.org/kb/gene-dosage/${geneSymbol ?? ''}`"
+      target="_blank"
+    >
+      <v-chip density="compact" rounded="xl" :class="`bg-${CLINGEN_DOSAGE_COLOR[dosage]}`">
+        AR
+      </v-chip>
+      <small class="pl-1"><v-icon>mdi-launch</v-icon></small>
+    </a>
+  </template>
+  <template v-else-if="!dosage || dosage === 'CLINGEN_DOSAGE_SCORE_UNKNOWN'">
+    <v-chip density="compact" rounded="xl" :class="`bg-grey-lighten-5`"> N/A </v-chip>
+    <small class="pl-1">
+      <v-icon><!--spacer only--></v-icon>
+    </small>
+  </template>
+  <template v-else>
+    <a
+      :href="`https://search.clinicalgenome.org/kb/gene-dosage/${geneSymbol ?? ''}`"
+      target="_blank"
+    >
+      <v-chip density="compact" rounded="xl" :class="`bg-${CLINGEN_DOSAGE_COLOR[dosage]}`">
+        {{ CLINGEN_DOSAGE_SCORES[dosage] }}
+      </v-chip>
+      <small class="pl-1"><v-icon>mdi-launch</v-icon></small>
+    </a>
+  </template>
+</template>
diff --git a/src/components/StrucvarGeneListCard/GeneListEntry.vue b/src/components/StrucvarGeneListCard/GeneListEntry.vue
new file mode 100644
index 0000000..4127ca8
--- /dev/null
+++ b/src/components/StrucvarGeneListCard/GeneListEntry.vue
@@ -0,0 +1,294 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+
+import GeneDosage from './GeneDosage.vue'
+import ScoreChip from './ScoreChip.vue'
+import { type GenomeBuild } from '../../lib/genomeBuilds'
+
+/** This component's props. */
+const props = defineProps<{
+  item: any
+  hgncToEffect?: { [key: string]: string }
+  sortKey?: string
+  sortOrder?: 'asc' | 'desc'
+  isSelected: boolean
+  genomeBuild?: GenomeBuild
+}>()
+
+/** This component's emits. */
+const emit = defineEmits(['toggleSelected'])
+
+const router = useRouter()
+
+/**
+ * Pick smallest of the shortest RefSeq transcript IDs.
+ *
+ * @param refseqIds RefSeq transcript IDs to pick from
+ */
+const pickRefSeqId = (refseqIds: string[] | undefined): string => {
+  if (!refseqIds) {
+    return 'N/A'
+  }
+  refseqIds.sort((a, b) => {
+    if (a.length < b.length) {
+      return -1
+    } else if (a.length > b.length) {
+      return 1
+    } else {
+      return a.localeCompare(b)
+    }
+  })
+  return refseqIds[0]
+}
+
+/** Return icon name for sorting */
+const sortIcon = computed<string>(() => {
+  return props.sortOrder === 'desc' ? 'mdi-triangle-small-down' : 'mdi-triangle-small-up'
+})
+</script>
+
+<template>
+  <v-sheet class="pa-3 mt-1 border">
+    <v-row no-gutter>
+      <v-col
+        cols="2"
+        class="d-flex flex-row pa-1"
+        @click.prevent="
+          () => {
+            if (!isSelected) {
+              emit('toggleSelected')
+            }
+          }
+        "
+      >
+        <div class="flex-shrink-0 pl-0 pr-3 py-2">
+          <v-icon :icon="isSelected ? 'mdi-magnify-expand' : 'mdi-crop-square'" />
+        </div>
+        <div class="flex-grow-0">
+          <div class="text-h6">
+            <v-icon v-if="sortKey === 'hgnc.symbol'" :icon="sortIcon" class="ml-n2 mr-n3" />
+            {{ item.raw.hgnc.symbol }}
+            <span class="text-caption text-no-wrap">
+              <template v-if="hgncToEffect">
+                ({{ hgncToEffect[item.raw.hgnc.agr] ?? 'unknown' }})
+              </template>
+              <template v-else> N/A </template>
+            </span>
+          </div>
+          <div>
+            {{ pickRefSeqId(item.raw.dbnsfp?.refseqId) }}
+            |
+            <a
+              style="cursor: pointer"
+              title="go to Gene details page"
+              @click.prevent="
+                router.push({
+                  name: 'gene-details',
+                  params: { gene: item.raw.hgnc.symbol }
+                })
+              "
+            >
+              <v-icon>mdi-arrow-right-circle-outline</v-icon>
+            </a>
+          </div>
+        </div>
+      </v-col>
+      <v-col cols="10" class="d-flex flex-column pa-0">
+        <v-row no-gutter class="ma-0">
+          <v-col cols="3" class="pr-3 align-self-end pa-1">
+            <table style="width: 280px">
+              <tr>
+                <td
+                  class="text-no-wrap"
+                  :class="{
+                    'text-decoration-underline': sortKey === 'clingen.haploinsufficiencyScore'
+                  }"
+                >
+                  <v-icon
+                    v-if="sortKey === 'clingen.haploinsufficiencyScore'"
+                    :icon="sortIcon"
+                    class="ml-n2 mr-n1"
+                  />
+                  ClinGen haploinsufficiency
+                </td>
+                <td class="text-right text-no-wrap">
+                  <GeneDosage
+                    :dosage="item.raw.clingen?.haploinsufficiencyScore"
+                    :gene-symbol="item.raw.hgnc?.symbol"
+                  />
+                </td>
+              </tr>
+              <tr>
+                <td
+                  class="text-no-wrap"
+                  :class="{
+                    'text-decoration-underline': sortKey === 'clingen.triplosensitivityScore'
+                  }"
+                >
+                  <v-icon
+                    v-if="sortKey === 'clingen.triplosensitivityScore'"
+                    :icon="sortIcon"
+                    class="ml-n2 mr-n1"
+                  />
+                  ClinGen triplosensitivity
+                </td>
+                <td class="text-right text-no-wrap">
+                  <GeneDosage
+                    :dosage="item.raw.clingen?.triplosensitivityScore"
+                    :gene-symbol="item.raw.hgnc?.symbol"
+                  />
+                </td>
+              </tr>
+            </table>
+          </v-col>
+          <v-col cols="3" class="pr-3 align-self-end pa-1">
+            <table style="width: 280px">
+              <tr>
+                <td
+                  class="text-no-wrap"
+                  :class="{ 'text-decoration-underline': sortKey === 'gnomadConstraints.pli' }"
+                >
+                  <v-icon
+                    v-if="sortKey === 'gnomadConstraints.pli'"
+                    :icon="sortIcon"
+                    class="ml-n2 mr-n1"
+                  />
+                  gnomAD pLI
+                </td>
+                <td class="text-right text-no-wrap">
+                  <ScoreChip
+                    :value="item.raw.gnomadConstraints?.pli"
+                    :href-url="
+                      item.raw.hgnc.ensemblGeneId
+                        ? `https://gnomad.broadinstitute.org/gene/${item.raw.hgnc.ensemblGeneId}?dataset=gnomad_r2_1`
+                        : undefined
+                    "
+                    :range-gray="[-9999, 0.9]"
+                    :range-red="[0.9, 9999]"
+                  />
+                </td>
+              </tr>
+              <tr>
+                <td class="text-no-wrap">
+                  <v-icon
+                    v-if="sortKey === 'gnomadConstraints.oeLofUpper'"
+                    :icon="sortIcon"
+                    class="ml-n2 mr-n1"
+                  />
+                  gnomAD LOEUF
+                </td>
+                <td class="text-right text-no-wrap">
+                  <ScoreChip
+                    :value="item.raw.gnomadConstraints?.oeLofUpper"
+                    :href-url="
+                      item.raw.hgnc.ensemblGeneId
+                        ? `https://gnomad.broadinstitute.org/gene/${item.raw.hgnc.ensemblGeneId}?dataset=gnomad_r2_1`
+                        : undefined
+                    "
+                    :range-gray="[-9999, 0.6]"
+                    :range-red="[0.6, 9999]"
+                  />
+                </td>
+              </tr>
+            </table>
+          </v-col>
+          <v-col cols="3" class="pr-3 align-self-end pa-1">
+            <!--
+              https://europepmc.org/article/MED/20976243
+
+              ClinGen Dosage Sensitivity Single Gene Evaluation Process v1.0 => >=0.9
+
+            -->
+            <table style="width: 280px">
+              <tr>
+                <td
+                  class="text-no-wrap"
+                  :class="{ 'text-decoration-underline': sortKey === 'decipherHi.pHi' }"
+                >
+                  <v-icon
+                    v-if="sortKey === 'decipherHi.pHi'"
+                    :icon="sortIcon"
+                    class="ml-n2 mr-n1"
+                  />
+                  DECIPHER HI
+                </td>
+                <td class="text-right text-no-wrap">
+                  <ScoreChip
+                    :value="item.raw.decipherHi?.pHi"
+                    :href-url="
+                      item.raw.hgnc.symbol
+                        ? `https://www.deciphergenomics.org/gene/${item.raw.hgnc.symbol}/`
+                        : undefined
+                    "
+                    :range-gray="[-9999, 0.9]"
+                    :range-red="[0.9, 9999]"
+                  />
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <!-- placeholder-->
+                  &nbsp;
+                </td>
+              </tr>
+            </table>
+          </v-col>
+          <v-col cols="3" class="pr-3 align-self-end pa-1">
+            <!--
+              https://europepmc.org/article/MED/35917817
+            -->
+            <table style="width: 280px">
+              <tr>
+                <td
+                  class="text-no-wrap"
+                  :class="{ 'text-decoration-underline': sortKey === 'rcnv.pHaplo' }"
+                >
+                  <v-icon v-if="sortKey === 'rcnv.pHaplo'" :icon="sortIcon" class="ml-n2 mr-n1" />
+                  RCNV pHaplo
+                </td>
+                <td class="text-right text-no-wrap">
+                  <ScoreChip
+                    :value="item.raw.rcnv?.pHaplo"
+                    :href-url="
+                      item.raw.hgnc.symbol
+                        ? `https://www.deciphergenomics.org/gene/${item.raw.hgnc.symbol}/`
+                        : undefined
+                    "
+                    :range-green="[0.0, 0.2]"
+                    :range-gray="[0.2, 0.7]"
+                    :range-orange="[0.7, 0.86]"
+                    :range-red="[0.86, 1.0]"
+                  />
+                </td>
+              </tr>
+              <tr>
+                <td
+                  class="text-no-wrap"
+                  :class="{ 'text-decoration-underline': sortKey === 'rcnv.pTriplo' }"
+                >
+                  <v-icon v-if="sortKey === 'rcnv.pTriplo'" :icon="sortIcon" class="ml-n2 mr-n1" />
+                  RCNV pTriplo
+                </td>
+                <td class="text-right text-no-wrap">
+                  <ScoreChip
+                    :value="item.raw.rcnv?.pTriplo"
+                    :href-url="
+                      item.raw.hgnc.symbol
+                        ? `https://www.deciphergenomics.org/gene/${item.raw.hgnc.symbol}/`
+                        : undefined
+                    "
+                    :range-green="[0.0, 0.2]"
+                    :range-gray="[0.2, 0.8]"
+                    :range-orange="[0.8, 0.94]"
+                    :range-red="[0.94, 1.0]"
+                  />
+                </td>
+              </tr>
+            </table>
+          </v-col>
+        </v-row>
+      </v-col>
+    </v-row>
+  </v-sheet>
+</template>
diff --git a/src/components/StrucvarGeneListCard/ScoreChip.vue b/src/components/StrucvarGeneListCard/ScoreChip.vue
new file mode 100644
index 0000000..709cff8
--- /dev/null
+++ b/src/components/StrucvarGeneListCard/ScoreChip.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { roundIt } from '../../lib/utils'
+
+/** This component's props. */
+const props = withDefaults(defineProps<{
+  value: number | undefined
+  useRounded?: boolean
+  naValue?: string | number
+  hrefUrl?: string | undefined
+  rangeGray?: [number, number] | undefined
+  rangeGreen?: [number, number] | undefined
+  rangeOrange?: [number, number] | undefined
+  rangeRed?: [number, number] | undefined
+}>(), {
+  naValue: 'N/A',
+  useRounded: true,
+  hrefUrl: undefined,
+  rangeGray: undefined,
+  rangeGreen: undefined,
+  rangeOrange: undefined,
+  rangeRed: undefined
+})
+
+/**
+ * The computed chip color - based on the value and the ranges.
+ */
+const chipColor = computed<string>(() => {
+  if (props.value === undefined) {
+    return 'grey-lighten-5'
+  } else if (
+    props.rangeGray !== undefined &&
+    props.value >= props.rangeGray[0] &&
+    props.value <= props.rangeGray[1]
+  ) {
+    return 'grey-lighten-2'
+  } else if (
+    props.rangeGreen !== undefined &&
+    props.value >= props.rangeGreen[0] &&
+    props.value <= props.rangeGreen[1]
+  ) {
+    return 'green-lighten-2'
+  } else if (
+    props.rangeOrange !== undefined &&
+    props.value >= props.rangeOrange[0] &&
+    props.value <= props.rangeOrange[1]
+  ) {
+    return 'orange-darken-2'
+  } else if (
+    props.rangeRed !== undefined &&
+    props.value >= props.rangeRed[0] &&
+    props.value <= props.rangeRed[1]
+  ) {
+    return 'red-darken-3'
+  } else {
+    return 'transparent'
+  }
+})
+</script>
+
+<template>
+  <template v-if="hrefUrl === undefined">
+    <v-chip density="compact" rounded="xl" :class="`bg-${chipColor}`">
+      <!-- eslint-disable vue/no-v-html -->
+      <template v-if="value !== undefined && useRounded">
+        <span v-html="roundIt(value)"></span>
+      </template>
+      <!-- eslint-enable -->
+      <template v-else>
+        {{ value ?? props.naValue }}
+      </template>
+    </v-chip>
+  </template>
+  <template v-else>
+    <a :href="hrefUrl" target="blank">
+      <v-chip density="compact" rounded="xl" :class="`bg-${chipColor}`">
+        <!-- eslint-disable vue/no-v-html -->
+        <template v-if="value !== undefined && useRounded">
+          <span v-html="roundIt(value)"></span>
+        </template>
+        <!-- eslint-enable -->
+        <template v-else>
+          {{ value ?? props.naValue }}
+        </template>
+      </v-chip>
+      <small class="pl-1">
+        <v-icon :icon="value === undefined ? undefined : 'mdi-launch'" />
+      </small>
+    </a>
+  </template>
+</template>
diff --git a/src/components/StrucvarGeneListCard/StrucvarGeneListCard.spec.ts b/src/components/StrucvarGeneListCard/StrucvarGeneListCard.spec.ts
new file mode 100644
index 0000000..4e4ac8a
--- /dev/null
+++ b/src/components/StrucvarGeneListCard/StrucvarGeneListCard.spec.ts
@@ -0,0 +1,57 @@
+import { describe, expect, it } from 'vitest'
+import { nextTick } from 'vue'
+
+import * as BRCA1GeneInfo from '@/assets/__tests__/BRCA1GeneInfo.json'
+import * as CurrentSV from '@/assets/__tests__/ExampleSV.json'
+import GeneListCard from '@/components/StrucvarDetails/GeneListCard.vue'
+import { setupMountedComponents } from '@/lib/testUtils'
+import { StoreState } from '@/stores/misc'
+
+describe.concurrent('GeneListCard', async () => {
+  it('renders the GeneListCard table', async () => {
+    // arrange:
+    const { wrapper } = await setupMountedComponents(
+      { component: GeneListCard },
+      {
+        props: {
+          genesInfos: JSON.parse(JSON.stringify([BRCA1GeneInfo['genes']['HGNC:1100']])),
+          currentSvRecord: JSON.parse(JSON.stringify(CurrentSV)),
+          selectedGeneHgncId: 'HGNC:1100',
+          storeState: StoreState.Active
+        }
+      }
+    )
+
+    // act: nothing, only test rendering
+
+    // assert:
+    const table = wrapper.findComponent({ name: 'VDataIterator' })
+    expect(table.exists()).toBe(true)
+    expect(wrapper.text()).toContain('Overlapping and Contained Genes')
+  })
+
+  it('shows the gene info on row click', async () => {
+    // arrange:
+    const { wrapper } = await setupMountedComponents(
+      { component: GeneListCard },
+      {
+        props: {
+          genesInfos: JSON.parse(JSON.stringify([BRCA1GeneInfo['genes']['HGNC:1100']])),
+          currentSvRecord: JSON.parse(JSON.stringify(CurrentSV)),
+          selectedGeneHgncId: 'HGNC:1100',
+          storeState: StoreState.Active
+        }
+      }
+    )
+
+    // act:
+    const table = wrapper.findComponent({ name: 'VDataIterator' })
+    expect(table.exists()).toBe(true)
+    // Click on the first gene
+    await table.get('div.v-sheet div.v-row div.v-col').trigger('click')
+    await nextTick()
+
+    // assert:
+    expect(table.emitted('update:options')).toBeTruthy()
+  })
+})
diff --git a/src/components/StrucvarGeneListCard/StrucvarGeneListCard.stories.ts b/src/components/StrucvarGeneListCard/StrucvarGeneListCard.stories.ts
new file mode 100644
index 0000000..38f897f
--- /dev/null
+++ b/src/components/StrucvarGeneListCard/StrucvarGeneListCard.stories.ts
@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import { Strucvar } from '../../lib/genomicVars'
+import StrucvarToolsCard from './StrucvarToolsCard.vue'
+
+// We define the fixtures inline here as they are small.
+const delBrca1: Strucvar = {
+  svType: 'DEL',
+  genomeBuild: 'grch37',
+  chrom: '17',
+  start: 41176312,
+  stop: 41277500,
+  userRepr: 'DEL:chr17:41176312:41277500'
+}
+
+const meta = {
+  title: 'Strucvar/StrucvarToolsCard',
+  component: StrucvarToolsCard,
+  tags: ['autodocs'],
+  argTypes: {
+    strucvar: { control: { type: 'object' } }
+  },
+  args: {
+    strucvar: delBrca1
+  }
+} satisfies Meta<typeof StrucvarToolsCard>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const DelBRCA1: Story = {
+  args: {
+    strucvar: delBrca1
+  }
+}
diff --git a/src/components/StrucvarGeneListCard/StrucvarGeneListCard.vue b/src/components/StrucvarGeneListCard/StrucvarGeneListCard.vue
new file mode 100644
index 0000000..8a65f74
--- /dev/null
+++ b/src/components/StrucvarGeneListCard/StrucvarGeneListCard.vue
@@ -0,0 +1,264 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { onMounted } from 'vue'
+
+import DocsLink from '../DocsLink/DocsLink.vue'
+import GeneListEntry from './GeneListEntry.vue'
+import { type Strucvar } from '../../lib/genomicVars'
+import { StoreState } from '../../store'
+import type { GeneTranscriptEffects, TranscriptEffect } from '../../api/mehari/types'
+import { TX_EFFECT_LABELS } from '../../api/mehari/constants'
+import { Record as GeneInfoRecord } from '../../pbs/annonars/genes/base'
+
+/** This component's props. */
+const props = withDefaults(defineProps<{
+  /** Strucvar to be displayed for. */
+  currentStrucvarRecord?: Strucvar
+  /** The consequences to be displayed. */
+  csq?: GeneTranscriptEffects[],
+  /** Gene info records to list for. */
+  genesInfos?: GeneInfoRecord[]
+  /** The state of the store that we display for. */
+  storeState?: StoreState
+  /** The HGNC ID of the selected gene. */
+  selectedGeneHgncId?: string
+}>(), {
+  currentStrucvarRecord: undefined,
+  csq: undefined,
+  genesInfos: undefined,
+  storeState: StoreState.Initial,
+  selectedGeneHgncId: undefined
+})
+
+/** This component's emits. */
+const emit = defineEmits(['update:selectedGeneHgncId'])
+
+/** Available items per page. */
+const itemsPerPageChoices = [5, 10, 20, 50]
+/** Items per page for data iterator. */
+const itemsPerPage = ref<number>(10)
+/** Current page. */
+const currentPage = ref<number>(1)
+
+/** Whether the list of genes is currently loading. */
+const isLoading = computed<boolean>(() => {
+  return (
+    props.storeState === undefined ||
+    [StoreState.Initial, StoreState.Loading].includes(props.storeState)
+  )
+})
+
+
+/** Helper mapping from gene HGNC ID to worst transcript effect. */
+const hgncToEffect = computed<{ [key: string]: string }>(() => {
+  const hgncToEffect: { [key: string]: string } = {}
+  for (const result of props.csq ?? []) {
+    const txEffect = result.transcriptEffects[0]
+    if (txEffect) {
+      hgncToEffect[result.hgncId] = TX_EFFECT_LABELS[txEffect]
+    }
+  }
+  return hgncToEffect
+})
+
+/** `v-model` for the selected effect */
+// TODO: also display regions and filter
+/** `v-model` for the sort key, order */
+const sortKey = ref<string>('hgnc.symbol')
+const sortOrder = ref<'asc' | 'desc'>('asc')
+const sortItems = [
+  {
+    label: 'symbol',
+    key: 'hgnc.symbol'
+  },
+  {
+    label: 'ClinGen Haplo.',
+    key: 'clingen.haploinsufficiencyScore'
+  },
+  {
+    label: 'ClinGen Triplo.',
+    key: 'clingen.triplosensitivityScore'
+  },
+  {
+    label: 'gnomAD pLI',
+    key: 'gnomadConstraints.pli'
+  },
+  {
+    label: 'gnomAD LOEUF',
+    key: 'gnomadConstraints.oeLofUpper'
+  },
+  {
+    label: 'DECIPHER HI',
+    key: 'decipherHi.pHi'
+  },
+  {
+    label: 'RCNV pHaplo',
+    key: 'rcnv.pHaplo'
+  },
+  {
+    label: 'RCNV pTriplo',
+    key: 'rcnv.pTriplo'
+  }
+]
+
+/** Custom key sorting, undefined is `+infinity` */
+const _sortNumberNaGreater = (a: number | undefined, b: number | undefined): number => {
+  if (a === undefined && b === undefined) {
+    return 0
+  } else if (a === undefined) {
+    return 1
+  } else if (b === undefined) {
+    return -1
+  } else {
+    return a - b
+  }
+}
+
+/** Custom key sorting, undefined is `-infinity` */
+const _sortNumberNaLess = (a: number | undefined, b: number | undefined): number => {
+  if (a === undefined && b === undefined) {
+    return 0
+  } else if (a === undefined) {
+    return -1
+  } else if (b === undefined) {
+    return 1
+  } else {
+    return a - b
+  }
+}
+type DataTableCompareFunction<T = any> = (a: T, b: T) => number
+const customKeySort: { [key: string]: DataTableCompareFunction } = {
+  'gnomadConstraints.pli': _sortNumberNaGreater,
+  'gnomadConstraints.oeLofUpper': _sortNumberNaGreater,
+  'decipherHi.pHi': _sortNumberNaLess,
+  'rcnv.pHaplo': _sortNumberNaLess,
+  'rcnv.pTriplo': _sortNumberNaLess
+}
+
+/** State for selected item in iterator */
+const selectedItems = computed<any[]>({
+  get() {
+    return [props.selectedGeneHgncId]
+  },
+  set(arr) {
+    emit('update:selectedGeneHgncId', arr[0])
+  }
+})
+
+/** Select first element in iterator */
+const selectFirst = (storeState: StoreState | undefined) => {
+  if (storeState === StoreState.Active && props.genesInfos?.length) {
+    selectedItems.value = [props.genesInfos[0].hgnc!.hgncId]
+  }
+}
+
+/** Watch store for state change to active */
+watch(
+  () => props.storeState,
+  (newStoreState) => selectFirst(newStoreState)
+)
+
+/** Select first on being mounted if the store is already active */
+onMounted(() => selectFirst(props.storeState))
+</script>
+
+<template>
+  <v-card>
+    <v-card-title class="pb-0 pr-2">
+      Gene List
+      <DocsLink anchor="gene-list" />
+    </v-card-title>
+    <v-card-subtitle class="text-overline"> Overlapping and Contained Genes </v-card-subtitle>
+    <v-card-text>
+      <v-data-iterator
+        v-model="selectedItems"
+        v-model:items-per-page="itemsPerPage"
+        :items="genesInfos"
+        item-value="hgnc.agr"
+        :loading="isLoading"
+        :page="currentPage"
+        :sort-by="[{ key: sortKey, order: sortOrder }]"
+        :custom-key-sort="customKeySort"
+        :must-sort="true"
+        select-strategy="single"
+        loading-text="foo"
+        buttons-pagination
+        show-index
+        item-key="dbnsfp.geneName"
+      >
+        <template #header>
+          <v-toolbar class="px-2 rounded-t-lg border" color="background">
+            <v-spacer></v-spacer>
+            <div style="width: 220px">
+              <v-select
+                v-model="sortKey"
+                label="sort by"
+                item-title="label"
+                item-value="key"
+                :items="sortItems"
+                density="compact"
+                :hide-details="true"
+                variant="outlined"
+              />
+            </div>
+            <v-btn @click="sortOrder = sortOrder == 'asc' ? 'desc' : 'asc'">
+              {{ sortOrder }}
+              <v-icon
+                :icon="sortOrder == 'asc' ? 'mdi-sort-ascending' : 'mdi-sort-descending'"
+                class="pl-3"
+              />
+            </v-btn>
+          </v-toolbar>
+        </template>
+
+        <template #default="{ items, isSelected, toggleSelect }">
+          <template v-for="item in items" :key="item.raw.hgnc.agr">
+            <GeneListEntry
+              :item="item"
+              :hgnc-to-effect="hgncToEffect"
+              :sort-key="sortKey"
+              :sort-order="sortOrder"
+              :is-selected="isSelected(item as any)"
+              :genome-build="currentStrucvarRecord?.genomeBuild ?? 'grch37'"
+              @toggle-selected="() => toggleSelect(item as any)"
+            />
+          </template>
+        </template>
+        <template #no-data>
+          <template v-if="isLoading">
+            <v-skeleton-loader class="mt-3 mx-auto border" type="heading,subtitle" />
+            <v-skeleton-loader class="mt-3 mx-auto border" type="heading,subtitle" />
+            <v-skeleton-loader class="mt-3 mx-auto border" type="heading,subtitle" />
+          </template>
+          <template v-else>
+            <v-sheet class="pa-3 text-center font-italic border"> No overlapping gene. </v-sheet>
+          </template>
+        </template>
+
+        <template #footer="{ pageCount }">
+          <v-toolbar
+            class="d-flex align-center justify-center pa-3 mt-1 rounded-b-lg border"
+            color="background"
+          >
+            <v-spacer />
+            <v-select
+              v-model="itemsPerPage"
+              class="d-inline-flex flex-grow-0"
+              label="page size"
+              :items="itemsPerPageChoices"
+              variant="outlined"
+              density="compact"
+              :hide-details="true"
+            ></v-select>
+            <v-pagination
+              v-model="currentPage"
+              :length="pageCount"
+              :total-visible="7"
+              density="compact"
+            ></v-pagination>
+          </v-toolbar>
+        </template>
+      </v-data-iterator>
+    </v-card-text>
+  </v-card>
+</template>