diff --git a/.gitignore b/.gitignore
index c6bba59..caf544d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -128,3 +128,4 @@ dist
 .yarn/build-state.yml
 .yarn/install-state.gz
 .pnp.*
+.vercel
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index b1f7cfa..4e37a99 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,7 +1,7 @@
+import { Box } from "@chakra-ui/react"
 import type { Metadata } from "next"
 import { Inter } from "next/font/google"
 import { Providers } from "./providers"
-import { Box } from "@chakra-ui/react"
 
 const inter = Inter({ subsets: ["latin"] })
 
@@ -17,7 +17,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <Box as="body" className={inter.className} bgColor="#f0f0f0">
+      <Box as="body" className={inter.className}>
         <Providers>{children}</Providers>
       </Box>
     </html>
diff --git a/src/components/Section.tsx b/src/components/Section.tsx
index e4edc71..74451ef 100644
--- a/src/components/Section.tsx
+++ b/src/components/Section.tsx
@@ -1,20 +1,23 @@
-import { Flex } from "@chakra-ui/react"
+import { Flex, useColorModeValue } from "@chakra-ui/react"
 import { FC, PropsWithChildren } from "react"
 
-const Section: FC<PropsWithChildren> = ({ children }) => (
-  <Flex
-    bg="white"
-    flexDir="column"
-    gap="2"
-    w="full"
-    border="solid 1px"
-    borderColor="neutrals.300"
-    borderRadius="12"
-    p="4"
-    h="fit-content"
-  >
-    {children}
-  </Flex>
-)
+const Section: FC<PropsWithChildren> = ({ children }) => {
+  const values = useColorModeValue("neutrals.100", "neutrals.800")
+  return (
+    <Flex
+      bg={values}
+      flexDir="column"
+      gap="2"
+      w="full"
+      border="solid 1px"
+      borderColor="neutrals.300"
+      borderRadius="12"
+      p="4"
+      h="fit-content"
+    >
+      {children}
+    </Flex>
+  )
+}
 
 export { Section }
