diff --git a/website/src/components/AuthLayout.tsx b/website/src/components/AuthLayout.tsx
index 3e45dd65..08b5378a 100644
--- a/website/src/components/AuthLayout.tsx
+++ b/website/src/components/AuthLayout.tsx
@@ -1,11 +1,14 @@
+import { Box, useColorModeValue } from "@chakra-ui/react";
+
 export function AuthLayout({ children }) {
+  const backgroundColor = useColorModeValue("#FFFFFF", "#000000");
   return (
-    <main className="flex items-center justify-center sm:py-4 subpixel-antialiased">
+    <Box backgroundColor={backgroundColor} className="flex items-center justify-center sm:py-4 subpixel-antialiased">
       <div className="flex items-center w-full max-w-2xl flex-col px-4 sm:px-6">
         <div className="flex-auto items-center justify-center w-full py-10 px-4 sm:mx-0 sm:flex-none sm:rounded-2xl sm:p-4">
           {children}
         </div>
       </div>
-    </main>
+    </Box>
   );
 }