diff --git a/frontend/src/api/__tests__/dotty.spec.ts b/frontend/src/api/__tests__/dotty.spec.ts
index 10dcfde9..2fed9053 100644
--- a/frontend/src/api/__tests__/dotty.spec.ts
+++ b/frontend/src/api/__tests__/dotty.spec.ts
@@ -28,4 +28,20 @@ describe.concurrent('DottyClient', () => {
 
     expect(result).toEqual(mockData)
   })
+
+  it('should load transcripts successfully', async () => {
+    const mockData = {
+      transcripts: {
+        'HGNC:1100': {
+          gene: 'info'
+        }
+      }
+    }
+    fetchMocker.mockResponseOnce(JSON.stringify(mockData), { status: 200 })
+
+    const client = new DottyClient()
+    const result = await client.fetchTranscripts('HGNC:1100', 'GRCh37')
+
+    expect(result).toEqual(mockData)
+  })
 })
diff --git a/frontend/src/api/dotty.ts b/frontend/src/api/dotty.ts
index 3b7bf6ed..140fc29f 100644
--- a/frontend/src/api/dotty.ts
+++ b/frontend/src/api/dotty.ts
@@ -42,4 +42,19 @@ export class DottyClient {
       return null
     }
   }
+
+  async fetchTranscripts(
+    hgnc_id: string,
+    assembly: 'GRCh37' | 'GRCh38' = 'GRCh38'
+  ): Promise<any | null> {
+    const url = `${API_INTERNAL_BASE_PREFIX_DOTTY}/api/v1/find-transcripts?hgnc_id=${hgnc_id}&assembly=${assembly}`
+    const response = await fetch(url, {
+      method: 'GET'
+    })
+    if (response.status == 200) {
+      return await response.json()
+    } else {
+      return null
+    }
+  }
 }
diff --git a/frontend/src/components/VariantDetails/VariationLandscape.vue b/frontend/src/components/VariationLandscape.vue
similarity index 82%
rename from frontend/src/components/VariantDetails/VariationLandscape.vue
rename to frontend/src/components/VariationLandscape.vue
index eedd1ab9..00ac69aa 100644
--- a/frontend/src/components/VariantDetails/VariationLandscape.vue
+++ b/frontend/src/components/VariationLandscape.vue
@@ -6,16 +6,19 @@ import VegaPlot from '@/components/VegaPlot.vue'
 export interface Props {
   /** Gene information from annonars. */
   clinvar: any
+  /** Transctipts information. */
+  transcripts: any
   /** The genome release. */
   genomeRelease: string
-  /** The gene symbol. */
-  geneSymbol: string
+  /** The gene HGNC symbol. */
+  hgnc: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
   clinvar: null,
+  transcripts: null,
   genomeRelease: 'grch37',
-  geneSymbol: ''
+  hgnc: ''
 })
 
 const clinvarSignificanceMapping: Record<number, number> = {
@@ -45,6 +48,54 @@ const convertClinvarSignificance = (input: number): number => {
   }
 }
 
+const minMax = computed(() => {
+  if (!props.clinvar) {
+    return []
+  }
+  let min = null
+  let max = null
+  for (const item of props.clinvar.variants ?? []) {
+    if (item.genome_release.toLowerCase() == props.genomeRelease) {
+      // Go through all item.variants and find the min and max pos.
+      for (const variant of item.variants) {
+        if (variant.pos < min || min == null) {
+          min = variant.pos
+        }
+        if (variant.pos > max || max == null) {
+          max = variant.pos
+        }
+      }
+    }
+  }
+  for (const exon of exons.value) {
+    if (exon.start < min || min == null) {
+      min = exon.start
+    }
+    if (exon.stop > max || max == null) {
+      max = exon.stop
+    }
+  }
+  return [min, max]
+})
+
+const exons = computed(() => {
+  if (!props.transcripts) {
+    return []
+  }
+  const exons = []
+  for (const transcript of props.transcripts.transcripts) {
+    for (const alignment of transcript.alignments) {
+      for (const exon of alignment.exons) {
+        exons.push({
+          start: exon.ref_start,
+          stop: exon.ref_end
+        })
+      }
+    }
+  }
+  return exons
+})
+
 const vegaData = computed(() => {
   if (!props.clinvar) {
     return []
@@ -100,7 +151,7 @@ const vegaLayer = [
       x: {
         field: 'pos',
         type: 'quantitative',
-        scale: { domain: [41190000, 41282000] },
+        scale: { domain: minMax.value },
         axis: { grid: false, zindex: 1000 },
         title: null
       },
@@ -204,7 +255,7 @@ const vegaLayer = [
       x: {
         field: 'pos',
         type: 'quantitative',
-        scale: { domain: [41190000, 41282000] },
+        scale: { domain: minMax.value },
         axis: { grid: false },
         title: null
       },
@@ -246,13 +297,13 @@ const vegaLayer = [
   },
   {
     description: 'gene - line',
-    data: { values: [{ pos: 41196312 }, { pos: 41277381 }] },
+    data: { values: [{ pos: minMax.value[0] }, { pos: minMax.value[1] }] },
     mark: { type: 'line', stroke: 'black', size: 1, opacity: 0.5 },
     encoding: {
       x: {
         field: 'pos',
         type: 'quantitative',
-        scale: { domain: [41190000, 41282000] },
+        scale: { domain: minMax.value },
         axis: { grid: false },
         title: null
       },
@@ -262,10 +313,7 @@ const vegaLayer = [
   {
     description: 'gene - exons',
     data: {
-      values: [
-        { start: 41196312, stop: 41197819 },
-        { start: 41199660, stop: 41199720 }
-      ]
+      values: exons.value
     },
     mark: {
       type: 'rect',
@@ -278,7 +326,7 @@ const vegaLayer = [
       x: {
         field: 'start',
         type: 'quantitative',
-        scale: { domain: [41190000, 41282000] },
+        scale: { domain: minMax.value },
         axis: { grid: false },
         title: null
       },
@@ -292,7 +340,7 @@ const vegaLayer = [
 <template>
   <figure class="figure border rounded pl-2 pt-2 mr-3 w-100 col">
     <figcaption class="figure-caption text-center">
-      Variation Landscape of {{ props.geneSymbol }}
+      Variation Landscape of {{ props.hgnc }}
     </figcaption>
     <div style="width: 1100px; height: 350px; overflow: none">
       <VegaPlot
diff --git a/frontend/src/components/__tests__/VariantDetails/VariationLandscape.spec.ts b/frontend/src/components/__tests__/VariationLandscape.spec.ts
similarity index 89%
rename from frontend/src/components/__tests__/VariantDetails/VariationLandscape.spec.ts
rename to frontend/src/components/__tests__/VariationLandscape.spec.ts
index ec8192b8..c281b153 100644
--- a/frontend/src/components/__tests__/VariantDetails/VariationLandscape.spec.ts
+++ b/frontend/src/components/__tests__/VariationLandscape.spec.ts
@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest'
 
 import * as BRCA1Clinvar from '@/assets/__tests__/BRCA1ClinVar.json'
-import VariationLandscape from '@/components/VariantDetails/VariationLandscape.vue'
+import VariationLandscape from '@/components/VariationLandscape.vue'
 import { setupMountedComponents } from '@/lib/test-utils'
 
 describe.concurrent('VariationLandscape', async () => {
diff --git a/frontend/src/stores/__tests__/geneInfo.spec.ts b/frontend/src/stores/__tests__/geneInfo.spec.ts
index cf43c017..e46ce4cb 100644
--- a/frontend/src/stores/__tests__/geneInfo.spec.ts
+++ b/frontend/src/stores/__tests__/geneInfo.spec.ts
@@ -20,6 +20,8 @@ describe.concurrent('geneInfo Store', () => {
     expect(store.storeState).toBe(StoreState.Initial)
     expect(store.geneSymbol).toBe(null)
     expect(store.geneInfo).toBe(null)
+    expect(store.geneClinvar).toBe(null)
+    expect(store.transcripts).toBe(null)
   })
 
   it('should clear state', () => {
@@ -33,6 +35,8 @@ describe.concurrent('geneInfo Store', () => {
     expect(store.storeState).toBe(StoreState.Initial)
     expect(store.geneSymbol).toBe(null)
     expect(store.geneInfo).toBe(null)
+    expect(store.geneClinvar).toBe(null)
+    expect(store.transcripts).toBe(null)
   })
 
   it('should load data', async () => {
@@ -42,16 +46,19 @@ describe.concurrent('geneInfo Store', () => {
         return Promise.resolve(JSON.stringify({ genes: { 'HGNC:1100': { gene: 'info' } } }))
       } else if (req.url.includes('clinvar')) {
         return Promise.resolve(JSON.stringify({ genes: { 'HGNC:1100': { gene: 'info' } } }))
+      } else if (req.url.includes('find-transcripts')) {
+        return Promise.resolve(JSON.stringify({ transcripts: { 'HGNC:1100': { gene: 'info' } } }))
       } else {
         return Promise.resolve(JSON.stringify({ status: 400 }))
       }
     })
-    await store.loadData('HGNC:1100')
+    await store.loadData('HGNC:1100', 'GRCh37')
 
     expect(store.storeState).toBe(StoreState.Active)
     expect(store.geneSymbol).toBe('HGNC:1100')
     expect(store.geneInfo).toEqual({ gene: 'info' })
     expect(store.geneClinvar).toEqual({ gene: 'info' })
+    expect(store.transcripts).toEqual({ transcripts: { 'HGNC:1100': { gene: 'info' } } })
   })
 
   it('should fail to load data with invalid request to gene info', async () => {
@@ -63,16 +70,19 @@ describe.concurrent('geneInfo Store', () => {
         return Promise.resolve(JSON.stringify({ foo: 'bar' }))
       } else if (req.url.includes('clinvar')) {
         return Promise.resolve(JSON.stringify({ genes: { 'HGNC:1100': { gene: 'info' } } }))
+      } else if (req.url.includes('find-transcripts')) {
+        return Promise.resolve(JSON.stringify({ transcripts: { 'HGNC:1100': { gene: 'info' } } }))
       } else {
         return Promise.resolve(JSON.stringify({ status: 400 }))
       }
     })
-    await store.loadData('invalid')
+    await store.loadData('invalid', 'invalid')
 
     expect(store.storeState).toBe(StoreState.Error)
     expect(store.geneSymbol).toBe(null)
     expect(store.geneInfo).toBe(null)
     expect(store.geneClinvar).toBe(null)
+    expect(store.transcripts).toBe(null)
   })
 
   it('should fail to load data with invalid request to clinvar info', async () => {
@@ -84,23 +94,26 @@ describe.concurrent('geneInfo Store', () => {
         return Promise.resolve(JSON.stringify({ genes: { 'HGNC:1100': { gene: 'info' } } }))
       } else if (req.url.includes('clinvar')) {
         return Promise.resolve(JSON.stringify({ foo: 'bar' }))
+      } else if (req.url.includes('find-transcripts')) {
+        return Promise.resolve(JSON.stringify({ transcripts: { 'HGNC:1100': { gene: 'info' } } }))
       } else {
         return Promise.resolve(JSON.stringify({ status: 400 }))
       }
     })
-    await store.loadData('invalid')
+    await store.loadData('invalid', 'invalid')
 
     expect(store.storeState).toBe(StoreState.Error)
     expect(store.geneSymbol).toBe(null)
     expect(store.geneInfo).toBe(null)
     expect(store.geneClinvar).toBe(null)
+    expect(store.transcripts).toBe(null)
   })
 
   it('should not load data if gene symbol is the same', async () => {
     const store = useGeneInfoStore()
     fetchMocker.mockResponse(JSON.stringify({ genes: { 'HGNC:1100': { gene: 'info' } } }))
 
-    await store.loadData('HGNC:1100')
+    await store.loadData('HGNC:1100', 'GRCh37')
 
     expect(store.storeState).toBe(StoreState.Active)
     expect(store.geneSymbol).toBe('HGNC:1100')
@@ -108,8 +121,8 @@ describe.concurrent('geneInfo Store', () => {
     expect(store.geneClinvar).toEqual({ gene: 'info' })
     expect(store.geneSymbol).toBe('HGNC:1100')
 
-    await store.loadData('HGNC:1100')
+    await store.loadData('HGNC:1100', 'GRCh37')
 
-    expect(fetchMocker.mock.calls.length).toBe(2)
+    expect(fetchMocker.mock.calls.length).toBe(3)
   })
 })
diff --git a/frontend/src/stores/geneInfo.ts b/frontend/src/stores/geneInfo.ts
index 28cbff09..b1a8bf66 100644
--- a/frontend/src/stores/geneInfo.ts
+++ b/frontend/src/stores/geneInfo.ts
@@ -7,6 +7,7 @@ import { defineStore } from 'pinia'
 import { ref } from 'vue'
 
 import { AnnonarsClient } from '@/api/annonars'
+import { DottyClient } from '@/api/dotty'
 import { StoreState } from '@/stores/misc'
 
 export const useGeneInfoStore = defineStore('geneInfo', () => {
@@ -22,14 +23,18 @@ export const useGeneInfoStore = defineStore('geneInfo', () => {
   /** ClinVar gene-related information from annoars. */
   const geneClinvar = ref<any | null>(null)
 
+  /** Transcript information from dotty. */
+  const transcripts = ref<any | null>(null)
+
   function clearData() {
     storeState.value = StoreState.Initial
     geneSymbol.value = null
     geneInfo.value = null
     geneClinvar.value = null
+    transcripts.value = null
   }
 
-  const loadData = async (geneSymbolQuery: string) => {
+  const loadData = async (geneSymbolQuery: string, genomeRelease: string) => {
     // Do not re-load data if the gene symbol is the same
     if (geneSymbolQuery === geneSymbol.value) {
       return
@@ -55,6 +60,13 @@ export const useGeneInfoStore = defineStore('geneInfo', () => {
       }
       geneClinvar.value = geneClinvarData['genes'][hgncId]
 
+      const dottyClient = new DottyClient()
+      const transcriptsData = await dottyClient.fetchTranscripts(
+        hgncId,
+        genomeRelease === 'grch37' ? 'GRCh37' : 'GRCh38'
+      )
+      transcripts.value = transcriptsData
+
       geneSymbol.value = geneSymbolQuery
       storeState.value = StoreState.Active
     } catch (e) {
@@ -69,6 +81,7 @@ export const useGeneInfoStore = defineStore('geneInfo', () => {
     geneSymbol,
     geneInfo,
     geneClinvar,
+    transcripts,
     loadData,
     clearData
   }
diff --git a/frontend/src/views/ACMGSVDocs.vue b/frontend/src/views/ACMGSVDocs.vue
index b00f681b..167aa941 100644
--- a/frontend/src/views/ACMGSVDocs.vue
+++ b/frontend/src/views/ACMGSVDocs.vue
@@ -50,7 +50,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Min Score: 0</p>
               <p>Max Score: 1</p>
               <p>Conflicting Evidence: Loss1B, Loss2E, Loss2F, Loss2G, Loss2H</p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 2B -->
@@ -61,7 +60,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Default Score: 0</p>
               <p>Max Score: 0</p>
               <p>Conflicting Evidence: Loss1B, Loss2E, Loss2F, Loss2G, Loss2H</p>
-              <p>Slider: false</p>
             </li>
             <!-- Criteria 2C-1 -->
             <li>
@@ -75,7 +73,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Min Score: 0.45</p>
               <p>Max Score: 1</p>
               <p>Conflicting Evidence: Loss1B, Loss2E, Loss2F, Loss2G, Loss2H</p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 2C-2 -->
@@ -90,7 +87,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Min Score: 0</p>
               <p>Max Score: 0.45</p>
               <p>Conflicting Evidence: Loss1B, Loss2E, Loss2F, Loss2G, Loss2H</p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 2D-1 -->
@@ -104,7 +100,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Default Score: 0</p>
               <p>Max Score: 0</p>
               <p>Conflicting Evidence: Loss1B, Loss2E, Loss2F, Loss2G, Loss2H</p>
-              <p>Slider: false</p>
             </li>
 
             <!-- Criteria 2D-2 -->
@@ -120,7 +115,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Min Score: 0.45</p>
               <p>Max Score: 0.9</p>
               <p>Conflicting Evidence: Loss1B, Loss2E, Loss2F, Loss2G, Loss2H</p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 2D-3 -->
@@ -136,7 +130,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Min Score: 0</p>
               <p>Max Score: 0.45</p>
               <p>Conflicting Evidence: Loss1B, Loss2E, Loss2F, Loss2G, Loss2H</p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 2D-4 -->
@@ -152,7 +145,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Min Score: 0.45</p>
               <p>Max Score: 1.0</p>
               <p>Conflicting Evidence: Loss1B, Loss2E, Loss2F, Loss2G, Loss2H</p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 2E -->
@@ -170,7 +162,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
                 Conflicting Evidence: Loss1B, Loss2A, Loss2B, Loss2C1, Loss2C2, Loss2D1, Loss2D2,
                 Loss2D3, Loss2D4, Loss2F, Loss2G, Loss2H
               </p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 2F -->
@@ -185,7 +176,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
                 Conflicting Evidence: Loss2A, Loss2B, Loss2C1, Loss2C2, Loss2D1, Loss2D2, Loss2D3,
                 Loss2D4, Loss2E, Loss2G, Loss2H
               </p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 2G -->
@@ -202,7 +192,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
                 Conflicting Evidence: Loss1B, Loss2A, Loss2B, Loss2C1, Loss2C2, Loss2D1, Loss2D2,
                 Loss2D3, Loss2D4, Loss2E, Loss2F, Loss2H
               </p>
-              <p>Slider: false</p>
             </li>
 
             <!-- Criteria 2H -->
@@ -219,7 +208,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
                 Conflicting Evidence: Loss1B, Loss2A, Loss2B, Loss2C1, Loss2C2, Loss2D1, Loss2D2,
                 Loss2D3, Loss2D4, Loss2E, Loss2F, Loss2G
               </p>
-              <p>Slider: true</p>
             </li>
             <!-- Criteria 3A -->
             <li>
@@ -232,7 +220,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Default Score: 0</p>
               <p>Max Score: 0</p>
               <p>Conflicting Evidence: Loss3B, Loss3C</p>
-              <p>Slider: false</p>
             </li>
 
             <!-- Criteria 3B -->
@@ -244,7 +231,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Min Score: 0</p>
               <p>Max Score: 0.45</p>
               <p>Conflicting Evidence: Loss1B, Loss2E, Loss3A, Loss3C</p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 3C -->
@@ -256,7 +242,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Min Score: 0.45</p>
               <p>Max Score: 0.9</p>
               <p>Conflicting Evidence: Loss1B, Loss2E, Loss3A, Loss3B</p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 4A -->
@@ -277,7 +262,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Min Score: 0</p>
               <p>Max Score: 0.9</p>
               <p>Conflicting Evidence: Loss4B, Loss4C</p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 4B -->
@@ -298,7 +282,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Min Score: 0</p>
               <p>Max Score: 0.9</p>
               <p>Conflicting Evidence: Loss4A, Loss4C</p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 4C -->
@@ -319,7 +302,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Min Score: 0</p>
               <p>Max Score: 0.9</p>
               <p>Conflicting Evidence: Loss4A, Loss4B</p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 4D -->
@@ -337,7 +319,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Min Score: -0.3</p>
               <p>Max Score: 0</p>
               <p>Conflicting Evidence: None</p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 4E -->
@@ -352,7 +333,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Min Score: 0</p>
               <p>Max Score: 0.3</p>
               <p>Conflicting Evidence: None</p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 4F -->
@@ -366,7 +346,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Min Score: 0</p>
               <p>Max Score: 0.15</p>
               <p>Conflicting Evidence: None</p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 4G -->
@@ -378,7 +357,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Min Score: 0</p>
               <p>Max Score: 0.3</p>
               <p>Conflicting Evidence: None</p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 4H -->
@@ -390,7 +368,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Min Score: 0</p>
               <p>Max Score: 0.45</p>
               <p>Conflicting Evidence: None</p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 4I -->
@@ -408,7 +385,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Min Score: -0.9</p>
               <p>Max Score: 0</p>
               <p>Conflicting Evidence: None</p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 4J -->
@@ -423,7 +399,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Min Score: -0.9</p>
               <p>Max Score: 0</p>
               <p>Conflicting Evidence: None</p>
-              <p>Slider: true</p>
             </li>
             <!-- Criteria 4K -->
             <li>
@@ -437,7 +412,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Min Score: -0.3</p>
               <p>Max Score: 0</p>
               <p>Conflicting Evidence: None</p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 4L -->
@@ -455,7 +429,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Min Score: 0</p>
               <p>Max Score: 0.45</p>
               <p>Conflicting Evidence: None</p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 4M -->
@@ -471,7 +444,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Min Score: 0</p>
               <p>Max Score: 0.45</p>
               <p>Conflicting Evidence: None</p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 4N -->
@@ -486,7 +458,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Min Score: -0.9</p>
               <p>Max Score: 0</p>
               <p>Conflicting Evidence: None</p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 4O -->
@@ -498,7 +469,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Min Score: -0.9</p>
               <p>Max Score: 0</p>
               <p>Conflicting Evidence: None</p>
-              <p>Slider: true</p>
             </li>
             <!-- Criteria 5A -->
             <li>
@@ -516,7 +486,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>
                 Conflicting Evidence: Loss 5B, Loss 5C, Loss 5D, Loss 5E, Loss 5F, Loss 5G, Loss 5H
               </p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 5B -->
@@ -533,7 +502,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>
                 Conflicting Evidence: Loss 5A, Loss 5C, Loss 5D, Loss 5E, Loss 5F, Loss 5G, Loss 5H
               </p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 5C -->
@@ -550,7 +518,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>
                 Conflicting Evidence: Loss 5A, Loss 5B, Loss 5D, Loss 5E, Loss 5F, Loss 5G, Loss 5H
               </p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 5D -->
@@ -569,7 +536,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>
                 Conflicting Evidence: Loss 5A, Loss 5B, Loss 5C, Loss 5E, Loss 5F, Loss 5G, Loss 5H
               </p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 5E -->
@@ -586,7 +552,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>
                 Conflicting Evidence: Loss 5A, Loss 5B, Loss 5C, Loss 5D, Loss 5F, Loss 5G, Loss 5H
               </p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 5F -->
@@ -599,7 +564,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>
                 Conflicting Evidence: Loss 5A, Loss 5B, Loss 5C, Loss 5D, Loss 5E, Loss 5G, Loss 5H
               </p>
-              <p>Slider: false</p>
             </li>
             <!-- Criteria 5G -->
             <li>
@@ -616,7 +580,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>
                 Conflicting Evidence: Loss 5A, Loss 5B, Loss 5C, Loss 5D, Loss 5E, Loss 5F, Loss 5H
               </p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 5H -->
@@ -634,7 +597,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>
                 Conflicting Evidence: Loss 5A, Loss 5B, Loss 5C, Loss 5D, Loss 5E, Loss 5F, Loss 5G
               </p>
-              <p>Slider: true</p>
             </li>
           </ul>
         </div>
@@ -653,7 +615,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Default Score: 0</p>
               <p>Max Score: 0</p>
               <p>Conflicting Evidence: Gain 1B</p>
-              <p>Slider: false</p>
             </li>
 
             <!-- Criteria 1B -->
@@ -670,7 +631,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
                 Conflicting Evidence: Gain 1A, Gain 2A, Gain 2B, Gain 2E, Gain 2G, Gain 2H, Gain 2I,
                 Gain 2J, Gain 2K, Gain 2L, Gain 3B, Gain 3C
               </p>
-              <p>Slider: false</p>
             </li>
 
             <!-- Criteria 2A -->
@@ -685,7 +645,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Min Score: 0</p>
               <p>Max Score: 1</p>
               <p>Conflicting Evidence: Gain 1B, Gain 2C, Gain 2D, Gain 2E, Gain 2F, Gain 2I</p>
-              <p>Slider: true</p>
             </li>
             <!-- Criteria 2B -->
             <li>
@@ -701,7 +660,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Default Score: 0</p>
               <p>Max Score: 0</p>
               <p>Conflicting Evidence: Gain 1B, Gain 2C, Gain 2D</p>
-              <p>Slider: false</p>
             </li>
 
             <!-- Criteria 2C -->
@@ -715,7 +673,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Min Score: -1</p>
               <p>Max Score: 0</p>
               <p>Conflicting Evidence: Gain 2A, Gain 2B</p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 2D -->
@@ -730,7 +687,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Min Score: -1</p>
               <p>Max Score: 0</p>
               <p>Conflicting Evidence: Gain 2A, Gain 2B</p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 2E -->
@@ -744,7 +700,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Default Score: 0</p>
               <p>Max Score: 0</p>
               <p>Conflicting Evidence: Gain 1B, Gain 2A</p>
-              <p>Slider: false</p>
             </li>
 
             <!-- Criteria 2F -->
@@ -759,7 +714,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Min Score: -1</p>
               <p>Max Score: 0</p>
               <p>Conflicting Evidence: Gain 2A</p>
-              <p>Slider: true</p>
             </li>
             <!-- Criteria 2G -->
             <li>
@@ -772,7 +726,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Default Score: 0</p>
               <p>Max Score: 0</p>
               <p>Conflicting Evidence: Gain 1B</p>
-              <p>Slider: false</p>
             </li>
 
             <!-- Criteria 2H -->
@@ -783,7 +736,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Default Score: 0</p>
               <p>Max Score: 0</p>
               <p>Conflicting Evidence: Gain 1B, Gain 2I</p>
-              <p>Slider: false</p>
             </li>
 
             <!-- Criteria 2I -->
@@ -802,7 +754,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Min Score: 0</p>
               <p>Max Score: 0.9</p>
               <p>Conflicting Evidence: Gain 1B, Gain 2H, Gain 2J, Gain 2K</p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 2J -->
@@ -816,7 +767,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Default Score: 0</p>
               <p>Max Score: 0</p>
               <p>Conflicting Evidence: Gain 1B, Gain 2I</p>
-              <p>Slider: false</p>
             </li>
             <!-- Criteria 2K -->
             <li>
@@ -830,7 +780,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Min Score: 0</p>
               <p>Max Score: 0.45</p>
               <p>Conflicting Evidence: Gain 1B, Gain 2I</p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 2L -->
@@ -844,7 +793,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Default Score: 0</p>
               <p>Max Score: 0</p>
               <p>Conflicting Evidence: Gain 1B</p>
-              <p>Slider: false</p>
             </li>
 
             <!-- Criteria 3A -->
@@ -858,7 +806,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Default Score: 0</p>
               <p>Max Score: 0</p>
               <p>Conflicting Evidence: Gain 3B, Gain 3C</p>
-              <p>Slider: false</p>
             </li>
 
             <!-- Criteria 3B -->
@@ -870,7 +817,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Min Score: 0</p>
               <p>Max Score: 0.45</p>
               <p>Conflicting Evidence: Gain 1B, Gain 2I, Gain 3A, Gain 3C</p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 3C -->
@@ -882,7 +828,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Min Score: 0</p>
               <p>Max Score: 0.9</p>
               <p>Conflicting Evidence: Gain 1B, Gain 2I, Gain 3A, Gain 3B</p>
-              <p>Slider: true</p>
             </li>
             <!-- Criteria 4A -->
             <li>
@@ -901,7 +846,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Min Score: 0</p>
               <p>Max Score: 0.9</p>
               <p>Conflicting Evidence: Gain 4B, Gain 4C, Gain 4D</p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 4B -->
@@ -922,7 +866,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Min Score: 0</p>
               <p>Max Score: 0.9</p>
               <p>Conflicting Evidence: Gain 4A, Gain 4C, Gain 4D</p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 4C -->
@@ -943,7 +886,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Min Score: 0</p>
               <p>Max Score: 0.9</p>
               <p>Conflicting Evidence: Gain 4A, Gain 4B, Gain 4D</p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 4D -->
@@ -963,7 +905,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Min Score: -0.3</p>
               <p>Max Score: 0</p>
               <p>Conflicting Evidence: Gain 4A, Gain 4B, Gain 4C</p>
-              <p>Slider: true</p>
             </li>
             <!-- Criteria 4E -->
             <li>
@@ -980,7 +921,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Min Score: 0</p>
               <p>Max Score: 0.3</p>
               <p>Conflicting Evidence: None</p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 4F -->
@@ -994,7 +934,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Min Score: 0</p>
               <p>Max Score: 0.45</p>
               <p>Conflicting Evidence: Gain 4G, Gain 4H</p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 4G -->
@@ -1006,7 +945,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Min Score: 0</p>
               <p>Max Score: 0.3</p>
               <p>Conflicting Evidence: Gain 4F, Gain 4H</p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 4H -->
@@ -1018,7 +956,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Min Score: 0</p>
               <p>Max Score: 0.45</p>
               <p>Conflicting Evidence: Gain 4F, Gain 4G</p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 4I -->
@@ -1036,7 +973,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Min Score: -0.9</p>
               <p>Max Score: 0</p>
               <p>Conflicting Evidence: Gain 4K</p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 4J -->
@@ -1050,7 +986,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Default Score: -0.3</p>
               <p>Max Score: -0.9</p>
               <p>Conflicting Evidence: Gain 4K</p>
-              <p>Slider: true</p>
             </li>
             <!-- Criteria 4K -->
             <li>
@@ -1064,7 +999,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Min Score: -0.3</p>
               <p>Max Score: 0</p>
               <p>Conflicting Evidence: Gain 4I, Gain 4J</p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 4L -->
@@ -1082,7 +1016,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Min Score: 0</p>
               <p>Max Score: 0.45</p>
               <p>Conflicting Evidence: Gain 4M</p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 4M -->
@@ -1097,7 +1030,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Min Score: 0</p>
               <p>Max Score: 0.45</p>
               <p>Conflicting Evidence: Gain 4L</p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 4N -->
@@ -1112,7 +1044,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Min Score: -0.9</p>
               <p>Max Score: 0</p>
               <p>Conflicting Evidence: None</p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 4O -->
@@ -1124,7 +1055,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>Min Score: -0.9</p>
               <p>Max Score: 0</p>
               <p>Conflicting Evidence: None</p>
-              <p>Slider: true</p>
             </li>
             <!-- Criteria 5A -->
             <li>
@@ -1142,7 +1072,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>
                 Conflicting Evidence: Gain 5B, Gain 5C, Gain 5D, Gain 5E, Gain 5F, Gain 5G, Gain 5H
               </p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 5B -->
@@ -1159,7 +1088,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>
                 Conflicting Evidence: Gain 5A, Gain 5C, Gain 5D, Gain 5E, Gain 5F, Gain 5G, Gain 5H
               </p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 5C -->
@@ -1176,7 +1104,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>
                 Conflicting Evidence: Gain 5A, Gain 5B, Gain 5D, Gain 5E, Gain 5F, Gain 5G, Gain 5H
               </p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 5D -->
@@ -1196,7 +1123,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>
                 Conflicting Evidence: Gain 5A, Gain 5B, Gain 5C, Gain 5E, Gain 5F, Gain 5G, Gain 5H
               </p>
-              <p>Slider: true</p>
             </li>
             <!-- Criteria 5E -->
             <li>
@@ -1212,7 +1138,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>
                 Conflicting Evidence: Gain 5A, Gain 5B, Gain 5C, Gain 5D, Gain 5F, Gain 5G, Gain 5H
               </p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 5F -->
@@ -1225,7 +1150,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>
                 Conflicting Evidence: Gain 5A, Gain 5B, Gain 5C, Gain 5D, Gain 5E, Gain 5G, Gain 5H
               </p>
-              <p>Slider: false</p>
             </li>
 
             <!-- Criteria 5G -->
@@ -1243,7 +1167,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>
                 Conflicting Evidence: Gain 5A, Gain 5B, Gain 5C, Gain 5D, Gain 5E, Gain 5F, Gain 5H
               </p>
-              <p>Slider: true</p>
             </li>
 
             <!-- Criteria 5H -->
@@ -1261,7 +1184,6 @@ import HeaderDefault from '@/components/HeaderDefault.vue'
               <p>
                 Conflicting Evidence: Gain 5A, Gain 5B, Gain 5C, Gain 5D, Gain 5E, Gain 5F, Gain 5G
               </p>
-              <p>Slider: true</p>
             </li>
           </ul>
         </div>
diff --git a/frontend/src/views/GeneDetailView.vue b/frontend/src/views/GeneDetailView.vue
index 857a8827..1564864f 100644
--- a/frontend/src/views/GeneDetailView.vue
+++ b/frontend/src/views/GeneDetailView.vue
@@ -5,6 +5,7 @@ import { useRoute, useRouter } from 'vue-router'
 import ClinvarFreqPlot from '@/components/ClinVarFreqPlot.vue'
 import GtexGenePlot from '@/components/GtexGenePlot.vue'
 import HeaderDetailPage from '@/components/HeaderDetailPage.vue'
+import VariationLandscape from '@/components/VariationLandscape.vue'
 import { roundIt } from '@/lib/utils'
 import { useGeneInfoStore } from '@/stores/geneInfo'
 import { StoreState } from '@/stores/misc'
@@ -33,7 +34,7 @@ const scrollToSection = async () => {
 }
 
 const loadDataToStore = async () => {
-  await geneInfoStore.loadData(props.searchTerm)
+  await geneInfoStore.loadData(props.searchTerm, props.genomeRelease)
   await scrollToSection()
 }
 
@@ -59,6 +60,7 @@ watch(
 
 const SECTIONS = [
   { id: 'hgnc', title: 'HGNC' },
+  { id: 'variation-landscape', title: 'Variation Landscape' },
   { id: 'constraints-scores', title: 'Constraints / Scores' },
   { id: 'ncbi-summary', title: 'NCBI Summary' },
   { id: 'alternative-identifiers', title: 'Alternative Identifiers' },
@@ -171,6 +173,17 @@ const genomeReleaseRef = ref(props.genomeRelease)
           </div>
         </div>
 
+        <div id="variation-landscape" class="gene-item">
+          <h2>Gene-wide Variation landscape</h2>
+          <v-divider></v-divider>
+          <VariationLandscape
+            :clinvar="geneInfoStore.geneClinvar"
+            :transcripts="geneInfoStore.transcripts"
+            :genome-release="genomeReleaseRef"
+            :hgnc="geneInfoStore.geneInfo?.hgnc?.hgnc_id"
+          />
+        </div>
+
         <div id="constraints-scores" class="gene-item">
           <h2>Constraints/Scores</h2>
           <h3>gnomAD</h3>
diff --git a/frontend/src/views/VariantDetailView.vue b/frontend/src/views/VariantDetailView.vue
index 74714e09..607fc04b 100644
--- a/frontend/src/views/VariantDetailView.vue
+++ b/frontend/src/views/VariantDetailView.vue
@@ -12,7 +12,6 @@ import VariantDetailsFreqs from '@/components/VariantDetails/VariantFreqs.vue'
 import VariantDetailsGene from '@/components/VariantDetails/VariantGene.vue'
 import VariantDetailsVariantTools from '@/components/VariantDetails/VariantTools.vue'
 import VariantDetailsVariantValidator from '@/components/VariantDetails/VariantValidator.vue'
-import VariationLandscape from '@/components/VariantDetails/VariationLandscape.vue'
 import { StoreState } from '@/stores/misc'
 import { useVariantInfoStore } from '@/stores/variantInfo'
 import { type SmallVariant } from '@/stores/variantInfo'
@@ -65,7 +64,6 @@ watch(
 
 const SECTIONS = [
   { id: 'gene', title: 'Gene' },
-  { id: 'variation-landscape', title: 'Variation Landscape' },
   { id: 'beacon-network', title: 'Beacon Network' },
   { id: 'clinvar', title: 'ClinVar' },
   { id: 'freqs', title: 'Population Frequencies' },
@@ -124,24 +122,6 @@ const genomeReleaseRef = ref(props.genomeRelease)
           <h3>No gene information available</h3>
         </div>
 
-        <div
-          v-if="variantInfoStore.geneInfo !== null"
-          id="variation-landscape"
-          class="variant-item"
-        >
-          <h2>Gene-wide Variation landscape</h2>
-          <v-divider />
-          <VariationLandscape
-            :clinvar="variantInfoStore.geneClinvar"
-            :genome-release="genomeReleaseRef"
-            :gene-symbol="variantInfoStore.varAnnos?.cadd?.GeneName"
-          />
-        </div>
-        <div v-else id="variation-landscape" class="variant-item">
-          <h2>Gene-wide Variation landscape</h2>
-          <h3>No gene information available</h3>
-        </div>
-
         <div id="beacon-network" class="variant-item">
           <h2>Beacon Network</h2>
           <v-divider />
diff --git a/frontend/src/views/__tests__/VariantDetailView.spec.ts b/frontend/src/views/__tests__/VariantDetailView.spec.ts
index bbd87ed7..85d37937 100644
--- a/frontend/src/views/__tests__/VariantDetailView.spec.ts
+++ b/frontend/src/views/__tests__/VariantDetailView.spec.ts
@@ -16,7 +16,6 @@ import VariantFreqs from '@/components/VariantDetails/VariantFreqs.vue'
 import VariantGene from '@/components/VariantDetails/VariantGene.vue'
 import VariantTools from '@/components/VariantDetails/VariantTools.vue'
 import VariantValidator from '@/components/VariantDetails/VariantValidator.vue'
-import VariationLandscape from '@/components/VariantDetails/VariationLandscape.vue'
 import { AcmgCriteria, MultiSourceAcmgCriteriaState, Presence, StateSource } from '@/lib/acmgSeqVar'
 import { setupMountedComponents } from '@/lib/test-utils'
 import { StoreState } from '@/stores/misc'
@@ -137,7 +136,6 @@ describe('VariantDetailView', async () => {
     const { wrapper } = makeWrapper()
 
     const variantInfo = wrapper.findComponent(VariantGene)
-    const variationLandscape = wrapper.findComponent(VariationLandscape)
     const beaconNetwork = wrapper.findComponent(BeaconNetwork)
     const clinVar = wrapper.findComponent(ClinVar)
     const variantFreqs = wrapper.findComponent(VariantFreqs)
@@ -146,7 +144,6 @@ describe('VariantDetailView', async () => {
     const variantValidator = wrapper.findComponent(VariantValidator)
     const txCsq = wrapper.findComponent(TxCsq)
     expect(variantInfo.exists()).toBe(true)
-    expect(variationLandscape.exists()).toBe(true)
     expect(beaconNetwork.exists()).toBe(true)
     expect(clinVar.exists()).toBe(true)
     expect(variantFreqs.exists()).toBe(true)