diff --git a/website/src/components/Loading/LoadingScreen.jsx b/website/src/components/Loading/LoadingScreen.jsx
index 57323f8c..56e9edcb 100644
--- a/website/src/components/Loading/LoadingScreen.jsx
+++ b/website/src/components/Loading/LoadingScreen.jsx
@@ -1,12 +1,12 @@
-import { Progress } from "@chakra-ui/react";
+import { Container, Progress } from "@chakra-ui/react";
 
 export const LoadingScreen = ({ text }) => (
-  <div className="bg-slate-100">
+  <Container>
     <Progress size="xs" isIndeterminate />
     {text && (
-      <div className="flex h-full">
+      <Container className="flex h-full">
         <div className="text-xl font-bold text-gray-800  mx-auto my-auto">{text}</div>
-      </div>
+      </Container>
     )}
-  </div>
+  </Container>
 );
diff --git a/website/src/components/TwoColumns.tsx b/website/src/components/TwoColumns.tsx
index 5792f7d0..e3f59433 100644
--- a/website/src/components/TwoColumns.tsx
+++ b/website/src/components/TwoColumns.tsx
@@ -1,14 +1,17 @@
+import { Container, useColorModeValue } from "@chakra-ui/react";
+
+
 export const TwoColumns = ({ children }: { children: React.ReactNode[] }) => {
   if (!Array.isArray(children) || children.length !== 2) {
     throw new Error("TwoColumns expects 2 children");
   }
-
+  const bg = useColorModeValue("white", "gray.700")
   const [first, second] = children;
 
   return (
-    <section className="mb-8 lt-lg:mb-12 grid lg:gap-x-12 lg:grid-cols-2">
-      <div className="rounded-lg shadow-lg h-full block bg-white p-6">{first}</div>
-      <div className="rounded-lg shadow-lg h-full block bg-white p-6 mt-6 lg:mt-0">{second}</div>
-    </section>
+    <Container className="mb-8 lt-lg:mb-12 grid lg:gap-x-12 lg:grid-cols-2">
+      <Container bg={bg} className="rounded-lg shadow-lg h-full block p-6">{first}</Container>
+      <Container bg={bg} className="rounded-lg shadow-lg h-full block p-6 mt-6 lg:mt-0">{second}</Container>
+    </Container>
   );
 };
diff --git a/website/src/pages/create/assistant_reply.tsx b/website/src/pages/create/assistant_reply.tsx
index a7f058f8..e60fde66 100644
--- a/website/src/pages/create/assistant_reply.tsx
+++ b/website/src/pages/create/assistant_reply.tsx
@@ -1,4 +1,4 @@
-import { Textarea } from "@chakra-ui/react";
+import { Container, Textarea } from "@chakra-ui/react";
 import { useRef, useState } from "react";
 import useSWRMutation from "swr/mutation";
 import useSWRImmutable from "swr/immutable";
@@ -45,12 +45,12 @@ const AssistantReply = () => {
   }
 
   if (tasks.length == 0) {
-    return <div className="p-6 bg-slate-100 text-gray-800">No tasks found...</div>;
+    return <Container className="p-6 text-center text-gray-800">No tasks found...</Container>;
   }
 
   const task = tasks[0].task;
   return (
-    <div className="p-6 bg-slate-100 text-gray-800">
+    <Container className="p-6 text-gray-800">
       <TwoColumns>
         <>
           <h5 className="text-lg font-semibold">Reply as the assistant</h5>
@@ -78,7 +78,7 @@ const AssistantReply = () => {
           </Button>
         </div>
       </section>
-    </div>
+    </Container>
   );
 };
 
diff --git a/website/src/pages/create/user_reply.tsx b/website/src/pages/create/user_reply.tsx
index 18427c71..3b8adedd 100644
--- a/website/src/pages/create/user_reply.tsx
+++ b/website/src/pages/create/user_reply.tsx
@@ -1,4 +1,4 @@
-import { Textarea } from "@chakra-ui/react";
+import { Container, Textarea, useColorModeValue } from "@chakra-ui/react";
 import { useRef, useState } from "react";
 import useSWRMutation from "swr/mutation";
 import useSWRImmutable from "swr/immutable";
@@ -12,6 +12,7 @@ import { LoadingScreen } from "@/components/Loading/LoadingScreen";
 
 const UserReply = () => {
   const [tasks, setTasks] = useState([]);
+  const bg = useColorModeValue("white", "gray.400");
 
   const inputRef = useRef<HTMLTextAreaElement>(null);
 
@@ -45,12 +46,12 @@ const UserReply = () => {
   }
 
   if (tasks.length == 0) {
-    return <div className="p-6 bg-slate-100 text-gray-800">No tasks found...</div>;
+    return <Container className="p-6 text-gray-800">No tasks found...</Container>;
   }
 
   const task = tasks[0].task;
   return (
-    <div className="p-6 bg-slate-100 text-gray-800">
+    <Container className="p-6">
       <TwoColumns>
         <>
           <h5 className="text-lg font-semibold">Reply as a user</h5>
@@ -61,7 +62,7 @@ const UserReply = () => {
         <Textarea name="reply" placeholder="Reply..." ref={inputRef} />
       </TwoColumns>
 
-      <section className="mb-8 p-4 rounded-lg shadow-lg bg-white flex flex-row justify-items-stretch ">
+      <Container bg={bg} className="p-4 rounded-lg shadow-lg flex flex-row justify-items-stretch">
         <div className="grid grid-cols-[min-content_auto] gap-x-2 text-gray-700">
           <b>Prompt</b>
           <span>{tasks[0].id}</span>
@@ -78,8 +79,8 @@ const UserReply = () => {
             Submit
           </Button>
         </div>
-      </section>
-    </div>
+      </Container>
+    </Container>
   );
 };
 
diff --git a/website/src/pages/evaluate/rank_initial_prompts.tsx b/website/src/pages/evaluate/rank_initial_prompts.tsx
index 1c7ac361..63568023 100644
--- a/website/src/pages/evaluate/rank_initial_prompts.tsx
+++ b/website/src/pages/evaluate/rank_initial_prompts.tsx
@@ -10,6 +10,7 @@ import poster from "src/lib/poster";
 
 import { Button } from "src/components/Button";
 import { LoadingScreen } from "@/components/Loading/LoadingScreen";
+import { Container, useColorModeValue } from "@chakra-ui/react";
 
 const RankInitialPrompts = () => {
   const [tasks, setTasks] = useState([]);
@@ -18,6 +19,7 @@ const RankInitialPrompts = () => {
    * The best prompt 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_initial_prompts", fetcher, {
     onSuccess: (data) => {
@@ -50,7 +52,7 @@ const RankInitialPrompts = () => {
   }
 
   if (tasks.length == 0) {
-    return <div className="p-6 bg-slate-100 text-gray-800">No tasks found...</div>;
+    return <Container className="p-6 bg-slate-100 text-gray-800">No tasks found...</Container>;
   }
 
   const prompts = tasks[0].task.prompts as string[];
@@ -65,8 +67,8 @@ const RankInitialPrompts = () => {
         <title>Rank Initial Prompts</title>
         <meta name="description" content="Rank initial prompts." />
       </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  p-6 mb-8">
           <h5 className="text-lg font-semibold mb-4">Instructions</h5>
           <p className="text-lg py-1">
             Given the following prompts, sort them from best to worst, best being first, worst being last.
@@ -94,7 +96,7 @@ const RankInitialPrompts = () => {
               </SortableItem>
             ))}
           </ul>
-        </div>
+        </Container>
 
         <section className="mb-8 p-4 rounded-lg shadow-lg bg-white flex flex-row justify-items-stretch ">
           <div className="grid grid-cols-[min-content_auto] gap-x-2 text-gray-700">
@@ -115,7 +117,7 @@ const RankInitialPrompts = () => {
             </Button>
           </div>
         </section>
-      </main>
+      </Container>
     </>
   );
 };