diff --git a/website/src/components/Tasks/CreateTask.tsx b/website/src/components/Tasks/CreateTask.tsx
index 07d4e64d..79d081ce 100644
--- a/website/src/components/Tasks/CreateTask.tsx
+++ b/website/src/components/Tasks/CreateTask.tsx
@@ -12,7 +12,7 @@ export const CreateTask = ({
   isDisabled,
   onReplyChanged,
 }: TaskSurveyProps<{ text: string }>) => {
-  const cardColor = useColorModeValue("gray.50", "gray.900");
+  const cardColor = useColorModeValue("gray.50", "gray.800");
   const titleColor = useColorModeValue("gray.800", "gray.300");
   const labelColor = useColorModeValue("gray.600", "gray.400");
 
diff --git a/website/src/components/Tasks/EvaluateTask.tsx b/website/src/components/Tasks/EvaluateTask.tsx
index 5c1c77ad..55aa4b3c 100644
--- a/website/src/components/Tasks/EvaluateTask.tsx
+++ b/website/src/components/Tasks/EvaluateTask.tsx
@@ -11,7 +11,7 @@ export const EvaluateTask = ({
   isDisabled,
   onReplyChanged,
 }: TaskSurveyProps<{ ranking: number[] }>) => {
-  const cardColor = useColorModeValue("gray.100", "gray.700");
+  const cardColor = useColorModeValue("gray.50", "gray.800");
   const titleColor = useColorModeValue("gray.800", "gray.300");
   const labelColor = useColorModeValue("gray.600", "gray.400");
 
diff --git a/website/src/components/Tasks/LabelTask.tsx b/website/src/components/Tasks/LabelTask.tsx
index aac0f416..b5b00cc4 100644
--- a/website/src/components/Tasks/LabelTask.tsx
+++ b/website/src/components/Tasks/LabelTask.tsx
@@ -32,7 +32,7 @@ export const LabelTask = ({
     setSliderValues(values);
   };
 
-  const cardColor = useColorModeValue("gray.100", "gray.700");
+  const cardColor = useColorModeValue("gray.50", "gray.800");
   const titleColor = useColorModeValue("gray.800", "gray.300");
   const labelColor = useColorModeValue("gray.600", "gray.400");