diff --git a/frontend/src/components/ColorNode.jsx b/frontend/src/components/ColorNode.jsx
new file mode 100644
index 0000000..8eafab3
--- /dev/null
+++ b/frontend/src/components/ColorNode.jsx
@@ -0,0 +1,26 @@
+import { Handle, Position } from 'reactflow';
+
+function ColorNode({ data }) {
+  return (
+    <div style={{ 
+      background: 'white',
+      border: '2px solid #ff0071',
+      borderRadius: 8,
+      padding: 10,
+      width: 120,
+      textAlign: 'center'
+    }}>
+      <Handle type="target" position={Position.Left} />
+      <div style={{ fontSize: 12, marginBottom: 6 }}>🎨 Shape Color</div>
+      <input
+        type="color"
+        value={data.color || '#ff0071'}
+        onChange={(e) => data.onChange?.(e.target.value)}
+        style={{ width: '100%' }}
+      />
+      <Handle type="source" position={Position.Right} />
+    </div>
+  );
+}
+
+export default ColorNode;
diff --git a/frontend/src/components/Diagram.jsx b/frontend/src/components/Diagram.jsx
index 9b8e518..a5c1165 100644
--- a/frontend/src/components/Diagram.jsx
+++ b/frontend/src/components/Diagram.jsx
@@ -17,10 +17,13 @@ import CustomNode from './CustomNode';
 import IconSelector from './IconSelector';
 import { toast } from 'react-toastify';
 import RouterNode from './RouterNode';
+import ColorNode from './ColorNode';
+
 
 const nodeTypes = {
   custom: CustomNode,
   router: RouterNode,
+  color: ColorNode,
 };
 
 function Diagram() {
@@ -296,6 +299,7 @@ function Diagram() {
           >
             <option value="custom">🧱 Custom</option>
             <option value="router">📡 Router</option>
+            <option value="color">🎨 Color Node</option>
           </select>
 
           {newType === 'custom' && (
diff --git a/frontend/src/components/RouterNode.jsx b/frontend/src/components/RouterNode.jsx
new file mode 100644
index 0000000..b41e794
--- /dev/null
+++ b/frontend/src/components/RouterNode.jsx
@@ -0,0 +1,14 @@
+// components/RouterNode.js
+import { Handle, Position } from 'reactflow';
+
+function RouterNode({ data }) {
+  return (
+    <div style={{ border: '2px dashed #ff9800', borderRadius: 6, padding: 10, width: 100, textAlign: 'center' }}>
+      <Handle type="target" position={Position.Top} />
+      <div>📡 {data.label}</div>
+      <Handle type="source" position={Position.Bottom} />
+    </div>
+  );
+}
+
+export default RouterNode;