diff --git a/website/src/components/TaskInfo/TaskInfo.tsx b/website/src/components/TaskInfo/TaskInfo.tsx
index 629d5c1a..c8d04ac3 100644
--- a/website/src/components/TaskInfo/TaskInfo.tsx
+++ b/website/src/components/TaskInfo/TaskInfo.tsx
@@ -1,6 +1,6 @@
 export const TaskInfo = ({ id, output }: { id: string; output: any }) => {
   return (
-    <div className="grid grid-cols-[min-content_auto] gap-x-2 text-gray-700">
+    <div className="grid grid-cols-[min-content_auto] gap-x-2  ">
       <b>Prompt</b>
       <span>{id}</span>
       <b>Output</b>
diff --git a/website/src/pages/evaluate/rank_assistant_replies.tsx b/website/src/pages/evaluate/rank_assistant_replies.tsx
index 3d2973a9..08381adf 100644
--- a/website/src/pages/evaluate/rank_assistant_replies.tsx
+++ b/website/src/pages/evaluate/rank_assistant_replies.tsx
@@ -1,4 +1,4 @@
-import { Button, Flex } from "@chakra-ui/react";
+import { Button, Container, Flex, useColorModeValue } from "@chakra-ui/react";
 import Head from "next/head";
 import { useState } from "react";
 import useSWRImmutable from "swr/immutable";
@@ -20,7 +20,7 @@ const RankAssistantReplies = () => {
    * The best reply will have index 0, and the worst is the last.
    */
   const [ranking, setRanking] = useState<number[]>([]);
-
+  const bg = useColorModeValue("gray.100", "gray.800")
   const { isLoading } = useSWRImmutable("/api/new_task/rank_assistant_replies", fetcher, {
     onSuccess: (data) => {
       setTasks([data]);
@@ -49,7 +49,7 @@ const RankAssistantReplies = () => {
   }
 
   if (tasks.length == 0) {
-    return <div className="p-6 bg-slate-100 text-gray-800">Loading...</div>;
+    return <Container className="p-6 bg-slate-100 text-gray-800">No Tasks Found...</Container>;
   }
   const replies = tasks[0].task.replies as string[];
 
@@ -59,16 +59,16 @@ const RankAssistantReplies = () => {
         <title>Rank Assistant Replies</title>
         <meta name="description" content="Rank Assistant Replies." />
       </Head>
-      <main className="p-6 bg-slate-100 text-gray-800">
-        <div className="rounded-lg shadow-lg block bg-white p-6 mb-8">
+      <Container className="p-6 bg-slate-100 text-gray-800">
+        <Container bg={bg} className="rounded-lg shadow-lg block  p-6 mb-8">
           <h5 className="text-lg font-semibold mb-4">Instructions</h5>
           <p className="text-lg py-1">
             Given the following replies, sort them from best to worst, best being first, worst being last.
           </p>
           <Sortable items={replies} onChange={setRanking} />
-        </div>
+        </Container>
 
-        <section className="mb-8 p-4 rounded-lg shadow-lg bg-white flex flex-row justify-items-stretch">
+        <Container bg={bg} className="mb-8 p-4 rounded-lg shadow-lg  flex flex-row justify-items-stretch">
           <TaskInfo id={tasks[0].id} output="Submit your answer" />
 
           <Flex justify="center" ml="auto" gap={2}>
@@ -77,8 +77,8 @@ const RankAssistantReplies = () => {
               Submit
             </SubmitButton>
           </Flex>
-        </section>
-      </main>
+        </Container>
+      </Container>
     </>
   );
 };
diff --git a/website/src/pages/evaluate/rank_user_replies.tsx b/website/src/pages/evaluate/rank_user_replies.tsx
index f56d8a43..7c0cd9b8 100644
--- a/website/src/pages/evaluate/rank_user_replies.tsx
+++ b/website/src/pages/evaluate/rank_user_replies.tsx
@@ -9,7 +9,7 @@ import poster from "src/lib/poster";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Sortable } from "src/components/Sortable/Sortable";
 import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
-import { Flex } from "@chakra-ui/react";
+import { Container, Flex, useColorModeValue } from "@chakra-ui/react";
 import { SkipButton } from "src/components/Buttons/Skip";
 import { SubmitButton } from "src/components/Buttons/Submit";
 
@@ -20,7 +20,7 @@ const RankUserReplies = () => {
    * The best reply will have index 0, and the worst is the last.
    */
   const [ranking, setRanking] = useState<number[]>([]);
-
+  const bg = useColorModeValue("gray.100", "gray.800");
   const { isLoading } = useSWRImmutable("/api/new_task/rank_user_replies", fetcher, {
     onSuccess: (data) => {
       setTasks([data]);
@@ -49,7 +49,7 @@ const RankUserReplies = () => {
   }
 
   if (tasks.length == 0) {
-    return <div className="p-6 bg-slate-100 text-gray-800">Loading...</div>;
+    return <Container className="p-6 bg-slate-100 text-gray-800">Loading...</Container>;
   }
   const replies = tasks[0].task.replies as string[];
 
@@ -59,14 +59,14 @@ const RankUserReplies = () => {
         <title>Rank User Replies</title>
         <meta name="description" content="Rank User Replies." />
       </Head>
-      <main className="p-6 bg-slate-100 text-gray-800">
-        <div className="rounded-lg shadow-lg block bg-white p-6 mb-8">
+      <Container className="p-6 text-gray-800">
+        <Container bg={bg} className="rounded-lg shadow-lg block bg-white p-6 mb-8">
           <h5 className="text-lg font-semibold mb-4">Instructions</h5>
           <p className="text-lg py-1">
             Given the following replies, sort them from best to worst, best being first, worst being last.
           </p>
           <Sortable items={replies} onChange={setRanking} />
-        </div>
+        </Container>
 
         <section className="mb-8 p-4 rounded-lg shadow-lg bg-white flex flex-row justify-items-stretch ">
           <TaskInfo id={tasks[0].id} output="Submit your answer" />
@@ -78,7 +78,7 @@ const RankUserReplies = () => {
             </SubmitButton>
           </Flex>
         </section>
-      </main>
+      </Container>
     </>
   );
 };