diff --git a/frontend/src/components/dashboard/FuryDashboard.tsx b/frontend/src/components/dashboard/FuryDashboard.tsx
index 630af41..f52aa4c 100644
--- a/frontend/src/components/dashboard/FuryDashboard.tsx
+++ b/frontend/src/components/dashboard/FuryDashboard.tsx
@@ -12,6 +12,7 @@ import {
   Table,
   Text,
   VStack,
+  useColorModeValue,
 } from "@chakra-ui/react"
 import { useQuery } from "@tanstack/react-query"
 
@@ -261,27 +262,27 @@ function FuryDashboard() {
                 </Box>
 
                 <SimpleGrid columns={3} gap={3}>
-                  <Box bg="gray.50" borderRadius="md" p={3}>
-                    <Text color="gray.500" fontSize="xs" textTransform="uppercase">
+                  <Box bg={useColorModeValue("gray.50", "gray.700")} borderRadius="md" p={3}>
+                    <Text color={useColorModeValue("gray.500", "gray.400")} fontSize="xs" textTransform="uppercase">
                       Average
                     </Text>
-                    <Text fontWeight="semibold" mt={1}>
+                    <Text fontWeight="semibold" mt={1} color={useColorModeValue("gray.900", "white")}>
                       {formatValue(metric.summary.average, metric.unit)}
                     </Text>
                   </Box>
-                  <Box bg="gray.50" borderRadius="md" p={3}>
-                    <Text color="gray.500" fontSize="xs" textTransform="uppercase">
+                  <Box bg={useColorModeValue("gray.50", "gray.700")} borderRadius="md" p={3}>
+                    <Text color={useColorModeValue("gray.500", "gray.400")} fontSize="xs" textTransform="uppercase">
                       Low
                     </Text>
-                    <Text fontWeight="semibold" mt={1}>
+                    <Text fontWeight="semibold" mt={1} color={useColorModeValue("gray.900", "white")}>
                       {formatValue(metric.summary.min, metric.unit)}
                     </Text>
                   </Box>
-                  <Box bg="gray.50" borderRadius="md" p={3}>
-                    <Text color="gray.500" fontSize="xs" textTransform="uppercase">
+                  <Box bg={useColorModeValue("gray.50", "gray.700")} borderRadius="md" p={3}>
+                    <Text color={useColorModeValue("gray.500", "gray.400")} fontSize="xs" textTransform="uppercase">
                       High
                     </Text>
-                    <Text fontWeight="semibold" mt={1}>
+                    <Text fontWeight="semibold" mt={1} color={useColorModeValue("gray.900", "white")}>
                       {formatValue(metric.summary.max, metric.unit)}
                     </Text>
                   </Box>