diff --git a/frontend/src/components/CustomNode.jsx b/frontend/src/components/CustomNode.jsx
index c500180..45f3830 100644
--- a/frontend/src/components/CustomNode.jsx
+++ b/frontend/src/components/CustomNode.jsx
@@ -3,35 +3,61 @@ import { Handle, Position } from 'reactflow';
 function CustomNode({ data }) {
   const icon = data.icon || 'https://s3.dvirlabs.com/lab-icons/default.svg';
 
+  const handleSize = 5;
+
+  const visibleHandleStyle = {
+    background: '#1976d2',
+    width: handleSize,
+    height: handleSize,
+    borderRadius: '50%',
+    zIndex: 2,
+  };
+
+  const invisibleHandleStyle = {
+    background: 'transparent',
+    width: handleSize,
+    height: handleSize,
+    borderRadius: '50%',
+    zIndex: 1,
+  };
+
   return (
     <div style={{
       background: 'transparent',
       border: '2px solid #1976d2',
       borderRadius: 6,
-      padding: 10,
       textAlign: 'center',
       width: 80,
-      height: 40,
+      height: 80,
       boxShadow: '0 2px 6px rgba(0,0,0,0.2)',
       position: 'relative',
     }}>
-      {/* Handles - חובה */}
-      <Handle type="target" position={Position.Top} />
-      <Handle type="source" position={Position.Bottom} />
-      <Handle type="source" position={Position.Right} />
-      <Handle type="source" position={Position.Left} />
+      {/* === TOP === */}
+      <Handle id="source-top" type="source" position={Position.Top} style={{ ...visibleHandleStyle, top: -6 }} />
+      <Handle id="target-top" type="target" position={Position.Top} style={{ ...invisibleHandleStyle, top: -6 }} />
 
-      {/* Icon and label */}
+      {/* === BOTTOM === */}
+      <Handle id="source-bottom" type="source" position={Position.Bottom} style={{ ...visibleHandleStyle, bottom: -6 }} />
+      <Handle id="target-bottom" type="target" position={Position.Bottom} style={{ ...invisibleHandleStyle, bottom: -6 }} />
 
+      {/* === LEFT === */}
+      <Handle id="source-left" type="source" position={Position.Left} style={{ ...visibleHandleStyle, left: -6, top: 30 }} />
+      <Handle id="target-left" type="target" position={Position.Left} style={{ ...invisibleHandleStyle, left: -6, top: 30 }} />
+
+      {/* === RIGHT === */}
+      <Handle id="source-right" type="source" position={Position.Right} style={{ ...visibleHandleStyle, right: -6, top: 30 }} />
+      <Handle id="target-right" type="target" position={Position.Right} style={{ ...invisibleHandleStyle, right: -6, top: 30 }} />
+
+      {/* === ICON + LABEL === */}
       <img
         src={icon}
         alt={data.label}
         onError={(e) => {
           e.target.src = 'https://s3.dvirlabs.com/lab-icons/default.svg';
         }}
-        style={{ width: 40, height: 40, marginBottom: 6 }}
+        style={{ width: 40, height: 40, marginTop: 6 }}
       />
-      <div style={{ fontWeight: 'bold' }}>{data.label}</div>
+      <div style={{ fontWeight: 'bold', fontSize: 12 }}>{data.label}</div>
     </div>
   );
 }