diff --git a/src/components/DarkModeToggle.vue b/src/components/DarkModeToggle.vue
index ca25d1f5933366e9f56c1819d6c32694cdca6785..41a48913352f517b8b36249e784d40e7614955a8 100644
--- a/src/components/DarkModeToggle.vue
+++ b/src/components/DarkModeToggle.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-const mode = useColorMode()
+// Use builtin store of vueuse for storing the color mode
+const { store } = useColorMode()
 </script>
 
 <template>
@@ -18,15 +19,17 @@ const mode = useColorMode()
       </Button>
     </DropdownMenuTrigger>
     <DropdownMenuContent align="end">
-      <DropdownMenuItem @click="mode = 'light'">
-        Light
-      </DropdownMenuItem>
-      <DropdownMenuItem @click="mode = 'dark'">
-        Dark
-      </DropdownMenuItem>
-      <DropdownMenuItem @click="mode = 'auto'">
-        System
-      </DropdownMenuItem>
+      <DropdownMenuRadioGroup v-model="store">
+        <DropdownMenuRadioItem value="light">
+          Light
+        </DropdownMenuRadioItem>
+        <DropdownMenuRadioItem value="dark">
+          Dark
+        </DropdownMenuRadioItem>
+        <DropdownMenuRadioItem value="auto">
+          System
+        </DropdownMenuRadioItem>
+      </DropdownMenuRadioGroup>
     </DropdownMenuContent>
   </DropdownMenu>
 </template>