diff --git a/website/src/components/EmptyState.tsx b/website/src/components/EmptyState.tsx
index aa50bd9f..8d82163c 100644
--- a/website/src/components/EmptyState.tsx
+++ b/website/src/components/EmptyState.tsx
@@ -1,5 +1,6 @@
-import { Center, Text, useColorMode, useColorModeValue } from "@chakra-ui/react";
-import { FiFileText } from "react-icons/fi";
+import { Box, Link, Text, useColorModeValue } from "@chakra-ui/react";
+import { useRouter } from "next/router";
+import { FiAlertTriangle } from "react-icons/fi";
 import { IconType } from "react-icons/lib";
 
 type EmptyStateProps = {
@@ -8,25 +9,26 @@ type EmptyStateProps = {
 };
 
 export const EmptyState = (props: EmptyStateProps) => {
-  const { colorMode } = useColorMode();
-  const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-900" : "bg-slate-900 text-white";
-
-  const widgetClasses = useColorModeValue("border-gray-700 text-gray-700", "border-gray-300 text-gray-300");
+  const backgroundColor = useColorModeValue("white", "gray.800");
+  const router = useRouter();
 
   return (
-    <div className={`p-12 ${mainBgClasses}`}>
-      <Center>
-        <div className={`block border-2 border-dotted rounded-lg p-24 text-center ${widgetClasses}`}>
-          <props.icon className="mx-auto h-16 w-16" />
-          <Text fontFamily="inter" fontSize="2xl">
-            {props.text}
-          </Text>
-        </div>
-      </Center>
-    </div>
+    <Box bg={backgroundColor} p="10" borderRadius="xl" shadow="base">
+      <Box display="flex" flexDirection="column" alignItems="center" gap="8" fontSize="lg">
+        <props.icon size="30" color="DarkOrange" />
+        <Text>{props.text}</Text>
+        <Link onClick={() => router.back()} color="blue.500" textUnderlineOffset="3px">
+          <Text>Click here to go back</Text>
+        </Link>
+      </Box>
+    </Box>
   );
 };
 
 export const TaskEmptyState = () => {
-  return <EmptyState text="No tasks found!" icon={FiFileText} />;
+  return <EmptyState text="Looks like no tasks were found." icon={FiAlertTriangle} />;
+};
+
+export const PageEmptyState = () => {
+  return <EmptyState text="Sorry, the page you are looking for does not exist." icon={FiAlertTriangle} />;
 };
diff --git a/website/src/components/Loading/LoadingScreen.jsx b/website/src/components/Loading/LoadingScreen.jsx
index 3aad717f..645544e6 100644
--- a/website/src/components/Loading/LoadingScreen.jsx
+++ b/website/src/components/Loading/LoadingScreen.jsx
@@ -1,14 +1,12 @@
 import { Box, Center, Progress, Text, useColorModeValue } from "@chakra-ui/react";
 
 export const LoadingScreen = ({ text = "Loading..." } = {}) => {
-  const mainBgClasses = useColorModeValue("bg-slate-300 text-gray-900", "bg-slate-900 text-white");
-
   return (
-    <Box width="full" className={mainBgClasses}>
+    <Box width="full">
       <Progress size="sm" isIndeterminate />
       {text && (
-        <Center width="full" className="p-12">
-          <Text fontFamily="Inter">{text}</Text>
+        <Center width="full" p="12">
+          <Text>{text}</Text>
         </Center>
       )}
     </Box>
diff --git a/website/src/pages/404.tsx b/website/src/pages/404.tsx
index aae1db0f..c3d01510 100644
--- a/website/src/pages/404.tsx
+++ b/website/src/pages/404.tsx
@@ -1,32 +1,47 @@
-import { Button, Link, Stack } from "@chakra-ui/react";
+import { Box, Button, Center, Link, Text, useColorModeValue } from "@chakra-ui/react";
 import Head from "next/head";
-import NextLink from "next/link";
+import { useRouter } from "next/router";
 import { FiAlertTriangle } from "react-icons/fi";
+import { PageEmptyState } from "src/components/EmptyState";
+import { getTransparentHeaderLayout } from "src/components/Layout";
+
+function Error() {
+  const router = useRouter();
+  const backgroundColor = useColorModeValue("white", "gray.800");
 
-export default function Error() {
   return (
     <>
       <Head>
         <title>404 - Open Assistant</title>
         <meta name="404" content="Sorry, this page doesn't exist." />
       </Head>
-      <main className="flex h-3/4 items-center justify-center overflow-hidden subpixel-antialiased text-xl">
-        <Stack>
-          <p>Sorry, the page you are looking for does not exist.</p>
-          <p>If you were trying to contribute data but ended up here, please file a bug</p>
-          <Button leftIcon={<FiAlertTriangle className="text-blue-500" aria-hidden="true" />} variant="solid">
+      <Center flexDirection="column" gap="4" fontSize="lg" className="subpixel-antialiased">
+        <PageEmptyState />
+        <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={<FiAlertTriangle className="text-blue-500" aria-hidden="true" />}
+            variant="solid"
+            size="xs"
+          >
             <Link
-              as={NextLink}
               key="Report a Bug"
               href="https://github.com/LAION-AI/Open-Assistant/issues/new/choose"
               aria-label="Report a Bug"
               className="flex items-center"
+              _hover={{ textDecoration: "none" }}
+              isExternal
             >
               Report a Bug
             </Link>
           </Button>
-        </Stack>
-      </main>
+        </Box>
+      </Center>
     </>
   );
 }
+
+Error.getLayout = getTransparentHeaderLayout;
+
+export default Error;
