diff --git a/website/src/hooks/tasks/evaluate/useRankInitialPrompts.ts b/website/src/hooks/tasks/evaluate/useRankInitialPrompts.ts
new file mode 100644
index 00000000..da772c80
--- /dev/null
+++ b/website/src/hooks/tasks/evaluate/useRankInitialPrompts.ts
@@ -0,0 +1,9 @@
+import { useGenericTaskAPI } from "../useGenericTaskAPI";
+
+interface RankInitialPromptsTask {
+  id: string;
+  type: "rank_initial_prompts";
+  prompts: string[];
+}
+
+export const useRankInitialPromptsTask = () => useGenericTaskAPI<RankInitialPromptsTask>("rank_initial_prompts");
diff --git a/website/src/hooks/tasks/evaluate/useRankReplies.ts b/website/src/hooks/tasks/evaluate/useRankReplies.ts
new file mode 100644
index 00000000..2d8d513f
--- /dev/null
+++ b/website/src/hooks/tasks/evaluate/useRankReplies.ts
@@ -0,0 +1,25 @@
+import { useGenericTaskAPI } from "../useGenericTaskAPI";
+
+interface BaseRankRepliesTask {
+  id: string;
+  replies: string[];
+  conversation: {
+    messages: Array<{
+      text: string;
+      is_assistant: boolean;
+      message_id: string;
+    }>;
+  };
+}
+
+interface RankAssistantRepliesTask extends BaseRankRepliesTask {
+  type: "rank_assistant_replies";
+}
+
+interface RankPrompterRepliesTask extends BaseRankRepliesTask {
+  type: "rank_prompter_replies";
+}
+
+export const useRankAssistantRepliesTask = () => useGenericTaskAPI<RankAssistantRepliesTask>("rank_assistant_replies");
+
+export const useRankPrompterRepliesTask = () => useGenericTaskAPI<RankPrompterRepliesTask>("rank_prompter_replies");
diff --git a/website/src/pages/evaluate/rank_assistant_replies.tsx b/website/src/pages/evaluate/rank_assistant_replies.tsx
index ccf6d55b..931c9194 100644
--- a/website/src/pages/evaluate/rank_assistant_replies.tsx
+++ b/website/src/pages/evaluate/rank_assistant_replies.tsx
@@ -1,34 +1,12 @@
 import { useColorMode } from "@chakra-ui/react";
 import Head from "next/head";
-import { useEffect, useState } from "react";
+import { Container } from "src/components/Container";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
-import fetcher from "src/lib/fetcher";
-import poster from "src/lib/poster";
-import useSWRImmutable from "swr/immutable";
-import useSWRMutation from "swr/mutation";
+import { useRankAssistantRepliesTask } from "src/hooks/tasks/evaluate/useRankReplies";
 
 const RankAssistantReplies = () => {
-  const [tasks, setTasks] = useState([]);
-
-  const { isLoading, mutate } = useSWRImmutable("/api/new_task/rank_assistant_replies", fetcher, {
-    onSuccess: (data) => {
-      setTasks([data]);
-    },
-  });
-
-  useEffect(() => {
-    if (tasks.length == 0) {
-      mutate();
-    }
-  }, [tasks]);
-
-  const { trigger } = useSWRMutation("/api/update_task", poster, {
-    onSuccess: async (data) => {
-      const newTask = await data.json();
-      setTasks((oldTasks) => [...oldTasks, newTask]);
-    },
-  });
+  const { tasks, isLoading, reset, trigger } = useRankAssistantRepliesTask();
 
   const { colorMode } = useColorMode();
   const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-800" : "bg-slate-900 text-white";
@@ -37,14 +15,8 @@ const RankAssistantReplies = () => {
     return <LoadingScreen text="Loading..." />;
   }
 
-  if (tasks.length == 0) {
-    return (
-      <div className={`p-12 ${mainBgClasses}`}>
-        <div className="flex h-full">
-          <div className="text-xl font-bold  mx-auto my-auto">No tasks found...</div>
-        </div>
-      </div>
-    );
+  if (tasks.length === 0) {
+    return <Container className="p-6 text-center">No tasks found...</Container>;
   }
 
   return (
@@ -53,7 +25,7 @@ const RankAssistantReplies = () => {
         <title>Rank Assistant Replies</title>
         <meta name="description" content="Rank Assistant Replies." />
       </Head>
-      <Task tasks={tasks} trigger={trigger} mutate={mutate} mainBgClasses={mainBgClasses} />
+      <Task tasks={tasks} trigger={trigger} mutate={reset} mainBgClasses={mainBgClasses} />
     </>
   );
 };
diff --git a/website/src/pages/evaluate/rank_initial_prompts.tsx b/website/src/pages/evaluate/rank_initial_prompts.tsx
index e7c69573..4b717143 100644
--- a/website/src/pages/evaluate/rank_initial_prompts.tsx
+++ b/website/src/pages/evaluate/rank_initial_prompts.tsx
@@ -1,34 +1,12 @@
 import { useColorMode } from "@chakra-ui/react";
 import Head from "next/head";
-import { useEffect, useState } from "react";
+import { Container } from "src/components/Container";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
-import fetcher from "src/lib/fetcher";
-import poster from "src/lib/poster";
-import useSWRImmutable from "swr/immutable";
-import useSWRMutation from "swr/mutation";
+import { useRankInitialPromptsTask } from "src/hooks/tasks/evaluate/useRankInitialPrompts";
 
 const RankInitialPrompts = () => {
-  const [tasks, setTasks] = useState([]);
-
-  const { isLoading, mutate } = useSWRImmutable("/api/new_task/rank_initial_prompts", fetcher, {
-    onSuccess: (data) => {
-      setTasks([data]);
-    },
-  });
-
-  const { trigger } = useSWRMutation("/api/update_task", poster, {
-    onSuccess: async (data) => {
-      const newTask = await data.json();
-      setTasks((oldTasks) => [...oldTasks, newTask]);
-    },
-  });
-
-  useEffect(() => {
-    if (tasks.length == 0) {
-      mutate();
-    }
-  }, [tasks]);
+  const { tasks, isLoading, reset, trigger } = useRankInitialPromptsTask();
 
   const { colorMode } = useColorMode();
   const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-800" : "bg-slate-900 text-white";
@@ -37,14 +15,8 @@ const RankInitialPrompts = () => {
     return <LoadingScreen text="Loading..." />;
   }
 
-  if (tasks.length == 0) {
-    return (
-      <div className={`p-12 ${mainBgClasses}`}>
-        <div className="flex h-full">
-          <div className="text-xl font-bold  mx-auto my-auto">No tasks found...</div>
-        </div>
-      </div>
-    );
+  if (tasks.length === 0) {
+    return <Container className="p-6 text-center">No tasks found...</Container>;
   }
 
   return (
@@ -53,7 +25,7 @@ const RankInitialPrompts = () => {
         <title>Rank Initial Prompts</title>
         <meta name="description" content="Rank initial prompts." />
       </Head>
-      <Task tasks={tasks} trigger={trigger} mutate={mutate} mainBgClasses={mainBgClasses} />
+      <Task tasks={tasks} trigger={trigger} mutate={reset} mainBgClasses={mainBgClasses} />
     </>
   );
 };
diff --git a/website/src/pages/evaluate/rank_user_replies.tsx b/website/src/pages/evaluate/rank_user_replies.tsx
index 13e8923a..659874a2 100644
--- a/website/src/pages/evaluate/rank_user_replies.tsx
+++ b/website/src/pages/evaluate/rank_user_replies.tsx
@@ -1,34 +1,12 @@
 import { useColorMode } from "@chakra-ui/react";
 import Head from "next/head";
-import { useEffect, useState } from "react";
+import { Container } from "src/components/Container";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
-import fetcher from "src/lib/fetcher";
-import poster from "src/lib/poster";
-import useSWRImmutable from "swr/immutable";
-import useSWRMutation from "swr/mutation";
+import { useRankPrompterRepliesTask } from "src/hooks/tasks/evaluate/useRankReplies";
 
 const RankUserReplies = () => {
-  const [tasks, setTasks] = useState([]);
-
-  const { isLoading, mutate } = useSWRImmutable("/api/new_task/rank_prompter_replies", fetcher, {
-    onSuccess: (data) => {
-      setTasks([data]);
-    },
-  });
-
-  useEffect(() => {
-    if (tasks.length == 0) {
-      mutate();
-    }
-  }, [tasks]);
-
-  const { trigger } = useSWRMutation("/api/update_task", poster, {
-    onSuccess: async (data) => {
-      const newTask = await data.json();
-      setTasks((oldTasks) => [...oldTasks, newTask]);
-    },
-  });
+  const { tasks, isLoading, reset, trigger } = useRankPrompterRepliesTask();
 
   const { colorMode } = useColorMode();
   const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-800" : "bg-slate-900 text-white";
@@ -37,14 +15,8 @@ const RankUserReplies = () => {
     return <LoadingScreen text="Loading..." />;
   }
 
-  if (tasks.length == 0) {
-    return (
-      <div className={`p-12 ${mainBgClasses}`}>
-        <div className="flex h-full">
-          <div className="text-xl font-bold  mx-auto my-auto">No tasks found...</div>
-        </div>
-      </div>
-    );
+  if (tasks.length === 0) {
+    return <Container className="p-6 text-center">No tasks found...</Container>;
   }
 
   return (
@@ -53,7 +25,7 @@ const RankUserReplies = () => {
         <title>Rank User Replies</title>
         <meta name="description" content="Rank User Replies." />
       </Head>
-      <Task tasks={tasks} trigger={trigger} mutate={mutate} mainBgClasses={mainBgClasses} />
+      <Task tasks={tasks} trigger={trigger} mutate={reset} mainBgClasses={mainBgClasses} />
     </>
   );
 };