diff --git a/www/app/page.tsx b/www/app/page.tsx
index fc31452..ad803f8 100644
--- a/www/app/page.tsx
+++ b/www/app/page.tsx
@@ -2,6 +2,7 @@
 import Image from "next/image";
 
 import banner from "@/public/bloom2x1.svg";
+import darkBanner from "@/public/bloom2x1dark.svg";
 import Message from "@/components/message";
 import Thoughts from "@/components/thoughts";
 import Sidebar from "@/components/sidebar";
@@ -32,6 +33,7 @@ import { Session } from "@supabase/supabase-js";
 import { createClientComponentClient } from "@supabase/auth-helpers-nextjs";
 import Link from "next/link";
 import MarkdownWrapper from "@/components/markdownWrapper";
+import { DarkModeSwitch } from "react-toggle-dark-mode";
 
 interface Message {
   text: string;
@@ -181,6 +183,13 @@ export default function Home() {
     };
   }, []);
 
+  const [isDarkMode, setIsDarkMode] = useState(
+    window.matchMedia("(prefers-color-scheme: dark)").matches
+  );
+  const toggleDarkMode = (checked: boolean) => {
+    setIsDarkMode(checked);
+  };
+
   // async function newChat() {
   //   return await fetch(`${URL}/api/conversations/insert?user_id=${userId}`)
   //     .then((res) => res.json())
@@ -292,7 +301,11 @@ export default function Home() {
   }
 
   return (
-    <main className="flex h-[100dvh] w-screen flex-col pb-[env(keyboard-inset-height)] text-sm lg:text-base overflow-hidden relative">
+    <main
+      className={`flex h-[100dvh] w-screen flex-col pb-[env(keyboard-inset-height)] text-sm lg:text-base overflow-hidden relative ${
+        isDarkMode ? "dark" : ""
+      }`}
+    >
       <Sidebar
         conversations={conversations}
         authSession={authSession}
@@ -304,20 +317,28 @@ export default function Home() {
         isSidebarOpen={isSidebarOpen}
         setIsSidebarOpen={setIsSidebarOpen}
       />
-      <div className="flex flex-col w-full h-[100dvh] lg:pl-60 xl:pl-72">
-        <nav className="flex justify-between items-center p-4 border-b border-gray-300">
+      <div className="flex flex-col w-full h-[100dvh] lg:pl-60 xl:pl-72 dark:bg-gray-900">
+        <nav className="flex justify-between items-center p-4 border-b border-gray-300 dark:border-gray-700">
           <FaBars
             className="inline lg:hidden"
             onClick={() => setIsSidebarOpen(!isSidebarOpen)}
           />
-          <Image src={banner} alt="banner" className="h-10  w-auto" />
-          <button
-            className="bg-neon-green rounded-lg px-4 py-2 flex justify-center items-center gap-2"
-            onClick={() => setIsThoughtsOpen(true)}
-          >
-            See Thoughts
-            <FaLightbulb className="inline" />
-          </button>
+
+          <Image
+            src={isDarkMode ? darkBanner : banner}
+            alt="banner"
+            className="h-10  w-auto"
+          />
+          <div className="flex justify-between items-center gap-4">
+            <DarkModeSwitch checked={isDarkMode} onChange={toggleDarkMode} />
+            <button
+              className="bg-neon-green rounded-lg px-4 py-2 flex justify-center items-center gap-2"
+              onClick={() => setIsThoughtsOpen(true)}
+            >
+              See Thoughts
+              <FaLightbulb className="inline" />
+            </button>
+          </div>
         </nav>
         {!authSession && (
           <section className="bg-neon-green text-black text-center py-4">
@@ -333,7 +354,7 @@ export default function Home() {
           </section>
         )}
         <section
-          className="flex flex-col flex-1 overflow-y-auto lg:px-5"
+          className="flex flex-col flex-1 overflow-y-auto lg:px-5 dark:text-white"
           ref={messageContainerRef}
         >
           {messages.map((message, i) => (
@@ -357,7 +378,7 @@ export default function Home() {
             type="text"
             ref={input}
             placeholder="Type a message..."
-            className={`flex-1 px-3 py-1 lg:px-5 lg:py-3 bg-gray-100 text-gray-400 rounded-2xl border-2 ${
+            className={`flex-1 px-3 py-1 lg:px-5 lg:py-3 bg-gray-100 dark:bg-gray-800 text-gray-400 rounded-2xl border-2 ${
               canSend ? " border-green-200" : "border-red-200 opacity-50"
             }`}
             disabled={!canSend}
diff --git a/www/components/message.tsx b/www/components/message.tsx
index cd00609..1692dbb 100644
--- a/www/components/message.tsx
+++ b/www/components/message.tsx
@@ -2,16 +2,18 @@ import Image from "next/image";
 import icon from "@/public/bloomicon.jpg";
 import usericon from "@/public/usericon.svg";
 
-export default function Message({ children, isUser }: {
+export default function Message({
+  children,
+  isUser,
+}: {
   children: React.ReactNode;
   isUser?: boolean;
 }) {
-
   return (
     <article
       className={
         "flex p-5 lg:p-8 gap-2 lg:gap-5 lg:rounded-2xl " +
-        (isUser ? "bg-gray-100" : "")
+        (isUser ? "bg-gray-100 dark:bg-gray-800" : "")
       }
     >
       <Image
diff --git a/www/components/sidebar.tsx b/www/components/sidebar.tsx
index 1927a8f..8f9d527 100644
--- a/www/components/sidebar.tsx
+++ b/www/components/sidebar.tsx
@@ -133,83 +133,86 @@ export default function Sidebar({
 
   return (
     <div
-      className={`fixed lg:static z-20 inset-0 flex-none h-full w-full lg:absolute lg:h-auto lg:overflow-visible lg:pt-0 lg:w-60 xl:w-72 lg:block lg:shadow-lg border-r border-gray-300 ${isSidebarOpen ? "" : "hidden"
-        }`}
+      className={`fixed lg:static z-20 inset-0 flex-none h-full w-full lg:absolute lg:h-auto lg:overflow-visible lg:pt-0 lg:w-60 xl:w-72 lg:block lg:shadow-lg border-r border-gray-300 dark:border-gray-700 ${
+        isSidebarOpen ? "" : "hidden"
+      }`}
     >
       <div
-        className={`h-full scrollbar-trigger overflow-hidden bg-white sm:w-3/5 w-4/5 lg:w-full flex flex-col ${isSidebarOpen ? "fixed lg:static" : "sticky"
-          } top-0 left-0`}
+        className={`h-full scrollbar-trigger overflow-hidden bg-white dark:bg-gray-950 dark:text-white sm:w-3/5 w-4/5 lg:w-full flex flex-col ${
+          isSidebarOpen ? "fixed lg:static" : "sticky"
+        } top-0 left-0`}
       >
         {/* Section 1: Top buttons */}
-        <div className="flex justify-between items-center p-4 gap-2 border-b border-gray-300">
+        <div className="flex justify-between items-center p-4 gap-2 border-b border-gray-300 dark:border-gray-700">
           <button
-            className="bg-neon-green rounded-lg px-4 py-2 w-full lg:w-full h-10"
+            className="bg-neon-green text-black rounded-lg px-4 py-2 w-full lg:w-full h-10"
             onClick={addChat}
           >
             New Chat
           </button>
           <button
-            className="lg:hidden bg-neon-green rounded-lg px-4 py-2 h-10"
+            className="lg:hidden bg-neon-green text-black rounded-lg px-4 py-2 h-10"
             onClick={() => setIsSidebarOpen(false)}
           >
             <GrClose />
           </button>
-              </div>
+        </div>
 
-              {/* Section 2: Scrollable items */}
-              <div className="flex flex-col flex-1 overflow-y-auto divide-y divide-gray-300">
-                {conversations.map((cur, i) => (
-                  <div
-                    key={i}
-                    className={`flex justify-between items-center p-4 cursor-pointer hover:bg-gray-200 ${currentConversation === cur ? "bg-gray-200" : ""
-                      }`}
-                    onClick={() => setCurrentConversation(cur)}
-                  >
-                    <div>
-                      <h2 className="font-bold overflow-ellipsis overflow-hidden">
-                        {cur.name || "Untitled"}
-                      </h2>
-                    </div>
-                    <div className="flex flex-row justify-end gap-2 items-center w-1/5">
-                      <button
-                        className="text-gray-500"
-                        onClick={() => editConversation(cur)}
-                      >
-                        <FaEdit />
-                      </button>
-                      <button
-                        className="text-red-500"
-                        onClick={() => deleteConversation(cur)}
-                      >
-                              <FaTrash />
-                            </button>
-                          </div>
-                        </div>
+        {/* Section 2: Scrollable items */}
+        <div className="flex flex-col flex-1 overflow-y-auto divide-y divide-gray-300 dark:divide-gray-700">
+          {conversations.map((cur, i) => (
+            <div
+              key={i}
+              className={`flex justify-between items-center p-4 cursor-pointer hover:bg-gray-200 hover:dark:bg-gray-800  ${
+                currentConversation === cur
+                  ? "bg-gray-200 dark:bg-gray-800"
+                  : ""
+              }`}
+              onClick={() => setCurrentConversation(cur)}
+            >
+              <div>
+                <h2 className="font-bold overflow-ellipsis overflow-hidden">
+                  {cur.name || "Untitled"}
+                </h2>
+              </div>
+              <div className="flex flex-row justify-end gap-2 items-center w-1/5">
+                <button
+                  className="text-gray-500"
+                  onClick={() => editConversation(cur)}
+                >
+                  <FaEdit />
+                </button>
+                <button
+                  className="text-red-500"
+                  onClick={() => deleteConversation(cur)}
+                >
+                  <FaTrash />
+                </button>
+              </div>
+            </div>
           ))}
-                    </div>
+        </div>
 
-                    {/* Section 3: Authentication information */}
-                    <div className="border-t border-gray-300 p-4 w-full">
-                      {/* Replace this with your authentication information */}
-  {
-    authSession ? (
-      <button
-        className="bg-neon-green rounded-lg px-4 py-2 w-full"
-        onClick={handleSignOut}
-      >
-        Sign Out
-      </button>
-    ) : (
-      <button
-        className="bg-neon-green rounded-lg px-4 py-2 w-full"
-        onClick={() => router.push("/auth")}
-      >
-        Sign In
-      </button>
-    )
-  }
-        </div >
-      </div >
-    </div >
+        {/* Section 3: Authentication information */}
+        <div className="border-t border-gray-300 dark:border-gray-700 p-4 w-full">
+          {/* Replace this with your authentication information */}
+          {authSession ? (
+            <button
+              className="bg-neon-green text-black rounded-lg px-4 py-2 w-full"
+              onClick={handleSignOut}
+            >
+              Sign Out
+            </button>
+          ) : (
+            <button
+              className="bg-neon-green text-black rounded-lg px-4 py-2 w-full"
+              onClick={() => router.push("/auth")}
+            >
+              Sign In
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
   );
 }
diff --git a/www/package.json b/www/package.json
index 090b200..b448fb8 100644
--- a/www/package.json
+++ b/www/package.json
@@ -26,6 +26,7 @@
     "react-icons": "^4.10.1",
     "react-markdown": "^8.0.7",
     "react-syntax-highlighter": "^15.5.0",
+    "react-toggle-dark-mode": "^1.1.1",
     "rehype-katex": "^7.0.0",
     "remark-math": "^6.0.0",
     "sharp": "^0.32.5",
diff --git a/www/public/bloom2x1dark.svg b/www/public/bloom2x1dark.svg
new file mode 100644
index 0000000..5d300fe
--- /dev/null
+++ b/www/public/bloom2x1dark.svg
@@ -0,0 +1,16 @@
+<svg width="382" height="120" viewBox="0 0 382 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1_2)">
+<path d="M185.286 57.8331C190.158 56.0258 192.672 52.3327 192.672 46.6751V45.8107C192.672 37.3244 187.329 32.2168 177.271 32.2168H160.298V85.8067H179.314C189.215 85.8067 194.637 80.542 194.637 71.3485V70.7198C194.637 63.9622 191.415 60.0333 185.286 58.5403V57.8331ZM186.857 46.9108C186.857 53.0399 184.107 55.8687 177.271 55.8687H166.034V37.6387H177.271C184.107 37.6387 186.857 40.4675 186.857 46.2822V46.9108ZM188.822 70.9556C188.822 77.5561 185.915 80.3849 179.235 80.3849H166.034V61.2905H179.235C185.915 61.2905 188.822 64.1193 188.822 70.4055V70.9556Z" fill="white"/>
+<path d="M214.879 32.2168H209.064V85.8067H240.81V80.3849H214.879V32.2168Z" fill="white"/>
+<path d="M270.324 86.5925C280.853 86.5925 287.925 80.8563 287.925 67.4196V50.604C287.925 37.1672 280.853 31.431 270.324 31.431H270.01C259.637 31.431 252.408 37.0886 252.408 50.604V67.4196C252.408 80.9349 259.637 86.5925 270.01 86.5925H270.324ZM270.01 81.2492C262.231 81.2492 258.223 77.7132 258.223 67.4196V50.4468C258.223 40.3103 262.231 36.7743 270.01 36.7743H270.324C278.025 36.7743 282.111 40.3103 282.111 50.4468V67.4196C282.111 77.7132 278.025 81.2492 270.324 81.2492H270.01Z" fill="white"/>
+<path d="M317.44 86.5925C327.969 86.5925 335.041 80.8563 335.041 67.4196V50.604C335.041 37.1672 327.969 31.431 317.44 31.431H317.126C306.753 31.431 299.524 37.0886 299.524 50.604V67.4196C299.524 80.9349 306.753 86.5925 317.126 86.5925H317.44ZM317.126 81.2492C309.346 81.2492 305.339 77.7132 305.339 67.4196V50.4468C305.339 40.3103 309.346 36.7743 317.126 36.7743H317.44C325.14 36.7743 329.227 40.3103 329.227 50.4468V67.4196C329.227 77.7132 325.14 81.2492 317.44 81.2492H317.126Z" fill="white"/>
+<path d="M352.455 85.8067V41.0175H353.083L362.827 65.3766H365.892L375.714 41.0175H376.342V85.8067H382V32.2168H374.221L364.713 56.733H364.006L354.576 32.2168H346.797V85.8067H352.455Z" fill="white"/>
+<path d="M119.438 59.719C119.438 26.7371 92.7009 0 59.719 0C26.7371 0 0 26.7371 0 59.719C0 92.7009 26.7371 119.438 59.719 119.438C92.7009 119.438 119.438 92.7009 119.438 59.719Z" fill="#D1EF53"/>
+<path d="M73.1889 68.543L92.7474 48.9845L84.2099 40.447L65.7837 58.8732V34.5741H53.7059V58.8732L35.2797 40.447L26.7422 48.9845L46.3007 68.543H22.0017V80.6208H46.18C46.3838 73.0872 52.5434 67.0332 60.1223 67.0332C67.7011 67.0332 73.8683 73.0872 74.0646 80.6208H97.488V68.543H73.1889Z" fill="#0E281C"/>
+</g>
+<defs>
+<clipPath id="clip0_1_2">
+<rect width="382" height="120" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/www/tailwind.config.ts b/www/tailwind.config.ts
index 308ee89..15d4fb3 100644
--- a/www/tailwind.config.ts
+++ b/www/tailwind.config.ts
@@ -1,6 +1,7 @@
 import type { Config } from "tailwindcss";
 
 const config: Config = {
+  darkMode: "class",
   content: [
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
diff --git a/www/yarn.lock b/www/yarn.lock
index e42ea20..8c12564 100644
--- a/www/yarn.lock
+++ b/www/yarn.lock
@@ -180,6 +180,85 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@react-spring/animated@~9.7.3":
+  version "9.7.3"
+  resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.7.3.tgz#4211b1a6d48da0ff474a125e93c0f460ff816e0f"
+  integrity sha512-5CWeNJt9pNgyvuSzQH+uy2pvTg8Y4/OisoscZIR8/ZNLIOI+CatFBhGZpDGTF/OzdNFsAoGk3wiUYTwoJ0YIvw==
+  dependencies:
+    "@react-spring/shared" "~9.7.3"
+    "@react-spring/types" "~9.7.3"
+
+"@react-spring/core@~9.7.3":
+  version "9.7.3"
+  resolved "https://registry.yarnpkg.com/@react-spring/core/-/core-9.7.3.tgz#60056bcb397f2c4f371c6c9a5f882db77ae90095"
+  integrity sha512-IqFdPVf3ZOC1Cx7+M0cXf4odNLxDC+n7IN3MDcVCTIOSBfqEcBebSv+vlY5AhM0zw05PDbjKrNmBpzv/AqpjnQ==
+  dependencies:
+    "@react-spring/animated" "~9.7.3"
+    "@react-spring/shared" "~9.7.3"
+    "@react-spring/types" "~9.7.3"
+
+"@react-spring/konva@~9.7.3":
+  version "9.7.3"
+  resolved "https://registry.yarnpkg.com/@react-spring/konva/-/konva-9.7.3.tgz#16bd29dd4860a99e960a72987c8bcfc828b22119"
+  integrity sha512-R9sY6SiPGYqz1383P5qppg5z57YfChVknOC1UxxaGxpw+WiZa8fZ4zmZobslrw+os3/+HAXZv8O+EvU/nQpf7g==
+  dependencies:
+    "@react-spring/animated" "~9.7.3"
+    "@react-spring/core" "~9.7.3"
+    "@react-spring/shared" "~9.7.3"
+    "@react-spring/types" "~9.7.3"
+
+"@react-spring/native@~9.7.3":
+  version "9.7.3"
+  resolved "https://registry.yarnpkg.com/@react-spring/native/-/native-9.7.3.tgz#ee38d7c23482cfb4916c9b3c021de2995a4f553a"
+  integrity sha512-4mpxX3FuEBCUT6ae2fjhxcJW6bhr2FBwFf274eXB7n+U30Gdg8Wo2qYwcUnmiAA0S3dvP8vLTazx3+CYWFShnA==
+  dependencies:
+    "@react-spring/animated" "~9.7.3"
+    "@react-spring/core" "~9.7.3"
+    "@react-spring/shared" "~9.7.3"
+    "@react-spring/types" "~9.7.3"
+
+"@react-spring/shared@~9.7.3":
+  version "9.7.3"
+  resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.7.3.tgz#4cf29797847c689912aec4e62e34c99a4d5d9e53"
+  integrity sha512-NEopD+9S5xYyQ0pGtioacLhL2luflh6HACSSDUZOwLHoxA5eku1UPuqcJqjwSD6luKjjLfiLOspxo43FUHKKSA==
+  dependencies:
+    "@react-spring/types" "~9.7.3"
+
+"@react-spring/three@~9.7.3":
+  version "9.7.3"
+  resolved "https://registry.yarnpkg.com/@react-spring/three/-/three-9.7.3.tgz#4358a0c4640efe2972c4f7d0f7cd4efe927471c1"
+  integrity sha512-Q1p512CqUlmMK8UMBF/Rj79qndhOWq4XUTayxMP9S892jiXzWQuj+xC3Xvm59DP/D4JXusXpxxqfgoH+hmOktA==
+  dependencies:
+    "@react-spring/animated" "~9.7.3"
+    "@react-spring/core" "~9.7.3"
+    "@react-spring/shared" "~9.7.3"
+    "@react-spring/types" "~9.7.3"
+
+"@react-spring/types@~9.7.3":
+  version "9.7.3"
+  resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.7.3.tgz#ea78fd447cbc2612c1f5d55852e3c331e8172a0b"
+  integrity sha512-Kpx/fQ/ZFX31OtlqVEFfgaD1ACzul4NksrvIgYfIFq9JpDHFwQkMVZ10tbo0FU/grje4rcL4EIrjekl3kYwgWw==
+
+"@react-spring/web@~9.7.3":
+  version "9.7.3"
+  resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.7.3.tgz#d9f4e17fec259f1d65495a19502ada4f5b57fa3d"
+  integrity sha512-BXt6BpS9aJL/QdVqEIX9YoUy8CE6TJrU0mNCqSoxdXlIeNcEBWOfIyE6B14ENNsyQKS3wOWkiJfco0tCr/9tUg==
+  dependencies:
+    "@react-spring/animated" "~9.7.3"
+    "@react-spring/core" "~9.7.3"
+    "@react-spring/shared" "~9.7.3"
+    "@react-spring/types" "~9.7.3"
+
+"@react-spring/zdog@~9.7.3":
+  version "9.7.3"
+  resolved "https://registry.yarnpkg.com/@react-spring/zdog/-/zdog-9.7.3.tgz#8ccc7316f6d3460ed244d9e3f60de9b4c4a848ac"
+  integrity sha512-L+yK/1PvNi9n8cldiJ309k4LdxcPkeWE0W18l1zrP1IBIyd5NB5EPA8DMsGr9gtNnnIujtEzZk+4JIOjT8u/tw==
+  dependencies:
+    "@react-spring/animated" "~9.7.3"
+    "@react-spring/core" "~9.7.3"
+    "@react-spring/shared" "~9.7.3"
+    "@react-spring/types" "~9.7.3"
+
 "@rollup/plugin-commonjs@24.0.0":
   version "24.0.0"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-commonjs/-/plugin-commonjs-24.0.0.tgz#fb7cf4a6029f07ec42b25daa535c75b05a43f75c"
@@ -3523,6 +3602,18 @@ react-markdown@^8.0.7:
     unist-util-visit "^4.0.0"
     vfile "^5.0.0"
 
+react-spring@^9.0.0-rc.3:
+  version "9.7.3"
+  resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-9.7.3.tgz#3211dea4c4d7c5b541260af5100261b87becb5d5"
+  integrity sha512-oTxDpFV5gzq7jQX6+bU0SVq+vX8VnuuT5c8Zwn6CpDErOPvCmV+DRkPiEBtaL3Ozgzwiy5yFx83N0h303j/r3A==
+  dependencies:
+    "@react-spring/core" "~9.7.3"
+    "@react-spring/konva" "~9.7.3"
+    "@react-spring/native" "~9.7.3"
+    "@react-spring/three" "~9.7.3"
+    "@react-spring/web" "~9.7.3"
+    "@react-spring/zdog" "~9.7.3"
+
 react-syntax-highlighter@^15.5.0:
   version "15.5.0"
   resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz#4b3eccc2325fa2ec8eff1e2d6c18fa4a9e07ab20"
@@ -3534,6 +3625,13 @@ react-syntax-highlighter@^15.5.0:
     prismjs "^1.27.0"
     refractor "^3.6.0"
 
+react-toggle-dark-mode@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/react-toggle-dark-mode/-/react-toggle-dark-mode-1.1.1.tgz#ca738d4c7cd613f5091fe08e5c174d091ef5d2f3"
+  integrity sha512-25dH8tvQucpW9c024WQ6gXLxJ6Irc5iTFgAIKuwCUUfbbahyVd1OKEq5TqExzoPHoORIXlQKYXV/+fuyclr6FQ==
+  dependencies:
+    react-spring "^9.0.0-rc.3"
+
 react@18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"