diff --git a/report-viewer/src/components/ComparisonsTable.vue b/report-viewer/src/components/ComparisonsTable.vue
index 67545cc4e..c22f40f70 100644
--- a/report-viewer/src/components/ComparisonsTable.vue
+++ b/report-viewer/src/components/ComparisonsTable.vue
@@ -11,8 +11,27 @@
         <div class="tableCellSimilarity !flex-col">
           <div>Similarity</div>
           <div class="flex w-full flex-row">
-            <div class="flex-1">Average</div>
-            <div class="flex-1">Maximum</div>
+            <ToolTipComponent class="flex-1" :direction="displayClusters ? 'top' : 'left'">
+              <template #default>
+                <p class="w-full text-center">{{ metricToolTips[MetricType.AVERAGE].shortName }}</p>
+              </template>
+              <template #tooltip>
+                <p class="whitespace-pre text-sm">
+                  {{ metricToolTips[MetricType.AVERAGE].tooltip }}
+                </p>
+              </template>
+            </ToolTipComponent>
+
+            <ToolTipComponent class="flex-1" :direction="displayClusters ? 'top' : 'left'">
+              <template #default>
+                <p class="w-full text-center">{{ metricToolTips[MetricType.MAXIMUM].shortName }}</p>
+              </template>
+              <template #tooltip>
+                <p class="whitespace-pre text-sm">
+                  {{ metricToolTips[MetricType.MAXIMUM].tooltip }}
+                </p>
+              </template>
+            </ToolTipComponent>
           </div>
         </div>
         <div class="tableCellCluster items-center" v-if="displayClusters">Cluster</div>
@@ -102,21 +121,23 @@
                   }"
                   class="tect-center flex w-full justify-center"
                 >
-                  <div class="group relative w-fit">
-                    {{ clusters?.[index].members?.length }}
-                    <FontAwesomeIcon
-                      :icon="['fas', 'user-group']"
-                      :style="{ color: clusterIconColors[index] }"
-                    />
-                    {{ ((clusters?.[index].averageSimilarity as number) * 100).toFixed(2) }}%
-                    <div
-                      class="tooltipArrow absolute left-[-400px] top-0 z-50 hidden h-full items-center rounded-sm bg-gray-950 bg-opacity-90 px-2 text-sm text-white group-hover:flex"
-                    >
-                      {{ clusters?.[index].members?.length }} submissions in cluster with average
-                      similarity of
+                  <ToolTipComponent class="w-fit" direction="left">
+                    <template #default>
+                      {{ clusters?.[index].members?.length }}
+                      <FontAwesomeIcon
+                        :icon="['fas', 'user-group']"
+                        :style="{ color: clusterIconColors[index] }"
+                      />
                       {{ ((clusters?.[index].averageSimilarity as number) * 100).toFixed(2) }}%
-                    </div>
-                  </div>
+                    </template>
+                    <template #tooltip>
+                      <p class="whitespace-nowrap text-sm">
+                        {{ clusters?.[index].members?.length }} submissions in cluster with average
+                        similarity of
+                        {{ ((clusters?.[index].averageSimilarity as number) * 100).toFixed(2) }}%
+                      </p>
+                    </template>
+                  </ToolTipComponent>
                 </RouterLink>
               </div>
             </div>
@@ -137,7 +158,8 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faUserGroup } from '@fortawesome/free-solid-svg-icons'
 import { generateColors } from '@/utils/ColorUtils'
-import { MetricType } from '@/model/MetricType'
+import ToolTipComponent from './ToolTipComponent.vue'
+import { MetricType, metricToolTips } from '@/model/MetricType'
 
 library.add(faUserGroup)
 
diff --git a/report-viewer/src/components/MatchList.vue b/report-viewer/src/components/MatchList.vue
index aeb218112..17e5bee28 100644
--- a/report-viewer/src/components/MatchList.vue
+++ b/report-viewer/src/components/MatchList.vue
@@ -3,26 +3,33 @@
 -->
 <template>
   <div class="flex h-fit min-w-0 max-w-full flex-row space-x-1 overflow-x-hidden text-xs">
-    <Interactable class="my-2 flex h-6 items-center whitespace-nowrap !rounded-2xl text-center">
-      Match Files: TokenCount
-    </Interactable>
+    <ToolTipComponent direction="right">
+      <template #default>
+        <OptionComponent label="Match Files: TokenCount" />
+      </template>
+      <template #tooltip>
+        <p class="whitespace-pre text-sm">Click on a match to show it in the code view.</p>
+      </template>
+    </ToolTipComponent>
+
     <div class="flex w-full flex-row space-x-1 overflow-x-auto">
-      <Interactable
-        class="my-2 flex h-6 items-center whitespace-nowrap !rounded-2xl !bg-opacity-50 text-center"
+      <OptionComponent
         :style="{ background: match.color }"
         v-for="[index, match] in matches?.entries()"
         v-bind:key="index"
         @click="$emit('matchSelected', match)"
-      >
-        {{ getFileName(match.firstFile) }} - {{ getFileName(match.secondFile) }}: {{ match.tokens }}
-      </Interactable>
+        :label="
+          getFileName(match.firstFile) + ' - ' + getFileName(match.secondFile) + ': ' + match.tokens
+        "
+      />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import type { Match } from '@/model/Match'
-import Interactable from './InteractableComponent.vue'
+import OptionComponent from './optionsSelectors/OptionComponent.vue'
+import ToolTipComponent from './ToolTipComponent.vue'
 
 defineProps({
   /**
diff --git a/report-viewer/src/components/OptionsSelectorComponent.vue b/report-viewer/src/components/OptionsSelectorComponent.vue
deleted file mode 100644
index 930e54c76..000000000
--- a/report-viewer/src/components/OptionsSelectorComponent.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<!--
-  Component for selecting one of multiple options.
--->
-<template>
-  <div class="flex h-fit flex-row items-center text-center text-xs">
-    <div v-if="name != ''" class="mr-3 text-base">
-      {{ name }}
-    </div>
-    <Interactable
-      v-for="[index, label] in labels.entries()"
-      :key="label"
-      class="mr-2 box-border flex h-6 w-fit items-center justify-center !rounded-2xl px-[12px] text-center hover:!border-[2px] hover:px-[11px]"
-      :class="{ '!border-accent-dark !bg-accent !bg-opacity-40': index == getSelected() }"
-      @click="select(index)"
-    >
-      {{ label }}
-    </Interactable>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Interactable from './InteractableComponent.vue'
-import { ref } from 'vue'
-
-const props = defineProps({
-  name: {
-    type: String,
-    required: false,
-    default: ''
-  },
-  labels: {
-    type: Array<string>,
-    required: true
-  },
-  defaultSelected: {
-    type: Number,
-    required: false,
-    default: 0
-  }
-})
-
-const emit = defineEmits(['selectionChanged'])
-const selected = ref(-1)
-
-function getSelected() {
-  if (selected.value == -1) {
-    return props.defaultSelected
-  }
-  return selected.value
-}
-
-function select(index: number) {
-  emit('selectionChanged', index)
-  selected.value = index
-}
-</script>
diff --git a/report-viewer/src/components/ToolTipComponent.vue b/report-viewer/src/components/ToolTipComponent.vue
new file mode 100644
index 000000000..48212c0f5
--- /dev/null
+++ b/report-viewer/src/components/ToolTipComponent.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="group relative inline-block">
+    <slot></slot>
+    <div
+      class="invisible absolute z-10 rounded-md px-1 text-center text-white delay-0 group-hover:visible group-hover:delay-200"
+      :style="tooltipPosition"
+    >
+      <slot name="tooltip"></slot>
+      <div class="absolute border-4 border-solid" :style="arrowStyle"><!-- Arrow --></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, type PropType, type StyleValue } from 'vue'
+
+const props = defineProps({
+  direction: {
+    type: String as PropType<'top' | 'bottom' | 'left' | 'right'>,
+    required: false,
+    default: 'top'
+  }
+})
+
+const opacity = 0.8
+
+const tooltipPosition = computed(() => {
+  const style: StyleValue = {}
+
+  if (props.direction == 'left' || props.direction == 'right') {
+    style.top = '50%'
+    style.transform = 'translateY(-50%)'
+    if (props.direction == 'left') {
+      style.right = '105%'
+    } else {
+      style.left = '105%'
+    }
+  } else {
+    style.left = '50%'
+    style.transform = 'translateX(-50%)'
+    if (props.direction == 'top') {
+      style.bottom = '105%'
+    } else {
+      style.top = '105%'
+    }
+  }
+  style.backgroundColor = `rgba(0,0,0,${opacity})`
+
+  return style
+})
+
+const arrowStyle = computed(() => {
+  const style: StyleValue = {}
+  style.content = ' '
+
+  style.borderColor = ''
+  for (const dir of ['top', 'right', 'bottom', 'left']) {
+    style.borderColor += dir == props.direction ? `rgba(0,0,0,${opacity}) ` : 'transparent '
+  }
+
+  if (props.direction == 'left' || props.direction == 'right') {
+    style.top = '50%'
+    style.marginTop = '-4px'
+  } else {
+    style.left = '50%'
+    style.marginLeft = '-4px'
+  }
+
+  style[props.direction] = '100%'
+
+  return style
+})
+</script>
diff --git a/report-viewer/src/components/optionsSelectors/MetricSelector.vue b/report-viewer/src/components/optionsSelectors/MetricSelector.vue
new file mode 100644
index 000000000..345d4ed68
--- /dev/null
+++ b/report-viewer/src/components/optionsSelectors/MetricSelector.vue
@@ -0,0 +1,40 @@
+<template>
+  <OptionsSelectorComponent
+    :title="title"
+    :labels="labels"
+    @selection-changed="(i) => $emit('selectionChanged', metrics[i])"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed, type PropType, type Ref } from 'vue'
+import OptionsSelectorComponent from './OptionsSelectorComponent.vue'
+import { MetricType, metricToolTips } from '@/model/MetricType'
+
+const props = defineProps({
+  metrics: {
+    type: Array<MetricType>,
+    required: false,
+    default: [MetricType.AVERAGE, MetricType.MAXIMUM]
+  },
+  title: {
+    type: String,
+    required: false,
+    default: ''
+  },
+  defaultSelection: {
+    type: String as PropType<MetricType>,
+    required: false,
+    default: MetricType.AVERAGE
+  }
+})
+
+defineEmits(['selectionChanged'])
+
+const labels: Ref<{ displayValue: string; tooltip: string }[]> = computed(() =>
+  props.metrics.map((metric) => ({
+    displayValue: metricToolTips[metric].longName,
+    tooltip: metricToolTips[metric].tooltip
+  }))
+)
+</script>
diff --git a/report-viewer/src/components/optionsSelectors/OptionComponent.vue b/report-viewer/src/components/optionsSelectors/OptionComponent.vue
new file mode 100644
index 000000000..443940a84
--- /dev/null
+++ b/report-viewer/src/components/optionsSelectors/OptionComponent.vue
@@ -0,0 +1,27 @@
+<template>
+  <Interactable
+    class="mr-2 box-border flex h-6 w-fit items-center justify-center whitespace-nowrap !rounded-2xl px-[12px] text-center hover:!border-[2px] hover:px-[11px]"
+    :class="{ '!border-accent-dark !bg-accent !bg-opacity-40': selected }"
+    @click="$emit('click')"
+  >
+    {{ label }}
+  </Interactable>
+</template>
+
+<script setup lang="ts">
+import Interactable from '../InteractableComponent.vue'
+
+defineProps({
+  label: {
+    type: String,
+    required: true
+  },
+  selected: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+})
+
+defineEmits(['click'])
+</script>
diff --git a/report-viewer/src/components/optionsSelectors/OptionsSelectorComponent.vue b/report-viewer/src/components/optionsSelectors/OptionsSelectorComponent.vue
new file mode 100644
index 000000000..94397decd
--- /dev/null
+++ b/report-viewer/src/components/optionsSelectors/OptionsSelectorComponent.vue
@@ -0,0 +1,76 @@
+<!--
+  Component for selecting one of multiple options.
+-->
+<template>
+  <div class="flex h-fit flex-row items-center text-center text-xs">
+    <div v-if="title != ''" class="mr-3 text-base">
+      {{ title }}
+    </div>
+    <div v-for="[index, label] in labels.entries()" :key="index">
+      <ToolTipComponent v-if="(label as ToolTipLabel).displayValue !== undefined" direction="right">
+        <template #default>
+          <OptionComponent
+            :label="(label as ToolTipLabel).displayValue"
+            :selected="index == getSelected()"
+            @click="select(index)"
+          />
+        </template>
+
+        <template #tooltip>
+          <p class="whitespace-pre text-sm">
+            {{ (label as ToolTipLabel).tooltip }}
+          </p>
+        </template>
+      </ToolTipComponent>
+      <OptionComponent
+        v-else
+        :label="label as string"
+        :selected="index == getSelected()"
+        @click="select(index)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import ToolTipComponent from '../ToolTipComponent.vue'
+import OptionComponent from './OptionComponent.vue'
+
+type ToolTipLabel = {
+  displayValue: string
+  tooltip: string
+}
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: false,
+    default: ''
+  },
+  labels: {
+    type: Array<string | ToolTipLabel>,
+    required: true
+  },
+  defaultSelected: {
+    type: Number,
+    required: false,
+    default: 0
+  }
+})
+
+const emit = defineEmits(['selectionChanged'])
+const selected = ref(-1)
+
+function getSelected() {
+  if (selected.value == -1) {
+    return props.defaultSelected
+  }
+  return selected.value
+}
+
+function select(index: number) {
+  emit('selectionChanged', index)
+  selected.value = index
+}
+</script>
diff --git a/report-viewer/src/model/MetricType.ts b/report-viewer/src/model/MetricType.ts
index c0b53fcf9..08c81d072 100644
--- a/report-viewer/src/model/MetricType.ts
+++ b/report-viewer/src/model/MetricType.ts
@@ -5,3 +5,24 @@ export enum MetricType {
   AVERAGE = 'AVG',
   MAXIMUM = 'MAX'
 }
+
+type MetricToolTipData = {
+  longName: string
+  shortName: string
+  tooltip: string
+}
+
+export const metricToolTips: Record<MetricType, MetricToolTipData> = {
+  [MetricType.AVERAGE]: {
+    longName: 'Average Similarity',
+    shortName: 'AVG',
+    tooltip:
+      'The average similarity of the two files.\nA high similarity indicates that the programms work in a similar way.'
+  },
+  [MetricType.MAXIMUM]: {
+    longName: 'Maximum Similarity',
+    shortName: 'MAX',
+    tooltip:
+      'The maximum similarity of the two files.\nUsefull if programms are very dfferent in size.'
+  }
+}
diff --git a/report-viewer/src/views/ClusterView.vue b/report-viewer/src/views/ClusterView.vue
index d8e254631..62c94d50e 100644
--- a/report-viewer/src/views/ClusterView.vue
+++ b/report-viewer/src/views/ClusterView.vue
@@ -15,7 +15,7 @@
       <Container class="flex max-h-0 min-h-full flex-1 flex-col overflow-hidden">
         <ClusterRadarChart :cluster="clusterListElement" class="flex-grow" />
       </Container>
-      <Container class="flex max-h-0 min-h-full w-1/3 flex-col space-y-2 overflow-hidden">
+      <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" />
       </Container>
diff --git a/report-viewer/src/views/OverviewView.vue b/report-viewer/src/views/OverviewView.vue
index 456409075..36161c346 100644
--- a/report-viewer/src/views/OverviewView.vue
+++ b/report-viewer/src/views/OverviewView.vue
@@ -17,7 +17,15 @@
           <TextInformation label="Min Match Length">{{
             overview.matchSensitivity
           }}</TextInformation>
-          <Button @click="router.push({ name: 'InfoView' })"> More </Button>
+
+          <ToolTipComponent direction="left">
+            <template #default>
+              <Button @click="router.push({ name: 'InfoView' })"> More </Button>
+            </template>
+            <template #tooltip>
+              <p class="whitespace-pre text-sm">More information about the CLI run of JPlag</p>
+            </template>
+          </ToolTipComponent>
         </div>
       </Container>
     </div>
@@ -32,17 +40,17 @@
         />
         <div class="flex flex-grow flex-col space-y-1">
           <h3 class="text-lg underline">Options:</h3>
-          <ScrollableComponent class="flex-grow space-y-2">
-            <OptionsSelector
-              name="Metric"
-              :labels="['Average', 'Maximum']"
+          <ScrollableComponent class="h-fit flex-grow">
+            <MetricSelector
+              class="mt-2"
+              title="Metric:"
               @selection-changed="
-                (i: number) => (selectedDistributionDiagramMetric = getMetricFromNumber(i))
+                (metric: MetricType) => (selectedDistributionDiagramMetric = metric)
               "
             />
             <OptionsSelector
               class="mt-2"
-              name="Scale x-Axis:"
+              title="Scale x-Axis:"
               :labels="['Linear', 'Logarithmic']"
               @selection-changed="
                 (i: number) => (distributionDiagramScaleX = i == 0 ? 'linear' : 'logarithmic')
@@ -55,11 +63,22 @@
       <Container class="flex max-h-0 min-h-full flex-1 flex-col space-y-2">
         <div class="flex flex-row items-center space-x-8">
           <h2>Top Comparisons:</h2>
-          <SearchBarComponent
-            placeholder="Filter/Unhide Comparisons"
-            class="flex-grow"
-            @input-changed="(value) => (searchString = value)"
-          />
+          <ToolTipComponent direction="bottom" class="flex-grow">
+            <template #default>
+              <SearchBarComponent
+                placeholder="Filter/Unhide Comparisons"
+                @input-changed="(value) => (searchString = value)"
+              />
+            </template>
+            <template #tooltip>
+              <p class="whitespace-pre text-sm">
+                Type in the name of a submission to only show comparisons that contain this
+                submission.
+              </p>
+              <p class="whitespace-pre text-sm">Fully written out names get unhidden.</p>
+            </template>
+          </ToolTipComponent>
+
           <Button class="w-24" @click="changeAnnoymousForAll()">
             {{
               store().state.anonymous.size == store().getSubmissionIds.length
@@ -68,12 +87,9 @@
             }}
           </Button>
         </div>
-        <OptionsSelector
-          name="Sort By"
-          :labels="['Average Similarity', 'Maximum Similarity']"
-          @selection-changed="
-            (index) => (comparisonTableSortingMetric = getMetricFromNumber(index))
-          "
+        <MetricSelector
+          title="Sort By:"
+          @selection-changed="(metric: MetricType) => (comparisonTableSortingMetric = metric)"
         />
         <ComparisonsTable
           :clusters="overview.clusters"
@@ -99,7 +115,9 @@ import { MetricType } from '@/model/MetricType'
 import SearchBarComponent from '@/components/SearchBarComponent.vue'
 import TextInformation from '@/components/TextInformation.vue'
 import type { ComparisonListElement } from '@/model/ComparisonListElement'
-import OptionsSelector from '@/components/OptionsSelectorComponent.vue'
+import MetricSelector from '@/components/optionsSelectors/MetricSelector.vue'
+import ToolTipComponent from '@/components/ToolTipComponent.vue'
+import OptionsSelector from '@/components/optionsSelectors/OptionsSelectorComponent.vue'
 
 const overview = await OverviewFactory.getOverview()
 
@@ -186,14 +204,6 @@ function changeAnnoymousForAll() {
 
 const selectedDistributionDiagramMetric = ref(MetricType.AVERAGE)
 
-function getMetricFromNumber(metric: number) {
-  if (metric == 0) {
-    return MetricType.AVERAGE
-  } else {
-    return MetricType.MAXIMUM
-  }
-}
-
 const hasMoreSubmissionPaths = overview.submissionFolderPath.length > 1
 const submissionPathValue = hasMoreSubmissionPaths
   ? 'Click More to see all paths'
diff --git a/report-viewer/tests/unit/components/optionsSelectors/MetricSelector.test.ts b/report-viewer/tests/unit/components/optionsSelectors/MetricSelector.test.ts
new file mode 100644
index 000000000..304100bf1
--- /dev/null
+++ b/report-viewer/tests/unit/components/optionsSelectors/MetricSelector.test.ts
@@ -0,0 +1,45 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import MetricSelector from '@/components/optionsSelectors/MetricSelector.vue'
+import { MetricType } from '@/model/MetricType'
+
+describe('OptionSelectorComponent', () => {
+  it('renders all options', async () => {
+    const wrapper = mount(MetricSelector, {
+      props: {
+        title: 'Test:'
+      }
+    })
+
+    expect(wrapper.text()).toContain('Test:')
+    expect(wrapper.text()).toContain('Average Similarity')
+    expect(wrapper.text()).toContain('Maximum Similarity')
+  })
+
+  it('renders given metrics only', async () => {
+    const wrapper = mount(MetricSelector, {
+      props: {
+        title: 'Test:',
+        metrics: [MetricType.AVERAGE]
+      }
+    })
+
+    expect(wrapper.text()).toContain('Test:')
+    expect(wrapper.text()).toContain('Average Similarity')
+    expect(wrapper.text()).not.toContain('Maximum Similarity')
+  })
+
+  it('switch selection', async () => {
+    const wrapper = mount(MetricSelector, {
+      props: {
+        title: 'Test:'
+      }
+    })
+
+    await wrapper.findAllComponents({ name: 'OptionComponent' })[1].trigger('click')
+
+    expect(wrapper.emitted('selectionChanged')).toBeTruthy()
+    expect(wrapper.emitted('selectionChanged')?.length).toBe(1)
+    expect(wrapper.emitted('selectionChanged')?.[0]).toEqual([MetricType.MAXIMUM])
+  })
+})
diff --git a/report-viewer/tests/unit/components/optionsSelectors/OptionSelectorComponent.test.ts b/report-viewer/tests/unit/components/optionsSelectors/OptionSelectorComponent.test.ts
new file mode 100644
index 000000000..8947c8050
--- /dev/null
+++ b/report-viewer/tests/unit/components/optionsSelectors/OptionSelectorComponent.test.ts
@@ -0,0 +1,70 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import OptionsSelectorComponent from '@/components/optionsSelectors/OptionsSelectorComponent.vue'
+import OptionComponent from '@/components/optionsSelectors/OptionComponent.vue'
+
+describe('OptionSelectorComponent', () => {
+  it('renders all options', async () => {
+    const wrapper = mount(OptionsSelectorComponent, {
+      props: {
+        title: 'Test:',
+        labels: ['Option 1', 'Option 2', 'Option 3'],
+        defaultSelected: 1
+      }
+    })
+
+    expect(wrapper.text()).toContain('Test:')
+    expect(wrapper.text()).toContain('Option 1')
+    expect(wrapper.text()).toContain('Option 2')
+    expect(wrapper.text()).toContain('Option 3')
+
+    expect(
+      wrapper
+        .findAllComponents(OptionComponent)
+        .find((e) => e.text() === 'Option 2')
+        ?.classes()
+    ).toContain('!bg-accent')
+  })
+
+  it('switch selection', async () => {
+    const wrapper = mount(OptionsSelectorComponent, {
+      props: {
+        title: 'Test:',
+        labels: ['Option 1', 'Option 2'],
+        defaultSelected: 0
+      }
+    })
+
+    expect(
+      wrapper
+        .findAllComponents(OptionComponent)
+        .find((e) => e.text() === 'Option 1')
+        ?.classes()
+    ).toContain('!bg-accent')
+    expect(
+      wrapper
+        .findAllComponents(OptionComponent)
+        .find((e) => e.text() === 'Option 2')
+        ?.classes()
+    ).not.toContain('!bg-accent')
+
+    await wrapper.findAllComponents({ name: 'OptionComponent' })[1].trigger('click')
+
+    expect(wrapper.emitted('selectionChanged')).toBeTruthy()
+    expect(wrapper.emitted('selectionChanged')?.length).toBe(1)
+    expect(wrapper.emitted('selectionChanged')?.[0]).toEqual([1])
+
+    expect(
+      wrapper
+        .findAllComponents(OptionComponent)
+        .find((e) => e.text() === 'Option 1')
+        ?.classes()
+    ).not.toContain('!bg-accent')
+    expect(
+      wrapper
+        .findAll('.cursor-pointer')
+        .find((e) => e.text() === 'Option 2')
+        ?.classes()
+    ).toContain('!bg-accent')
+  })
+})