diff --git a/components/builder/left-column.tsx b/components/builder/left-column.tsx
index 6bc9e63..591e1dd 100644
--- a/components/builder/left-column.tsx
+++ b/components/builder/left-column.tsx
@@ -10,6 +10,7 @@ import {
   SimpleGrid,
   Spacer,
   Text,
+  useColorModeValue,
 } from '@chakra-ui/react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
@@ -28,7 +29,7 @@ const LeftColumn = (props: Props) => {
 
   return (
     <Box
-      bg="gray.700"
+      bg={useColorModeValue('gray.200', 'gray.700')}
       px="10"
       py="5"
       minWidth="350"
diff --git a/components/builder/right-column/overview.tsx b/components/builder/right-column/overview.tsx
index 56b9c1c..6645c06 100644
--- a/components/builder/right-column/overview.tsx
+++ b/components/builder/right-column/overview.tsx
@@ -10,6 +10,7 @@ import {
   Th,
   Thead,
   Tr,
+  useColorModeValue,
   useDisclosure,
 } from '@chakra-ui/react'
 import React from 'react'
@@ -47,7 +48,7 @@ const Overview = (props: Props) => {
           </Button>
         </Box>
         {props.customRule.description !== '' && <Text mb="5">{props.customRule.description}</Text>}
-        <Box backgroundColor="gray.700" borderRadius="5" mb="10">
+        <Box backgroundColor={useColorModeValue('gray.200', 'gray.700')} borderRadius="5" mb="10">
           <Box display="flex" alignItems="center" flexDirection="row" m="5">
             <Text flex="1" fontWeight="semibold">
               {t('builder.rules.immunization')}
diff --git a/components/builder/right-column/rule.tsx b/components/builder/right-column/rule.tsx
index 7dc3886..68a3451 100644
--- a/components/builder/right-column/rule.tsx
+++ b/components/builder/right-column/rule.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Flex, Text } from '@chakra-ui/react'
+import { Box, Button, Flex, Text, useColorModeValue } from '@chakra-ui/react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { CertificateRule, immunizationTypeName } from '../../../utils/certlogic'
@@ -13,7 +13,7 @@ type Props = {
 const Rule = (props: Props) => {
   const { t } = useTranslation('common')
   return (
-    <Box borderRadius="10" backgroundColor="gray.700" padding="5">
+    <Box borderRadius="10" backgroundColor={useColorModeValue('gray.200', 'gray.700')} padding="5">
       <Flex>
         <Box flex="1" display="flex" flexDireaction="row" alignItems="center">
           <Box>
diff --git a/pages/builder.tsx b/pages/builder.tsx
index 3a7f77a..775d760 100644
--- a/pages/builder.tsx
+++ b/pages/builder.tsx
@@ -51,7 +51,7 @@ const BuilderPage = () => {
   return (
     <>
       <PageMeta allowIndex={false} />
-      <Flex color="white" height="100vh">
+      <Flex height="100vh">
         <LeftColumn
           customRule={currentCustomRule}
           onCreate={onCreate}
diff --git a/utils/builder-state-rules-de.json b/utils/builder-state-rules-de.json
index 025ba47..57ff89b 100644
--- a/utils/builder-state-rules-de.json
+++ b/utils/builder-state-rules-de.json
@@ -51,7 +51,7 @@
             },
             {
               "lang": "de",
-              "desc": "Die Probenahme für einen NAA-Test (z.B. PCR) darf maximal 72 Stunden zurückliegen."
+              "desc": "Die Probenahme für einen NAA-Test (z.B. PCR) darf maximal 48 Stunden zurückliegen."
             }
           ],
           "validTo": 48