diff --git a/website/src/components/Dashboard/TaskOption.tsx b/website/src/components/Dashboard/TaskOption.tsx
index 50f707a6..5e6ceb2f 100644
--- a/website/src/components/Dashboard/TaskOption.tsx
+++ b/website/src/components/Dashboard/TaskOption.tsx
@@ -1,126 +1,53 @@
 import { Box, Flex, GridItem, Heading, SimpleGrid, Text, useColorModeValue } from "@chakra-ui/react";
 import Link from "next/link";
 
-const crTasks = [
-  {
-    label: "Create Initial Prompts",
-    desc: "Write initial prompts to help Open Assistant to try replying to diverse messages.",
-    type: "create",
-    pathname: "/create/initial_prompt",
-  },
-  {
-    label: "Reply as User",
-    desc: "Chat with Open Assistant and help improve it’s responses as you interact with it.",
-    type: "create",
-    pathname: "/create/user_reply",
-  },
-  {
-    label: "Reply as Assistant",
-    desc: "Help Open Assistant improve its responses to conversations with other users.",
-    type: "create",
-    pathname: "/create/assistant_reply",
-  },
-];
+import { TaskCategory, TaskTypes } from "../Tasks/TaskTypes";
 
-const evTasks = [
-  {
-    label: "Rank User Replies",
-    type: "eval",
-    desc: "Help Open Assistant improve its responses to conversations with other users.",
-    pathname: "/evaluate/rank_user_replies",
-  },
-
-  {
-    label: "Rank Assistant Replies",
-    desc: "Score prompts given by Open Assistant based on their accuracy and readability.",
-    type: "eval",
-    pathname: "/evaluate/rank_assistant_replies",
-  },
-  {
-    label: "Rank Initial Prompts",
-    desc: "Score prompts given by Open Assistant based on their accuracy and readability.",
-    type: "eval;",
-    pathname: "/evaluate/rank_initial_prompts",
-  },
-];
+const displayTaskCategories = [TaskCategory.Create, TaskCategory.Evaluate];
 
 export const TaskOption = () => {
   const backgroundColor = useColorModeValue("white", "gray.700");
 
   return (
     <Box className="flex flex-col gap-14" fontFamily="inter">
-      <div>
-        <Text className="text-2xl font-bold pb-4">Create</Text>
-        <SimpleGrid columns={[1, 2, 2, 3, 4]} gap={4}>
-          {crTasks.map((item, itemIndex) => (
-            <Link key={itemIndex} href={item.pathname}>
-              <GridItem
-                bg={backgroundColor}
-                borderRadius="xl"
-                boxShadow="base"
-                className="flex flex-col justify-between h-full"
-              >
-                <Box className="p-6 pb-10">
-                  <Flex flexDir="column" gap="3">
-                    <Heading size="md" fontFamily="inter">
-                      {item.label}
-                    </Heading>
-                    <Text size="sm" opacity="80%">
-                      {item.desc}
-                    </Text>
-                  </Flex>
-                </Box>
-                <Box
-                  bg="blue.500"
-                  borderBottomRadius="xl"
-                  className="px-6 py-2 transition-colors duration-300"
-                  _hover={{ backgroundColor: "blue.600" }}
+      {displayTaskCategories.map((category, categoryIndex) => (
+        <div key={categoryIndex}>
+          <Text className="text-2xl font-bold pb-4">{TaskCategory[category]}</Text>
+          <SimpleGrid columns={[1, 2, 2, 3, 4]} gap={4}>
+            {TaskTypes.filter((task) => task.category == category).map((item, itemIndex) => (
+              <Link key={itemIndex} href={item.pathname}>
+                <GridItem
+                  bg={backgroundColor}
+                  borderRadius="xl"
+                  boxShadow="base"
+                  className="flex flex-col justify-between h-full"
                 >
-                  <Text fontWeight="bold" color="white">
-                    Go
-                  </Text>
-                </Box>
-              </GridItem>
-            </Link>
-          ))}
-        </SimpleGrid>
-      </div>
-      <div>
-        <Text className="text-2xl font-bold pb-4">Evaluate</Text>
-        <SimpleGrid columns={[1, 2, 2, 3, 4]} gap={4}>
-          {evTasks.map((item, itemIndex) => (
-            <Link key={itemIndex} href={item.pathname}>
-              <GridItem
-                bg={backgroundColor}
-                borderRadius="xl"
-                boxShadow="base"
-                className="flex flex-col justify-between h-full"
-              >
-                <Box className="p-6 pb-10">
-                  <Flex flexDir="column" gap="3">
-                    <Heading size="md" fontFamily="inter">
-                      {item.label}
-                    </Heading>
-                    <Text size="sm" opacity="80%">
-                      {item.desc}
+                  <Box className="p-6 pb-10">
+                    <Flex flexDir="column" gap="3">
+                      <Heading size="md" fontFamily="inter">
+                        {item.label}
+                      </Heading>
+                      <Text size="sm" opacity="80%">
+                        {item.desc}
+                      </Text>
+                    </Flex>
+                  </Box>
+                  <Box
+                    bg="blue.500"
+                    borderBottomRadius="xl"
+                    className="px-6 py-2 transition-colors duration-300"
+                    _hover={{ backgroundColor: "blue.600" }}
+                  >
+                    <Text fontWeight="bold" color="white">
+                      Go
                     </Text>
-                  </Flex>
-                </Box>
-                <Box
-                  bg="blue.500"
-                  borderBottomRadius="xl"
-                  className="px-6 py-2 transition-colors duration-300"
-                  _hover={{ backgroundColor: "blue.600" }}
-                >
-                  <Text fontWeight="bold" color="white">
-                    Go
-                  </Text>
-                </Box>
-              </GridItem>
-            </Link>
-          ))}
-        </SimpleGrid>
-      </div>
+                  </Box>
+                </GridItem>
+              </Link>
+            ))}
+          </SimpleGrid>
+        </div>
+      ))}
     </Box>
   );
 };
diff --git a/website/src/components/Tasks/CreateTask.tsx b/website/src/components/Tasks/CreateTask.tsx
new file mode 100644
index 00000000..057177d2
--- /dev/null
+++ b/website/src/components/Tasks/CreateTask.tsx
@@ -0,0 +1,54 @@
+import { useState } from "react";
+import { Messages } from "src/components/Messages";
+import { TaskControls } from "src/components/Survey/TaskControls";
+import { TrackedTextarea } from "src/components/Survey/TrackedTextarea";
+import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards";
+
+export const CreateTask = ({ tasks, taskType, trigger, mutate, mainBgClasses }) => {
+  const task = tasks[0].task;
+
+  const [inputText, setInputText] = useState("");
+
+  const submitResponse = (task: { id: string }) => {
+    const text = inputText.trim();
+    trigger({
+      id: task.id,
+      update_type: "text_reply_to_message",
+      content: {
+        text,
+      },
+    });
+  };
+
+  const fetchNextTask = () => {
+    setInputText("");
+    mutate();
+  };
+
+  const textChangeHandler = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setInputText(event.target.value);
+  };
+
+  return (
+    <div className={`p-12 ${mainBgClasses}`}>
+      <TwoColumnsWithCards>
+        <>
+          <h5 className="text-lg font-semibold">{taskType.label}</h5>
+          <p className="text-lg py-1">{taskType.overview}</p>
+          {task.conversation ? <Messages messages={task.conversation.messages} post_id={task.id} /> : null}
+        </>
+        <>
+          <h5 className="text-lg font-semibold">{taskType.instruction}</h5>
+          <TrackedTextarea
+            text={inputText}
+            onTextChange={textChangeHandler}
+            thresholds={{ low: 20, medium: 40, goal: 50 }}
+            textareaProps={{ placeholder: "Reply..." }}
+          />
+        </>
+      </TwoColumnsWithCards>
+
+      <TaskControls tasks={tasks} onSubmitResponse={submitResponse} onSkip={fetchNextTask} />
+    </div>
+  );
+};
diff --git a/website/src/components/Tasks/EvaluateTask.tsx b/website/src/components/Tasks/EvaluateTask.tsx
new file mode 100644
index 00000000..94b47fbb
--- /dev/null
+++ b/website/src/components/Tasks/EvaluateTask.tsx
@@ -0,0 +1,46 @@
+import { useState } from "react";
+import { ContextMessages } from "src/components/ContextMessages";
+import { Sortable } from "src/components/Sortable/Sortable";
+import { SurveyCard } from "src/components/Survey/SurveyCard";
+import { TaskControlsOverridable } from "src/components/Survey/TaskControlsOverridable";
+
+export const EvaluateTask = ({ tasks, trigger, mutate, mainBgClasses }) => {
+  const [ranking, setRanking] = useState<number[]>([]);
+  const submitResponse = (task) => {
+    trigger({
+      id: task.id,
+      update_type: "message_ranking",
+      content: {
+        ranking,
+      },
+    });
+  };
+
+  const fetchNextTask = () => {
+    setRanking([]);
+    mutate();
+  };
+
+  const sortables = tasks[0].task.replies ? "replies" : "prompts";
+
+  return (
+    <div className={`p-12 ${mainBgClasses}`}>
+      <SurveyCard className="max-w-7xl mx-auto h-fit mb-24">
+        <h5 className="text-lg font-semibold mb-4">Instructions</h5>
+        <p className="text-lg py-1">
+          Given the following {sortables}, sort them from best to worst, best being first, worst being last.
+        </p>
+        {tasks[0].task.conversation ? <ContextMessages messages={tasks[0].task.conversation.messages} /> : null}
+        <Sortable items={tasks[0].task[sortables]} onChange={setRanking} className="my-8" />
+      </SurveyCard>
+
+      <TaskControlsOverridable
+        tasks={tasks}
+        isValid={ranking.length == tasks[0].task[sortables].length}
+        prepareForSubmit={() => setRanking(tasks[0].task[sortables].map((_, idx) => idx))}
+        onSubmitResponse={submitResponse}
+        onSkip={fetchNextTask}
+      />
+    </div>
+  );
+};
diff --git a/website/src/components/Tasks/Task.tsx b/website/src/components/Tasks/Task.tsx
new file mode 100644
index 00000000..ce9505e9
--- /dev/null
+++ b/website/src/components/Tasks/Task.tsx
@@ -0,0 +1,28 @@
+import { CreateTask } from "./CreateTask";
+import { EvaluateTask } from "./EvaluateTask";
+import { TaskCategory, TaskTypes } from "./TaskTypes";
+
+export const Task = ({ tasks, trigger, mutate, mainBgClasses }) => {
+  const task = tasks[0].task;
+
+  function taskTypeComponent(type) {
+    const taskType = TaskTypes.find((taskType) => taskType.type === type);
+    const category = taskType.category;
+    switch (category) {
+      case TaskCategory.Create:
+        return (
+          <CreateTask
+            tasks={tasks}
+            trigger={trigger}
+            mutate={mutate}
+            taskType={taskType}
+            mainBgClasses={mainBgClasses}
+          />
+        );
+      case TaskCategory.Evaluate:
+        return <EvaluateTask tasks={tasks} trigger={trigger} mutate={mutate} mainBgClasses={mainBgClasses} />;
+    }
+  }
+
+  return taskTypeComponent(task.type);
+};
diff --git a/website/src/components/Tasks/TaskTypes.tsx b/website/src/components/Tasks/TaskTypes.tsx
new file mode 100644
index 00000000..413a1e16
--- /dev/null
+++ b/website/src/components/Tasks/TaskTypes.tsx
@@ -0,0 +1,55 @@
+export enum TaskCategory {
+  Create,
+  Evaluate,
+}
+
+export const TaskTypes = [
+  {
+    label: "Create Initial Prompts",
+    desc: "Write initial prompts to help Open Assistant to try replying to diverse messages.",
+    category: TaskCategory.Create,
+    pathname: "/create/initial_prompt",
+    type: "initial_prompt",
+    overview: "Create an initial message to send to the assistant",
+    instruction: "Provide the initial prompt",
+  },
+  {
+    label: "Reply as User",
+    desc: "Chat with Open Assistant and help improve it’s responses as you interact with it.",
+    category: TaskCategory.Create,
+    pathname: "/create/user_reply",
+    type: "prompter_reply",
+    overview: "Given the following conversation, provide an adequate reply",
+    instruction: "Provide the user`s reply",
+  },
+  {
+    label: "Reply as Assistant",
+    desc: "Help Open Assistant improve its responses to conversations with other users.",
+    category: TaskCategory.Create,
+    pathname: "/create/assistant_reply",
+    type: "assistant_reply",
+    overview: "Given the following conversation, provide an adequate reply",
+    instruction: "Provide the assistant`s reply",
+  },
+  {
+    label: "Rank User Replies",
+    category: TaskCategory.Evaluate,
+    desc: "Help Open Assistant improve its responses to conversations with other users.",
+    pathname: "/evaluate/rank_user_replies",
+    type: "rank_prompter_replies",
+  },
+  {
+    label: "Rank Assistant Replies",
+    desc: "Score prompts given by Open Assistant based on their accuracy and readability.",
+    category: TaskCategory.Evaluate,
+    pathname: "/evaluate/rank_assistant_replies",
+    type: "rank_assistant_replies",
+  },
+  {
+    label: "Rank Initial Prompts",
+    desc: "Score prompts given by Open Assistant based on their accuracy and readability.",
+    category: TaskCategory.Evaluate,
+    pathname: "/evaluate/rank_initial_prompts",
+    type: "rank_initial_prompts",
+  },
+];
diff --git a/website/src/pages/create/assistant_reply.tsx b/website/src/pages/create/assistant_reply.tsx
index 17036b6e..6dad3931 100644
--- a/website/src/pages/create/assistant_reply.tsx
+++ b/website/src/pages/create/assistant_reply.tsx
@@ -1,11 +1,9 @@
 import { Container } from "@chakra-ui/react";
 import { useColorMode } from "@chakra-ui/react";
+import Head from "next/head";
 import { useEffect, useState } from "react";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
-import { Messages } from "src/components/Messages";
-import { TaskControls } from "src/components/Survey/TaskControls";
-import { TrackedTextarea } from "src/components/Survey/TrackedTextarea";
-import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards";
+import { Task } from "src/components/Tasks/Task";
 import fetcher from "src/lib/fetcher";
 import poster from "src/lib/poster";
 import useSWRImmutable from "swr/immutable";
@@ -13,7 +11,6 @@ import useSWRMutation from "swr/mutation";
 
 const AssistantReply = () => {
   const [tasks, setTasks] = useState([]);
-  const [inputText, setInputText] = useState("");
 
   const { isLoading, mutate } = useSWRImmutable("/api/new_task/assistant_reply ", fetcher, {
     onSuccess: (data) => {
@@ -34,26 +31,6 @@ const AssistantReply = () => {
     },
   });
 
-  const submitResponse = (task: { id: string }) => {
-    const text = inputText.trim();
-    trigger({
-      id: task.id,
-      update_type: "text_reply_to_message",
-      content: {
-        text,
-      },
-    });
-  };
-
-  const fetchNextTask = () => {
-    setInputText("");
-    mutate();
-  };
-
-  const textChangeHandler = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setInputText(event.target.value);
-  };
-
   const { colorMode } = useColorMode();
   const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-800" : "bg-slate-900 text-white";
 
@@ -65,29 +42,14 @@ const AssistantReply = () => {
     return <Container className="p-6 text-center text-gray-800">No tasks found...</Container>;
   }
 
-  const task = tasks[0].task;
-
   return (
-    <div className={`p-12 ${mainBgClasses}`}>
-      <TwoColumnsWithCards>
-        <>
-          <h5 className="text-lg font-semibold">Reply as the assistant</h5>
-          <p className="text-lg py-1">Given the following conversation, provide an adequate reply</p>
-          <Messages messages={task.conversation.messages} post_id={task.id} />
-        </>
-        <>
-          <h5 className="text-lg font-semibold">Provide the assistant`s reply</h5>
-          <TrackedTextarea
-            text={inputText}
-            onTextChange={textChangeHandler}
-            thresholds={{ low: 20, medium: 40, goal: 50 }}
-            textareaProps={{ placeholder: "Reply..." }}
-          />
-        </>
-      </TwoColumnsWithCards>
-
-      <TaskControls tasks={tasks} onSubmitResponse={submitResponse} onSkip={fetchNextTask} />
-    </div>
+    <>
+      <Head>
+        <title>Reply as Assistant</title>
+        <meta name="description" content="Reply as Assistant." />
+      </Head>
+      <Task tasks={tasks} trigger={trigger} mutate={mutate} mainBgClasses={mainBgClasses} />
+    </>
   );
 };
 
diff --git a/website/src/pages/create/initial_prompt.tsx b/website/src/pages/create/initial_prompt.tsx
index 5d289d34..fc9ba39b 100644
--- a/website/src/pages/create/initial_prompt.tsx
+++ b/website/src/pages/create/initial_prompt.tsx
@@ -1,10 +1,9 @@
 import { Container } from "@chakra-ui/react";
 import { useColorMode } from "@chakra-ui/react";
+import Head from "next/head";
 import { useEffect, useState } from "react";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
-import { TaskControls } from "src/components/Survey/TaskControls";
-import { TrackedTextarea } from "src/components/Survey/TrackedTextarea";
-import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards";
+import { Task } from "src/components/Tasks/Task";
 import fetcher from "src/lib/fetcher";
 import poster from "src/lib/poster";
 import useSWRImmutable from "swr/immutable";
@@ -12,7 +11,6 @@ import useSWRMutation from "swr/mutation";
 
 const InitialPrompt = () => {
   const [tasks, setTasks] = useState([]);
-  const [inputText, setInputText] = useState("");
 
   const { isLoading, mutate } = useSWRImmutable("/api/new_task/initial_prompt ", fetcher, {
     onSuccess: (data) => {
@@ -33,26 +31,6 @@ const InitialPrompt = () => {
     }
   }, [tasks]);
 
-  const submitResponse = (task: { id: string }) => {
-    const text = inputText.trim();
-    trigger({
-      id: task.id,
-      update_type: "text_reply_to_message",
-      content: {
-        text,
-      },
-    });
-  };
-
-  const fetchNextTask = () => {
-    setInputText("");
-    mutate();
-  };
-
-  const textChangeHandler = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setInputText(event.target.value);
-  };
-
   const { colorMode } = useColorMode();
   const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-800" : "bg-slate-900 text-white";
 
@@ -65,25 +43,13 @@ const InitialPrompt = () => {
   }
 
   return (
-    <div className={`p-12 ${mainBgClasses}`}>
-      <TwoColumnsWithCards>
-        <>
-          <h5 className="text-lg font-semibold">Start a conversation</h5>
-          <p className="text-lg py-1">Create an initial message to send to the assistant</p>
-        </>
-        <>
-          <h5 className="text-lg font-semibold">Provide the initial prompt</h5>
-          <TrackedTextarea
-            text={inputText}
-            onTextChange={textChangeHandler}
-            thresholds={{ low: 20, medium: 40, goal: 50 }}
-            textareaProps={{ placeholder: "Question, task, greeting or similar..." }}
-          />
-        </>
-      </TwoColumnsWithCards>
-
-      <TaskControls tasks={tasks} onSubmitResponse={submitResponse} onSkip={fetchNextTask} />
-    </div>
+    <>
+      <Head>
+        <title>Reply as Assistant</title>
+        <meta name="description" content="Reply as Assistant." />
+      </Head>
+      <Task tasks={tasks} trigger={trigger} mutate={mutate} mainBgClasses={mainBgClasses} />
+    </>
   );
 };
 
diff --git a/website/src/pages/create/user_reply.tsx b/website/src/pages/create/user_reply.tsx
index eec832cb..70487805 100644
--- a/website/src/pages/create/user_reply.tsx
+++ b/website/src/pages/create/user_reply.tsx
@@ -1,10 +1,8 @@
 import { useColorMode } from "@chakra-ui/react";
+import Head from "next/head";
 import { useEffect, useState } from "react";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
-import { Messages } from "src/components/Messages";
-import { TaskControls } from "src/components/Survey/TaskControls";
-import { TrackedTextarea } from "src/components/Survey/TrackedTextarea";
-import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards";
+import { Task } from "src/components/Tasks/Task";
 import fetcher from "src/lib/fetcher";
 import poster from "src/lib/poster";
 import useSWRImmutable from "swr/immutable";
@@ -12,7 +10,6 @@ import useSWRMutation from "swr/mutation";
 
 const UserReply = () => {
   const [tasks, setTasks] = useState([]);
-  const [inputText, setInputText] = useState("");
 
   const { isLoading, mutate } = useSWRImmutable("/api/new_task/prompter_reply", fetcher, {
     onSuccess: (data) => {
@@ -33,26 +30,6 @@ const UserReply = () => {
     },
   });
 
-  const submitResponse = (task: { id: string }) => {
-    const text = inputText.trim();
-    trigger({
-      id: task.id,
-      update_type: "text_reply_to_message",
-      content: {
-        text,
-      },
-    });
-  };
-
-  const fetchNextTask = () => {
-    setInputText("");
-    mutate();
-  };
-
-  const textChangeHandler = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setInputText(event.target.value);
-  };
-
   const { colorMode } = useColorMode();
   const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-800" : "bg-slate-900 text-white";
 
@@ -70,30 +47,14 @@ const UserReply = () => {
     );
   }
 
-  const task = tasks[0].task;
-
   return (
-    <div className={`p-12 ${mainBgClasses}`}>
-      <TwoColumnsWithCards>
-        <>
-          <h5 className="text-lg font-semibold">Reply as a user</h5>
-          <p className="text-lg py-1">Given the following conversation, provide an adequate reply</p>
-          <Messages messages={task.conversation.messages} post_id={task.id} />
-          {task.hint && <p className="text-lg py-1">Hint: {task.hint}</p>}
-        </>
-        <>
-          <h5 className="text-lg font-semibold">Provide the user`s reply</h5>
-          <TrackedTextarea
-            text={inputText}
-            onTextChange={textChangeHandler}
-            thresholds={{ low: 20, medium: 40, goal: 50 }}
-            textareaProps={{ placeholder: "Reply..." }}
-          />
-        </>
-      </TwoColumnsWithCards>
-
-      <TaskControls tasks={tasks} onSubmitResponse={submitResponse} onSkip={fetchNextTask} />
-    </div>
+    <>
+      <Head>
+        <title>Reply as Assistant</title>
+        <meta name="description" content="Reply as Assistant." />
+      </Head>
+      <Task tasks={tasks} trigger={trigger} mutate={mutate} mainBgClasses={mainBgClasses} />
+    </>
   );
 };
 
diff --git a/website/src/pages/evaluate/rank_assistant_replies.tsx b/website/src/pages/evaluate/rank_assistant_replies.tsx
index d20f6364..ccf6d55b 100644
--- a/website/src/pages/evaluate/rank_assistant_replies.tsx
+++ b/website/src/pages/evaluate/rank_assistant_replies.tsx
@@ -1,12 +1,8 @@
 import { useColorMode } from "@chakra-ui/react";
 import Head from "next/head";
 import { useEffect, useState } from "react";
-import { ContextMessages } from "src/components/ContextMessages";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
-import { Message } from "src/components/Messages";
-import { Sortable } from "src/components/Sortable/Sortable";
-import { SurveyCard } from "src/components/Survey/SurveyCard";
-import { TaskControlsOverridable } from "src/components/Survey/TaskControlsOverridable";
+import { Task } from "src/components/Tasks/Task";
 import fetcher from "src/lib/fetcher";
 import poster from "src/lib/poster";
 import useSWRImmutable from "swr/immutable";
@@ -14,11 +10,6 @@ import useSWRMutation from "swr/mutation";
 
 const RankAssistantReplies = () => {
   const [tasks, setTasks] = useState([]);
-  /**
-   * This array will contain the ranked indices of the replies
-   * The best reply will have index 0, and the worst is the last.
-   */
-  const [ranking, setRanking] = useState<number[]>([]);
 
   const { isLoading, mutate } = useSWRImmutable("/api/new_task/rank_assistant_replies", fetcher, {
     onSuccess: (data) => {
@@ -39,21 +30,6 @@ const RankAssistantReplies = () => {
     },
   });
 
-  const submitResponse = (task) => {
-    trigger({
-      id: task.id,
-      update_type: "message_ranking",
-      content: {
-        ranking,
-      },
-    });
-  };
-
-  const fetchNextTask = () => {
-    setRanking([]);
-    mutate();
-  };
-
   const { colorMode } = useColorMode();
   const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-800" : "bg-slate-900 text-white";
 
@@ -71,33 +47,13 @@ const RankAssistantReplies = () => {
     );
   }
 
-  const replies = tasks[0].task.replies as string[];
-  const messages = tasks[0].task.conversation.messages as Message[];
-
   return (
     <>
       <Head>
         <title>Rank Assistant Replies</title>
         <meta name="description" content="Rank Assistant Replies." />
       </Head>
-      <div className={`p-12 ${mainBgClasses}`}>
-        <SurveyCard className="max-w-7xl mx-auto h-fit mb-24">
-          <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>
-          <ContextMessages messages={messages} />
-          <Sortable items={replies} onChange={setRanking} className="my-8" />
-        </SurveyCard>
-
-        <TaskControlsOverridable
-          tasks={tasks}
-          isValid={ranking.length == tasks[0].task.replies.length}
-          prepareForSubmit={() => setRanking(tasks[0].task.replies.map((_, idx) => idx))}
-          onSubmitResponse={submitResponse}
-          onSkip={fetchNextTask}
-        />
-      </div>
+      <Task tasks={tasks} trigger={trigger} mutate={mutate} mainBgClasses={mainBgClasses} />
     </>
   );
 };
diff --git a/website/src/pages/evaluate/rank_initial_prompts.tsx b/website/src/pages/evaluate/rank_initial_prompts.tsx
index a0a48b27..e7c69573 100644
--- a/website/src/pages/evaluate/rank_initial_prompts.tsx
+++ b/website/src/pages/evaluate/rank_initial_prompts.tsx
@@ -2,9 +2,7 @@ import { useColorMode } from "@chakra-ui/react";
 import Head from "next/head";
 import { useEffect, useState } from "react";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
-import { Sortable } from "src/components/Sortable/Sortable";
-import { SurveyCard } from "src/components/Survey/SurveyCard";
-import { TaskControlsOverridable } from "src/components/Survey/TaskControlsOverridable";
+import { Task } from "src/components/Tasks/Task";
 import fetcher from "src/lib/fetcher";
 import poster from "src/lib/poster";
 import useSWRImmutable from "swr/immutable";
@@ -12,12 +10,6 @@ import useSWRMutation from "swr/mutation";
 
 const RankInitialPrompts = () => {
   const [tasks, setTasks] = useState([]);
-  /**
-   * This array will contain the ranked indices of the prompts
-   * 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, mutate } = useSWRImmutable("/api/new_task/rank_initial_prompts", fetcher, {
     onSuccess: (data) => {
@@ -38,21 +30,6 @@ const RankInitialPrompts = () => {
     }
   }, [tasks]);
 
-  const submitResponse = (task) => {
-    trigger({
-      id: task.id,
-      update_type: "message_ranking",
-      content: {
-        ranking,
-      },
-    });
-  };
-
-  const fetchNextTask = () => {
-    setRanking([]);
-    mutate();
-  };
-
   const { colorMode } = useColorMode();
   const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-800" : "bg-slate-900 text-white";
 
@@ -76,23 +53,7 @@ const RankInitialPrompts = () => {
         <title>Rank Initial Prompts</title>
         <meta name="description" content="Rank initial prompts." />
       </Head>
-      <div className={`p-12 ${mainBgClasses}`}>
-        <SurveyCard className="max-w-7xl mx-auto h-fit mb-24">
-          <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.
-          </p>
-          <Sortable items={tasks[0].task.prompts} onChange={setRanking} className="my-8" />
-        </SurveyCard>
-
-        <TaskControlsOverridable
-          tasks={tasks}
-          isValid={ranking.length == tasks[0].task.prompts.length}
-          prepareForSubmit={() => setRanking(tasks[0].task.prompts.map((_, idx) => idx))}
-          onSubmitResponse={submitResponse}
-          onSkip={fetchNextTask}
-        />
-      </div>
+      <Task tasks={tasks} trigger={trigger} mutate={mutate} mainBgClasses={mainBgClasses} />
     </>
   );
 };
diff --git a/website/src/pages/evaluate/rank_user_replies.tsx b/website/src/pages/evaluate/rank_user_replies.tsx
index 09e24fa2..13e8923a 100644
--- a/website/src/pages/evaluate/rank_user_replies.tsx
+++ b/website/src/pages/evaluate/rank_user_replies.tsx
@@ -1,12 +1,8 @@
 import { useColorMode } from "@chakra-ui/react";
 import Head from "next/head";
 import { useEffect, useState } from "react";
-import { ContextMessages } from "src/components/ContextMessages";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
-import { Message } from "src/components/Messages";
-import { Sortable } from "src/components/Sortable/Sortable";
-import { SurveyCard } from "src/components/Survey/SurveyCard";
-import { TaskControlsOverridable } from "src/components/Survey/TaskControlsOverridable";
+import { Task } from "src/components/Tasks/Task";
 import fetcher from "src/lib/fetcher";
 import poster from "src/lib/poster";
 import useSWRImmutable from "swr/immutable";
@@ -14,11 +10,6 @@ import useSWRMutation from "swr/mutation";
 
 const RankUserReplies = () => {
   const [tasks, setTasks] = useState([]);
-  /**
-   * This array will contain the ranked indices of the replies
-   * The best reply will have index 0, and the worst is the last.
-   */
-  const [ranking, setRanking] = useState<number[]>([]);
 
   const { isLoading, mutate } = useSWRImmutable("/api/new_task/rank_prompter_replies", fetcher, {
     onSuccess: (data) => {
@@ -39,21 +30,6 @@ const RankUserReplies = () => {
     },
   });
 
-  const submitResponse = (task) => {
-    trigger({
-      id: task.id,
-      update_type: "message_ranking",
-      content: {
-        ranking,
-      },
-    });
-  };
-
-  const fetchNextTask = () => {
-    setRanking([]);
-    mutate();
-  };
-
   const { colorMode } = useColorMode();
   const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-800" : "bg-slate-900 text-white";
 
@@ -70,8 +46,6 @@ const RankUserReplies = () => {
       </div>
     );
   }
-  const replies = tasks[0].task.replies as string[];
-  const messages = tasks[0].task.conversation.messages as Message[];
 
   return (
     <>
@@ -79,24 +53,7 @@ const RankUserReplies = () => {
         <title>Rank User Replies</title>
         <meta name="description" content="Rank User Replies." />
       </Head>
-      <div className={`p-12 ${mainBgClasses}`}>
-        <SurveyCard className="max-w-7xl mx-auto h-fit mb-24">
-          <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>
-          <ContextMessages messages={messages} />
-          <Sortable items={replies} onChange={setRanking} className="my-8" />
-        </SurveyCard>
-
-        <TaskControlsOverridable
-          tasks={tasks}
-          isValid={ranking.length == tasks[0].task.replies.length}
-          prepareForSubmit={() => setRanking(tasks[0].task.replies.map((_, idx) => idx))}
-          onSubmitResponse={submitResponse}
-          onSkip={fetchNextTask}
-        />
-      </div>
+      <Task tasks={tasks} trigger={trigger} mutate={mutate} mainBgClasses={mainBgClasses} />
     </>
   );
 };