diff --git a/website/src/components/Loading/Loading.stories.jsx b/website/src/components/Loading/Loading.stories.jsx
new file mode 100644
index 00000000..a215af19
--- /dev/null
+++ b/website/src/components/Loading/Loading.stories.jsx
@@ -0,0 +1,16 @@
+import { LoadingScreen } from "./LoadingScreen";
+
+export default {
+  title: "Example/LoadingScreen",
+  component: LoadingScreen,
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+const Template = (args) => <LoadingScreen {...args} />; //<><div>text</div><div className="max-w-500 mt-40 z-1000 h-full relative"></div></>;
+
+export const Default = Template.bind({});
+
+export const WithText = Template.bind({});
+WithText.args = { text: "Loading Text ..." };
diff --git a/website/src/components/Loading/LoadingScreen.jsx b/website/src/components/Loading/LoadingScreen.jsx
new file mode 100644
index 00000000..57323f8c
--- /dev/null
+++ b/website/src/components/Loading/LoadingScreen.jsx
@@ -0,0 +1,12 @@
+import { Progress } from "@chakra-ui/react";
+
+export const LoadingScreen = ({ text }) => (
+  <div className="bg-slate-100">
+    <Progress size="xs" isIndeterminate />
+    {text && (
+      <div className="flex h-full">
+        <div className="text-xl font-bold text-gray-800  mx-auto my-auto">{text}</div>
+      </div>
+    )}
+  </div>
+);
diff --git a/website/src/pages/create/assistant_reply.tsx b/website/src/pages/create/assistant_reply.tsx
index 5a39556a..81c2624a 100644
--- a/website/src/pages/create/assistant_reply.tsx
+++ b/website/src/pages/create/assistant_reply.tsx
@@ -8,6 +8,7 @@ import poster from "src/lib/poster";
 import { Messages } from "src/components/Messages";
 import { TwoColumns } from "src/components/TwoColumns";
 import { Button } from "src/components/Button";
+import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 
 const AssistantReply = () => {
   const [tasks, setTasks] = useState([]);
@@ -39,12 +40,13 @@ const AssistantReply = () => {
     });
   };
 
-  /**
-   * TODO: Make this a nicer loading screen.
-   */
-  if (tasks.length == 0) {
-    return <div className="p-6 bg-slate-100 text-gray-800">Loading...</div>;
+  if (true) {
+    return (<LoadingScreen text="Loading..."/>);
   }
+  if (tasks.length == 0) {
+    return <div className="p-6 bg-slate-100 text-gray-800">No tasks found...</div>;
+  }
+
 
   const task = tasks[0].task;
   return (
diff --git a/website/src/pages/create/summarize_story.tsx b/website/src/pages/create/summarize_story.tsx
index 2fb75647..145e3ede 100644
--- a/website/src/pages/create/summarize_story.tsx
+++ b/website/src/pages/create/summarize_story.tsx
@@ -9,6 +9,7 @@ import poster from "src/lib/poster";
 
 import { TwoColumns } from "src/components/TwoColumns";
 import { Button } from "src/components/Button";
+import { LoadingScreen } from "@/components/Loading/LoadingScreen";
 
 const SummarizeStory = () => {
   // Use an array of tasks that record the sequence of steps until a task is
@@ -49,11 +50,11 @@ const SummarizeStory = () => {
     });
   };
 
-  /**
-   * TODO: Make this a nicer loading screen.
-   */
+  if (isLoading) {
+    return (<LoadingScreen text="Loading..."/>);
+  }
   if (tasks.length == 0) {
-    return <div className=" p-6 bg-slate-100 text-gray-800">Loading...</div>;
+    return <div className="p-6 bg-slate-100 text-gray-800">No tasks found...</div>;
   }
 
   return (
diff --git a/website/src/pages/create/user_reply.tsx b/website/src/pages/create/user_reply.tsx
index dc633cc6..5e5b052d 100644
--- a/website/src/pages/create/user_reply.tsx
+++ b/website/src/pages/create/user_reply.tsx
@@ -8,6 +8,7 @@ import poster from "src/lib/poster";
 import { Messages } from "src/components/Messages";
 import { TwoColumns } from "src/components/TwoColumns";
 import { Button } from "src/components/Button";
+import { LoadingScreen } from "@/components/Loading/LoadingScreen";
 
 const UserReply = () => {
   const [tasks, setTasks] = useState([]);
@@ -39,11 +40,16 @@ const UserReply = () => {
     });
   };
 
+
+  if (isLoading) {
+    return (<LoadingScreen text="Loading..."/>);
+  }
+
   /**
    * TODO: Make this a nicer loading screen.
    */
   if (tasks.length == 0) {
-    return <div className="p-6 bg-slate-100 text-gray-800">Loading...</div>;
+    return <div className="p-6 bg-slate-100 text-gray-800">No tasks found...</div>;
   }
 
   const task = tasks[0].task;
diff --git a/website/src/pages/evaluate/rank_initial_prompts.tsx b/website/src/pages/evaluate/rank_initial_prompts.tsx
index 7c5378d5..1f62b67e 100644
--- a/website/src/pages/evaluate/rank_initial_prompts.tsx
+++ b/website/src/pages/evaluate/rank_initial_prompts.tsx
@@ -9,6 +9,7 @@ import fetcher from "src/lib/fetcher";
 import poster from "src/lib/poster";
 
 import { Button } from "src/components/Button";
+import { LoadingScreen } from "@/components/Loading/LoadingScreen";
 
 const RankInitialPrompts = () => {
   const [tasks, setTasks] = useState([]);
@@ -44,11 +45,11 @@ const RankInitialPrompts = () => {
     });
   };
 
-  /**
-   * TODO: Make this a nicer loading screen.
-   */
+  if (isLoading) {
+    return (<LoadingScreen text="Loading..."/>);
+  }
   if (tasks.length == 0) {
-    return <div className="p-6 bg-slate-100 text-gray-800">Loading...</div>;
+    return <div className="p-6 bg-slate-100 text-gray-800">No tasks found...</div>;
   }
   const prompts = tasks[0].task.prompts as string[];
   const items = ranking.map((i) => ({
diff --git a/website/src/pages/evaluate/rate_summary.tsx b/website/src/pages/evaluate/rate_summary.tsx
index 5833b12f..557b87ec 100644
--- a/website/src/pages/evaluate/rate_summary.tsx
+++ b/website/src/pages/evaluate/rate_summary.tsx
@@ -11,6 +11,7 @@ import poster from "src/lib/poster";
 
 import { TwoColumns } from "src/components/TwoColumns";
 import { Button } from "src/components/Button";
+import { LoadingScreen } from "@/components/Loading/LoadingScreen";
 
 const RateSummary = () => {
   // Use an array of tasks that record the sequence of steps until a task is
@@ -49,11 +50,11 @@ const RateSummary = () => {
     });
   };
 
-  /**
-   * TODO: Make this a nicer loading screen.
-   */
+  if (isLoading) {
+    return (<LoadingScreen text="Loading..."/>);
+  }
   if (tasks.length == 0) {
-    return <div className="p-6 bg-slate-100 text-gray-800">Loading...</div>;
+    return <div className="p-6 bg-slate-100 text-gray-800">No tasks found...</div>;
   }
 
   return (