diff --git a/components/ColorSchemeToggle/ColorSchemeToggle.tsx b/components/ColorSchemeToggle/ColorSchemeToggle.tsx
index 0cb616e3b..408676c3b 100644
--- a/components/ColorSchemeToggle/ColorSchemeToggle.tsx
+++ b/components/ColorSchemeToggle/ColorSchemeToggle.tsx
@@ -1,4 +1,4 @@
-import { ActionIcon, useMantineColorScheme } from '@mantine/core';
+import { ActionIcon, Box, useMantineColorScheme } from '@mantine/core';
 import { Sun, MoonStars } from 'tabler-icons-react';
 import { motion } from 'framer-motion';
 
@@ -14,15 +14,15 @@ export function ColorSchemeToggle() {
         borderRadius: '100%',
       }}
     >
-      <ActionIcon
+      <Box
         onClick={() => toggleColorScheme()}
-        size="xl"
         sx={(theme) => ({
+          cursor: "pointer",
           color: theme.colorScheme === 'dark' ? theme.colors.yellow[4] : theme.colors.blue[6],
         })}
       >
         {colorScheme === 'dark' ? <Sun size={24} /> : <MoonStars size={24} />}
-      </ActionIcon>
+      </Box>
     </motion.div>
   );
 }