diff --git a/website/src/pages/404.tsx b/website/src/pages/404.tsx
index 0af430b0..cd43916d 100644
--- a/website/src/pages/404.tsx
+++ b/website/src/pages/404.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Center, Link, Text } from "@chakra-ui/react";
+import { Box, Button, Center, Link, Text, useColorMode } from "@chakra-ui/react";
 import { AlertTriangle } from "lucide-react";
 import Head from "next/head";
 import { EmptyState } from "src/components/EmptyState";
@@ -6,19 +6,21 @@ import { getTransparentHeaderLayout } from "src/components/Layout";
 export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
 
 function Error() {
+  const { colorMode } = useColorMode();
+  const titleColor = colorMode === "light" ? "blue.500" : "blue.300";
   return (
     <>
       <Head>
         <title>404 - Open Assistant</title>
         <meta name="404" content="Sorry, this page doesn't exist." />
       </Head>
-      <Center flexDirection="column" gap="4" fontSize="lg" className="subpixel-antialiased">
+      <Center flexDirection="column" gap="4" fontSize="lg" className="subpixel-antialiased oa-basic-theme">
         <EmptyState text="Sorry, the page you are looking for does not exist." icon={AlertTriangle} />
         <Box display="flex" flexDirection="column" alignItems="center" gap="2" mt="6">
           <Text fontSize="sm">If you were trying to contribute data but ended up here, please file a bug.</Text>
           <Button
             width="fit-content"
-            leftIcon={<AlertTriangle size={"1em"} className="text-blue-500" aria-hidden="true" />}
+            leftIcon={<AlertTriangle size={"1em"} color={titleColor} aria-hidden="true" />}
             variant="solid"
             size="xs"
           >
diff --git a/website/src/pages/500.tsx b/website/src/pages/500.tsx
index cb326168..1ca7d11e 100644
--- a/website/src/pages/500.tsx
+++ b/website/src/pages/500.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Center, Link, Text } from "@chakra-ui/react";
+import { Box, Button, Center, Link, Text, useColorMode } from "@chakra-ui/react";
 import { AlertTriangle } from "lucide-react";
 import Head from "next/head";
 import { EmptyState } from "src/components/EmptyState";
@@ -6,19 +6,22 @@ import { getTransparentHeaderLayout } from "src/components/Layout";
 export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
 
 function ServerError() {
+  const { colorMode } = useColorMode();
+  const backgroundColor = colorMode === "light" ? "white" : "gray.700";
+  const titleColor = colorMode === "light" ? "blue.500" : "blue.300";
   return (
     <>
       <Head>
         <title>500 - Open Assistant</title>
         <meta name="404" content="Sorry, this page doesn't exist." />
       </Head>
-      <Center flexDirection="column" gap="4" fontSize="lg" className="subpixel-antialiased">
+      <Center flexDirection="column" gap="4" fontSize="lg" className="subpixel-antialiased oa-basic-theme">
         <EmptyState text="Sorry, we encountered a server error. We're not sure what went wrong." icon={AlertTriangle} />
         <Box display="flex" flexDirection="column" alignItems="center" gap="2" mt="6">
           <Text fontSize="sm">If you were trying to contribute data but ended up here, please file a bug.</Text>
           <Button
             width="fit-content"
-            leftIcon={<AlertTriangle size="1em" className="text-blue-500" aria-hidden="true" />}
+            leftIcon={<AlertTriangle size="1em" color={titleColor} aria-hidden="true" />}
             variant="solid"
             size="xs"
           >
