diff --git a/website/src/components/EmptyState.tsx b/website/src/components/EmptyState.tsx
index f6245204..14715518 100644
--- a/website/src/components/EmptyState.tsx
+++ b/website/src/components/EmptyState.tsx
@@ -1,5 +1,6 @@
 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 = {
@@ -12,7 +13,7 @@ export const EmptyState = (props: EmptyStateProps) => {
   const router = useRouter();
 
   return (
-    <Box bg={backgroundColor} p="10" borderRadius="xl" shadow="base" maxWidth="3xl">
+    <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>
@@ -23,3 +24,7 @@ export const EmptyState = (props: EmptyStateProps) => {
     </Box>
   );
 };
+
+export const TaskEmptyState = () => {
+  return <EmptyState text="Looks like no tasks were found." icon={FiAlertTriangle} />;
+};
diff --git a/website/src/pages/tasks/random.tsx b/website/src/pages/tasks/random.tsx
index 55310cfc..d2e850f5 100644
--- a/website/src/pages/tasks/random.tsx
+++ b/website/src/pages/tasks/random.tsx
@@ -1,6 +1,5 @@
 import Head from "next/head";
-import { FiAlertTriangle } from "react-icons/fi";
-import { EmptyState } from "src/components/EmptyState";
+import { TaskEmptyState } from "src/components/EmptyState";
 import { getDashboardLayout } from "src/components/Layout";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
@@ -14,7 +13,7 @@ const RandomTask = () => {
   }
 
   if (tasks.length === 0) {
-    return <EmptyState text="Looks like no tasks were found." icon={FiAlertTriangle} />;
+    return <TaskEmptyState />;
   }
 
   return (