diff --git a/report-viewer/package-lock.json b/report-viewer/package-lock.json
index 967d660b0..cc483a0c7 100644
--- a/report-viewer/package-lock.json
+++ b/report-viewer/package-lock.json
@@ -13,6 +13,7 @@
         "@fortawesome/free-solid-svg-icons": "^6.5.0",
         "@fortawesome/vue-fontawesome": "^3.0.5",
         "chart.js": "^4.4.1",
+        "chartjs-chart-graph": "^4.2.5",
         "chartjs-plugin-datalabels": "^2.2.0",
         "highlight.js": "^11.9.0",
         "jszip": "^3.10.0",
@@ -916,6 +917,16 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@types/d3-force": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-3.0.6.tgz",
+      "integrity": "sha512-G9wbOvCxkNlLrppoHLZ6oFpbm3z7ibfkXwLD8g5/4Aa7iTEV0Z7TQ0OL8UxAtvdOhCa2VZcSuqn1NQqyCEqmiw=="
+    },
+    "node_modules/@types/d3-hierarchy": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.1.4.tgz",
+      "integrity": "sha512-wrvjpRFdmEu6yAqgjGy8MSud9ggxJj+I9XLuztLeSf/E0j0j6RQYtxH2J8U0Cfbgiw9ZDHyhpmaVuWhxscYaAQ=="
+    },
     "node_modules/@types/jsdom": {
       "version": "21.1.6",
       "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-21.1.6.tgz",
@@ -1957,6 +1968,23 @@
         "pnpm": ">=7"
       }
     },
+    "node_modules/chartjs-chart-graph": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/chartjs-chart-graph/-/chartjs-chart-graph-4.2.5.tgz",
+      "integrity": "sha512-peZFFOYBLMn8cCvtT9xNapwOA8enfPQ3DO7bTBSNCTw0GjurnwxW3BF6H3lGjn+9VURVaVN/NHF2nSvUaCsxnw==",
+      "dependencies": {
+        "@types/d3-force": "^3.0.5",
+        "@types/d3-hierarchy": "^3.1.3",
+        "d3-dispatch": "^3.0.1",
+        "d3-force": "^3.0.0",
+        "d3-hierarchy": "^3.1.2",
+        "d3-quadtree": "^3.0.1",
+        "d3-timer": "^3.0.1"
+      },
+      "peerDependencies": {
+        "chart.js": "^4.1.0"
+      }
+    },
     "node_modules/chartjs-plugin-datalabels": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/chartjs-plugin-datalabels/-/chartjs-plugin-datalabels-2.2.0.tgz",
@@ -2162,6 +2190,51 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
       "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
     },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-force": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
+      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-quadtree": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-hierarchy": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
+      "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-quadtree": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
+      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/data-urls": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-4.0.0.tgz",
diff --git a/report-viewer/package.json b/report-viewer/package.json
index 274caba45..9ec30994a 100644
--- a/report-viewer/package.json
+++ b/report-viewer/package.json
@@ -22,6 +22,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.5.0",
     "@fortawesome/vue-fontawesome": "^3.0.5",
     "chart.js": "^4.4.1",
+    "chartjs-chart-graph": "^4.2.5",
     "chartjs-plugin-datalabels": "^2.2.0",
     "highlight.js": "^11.9.0",
     "jszip": "^3.10.0",
diff --git a/report-viewer/src/components/ClusterGraph.vue b/report-viewer/src/components/ClusterGraph.vue
new file mode 100644
index 000000000..8d7f73c7b
--- /dev/null
+++ b/report-viewer/src/components/ClusterGraph.vue
@@ -0,0 +1,381 @@
+<template>
+  <div>
+    <div>
+      <canvas ref="graphCanvas"></canvas>
+      <div
+        v-if="!allComparisonsPresent"
+        class="mt-8 text-xs font-bold text-gray-500 dark:text-gray-400"
+      >
+        <p>Hover over an edge to highlight it in the table.</p>
+        <p class="mt-2">
+          Not all comparisons of this cluster are present. These comparisons are indicated by the
+          dashed lines. <br />
+          To include more comparisons, increase the number of increased comparisons in the CLI.
+        </p>
+      </div>
+    </div>
+
+    <div v-show="!loaded">Could not display graph</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ClusterListElement } from '@/model/ClusterListElement'
+import { Chart, registerables } from 'chart.js'
+import { ref, type PropType, type Ref, onMounted, computed, watch } from 'vue'
+import ChartDataLabels from 'chartjs-plugin-datalabels'
+import { EdgeLine, GraphController, GraphChart } from 'chartjs-chart-graph'
+import { store } from '@/stores/store'
+import { graphColors } from '@/utils/ColorUtils'
+
+const props = defineProps({
+  cluster: {
+    type: Object as PropType<ClusterListElement>,
+    required: true
+  }
+})
+
+const emit = defineEmits<{
+  (event: 'lineHovered', value: { firstId: string; secondId: string } | null): void
+}>()
+
+const graphCanvas: Ref<HTMLCanvasElement | null> = ref(null)
+const loaded = ref(false)
+
+Chart.register(...registerables)
+Chart.register(ChartDataLabels)
+Chart.register(EdgeLine)
+Chart.register(GraphController)
+Chart.register(GraphChart)
+
+const keys = computed(() => Array.from(props.cluster.members.keys()))
+const labels = computed(() =>
+  Array.from(keys.value).map((m) =>
+    store().state.anonymous.has(m) ? 'Hidden' : store().submissionDisplayName(m) ?? m
+  )
+)
+const edges = computed(() => {
+  const edges: { source: number; target: number }[] = []
+  props.cluster.members.forEach((member1, key1) => {
+    props.cluster.members.forEach((member2, key2) => {
+      const firstIndex = keys.value.indexOf(key1)
+      const secondIndex = keys.value.indexOf(key2)
+      if (firstIndex < secondIndex) {
+        edges.push({ source: firstIndex, target: secondIndex })
+      }
+    })
+  })
+  return edges
+})
+
+type HoverableEdge = {
+  sourceId: string
+  targetId: string
+  x1: number
+  y1: number
+  x2: number
+  y2: number
+}
+
+const minHoverDistance = 0.02
+
+const hoverableEdges = computed(() => {
+  const edges: HoverableEdge[] = []
+  props.cluster.members.forEach((member, key) => {
+    member.forEach((match) => {
+      const firstIndex = keys.value.indexOf(key)
+      const secondIndex = keys.value.indexOf(match.matchedWith)
+      if (firstIndex == -1 || secondIndex == -1) {
+        console.log(`Could not find index for ${key} or ${match.matchedWith}`)
+      }
+      if (firstIndex < secondIndex) {
+        edges.push({
+          sourceId: key,
+          targetId: match.matchedWith,
+          x1: calculateXPosition(firstIndex),
+          y1: calculateYPosition(firstIndex),
+          x2: calculateXPosition(secondIndex),
+          y2: calculateYPosition(secondIndex)
+        })
+      }
+    })
+  })
+  return edges
+})
+
+function distanceToEdge(edge: HoverableEdge, p: { x: number; y: number }) {
+  const numerator = (edge.x2 - edge.x1) * (edge.y1 - p.y) - (edge.x1 - p.x) * (edge.y2 - edge.y1)
+  const denominator = Math.sqrt(Math.pow(edge.x2 - edge.x1, 2) + Math.pow(edge.y2 - edge.y1, 2))
+  return Math.abs(numerator / denominator)
+}
+
+function getClosestEdge(p: { x: number; y: number }) {
+  let closestEdge = { sourceId: '', targetId: '', x1: -1, y1: -1, x2: -1, y2: -1 }
+  let closestDistance = Infinity
+  hoverableEdges.value.forEach((edge) => {
+    const distance = distanceToEdge(edge, p)
+    if (distance < closestDistance) {
+      closestDistance = distance
+      closestEdge = edge
+    }
+  })
+  return { ...closestEdge, d: closestDistance }
+}
+
+function getSimilarityFromKeyIndex(firstIndex: number, secondIndex: number) {
+  const firstSubmission = props.cluster.members.get(keys.value[firstIndex])
+  if (!firstSubmission) {
+    return 0
+  }
+  const match = firstSubmission.find((m) => m.matchedWith == keys.value[secondIndex])
+  if (!match) {
+    return 0
+  }
+  return match.similarity
+}
+
+const allComparisonsPresent = computed(() => {
+  let allComparisonsPresent = true
+  props.cluster.members.forEach((member) => {
+    if (member.length != props.cluster.members.size - 1) {
+      allComparisonsPresent = false
+    }
+  })
+  return allComparisonsPresent
+})
+
+const minimumSimilarity = computed(() => {
+  let minimumSimilarity = Infinity
+  props.cluster.members.forEach((member) => {
+    member.forEach((match) => {
+      if (match.similarity < minimumSimilarity) {
+        minimumSimilarity = match.similarity
+      }
+    })
+  })
+  return minimumSimilarity
+})
+
+const maximumSimilarity = computed(() => {
+  let maximumSimilarity = 0
+  props.cluster.members.forEach((member) => {
+    member.forEach((match) => {
+      if (match.similarity > maximumSimilarity) {
+        maximumSimilarity = match.similarity
+      }
+    })
+  })
+  return maximumSimilarity
+})
+
+function getClampedSimilarityFromKeyIndex(firstIndex: number, secondIndex: number) {
+  const similarity = getSimilarityFromKeyIndex(firstIndex, secondIndex)
+  if (similarity == 0) {
+    return 0
+  }
+  if (minimumSimilarity.value == maximumSimilarity.value) {
+    return 1
+  }
+  return (
+    (similarity - minimumSimilarity.value) / (maximumSimilarity.value - minimumSimilarity.value)
+  )
+}
+
+function getEdgeAlphaFromKeyIndex(firstIndex: number, secondIndex: number) {
+  const similarity = getSimilarityFromKeyIndex(firstIndex, secondIndex)
+  if (similarity == 0) {
+    return 1
+  }
+  return getClampedSimilarityFromKeyIndex(firstIndex, secondIndex) * 0.7 + 0.3
+}
+
+function getEdgeWidth(firstIndex: number, secondIndex: number) {
+  const similarity = getSimilarityFromKeyIndex(firstIndex, secondIndex)
+  if (similarity == 0) {
+    return 0.5
+  }
+  return getClampedSimilarityFromKeyIndex(firstIndex, secondIndex) * 5 + 1
+}
+
+function getEdgeDashStyle(firstIndex: number, secondIndex: number) {
+  const similarity = getSimilarityFromKeyIndex(firstIndex, secondIndex)
+  if (similarity == 0) {
+    return [5, 8]
+  }
+  return []
+}
+
+function getEdgeColor(firstIndex: number, secondIndex: number) {
+  const similarity = getSimilarityFromKeyIndex(firstIndex, secondIndex)
+  if (similarity == 0) {
+    return graphColors.additionalLine.value
+  }
+  return graphColors.contentFillAlpha(getEdgeAlphaFromKeyIndex(firstIndex, secondIndex))
+}
+
+const graphData = computed(() => {
+  return {
+    labels: labels.value,
+    datasets: [
+      {
+        pointRadius: 10,
+        pointHoverRadius: 10,
+        pointBackgroundColor: graphColors.pointFill,
+        pointHoverBackgroundColor: graphColors.pointFill,
+        pointBorderColor: graphColors.ticksAndFont.value,
+        pointHoverBorderColor: graphColors.ticksAndFont.value,
+        data: Array.from(keys.value).map((_, index) => ({
+          x: calculateXPosition(index),
+          y: calculateYPosition(index)
+        })),
+        edges: edges.value,
+        edgeLineBorderColor: (ctx: any) => getEdgeColor(ctx.raw.source, ctx.raw.target),
+        edgeLineBorderWidth: (ctx: any) => getEdgeWidth(ctx.raw.source, ctx.raw.target),
+        edgeLineBorderDash: (ctx: any) => getEdgeDashStyle(ctx.raw.source, ctx.raw.target)
+      }
+    ]
+  }
+})
+
+const yPadding = 40
+const xPadding = computed(() => {
+  const avgCharacterLength = 9
+
+  const widths = labels.value.map((label) => label.length * avgCharacterLength)
+  const maxWidth = Math.max(...widths)
+  // Makes sure there is always space to display a name but the padding does not get too big
+  return Math.max(Math.min(200, maxWidth), 40)
+})
+
+const graphOptions = computed(() => {
+  return {
+    layout: {
+      padding: {
+        top: yPadding,
+        bottom: yPadding,
+        left: xPadding.value,
+        right: xPadding.value
+      }
+    },
+    onHover: (event: any, elements: any) => {
+      if (!event) {
+        emit('lineHovered', null)
+        return
+      }
+      if (elements.length > 0) {
+        // Hovering over a node
+        emit('lineHovered', null)
+      } else if (chart.value != null) {
+        const closestEdge = getClosestEdge({
+          x: (chart.value as Chart).scales.x.getValueForPixel(event.x) ?? 0,
+          y: (chart.value as Chart).scales.y.getValueForPixel(event.y) ?? 0
+        })
+        if (closestEdge.d > minHoverDistance) {
+          emit('lineHovered', null)
+          return
+        }
+        emit('lineHovered', {
+          firstId: closestEdge.sourceId,
+          secondId: closestEdge.targetId
+        })
+      }
+    },
+    animation: false as false,
+    plugins: {
+      legend: { display: false },
+      datalabels: {
+        display: true,
+        font: {
+          weight: 'bold' as 'bold',
+          size: 12
+        },
+        formatter: (value: any, ctx: any) => {
+          return labels.value[ctx.dataIndex]
+        },
+        align: (ctx: any) => degreeAroundCircle(ctx.dataIndex),
+        offset: 8,
+        color: graphColors.ticksAndFont.value
+      },
+      tooltip: {
+        enabled: true,
+        displayColors: false,
+        callbacks: {
+          title: () => {
+            return ''
+          }
+        }
+      }
+    }
+  }
+})
+
+const chart: Ref<Chart | null> = ref(null)
+
+function drawGraph() {
+  if (chart.value != null) {
+    chart.value.destroy()
+  }
+  if (graphCanvas.value == null) {
+    loaded.value = false
+    return
+  }
+  const ctx = graphCanvas.value.getContext('2d')
+  if (ctx == null) {
+    loaded.value = false
+    return
+  }
+  chart.value = new Chart(ctx, {
+    type: 'graph',
+    data: graphData.value,
+    options: graphOptions.value,
+    plugins: [
+      {
+        id: 'onMouseOut',
+        beforeEvent(chart, args) {
+          const event = args.event
+          if (event.type === 'mouseout') {
+            emit('lineHovered', null)
+          }
+        }
+      }
+    ]
+  })
+  loaded.value = true
+}
+
+/**
+ * Calculates the x position of a key in the graph [0, 2]
+ * @param index The index of the key in the keys array
+ */
+function calculateXPosition(index: number) {
+  return Math.cos((2 * Math.PI * index) / keys.value.length) + 1
+}
+
+/**
+ * Calculates the y position of a key in the graph [0, 2]
+ * @param index The index of the key in the keys array
+ */
+function calculateYPosition(index: number) {
+  return Math.sin((2 * Math.PI * index) / keys.value.length) + 1
+}
+
+function degreeAroundCircle(index: number) {
+  return (-360 * index) / keys.value.length
+}
+
+onMounted(() => {
+  drawGraph()
+})
+
+watch(
+  computed(() => {
+    return {
+      d: graphData.value,
+      o: graphOptions.value
+    }
+  }),
+  () => {
+    drawGraph()
+  }
+)
+</script>
diff --git a/report-viewer/src/components/ComparisonsTable.vue b/report-viewer/src/components/ComparisonsTable.vue
index 8798379a2..a5d222a87 100644
--- a/report-viewer/src/components/ComparisonsTable.vue
+++ b/report-viewer/src/components/ComparisonsTable.vue
@@ -40,7 +40,12 @@
 
     <!-- Body -->
     <div class="flex flex-grow flex-col overflow-hidden">
-      <DynamicScroller v-if="topComparisons.length > 0" :items="comparisonList" :min-item-size="48">
+      <DynamicScroller
+        v-if="topComparisons.length > 0"
+        :items="comparisonList"
+        :min-item-size="48"
+        ref="dynamicScroller"
+      >
         <template #default="{ item, index, active }">
           <DynamicScrollerItem
             :item="item"
@@ -57,7 +62,8 @@
             <div
               class="tableRow"
               :class="{
-                'bg-container-secondary-light dark:bg-container-secondary-dark': item.id % 2 == 1
+                'bg-container-secondary-light dark:bg-container-secondary-dark': item.id % 2 == 1,
+                '!bg-accent !bg-opacity-30 ': isHighlightedRow(item)
               }"
             >
               <div
@@ -139,7 +145,7 @@
 <script setup lang="ts">
 import type { Cluster } from '@/model/Cluster'
 import type { ComparisonListElement } from '@/model/ComparisonListElement'
-import { toRef } from 'vue'
+import { toRef, type PropType, watch, computed, ref, type Ref } from 'vue'
 import { store } from '@/stores/store'
 import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
@@ -161,6 +167,10 @@ const props = defineProps({
   clusters: {
     type: Array<Cluster>,
     required: false
+  },
+  highlightedRowIds: {
+    type: Object as PropType<{ firstId: string; secondId: string }>,
+    required: false
   }
 })
 
@@ -187,6 +197,30 @@ function getClusterIndexesFor(id1: string, id2: string): Array<number> {
   })
   return indexes
 }
+
+function isHighlightedRow(item: ComparisonListElement) {
+  return (
+    props.highlightedRowIds != undefined &&
+    ((item.firstSubmissionId == props.highlightedRowIds.firstId &&
+      item.secondSubmissionId == props.highlightedRowIds.secondId) ||
+      (item.firstSubmissionId == props.highlightedRowIds.secondId &&
+        item.secondSubmissionId == props.highlightedRowIds.firstId))
+  )
+}
+
+const dynamicScroller: Ref<any | null> = ref(null)
+
+watch(
+  computed(() => props.highlightedRowIds),
+  (newValue, oldValue) => {
+    if (
+      newValue != undefined &&
+      (newValue?.firstId != oldValue?.firstId || newValue?.secondId != oldValue?.secondId)
+    ) {
+      dynamicScroller.value?.scrollToItem(comparisonList.value.findIndex(isHighlightedRow))
+    }
+  }
+)
 </script>
 
 <style scoped lang="postcss">
diff --git a/report-viewer/src/utils/ColorUtils.ts b/report-viewer/src/utils/ColorUtils.ts
index 922bc3770..ac5cdabe8 100644
--- a/report-viewer/src/utils/ColorUtils.ts
+++ b/report-viewer/src/utils/ColorUtils.ts
@@ -81,6 +81,11 @@ function getMatchColor(alpha: number, index?: number) {
   return `rgba(${matchColors[index].red}, ${matchColors[index].green}, ${matchColors[index].blue}, ${alpha})`
 }
 
+const graphRGB = {
+  red: 190,
+  green: 22,
+  blue: 34
+}
 const graphColors = {
   ticksAndFont: computed(() => {
     return store().uiState.useDarkMode ? '#ffffff' : '#000000'
@@ -88,9 +93,15 @@ const graphColors = {
   gridLines: computed(() => {
     return store().uiState.useDarkMode ? 'rgba(256, 256, 256, 0.2)' : 'rgba(0, 0, 0, 0.2)'
   }),
-  contentFill: 'rgba(190, 22, 34, 0.5)',
+  contentFill: `rgba(${graphRGB.red}, ${graphRGB.green}, ${graphRGB.blue}, 0.5)`,
   contentBorder: 'rgb(127, 15, 24)',
-  pointFill: 'rgba(190, 22, 34, 1)'
+  pointFill: `rgba(${graphRGB.red}, ${graphRGB.green}, ${graphRGB.blue}, 1)`,
+  additionalLine: computed(() => {
+    return store().uiState.useDarkMode ? `rgba(200, 200, 200, 0.3)` : `rgba(0, 0, 0, 0.5)`
+  }),
+  contentFillAlpha(alpha: number) {
+    return `rgba(${graphRGB.red}, ${graphRGB.green}, ${graphRGB.blue}, ${alpha})`
+  }
 }
 
 export { generateColors, graphColors, getMatchColorCount, getMatchColor }
diff --git a/report-viewer/src/views/ClusterView.vue b/report-viewer/src/views/ClusterView.vue
index e5984b199..104d4130e 100644
--- a/report-viewer/src/views/ClusterView.vue
+++ b/report-viewer/src/views/ClusterView.vue
@@ -13,11 +13,33 @@
 
     <div class="relative bottom-0 left-0 right-0 flex flex-grow justify-between space-x-5 p-5 pt-5">
       <Container class="flex max-h-0 min-h-full flex-1 flex-col overflow-hidden">
-        <ClusterRadarChart :cluster="clusterListElement" class="flex-grow" />
+        <OptionsSelectorComponent
+          :labels="clusterVisualizationOptions"
+          @selectionChanged="
+            (index) => (selectedClusterVisualization = index == 0 ? 'Graph' : 'Radar')
+          "
+          title="Cluster Visualization:"
+          class="mb-3"
+        />
+        <ClusterRadarChart
+          v-if="selectedClusterVisualization == 'Radar'"
+          :cluster="clusterListElement"
+          class="flex-grow"
+        />
+        <ClusterGraph
+          v-if="selectedClusterVisualization == 'Graph'"
+          :cluster="clusterListElement"
+          class="flex-grow"
+          @line-hovered="(value) => (highlightedElement = value)"
+        />
       </Container>
       <Container class="flex max-h-0 min-h-full w-1/3 flex-col space-y-2">
         <h2>Comparisons of Cluster Members:</h2>
-        <ComparisonsTable :topComparisons="comparisons" class="min-h-0 flex-1">
+        <ComparisonsTable
+          :topComparisons="comparisons"
+          class="min-h-0 flex-1"
+          :highlighted-row-ids="highlightedElement ?? undefined"
+        >
           <template #footer v-if="comparisons.length < maxAmountOfComparisonsInCluster">
             <p class="w-full pt-1 text-center font-bold">
               Not all comparisons inside the cluster are shown. To see more, re-run JPlag with a
@@ -32,6 +54,7 @@
 
 <script setup lang="ts">
 import ClusterRadarChart from '@/components/ClusterRadarChart.vue'
+import ClusterGraph from '@/components/ClusterGraph.vue'
 import ComparisonsTable from '@/components/ComparisonsTable.vue'
 import Container from '@/components/ContainerComponent.vue'
 import TextInformation from '@/components/TextInformation.vue'
@@ -40,8 +63,9 @@ import type { ClusterListElement, ClusterListElementMember } from '@/model/Clust
 import type { ComparisonListElement } from '@/model/ComparisonListElement'
 import { MetricType } from '@/model/MetricType'
 import type { Overview } from '@/model/Overview'
+import { computed, ref, onErrorCaptured, type PropType, type Ref } from 'vue'
+import OptionsSelectorComponent from '@/components/optionsSelectors/OptionsSelectorComponent.vue'
 import { redirectOnError } from '@/router'
-import { computed, onErrorCaptured, type PropType, type Ref } from 'vue'
 
 const props = defineProps({
   overview: {
@@ -56,6 +80,18 @@ const props = defineProps({
 
 const comparisons = [] as Array<ComparisonListElement>
 const clusterMemberList = new Map() as ClusterListElementMember
+const selectedClusterVisualization: Ref<'Graph' | 'Radar'> = ref('Graph')
+const clusterVisualizationOptions = [
+  {
+    displayValue: 'Graph',
+    tooltip: 'A graph having the average similarity between two submissions as the edges.'
+  },
+  {
+    displayValue: 'Radar',
+    tooltip:
+      'A radar chart showing the he other submissions in the cluster, relative one submission.'
+  }
+]
 const usedMetric = MetricType.AVERAGE
 
 function getComparisonFor(id1: string, id2: string) {
@@ -108,6 +144,8 @@ const maxAmountOfComparisonsInCluster = computed(() => {
   return props.cluster.members.length ** 2 / 2 - props.cluster.members.length
 })
 
+const highlightedElement: Ref<{ firstId: string; secondId: string } | null> = ref(null)
+
 onErrorCaptured((error) => {
   redirectOnError(error, 'Error displaying cluster:\n', 'OverviewView', 'Back to overview')
   return false