diff --git a/space_flow/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/space_flow/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index 6faf594f8..fa86811b2 100644
--- a/space_flow/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/space_flow/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -43,7 +43,7 @@ export default function ParameterComponent({
   let disabled = reactFlowInstance?.getEdges().some((e) => (e.targetHandle === id)) ?? false;
 
   return (
-    <div ref={ref} className="w-full flex flex-wrap justify-between items-center bg-gray-50 mt-1 px-5 py-2">
+    <div ref={ref} className="w-full flex flex-wrap justify-between items-center bg-gray-50 dark:bg-slate-800 dark:text-white mt-1 px-5 py-2">
       <>
         <div className="text-sm truncate">{title}<span className="text-red-600">{required ? " *" : ""}</span></div>
         <Tooltip title={tooltipTitle + (required ? " (required)" : "")}>
@@ -56,7 +56,7 @@ export default function ParameterComponent({
             }
             className={
               (left ? "-ml-0.5 " : "-mr-0.5 ") +
-              "w-3 h-3 rounded-full border-2 bg-white"
+              "w-3 h-3 rounded-full border-2 bg-white dark:bg-slate-800"
             }
             style={{
               borderColor: color,
diff --git a/space_flow/src/CustomNodes/GenericNode/index.tsx b/space_flow/src/CustomNodes/GenericNode/index.tsx
index c4490c0e2..d046746ab 100644
--- a/space_flow/src/CustomNodes/GenericNode/index.tsx
+++ b/space_flow/src/CustomNodes/GenericNode/index.tsx
@@ -16,8 +16,8 @@ export default function GenericNode({ data }) {
 
 
   return (
-    <div className="prompt-node relative bg-white w-96 rounded-lg solid border flex flex-col justify-center">
-      <div className="w-full flex items-center justify-between p-4 gap-8 bg-gray-50 border-b ">
+    <div className="prompt-node relative bg-white dark:bg-slate-900 w-96 rounded-lg solid border dark:border-slate-700 flex flex-col justify-center">
+      <div className="w-full dark:text-white flex items-center justify-between p-4 gap-8 bg-gray-50 rounded-t-lg dark:bg-slate-800 border-b dark:border-b-slate-700 ">
         <div className="w-full flex items-center truncate gap-4 text-lg">
           <Icon
             className="w-10 h-10 p-1 rounded"
@@ -26,7 +26,7 @@ export default function GenericNode({ data }) {
           <div className="truncate">{data.type}</div>
         </div>
         <button onClick={() => {deleteNode(data.id)}}>
-          <TrashIcon className="w-6 h-6 hover:text-red-500"></TrashIcon>
+          <TrashIcon className="w-6 h-6 hover:text-red-500 dark:text-slate-500 dark:hover:text-red-500"></TrashIcon>
         </button>
       </div>
 
@@ -41,7 +41,7 @@ export default function GenericNode({ data }) {
             .map((t, idx) => (
               <div key={idx}>
                 {idx === 0 ? (
-                  <div className="px-5 py-2 mt-2 text-center">Inputs:</div>
+                  <div className="px-5 py-2 mt-2 dark:text-white text-center">Inputs:</div>
                 ) : (
                   <></>
                 )}
@@ -73,7 +73,7 @@ export default function GenericNode({ data }) {
                 )}
               </div>
             ))}
-          <div className="px-5 py-2 mt-2 text-center">Output:</div>
+          <div className="px-5 py-2 mt-2 dark:text-white text-center">Output:</div>
           <ParameterComponent
             data={data}
             color={nodeColors[types[data.type]]}
diff --git a/space_flow/src/components/inputComponent/index.tsx b/space_flow/src/components/inputComponent/index.tsx
index 38bb559a0..87ea3bb06 100644
--- a/space_flow/src/components/inputComponent/index.tsx
+++ b/space_flow/src/components/inputComponent/index.tsx
@@ -13,7 +13,7 @@ export default function InputComponent({value, onChange, disabled}){
             <input
             type="text"
             value={myValue}
-            className={"block w-full form-input rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" + (disabled ? " bg-gray-200" : "")}
+            className={"block w-full form-input dark:bg-slate-900 dark:border-slate-600 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" + (disabled ? " bg-gray-200 dark:bg-slate-700" : "")}
             placeholder="Type a text"
             onChange={(e) => {
                 setMyValue(e.target.value);
diff --git a/space_flow/src/components/toggleComponent/index.tsx b/space_flow/src/components/toggleComponent/index.tsx
index 60def65e1..744ee535f 100644
--- a/space_flow/src/components/toggleComponent/index.tsx
+++ b/space_flow/src/components/toggleComponent/index.tsx
@@ -16,15 +16,15 @@ export default function ToggleComponent({ enabled, setEnabled, disabled }) {
           setEnabled(x);
         }}
         className={classNames(
-          enabled ? "bg-indigo-600" : "bg-gray-200",
-          "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+          enabled ? "bg-indigo-600" : "bg-gray-200 dark:bg-slate-600",
+          "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out "
         )}
       >
         <span className="sr-only">Use setting</span>
         <span
           className={classNames(
             enabled ? "translate-x-5" : "translate-x-0",
-            "pointer-events-none relative inline-block h-5 w-5 transform rounded-full  shadow ring-0 transition duration-200 ease-in-out", disabled ? "bg-gray-200" : "bg-white"
+            "pointer-events-none relative inline-block h-5 w-5 transform rounded-full  shadow ring-0 transition duration-200 ease-in-out", disabled ? "bg-gray-200 dark:bg-slate-600" : "bg-white dark:bg-slate-800"
           )}
         >
           <span