diff --git a/space_flow/src/CustomNodes/ChatInputNode/index.tsx b/space_flow/src/CustomNodes/ChatInputNode/index.tsx
index db0852907..e74071bb4 100644
--- a/space_flow/src/CustomNodes/ChatInputNode/index.tsx
+++ b/space_flow/src/CustomNodes/ChatInputNode/index.tsx
@@ -13,7 +13,7 @@ export default function ChatInputNode({ data }) {
   const { types } = useContext(typesContext);
   return (
     <div
-      className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-gray-50"
+      className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-gray-50 dark:bg-slate-800 dark:border-slate-700"
       style={{ color: nodeColors[types[data.type]] }}
     >
       <Tooltip title="Prefix: str">
@@ -24,7 +24,7 @@ export default function ChatInputNode({ data }) {
           }
           position={Position.Left}
           id={"str|Prefix|" + data.id}
-          className={"-ml-0.5 w-3 h-3 rounded-full border-2 bg-white"}
+          className={"-ml-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-slate-800"}
           style={{
             borderColor: nodeColors[types[data.type]],
           }}
@@ -38,7 +38,7 @@ export default function ChatInputNode({ data }) {
           }
           position={Position.Right}
           id={"str|str|" + data.id}
-          className={"-mr-0.5  w-3 h-3 rounded-full border-2 bg-white"}
+          className={"-mr-0.5  w-3 h-3 rounded-full border-2 bg-white dark:bg-slate-800"}
           style={{
             borderColor: nodeColors[types[data.type]],
           }}
diff --git a/space_flow/src/CustomNodes/ChatOutputNode/index.tsx b/space_flow/src/CustomNodes/ChatOutputNode/index.tsx
index b5445860d..c8ffbab79 100644
--- a/space_flow/src/CustomNodes/ChatOutputNode/index.tsx
+++ b/space_flow/src/CustomNodes/ChatOutputNode/index.tsx
@@ -9,14 +9,14 @@ import { typesContext } from "../../contexts/typesContext";
 export default function ChatOutputNode({ data }) {
   const {types} = useContext(typesContext);
   return (
-    <div className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-gray-50" style={{color: nodeColors[types[data.type]]}}>
+    <div className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-gray-50 dark:bg-slate-800 dark:border-slate-700" style={{color: nodeColors[types[data.type]]}}>
       <Tooltip title="Message: str">
         <Handle
           type="target"
           isValidConnection={(connection) => isValidConnection(data,connection)}
           position={Position.Left}
           id={"str|output|"+data.id}
-          className={"-ml-0.5 w-3 h-3 rounded-full border-2 bg-white"
+          className={"-ml-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-slate-800"
           }
           style={{
             borderColor: nodeColors[types[data.type]],