diff --git a/website/src/components/CallToAction.tsx b/website/src/components/CallToAction.tsx
index bf827fd0..ee6827eb 100644
--- a/website/src/components/CallToAction.tsx
+++ b/website/src/components/CallToAction.tsx
@@ -1,5 +1,6 @@
-import { useId } from "react";
 import { useColorMode } from "@chakra-ui/react";
+import { useId } from "react";
+
 import { Container } from "./Container";
 
 function CircleBackground({ width = 558, height = 558, ...props }) {
diff --git a/website/src/components/Footer.tsx b/website/src/components/Footer.tsx
index 6763e418..cadae07e 100644
--- a/website/src/components/Footer.tsx
+++ b/website/src/components/Footer.tsx
@@ -1,6 +1,6 @@
+import { useColorMode } from "@chakra-ui/react";
 import Image from "next/image";
 import Link from "next/link";
-import { useColorMode } from "@chakra-ui/react";
 
 export function Footer() {
   const { colorMode } = useColorMode();
diff --git a/website/src/components/Header/Header.tsx b/website/src/components/Header/Header.tsx
index 23065adf..bdf011a4 100644
--- a/website/src/components/Header/Header.tsx
+++ b/website/src/components/Header/Header.tsx
@@ -1,4 +1,4 @@
-import { Button, Box } from "@chakra-ui/react";
+import { Box, Button } from "@chakra-ui/react";
 import { Popover } from "@headlessui/react";
 import { AnimatePresence, motion } from "framer-motion";
 import Image from "next/image";
@@ -6,9 +6,9 @@ import Link from "next/link";
 import { useSession } from "next-auth/react";
 import { FaUser } from "react-icons/fa";
 
+import { ColorModeIconToggle } from "../UI/ColorModeIconToggle";
 import { NavLinks } from "./NavLinks";
 import { UserMenu } from "./UserMenu";
-import { ColorModeIconToggle } from "../UI/ColorModeIconToggle";
 
 function MenuIcon(props) {
   return (
diff --git a/website/src/components/Header/NavLinks.tsx b/website/src/components/Header/NavLinks.tsx
index 407040ed..4f559e7e 100644
--- a/website/src/components/Header/NavLinks.tsx
+++ b/website/src/components/Header/NavLinks.tsx
@@ -1,9 +1,8 @@
+import { useColorMode } from "@chakra-ui/react";
 import { AnimatePresence, motion } from "framer-motion";
 import Link from "next/link";
 import { useState } from "react";
 
-import { useColorMode } from "@chakra-ui/react";
-
 export function NavLinks(): JSX.Element {
   const [hoveredIndex, setHoveredIndex] = useState(null);
   const { colorMode } = useColorMode();
diff --git a/website/src/components/Header/UserMenu.tsx b/website/src/components/Header/UserMenu.tsx
index 9014717e..35b71698 100644
--- a/website/src/components/Header/UserMenu.tsx
+++ b/website/src/components/Header/UserMenu.tsx
@@ -1,10 +1,10 @@
+import { Box, useColorModeValue } from "@chakra-ui/react";
 import { Popover } from "@headlessui/react";
 import { AnimatePresence, motion } from "framer-motion";
 import Image from "next/image";
 import { signOut, useSession } from "next-auth/react";
 import React from "react";
 import { FaCog, FaSignOutAlt } from "react-icons/fa";
-import { Box, useColorModeValue } from "@chakra-ui/react";
 
 export function UserMenu() {
   const { data: session } = useSession();
diff --git a/website/src/components/Hero.tsx b/website/src/components/Hero.tsx
index 1ded84c5..1e6b296f 100644
--- a/website/src/components/Hero.tsx
+++ b/website/src/components/Hero.tsx
@@ -1,6 +1,7 @@
-import Image from "next/image";
 import { useColorMode } from "@chakra-ui/react";
+import Image from "next/image";
 import { useId } from "react";
+
 import { Container } from "./Container";
 
 function BackgroundIllustration(props) {
diff --git a/website/src/components/Messages.tsx b/website/src/components/Messages.tsx
index d0229df6..d3d7b3b8 100644
--- a/website/src/components/Messages.tsx
+++ b/website/src/components/Messages.tsx
@@ -1,7 +1,8 @@
 import { Grid } from "@chakra-ui/react";
-import { FlaggableElement } from "./FlaggableElement";
 import { useColorMode } from "@chakra-ui/react";
 
+import { FlaggableElement } from "./FlaggableElement";
+
 export interface Message {
   text: string;
   is_assistant: boolean;
@@ -21,7 +22,10 @@ export const Messages = ({ messages, post_id }: { messages: Message[]; post_id:
   const items = messages.map(({ text, is_assistant }: Message, i: number) => {
     return (
       <FlaggableElement text={text} post_id={post_id} key={i + text}>
-        <div key={i + text} className={`${getBgColor(is_assistant)} p-4 rounded-md text-white whitespace-pre-wrap`}>
+        <div
+          key={i + text}
+          className={`${getBgColor(is_assistant, colorMode)} p-4 rounded-md text-white whitespace-pre-wrap`}
+        >
           {text}
         </div>
       </FlaggableElement>
diff --git a/website/src/components/Sortable/Sortable.tsx b/website/src/components/Sortable/Sortable.tsx
index 56d1d5a4..2f63ff27 100644
--- a/website/src/components/Sortable/Sortable.tsx
+++ b/website/src/components/Sortable/Sortable.tsx
@@ -2,9 +2,9 @@ import { Flex } from "@chakra-ui/react";
 import {
   closestCenter,
   DndContext,
+  KeyboardSensor,
   PointerSensor,
   TouchSensor,
-  KeyboardSensor,
   useSensor,
   useSensors,
 } from "@dnd-kit/core";
diff --git a/website/src/components/Sortable/SortableItem.tsx b/website/src/components/Sortable/SortableItem.tsx
index 2e6a8274..da691de3 100644
--- a/website/src/components/Sortable/SortableItem.tsx
+++ b/website/src/components/Sortable/SortableItem.tsx
@@ -1,9 +1,9 @@
 import { Button } from "@chakra-ui/react";
+import { useColorMode } from "@chakra-ui/react";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import { RxDragHandleDots2 } from "react-icons/rx";
 import { PropsWithChildren } from "react";
-import { useColorMode } from "@chakra-ui/react";
+import { RxDragHandleDots2 } from "react-icons/rx";
 
 export const SortableItem = ({ children, id }: PropsWithChildren<{ id: number }>) => {
   const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });
diff --git a/website/src/components/Survey/TaskControls.tsx b/website/src/components/Survey/TaskControls.tsx
index 76259206..7847c452 100644
--- a/website/src/components/Survey/TaskControls.tsx
+++ b/website/src/components/Survey/TaskControls.tsx
@@ -1,8 +1,8 @@
 import { useColorMode } from "@chakra-ui/react";
-import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
 import { Flex } from "@chakra-ui/react";
 import { SkipButton } from "src/components/Buttons/Skip";
 import { SubmitButton } from "src/components/Buttons/Submit";
+import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
 
 interface TaskControlsProps {
   // we need a task type
diff --git a/website/src/components/TaskSelection/TaskSelection.tsx b/website/src/components/TaskSelection/TaskSelection.tsx
index ea5551fe..f258a90b 100644
--- a/website/src/components/TaskSelection/TaskSelection.tsx
+++ b/website/src/components/TaskSelection/TaskSelection.tsx
@@ -1,6 +1,6 @@
 import { Flex } from "@chakra-ui/react";
-import React from "react";
 import { useColorMode } from "@chakra-ui/react";
+import React from "react";
 
 import { TaskOption } from "./TaskOption";
 import { TaskOptions } from "./TaskOptions";
diff --git a/website/src/components/UI/ColorModeIconToggle.tsx b/website/src/components/UI/ColorModeIconToggle.tsx
index 2bcd8e59..de27828c 100644
--- a/website/src/components/UI/ColorModeIconToggle.tsx
+++ b/website/src/components/UI/ColorModeIconToggle.tsx
@@ -1,5 +1,4 @@
 import { useColorMode } from "@chakra-ui/react";
-
 import { CiDark } from "react-icons/ci";
 import { CiLight } from "react-icons/ci";
 
diff --git a/website/src/pages/_app.tsx b/website/src/pages/_app.tsx
index 2725f829..ab7655cd 100644
--- a/website/src/pages/_app.tsx
+++ b/website/src/pages/_app.tsx
@@ -1,10 +1,10 @@
-import { SessionProvider } from "next-auth/react";
-import type { AppProps } from "next/app";
-
-import { NextPageWithLayout, getDefaultLayout } from "src/components/Layout";
-
 import "../styles/globals.css";
 import "focus-visible";
+
+import type { AppProps } from "next/app";
+import { SessionProvider } from "next-auth/react";
+import { getDefaultLayout, NextPageWithLayout } from "src/components/Layout";
+
 import { Chakra, getServerSideProps } from "../styles/Chakra";
 
 type AppPropsWithLayout = AppProps & {
diff --git a/website/src/pages/auth/signin.tsx b/website/src/pages/auth/signin.tsx
index 2238b2e7..f3c347e6 100644
--- a/website/src/pages/auth/signin.tsx
+++ b/website/src/pages/auth/signin.tsx
@@ -1,13 +1,13 @@
 import { Button, Input, Stack } from "@chakra-ui/react";
+import { useColorMode } from "@chakra-ui/react";
 import Head from "next/head";
-import { FaBug, FaDiscord, FaEnvelope, FaGithub } from "react-icons/fa";
+import Link from "next/link";
 import { getCsrfToken, getProviders, signIn } from "next-auth/react";
 import React, { useRef } from "react";
-import Link from "next/link";
-import { Header } from "src/components/Header";
-import { Footer } from "src/components/Footer";
+import { FaBug, FaDiscord, FaEnvelope, FaGithub } from "react-icons/fa";
 import { AuthLayout } from "src/components/AuthLayout";
-import { useColorMode } from "@chakra-ui/react";
+import { Footer } from "src/components/Footer";
+import { Header } from "src/components/Header";
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function Signin({ csrfToken, providers }) {
diff --git a/website/src/pages/create/assistant_reply.tsx b/website/src/pages/create/assistant_reply.tsx
index dec9796a..9a9c062e 100644
--- a/website/src/pages/create/assistant_reply.tsx
+++ b/website/src/pages/create/assistant_reply.tsx
@@ -1,16 +1,15 @@
 import { Container, Textarea } from "@chakra-ui/react";
+import { useColorMode } from "@chakra-ui/react";
 import { useRef, useState } from "react";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Messages } from "src/components/Messages";
+import { TaskControls } from "src/components/Survey/TaskControls";
 import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards";
 import fetcher from "src/lib/fetcher";
 import poster from "src/lib/poster";
 import useSWRImmutable from "swr/immutable";
 import useSWRMutation from "swr/mutation";
 
-import { useColorMode } from "@chakra-ui/react";
-import { TaskControls } from "src/components/Survey/TaskControls";
-
 const AssistantReply = () => {
   const [tasks, setTasks] = useState([]);
 
diff --git a/website/src/pages/create/summarize_story.tsx b/website/src/pages/create/summarize_story.tsx
index 86253d81..8a4ed291 100644
--- a/website/src/pages/create/summarize_story.tsx
+++ b/website/src/pages/create/summarize_story.tsx
@@ -1,13 +1,13 @@
 import { Textarea } from "@chakra-ui/react";
+import { useColorMode } from "@chakra-ui/react";
 import { useRef, useState } from "react";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
+import { TaskControls } from "src/components/Survey/TaskControls";
 import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards";
 import fetcher from "src/lib/fetcher";
 import poster from "src/lib/poster";
 import useSWRImmutable from "swr/immutable";
 import useSWRMutation from "swr/mutation";
-import { useColorMode } from "@chakra-ui/react";
-import { TaskControls } from "src/components/Survey/TaskControls";
 
 const SummarizeStory = () => {
   // Use an array of tasks that record the sequence of steps until a task is
diff --git a/website/src/pages/create/user_reply.tsx b/website/src/pages/create/user_reply.tsx
index d3413f09..194b09a5 100644
--- a/website/src/pages/create/user_reply.tsx
+++ b/website/src/pages/create/user_reply.tsx
@@ -1,14 +1,14 @@
 import { Textarea } from "@chakra-ui/react";
+import { useColorMode } from "@chakra-ui/react";
 import { useRef, useState } from "react";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Messages } from "src/components/Messages";
+import { TaskControls } from "src/components/Survey/TaskControls";
 import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards";
 import fetcher from "src/lib/fetcher";
 import poster from "src/lib/poster";
 import useSWRImmutable from "swr/immutable";
 import useSWRMutation from "swr/mutation";
-import { useColorMode } from "@chakra-ui/react";
-import { TaskControls } from "src/components/Survey/TaskControls";
 
 const UserReply = () => {
   const [tasks, setTasks] = useState([]);
diff --git a/website/src/pages/evaluate/rank_assistant_replies.tsx b/website/src/pages/evaluate/rank_assistant_replies.tsx
index 144c81a5..e18d228a 100644
--- a/website/src/pages/evaluate/rank_assistant_replies.tsx
+++ b/website/src/pages/evaluate/rank_assistant_replies.tsx
@@ -1,14 +1,14 @@
+import { useColorMode } from "@chakra-ui/react";
 import Head from "next/head";
 import { 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 { TaskControls } from "src/components/Survey/TaskControls";
 import fetcher from "src/lib/fetcher";
 import poster from "src/lib/poster";
 import useSWRImmutable from "swr/immutable";
 import useSWRMutation from "swr/mutation";
-import { SurveyCard } from "src/components/Survey/SurveyCard";
-import { useColorMode } from "@chakra-ui/react";
-import { TaskControls } from "src/components/Survey/TaskControls";
 
 const RankAssistantReplies = () => {
   const [tasks, setTasks] = useState([]);
diff --git a/website/src/pages/evaluate/rank_initial_prompts.tsx b/website/src/pages/evaluate/rank_initial_prompts.tsx
index 647d0fe2..48a67e90 100644
--- a/website/src/pages/evaluate/rank_initial_prompts.tsx
+++ b/website/src/pages/evaluate/rank_initial_prompts.tsx
@@ -1,14 +1,14 @@
+import { useColorMode } from "@chakra-ui/react";
 import Head from "next/head";
 import { 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 { TaskControls } from "src/components/Survey/TaskControls";
 import fetcher from "src/lib/fetcher";
 import poster from "src/lib/poster";
 import useSWRImmutable from "swr/immutable";
 import useSWRMutation from "swr/mutation";
-import { SurveyCard } from "src/components/Survey/SurveyCard";
-import { useColorMode } from "@chakra-ui/react";
-import { TaskControls } from "src/components/Survey/TaskControls";
 
 const RankInitialPrompts = () => {
   const [tasks, setTasks] = useState([]);
diff --git a/website/src/pages/evaluate/rank_user_replies.tsx b/website/src/pages/evaluate/rank_user_replies.tsx
index 39f74b3b..ea57f9a0 100644
--- a/website/src/pages/evaluate/rank_user_replies.tsx
+++ b/website/src/pages/evaluate/rank_user_replies.tsx
@@ -1,14 +1,14 @@
+import { useColorMode } from "@chakra-ui/react";
 import Head from "next/head";
 import { 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 { TaskControls } from "src/components/Survey/TaskControls";
 import fetcher from "src/lib/fetcher";
 import poster from "src/lib/poster";
 import useSWRImmutable from "swr/immutable";
 import useSWRMutation from "swr/mutation";
-import { SurveyCard } from "src/components/Survey/SurveyCard";
-import { useColorMode } from "@chakra-ui/react";
-import { TaskControls } from "src/components/Survey/TaskControls";
 
 const RankUserReplies = () => {
   const [tasks, setTasks] = useState([]);
diff --git a/website/src/pages/evaluate/rate_summary.tsx b/website/src/pages/evaluate/rate_summary.tsx
index 2156ff6b..e0118ece 100644
--- a/website/src/pages/evaluate/rate_summary.tsx
+++ b/website/src/pages/evaluate/rate_summary.tsx
@@ -1,18 +1,17 @@
 import { Textarea } from "@chakra-ui/react";
+import { useColorMode } from "@chakra-ui/react";
 import { QuestionMarkCircleIcon } from "@heroicons/react/20/solid";
 import Head from "next/head";
 import { useState } from "react";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import RatingRadioGroup from "src/components/RatingRadioGroup";
+import { TaskControls } from "src/components/Survey/TaskControls";
 import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards";
 import fetcher from "src/lib/fetcher";
 import poster from "src/lib/poster";
 import useSWRImmutable from "swr/immutable";
 import useSWRMutation from "swr/mutation";
 
-import { useColorMode } from "@chakra-ui/react";
-import { TaskControls } from "src/components/Survey/TaskControls";
-
 const RateSummary = () => {
   // Use an array of tasks that record the sequence of steps until a task is
   // deemed complete.
diff --git a/website/src/styles/Chakra.tsx b/website/src/styles/Chakra.tsx
index e87e73ed..69827fcd 100644
--- a/website/src/styles/Chakra.tsx
+++ b/website/src/styles/Chakra.tsx
@@ -1,4 +1,5 @@
 import { ChakraProvider, cookieStorageManagerSSR, localStorageManager } from "@chakra-ui/react";
+
 import { theme } from "./Theme";
 
 export function Chakra({ cookies, children }) {
diff --git a/website/src/styles/Theme/index.ts b/website/src/styles/Theme/index.ts
index 7e382aa6..11edd8f3 100644
--- a/website/src/styles/Theme/index.ts
+++ b/website/src/styles/Theme/index.ts
@@ -1,7 +1,8 @@
 import { type ThemeConfig, extendTheme } from "@chakra-ui/react";
-import { containerTheme } from "./components/Container";
 import { Styles } from "@chakra-ui/theme-tools";
+
 import { colors } from "./colors";
+import { containerTheme } from "./components/Container";
 
 const config: ThemeConfig = {
   initialColorMode: "light",