diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index 0d77ebe5f6..2ea4709e15 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -1328,6 +1328,7 @@ export default mixins(
 
 				this.instance.bind('connection', (info: OnConnectionBindInfo) => {
 					info.connection.setConnector(['Flowchart', { cornerRadius: 8, stub: JSPLUMB_FLOWCHART_STUB, gap: 5, alwaysRespectStubs: false}]);
+					info.connection.setPaintStyle({stroke: getStyleTokenValue('--color-foreground-dark'), strokeWidth: 2, outlineStroke: "transparent", outlineWidth: 12});
 
 					addEndpointArrow(info.connection);
 					showOrHideMidpointArrow(info.connection);
@@ -1544,6 +1545,31 @@ export default mixins(
 					info.connection.removeOverlays();
 					this.__removeConnectionByConnectionInfo(info, false);
 				});
+
+				// @ts-ignore
+				this.instance.bind('connectionDrag', (connection: Connection) => {
+					const onMouseMove = () => {
+						if (!connection) {
+							return;
+						}
+
+						const elements = document.querySelector('div.jtk-endpoint.dropHover');
+						if (elements) {
+							connection.setPaintStyle({stroke: getStyleTokenValue('--color-primary')});
+						}
+						else {
+							connection.setPaintStyle({stroke: getStyleTokenValue('--color-foreground-dark')});
+						}
+					};
+
+					const onMouseUp = () => {
+						window.removeEventListener('mousemove', onMouseMove);
+						window.removeEventListener('mouseup', onMouseUp);
+					};
+
+					window.addEventListener('mousemove', onMouseMove);
+					window.addEventListener('mouseup', onMouseUp);
+				});
 			},
 			async newWorkflow (): Promise<void> {
 				await this.resetWorkspace();