diff --git a/src/components/UI/Header.tsx b/src/components/UI/Header.tsx
index 78bd77f3be..4df7e9ad65 100644
--- a/src/components/UI/Header.tsx
+++ b/src/components/UI/Header.tsx
@@ -100,6 +100,10 @@ export const Header: FC = () => {
           borderRight={{ base: '2px', md: 'none' }}
           borderColor='primary'
           onClick={toggleColorMode}
+          _hover={{
+            bg: 'primary',
+            svg: { color: 'bg' }
+          }}
         >
           {isDark ? <SunIcon color='primary' /> : <MoonIcon color='primary' />}
         </Box>