diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index eebbe1554..0a214eb4e 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -25,7 +25,9 @@ export default function Dropdown({
           <>
             <div className="relative mt-1 w-full">
               <Listbox.Button className="relative w-full cursor-default rounded-md border border-gray-300 bg-white dark:bg-gray-900 py-2 pl-3 pr-10 text-left shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm">
-                <span className="block truncate w-full">{internalValue}</span>
+                <span className="block truncate w-full dark:text-gray-300">
+                  {internalValue}
+                </span>
                 <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
                   <ChevronUpDownIcon
                     className="h-5 w-5 text-gray-400"
diff --git a/src/frontend/src/contexts/darkContext.tsx b/src/frontend/src/contexts/darkContext.tsx
index f612fe381..2a76d0e53 100644
--- a/src/frontend/src/contexts/darkContext.tsx
+++ b/src/frontend/src/contexts/darkContext.tsx
@@ -13,13 +13,16 @@ const initialValue = {
 export const darkContext = createContext<darkContextType>(initialValue);
 
 export function DarkProvider({ children }) {
-  const [dark, setDark] = useState(false);
+  const [dark, setDark] = useState(
+    JSON.parse(window.localStorage.getItem("isDark")) ?? false
+  );
   useEffect(() => {
     if (dark) {
       document.getElementById("body").classList.add("dark");
     } else {
       document.getElementById("body").classList.remove("dark");
     }
+    window.localStorage.setItem("isDark", dark.toString());
   }, [dark]);
   return (
     <darkContext.Provider
diff --git a/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
index 278fe6756..816247911 100644
--- a/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
@@ -116,7 +116,7 @@ export default function TabsManagerComponent() {
           </button>
         </div>
       </div>
-      <div className="w-full h-full">
+      <div className="w-full h-full dark:bg-gray-800">
         <ReactFlowProvider>
           {flows[tabIndex] ? (
             <FlowPage flow={flows[tabIndex]}></FlowPage>