diff --git a/website/src/components/EmptyState.tsx b/website/src/components/EmptyState.tsx
new file mode 100644
index 00000000..aa50bd9f
--- /dev/null
+++ b/website/src/components/EmptyState.tsx
@@ -0,0 +1,32 @@
+import { Center, Text, useColorMode, useColorModeValue } from "@chakra-ui/react";
+import { FiFileText } from "react-icons/fi";
+import { IconType } from "react-icons/lib";
+
+type EmptyStateProps = {
+  text: string;
+  icon: IconType;
+};
+
+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");
+
+  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>
+  );
+};
+
+export const TaskEmptyState = () => {
+  return <EmptyState text="No tasks found!" icon={FiFileText} />;
+};
diff --git a/website/src/components/Loading/LoadingScreen.jsx b/website/src/components/Loading/LoadingScreen.jsx
index 4674acf7..3aad717f 100644
--- a/website/src/components/Loading/LoadingScreen.jsx
+++ b/website/src/components/Loading/LoadingScreen.jsx
@@ -1,13 +1,15 @@
-import { Box, Progress, Text } from "@chakra-ui/react";
+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">
+    <Box width="full" className={mainBgClasses}>
       <Progress size="sm" isIndeterminate />
       {text && (
-        <Box width="full">
+        <Center width="full" className="p-12">
           <Text fontFamily="Inter">{text}</Text>
-        </Box>
+        </Center>
       )}
     </Box>
   );
diff --git a/website/src/pages/create/assistant_reply.tsx b/website/src/pages/create/assistant_reply.tsx
index f596de86..7b4cf688 100644
--- a/website/src/pages/create/assistant_reply.tsx
+++ b/website/src/pages/create/assistant_reply.tsx
@@ -1,5 +1,5 @@
-import { Container } from "@chakra-ui/react";
 import Head from "next/head";
+import { TaskEmptyState } from "src/components/EmptyState";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
 import { useCreateAssistantReply } from "src/hooks/tasks/useCreateReply";
@@ -12,7 +12,7 @@ const AssistantReply = () => {
   }
 
   if (tasks.length === 0) {
-    return <Container className="p-6 text-center text-gray-800">No tasks found...</Container>;
+    return <TaskEmptyState />;
   }
 
   return (
diff --git a/website/src/pages/create/initial_prompt.tsx b/website/src/pages/create/initial_prompt.tsx
index 4eb1dd94..c8bf7317 100644
--- a/website/src/pages/create/initial_prompt.tsx
+++ b/website/src/pages/create/initial_prompt.tsx
@@ -1,5 +1,5 @@
-import { Container } from "@chakra-ui/react";
 import Head from "next/head";
+import { TaskEmptyState } from "src/components/EmptyState";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
 import { useCreateInitialPrompt } from "src/hooks/tasks/useCreateReply";
@@ -12,7 +12,7 @@ const InitialPrompt = () => {
   }
 
   if (tasks.length === 0) {
-    return <Container className="p-6 text-center text-gray-800">No tasks found...</Container>;
+    return <TaskEmptyState />;
   }
 
   return (
diff --git a/website/src/pages/create/user_reply.tsx b/website/src/pages/create/user_reply.tsx
index 9e34a31d..b1425ff9 100644
--- a/website/src/pages/create/user_reply.tsx
+++ b/website/src/pages/create/user_reply.tsx
@@ -1,5 +1,5 @@
 import Head from "next/head";
-import { Container } from "src/components/Container";
+import { TaskEmptyState } from "src/components/EmptyState";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
 import { useCreatePrompterReply } from "src/hooks/tasks/useCreateReply";
@@ -12,7 +12,7 @@ const UserReply = () => {
   }
 
   if (tasks.length === 0) {
-    return <Container className="p-6 text-center text-gray-800">No tasks found...</Container>;
+    return <TaskEmptyState />;
   }
 
   return (
diff --git a/website/src/pages/evaluate/rank_assistant_replies.tsx b/website/src/pages/evaluate/rank_assistant_replies.tsx
index bcf23b7a..8cb30db8 100644
--- a/website/src/pages/evaluate/rank_assistant_replies.tsx
+++ b/website/src/pages/evaluate/rank_assistant_replies.tsx
@@ -1,5 +1,5 @@
 import Head from "next/head";
-import { Container } from "src/components/Container";
+import { TaskEmptyState } from "src/components/EmptyState";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
 import { useRankAssistantRepliesTask } from "src/hooks/tasks/useRankReplies";
@@ -12,7 +12,7 @@ const RankAssistantReplies = () => {
   }
 
   if (tasks.length === 0) {
-    return <Container className="p-6 text-center">No tasks found...</Container>;
+    return <TaskEmptyState />;
   }
 
   return (
diff --git a/website/src/pages/evaluate/rank_initial_prompts.tsx b/website/src/pages/evaluate/rank_initial_prompts.tsx
index bc26b062..74b7a075 100644
--- a/website/src/pages/evaluate/rank_initial_prompts.tsx
+++ b/website/src/pages/evaluate/rank_initial_prompts.tsx
@@ -1,5 +1,5 @@
 import Head from "next/head";
-import { Container } from "src/components/Container";
+import { TaskEmptyState } from "src/components/EmptyState";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
 import { useRankInitialPromptsTask } from "src/hooks/tasks/useRankReplies";
@@ -12,7 +12,7 @@ const RankInitialPrompts = () => {
   }
 
   if (tasks.length === 0) {
-    return <Container className="p-6 text-center">No tasks found...</Container>;
+    return <TaskEmptyState />;
   }
 
   return (
diff --git a/website/src/pages/evaluate/rank_user_replies.tsx b/website/src/pages/evaluate/rank_user_replies.tsx
index 854b75ba..0b2785e4 100644
--- a/website/src/pages/evaluate/rank_user_replies.tsx
+++ b/website/src/pages/evaluate/rank_user_replies.tsx
@@ -1,5 +1,5 @@
 import Head from "next/head";
-import { Container } from "src/components/Container";
+import { TaskEmptyState } from "src/components/EmptyState";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
 import { useRankPrompterRepliesTask } from "src/hooks/tasks/useRankReplies";
@@ -12,7 +12,7 @@ const RankUserReplies = () => {
   }
 
   if (tasks.length === 0) {
-    return <Container className="p-6 text-center">No tasks found...</Container>;
+    return <TaskEmptyState />;
   }
 
   return (
diff --git a/website/src/pages/label/label_assistant_reply.tsx b/website/src/pages/label/label_assistant_reply.tsx
index 36ac6dd6..2a4c56da 100644
--- a/website/src/pages/label/label_assistant_reply.tsx
+++ b/website/src/pages/label/label_assistant_reply.tsx
@@ -1,5 +1,5 @@
-import { Container } from "@chakra-ui/react";
 import Head from "next/head";
+import { TaskEmptyState } from "src/components/EmptyState";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
 import { useLabelAssistantReplyTask } from "src/hooks/tasks/useLabelingTask";
@@ -12,7 +12,7 @@ const LabelAssistantReply = () => {
   }
 
   if (tasks.length === 0) {
-    return <Container className="p-6 text-center text-gray-800">No tasks found...</Container>;
+    return <TaskEmptyState />;
   }
 
   return (
diff --git a/website/src/pages/label/label_initial_prompt.tsx b/website/src/pages/label/label_initial_prompt.tsx
index d2839e86..1434d2a2 100644
--- a/website/src/pages/label/label_initial_prompt.tsx
+++ b/website/src/pages/label/label_initial_prompt.tsx
@@ -1,5 +1,5 @@
-import { Container } from "@chakra-ui/react";
 import Head from "next/head";
+import { TaskEmptyState } from "src/components/EmptyState";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
 import { useLabelInitialPromptTask } from "src/hooks/tasks/useLabelingTask";
@@ -12,7 +12,7 @@ const LabelInitialPrompt = () => {
   }
 
   if (tasks.length === 0) {
-    return <Container className="p-6 text-center text-gray-800">No tasks found...</Container>;
+    return <TaskEmptyState />;
   }
 
   return (
diff --git a/website/src/pages/label/label_prompter_reply.tsx b/website/src/pages/label/label_prompter_reply.tsx
index 03b4f19d..a3b5162c 100644
--- a/website/src/pages/label/label_prompter_reply.tsx
+++ b/website/src/pages/label/label_prompter_reply.tsx
@@ -1,5 +1,5 @@
-import { Container } from "@chakra-ui/react";
 import Head from "next/head";
+import { TaskEmptyState } from "src/components/EmptyState";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
 import { useLabelPrompterReplyTask } from "src/hooks/tasks/useLabelingTask";
@@ -12,7 +12,7 @@ const LabelPrompterReply = () => {
   }
 
   if (tasks.length === 0) {
-    return <Container className="p-6 text-center text-gray-800">No tasks found...</Container>;
+    return <TaskEmptyState />;
   }
 
   return (
diff --git a/website/src/pages/tasks/random.tsx b/website/src/pages/tasks/random.tsx
index 330b7b48..5da43b83 100644
--- a/website/src/pages/tasks/random.tsx
+++ b/website/src/pages/tasks/random.tsx
@@ -1,5 +1,5 @@
-import { Container } from "@chakra-ui/react";
 import Head from "next/head";
+import { TaskEmptyState } from "src/components/EmptyState";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
 import { useGenericTaskAPI } from "src/hooks/tasks/useGenericTaskAPI";
@@ -12,7 +12,7 @@ const RandomTask = () => {
   }
 
   if (tasks.length === 0) {
-    return <Container className="p-6 text-center text-gray-800">No tasks found...</Container>;
+    return <TaskEmptyState />;
   }
 
   return (