diff --git a/.storybook/HomeStorybook.vue b/.storybook/HomeStorybook.vue
new file mode 100644
index 0000000..e519b41
--- /dev/null
+++ b/.storybook/HomeStorybook.vue
@@ -0,0 +1,3 @@
+<script setup lang="ts"></script>
+
+<template></template>
diff --git a/.storybook/plugins/index.ts b/.storybook/plugins/index.ts
index 8915986..598a608 100644
--- a/.storybook/plugins/index.ts
+++ b/.storybook/plugins/index.ts
@@ -1,7 +1,8 @@
 import type { App } from 'vue'
 
-import vuetify from './vuetify'
+import { router } from './router'
+import { vuetify } from './vuetify'
 
 export async function registerPlugins(app: App) {
-  app.use(vuetify)
+  app.use(vuetify).use(router)
 }
diff --git a/.storybook/plugins/router.ts b/.storybook/plugins/router.ts
new file mode 100644
index 0000000..6b763b2
--- /dev/null
+++ b/.storybook/plugins/router.ts
@@ -0,0 +1,21 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+import HomeStorybook from '../HomeStorybook.vue'
+
+const routes = [
+  {
+    path: '/',
+    name: 'home',
+    component: HomeStorybook
+  },
+  {
+    path: '/gene-details/:gene',
+    name: 'gene-details',
+    component: HomeStorybook
+  }
+]
+
+export const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
diff --git a/.storybook/plugins/vuetify.ts b/.storybook/plugins/vuetify.ts
index d4caa46..c01856d 100644
--- a/.storybook/plugins/vuetify.ts
+++ b/.storybook/plugins/vuetify.ts
@@ -27,7 +27,7 @@ const customLightTheme: ThemeDefinition = {
 }
 
 // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
-export default createVuetify({
+export const vuetify = createVuetify({
   blueprint: md3,
   components: {
     ...components
diff --git a/package-lock.json b/package-lock.json
index 6f8dc49..92b8bf7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "vite-plugin-css-injected-by-js": "^3.3.1",
         "vite-plugin-static-copy": "^1.0.1",
         "vue": "^3.4.15",
+        "vue-router": "^4.2.5",
         "vuetify": "^3.5.1"
       },
       "devDependencies": {
@@ -6842,9 +6843,7 @@
     "node_modules/@vue/devtools-api": {
       "version": "6.5.1",
       "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.5.1.tgz",
-      "integrity": "sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA==",
-      "dev": true,
-      "peer": true
+      "integrity": "sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA=="
     },
     "node_modules/@vue/eslint-config-prettier": {
       "version": "9.0.0",
@@ -20694,6 +20693,20 @@
         "vue": ">=2"
       }
     },
+    "node_modules/vue-router": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.2.5.tgz",
+      "integrity": "sha512-DIUpKcyg4+PTQKfFPX88UWhlagBEBEfJ5A8XDXRJLUnZOvcpMF8o/dnL90vpVkGaPbjvXazV/rC1qBKrZlFugw==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/vue-template-compiler": {
       "version": "2.7.16",
       "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz",
diff --git a/package.json b/package.json
index 27f2f69..727c519 100644
--- a/package.json
+++ b/package.json
@@ -57,6 +57,7 @@
     "vite-plugin-css-injected-by-js": "^3.3.1",
     "vite-plugin-static-copy": "^1.0.1",
     "vue": "^3.4.15",
+    "vue-router": "^4.2.5",
     "vuetify": "^3.5.1"
   },
   "devDependencies": {
diff --git a/src/components/StrucvarGeneListCard/GeneDosage.vue b/src/components/StrucvarGeneListCard/GeneDosage.vue
index dad2672..27d2f43 100644
--- a/src/components/StrucvarGeneListCard/GeneDosage.vue
+++ b/src/components/StrucvarGeneListCard/GeneDosage.vue
@@ -1,18 +1,16 @@
 <script setup lang="ts">
-import {
-  CLINGEN_DOSAGE_COLOR,
-  CLINGEN_DOSAGE_SCORES
-} from '@/components/GeneDetails/PathogenicityCard.c'
+import { ClingenDosageScore } from '../../pbs/annonars/genes/base'
+import { CLINGEN_DOSAGE_COLOR, CLINGEN_DOSAGE_SCORES } from '../GenePathogenicityCard/constants'
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const props = defineProps<{
-  dosage?: string
+  dosage?: ClingenDosageScore
   geneSymbol?: string
 }>()
 </script>
 
 <template>
-  <template v-if="dosage === 'CLINGEN_DOSAGE_SCORE_RECESSIVE'">
+  <template v-if="dosage === ClingenDosageScore.CLINGEN_DOSAGE_SCORE_RECESSIVE">
     <a
       :href="`https://search.clinicalgenome.org/kb/gene-dosage/${geneSymbol ?? ''}`"
       target="_blank"
@@ -23,7 +21,9 @@ const props = defineProps<{
       <small class="pl-1"><v-icon>mdi-launch</v-icon></small>
     </a>
   </template>
-  <template v-else-if="!dosage || dosage === 'CLINGEN_DOSAGE_SCORE_UNKNOWN'">
+  <template
+    v-else-if="dosage === undefined || dosage === ClingenDosageScore.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>
diff --git a/src/components/StrucvarGeneListCard/GeneListEntry.vue b/src/components/StrucvarGeneListCard/GeneListEntry.vue
index 4127ca8..90e1230 100644
--- a/src/components/StrucvarGeneListCard/GeneListEntry.vue
+++ b/src/components/StrucvarGeneListCard/GeneListEntry.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useRouter } from 'vue-router'
 
+import { type GenomeBuild } from '../../lib/genomeBuilds'
 import GeneDosage from './GeneDosage.vue'
 import ScoreChip from './ScoreChip.vue'
-import { type GenomeBuild } from '../../lib/genomeBuilds'
 
 /** This component's props. */
 const props = defineProps<{
@@ -19,8 +18,6 @@ const props = defineProps<{
 /** This component's emits. */
 const emit = defineEmits(['toggleSelected'])
 
-const router = useRouter()
-
 /**
  * Pick smallest of the shortest RefSeq transcript IDs.
  *
@@ -79,18 +76,16 @@ const sortIcon = computed<string>(() => {
           <div>
             {{ pickRefSeqId(item.raw.dbnsfp?.refseqId) }}
             |
-            <a
+            <router-link
               style="cursor: pointer"
               title="go to Gene details page"
-              @click.prevent="
-                router.push({
-                  name: 'gene-details',
-                  params: { gene: item.raw.hgnc.symbol }
-                })
-              "
+              :to="{
+                name: 'gene-details',
+                params: { gene: item.raw.hgnc.symbol }
+              }"
             >
               <v-icon>mdi-arrow-right-circle-outline</v-icon>
-            </a>
+            </router-link>
           </div>
         </div>
       </v-col>
diff --git a/src/components/StrucvarGeneListCard/ScoreChip.vue b/src/components/StrucvarGeneListCard/ScoreChip.vue
index 709cff8..3366724 100644
--- a/src/components/StrucvarGeneListCard/ScoreChip.vue
+++ b/src/components/StrucvarGeneListCard/ScoreChip.vue
@@ -4,24 +4,27 @@ 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
-})
+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.
diff --git a/src/components/StrucvarGeneListCard/StrucvarGeneListCard.spec.ts b/src/components/StrucvarGeneListCard/StrucvarGeneListCard.spec.ts
index 4e4ac8a..31a2b6c 100644
--- a/src/components/StrucvarGeneListCard/StrucvarGeneListCard.spec.ts
+++ b/src/components/StrucvarGeneListCard/StrucvarGeneListCard.spec.ts
@@ -1,24 +1,72 @@
+import fs from 'fs'
+import path from 'path'
 import { describe, expect, it } from 'vitest'
-import { nextTick } from 'vue'
+import { h, nextTick } from 'vue'
+import { RouterView } from 'vue-router'
 
-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'
+import { StrucvarResult } from '../../api/mehari/types'
+import { type Strucvar } from '../../lib/genomicVars'
+import { setupMountedComponents } from '../../lib/testUtils'
+import { Record as GeneInfoRecord } from '../../pbs/annonars/genes/base'
+import { StoreState } from '../../store'
+import StrucvarGeneListCard from './StrucvarGeneListCard.vue'
 
-describe.concurrent('GeneListCard', async () => {
-  it('renders the GeneListCard table', async () => {
+/** Example Strucvar */
+const strucvarInfo: Strucvar = {
+  genomeBuild: 'grch37',
+  svType: 'DEL',
+  chrom: '17',
+  start: 41176312,
+  stop: 41277500,
+  userRepr: 'DEL-grch37-17-41176312-41277500'
+}
+
+// Load fixture data.
+const geneInfoBrca1 = GeneInfoRecord.fromJson(
+  JSON.parse(
+    fs.readFileSync(
+      path.resolve(__dirname, '../../components/GenePathogenicityCard/fixture.geneInfo.BRCA1.json'),
+      'utf8'
+    )
+  )
+)
+const strucvarResultBrca1 = StrucvarResult.fromJson(
+  JSON.parse(
+    fs.readFileSync(
+      path.resolve(__dirname, '../../api/mehari/fixture.strucvarCsqResponse.BRCA1.json'),
+      'utf8'
+    )
+  )
+)
+
+/** Routes to use in the tests. */
+const routes = [
+  {
+    path: '/',
+    name: 'home',
+    component: h(RouterView)
+  },
+  {
+    path: '/gene-details/:gene',
+    name: 'gene-details',
+    component: h(RouterView)
+  }
+]
+
+describe.concurrent('StrucvarGeneListCard.vue', async () => {
+  it('renders the table', async () => {
     // arrange:
     const { wrapper } = await setupMountedComponents(
-      { component: GeneListCard },
+      { component: StrucvarGeneListCard },
       {
         props: {
-          genesInfos: JSON.parse(JSON.stringify([BRCA1GeneInfo['genes']['HGNC:1100']])),
-          currentSvRecord: JSON.parse(JSON.stringify(CurrentSV)),
-          selectedGeneHgncId: 'HGNC:1100',
-          storeState: StoreState.Active
-        }
+          currentStrucvarRecord: strucvarInfo,
+          csq: strucvarResultBrca1.result,
+          genesInfos: [geneInfoBrca1],
+          storeState: StoreState.Active,
+          selectGeneHgncId: undefined
+        },
+        routes
       }
     )
 
@@ -33,14 +81,16 @@ describe.concurrent('GeneListCard', async () => {
   it('shows the gene info on row click', async () => {
     // arrange:
     const { wrapper } = await setupMountedComponents(
-      { component: GeneListCard },
+      { component: StrucvarGeneListCard },
       {
         props: {
-          genesInfos: JSON.parse(JSON.stringify([BRCA1GeneInfo['genes']['HGNC:1100']])),
-          currentSvRecord: JSON.parse(JSON.stringify(CurrentSV)),
-          selectedGeneHgncId: 'HGNC:1100',
-          storeState: StoreState.Active
-        }
+          currentStrucvarRecord: strucvarInfo,
+          csq: strucvarResultBrca1.result,
+          genesInfos: [geneInfoBrca1],
+          storeState: StoreState.Active,
+          selectGeneHgncId: undefined
+        },
+        routes
       }
     )
 
diff --git a/src/components/StrucvarGeneListCard/StrucvarGeneListCard.stories.ts b/src/components/StrucvarGeneListCard/StrucvarGeneListCard.stories.ts
index 38f897f..49eac75 100644
--- a/src/components/StrucvarGeneListCard/StrucvarGeneListCard.stories.ts
+++ b/src/components/StrucvarGeneListCard/StrucvarGeneListCard.stories.ts
@@ -1,7 +1,13 @@
+import { JsonValue } from '@protobuf-ts/runtime'
 import type { Meta, StoryObj } from '@storybook/vue3'
 
+import { StrucvarResult } from '../../api/mehari'
+import strucvarResultBrca1Json from '../../api/mehari/fixture.strucvarCsqResponse.BRCA1.json'
+import geneInfoBrca1Json from '../../components/GenePathogenicityCard/fixture.geneInfo.BRCA1.json'
 import { Strucvar } from '../../lib/genomicVars'
-import StrucvarToolsCard from './StrucvarToolsCard.vue'
+import { Record as GeneInfoRecord } from '../../pbs/annonars/genes/base'
+import { StoreState } from '../../store'
+import StrucvarGeneListCard from './StrucvarGeneListCard.vue'
 
 // We define the fixtures inline here as they are small.
 const delBrca1: Strucvar = {
@@ -13,17 +19,30 @@ const delBrca1: Strucvar = {
   userRepr: 'DEL:chr17:41176312:41277500'
 }
 
+// @ts-ignore
+const geneInfoBrca1 = GeneInfoRecord.fromJson(geneInfoBrca1Json as JsonValue)
+// @ts-ignore
+const strucvarResultBrca1 = StrucvarResult.fromJson(strucvarResultBrca1Json as JsonValue)
+
 const meta = {
-  title: 'Strucvar/StrucvarToolsCard',
-  component: StrucvarToolsCard,
+  title: 'Strucvar/StrucvarGeneListCard',
+  component: StrucvarGeneListCard,
   tags: ['autodocs'],
   argTypes: {
-    strucvar: { control: { type: 'object' } }
+    currentStrucvarRecord: { control: { type: 'object' } },
+    csq: { control: { type: 'object' } },
+    genesInfos: { control: { type: 'object' } },
+    storeState: { control: { type: 'object' } },
+    selectedGeneHgncId: { control: { type: 'object' } }
   },
   args: {
-    strucvar: delBrca1
+    currentStrucvarRecord: delBrca1,
+    csq: strucvarResultBrca1.result,
+    genesInfos: [geneInfoBrca1],
+    storeState: StoreState.Active,
+    selectedGeneHgncId: undefined
   }
-} satisfies Meta<typeof StrucvarToolsCard>
+} satisfies Meta<typeof StrucvarGeneListCard>
 
 export default meta
 
@@ -31,6 +50,6 @@ type Story = StoryObj<typeof meta>
 
 export const DelBRCA1: Story = {
   args: {
-    strucvar: delBrca1
+    currentStrucvarRecord: delBrca1
   }
 }
diff --git a/src/components/StrucvarGeneListCard/StrucvarGeneListCard.vue b/src/components/StrucvarGeneListCard/StrucvarGeneListCard.vue
index 8a65f74..4927d69 100644
--- a/src/components/StrucvarGeneListCard/StrucvarGeneListCard.vue
+++ b/src/components/StrucvarGeneListCard/StrucvarGeneListCard.vue
@@ -2,36 +2,42 @@
 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 type { GeneTranscriptEffects } from '../../api/mehari/types'
+import { type Strucvar } from '../../lib/genomicVars'
 import { Record as GeneInfoRecord } from '../../pbs/annonars/genes/base'
+import { StoreState } from '../../store'
+import DocsLink from '../DocsLink/DocsLink.vue'
+import GeneListEntry from './GeneListEntry.vue'
 
 /** 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
-})
+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'])
+const emit = defineEmits([
+  /** A gene was selected by its HGNC ID. */
+  'update:selectedGeneHgncId'
+])
 
 /** Available items per page. */
 const itemsPerPageChoices = [5, 10, 20, 50]
@@ -48,7 +54,6 @@ const isLoading = computed<boolean>(() => {
   )
 })
 
-
 /** Helper mapping from gene HGNC ID to worst transcript effect. */
 const hgncToEffect = computed<{ [key: string]: string }>(() => {
   const hgncToEffect: { [key: string]: string } = {}
diff --git a/src/lib/testUtils.ts b/src/lib/testUtils.ts
index 6fc830d..5f99269 100644
--- a/src/lib/testUtils.ts
+++ b/src/lib/testUtils.ts
@@ -2,6 +2,7 @@ import { type TestingPinia, createTestingPinia } from '@pinia/testing'
 import { type VueWrapper, flushPromises, mount } from '@vue/test-utils'
 import { vi } from 'vitest'
 import { h } from 'vue'
+import { RouteRecordRaw, RouterView, createRouter, createWebHistory } from 'vue-router'
 import { createVuetify } from 'vuetify'
 import { md3 } from 'vuetify/blueprints'
 import * as components from 'vuetify/components'
@@ -46,10 +47,15 @@ export const setupMountedComponents = async (
     props?: any
     /** Query to pass to the router */
     query?: any
-    /** A custom pinia instance to use. Use this option only if you need to mock a store getter
+    /**
+     * A custom pinia instance to use. Use this option only if you need to mock a store getter
      * or action.
      */
     pinia?: TestingPinia
+    /**
+     * Any routes to use.
+     */
+    routes?: RouteRecordRaw[]
   }
 ): Promise<MountedComponents> => {
   // Create new vuetify instance.
@@ -61,6 +67,20 @@ export const setupMountedComponents = async (
     directives
   })
 
+  // Create a `Router` instance that will be used in the tests and mock `push()`.
+  const router = createRouter({
+    history: createWebHistory(),
+    routes: options?.routes ?? [
+      {
+        path: '/',
+        name: 'home',
+        component: h(RouterView)
+      }
+    ]
+  })
+  router.push = vi.fn()
+  router.replace = vi.fn()
+
   // Create a testing pinia with the initial data.
   const pinia = createTestingPinia({
     createSpy: vi.fn,
@@ -83,7 +103,7 @@ export const setupMountedComponents = async (
   const wrapper = mount(componentMount, {
     query: options?.query,
     global: {
-      plugins: [vuetify, options?.pinia ?? pinia],
+      plugins: [router, vuetify, options?.pinia ?? pinia],
       components: knownComponents,
       stubs: {
         // never stub out these central components for convenience