diff --git a/cases/vueapp/src/components/CaseDetail/Content.vue b/cases/vueapp/src/components/CaseDetail/Content.vue
index 54e1e4be9..13528ce19 100644
--- a/cases/vueapp/src/components/CaseDetail/Content.vue
+++ b/cases/vueapp/src/components/CaseDetail/Content.vue
@@ -8,7 +8,6 @@ import PaneAnnotations from '@cases/components/CaseDetail/PaneAnnotations.vue'
 import { useRouter } from 'vue-router'
 import { useCaseDetailsStore } from '@cases/stores/caseDetails'
 import { useCaseQcStore } from '@cases_qc/stores/caseQc'
-import GenomeBrowser from '@svs/components/GenomeBrowser.vue'
 
 const router = useRouter()
 
@@ -38,7 +37,6 @@ const Tabs = Object.freeze({
   overview: 'overview',
   qc: 'qc',
   annotation: 'annotation',
-  browser: 'browser',
 })
 
 const caseDetailsStore = useCaseDetailsStore()
@@ -113,18 +111,6 @@ const updateCurrentTab = (newValue) => {
           </span>
         </a>
       </li>
-      <li class="nav-item">
-        <a
-          class="nav-link"
-          :class="{ active: props.currentTab === Tabs.browser }"
-          role="button"
-          @click="updateCurrentTab(Tabs.browser)"
-        >
-          <i-mdi-safety-goggles />
-
-          Browser
-        </a>
-      </li>
     </ul>
     <div id="cases-content" class="tab-content flex-grow-1 d-flex flex-column">
       <div
@@ -166,17 +152,6 @@ const updateCurrentTab = (newValue) => {
           <template #fallback> Loading ... </template>
         </Suspense>
       </div>
-      <div
-        v-if="props.currentTab === Tabs.browser"
-        id="case-list"
-        class="border border-top-0 tab-pane fade show active flex-grow-1 d-flex flex-column"
-        role="tabpanel"
-      >
-        <GenomeBrowser
-          :case-uuid="caseDetailsStore.caseObj?.sodar_uuid"
-          :genome="caseDetailsStore.caseObj?.release"
-        />
-      </div>
     </div>
   </div>
 </template>
diff --git a/cases/vueapp/src/components/CaseDetail/PaneAnnotations.vue b/cases/vueapp/src/components/CaseDetail/PaneAnnotations.vue
index 0cadeeee1..1bf4c61fa 100644
--- a/cases/vueapp/src/components/CaseDetail/PaneAnnotations.vue
+++ b/cases/vueapp/src/components/CaseDetail/PaneAnnotations.vue
@@ -18,7 +18,7 @@ const showSmallVariantDetails = async (event) => {
 
 const showStructuralVariantDetails = async (event) => {
   router.push({
-    name: 'sv-details',
+    name: 'strucvar-details',
     params: {
       row: event.svresultrow,
       selectedSection: event.selectedSection ?? null,
diff --git a/cases/vueapp/src/plugins/reevFrontend.ts b/cases/vueapp/src/plugins/reevFrontend.ts
index 36b2049dc..e3491ec9e 100644
--- a/cases/vueapp/src/plugins/reevFrontend.ts
+++ b/cases/vueapp/src/plugins/reevFrontend.ts
@@ -4,7 +4,7 @@ export function setupBackendUrls() {
   urlConfig.baseUrlAnnonars = '/proxy/varfish/annonars'
   urlConfig.baseUrlMehari = '/proxy/varfish/mehari'
   urlConfig.baseUrlViguno = '/proxy/varfish/viguno'
-  urlConfig.baseUrlNginx = '/proxy/varfish/nginx'
+  urlConfig.baseUrlNginx = '/proxy/varfish/nginx/'
   urlConfig.baseUrlPubtator = '/proxy/remote/pubtator3-api'
   urlConfig.baseUrlVariantValidator = '/proxy/variantvalidator'
 
diff --git a/cases/vueapp/src/router/index.ts b/cases/vueapp/src/router/index.ts
index 24259d379..fdffde6b9 100644
--- a/cases/vueapp/src/router/index.ts
+++ b/cases/vueapp/src/router/index.ts
@@ -1,6 +1,6 @@
 import CaseDetailApp from '@cases/components/CaseDetailApp.vue'
 import CaseListApp from '@cases/components/CaseListApp.vue'
-import SvDetails from '@svs/components/SvDetails.vue'
+import StrucvarDetails from '@svs/views/StrucvarDetails/StrucvarDetails.vue'
 import SvFilterApp from '@svs/components/SvFilterApp.vue'
 import { useHistoryStore } from '@varfish/stores/history'
 import FilterApp from '@variants/components/FilterApp.vue'
@@ -110,12 +110,12 @@ const routes: RouteRecordRaw[] = [
     }),
   },
   {
-    name: 'sv-details',
-    path: '/svs/details/:row/:selectedSection?',
-    component: SvDetails,
+    name: 'strucvar-details',
+    path: '/strucvar/details/:row/:selectedSection?',
+    component: StrucvarDetails,
     props: (route: RouteLocationNormalized) => ({
       resultRowUuid: route.params.row,
-      selectedSection: route.params.selectedSection || 'genes',
+      selectedSection: route.params.selectedSection || 'top',
     }),
   },
 ]
@@ -135,7 +135,7 @@ export const router = createRouter({
     savedPosition: null | _ScrollPositionNormalized,
   ) {
     if (
-      ['seqvar-details', 'sv-details'].includes(String(to.name)) &&
+      ['seqvar-details', 'strucvar-details'].includes(String(to.name)) &&
       to.params.selectedSection
     ) {
       const res = { el: `#${to.params.selectedSection}` }
diff --git a/cases/vueapp/tests/unit/cases/CaseDetail/Content.spec.js b/cases/vueapp/tests/unit/cases/CaseDetail/Content.spec.js
index c5a25e5a0..18df269b1 100644
--- a/cases/vueapp/tests/unit/cases/CaseDetail/Content.spec.js
+++ b/cases/vueapp/tests/unit/cases/CaseDetail/Content.spec.js
@@ -33,8 +33,7 @@ describe('CaseDetailContent.vue', () => {
     expect(wrapper.html()).matches(/<pane-case-stub/)
     expect(wrapper.html()).not.matches(/<pane-qc-stub/)
     expect(wrapper.html()).not.matches(/<pane-annotations-stub/)
-    expect(wrapper.html()).not.matches(/<genome-browser-stub/)
-    expect(wrapper.findAll('a.nav-link').length).toBe(4)
+    expect(wrapper.findAll('a.nav-link').length).toBe(3)
   })
 
   test('test with some data', async () => {
@@ -45,8 +44,7 @@ describe('CaseDetailContent.vue', () => {
     expect(wrapper.html()).matches(/<pane-case-stub/)
     expect(wrapper.html()).not.matches(/<pane-qc-stub/)
     expect(wrapper.html()).not.matches(/<pane-annotations-stub/)
-    expect(wrapper.html()).not.matches(/<genome-browser-stub/)
-    expect(wrapper.findAll('a.nav-link').length).toBe(4)
+    expect(wrapper.findAll('a.nav-link').length).toBe(3)
   })
 
   test('test click quality control', async () => {
@@ -57,9 +55,8 @@ describe('CaseDetailContent.vue', () => {
     expect(wrapper.html()).matches(/<pane-case-stub/)
     expect(wrapper.html()).not.matches(/<pane-qc-stub/)
     expect(wrapper.html()).not.matches(/<pane-annotations-stub/)
-    expect(wrapper.html()).not.matches(/<genome-browser-stub/)
 
-    expect(wrapper.findAll('a.nav-link').length).toBe(4)
+    expect(wrapper.findAll('a.nav-link').length).toBe(3)
     await wrapper.findAll('a.nav-link')[1].trigger('click')
 
     expect(router.push).toHaveBeenCalledTimes(1)
@@ -73,7 +70,6 @@ describe('CaseDetailContent.vue', () => {
     // expect(wrapper.html()).not.matches(/<pane-case-stub/)
     // expect(wrapper.html()).matches(/<pane-qc-stub/)
     // expect(wrapper.html()).not.matches(/<pane-annotations-stub/)
-    // expect(wrapper.html()).not.matches(/<genome-browser-stub/)
   })
 
   test('test click quality control, then overview', async () => {
@@ -84,9 +80,8 @@ describe('CaseDetailContent.vue', () => {
     expect(wrapper.html()).matches(/<pane-case-stub/)
     expect(wrapper.html()).not.matches(/<pane-qc-stub/)
     expect(wrapper.html()).not.matches(/<pane-annotations-stub/)
-    expect(wrapper.html()).not.matches(/<genome-browser-stub/)
 
-    expect(wrapper.findAll('a.nav-link').length).toBe(4)
+    expect(wrapper.findAll('a.nav-link').length).toBe(3)
     await wrapper.findAll('a.nav-link')[1].trigger('click')
     await wrapper.findAll('a.nav-link')[0].trigger('click')
 
@@ -107,7 +102,6 @@ describe('CaseDetailContent.vue', () => {
     expect(wrapper.html()).matches(/<pane-case-stub/)
     expect(wrapper.html()).not.matches(/<pane-qc-stub/)
     expect(wrapper.html()).not.matches(/<pane-annotations-stub/)
-    expect(wrapper.html()).not.matches(/<genome-browser-stub/)
   })
 
   test('test click variant annotation', async () => {
@@ -120,7 +114,7 @@ describe('CaseDetailContent.vue', () => {
     expect(wrapper.html()).not.matches(/<pane-annotations-stub/)
     expect(wrapper.html()).not.matches(/<genome-browser-stub/)
 
-    expect(wrapper.findAll('a.nav-link').length).toBe(4)
+    expect(wrapper.findAll('a.nav-link').length).toBe(3)
     await wrapper.findAll('a.nav-link')[2].trigger('click')
 
     expect(router.push).toHaveBeenCalledTimes(1)
@@ -134,33 +128,5 @@ describe('CaseDetailContent.vue', () => {
     // expect(wrapper.html()).not.matches(/<pane-case-stub/)
     // expect(wrapper.html()).not.matches(/<pane-qc-stub/)
     // expect(wrapper.html()).matches(/<pane-annotations-stub/)
-    // expect(wrapper.html()).not.matches(/<genome-browser-stub/)
-  })
-
-  test('test click genome browser', async () => {
-    const wrapper = makeWrapper(CaseDetailContent, {
-      caseDetails: caseDetailsStoreData,
-    })
-
-    expect(wrapper.html()).matches(/<pane-case-stub/)
-    expect(wrapper.html()).not.matches(/<pane-qc-stub/)
-    expect(wrapper.html()).not.matches(/<pane-annotations-stub/)
-    expect(wrapper.html()).not.matches(/<genome-browser-stub/)
-
-    expect(wrapper.findAll('a.nav-link').length).toBe(4)
-    await wrapper.findAll('a.nav-link')[3].trigger('click')
-
-    expect(router.push).toHaveBeenCalledTimes(1)
-    expect(router.push).toHaveBeenCalledWith({
-      name: 'case-detail-browser',
-      params: {
-        case: caseDetailsStoreData.caseObj.sodar_uuid,
-      },
-    })
-
-    // expect(wrapper.html()).not.matches(/<pane-case-stub/)
-    // expect(wrapper.html()).not.matches(/<pane-qc-stub/)
-    // expect(wrapper.html()).not.matches(/<pane-annotations-stub/)
-    // expect(wrapper.html()).matches(/<genome-browser-stub/)
   })
 })
diff --git a/svs/vueapp/src/components/GenomeBrowser.tracks.js b/svs/vueapp/src/components/GenomeBrowser.tracks.js
deleted file mode 100644
index c9aa6db1c..000000000
--- a/svs/vueapp/src/components/GenomeBrowser.tracks.js
+++ /dev/null
@@ -1,154 +0,0 @@
-const visibilityWindow = 10000000
-
-const hescTadTrack = {
-  name: 'hESC TADs',
-  sourceType: 'annotation',
-  format: 'bed',
-  visibilityWindow,
-  url: '/proxy/varfish/nginx/grch37/hesc.bed',
-  color: 'gray',
-}
-
-const curatedMmsTrack = {
-  name: 'Curated MMS',
-  sourceType: 'annotation',
-  format: 'bed',
-  visibilityWindow,
-  url: '/proxy/varfish/nginx/grch37/patho-mms.bed',
-  color: 'red',
-}
-
-// const clinvarTrack = {
-//   name: 'ClinVar SVs',
-//   sourceType: 'custom',
-//   visibilityWindow,
-//   height: 100,
-//   displayMode: 'SQUISHED',
-//   source: {
-//     url: `/svs/worker/clinvar/grch37/?min_pathogenicity=likely-pathogenic&chromosome=$CHR&begin=$START&end=$END`,
-//     method: 'GET',
-//     contentType: 'application/json',
-//     mappings: {
-//       chr: 'chromosome',
-//       start: 'begin',
-//     },
-//     queryable: true,
-//   },
-//   format: 'annotation',
-//   colorBy: 'pathogenicity',
-//   colorTable: {
-//     pathogenic: 'red',
-//     'likely-pathogenic': 'orange',
-//     uncertain: 'blue',
-//     'likely-benign': 'gray',
-//     benign: 'light gray',
-//   },
-// }
-
-const duplicationTrack = {
-  name: 'UCSC Segmental Duplications',
-  sourceType: 'annotation',
-  format: 'bed',
-  visibilityWindow,
-  url: '/proxy/varfish/nginx/grch37/genomicSuperDups.bed.gz',
-  indexURL: '/proxy/varfish/nginx/grch37/genomicSuperDups.bed.gz.tbi',
-  color: 'black',
-}
-
-const repeatsTrack = {
-  name: 'UCSC Repeat Masker',
-  sourceType: 'annotation',
-  format: 'bed',
-  visibilityWindow,
-  url: '/proxy/varfish/nginx/grch37/rmsk.bed.gz',
-  indexURL: '/proxy/varfish/nginx/grch37/rmsk.bed.gz.tbi',
-  color: 'black',
-}
-
-const altTrack = {
-  name: 'UCSC Alt Loci Track',
-  sourceType: 'annotation',
-  format: 'bed',
-  visibilityWindow,
-  url: '/proxy/varfish/nginx/grch37/altSeqLiftOverPsl.bed.gz',
-  indexURL: '/proxy/varfish/nginx/grch37/altSeqLiftOverPsl.bed.gz.tbi',
-  color: 'black',
-}
-
-const fixTrack = {
-  name: 'UCSC Fix Track',
-  sourceType: 'annotation',
-  format: 'bed',
-  visibilityWindow,
-  url: '/proxy/varfish/nginx/grch37/fixSeqLiftOverPsl.bed.gz',
-  indexURL: '/proxy/varfish/nginx/grch37/fixSeqLiftOverPsl.bed.gz.tbi',
-  color: 'black',
-}
-
-const bgDbTracks = [
-  // {
-  //   title: 'In-House SVs',
-  //   token: 'inhouse',
-  // },
-  {
-    title: 'gnomad-SV',
-    token: 'gnomad',
-  },
-  {
-    title: 'DGV SVs',
-    token: 'dgv',
-  },
-  {
-    title: 'DGV GS SVs',
-    token: 'dgv-gs',
-  },
-  {
-    title: 'ExAC CNVs',
-    token: 'exac',
-  },
-].map(({ title, token }) => {
-  return {
-    name: title,
-    sourceType: 'annotation',
-    format: 'bed',
-    visibilityWindow,
-    displayMode: 'SQUISHED',
-    url: `/proxy/varfish/nginx/grch37/${token}.bed.gz`,
-    indexURL: `/proxy/varfish/nginx/grch37/${token}.bed.gz.tbi`,
-    color: 'black',
-  }
-})
-export const publicTracks = [
-  duplicationTrack,
-  repeatsTrack,
-  altTrack,
-  fixTrack,
-  hescTadTrack,
-  curatedMmsTrack,
-  // clinvarTrack,
-].concat(bgDbTracks)
-
-export const genCaseTrack = (caseUuid) => ({
-  order: -1,
-  height: '200',
-  name: 'Case SVs',
-  sourceType: 'custom',
-  visibilityWindow,
-  source: {
-    url: `/svs/ajax/fetch-variants/${caseUuid}/?chromosome=$CHR&start=$START&end=$END`,
-    method: 'GET',
-    contentType: 'application/json',
-    mappings: {
-      chr: 'chromosome',
-    },
-    queryable: true,
-  },
-  format: 'annotation',
-  colorBy: 'sv_type',
-  colorTable: {
-    DEL: 'red',
-    DUP: 'green',
-    INV: 'blue',
-    '*': 'black',
-  },
-})
diff --git a/svs/vueapp/src/components/GenomeBrowser.vue b/svs/vueapp/src/components/GenomeBrowser.vue
deleted file mode 100644
index bcf077e50..000000000
--- a/svs/vueapp/src/components/GenomeBrowser.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<script setup>
-import { ref, onMounted, watch } from 'vue'
-import igv from 'igv'
-
-import { useCaseDetailsStore } from '@cases/stores/caseDetails'
-
-import {
-  genCaseTrack,
-  publicTracks,
-} from '@svs/components/GenomeBrowser.tracks'
-
-// Define the props.
-const props = defineProps({
-  // Case UUID
-  // eslint-disable-next-line vue/require-default-prop
-  caseUuid: String,
-  // Genome build, e.g., "hg19" or "b37"
-  // eslint-disable-next-line vue/require-default-prop
-  genome: String,
-  // Locus to go to, e.g., "chr1:1,900,000-2,000,000"
-  // eslint-disable-next-line vue/require-default-prop
-  locus: String,
-})
-
-// Get the stores.
-const caseDetailsStore = useCaseDetailsStore()
-
-// The <div> to show the browser in.
-const genomeBrowserDivRef = ref(null)
-// Set on IGV browser creation.
-const igvBrowser = ref(null)
-
-const translateGenome = (value) => {
-  if (value === 'GRCh37') {
-    return 'hg19'
-  } else if (value === 'GRCh38') {
-    return 'hg38'
-  } else {
-    return value
-  }
-}
-
-// Conditionally add case tracks.
-const addCaseTracks = (browser) => {
-  if (props.caseUuid) {
-    browser.loadTrack(genCaseTrack(props.caseUuid))
-  }
-}
-
-// Add all tracks.
-const addTracks = (browser) => {
-  addCaseTracks(browser)
-  for (const track of publicTracks) {
-    browser.loadTrack(track)
-  }
-}
-
-// Watch changes to the genome (requires full reload).
-watch(
-  () => props.genome,
-  (_newGenome, _oldGenome) => {
-    igvBrowser.value
-      .loadGenome(translateGenome(props.genome))
-      .then((browser) => {
-        browser.search(props.locus)
-      })
-      .then((browser) => {
-        addTracks(browser)
-      })
-  },
-)
-
-// Watch changes to the case (requires track reload).
-watch(
-  () => caseDetailsStore.caseObj,
-  (_newCase, _oldCase) => {
-    if (igvBrowser.value) {
-      igvBrowser.value.removeTrackByName('Case SVs')
-      addCaseTracks(igvBrowser.value)
-    }
-  },
-)
-
-// Watch changes to the locus (jumping is enough).
-watch(
-  () => props.locus,
-  (_newValue, _oldValue) => {
-    if (igvBrowser.value) {
-      igvBrowser.value.search(props.locus)
-    }
-  },
-)
-
-// Construct igv.js browser when mounted.
-onMounted(() => {
-  igv
-    .createBrowser(genomeBrowserDivRef.value, {
-      genome: translateGenome(props.genome),
-      locus: props.locus,
-    })
-    .then((browser) => {
-      igvBrowser.value = browser
-      addTracks(browser)
-      if (props.locus) {
-        igvBrowser.value.search(props.locus)
-      }
-    })
-})
-</script>
-
-<template>
-  <div ref="genomeBrowserDivRef"></div>
-</template>
diff --git a/svs/vueapp/src/components/StrucvarDetailsHeader/StrucvarDetailsHeader.vue b/svs/vueapp/src/components/StrucvarDetailsHeader/StrucvarDetailsHeader.vue
new file mode 100644
index 000000000..e8032b59d
--- /dev/null
+++ b/svs/vueapp/src/components/StrucvarDetailsHeader/StrucvarDetailsHeader.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { Strucvar } from '@bihealth/reev-frontend-lib/lib/genomicVars'
+import UiToggleMaxButton from '@varfish/components/UiToggleMaxButton/UiToggleMaxButton.vue'
+
+/** The component's props. */
+const props = defineProps<{
+  /** The strucvr to display for. */
+  strucvar?: Strucvar
+  /** Payload from row in strucvar result store. */
+  // TODO: use proper type here
+  resultRowPayload?: any
+}>()
+</script>
+
+<template>
+  <v-row no-gutters class="flex-nowrap">
+    <v-col cols="11" class="text-h4 flex-grow-0">
+      Structural Variant Details
+      <small class="font-italic">
+        {{ strucvar?.userRepr }}
+      </small>
+    </v-col>
+    <v-col cols="1" class="flex-shrink-0 text-right">
+      <UiToggleMaxButton />
+    </v-col>
+  </v-row>
+</template>
diff --git a/svs/vueapp/src/components/StrucvarDetailsNavi/StrucvarDetailsNavi.vue b/svs/vueapp/src/components/StrucvarDetailsNavi/StrucvarDetailsNavi.vue
new file mode 100644
index 000000000..6f4e6c0a8
--- /dev/null
+++ b/svs/vueapp/src/components/StrucvarDetailsNavi/StrucvarDetailsNavi.vue
@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import { jumpToLocus } from './lib'
+import { computed, onMounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { Strucvar } from '@bihealth/reev-frontend-lib/lib/genomicVars'
+import { SECTIONS } from './constants'
+import { useHistoryStore } from '@varfish/stores/history'
+import { useStrucvarInfoStore } from '@bihealth/reev-frontend-lib/stores/strucvarInfo'
+
+/** The component's props. */
+const props = defineProps<{
+  /** The seqvar to display for. */
+  strucvar?: Strucvar
+  /** The case UUID (for navigation). */
+  caseUuid?: string
+}>()
+
+/** The global Router objects. */
+const router = useRouter()
+
+/** Component state; use for opening top level sections by default. */
+const openedTopLevel = ref<string[]>(['gene', 'strucvar'])
+
+/** History utility store. */
+const historyStore = useHistoryStore()
+/** Information about the strucvar, used to fetch information on load. */
+const strucvarInfoStore = useStrucvarInfoStore()
+
+/** Component state; HGNC identifier of selected gene. */
+const selectedGeneHgncId = ref<string | undefined>(undefined)
+/** Selected gene information. */
+const selectedGeneInfo = computed<any | undefined>(() => {
+  return (strucvarInfoStore.genesInfos || []).find((geneInfo) => {
+    return geneInfo.hgnc?.hgncId === selectedGeneHgncId.value
+  })
+})
+
+/** Navigate back. */
+const navigateBack = () => {
+  const dest = historyStore.lastWithDifferentName('strucvar-details')
+  if (dest) {
+    router.push(dest)
+  } else {
+    router.push({
+      name: 'svs-filter',
+      params: { case: props.caseUuid },
+    })
+  }
+}
+
+/** Initialize all stores. */
+const initStores = async () => {
+  if (props.strucvar && props.caseUuid) {
+    await strucvarInfoStore.initialize(props.strucvar)
+  }
+}
+
+// Initialize when mounted and when props change.
+onMounted(initStores)
+watch(() => [props.strucvar, props.caseUuid], initStores)
+</script>
+
+<template>
+  <v-list v-model:opened="openedTopLevel" density="compact" rounded="lg">
+    <!-- Navigate back in history -->
+    <div class="px-2 pb-3">
+      <v-btn
+        block
+        rounded="xs"
+        variant="outlined"
+        prepend-icon="mdi-arrow-left"
+        @click.prevent="navigateBack"
+      >
+        Back
+      </v-btn>
+    </div>
+
+    <!-- Jump to IGV -->
+    <div class="px-2 pb-3">
+      <v-btn
+        block
+        rounded="xs"
+        variant="outlined"
+        prepend-icon="mdi-launch"
+        @click.prevent="jumpToLocus(strucvar)"
+      >
+        Jump in Local IGV
+      </v-btn>
+    </div>
+
+    <v-list-item
+      v-for="section in SECTIONS.TOP"
+      :id="`${section.id}-nav`"
+      :key="section.id"
+      density="compact"
+      prepend-icon="mdi-table-filter"
+      @click="router.push({ params: { selectedSection: section.id } })"
+    >
+      <v-list-item-title class="text-no-break">
+        {{ section.title }}
+      </v-list-item-title>
+    </v-list-item>
+
+    <v-list-group value="gene">
+      <template #activator="{ props: vProps }">
+        <v-list-item
+          :value="vProps"
+          prepend-icon="mdi-dna"
+          v-bind="vProps"
+          class="text-no-break"
+        >
+          Gene
+          <span class="font-italic">
+            {{ selectedGeneInfo?.hgnc?.symbol || selectedGeneInfo?.hgnc?.agr }}
+          </span>
+        </v-list-item>
+      </template>
+
+      <v-list-item
+        v-for="section in SECTIONS.GENE"
+        :id="`${section.id}-nav`"
+        :key="section.id"
+        density="compact"
+        @click="router.push({ params: { selectedSection: section.id } })"
+      >
+        <v-list-item-title class="text-no-break">
+          {{ section.title }}
+        </v-list-item-title>
+      </v-list-item>
+    </v-list-group>
+
+    <v-list-group value="strucvar">
+      <template #activator="{ props: vProps }">
+        <v-list-item
+          :value="vProps"
+          prepend-icon="mdi-magnify-expand"
+          v-bind="vProps"
+        >
+          <v-list-item-title class="text-no-break">
+            Variant Details
+          </v-list-item-title>
+        </v-list-item>
+      </template>
+
+      <v-list-item
+        v-for="section in SECTIONS.STRUCVAR"
+        :id="`${section.id}-nav`"
+        :key="section.id"
+        density="compact"
+        @click="router.push({ params: { selectedSection: section.id } })"
+      >
+        <v-list-item-title class="text-no-break">
+          {{ section.title }}
+        </v-list-item-title>
+      </v-list-item>
+    </v-list-group>
+  </v-list>
+</template>
diff --git a/svs/vueapp/src/components/StrucvarDetailsNavi/constants.ts b/svs/vueapp/src/components/StrucvarDetailsNavi/constants.ts
new file mode 100644
index 000000000..232bd9ac1
--- /dev/null
+++ b/svs/vueapp/src/components/StrucvarDetailsNavi/constants.ts
@@ -0,0 +1,22 @@
+import { NavItem } from './types'
+
+/** Sections in the navigation. */
+export const SECTIONS: { [key: string]: NavItem[] } = {
+  TOP: [{ id: 'gene-list', title: 'List' }],
+  GENE: [
+    { id: 'gene-overview', title: 'Overview' },
+    { id: 'gene-pathogenicity', title: 'Pathogenicity' },
+    { id: 'gene-conditions', title: 'Conditions' },
+    { id: 'gene-expression', title: 'Expression' },
+    { id: 'gene-clinvar', title: 'ClinVar' },
+    { id: 'gene-literature', title: 'Literature' },
+  ],
+  STRUCVAR: [
+    { id: 'strucvar-calldetails', title: 'Call Details' },
+    { id: 'strucvar-clinvar', title: 'ClinVar' },
+    { id: 'strucvar-tools', title: 'Tools' },
+    { id: 'strucvar-flags', title: 'Flags' },
+    { id: 'strucvar-comments', title: 'Comments' },
+    { id: 'strucvar-genomebrowser', title: 'Genome Browser' },
+  ],
+}
diff --git a/svs/vueapp/src/components/StrucvarDetailsNavi/lib.ts b/svs/vueapp/src/components/StrucvarDetailsNavi/lib.ts
new file mode 100644
index 000000000..97a76aacc
--- /dev/null
+++ b/svs/vueapp/src/components/StrucvarDetailsNavi/lib.ts
@@ -0,0 +1,27 @@
+import { Strucvar } from '@bihealth/reev-frontend-lib/lib/genomicVars'
+
+/**
+ * Jump to the locus in the local IGV.
+ */
+export const jumpToLocus = async (strucvar?: Strucvar) => {
+  if (strucvar === undefined) {
+    return
+  }
+  let url: string
+  if (strucvar.svType === 'BND' || strucvar.svType === 'INS') {
+    url =
+      `http://127.0.0.1:60151/goto?locus=chr${strucvar.chrom.replace('chr', '')}:` +
+      `${strucvar.start ?? 1}-${(strucvar.start ?? 1) + 1}`
+  } else {
+    url =
+      `http://127.0.0.1:60151/goto?locus=chr${strucvar.chrom.replace('chr', '')}:` +
+      `${strucvar.start ?? 1}-${strucvar.stop ?? strucvar.start ?? 1}`
+  }
+  // NB: we allow the call to fetch here as it goes to local IGV.
+  await fetch(url).catch((e) => {
+    const msg =
+      "Couldn't connect to IGV. Please make sure IGV is running and try again."
+    alert(msg)
+    console.error(msg, e)
+  })
+}
diff --git a/svs/vueapp/src/components/StrucvarDetailsNavi/types.ts b/svs/vueapp/src/components/StrucvarDetailsNavi/types.ts
new file mode 100644
index 000000000..696ad62ea
--- /dev/null
+++ b/svs/vueapp/src/components/StrucvarDetailsNavi/types.ts
@@ -0,0 +1,4 @@
+export interface NavItem {
+  id: string
+  title: string
+}
diff --git a/svs/vueapp/src/components/StrucvarGenotypeCallCard/StrucvarGenotypeCallCard.vue b/svs/vueapp/src/components/StrucvarGenotypeCallCard/StrucvarGenotypeCallCard.vue
new file mode 100644
index 000000000..500a44b65
--- /dev/null
+++ b/svs/vueapp/src/components/StrucvarGenotypeCallCard/StrucvarGenotypeCallCard.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { displayName } from '@varfish/helpers'
+import { ResultRow } from './types'
+import { GET_FIELD_MAP as GT_FIELD_MAP, identity } from './constants'
+
+/** This component's props. */
+const props = defineProps<{
+  resultRow?: ResultRow
+}>()
+
+/**
+ * List of all keys.
+ */
+const allKeys = computed<string[]>(() => {
+  if (!props.resultRow?.payload?.call_info) {
+    return []
+  }
+
+  let tmp: string[] = []
+  for (const call_info of Object.values(props.resultRow.payload.call_info)) {
+    tmp = tmp.concat(
+      Object.entries(call_info)
+        .filter(([_, value]) => value !== null)
+        .map(([key, _]) => key),
+    )
+  }
+  const result = Array.from(new Set(tmp))
+  result.sort()
+  return result
+})
+</script>
+
+<template>
+  <template v-if="resultRow === undefined">
+    <v-skeleton-loader type="card" />
+  </template>
+  <template v-else>
+    <v-card>
+      <v-card-title class="pb-0 pr-2">
+        Genotype Info
+        <!-- <DocsLink anchor="genotype-info" /> -->
+      </v-card-title>
+
+      <v-card-subtitle class="text-overline">
+        Detailed Information on Genotype Calls
+      </v-card-subtitle>
+      <v-card-text class="pt-3">
+        <v-table>
+          <thead>
+            <tr>
+              <th class="font-weight-bold">Sample</th>
+              <template
+                v-for="sample in Object.keys(resultRow.payload.call_info)"
+              >
+                <th class="font-weight-bold">
+                  {{ displayName(sample) }}
+                </th>
+              </template>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="key in allKeys">
+              <th>
+                {{ GT_FIELD_MAP[key]?.label ?? GT_FIELD_MAP[key]?.name ?? key }}
+              </th>
+              <td v-for="genotype in resultRow.payload.call_info">
+                {{ (GT_FIELD_MAP[key]?.fmt ?? identity)(genotype[key]) }}
+              </td>
+            </tr>
+          </tbody>
+        </v-table>
+      </v-card-text>
+    </v-card>
+  </template>
+</template>
diff --git a/svs/vueapp/src/components/StrucvarGenotypeCallCard/constants.ts b/svs/vueapp/src/components/StrucvarGenotypeCallCard/constants.ts
new file mode 100644
index 000000000..63861abe4
--- /dev/null
+++ b/svs/vueapp/src/components/StrucvarGenotypeCallCard/constants.ts
@@ -0,0 +1,33 @@
+import { GenotypeFieldDescription } from './types'
+
+export const GT_FIELD_DESCRIPTIONS: GenotypeFieldDescription[] = [
+  { name: 'copy_number', label: 'copy number' },
+  { name: 'quality', label: 'genotype quality' },
+  { name: 'genotype', label: 'genotype call' },
+  { name: 'paired_end_cov', label: 'total read pairs' },
+  { name: 'paired_end_var', label: 'variant read pairs' },
+  { name: 'split_read_cov', label: 'total split-reads' },
+  { name: 'split_read_var', label: 'variant split reads' },
+  { name: 'point_count', label: 'number of bins/targets' },
+  { name: 'average_normalized_cov', label: 'average normalized coverage' },
+  { name: 'average_mapping_quality', label: 'average mapping quality' },
+  {
+    name: 'matched_gt_criteria',
+    label: 'matched genotype criteria',
+    fmt: (val: string | string[]) => {
+      if (Array.isArray(val)) {
+        return val.join(', ')
+      } else {
+        return val
+      }
+    },
+  },
+  { name: 'effective_genotype', label: 'effective genotype' },
+] as const
+
+export const GET_FIELD_MAP: { [key: string]: GenotypeFieldDescription } =
+  Object.fromEntries(GT_FIELD_DESCRIPTIONS.map((desc) => [desc.name, desc]))
+
+export const identity = <T>(x: T): T => {
+  return x
+}
diff --git a/svs/vueapp/src/components/StrucvarGenotypeCallCard/types.ts b/svs/vueapp/src/components/StrucvarGenotypeCallCard/types.ts
new file mode 100644
index 000000000..18ad85d59
--- /dev/null
+++ b/svs/vueapp/src/components/StrucvarGenotypeCallCard/types.ts
@@ -0,0 +1,19 @@
+/** Information about a genotype call for one sample. */
+export type CallInfo = { [key: string]: string | string[] }
+
+/** Result row payload. */
+export interface Payload {
+  call_info: { [key: string]: CallInfo }
+}
+
+/** Result row, as needed for the StrucvarGenotypeCallCard. */
+export interface ResultRow {
+  payload: Payload
+}
+
+/** Type for genotype field description. */
+export interface GenotypeFieldDescription {
+  name: string
+  label?: string
+  fmt?: (values: string | string[]) => string
+}
diff --git a/svs/vueapp/src/components/SvDetails.fields.ts b/svs/vueapp/src/components/SvDetails.fields.ts
deleted file mode 100644
index 51e041a51..000000000
--- a/svs/vueapp/src/components/SvDetails.fields.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-export type NavItem = {
-  name: string
-  title: string
-}
-
-export const allNavItems: NavItem[] = [
-  {
-    name: 'genes',
-    title: 'Genes',
-  },
-  {
-    name: 'clinvar',
-    title: 'ClinVar',
-  },
-  {
-    name: 'call-details',
-    title: 'Call / Genotype',
-  },
-  {
-    name: 'comments',
-    title: 'Comments',
-  },
-  {
-    name: 'flags',
-    title: 'Flags',
-  },
-  {
-    name: 'genome-browser',
-    title: 'Genome Browser',
-  },
-]
diff --git a/svs/vueapp/src/components/SvDetails.vue b/svs/vueapp/src/components/SvDetails.vue
deleted file mode 100644
index d815d7c59..000000000
--- a/svs/vueapp/src/components/SvDetails.vue
+++ /dev/null
@@ -1,268 +0,0 @@
-<script setup lang="ts">
-/**
- * Detailed display of SV information.
- *
- * Used in the SV filtration app and displayed when the user selects a variant to display
- * the details for.
- *
- * Also used in the case details view for displaying all user-annotated variants.
- *
- * See `SvDetails` for a peer app for sequence variants
- */
-
-import { onMounted, computed, watch } from 'vue'
-import { useRouter } from 'vue-router'
-
-import CommentsCard from '@varfish/components/CommentsCard/CommentsCard.vue'
-import FlagsCard from '@varfish/components/FlagsCard/FlagsCard.vue'
-import SimpleCard from '@varfish/components/SimpleCard.vue'
-
-import { useCaseDetailsStore } from '@cases/stores/caseDetails'
-import { useSvDetailsStore } from '@svs/stores/svDetails'
-import { useSvFlagsStore } from '@svs/stores/svFlags'
-import { useSvCommentsStore } from '@svs/stores/svComments'
-import { useSvResultSetStore } from '@svs/stores/svResultSet'
-import { useHistoryStore } from '@varfish/stores/history'
-import { State } from '@varfish/storeUtils'
-
-import Header from '@svs/components/SvDetails/Header.vue'
-import SvDetailsGenes from '@svs/components/SvDetails/Genes.vue'
-import SvDetailsClinvar from '@svs/components/SvDetails/Clinvar.vue'
-import SvDetailsGenotypeCall from '@svs/components/SvDetails/GenotypeCall.vue'
-import GenomeBrowser from '@svs/components/GenomeBrowser.vue'
-import Overlay from '@varfish/components/Overlay.vue'
-import { allNavItems as navItems } from '@svs/components/SvDetails.fields'
-
-/** `SVRecord` is a type alias for easier future interface definition. */
-type SvRecord = any
-
-const props = defineProps<{
-  /** UUID of the result row to display. */
-  resultRowUuid?: string
-  /** Identifier of the selected section. */
-  selectedSection?: string
-}>()
-
-/** Obtain global application content (as for all entry level components) */
-const appContext = JSON.parse(
-  document
-    .getElementById('sodar-ss-app-context')
-    ?.getAttribute('app-context') ?? '{}',
-)
-
-// Routing-related
-
-const router = useRouter()
-
-// Store-related
-
-const historyStore = useHistoryStore()
-
-const caseDetailsStore = useCaseDetailsStore()
-const svResultSetStore = useSvResultSetStore()
-const svDetailsStore = useSvDetailsStore()
-const svFlagsStore = useSvFlagsStore()
-const svCommentsStore = useSvCommentsStore()
-
-const overlayShow = computed(() => {
-  return (
-    svResultSetStore.storeState.state === State.Fetching ||
-    svDetailsStore.storeState.state === State.Fetching ||
-    svFlagsStore.storeState.state === State.Fetching ||
-    svCommentsStore.storeState.state === State.Fetching
-  )
-})
-
-const overlayMessage = computed(() => {
-  if (overlayShow.value) {
-    return 'Loading...'
-  } else {
-    return ''
-  }
-})
-
-// Safely return case release.
-const genomeRelease = computed(() => {
-  const release = caseDetailsStore.caseObj?.release ?? 'GRCh37'
-  return release === 'GRCh37' ? 'hg19' : 'b38'
-})
-
-// Pretty display of coordinates.
-const svLocus = (record: SvRecord): string | undefined => {
-  if (!record) {
-    return undefined
-  }
-
-  let locus: string
-  if (record.sv_type === 'BND' || record.sv_type === 'INS') {
-    locus = `${record.chromosome}:${record.start - 1000}-${record.start + 1000}`
-  } else {
-    locus = `${record.chromosome}:${record.start - 1000}-${record.end + 1000}`
-  }
-  if (!locus.startsWith('chr') && record.release === 'GRCh38') {
-    locus = `chr${locus}`
-  } else if (locus.startsWith('chr') && record.release === 'GRCh37') {
-    locus = locus.substring(3)
-  }
-  return locus
-}
-
-/** Event handler for clicking on the given tab.
- *
- * Will select the tab by pushing a route.
- */
-const onTabClick = (selectedSection: string) => {
-  router.push({
-    name: 'sv-details',
-    params: {
-      row: props.resultRowUuid,
-      selectedSection: selectedSection,
-    },
-  })
-}
-
-const navigateBack = () => {
-  const dest = historyStore.lastWithDifferentName('sv-details')
-  if (dest) {
-    router.push(dest)
-  } else {
-    router.push(`/svs/filter/${caseDetailsStore.caseObj?.sodar_uuid}`)
-  }
-}
-
-/** Refresh the stores. */
-const refreshStores = async () => {
-  if (!svResultSetStore.caseUuid) {
-    throw new Error('caseUuid not set')
-  }
-  if (props.resultRowUuid && props.selectedSection) {
-    await svResultSetStore.initialize(appContext.csrf_token)
-    await svResultSetStore.fetchResultSetViaRow(props.resultRowUuid)
-    await Promise.all([
-      svFlagsStore.initialize(
-        appContext.csrf_token,
-        appContext.project?.sodar_uuid,
-        svResultSetStore.caseUuid,
-      ),
-      svCommentsStore.initialize(
-        appContext.csrf_token,
-        appContext.project?.sodar_uuid,
-        svResultSetStore.caseUuid,
-      ),
-      svDetailsStore.initialize(
-        appContext.csrf_token,
-        appContext.project?.sodar_uuid,
-        svResultSetStore.caseUuid,
-      ),
-    ])
-    svDetailsStore.fetchSvDetails(svResultSetStore.resultRow)
-  }
-
-  document.querySelector(`#${props.selectedSection}`)?.scrollIntoView()
-}
-
-/** Watch change in properties to reload data. */
-watch(
-  () => [props.resultRowUuid, props.selectedSection],
-  () => {
-    refreshStores()
-  },
-)
-
-/** When mounted, scroll to the selected element if any.
- */
-onMounted(() => {
-  refreshStores()
-  document.querySelector(`#${props.selectedSection}`)?.scrollIntoView()
-})
-</script>
-
-<template>
-  <div
-    v-if="caseDetailsStore.caseObj !== null"
-    class="d-flex flex-column h-100"
-  >
-    <Header
-      :sv-record="svDetailsStore.currentSvRecord"
-      :case="caseDetailsStore.caseObj"
-    />
-    <div class="container-fluid">
-      <div class="row">
-        <div class="col-10 pl-0 pr-0 pt-2">
-          <div>
-            <SimpleCard id="genes" title="Genes">
-              <SvDetailsGenes
-                :genes-infos="svDetailsStore.genesInfos ?? undefined"
-                :current-sv-record="svDetailsStore.currentSvRecord"
-              />
-            </SimpleCard>
-            <SimpleCard id="clinvar" title="ClinVar">
-              <SvDetailsClinvar />
-            </SimpleCard>
-            <SimpleCard id="call-details" title="Genotype Call">
-              <div class="p-2">
-                Precise coordinates:
-                <code> {{ svLocus(svDetailsStore.currentSvRecord) }} </code>
-              </div>
-              <SvDetailsGenotypeCall
-                :current-sv-record="svDetailsStore.currentSvRecord"
-              />
-            </SimpleCard>
-            <SimpleCard id="flags" title="Flags">
-              <FlagsCard
-                :flags-store="svFlagsStore"
-                :variant="svDetailsStore.currentSvRecord"
-              />
-            </SimpleCard>
-            <SimpleCard id="comments" title="Comments">
-              <CommentsCard
-                :comments-store="svCommentsStore"
-                :variant="svDetailsStore.currentSvRecord"
-              />
-            </SimpleCard>
-            <SimpleCard id="genome-browser" title="Genome Browser">
-              <GenomeBrowser
-                :case-uuid="caseDetailsStore.caseUuid ?? undefined"
-                :genome="genomeRelease"
-                :locus="svLocus(svDetailsStore.currentSvRecord)"
-              />
-            </SimpleCard>
-          </div>
-          <Overlay v-if="overlayShow" :message="overlayMessage" />
-        </div>
-
-        <div class="col-2">
-          <ul
-            class="nav flex-column nav-pills position-sticky pt-2"
-            style="top: 0px"
-          >
-            <li class="nav-item mt-0 mb-3">
-              <a
-                class="nav-link user-select-none btn btn-secondary"
-                type="button"
-                @click.prevent="navigateBack()"
-              >
-                <i-mdi-arrow-left-circle />
-                Back
-              </a>
-            </li>
-            <li
-              v-for="{ name, title } in navItems"
-              :key="`section-${name}`"
-              class="nav-item mt-0"
-            >
-              <a
-                class="nav-link user-select-none"
-                :class="{ active: props.selectedSection === name }"
-                type="button"
-                @click="onTabClick(name)"
-              >
-                {{ title }}
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/svs/vueapp/src/components/SvDetails/Clinvar.vue b/svs/vueapp/src/components/SvDetails/Clinvar.vue
deleted file mode 100644
index 9085bcb61..000000000
--- a/svs/vueapp/src/components/SvDetails/Clinvar.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<script setup lang="ts">
-import { useSvDetailsStore } from '@svs/stores/svDetails'
-
-const svDetailsStore = useSvDetailsStore()
-
-const vcvUrl = (vcv: string): string => {
-  const stripped = vcv.replace(/^VCV0+/, '')
-  return `https://www.ncbi.nlm.nih.gov/clinvar/variation/${stripped}/`
-}
-</script>
-
-<template>
-  <div class="p-2">
-    <template
-      v-if="svDetailsStore.currentSvRecord?.payload?.clinvar_ovl_vcvs?.length"
-    >
-      <p>
-        The following overlapping SVs are flagged as (likely) pathogenic in
-        ClinVar.
-      </p>
-
-      <ul>
-        <li
-          v-for="vcv in svDetailsStore.currentSvRecord?.payload
-            ?.clinvar_ovl_vcvs ?? []"
-          :key="`vcv-url-${vcv}`"
-        >
-          <a :href="vcvUrl(vcv)">
-            {{ vcv }}
-          </a>
-        </li>
-      </ul>
-    </template>
-    <template v-else>
-      <div class="text-muted text-center font-italic">
-        SV has not been annotated with (likely) pathogenic ClinVar SV records.
-      </div>
-    </template>
-  </div>
-</template>
diff --git a/svs/vueapp/src/components/SvDetails/Genes.vue b/svs/vueapp/src/components/SvDetails/Genes.vue
deleted file mode 100644
index 7ac6e498c..000000000
--- a/svs/vueapp/src/components/SvDetails/Genes.vue
+++ /dev/null
@@ -1,334 +0,0 @@
-<script setup lang="ts">
-import { useSvDetailsStore } from '@svs/stores/svDetails'
-import { computed, ComputedRef, Ref, ref } from 'vue'
-import { roundIt } from '@varfish/moreUtils'
-
-import EasyDataTable from 'vue3-easy-data-table'
-import type { ClickRowArgument, Header, Item } from 'vue3-easy-data-table'
-import 'vue3-easy-data-table/dist/style.css'
-
-// import VariantDetailsGene from '@variants/components/VariantDetails/Gene.vue'
-
-/** `GeneInfo` is a type alias for easier future interface definition. */
-type GeneInfo = any
-/** `SvRecord` is a type alias for easier future interface definition. */
-type SvRecord = any
-
-const props = defineProps<{
-  genesInfos?: GeneInfo[]
-  currentSvRecord?: SvRecord
-}>()
-
-const clingenDosageScore: { [key: string]: number } = {
-  CLINGEN_DOSAGE_SCORE_UNKNOWN: 0,
-  CLINGEN_DOSAGE_SCORE_SUFFICIENT_EVIDENCE_AVAILABLE: 3,
-  CLINGEN_DOSAGE_SCORE_SOME_EVIDENCE_AVAILABLE: 2,
-  CLINGEN_DOSAGE_SCORE_LITTLE_EVIDENCE: 1,
-  CLINGEN_DOSAGE_SCORE_NO_EVIDENCE_AVAILABLE: 0,
-  CLINGEN_DOSAGE_SCORE_RECESSIVE: 30,
-  CLINGEN_DOSAGE_SCORE_UNLIKELY: 40,
-}
-const clingenDosageLabel: { [key: string]: string } = {
-  CLINGEN_DOSAGE_SCORE_UNKNOWN: 'unknown',
-  CLINGEN_DOSAGE_SCORE_SUFFICIENT_EVIDENCE_AVAILABLE:
-    'sufficient evidence for dosage pathogenicity',
-  CLINGEN_DOSAGE_SCORE_SOME_EVIDENCE_AVAILABLE:
-    'some evidence for dosage pathogenicity',
-  CLINGEN_DOSAGE_SCORE_LITTLE_EVIDENCE:
-    'little evidence for dosage pathogenicity',
-  CLINGEN_DOSAGE_SCORE_NO_EVIDENCE_AVAILABLE:
-    'no evidence for dosage pathogenicity',
-  CLINGEN_DOSAGE_SCORE_RECESSIVE:
-    'gene associated with autosomal recessive phenotype',
-  CLINGEN_DOSAGE_SCORE_UNLIKELY: 'dosage sensitivity unlikely',
-}
-
-const currentGeneInfos: Ref<any> = ref(undefined)
-const currentGeneClinvar: Ref<any> = ref(undefined)
-
-const genesInfosByHgnc: ComputedRef<Map<string, any>> = computed(
-  (): Map<string, any> => {
-    const result = new Map()
-    for (const record of props.genesInfos ?? []) {
-      result.set(record.hgnc.hgnc_id, record)
-    }
-    return result
-  },
-)
-
-const headers: Header[] = [
-  {
-    text: 'symbol',
-    value: 'dbnsfp.geneName',
-    width: 150,
-    sortable: true,
-  },
-  {
-    text: 'name',
-    value: 'dbnsfp.geneFullName',
-    width: 200,
-  },
-  {
-    text: 'OMIM',
-    value: 'omim',
-    sortable: true,
-  },
-  {
-    text: 'Orphanet',
-    value: 'orpha',
-    sortable: true,
-  },
-  {
-    text: 'pLI',
-    value: 'gnomadConstraints.pli',
-    width: 50,
-    sortable: true,
-  },
-  {
-    text: 'o/e LoF (upper)',
-    value: 'gnomadConstraints.oeLofUpper',
-    width: 100,
-    sortable: true,
-  },
-  {
-    text: 'P(HI)',
-    width: 50,
-    value: 'dbnsfp.haploinsufficiency',
-  },
-  {
-    text: 'sHet',
-    width: 100,
-    value: 'shet.s_het',
-    sortable: true,
-  },
-  {
-    text: 'pHaplo',
-    width: 100,
-    value: 'rcnv.pHaplo',
-    sortable: true,
-  },
-  {
-    text: 'pTriplo',
-    width: 100,
-    value: 'rcnv.pTriplo',
-    sortable: true,
-  },
-  {
-    text: 'CG haploin.',
-    width: 100,
-    value: 'clingen.haploSummary',
-  },
-  {
-    text: 'CG triploin.',
-    width: 100,
-    value: 'clingen.triploSummary',
-  },
-]
-
-/** The SV details store. */
-const svDetailsStore = useSvDetailsStore()
-
-/** Helper type for `resultsInfos`. */
-type ResultsInfo = {
-  isDiseaseGene: boolean
-  txEffect?: string
-}
-
-/**
- * Compute mapping from HGNC gene ID to transcript effect and disease gene property
- * so we can display the same information as in the SV results table.
- */
-const resultsInfos: ComputedRef<Map<string, ResultsInfo>> = computed(() => {
-  const result = new Map()
-  for (const txEffect of svDetailsStore.currentSvRecord?.payload?.tx_effects ??
-    []) {
-    const value: ResultsInfo = {
-      isDiseaseGene: txEffect.gene.is_disease_gene,
-      txEffect: txEffect.transcript_effects[0],
-    }
-    result.set(txEffect.gene.hgnc_id, value)
-  }
-  return result
-})
-
-/** Compute geneInfo's class. */
-const geneInfoClass = (geneInfo: any): string | undefined => {
-  const resultsInfo = resultsInfos.value.get(geneInfo.hgnc.hgnc_id)
-  if (resultsInfo?.isDiseaseGene) {
-    return 'text-danger'
-  } else {
-    return
-  }
-}
-
-/** Compute geneInfo's badge HTML (if any). */
-const geneInfoBadge = (geneInfo: any): string | undefined => {
-  const badge = (color: string, title: string, text: string): string => {
-    return `<span class="badge badge-${color}" title="${title}">${text}</span>&nbsp;`
-  }
-
-  const resultsInfo = resultsInfos.value.get(geneInfo.hgnc.hgnc_id)
-  switch (resultsInfo?.txEffect) {
-    case 'transcript_variant':
-      return badge('danger', 'whole transcript is affected', 'tx')
-    case 'exon_variant':
-      return badge('danger', 'exonic for gene', 'ex')
-    case 'splice_region_variant':
-      return badge('danger', 'affects splice region for gene', 'sr')
-    case 'intron_variant':
-      return badge('warning', 'intronic for gene', 'in')
-    case 'upstream_variant':
-      return badge('secondary', 'upstream of gene', 'up')
-    case 'downstream_variant':
-      return badge('secondary', 'downstream of gene gene', 'dw')
-    default:
-      return ''
-  }
-}
-
-const onRowClicked = (item: ClickRowArgument) => {
-  currentGeneInfos.value = item
-}
-</script>
-
-<template>
-  <div>
-    <div class="p-2">
-      <EasyDataTable
-        :headers="headers"
-        :items="props.genesInfos ?? []"
-        :loading="!props.genesInfos?.length"
-        buttons-pagination
-        show-index
-        @click-row="onRowClicked"
-      >
-        <template #empty-message>
-          <em class="ml-2 text-dark">
-            <strong>No genes available.</strong>
-          </em>
-        </template>
-        <template #item-dbnsfp.gene_name="geneInfo">
-          <span v-html="geneInfoBadge(geneInfo)" />
-          <span :class="geneInfoClass(geneInfo)">
-            {{ geneInfo.dbnsfp?.gene_name }}
-          </span>
-        </template>
-
-        <template #item-omim="{ omim }">
-          <template v-if="omim?.omim_diseases?.length">
-            <template v-for="(disease, idx) in omim?.omim_diseases">
-              <template v-if="idx > 0">, </template>
-              <a
-                :href="`https://www.omim.org/entry/${disease.omim_id.replace(
-                  'OMIM:',
-                  '',
-                )}`"
-                target="_blank"
-              >
-                {{ disease.label }}
-              </a>
-            </template>
-          </template>
-          <template v-else> &mdash; </template>
-        </template>
-
-        <template #item-orpha="{ orpha }">
-          <template v-if="orpha?.orpha_diseases?.length">
-            <template v-for="(disease, idx) in orpha?.orpha_diseases">
-              <template v-if="idx > 0">, </template>
-              <a
-                :href="`https://www.orpha.net/consor/cgi-bin/OC_Exp.php?Expert=${disease.orpha_id.replace(
-                  'ORPHA:',
-                  '',
-                )}`"
-                target="_blank"
-              >
-                {{ disease.label }}
-              </a>
-            </template>
-          </template>
-          <template v-else> &mdash; </template>
-        </template>
-
-        <template #item-gnomad_constraints.pli="{ gnomad_constraints }">
-          <template v-if="gnomad_constraints">
-            <span v-html="roundIt(gnomad_constraints.pli, 3)" />
-          </template>
-          <template v-else> &mdash; </template>
-        </template>
-
-        <template
-          #item-gnomad_constraints.oe_lof_upper="{ gnomad_constraints }"
-        >
-          <template v-if="gnomad_constraints">
-            <span v-html="roundIt(gnomad_constraints.oe_lof_upper, 3)" />
-          </template>
-          <template v-else> &mdash; </template>
-        </template>
-
-        <template #item-dbnsfp.haploinsufficiency="{ dbnsfp }">
-          <template v-if="dbnsfp?.haploinsufficiency">
-            <span v-html="roundIt(dbnsfp.haploinsufficiency, 3)" />
-          </template>
-          <template v-else> &mdash; </template>
-        </template>
-
-        <template #item-shet.s_het="{ shet }">
-          <template v-if="shet?.s_het">
-            <span v-html="roundIt(shet.s_het, 3)" />
-          </template>
-          <template v-else> &mdash; </template>
-        </template>
-
-        <template #item-rcnv.p_haplo="{ rcnv }">
-          <template v-if="rcnv?.p_haplo">
-            <span v-html="roundIt(rcnv.p_haplo, 3)" />
-          </template>
-          <template v-else> &mdash; </template>
-        </template>
-
-        <template #item-rcnv.p_triplo="{ rcnv }">
-          <template v-if="rcnv?.p_triplo">
-            <span v-html="roundIt(rcnv.p_triplo, 3)" />
-          </template>
-          <template v-else> &mdash; </template>
-        </template>
-
-        <template #item-clingen.haplo_summary="{ clingen }">
-          <template v-if="clingen?.haplo_summary">
-            <abbr :title="clingen.haplo_label">{{
-              clingen.haplo_summary
-            }}</abbr>
-          </template>
-          <template v-else> &mdash; </template>
-        </template>
-
-        <template #item-clingen.triplo_summary="{ clingen }">
-          <template v-if="clingen?.triplo_summary">
-            <abbr :title="clingen.triplo_label">{{
-              clingen.triplo_summary
-            }}</abbr>
-          </template>
-          <template v-else> &mdash; </template>
-        </template>
-      </EasyDataTable>
-    </div>
-
-    <div v-if="currentGeneInfos">
-      <div
-        class="ml-2 mr-2"
-        style="
-          font-weight: bolder;
-          font-size: 120%;
-          border-bottom: 1px solid #aaaaaa;
-        "
-      >
-        Gene Details: {{ currentGeneInfos.hgnc.symbol }}
-      </div>
-      <VariantDetailsGene :gene="currentGeneInfos" :gene-clinvar="undefined" />
-    </div>
-    <div v-else class="text-muted text-center font-italic pt-2">
-      Select gene in table above to see details.
-    </div>
-  </div>
-</template>
diff --git a/svs/vueapp/src/components/SvDetails/GenotypeCall.vue b/svs/vueapp/src/components/SvDetails/GenotypeCall.vue
deleted file mode 100644
index 7a86eb9ff..000000000
--- a/svs/vueapp/src/components/SvDetails/GenotypeCall.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<script setup>
-import { computed } from 'vue'
-
-import { displayName } from '@varfish/helpers'
-
-const props = defineProps({
-  currentSvRecord: Object,
-})
-
-const GT_FIELDS = Object.freeze({
-  quality: { label: 'genotype quality' },
-  genotype: { label: 'genotype call' },
-  paired_end_cov: { label: 'total read pairs' },
-  paired_end_var: { label: 'variant read pairs' },
-  split_read_cov: { label: 'total split-reads' },
-  split_read_var: { label: 'variant split reads' },
-  point_count: { label: 'number of bins/targets' },
-  average_normalized_cov: { label: 'average normalized coverage' },
-  average_mapping_quality: { label: 'average mapping quality' },
-  matched_gt_criteria: {
-    label: 'matched genotype criteria',
-    fmt: (arr) => arr.join(', '),
-  },
-  effective_genotype: { label: 'effective genotype' },
-})
-
-const identity = (x) => x
-
-const allKeys = computed(() => {
-  if (!props.currentSvRecord?.payload?.call_info) {
-    return []
-  }
-
-  let tmp = []
-  for (const call_info of Object.values(
-    props.currentSvRecord.payload.call_info,
-  )) {
-    tmp = tmp.concat(
-      Object.entries(call_info)
-        .filter(([_, value]) => value !== null)
-        .map(([key, _]) => key),
-    )
-  }
-  const result = Array.from(new Set(tmp))
-  result.sort()
-  return result
-})
-</script>
-
-<template>
-  <div class="card">
-    <table v-if="currentSvRecord" class="table table-striped table-hover">
-      <thead>
-        <tr>
-          <th>Sample</th>
-
-          <template v-for="(_, sample) in currentSvRecord.payload.call_info">
-            <th>
-              {{ displayName(sample) }}
-            </th>
-          </template>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="key in allKeys">
-          <th>{{ GT_FIELDS[key]?.label ?? key }}</th>
-          <td v-for="genotype in currentSvRecord.payload.call_info">
-            {{ (GT_FIELDS[key]?.fmt ?? identity)(genotype[key]) }}
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</template>
diff --git a/svs/vueapp/src/components/SvDetails/Header.vue b/svs/vueapp/src/components/SvDetails/Header.vue
deleted file mode 100644
index 58d36c9a5..000000000
--- a/svs/vueapp/src/components/SvDetails/Header.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useRouter } from 'vue-router'
-
-import { formatLargeInt } from '@varfish/helpers'
-import UiToggleMaxButton from '@varfish/components/UiToggleMaxButton/UiToggleMaxButton.vue'
-
-const props = defineProps<{
-  case?: any
-  svRecord?: any
-}>()
-
-const router = useRouter()
-
-const svLabel = computed(() => {
-  if (props.svRecord) {
-    const start = formatLargeInt(props.svRecord.start)
-    const end = formatLargeInt(props.svRecord.end)
-    const result = `${props.svRecord.chromosome}:${start}-${end}:${props.svRecord.sv_type}`
-    if (!result.startsWith('chr')) {
-      return `chr${result}`
-    } else {
-      return result
-    }
-  }
-})
-</script>
-
-<template>
-  <div class="row sodar-pr-content-title pb-1" tabindex="0">
-    <h2 class="sodar-pr-content-title">
-      SV Details for
-      <template v-if="props.svRecord">
-        <code>{{ svLabel }}</code>
-      </template>
-      <span v-else>
-        ...
-        <i-fa-solid-circle-notch class="spin" />
-      </span>
-    </h2>
-
-    <div class="ml-auto btn-group">
-      <UiToggleMaxButton />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.spin {
-  animation-name: spin;
-  animation-duration: 2000ms;
-  animation-iteration-count: infinite;
-  animation-timing-function: linear;
-}
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-</style>
diff --git a/svs/vueapp/src/components/SvFilterApp.vue b/svs/vueapp/src/components/SvFilterApp.vue
index 87f3d4831..755cde9f7 100644
--- a/svs/vueapp/src/components/SvFilterApp.vue
+++ b/svs/vueapp/src/components/SvFilterApp.vue
@@ -35,7 +35,7 @@ const svResultSetStore = useSvResultSetStore()
 
 const showDetails = async (event) => {
   router.push({
-    name: 'sv-details',
+    name: 'strucvar-details',
     params: {
       row: event.svresultrow,
       selectedSection: event.selectedSection ?? null,
diff --git a/svs/vueapp/src/views/StrucvarDetails/StrucvarDetails.vue b/svs/vueapp/src/views/StrucvarDetails/StrucvarDetails.vue
new file mode 100644
index 000000000..153397dc2
--- /dev/null
+++ b/svs/vueapp/src/views/StrucvarDetails/StrucvarDetails.vue
@@ -0,0 +1,300 @@
+<script setup lang="ts">
+/**
+ * Detailed display of strucvar information.
+ *
+ * Used in the strucvar filtration app and displayed when the user selects a variant to display
+ * the details for.
+ *
+ * Also used in the case details view for displaying all user-annotated variants.
+ *
+ * See `SeqvarDetails` for a peer app for sequence variants
+ */
+
+import { onMounted, watch, ref, computed } from 'vue'
+import { svLocus } from './lib'
+
+import { useSvDetailsStore } from '@svs/stores/svDetails'
+import { useSvFlagsStore } from '@svs/stores/svFlags'
+import { useSvCommentsStore } from '@svs/stores/svComments'
+import { useSvResultSetStore } from '@svs/stores/svResultSet'
+import { useStrucvarInfoStore } from '@bihealth/reev-frontend-lib/stores/strucvarInfo'
+
+import StrucvarDetailsNavi from '@svs/components/StrucvarDetailsNavi/StrucvarDetailsNavi.vue'
+import StrucvarDetailsHeader from '@svs/components/StrucvarDetailsHeader/StrucvarDetailsHeader.vue'
+import StrucvarGenotypeCallCard from '@svs/components/StrucvarGenotypeCallCard/StrucvarGenotypeCallCard.vue'
+
+import {
+  BreakendStrucvarImpl,
+  LinearStrucvarImpl,
+  Strucvar,
+} from '@bihealth/reev-frontend-lib/lib/genomicVars'
+import StrucvarGeneListCard from '@bihealth/reev-frontend-lib/components/StrucvarGeneListCard/StrucvarGeneListCard.vue'
+import { useGeneInfoStore } from '@bihealth/reev-frontend-lib/stores/geneInfo'
+import GeneOverviewCard from '@bihealth/reev-frontend-lib/components/GeneOverviewCard/GeneOverviewCard.vue'
+import GenePathogenicityCard from '@bihealth/reev-frontend-lib/components/GenePathogenicityCard/GenePathogenicityCard.vue'
+import GeneConditionsCard from '@bihealth/reev-frontend-lib/components/GeneConditionsCard/GeneConditionsCard.vue'
+import GeneExpressionCard from '@bihealth/reev-frontend-lib/components/GeneExpressionCard/GeneExpressionCard.vue'
+import GeneClinvarCard from '@bihealth/reev-frontend-lib/components/GeneClinvarCard/GeneClinvarCard.vue'
+import GeneLiteratureCard from '@bihealth/reev-frontend-lib/components/GeneLiteratureCard/GeneLiteratureCard.vue'
+import StrucvarClinvarCard from '@bihealth/reev-frontend-lib/components/StrucvarClinvarCard/StrucvarClinvarCard.vue'
+import StrucvarToolsCard from '@bihealth/reev-frontend-lib/components/StrucvarToolsCard/StrucvarToolsCard.vue'
+import GenomeBrowserCard from '@bihealth/reev-frontend-lib/components/GenomeBrowserCard/GenomeBrowserCard.vue'
+
+const props = defineProps<{
+  /** UUID of the result row to display. */
+  resultRowUuid?: string
+  /** Identifier of the selected section. */
+  selectedSection?: string
+}>()
+
+/** Obtain global application content (as for all entry level components) */
+const appContext = JSON.parse(
+  document
+    .getElementById('sodar-ss-app-context')
+    ?.getAttribute('app-context') ?? '{}',
+)
+
+// Store-related
+
+/** Information about the strucvar, used to fetch information on load. */
+const strucvarInfoStore = useStrucvarInfoStore()
+/** Information about the genes. */
+const geneInfoStore = useGeneInfoStore()
+
+/** Management of strucvar results ets. */
+const svResultSetStore = useSvResultSetStore()
+/** Management of strucvar details. */
+const svDetailsStore = useSvDetailsStore()
+/** Management of strucvar flags. */
+const svFlagsStore = useSvFlagsStore()
+/** Management of strucvar comments. */
+const svCommentsStore = useSvCommentsStore()
+
+/** Component state; HGNC identifier of selected gene. */
+const selectedGeneHgncId = ref<string | undefined>(undefined)
+/** Selected gene information. */
+const selectedGeneInfo = computed<any | undefined>(() => {
+  return (strucvarInfoStore.genesInfos || []).find((geneInfo) => {
+    return geneInfo.hgnc?.hgncId === selectedGeneHgncId.value
+  })
+})
+
+/**
+ * Load data for the given gene into the gene info store.
+ *
+ * This is done every time the user selects a new gene.
+ */
+const loadGeneToStore = async (hgncId: string) => {
+  if (strucvarInfoStore.strucvar !== undefined) {
+    await geneInfoStore.initialize(
+      hgncId,
+      strucvarInfoStore.strucvar.genomeBuild,
+    )
+  }
+}
+
+/** Refresh the stores. */
+const refreshStores = async () => {
+  if (props.resultRowUuid && props.selectedSection) {
+    await svResultSetStore.initialize(appContext.csrf_token)
+    await svResultSetStore.fetchResultSetViaRow(props.resultRowUuid)
+    if (!svResultSetStore.caseUuid) {
+      throw new Error('caseUuid not set')
+    }
+    let strucvar: Strucvar
+    if (svResultSetStore.resultRow.sv_type === 'BND') {
+      strucvar = new BreakendStrucvarImpl(
+        svResultSetStore.resultRow.release === 'GRCh37' ? 'grch37' : 'grch38',
+        svResultSetStore.resultRow.chromosome.replace('chr', ''),
+        svResultSetStore.resultRow.chromosome2.replace('chr', ''),
+        svResultSetStore.resultRow.start,
+        svResultSetStore.resultRow.end,
+      )
+    } else {
+      strucvar = new LinearStrucvarImpl(
+        svResultSetStore.resultRow.sv_type,
+        svResultSetStore.resultRow.release === 'GRCh37' ? 'grch37' : 'grch38',
+        svResultSetStore.resultRow.chromosome,
+        svResultSetStore.resultRow.start,
+        svResultSetStore.resultRow.end,
+      )
+    }
+    await Promise.all([
+      strucvarInfoStore.initialize(strucvar),
+      svFlagsStore.initialize(
+        appContext.csrf_token,
+        appContext.project?.sodar_uuid,
+        svResultSetStore.caseUuid,
+      ),
+      svCommentsStore.initialize(
+        appContext.csrf_token,
+        appContext.project?.sodar_uuid,
+        svResultSetStore.caseUuid,
+      ),
+      svDetailsStore.initialize(
+        appContext.csrf_token,
+        appContext.project?.sodar_uuid,
+        svResultSetStore.caseUuid,
+      ),
+    ])
+    svDetailsStore.fetchSvDetails(svResultSetStore.resultRow)
+  }
+
+  document.querySelector(`#${props.selectedSection}`)?.scrollIntoView()
+}
+
+/** Watch change in properties to reload data. */
+watch(
+  () => [props.resultRowUuid, props.selectedSection],
+  () => {
+    refreshStores()
+  },
+)
+
+/** When mounted, scroll to the selected element if any.
+ */
+onMounted(() => {
+  refreshStores()
+  document.querySelector(`#${props.selectedSection}`)?.scrollIntoView()
+})
+
+// Watch changes of selected HGNC ID and load gene.
+watch(
+  () => selectedGeneHgncId.value,
+  async (newHgncId: string | undefined) => {
+    if (newHgncId !== undefined) {
+      await loadGeneToStore(newHgncId)
+      document.querySelector(`#gene-overview`)?.scrollIntoView()
+    }
+  },
+)
+</script>
+
+<template>
+  <v-app>
+    <v-main>
+      <v-container fluid class="pa-0">
+        <v-row no-gutters>
+          <v-col cols="2" class="pr-3">
+            <div style="position: sticky; top: 20px">
+              <StrucvarDetailsNavi
+                :strucvar="strucvarInfoStore.strucvar"
+                :case-uuid="svResultSetStore.caseUuid ?? undefined"
+              />
+            </div>
+          </v-col>
+          <v-col cols="10">
+            <div id="top" class="mt-6 mb-3 ml-1">
+              <StrucvarDetailsHeader
+                :strucvar="strucvarInfoStore.strucvar"
+                :result-row-payload="svResultSetStore?.resultRow?.payload"
+              />
+            </div>
+            <div id="gene-list">
+              <StrucvarGeneListCard
+                v-model:selected-gene-hgnc-id="selectedGeneHgncId"
+                :current-strucvar-record="strucvarInfoStore.strucvar"
+                :csq="strucvarInfoStore.csq"
+                :genes-infos="strucvarInfoStore.genesInfos"
+                :store-state="strucvarInfoStore.storeState"
+                entry-column-width="260px"
+              />
+            </div>
+            <template v-if="!selectedGeneInfo">
+              <div class="text-h5 mt-2 mb-3 ml-1">No Gene</div>
+            </template>
+            <template v-else>
+              <div class="text-h5 mt-3 mb-2 ml-1">
+                Gene
+                <span class="font-italic">
+                  {{ selectedGeneInfo?.hgnc!.symbol }}
+                </span>
+              </div>
+              <div id="gene-overview" class="mt-3">
+                <GeneOverviewCard :gene-info="selectedGeneInfo" />
+              </div>
+              <div id="gene-pathogenicity" class="mt-3">
+                <GenePathogenicityCard :gene-info="selectedGeneInfo" />
+              </div>
+              <div id="gene-conditions" class="mt-3">
+                <GeneConditionsCard :gene-info="selectedGeneInfo">
+                  <!-- <CadaRanking :hgnc-id="geneInfoStore.geneInfo?.hgnc!.hgncId" /> -->
+                </GeneConditionsCard>
+              </div>
+              <div id="gene-expression" class="mt-3">
+                <GeneExpressionCard
+                  :gene-symbol="selectedGeneInfo?.hgnc?.symbol"
+                  :expression-records="selectedGeneInfo?.gtex?.records"
+                  :ensembl-gene-id="selectedGeneInfo?.gtex?.ensemblGeneId"
+                />
+              </div>
+              <div
+                v-if="geneInfoStore?.geneClinvar"
+                id="gene-clinvar"
+                class="mt-3"
+              >
+                <GeneClinvarCard
+                  :clinvar-per-gene="geneInfoStore.geneClinvar"
+                  :transcripts="geneInfoStore.transcripts"
+                  :genome-build="strucvarInfoStore.strucvar?.genomeBuild"
+                  :gene-info="geneInfoStore.geneInfo"
+                  :per-freq-counts="geneInfoStore?.geneClinvar?.perFreqCounts"
+                />
+              </div>
+              <div id="gene-literature" class="mt-3">
+                <GeneLiteratureCard :gene-info="geneInfoStore.geneInfo" />
+              </div>
+            </template>
+
+            <div>
+              <div class="text-h5 mt-3 mb-2 ml-1">
+                Structural Variant Details
+              </div>
+
+              <div id="strucvar-calldetails" class="mt-3">
+                <StrucvarGenotypeCallCard
+                  :result-row="svResultSetStore.resultRow ?? undefined"
+                />
+              </div>
+              <div id="strucvar-clinvar" class="mt-3">
+                <StrucvarClinvarCard
+                  :strucvar="strucvarInfoStore.strucvar"
+                  :clinvar-sv-records="strucvarInfoStore.clinvarSvRecords"
+                />
+              </div>
+              <div id="strucvar-tools" class="mt-3">
+                <StrucvarToolsCard :strucvar="strucvarInfoStore.strucvar" />
+              </div>
+              <div id="strucvar-flags" class="mt-3">
+                <!-- <ClinsigCard :strucvar="strucvarInfoStore.strucvar" @error-display="handleDisplayError" /> -->
+              </div>
+              <div id="seqvar-comments" class="mt-3">
+                <!-- <ClinvarsubCard :strucvar="strucvarInfoStore.strucvar" /> -->
+              </div>
+              <div id="strucvar-genomebrowser">
+                <GenomeBrowserCard
+                  :genome-build="strucvarInfoStore.strucvar?.genomeBuild"
+                  :locus="svLocus(strucvarInfoStore.strucvar) as string"
+                />
+              </div>
+            </div>
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-main>
+  </v-app>
+</template>
+
+<style>
+/** Adjust styles in StrucvarGeneListCard to fix leaking bootstrap4 styles. */
+#gene-list
+  > div
+  > div.v-card-text
+  > div
+  > div
+  > div
+  > div.v-col.v-col-10.d-flex.flex-column.pa-0
+  > div {
+  margin: 10px;
+}
+</style>
diff --git a/svs/vueapp/src/views/StrucvarDetails/lib.ts b/svs/vueapp/src/views/StrucvarDetails/lib.ts
new file mode 100644
index 000000000..30d3fbad3
--- /dev/null
+++ b/svs/vueapp/src/views/StrucvarDetails/lib.ts
@@ -0,0 +1,31 @@
+import { Strucvar } from '@bihealth/reev-frontend-lib/lib/genomicVars'
+
+// Pretty display of coordinates.
+export const svLocus = (strucvar?: Strucvar): string | undefined => {
+  if (strucvar === undefined) {
+    return undefined
+  }
+
+  let locus: string = ''
+  switch (strucvar.svType) {
+    case 'INS':
+      locus = `${strucvar.chrom}:${strucvar.start}-${strucvar.start}`
+      break
+    case 'DEL':
+    case 'DUP':
+    case 'INV':
+      locus = `${strucvar.chrom}:${strucvar.start - 1000}-${strucvar.stop + 1000}`
+      break
+    case 'BND':
+      locus = `${strucvar.chrom}:${strucvar.start - 1000}-${strucvar.start + 1000}`
+      break
+  }
+  if (locus === '') {
+    return undefined
+  }
+
+  if (strucvar.genomeBuild === 'grch38') {
+    locus = `chr${locus}`
+  }
+  return locus
+}
diff --git a/varfish/vueapp/ext/reev-frontend-lib b/varfish/vueapp/ext/reev-frontend-lib
index c6267b24c..4f349ce26 160000
--- a/varfish/vueapp/ext/reev-frontend-lib
+++ b/varfish/vueapp/ext/reev-frontend-lib
@@ -1 +1 @@
-Subproject commit c6267b24cf038ccce28376f8ea3bc60342d1b44b
+Subproject commit 4f349ce26eebc877fa875fb60bb17c07418aa59b
diff --git a/variants/vueapp/src/components/SeqvarDetailsNavi/constants.ts b/variants/vueapp/src/components/SeqvarDetailsNavi/constants.ts
index cf5fe16ba..f03978213 100644
--- a/variants/vueapp/src/components/SeqvarDetailsNavi/constants.ts
+++ b/variants/vueapp/src/components/SeqvarDetailsNavi/constants.ts
@@ -1,7 +1,7 @@
-import { Section } from './types'
+import { NavItem } from './types'
 
 /** Sections in the navigation. */
-export const SECTIONS: { [key: string]: Section[] } = {
+export const SECTIONS: { [key: string]: NavItem[] } = {
   GENE: [
     { id: 'gene-overview', title: 'Overview' },
     { id: 'gene-pathogenicity', title: 'Pathogenicity' },
@@ -11,6 +11,7 @@ export const SECTIONS: { [key: string]: Section[] } = {
     { id: 'gene-literature', title: 'Literature' },
   ],
   SEQVAR: [
+    { id: 'seqvar-calldetails', title: 'Call Details' },
     { id: 'seqvar-csq', title: 'Consequences' },
     { id: 'seqvar-clinvar', title: 'ClinVar' },
     { id: 'seqvar-scores', title: 'Scores' },
diff --git a/variants/vueapp/src/components/SeqvarDetailsNavi/types.ts b/variants/vueapp/src/components/SeqvarDetailsNavi/types.ts
index 83f92a732..696ad62ea 100644
--- a/variants/vueapp/src/components/SeqvarDetailsNavi/types.ts
+++ b/variants/vueapp/src/components/SeqvarDetailsNavi/types.ts
@@ -1,5 +1,4 @@
-/** Data type for `SECTIONS` below. */
-export interface Section {
+export interface NavItem {
   id: string
   title: string
 }
diff --git a/variants/vueapp/src/components/VariantDetails/CallDetails.stories.js b/variants/vueapp/src/components/SeqvarGenotypeCallCard/SeqvarGenotypeCallCard.stories.js
similarity index 69%
rename from variants/vueapp/src/components/VariantDetails/CallDetails.stories.js
rename to variants/vueapp/src/components/SeqvarGenotypeCallCard/SeqvarGenotypeCallCard.stories.js
index 11d5ec7e2..7c3da4d00 100644
--- a/variants/vueapp/src/components/VariantDetails/CallDetails.stories.js
+++ b/variants/vueapp/src/components/SeqvarGenotypeCallCard/SeqvarGenotypeCallCard.stories.js
@@ -1,19 +1,19 @@
-import VariantDetailsCallDetails from '@variants/components/VariantDetails/CallDetails.vue'
+import SeqvarGenotypeCallCard from '@variants/components/SeqvarGenotypeCallCard/SeqvarGenotypeCallCard.vue'
 import trioCaseData from '@variantsTest/data/case-trio.json'
 import trioVariantsData from '@variantsTest/data/variants-trio.json'
 
 export default {
   title: 'Variants / Small Variant Details Calls',
-  component: VariantDetailsCallDetails,
+  component: SeqvarGenotypeCallCard,
 }
 
 const Template = (args) => ({
-  components: { VariantDetailsCallDetails },
+  components: { SeqvarGenotypeCallCard },
   setup() {
     return { args }
   },
   template:
-    '<VariantDetailsCallDetails\n' +
+    '<SeqvarGenotypeCallCard\n' +
     '    :case-description="args.case"\n' +
     '    :small-variant="args.smallVariant"\n' +
     '/>',
diff --git a/variants/vueapp/src/components/SeqvarGenotypeCallCard/SeqvarGenotypeCallCard.vue b/variants/vueapp/src/components/SeqvarGenotypeCallCard/SeqvarGenotypeCallCard.vue
new file mode 100644
index 000000000..56cab247a
--- /dev/null
+++ b/variants/vueapp/src/components/SeqvarGenotypeCallCard/SeqvarGenotypeCallCard.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { displayName } from '@varfish/helpers'
+import { roundIt } from '@bihealth/reev-frontend-lib/lib/utils'
+
+import { ResultRow } from './types'
+import { allelicBalance } from './lib'
+
+/** This component's props. */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const props = defineProps<{
+  /** Small variant to display for. */
+  resultRow?: ResultRow
+}>()
+</script>
+
+<template>
+  <template v-if="!resultRow || !resultRow.payload">
+    <v-skeleton-loader type="card" />
+  </template>
+  <template v-else>
+    <v-card>
+      <v-card-title class="pb-0 pr-2">
+        Genotype Info
+        <!-- <DocsLink anchor="genotype-info" /> -->
+      </v-card-title>
+
+      <v-card-subtitle class="text-overline">
+        Detailed Information on Genotype Calls
+      </v-card-subtitle>
+      <v-card-text class="pt-3">
+        <v-table>
+          <thead>
+            <tr>
+              <th class="font-weight-bold">Sample</th>
+              <template
+                v-for="sample in Object.keys(resultRow.payload.genotype)"
+              >
+                <th class="font-weight-bold">
+                  {{ displayName(sample) }}
+                </th>
+              </template>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <th>Genotype</th>
+              <td
+                v-for="(genotype, index) in Object.values(
+                  resultRow.payload.genotype,
+                )"
+                :key="index"
+              >
+                {{ genotype.gt }}
+              </td>
+            </tr>
+            <tr>
+              <th>Coverage (DP)</th>
+              <td
+                v-for="(genotype, index) in Object.values(
+                  resultRow.payload.genotype,
+                )"
+                :key="index"
+              >
+                {{ genotype.dp ?? 'N/A' }}
+              </td>
+            </tr>
+            <tr>
+              <th>Coverage (AD)</th>
+              <td
+                v-for="(genotype, index) in Object.values(
+                  resultRow.payload.genotype,
+                )"
+                :key="index"
+              >
+                {{ genotype.ad ?? 'N/A' }}
+              </td>
+            </tr>
+            <tr>
+              <th>Allelic Balance</th>
+              <td
+                v-for="(genotype, index) in Object.values(
+                  resultRow.payload.genotype,
+                )"
+                :key="index"
+              >
+                <!-- eslint-disable vue/no-v-html -->
+                <span v-html="roundIt(allelicBalance(genotype))" />
+                <!-- eslint-enable -->
+              </td>
+            </tr>
+          </tbody>
+        </v-table>
+      </v-card-text>
+    </v-card>
+  </template>
+</template>
diff --git a/variants/vueapp/src/components/SeqvarGenotypeCallCard/lib.ts b/variants/vueapp/src/components/SeqvarGenotypeCallCard/lib.ts
new file mode 100644
index 000000000..27e9bc92e
--- /dev/null
+++ b/variants/vueapp/src/components/SeqvarGenotypeCallCard/lib.ts
@@ -0,0 +1,9 @@
+import { GenotypeValue } from './types'
+
+export const allelicBalance = (value?: GenotypeValue) => {
+  if (!value || !value?.dp || !value?.ad) {
+    return 0.0
+  } else {
+    return value.ad / value.dp
+  }
+}
diff --git a/variants/vueapp/src/components/SeqvarGenotypeCallCard/types.ts b/variants/vueapp/src/components/SeqvarGenotypeCallCard/types.ts
new file mode 100644
index 000000000..58d2fe3eb
--- /dev/null
+++ b/variants/vueapp/src/components/SeqvarGenotypeCallCard/types.ts
@@ -0,0 +1,16 @@
+export interface GenotypeValue {
+  gt: string
+  dp?: number
+  ad?: number
+  gq?: number
+}
+
+export type Genotype = { [key: string]: GenotypeValue }
+
+export interface Payload {
+  genotype: Genotype
+}
+
+export interface ResultRow {
+  payload: Payload
+}
diff --git a/variants/vueapp/src/components/VariantDetails/CallDetails.vue b/variants/vueapp/src/components/VariantDetails/CallDetails.vue
deleted file mode 100644
index 08bc01e48..000000000
--- a/variants/vueapp/src/components/VariantDetails/CallDetails.vue
+++ /dev/null
@@ -1,162 +0,0 @@
-<script setup>
-import { displayName } from '@varfish/helpers'
-
-const props = defineProps({
-  /** Case description object. */
-  // eslint-disable-next-line vue/require-default-prop
-  caseDescription: Object,
-  /** Small variant to display for. */
-  // eslint-disable-next-line vue/require-default-prop
-  smallVariant: Object,
-})
-
-const allelicBalance = (value) => {
-  if (!value.dp || !value.ad) {
-    return 0.0
-  } else {
-    return value.ad / value.dp
-  }
-}
-</script>
-
-<template>
-  <div>
-    <table
-      v-if="props.caseDescription && props.smallVariant"
-      class="card-body table table-striped table-sm"
-    >
-      <thead>
-        <tr>
-          <th class="text-center">Sample</th>
-          <th
-            v-for="(member, index) in props.caseDescription.pedigree"
-            :key="index"
-            class="text-center"
-          >
-            {{ displayName(member.name) }}
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <th class="text-center">Genotype</th>
-          <td
-            v-for="(member, index) in props.caseDescription.pedigree"
-            :key="index"
-            class="text-center"
-          >
-            <span
-              v-if="!(member.name in props.smallVariant.genotype)"
-              title="Info for the admin: the individual has no genotype information for this variant."
-            >
-              <i-mdi-do-not-disturb-on />
-            </span>
-            <span
-              v-else-if="!('gt' in props.smallVariant.genotype[member.name])"
-              title="Info for the admin: the `gt` field in the genotype information of the individual is missing."
-            >
-              <i-mdi-do-not-disturb-on />
-              <em><sup>gt</sup></em>
-            </span>
-            <template v-else>
-              {{ props.smallVariant.genotype[member.name].gt }}
-            </template>
-          </td>
-        </tr>
-        <tr>
-          <th class="text-center">Coverage (DP)</th>
-          <template
-            v-for="(member, index) in props.caseDescription.pedigree"
-            :key="index"
-          >
-            <td
-              v-if="!(member.name in props.smallVariant.genotype)"
-              title="Info for the admin: the individual has no genotype information for this variant."
-              class="text-center"
-            >
-              <i-mdi-do-not-disturb-on />
-            </td>
-            <td
-              v-else-if="!('dp' in props.smallVariant.genotype[member.name])"
-              title="Info for the admin: the `dp` field in the genotype information of the individual is missing."
-              class="text-center"
-            >
-              <i-mdi-do-not-disturb-on />
-              <em><sup>dp</sup></em>
-            </td>
-            <template v-else>
-              <td
-                v-if="props.smallVariant.genotype[member.name].dp === -1"
-                class="text-center"
-              >
-                .
-              </td>
-              <td v-else class="text-center">
-                {{ props.smallVariant.genotype[member.name].dp }}
-              </td>
-            </template>
-          </template>
-        </tr>
-        <tr>
-          <th class="text-center">Alt. Depth (AD)</th>
-          <template
-            v-for="(member, index) in props.caseDescription.pedigree"
-            :key="index"
-          >
-            <td
-              v-if="!(member.name in props.smallVariant.genotype)"
-              title="Info for the admin: the individual has no genotype information for this variant."
-              class="text-center"
-            >
-              <i-mdi-do-not-disturb-on />
-            </td>
-            <td
-              v-else-if="!('ad' in props.smallVariant.genotype[member.name])"
-              title="Info for the admin: the `dp` field in the genotype information of the individual is missing."
-              class="text-center"
-            >
-              <i-mdi-do-not-disturb-on />
-              <em><sup>ad</sup></em>
-            </td>
-            <template v-else>
-              <td
-                v-if="props.smallVariant.genotype[member.name].ad === -1"
-                class="text-center"
-              >
-                .
-              </td>
-              <td v-else class="text-center">
-                {{ props.smallVariant.genotype[member.name].ad }}
-              </td>
-            </template>
-          </template>
-        </tr>
-        <tr>
-          <th class="text-center">Allelic Balance</th>
-          <template
-            v-for="(member, index) in props.caseDescription.pedigree"
-            :key="index"
-          >
-            <td
-              v-if="!(member.name in props.smallVariant.genotype)"
-              title="Info for the admin: the individual has no genotype information for this variant."
-              class="text-center"
-            >
-              <i-mdi-do-not-disturb-on />
-            </td>
-            <td v-else class="text-center">
-              {{
-                allelicBalance(
-                  props.smallVariant.genotype[member.name],
-                ).toFixed(2)
-              }}
-            </td>
-          </template>
-        </tr>
-      </tbody>
-    </table>
-    <div v-else class="card-body text-center font-italic pb-2 text-muted">
-      No genotype information available.
-    </div>
-  </div>
-</template>
diff --git a/variants/vueapp/src/views/SeqvarDetails/SeqvarDetails.vue b/variants/vueapp/src/views/SeqvarDetails/SeqvarDetails.vue
index 9d07b454a..03bb2e99f 100644
--- a/variants/vueapp/src/views/SeqvarDetails/SeqvarDetails.vue
+++ b/variants/vueapp/src/views/SeqvarDetails/SeqvarDetails.vue
@@ -7,7 +7,7 @@
  *
  * Also used in the case details view for displyaing all user-annotated variants.
  *
- * See `SvDetails` for a peer app for structural variants
+ * See `StrucvarDetails` for a peer app for structural variants
  */
 
 import { computed, onMounted } from 'vue'
@@ -23,6 +23,7 @@ import { useVariantResultSetStore } from '@variants/stores/variantResultSet'
 import CommentsCard from '@varfish/components/CommentsCard/CommentsCard.vue'
 import FlagsCard from '@varfish/components/FlagsCard/FlagsCard.vue'
 
+import SeqvarGenotypeCallCard from '@variants/components/SeqvarGenotypeCallCard/SeqvarGenotypeCallCard.vue'
 import SeqvarDetailsHeader from '@variants/components/SeqvarDetailsHeader/SeqvarDetailsHeader.vue'
 import SeqvarDetailsNavi from '@variants/components/SeqvarDetailsNavi/SeqvarDetailsNavi.vue'
 import AcmgRatingCard from '@variants/components/AcmgRatingCard/AcmgRatingCard.vue'
@@ -190,9 +191,7 @@ onMounted(() => {
                 <GeneOverviewCard :gene-info="seqvarInfoStore?.geneInfo" />
               </div>
               <div id="gene-pathogenicity" class="mt-3">
-                <GenePathogenicityCard :gene-info="seqvarInfoStore?.geneInfo">
-                  <!-- <CadaRanking :hgnc-id="geneInfoStore.geneInfo?.hgnc!.hgncId" /> -->
-                </GenePathogenicityCard>
+                <GenePathogenicityCard :gene-info="seqvarInfoStore?.geneInfo" />
               </div>
               <div id="gene-conditions" class="mt-3">
                 <GeneConditionsCard
@@ -232,6 +231,11 @@ onMounted(() => {
             </template>
             <template v-else>
               <div class="text-h5 mt-6 mb-3 ml-1">Variant Details</div>
+              <div id="seqvar-calldetails" class="mt-3">
+                <SeqvarGenotypeCallCard
+                  :result-row="variantResultSetStore.resultRow"
+                />
+              </div>
               <div id="seqvar-csq" class="mt-3">
                 <SeqvarConsequencesCard :consequences="seqvarInfoStore.txCsq" />
               </div>