diff --git a/space_flow/public/index.html b/space_flow/public/index.html
index 52741e97f..e9ecbe8ec 100644
--- a/space_flow/public/index.html
+++ b/space_flow/public/index.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
-<body style="width: 100%; height:100%">
+<body id='body' style="width: 100%; height:100%">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div style="width: 100vw; height:100vh" id='root'>
     </div>
diff --git a/space_flow/src/App.tsx b/space_flow/src/App.tsx
index 3cfb3a582..cca4e3df1 100644
--- a/space_flow/src/App.tsx
+++ b/space_flow/src/App.tsx
@@ -96,7 +96,7 @@ export default function App() {
 
 	return (
 		//need parent component with width and height
-		<div className={(dark ? "dark " : "") + "h-full flex flex-col"}>
+		<div className="h-full flex flex-col">
 			<div className="flex grow-0 shrink basis-auto">
 				<Header userNavigation={userNavigation} user={user}></Header>
 			</div>
diff --git a/space_flow/src/contexts/darkContext.tsx b/space_flow/src/contexts/darkContext.tsx
index f64e0aa6e..fcdb73cc4 100644
--- a/space_flow/src/contexts/darkContext.tsx
+++ b/space_flow/src/contexts/darkContext.tsx
@@ -1,4 +1,4 @@
-import { createContext, useState } from "react";
+import { createContext, useEffect, useState } from "react";
 
 type darkContextType = {
 	dark: {};
@@ -14,6 +14,13 @@ export const darkContext = createContext<darkContextType>(initialValue);
 
 export function DarkProvider({ children }) {
 	const [dark, setDark] = useState(false);
+	useEffect(()=>{
+		if(dark){
+			document.getElementById("body").classList.add("dark");
+		} else {
+			document.getElementById("body").classList.remove("dark");
+		}
+	}, [dark])
 	return (
 		<darkContext.Provider
 			value={{
diff --git a/space_flow/src/modals/textAreaModal/index.tsx b/space_flow/src/modals/textAreaModal/index.tsx
index 3a15c4647..a94571c6f 100644
--- a/space_flow/src/modals/textAreaModal/index.tsx
+++ b/space_flow/src/modals/textAreaModal/index.tsx
@@ -32,7 +32,7 @@ export default function TextAreaModal({value, setValue}){
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+          <div className="fixed inset-0 bg-gray-500 dark:bg-slate-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -46,11 +46,11 @@ export default function TextAreaModal({value, setValue}){
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 w-[700px]">
+              <Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-slate-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
                 <div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
                   <button
                     type="button"
-                    className="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                    className="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
                     onClick={() => {
                       setModalOpen(false);
                     }}
@@ -61,7 +61,7 @@ export default function TextAreaModal({value, setValue}){
                 </div>
                 <div className="h-full w-full flex flex-col justify-center items-center">
                   <div className="flex w-full pb-6 z-10 justify-center shadow-sm">
-                    <div className="mx-auto mt-8 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
+                    <div className="mx-auto mt-8 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-slate-900 sm:mx-0 sm:h-10 sm:w-10">
                       <ClipboardDocumentListIcon
                         className="h-6 w-6 text-blue-600"
                         aria-hidden="true"
@@ -70,20 +70,20 @@ export default function TextAreaModal({value, setValue}){
                     <div className="mt-10 text-center sm:ml-4 sm:text-left">
                       <Dialog.Title
                         as="h3"
-                        className="text-lg font-medium leading-6 text-gray-900"
+                        className="text-lg font-medium dark:text-white leading-6 text-gray-900"
                       >
                         Edit text
                       </Dialog.Title>
                     </div>
                   </div>
-                  <div className="h-full w-full bg-gray-200 p-4 gap-4 flex flex-row justify-center items-center">
+                  <div className="h-full w-full bg-gray-200 dark:bg-slate-900 p-4 gap-4 flex flex-row justify-center items-center">
                     <div className="flex h-full w-full">
-                      <div className="overflow-hidden px-4 py-5 sm:p-6 w-full rounded-lg bg-white shadow">
-                        <textarea ref={ref} className="form-input h-full w-full rounded-lg border-gray-300" value={myValue} onChange={(e) => {setMyValue(e.target.value); setValue(e.target.value)}}/>
+                      <div className="overflow-hidden px-4 py-5 sm:p-6 w-full rounded-lg bg-white dark:bg-slate-800 shadow">
+                        <textarea ref={ref} className="form-input h-full w-full rounded-lg border-gray-300 dark:border-slate-700 dark:bg-slate-900 dark:text-white" value={myValue} onChange={(e) => {setMyValue(e.target.value); setValue(e.target.value)}}/>
                       </div>
                     </div>
                   </div>
-                  <div className="bg-gray-200 w-full pb-3 flex flex-row-reverse px-4">
+                  <div className="bg-gray-200 dark:bg-slate-900 w-full pb-3 flex flex-row-reverse px-4">
                     <button
                       type="button"
                       className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
