diff --git a/space_flow/src/CustomNodes/BooleanNode/index.tsx b/space_flow/src/CustomNodes/BooleanNode/index.tsx
index 733d657f6..db4fd4e4f 100644
--- a/space_flow/src/CustomNodes/BooleanNode/index.tsx
+++ b/space_flow/src/CustomNodes/BooleanNode/index.tsx
@@ -10,8 +10,8 @@ export default function BooleanNode({ data }) {
   const [enabled, setEnabled] = useState(false);
   const {types, deleteNode} = useContext(typesContext);
   return (
-    <div className="prompt-node relative bg-white rounded-lg solid border flex flex-col justify-center">
-      <div className="w-full flex items-center justify-between gap-8 p-4 bg-gray-50 border-b ">
+    <div className="prompt-node relative bg-white dark:bg-slate-900 rounded-lg solid border dark:border-slate-700 flex flex-col justify-center">
+      <div className="w-full flex items-center justify-between gap-8 p-4 bg-gray-50 dark:bg-slate-800 dark:text-white dark:border-b-slate-700 border-b ">
         <div className="flex items-center gap-4 text-lg">
           <CheckCircleIcon
             className="w-10 h-10 p-1 rounded"
@@ -35,8 +35,10 @@ export default function BooleanNode({ data }) {
         position={Position.Right}
         id={data.type}
         isValidConnection={(connection) => isValidConnection(data,connection)}
-        className="-mr-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none"
-        style={{ borderLeftColor: nodeColors[types[data.type]] }}
+        className={"-mr-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-slate-800"}
+        style={{
+          borderColor: nodeColors[types[data.type]],
+        }}
       ></Handle>
     </div>
   );
diff --git a/space_flow/src/CustomNodes/InputNode/index.tsx b/space_flow/src/CustomNodes/InputNode/index.tsx
index a6aa084bd..21031049f 100644
--- a/space_flow/src/CustomNodes/InputNode/index.tsx
+++ b/space_flow/src/CustomNodes/InputNode/index.tsx
@@ -15,7 +15,7 @@ import TextAreaComponent from "../../components/textAreaComponent";
 export default function InputNode({ data }) {
   const {types, deleteNode} = useContext(typesContext);
   return (
-    <div className="prompt-node relative bg-white w-96 rounded-lg solid border flex flex-col justify-center">
+    <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">
       <Tooltip title="Prefix: str">
         <Handle
           type="target"
@@ -24,12 +24,14 @@ export default function InputNode({ data }) {
           isValidConnection={(connection) =>
             isValidConnection(data, connection)
           }
-          className="ml-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none"
-          style={{ borderLeftColor: nodeColors[types[data.type]] }}
+          className={"-ml-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-slate-800"}
+          style={{
+            borderColor: nodeColors[types[data.type]],
+          }}
         ></Handle>
       </Tooltip>
 
-      <div className="w-full flex items-center justify-between p-4 gap-8 bg-gray-50 border-b ">
+      <div className="w-full flex items-center justify-between p-4 gap-8 bg-gray-50 dark:bg-slate-800 dark:text-white border-b dark:border-b-slate-700 ">
         <div className="flex items-center gap-4 text-lg">
           <Bars3CenterLeftIcon
             className="w-10 h-10 p-1 rounded"
@@ -60,8 +62,10 @@ export default function InputNode({ data }) {
         position={Position.Right}
         id={data.type}
         isValidConnection={(connection) => isValidConnection(data, connection)}
-        className="-mr-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none"
-        style={{ borderLeftColor: nodeColors[types[data.type]] }}
+        className={"-mr-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-slate-800"}
+        style={{
+          borderColor: nodeColors[types[data.type]],
+        }}
       ></Handle>
     </div>
   );