diff --git a/package.json b/package.json
index 6682153..be4d5f1 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "@astrojs/tailwind": "^5.1.4",
     "@astrojs/vue": "^5.0.4",
     "@googleapis/sheets": "^9.3.1",
+    "@headlessui/vue": "^1.7.23",
     "@iconify-json/material-symbols": "^1.2.12",
     "@vueuse/core": "^12.3.0",
     "astro": "^5.1.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ccd638f..8e5b74f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,6 +17,9 @@ importers:
       '@googleapis/sheets':
         specifier: ^9.3.1
         version: 9.3.1
+      '@headlessui/vue':
+        specifier: ^1.7.23
+        version: 1.7.23(vue@3.5.13(typescript@5.7.3))
       '@iconify-json/material-symbols':
         specifier: ^1.2.12
         version: 1.2.12
@@ -535,6 +538,12 @@ packages:
     resolution: {integrity: sha512-nPgzOiDs/FSFhE+dX2KfkmsmkXM3WfXYP06FoW8cXvHshwxHSI3FbXwe5XJYstDAWXP9YA7AMSvmwnuD4OAl2w==}
     engines: {node: '>=12.0.0'}
 
+  '@headlessui/vue@1.7.23':
+    resolution: {integrity: sha512-JzdCNqurrtuu0YW6QaDtR2PIYCKPUWq28csDyMvN4zmGccmE7lz40Is6hc3LA4HFeCI7sekZ/PQMTNmn9I/4Wg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      vue: ^3.2.0
+
   '@iconify-json/material-symbols@1.2.12':
     resolution: {integrity: sha512-2p2T13Kccy7R2HNbdiVsIcHxjp4s9a+iKlfbtt29hldG1pVNaPIlMALNA9bjdEwPjwsVFe06INCbjCRc68JysQ==}
 
@@ -828,6 +837,14 @@ packages:
     resolution: {integrity: sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==}
     engines: {node: '>=18'}
 
+  '@tanstack/virtual-core@3.11.2':
+    resolution: {integrity: sha512-vTtpNt7mKCiZ1pwU9hfKPhpdVO2sVzFQsxoVBGtOSHxlrRRzYr8iQ2TlwbAcRYCcEiZ9ECAM8kBzH0v2+VzfKw==}
+
+  '@tanstack/vue-virtual@3.11.2':
+    resolution: {integrity: sha512-y0b1p1FTlzxcSt/ZdGWY1AZ52ddwSU69pvFRYAELUSdLLxV8QOPe9dyT/KATO43UCb3DAwiyzi96h2IoYstBOQ==}
+    peerDependencies:
+      vue: ^2.7.0 || ^3.0.0
+
   '@types/cookie@0.6.0':
     resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==}
 
@@ -3104,6 +3121,11 @@ snapshots:
       - encoding
       - supports-color
 
+  '@headlessui/vue@1.7.23(vue@3.5.13(typescript@5.7.3))':
+    dependencies:
+      '@tanstack/vue-virtual': 3.11.2(vue@3.5.13(typescript@5.7.3))
+      vue: 3.5.13(typescript@5.7.3)
+
   '@iconify-json/material-symbols@1.2.12':
     dependencies:
       '@iconify/types': 2.0.0
@@ -3349,6 +3371,13 @@ snapshots:
 
   '@sindresorhus/merge-streams@4.0.0': {}
 
+  '@tanstack/virtual-core@3.11.2': {}
+
+  '@tanstack/vue-virtual@3.11.2(vue@3.5.13(typescript@5.7.3))':
+    dependencies:
+      '@tanstack/virtual-core': 3.11.2
+      vue: 3.5.13(typescript@5.7.3)
+
   '@types/cookie@0.6.0': {}
 
   '@types/debug@4.1.12':
diff --git a/src/assets/style.css b/src/assets/style.css
index 6f84aba..d4cdf6c 100644
--- a/src/assets/style.css
+++ b/src/assets/style.css
@@ -73,3 +73,14 @@ body {
     transform: translateX(20%);
   }
 }
+
+:root {
+  --popper-theme-background-color: theme(colors.gray.800);
+  --popper-theme-background-color-hover: theme(colors.gray.800);
+  --popper-theme-text-color: theme(colors.white);
+  --popper-theme-border-width: 0px;
+  --popper-theme-border-style: solid;
+  --popper-theme-border-radius: theme(borderRadius.md);
+  --popper-theme-padding: theme(spacing.4);
+  --popper-theme-box-shadow: theme(boxShadow.sm);
+}
diff --git a/src/components/AnswerButton.vue b/src/components/AnswerButton.vue
index a28bdd6..abb786b 100644
--- a/src/components/AnswerButton.vue
+++ b/src/components/AnswerButton.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import Popper from 'vue3-popper'
 import type { Answer } from '../content.config'
+import { answerLabels } from '../store'
 
 defineProps<{
   answer: Answer
-  label: string
-  partyAnswerExists: boolean
+  disabled: boolean
 }>()
 
 const emit = defineEmits<{
@@ -16,34 +16,16 @@ const emit = defineEmits<{
 <template>
   <div class="answer-button">
     <Popper
-      class="light"
-      :disabled="partyAnswerExists"
+      :disabled="!disabled"
       arrow
       :hover="true"
       placement="top"
       content="Diese Option ist nicht verfügbar, da keine Partei so abgestimmt hat."
     >
-      <button
-        class="btn"
-        @click="emit('save', answer)"
-        :disabled="!partyAnswerExists"
-      >
+      <button class="btn" @click="emit('save', answer)" :disabled="disabled">
         <slot class="me-1" />
-        {{ label }}
+        {{ answerLabels[answer] }}
       </button>
     </Popper>
   </div>
 </template>
-
-<style scoped>
-.answer-button {
-  --popper-theme-background-color: theme(colors.gray.800);
-  --popper-theme-background-color-hover: theme(colors.gray.800);
-  --popper-theme-text-color: theme(colors.white);
-  --popper-theme-border-width: 0px;
-  --popper-theme-border-style: solid;
-  --popper-theme-border-radius: theme(borderRadius.md);
-  --popper-theme-padding: theme(spacing.4);
-  --popper-theme-box-shadow: theme(boxShadow.sm);
-}
-</style>
diff --git a/src/components/AnswerIndicator.vue b/src/components/AnswerIndicator.vue
new file mode 100644
index 0000000..a185c49
--- /dev/null
+++ b/src/components/AnswerIndicator.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import Popper from 'vue3-popper'
+import type { Answer } from '../content.config'
+import IconLess from '~icons/material-symbols/stat-minus-2-rounded'
+import IconMore from '~icons/material-symbols/stat-2-rounded'
+import IconRight from '~icons/material-symbols/check-rounded'
+import IconUnknown from '~icons/material-symbols/shield-question-outline-rounded'
+import IconNeutral from '~icons/material-symbols/circle-outline'
+import { answerLabels } from '../store'
+
+defineProps<{
+  answer: Answer
+}>()
+
+const styles: Record<Answer, any> = {
+  'zu weit': { icon: IconLess, class: 'bg-red-500' },
+  richtig: { icon: IconRight, class: 'bg-green-500' },
+  'nicht weit genug': { icon: IconMore, class: 'bg-orange-500' },
+  '/': { icon: IconUnknown, class: 'bg-gray-600' },
+  '-': { icon: IconNeutral, class: 'bg-gray-700' },
+}
+</script>
+
+<template>
+  <Popper arrow :hover="true" placement="top" :content="answerLabels[answer]">
+    <div
+      class="w-8 h-8 text-white rounded-full flex items-center justify-center"
+      :class="[styles[answer].class]"
+    >
+      <component :is="styles[answer].icon" class="w-6 h-6" />
+    </div>
+  </Popper>
+</template>
diff --git a/src/components/Results.vue b/src/components/Results.vue
deleted file mode 100644
index 67f829a..0000000
--- a/src/components/Results.vue
+++ /dev/null
@@ -1,102 +0,0 @@
-<script lang="ts" setup>
-import { computed } from 'vue'
-import type { Party, Question } from '../content.config'
-import { answers, partyNames, weightedTopics } from '../store'
-
-const props = defineProps<{
-  questions: Question[]
-}>()
-
-const partyMatches = computed(() => {
-  const results: Record<Party, number> = {
-    spd: 0,
-    cdu: 0,
-    fdp: 0,
-    gruene: 0,
-    bsw: 0,
-    linke: 0,
-    afd: 0,
-  }
-
-  let denominator = 0
-
-  for (const question of props.questions) {
-    const userAnswer = answers.value[question.id]?.answer
-    if (!userAnswer) continue
-
-    for (const { answer: partyAnswer, party } of question.answers) {
-      if (userAnswer === partyAnswer) {
-        if (weightedTopics.value.includes(question.category)) {
-          results[party] += 2
-        } else {
-          results[party] += 1
-        }
-      }
-    }
-
-    denominator += weightedTopics.value.includes(question.category) ? 2 : 1
-  }
-
-  console.log(answerCount.value, denominator)
-
-  return Object.entries(results)
-    .map(([party, score]) => ({
-      party: partyNames[party as Party],
-      score,
-      percentage: (score / denominator) * 100,
-    }))
-    .sort((a, b) => b.score - a.score)
-})
-
-const answerCount = computed(() => Object.values(answers.value).length)
-</script>
-
-<template>
-  <div class="p-4 bg-white">
-    <h2 class="text-4xl font-medium">Ihr Real-O-Mat Ergebnis</h2>
-    <div class="my-4">
-      <dl class="grid items-center mt-2 gap-x-4 gap-y-8">
-        <template v-for="{ party, percentage } in partyMatches" :key="party">
-          <dt class="md:text-xl font-medium text-nowrap">
-            {{ party }}
-          </dt>
-          <dd class="flex items-center space-x-4">
-            <div class="flex-1">
-              <div class="bg-blue-100 rounded-full overflow-hidden">
-                <div
-                  class="h-3 bg-blue-900 progress-result"
-                  :style="{
-                    width: `${percentage}%`,
-                  }"
-                />
-              </div>
-            </div>
-
-            <span>{{ Math.round(percentage) }}%</span>
-          </dd>
-        </template>
-      </dl>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-dl {
-  grid-template-columns: min-content auto;
-}
-
-.progress-result {
-  animation: result-bar 1s cubic-bezier(0, 0, 0.2, 1);
-  transform-origin: left;
-}
-
-@keyframes result-bar {
-  from {
-    transform: scaleX(0);
-  }
-
-  to {
-    transform: scaleX(1);
-  }
-}
-</style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 7e115a9..9a834bb 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,7 +1,7 @@
 ---
 import { getCollection } from 'astro:content'
 import Layout from '../layouts/Layout.astro'
-import App from '../components/App.vue'
+import App from './index.vue'
 
 const questions = (await getCollection('questions')).map((q) => q.data)
 ---
diff --git a/src/components/App.vue b/src/pages/index.vue
similarity index 94%
rename from src/components/App.vue
rename to src/pages/index.vue
index 462c380..daec42f 100644
--- a/src/components/App.vue
+++ b/src/pages/index.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
-import Questionnaire from './Questionnaire.vue'
-import Results from './Results.vue'
-import Weights from './Weights.vue'
+import Questionnaire from '../views/Questionnaire.vue'
+import Results from '../views/Results.vue'
+import Weights from '../views/Weights.vue'
 import type { Question } from '../content.config'
 import {
   answers,
@@ -14,7 +14,7 @@ import {
 import IconBack from '~icons/material-symbols/arrow-back'
 import IconRestart from '~icons/material-symbols/restart-alt-rounded'
 
-const props = defineProps<{
+defineProps<{
   questions: Question[]
 }>()
 
@@ -62,6 +62,7 @@ const previousStage = () => {
       </p>
       <button class="btn text-4xl mt-4" @click="nextStage">Los geht's!</button>
     </div>
+
     <Questionnaire
       v-else-if="currentStage === Stage.Questionnaire"
       :questions="questions"
@@ -69,11 +70,13 @@ const previousStage = () => {
       @previous="previousStage"
       @reset="confirmReset"
     />
+
     <Weights
       v-else-if="currentStage === Stage.Weights"
       :questions="questions"
       @done="nextStage"
     />
+
     <Results v-else :questions="questions" />
   </Transition>
 
@@ -85,6 +88,7 @@ const previousStage = () => {
       <IconBack class="me-1" />
       Zurück
     </button>
+
     <button @click="confirmReset" class="btn-text ms-auto">
       <IconRestart class="me-1" />
       Neustarten
diff --git a/src/store.ts b/src/store.ts
index 5cdd0eb..98b2202 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -10,6 +10,14 @@ export const answers = useStorage(
   {} as Record<string, UserPosition>,
 )
 
+export const answerLabels: Record<Answer, string> = {
+  'zu weit': 'nein, geht mir zu weit',
+  richtig: 'ja, finde ich auch',
+  'nicht weit genug': 'nein, reicht mir nicht aus',
+  '/': 'keine Antwort vorhanden',
+  '-': 'neutral',
+}
+
 export const weightedTopics = useStorage('realomat-weights', [] as string[])
 
 export const currentQuestionIndex = useStorage('realomat-current-question', 0)
@@ -32,3 +40,5 @@ export const partyNames: Record<Party, string> = {
   linke: 'Die Linke',
   afd: 'AFD',
 }
+
+export const parties = Object.keys(partyNames) as Party[]
diff --git a/src/components/Questionnaire.vue b/src/views/Questionnaire.vue
similarity index 84%
rename from src/components/Questionnaire.vue
rename to src/views/Questionnaire.vue
index b5e682f..ecd62de 100644
--- a/src/components/Questionnaire.vue
+++ b/src/views/Questionnaire.vue
@@ -8,7 +8,7 @@ import IconRestart from '~icons/material-symbols/restart-alt-rounded'
 import IconLess from '~icons/material-symbols/stat-minus-2-rounded'
 import IconMore from '~icons/material-symbols/stat-2-rounded'
 import IconRight from '~icons/material-symbols/check-rounded'
-import AnswerButton from './AnswerButton.vue'
+import AnswerButton from '../components/AnswerButton.vue'
 
 const props = defineProps<{
   questions: Question[]
@@ -27,6 +27,22 @@ const currentQuestion = computed(
 )
 const questionsCount = computed(() => props.questions.length)
 
+const answerButtons = computed(() => {
+  const buttons: Record<string, any> = {
+    'zu weit': { icon: IconLess },
+    richtig: { icon: IconRight },
+    'nicht weit genug': { icon: IconMore },
+  }
+
+  for (const button in buttons) {
+    buttons[button].disabled = !currentQuestion.value!.answers.some(
+      (a) => a.answer === button,
+    )
+  }
+
+  return buttons
+})
+
 const transitionName = ref('slide')
 
 const nextQuestion = () => {
@@ -129,32 +145,15 @@ watch(currentQuestion, () => {
             :key="currentQuestionIndex"
           >
             <AnswerButton
-              answer="zu weit"
-              label="nein, geht mir zu weit"
-              :party-answer-exists="partyAnswerExists('zu weit')"
+              :answer="answer as Answer"
               @save="saveAnswer"
-              accesskey="1"
+              :accesskey="i + 1"
+              :disabled="disabled"
+              v-for="({ disabled, icon }, answer, i) in answerButtons"
             >
-              <IconLess />
-            </AnswerButton>
-            <AnswerButton
-              answer="richtig"
-              label="ja, finde ich auch"
-              :party-answer-exists="partyAnswerExists('richtig')"
-              @save="saveAnswer"
-              accesskey="2"
-            >
-              <IconRight />
-            </AnswerButton>
-            <AnswerButton
-              answer="nicht weit genug"
-              label="nein, reicht mir nicht aus"
-              :party-answer-exists="partyAnswerExists('nicht weit genug')"
-              @save="saveAnswer"
-              accesskey="3"
-            >
-              <IconMore />
+              <component :is="icon" />
             </AnswerButton>
+
             <div class="!ms-auto self-center max-md:pt-4">
               <button @click="skipQuestion" class="btn-text">
                 These überspringen <IconForward class="ms-1" />
diff --git a/src/views/Results.vue b/src/views/Results.vue
new file mode 100644
index 0000000..8b6fa61
--- /dev/null
+++ b/src/views/Results.vue
@@ -0,0 +1,192 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
+import type { Party, Question } from '../content.config'
+import { answers, parties, partyNames, weightedTopics } from '../store'
+import IconChart from '~icons/material-symbols/bar-chart-4-bars-rounded'
+import IconScale from '~icons/material-symbols/balance-rounded'
+import IconComment from '~icons/material-symbols/comment-outline-rounded'
+import AnswerIndicator from '../components/AnswerIndicator.vue'
+
+const props = defineProps<{
+  questions: Question[]
+}>()
+
+const partyMatches = computed(() => {
+  const results: Record<Party, number> = {
+    spd: 0,
+    cdu: 0,
+    fdp: 0,
+    gruene: 0,
+    bsw: 0,
+    linke: 0,
+    afd: 0,
+  }
+
+  let denominator = 0
+
+  for (const question of props.questions) {
+    const userAnswer = answers.value[question.id]?.answer
+    if (!userAnswer) continue
+
+    for (const { answer: partyAnswer, party } of question.answers) {
+      if (userAnswer === partyAnswer) {
+        if (weightedTopics.value.includes(question.category)) {
+          results[party] += 2
+        } else {
+          results[party] += 1
+        }
+      }
+    }
+
+    denominator += weightedTopics.value.includes(question.category) ? 2 : 1
+  }
+
+  console.log(answerCount.value, denominator)
+
+  return Object.entries(results)
+    .map(([party, score]) => ({
+      party: partyNames[party as Party],
+      score,
+      percentage: (score / denominator) * 100,
+    }))
+    .sort((a, b) => b.score - a.score)
+})
+
+const answerCount = computed(() => Object.values(answers.value).length)
+</script>
+
+<template>
+  <div class="">
+    <TabGroup>
+      <TabList class="flex rounded-t-lg bg-blue-900/50 p-1">
+        <Tab as="template" v-slot="{ selected }">
+          <button class="tab-button" :class="{ selected: selected }">
+            <IconChart />
+            Ergebnis
+          </button>
+        </Tab>
+        <Tab as="template" v-slot="{ selected }">
+          <button class="tab-button" :class="{ selected: selected }">
+            <IconScale />
+            Vergleich
+          </button>
+        </Tab>
+        <Tab as="template" v-slot="{ selected }">
+          <button class="tab-button" :class="{ selected: selected }">
+            <IconComment />
+            Begründungen
+          </button>
+        </Tab>
+      </TabList>
+      <TabPanels class="p-4 bg-white">
+        <TabPanel>
+          <h2 class="text-4xl font-medium">Ihr Real-O-Mat Ergebnis</h2>
+          <div class="my-4">
+            <dl class="grid items-center mt-2 gap-x-4 gap-y-8">
+              <template
+                v-for="{ party, percentage } in partyMatches"
+                :key="party"
+              >
+                <dt class="md:text-xl font-medium text-nowrap">
+                  {{ party }}
+                </dt>
+                <dd class="flex items-center space-x-4">
+                  <div class="flex-1">
+                    <div class="bg-blue-100 rounded-full overflow-hidden">
+                      <div
+                        class="h-3 bg-blue-900 progress-result"
+                        :style="{
+                          width: `${percentage}%`,
+                        }"
+                      />
+                    </div>
+                  </div>
+
+                  <span>{{ Math.round(percentage) }}%</span>
+                </dd>
+              </template>
+            </dl>
+          </div>
+        </TabPanel>
+        <TabPanel>
+          <h2 class="text-4xl font-medium">Vergleich</h2>
+          <p class="mt-4">
+            Hier können Sie die Ergebnisse des Real-O-Mat mit den Positionen der
+            Parteien vergleichen.
+          </p>
+
+          <div class="max-md:overflow-auto">
+            <table class="grid grid-cols-12">
+              <thead class="contents">
+                <tr class="contents">
+                  <th class="text-start pe-4 col-span-3">These</th>
+                  <th class="text-start pe-4">Ihre Position</th>
+                  <th
+                    class="text-start pe-4"
+                    v-for="party in partyNames"
+                    :key="party"
+                  >
+                    {{ party }}
+                  </th>
+                </tr>
+              </thead>
+              <tbody class="contents">
+                <tr
+                  class="contents"
+                  v-for="question in questions"
+                  :key="question.id"
+                >
+                  <td class="py-4 col-span-3">{{ question.thesis }}</td>
+                  <td class="py-4">
+                    <AnswerIndicator
+                      :answer="answers[question.id]?.answer ?? '/'"
+                    />
+                  </td>
+                  <td class="py-4" v-for="party in parties" :key="party">
+                    <AnswerIndicator
+                      :answer="
+                        question.answers.find((a) => a.party === party)!.answer
+                      "
+                    />
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </TabPanel>
+        <TabPanel>Content 3</TabPanel>
+      </TabPanels>
+    </TabGroup>
+  </div>
+</template>
+
+<style scoped>
+.tab-button {
+  @apply flex flex-col items-center flex-1 w-full py-1 rounded text-white;
+  @apply focus:ring focus:ring-blue-900 outline-none motion-safe:transition motion-safe:duration-200;
+}
+
+.tab-button.selected {
+  @apply bg-white text-blue-800;
+}
+
+dl {
+  grid-template-columns: min-content auto;
+}
+
+.progress-result {
+  animation: result-bar 1s cubic-bezier(0, 0, 0.2, 1);
+  transform-origin: left;
+}
+
+@keyframes result-bar {
+  from {
+    transform: scaleX(0);
+  }
+
+  to {
+    transform: scaleX(1);
+  }
+}
+</style>
diff --git a/src/components/Weights.vue b/src/views/Weights.vue
similarity index 64%
rename from src/components/Weights.vue
rename to src/views/Weights.vue
index cef5c21..2b3b55b 100644
--- a/src/components/Weights.vue
+++ b/src/views/Weights.vue
@@ -60,13 +60,18 @@ input[type='checkbox'] {
 }
 
 input[type='checkbox']::before {
-  content: '';
-  @apply flex motion-safe:transition-opacity motion-safe:duration-150 opacity-0 absolute inset-0 text-lg rounded-full items-center justify-center text-white bg-gray-800;
-  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTAgMTdIN3EtLjgyNSAwLTEuNDEyLS41ODdUNSAxNXYtMnEwLS44MjUuNTg4LTEuNDEyVDcgMTFoMlY5SDZxLS40MjUgMC0uNzEyLS4yODhUNSA4dC4yODgtLjcxMlQ2IDdoM3EuODI1IDAgMS40MTMuNTg4VDExIDl2MnEwIC44MjUtLjU4NyAxLjQxM1Q5IDEzSDd2MmgzcS40MjUgMCAuNzEzLjI4OFQxMSAxNnQtLjI4OC43MTNUMTAgMTdtNi0zLjMyNWwtMS43NSAyLjlxLS4xMjUuMi0uMzEyLjMxM3QtLjQxMy4xMTJxLS41IDAtLjc2My0uNDM3dC4wMTMtLjg2M0wxNSAxMmwtMi4yMjUtMy43cS0uMjc1LS40MjUtLjAxMi0uODYyVDEzLjUyNSA3cS4yMjUgMCAuNDEzLjExM3QuMzEyLjMxMmwxLjc1IDIuOWwxLjc1LTIuOXEuMTI1LS4yLjMxMy0uMzEyVDE4LjQ3NSA3cS41IDAgLjc2My40Mzh0LS4wMTMuODYyTDE3IDEybDIuMjI1IDMuN3EuMjc1LjQyNS4wMTMuODYzdC0uNzYzLjQzN3EtLjIyNSAwLS40MTMtLjExMnQtLjMxMi0uMzEzeiIvPjwvc3ZnPg==');
+  content: 'x2';
+  @apply flex motion-safe:transition motion-safe:duration-150 absolute inset-0 rounded-full items-center justify-center text-gray-500 opacity-0;
   background-size: 100%;
 }
 
-input[type='checkbox']::before:checked {
+input[type='checkbox']:checked::before,
+input[type='checkbox']:hover::before,
+input[type='checkbox']:focus::before {
   @apply opacity-100;
 }
+
+input[type='checkbox']::before:checked {
+  @apply text-white bg-gray-800;
+}
 </style>