diff --git a/website/src/components/EmptyState.tsx b/website/src/components/EmptyState.tsx
index aa50bd9f..3338fa21 100644
--- a/website/src/components/EmptyState.tsx
+++ b/website/src/components/EmptyState.tsx
@@ -1,5 +1,5 @@
-import { Center, Text, useColorMode, useColorModeValue } from "@chakra-ui/react";
-import { FiFileText } from "react-icons/fi";
+import { Box, Text, useColorModeValue } from "@chakra-ui/react";
+import { FiAlertTriangle } from "react-icons/fi";
 import { IconType } from "react-icons/lib";
 
 type EmptyStateProps = {
@@ -8,25 +8,18 @@ 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");
 
   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">
+        <props.icon size="30" color="DarkOrange" />
+        <Text fontSize="lg">{props.text}</Text>
+      </Box>
+    </Box>
   );
 };
 
 export const TaskEmptyState = () => {
-  return <EmptyState text="No tasks found!" icon={FiFileText} />;
+  return <EmptyState text="Looks like no tasks were found." 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 1eb600d7..a14c54d8 100644
--- a/website/src/pages/404.tsx
+++ b/website/src/pages/404.tsx
@@ -1,15 +1,36 @@
+import { Box, Center, Link, Text, useColorModeValue } from "@chakra-ui/react";
 import Head from "next/head";
+import { useRouter } from "next/router";
+import { FiAlertTriangle } from "react-icons/fi";
+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">
-        <p>Sorry, the page you are looking for does not exist.</p>
-      </main>
+      <Center flexDirection="column" gap="4" fontSize="lg" className="subpixel-antialiased">
+        <Box bg={backgroundColor} p="10" borderRadius="xl" shadow="base">
+          <Box display="flex" flexDirection="column" alignItems="center" gap="8">
+            <FiAlertTriangle size="30" color="DarkOrange" />
+            <Box display="flex" flexDirection="column" alignItems="center" gap="3">
+              <Text>Sorry, the page you are looking for does not exist.</Text>
+              <Link onClick={() => router.back()} color="blue.500" textUnderlineOffset="3px">
+                <Text>Click here to go back</Text>
+              </Link>
+            </Box>
+          </Box>
+        </Box>
+      </Center>
     </>
   );
 }
+
+Error.getLayout = getTransparentHeaderLayout;
+
+export default Error;
diff --git a/website/src/pages/messages/index.tsx b/website/src/pages/messages/index.tsx
index 1da42db4..9634b9df 100644
--- a/website/src/pages/messages/index.tsx
+++ b/website/src/pages/messages/index.tsx
@@ -40,7 +40,7 @@ const MessagesDashboard = () => {
         <title>Messages - Open Assistant</title>
         <meta name="description" content="Chat with Open Assistant and provide feedback." />
       </Head>
-      <SimpleGrid fontFamily="Inter" columns={[1, 1, 1, 2]} gap={4}>
+      <SimpleGrid columns={[1, 1, 1, 2]} gap={4}>
         <Box>
           <Text className="text-2xl font-bold" pb="4">
             Recent messages
