diff --git a/src/App.jsx b/src/App.jsx
index 2b074522..965ef10a 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -272,7 +272,10 @@ const DnDFlow = () => {
       }
 
       // Create node data with label and initialize all expected fields as empty strings
-      let nodeData = { label: `${type} ${newNodeId}` };
+      let nodeData = { 
+        label: `${type} ${newNodeId}`,
+        nodeColor: '#DDE6ED' // Default node color
+      };
 
       // if node in nodeDynamicHandles, ensure add outputCount and inputCount to data
       if (nodeDynamicHandles.includes(type)) {
@@ -386,7 +389,7 @@ const DnDFlow = () => {
             return;
           }
 
-          // Load the graph data
+          // Load the graph data and ensure nodeColor exists on all nodes
           const {
             nodes: loadedNodes,
             edges: loadedEdges,
@@ -396,7 +399,17 @@ const DnDFlow = () => {
             events: loadedEvents,
             pythonCode: loadedPythonCode
           } = graphData;
-          setNodes(loadedNodes || []);
+
+          // Ensure all loaded nodes have a nodeColor property
+          const nodesWithColors = (loadedNodes || []).map(node => ({
+            ...node,
+            data: {
+              ...node.data,
+              nodeColor: node.data.nodeColor || '#DDE6ED'
+            }
+          }));
+
+          setNodes(nodesWithColors);
           setEdges(loadedEdges || []);
           setSelectedNode(null);
           setNodeCounter(loadedNodeCounter ?? loadedNodes.length);
@@ -457,7 +470,17 @@ const DnDFlow = () => {
               events: loadedEvents,
               pythonCode: loadedPythonCode
             } = graphData;
-            setNodes(loadedNodes || []);
+
+            // Ensure all loaded nodes have a nodeColor property
+            const nodesWithColors = (loadedNodes || []).map(node => ({
+              ...node,
+              data: {
+                ...node.data,
+                nodeColor: node.data.nodeColor || '#DDE6ED'
+              }
+            }));
+
+            setNodes(nodesWithColors);
             setEdges(loadedEdges || []);
             setSelectedNode(null);
             setNodeCounter(loadedNodeCounter ?? loadedNodes.length);
diff --git a/src/components/NodeSidebar.jsx b/src/components/NodeSidebar.jsx
index d00e2637..ba51037f 100644
--- a/src/components/NodeSidebar.jsx
+++ b/src/components/NodeSidebar.jsx
@@ -155,10 +155,10 @@ const NodeSidebar = ({
           const nodeDefaults = defaultValues[selectedNode.type] || {};
 
           // Create a list of all possible parameters (both current data and defaults)
-          // Exclude 'label' since it's now editable directly in the title
+          // Exclude 'label' and 'nodeColor' since they're handled separately
           const allParams = new Set([
-            ...Object.keys(selectedNode.data).filter(key => key !== 'label'),
-            ...Object.keys(nodeDefaults).filter(key => key !== 'label')
+            ...Object.keys(selectedNode.data).filter(key => key !== 'label' && key !== 'nodeColor'),
+            ...Object.keys(nodeDefaults).filter(key => key !== 'label' && key !== 'nodeColor')
           ]);
 
           return Array.from(allParams)
@@ -212,6 +212,133 @@ const NodeSidebar = ({
             });
         })()}
 
+        {/* Color Picker Section */}
+        <div style={{ 
+          marginTop: '20px',
+          marginBottom: '20px',
+          borderTop: '1px solid #555',
+          paddingTop: '15px'
+        }}>
+          <h4 style={{ 
+            margin: '0 0 12px 0',
+            fontSize: '14px',
+            fontWeight: '600',
+            color: '#a8b3cf',
+            textTransform: 'uppercase',
+            letterSpacing: '0.5px'
+          }}>Node Color</h4>
+          
+          <div style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '12px',
+            marginBottom: '8px'
+          }}>
+            <input
+              type="color"
+              value={selectedNode.data.nodeColor || '#DDE6ED'}
+              onChange={(e) => {
+                const newColor = e.target.value;
+                const updatedNode = {
+                  ...selectedNode,
+                  data: { ...selectedNode.data, nodeColor: newColor },
+                };
+
+                setNodes((nds) =>
+                  nds.map((node) =>
+                    node.id === selectedNode.id ? updatedNode : node
+                  )
+                );
+                setSelectedNode(updatedNode);
+              }}
+              style={{
+                width: '40px',
+                height: '40px',
+                borderRadius: '6px',
+                border: '2px solid #555',
+                backgroundColor: 'transparent',
+                cursor: 'pointer',
+                padding: '0'
+              }}
+            />
+            
+            <input
+              type="text"
+              value={selectedNode.data.nodeColor || '#DDE6ED'}
+              onChange={(e) => {
+                const newColor = e.target.value;
+                const updatedNode = {
+                  ...selectedNode,
+                  data: { ...selectedNode.data, nodeColor: newColor },
+                };
+
+                setNodes((nds) =>
+                  nds.map((node) =>
+                    node.id === selectedNode.id ? updatedNode : node
+                  )
+                );
+                setSelectedNode(updatedNode);
+              }}
+              placeholder="#DDE6ED"
+              style={{
+                flex: 1,
+                padding: '8px 12px',
+                borderRadius: '4px',
+                border: '1px solid #555',
+                backgroundColor: '#2a2a3e',
+                color: '#ffffff',
+                fontSize: '14px',
+                fontFamily: 'monospace'
+              }}
+            />
+          </div>
+          
+          {/* Color preset buttons */}
+          <div style={{ 
+            display: 'grid',
+            gridTemplateColumns: 'repeat(4, 1fr)',
+            gap: '8px',
+            marginTop: '12px'
+          }}>
+            {['#DDE6ED', '#FFE5E5', '#E5F3FF', '#E5FFE5', '#FFF5E5', '#F0E5FF', '#FFE5F5', '#E5FFFF'].map(color => (
+              <button
+                key={color}
+                onClick={() => {
+                  const updatedNode = {
+                    ...selectedNode,
+                    data: { ...selectedNode.data, nodeColor: color },
+                  };
+
+                  setNodes((nds) =>
+                    nds.map((node) =>
+                      node.id === selectedNode.id ? updatedNode : node
+                    )
+                  );
+                  setSelectedNode(updatedNode);
+                }}
+                style={{
+                  width: '100%',
+                  height: '30px',
+                  backgroundColor: color,
+                  border: selectedNode.data.nodeColor === color ? '2px solid #007bff' : '1px solid #666',
+                  borderRadius: '4px',
+                  cursor: 'pointer',
+                  transition: 'all 0.2s ease'
+                }}
+                onMouseEnter={(e) => {
+                  if (selectedNode.data.nodeColor !== color) {
+                    e.target.style.transform = 'scale(1.05)';
+                  }
+                }}
+                onMouseLeave={(e) => {
+                  e.target.style.transform = 'scale(1)';
+                }}
+                title={color}
+              />
+            ))}
+          </div>
+        </div>
+
         <br />
         <button
           style={{
diff --git a/src/components/nodes/AdderNode.jsx b/src/components/nodes/AdderNode.jsx
index 24b91f32..ef12deff 100644
--- a/src/components/nodes/AdderNode.jsx
+++ b/src/components/nodes/AdderNode.jsx
@@ -7,7 +7,7 @@ export default function AdderNode({ data }) {
       style={{
         width: 60,
         height: 60,
-        background: '#DDE6ED',
+        background: data.nodeColor || '#DDE6ED',
         color: 'black',
         borderRadius: '50%',
         display: 'flex',
diff --git a/src/components/nodes/AmplifierNode.jsx b/src/components/nodes/AmplifierNode.jsx
index 6a0743c8..cf4c455f 100644
--- a/src/components/nodes/AmplifierNode.jsx
+++ b/src/components/nodes/AmplifierNode.jsx
@@ -15,7 +15,7 @@ export function AmplifierNode({ data }) {
     >
 
       <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
-          <polygon points="0,0 100,50 0,100" fill="#DDE6ED" />
+          <polygon points="0,0 100,50 0,100" fill={data.nodeColor || "#DDE6ED"} />
       </svg>
       <div style={{ 
         fontSize: '12px',
@@ -50,7 +50,7 @@ export function AmplifierNodeReverse({ data }) {
     >
 
       <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
-          <polygon points="0,50 100,100 100,0" fill="#DDE6ED" />
+          <polygon points="0,50 100,100 100,0" fill={data.nodeColor || "#DDE6ED"} />
       </svg>
       <div style={{ 
         fontSize: '12px',
diff --git a/src/components/nodes/BubblerNode.jsx b/src/components/nodes/BubblerNode.jsx
index 21e5a656..2caa387b 100644
--- a/src/components/nodes/BubblerNode.jsx
+++ b/src/components/nodes/BubblerNode.jsx
@@ -7,7 +7,7 @@ export default function BubblerNode({ data }) {
       style={{
         width: 210,
         height: 140,
-        background: '#DDE6ED',
+        background: data.nodeColor || '#DDE6ED',
         color: 'black',
         borderRadius: 8,
         padding: 10,
diff --git a/src/components/nodes/ConstantNode.jsx b/src/components/nodes/ConstantNode.jsx
index 158d6c1b..a35a3292 100644
--- a/src/components/nodes/ConstantNode.jsx
+++ b/src/components/nodes/ConstantNode.jsx
@@ -6,7 +6,7 @@ export default function ConstantNode({ data }) {
     <div
       style={{
         width: 180,
-        background: '#DDE6ED',
+        background: data.nodeColor || '#DDE6ED',
         color: 'black',
         borderRadius: 12,
         padding: 10,
diff --git a/src/components/nodes/DefaultNode.jsx b/src/components/nodes/DefaultNode.jsx
index 4d2a69cb..c9a16472 100644
--- a/src/components/nodes/DefaultNode.jsx
+++ b/src/components/nodes/DefaultNode.jsx
@@ -6,7 +6,7 @@ export default function DefaultNode({ data }) {
     <div
       style={{
         width: 180,
-        background: '#DDE6ED',
+        background: data.nodeColor || '#DDE6ED',
         color: 'black',
         borderRadius: 0,
         padding: 10,
diff --git a/src/components/nodes/DelayNode.jsx b/src/components/nodes/DelayNode.jsx
index 8a98b481..3efa8220 100644
--- a/src/components/nodes/DelayNode.jsx
+++ b/src/components/nodes/DelayNode.jsx
@@ -7,7 +7,7 @@ export default function DelayNode({ data }) {
       style={{
         width: 80,
         height: 60,
-        background: '#DDE6ED',
+        background: data.nodeColor || '#DDE6ED',
         color: 'black',
         borderRadius: 8,
         padding: 8,
diff --git a/src/components/nodes/DynamicHandleNode.jsx b/src/components/nodes/DynamicHandleNode.jsx
index a4daeec3..11754f96 100644
--- a/src/components/nodes/DynamicHandleNode.jsx
+++ b/src/components/nodes/DynamicHandleNode.jsx
@@ -31,7 +31,7 @@ export function DynamicHandleNode({ id, data }) {
       style={{
         width: Math.max(180, (data.label?.length || 8) * 8 + 40),
         height: Math.max(60, Math.max(inputHandleCount, outputHandleCount) * 25 + 30),
-        background: '#DDE6ED',
+        background: data.nodeColor || '#DDE6ED',
         color: 'black',
         borderRadius: 0,
         padding: 10,
diff --git a/src/components/nodes/FunctionNode.jsx b/src/components/nodes/FunctionNode.jsx
index 560ae790..643f8dd0 100644
--- a/src/components/nodes/FunctionNode.jsx
+++ b/src/components/nodes/FunctionNode.jsx
@@ -98,7 +98,7 @@ export function createFunctionNode(numInputs, numOutputs) {
         style={{
           width: dynamicWidth,
           height: dynamicHeight,
-          background: '#DDE6ED',
+          background: data.nodeColor || '#DDE6ED',
           color: 'black',
           borderRadius: 0,
           padding: 10,
diff --git a/src/components/nodes/IntegratorNode.jsx b/src/components/nodes/IntegratorNode.jsx
index f8d810a1..f9d9ec93 100644
--- a/src/components/nodes/IntegratorNode.jsx
+++ b/src/components/nodes/IntegratorNode.jsx
@@ -10,7 +10,7 @@ export default function IntegratorNode({ data }) {
     <div
       style={{
         width: 180,
-        background: '#DDE6ED',
+        background: data.nodeColor || '#DDE6ED',
         color: 'black',
         borderRadius: 0,
         padding: 10,
diff --git a/src/components/nodes/MultiplierNode.jsx b/src/components/nodes/MultiplierNode.jsx
index 95483fd4..efd3f642 100644
--- a/src/components/nodes/MultiplierNode.jsx
+++ b/src/components/nodes/MultiplierNode.jsx
@@ -7,7 +7,7 @@ export default function MultiplierNode({ data }) {
       style={{
         width: 60,
         height: 60,
-        background: '#DDE6ED',
+        background: data.nodeColor || '#DDE6ED',
         color: 'black',
         borderRadius: '50%',
         display: 'flex',
diff --git a/src/components/nodes/ProcessNode.jsx b/src/components/nodes/ProcessNode.jsx
index 177fb92e..ca3e1e1c 100644
--- a/src/components/nodes/ProcessNode.jsx
+++ b/src/components/nodes/ProcessNode.jsx
@@ -7,7 +7,7 @@ export function ProcessNode({ data }) {
       style={{
         width: 180,
         height: 100,
-        background: '#DDE6ED',
+        background: data.nodeColor || '#DDE6ED',
         color: 'black',
         borderRadius: 12,
         padding: 10,
@@ -55,7 +55,7 @@ export function ProcessNodeHorizontal({ data }) {
       style={{
         width: 100,
         height: 180,
-        background: '#DDE6ED',
+        background: data.nodeColor || '#DDE6ED',
         color: 'black',
         borderRadius: 12,
         padding: 10,
diff --git a/src/components/nodes/ScopeNode.jsx b/src/components/nodes/ScopeNode.jsx
index 12ff873d..1bfeba75 100644
--- a/src/components/nodes/ScopeNode.jsx
+++ b/src/components/nodes/ScopeNode.jsx
@@ -7,7 +7,7 @@ export default function ScopeNode({ data }) {
       style={{
         width: 100,
         height: 120,
-        background: '#DDE6ED',
+        background: data.nodeColor || '#DDE6ED',
         color: 'black',
         borderRadius: 12,
         padding: 10,
diff --git a/src/components/nodes/Splitters.jsx b/src/components/nodes/Splitters.jsx
index 69a6aacb..ab0b1595 100644
--- a/src/components/nodes/Splitters.jsx
+++ b/src/components/nodes/Splitters.jsx
@@ -7,7 +7,7 @@ export function Splitter2Node({ data }) {
       style={{
         width: 100,
         height: 100,
-        background: '#DDE6ED',
+        background: data.nodeColor || '#DDE6ED',
         color: 'black',
         borderRadius: 0,
         padding: 10,
@@ -88,7 +88,7 @@ export function Splitter3Node({ data }) {
       style={{
         width: 100,
         height: 100,
-        background: '#DDE6ED',
+        background: data.nodeColor || '#DDE6ED',
         color: 'black',
         borderRadius: 0,
         padding: 10,
diff --git a/src/components/nodes/StepSourceNode.jsx b/src/components/nodes/StepSourceNode.jsx
index 101262d7..d903bc65 100644
--- a/src/components/nodes/StepSourceNode.jsx
+++ b/src/components/nodes/StepSourceNode.jsx
@@ -7,7 +7,7 @@ export default function StepSourceNode({ data }) {
       style={{
         width: 100,
         height: 100,
-        background: '#DDE6ED',
+        background: data.nodeColor || '#DDE6ED',
         color: 'black',
         borderRadius: 12,
         padding: 10,
diff --git a/src/components/nodes/WallNode.jsx b/src/components/nodes/WallNode.jsx
index 3827d5ed..081bea56 100644
--- a/src/components/nodes/WallNode.jsx
+++ b/src/components/nodes/WallNode.jsx
@@ -7,7 +7,7 @@ export default function WallNode({ data }) {
       style={{
         width: 50,
         height: 180,
-        background: '#DDE6ED',
+        background: data.nodeColor || '#DDE6ED',
         color: 'black',
         borderRadius: 0,
         padding: 10,