diff --git a/client/src/components/rack/ConnectionLayer.tsx b/client/src/components/rack/ConnectionLayer.tsx
index 831c40f..cb30de7 100644
--- a/client/src/components/rack/ConnectionLayer.tsx
+++ b/client/src/components/rack/ConnectionLayer.tsx
@@ -6,6 +6,7 @@ export function ConnectionLayer() {
   const { racks, cablingFromPortId, setActiveConfigConnectionId } = useRackStore();
   const [coords, setCoords] = useState<Record<string, { x: number; y: number }>>({});
   const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
+  const [isShiftPressed, setIsShiftPressed] = useState(false);
 
   // Update port coordinates
   const updateCoords = useCallback(() => {
@@ -78,6 +79,26 @@ export function ConnectionLayer() {
     return () => window.removeEventListener('mousemove', onMouseMove);
   }, [cablingFromPortId]);
 
+  useEffect(() => {
+    const syncShiftState = (event: KeyboardEvent) => {
+      setIsShiftPressed(event.shiftKey);
+    };
+
+    const clearShiftState = () => {
+      setIsShiftPressed(false);
+    };
+
+    window.addEventListener('keydown', syncShiftState);
+    window.addEventListener('keyup', syncShiftState);
+    window.addEventListener('blur', clearShiftState);
+
+    return () => {
+      window.removeEventListener('keydown', syncShiftState);
+      window.removeEventListener('keyup', syncShiftState);
+      window.removeEventListener('blur', clearShiftState);
+    };
+  }, []);
+
   const connections = useMemo(() => {
     const conns: { id: string; from: string; to: string; color?: string; edgeType?: string }[] = [];
     racks.forEach((rack) => {
@@ -149,7 +170,7 @@ export function ConnectionLayer() {
               stroke="transparent"
               strokeWidth="10"
               fill="none"
-              className="pointer-events-auto cursor-pointer"
+              className={isShiftPressed ? 'pointer-events-auto cursor-pointer' : 'pointer-events-none'}
               onClick={(e) => {
                 if (e.shiftKey) {
                   e.stopPropagation();