diff --git a/packages/core/src/container/Viewport/Viewport.vue b/packages/core/src/container/Viewport/Viewport.vue
index 5441731a..8c9dbade 100644
--- a/packages/core/src/container/Viewport/Viewport.vue
+++ b/packages/core/src/container/Viewport/Viewport.vue
@@ -31,6 +31,7 @@ const {
   noPanClassName,
   setState,
   emits,
+  connectionStartHandle,
 } = $(useVueFlow())
 
 const viewportEl = templateRef<HTMLDivElement>('viewport', null)
@@ -39,6 +40,8 @@ let isZoomingOrPanning = $ref(false)
 
 let isDragging = $ref(false)
 
+const isConnecting = $computed(() => !!connectionStartHandle)
+
 const viewChanged = (prevTransform: ViewpaneTransform, eventTransform: ZoomTransform): boolean =>
   (prevTransform.x !== eventTransform.x && !isNaN(eventTransform.x)) ||
   (prevTransform.y !== eventTransform.y && !isNaN(eventTransform.y)) ||
@@ -232,6 +235,6 @@ export default {
     <Transform>
       <slot />
     </Transform>
-    <SelectionPane :class="{ dragging: isDragging, draggable: panOnDrag }" />
+    <SelectionPane :class="{ connecting: isConnecting, dragging: isDragging, draggable: panOnDrag }" />
   </div>
 </template>