diff --git a/frontend/packages/dev-console/src/components/topology/componentFactory.ts b/frontend/packages/dev-console/src/components/topology/componentFactory.ts
index e7e40e4c306..1c05474243b 100644
--- a/frontend/packages/dev-console/src/components/topology/componentFactory.ts
+++ b/frontend/packages/dev-console/src/components/topology/componentFactory.ts
@@ -32,6 +32,7 @@ import {
   groupWorkloadDropTargetSpec,
   edgeDragSourceSpec,
   graphEventSourceDropTargetSpec,
+  noDropTargetSpec,
   createConnectorCallback,
   removeConnectorCallback,
   MOVE_CONNECTOR_DROP_TYPE,
@@ -70,6 +71,10 @@ type NodeProps = {
   element: Node;
 };
 
+const withNoDrop = () => {
+  return withDndDrop<any, any, {}, NodeProps>(noDropTargetSpec);
+};
+
 class ComponentFactory {
   private hasServiceBinding: boolean;
 
@@ -85,7 +90,7 @@ class ComponentFactory {
     return (kind, type): ComponentType<{ element: GraphElement }> | undefined => {
       switch (type) {
         case TYPE_HELM_RELEASE:
-          return withSelection(false, true)(HelmRelease);
+          return withSelection(false, true)(withNoDrop()(HelmRelease));
         case TYPE_HELM_WORKLOAD:
           return withCreateConnector(createConnectorCallback(this.hasServiceBinding))(
             withDndDrop<
@@ -124,7 +129,7 @@ class ComponentFactory {
             ),
           );
         case TYPE_OPERATOR_BACKED_SERVICE:
-          return withSelection(false, true)(OperatorBackedService);
+          return withSelection(false, true)(withNoDrop()(OperatorBackedService));
         case TYPE_OPERATOR_WORKLOAD:
           return withCreateConnector(createConnectorCallback(this.hasServiceBinding))(
             withEditReviewAccess('patch')(
@@ -182,7 +187,7 @@ class ComponentFactory {
                   nodeContextMenu,
                   document.getElementById('modal-container'),
                   'odc-topology-context-menu',
-                )(EventSource),
+                )(withNoDrop()(EventSource)),
               ),
             ),
           );
@@ -196,7 +201,7 @@ class ComponentFactory {
                 nodeContextMenu,
                 document.getElementById('modal-container'),
                 'odc-topology-context-menu',
-              )(RevisionNode),
+              )(withNoDrop()(RevisionNode)),
             ),
           );
         case TYPE_REVISION_TRAFFIC:
diff --git a/frontend/packages/dev-console/src/components/topology/componentUtils.ts b/frontend/packages/dev-console/src/components/topology/componentUtils.ts
index e7330159d32..66ad9ab3f98 100644
--- a/frontend/packages/dev-console/src/components/topology/componentUtils.ts
+++ b/frontend/packages/dev-console/src/components/topology/componentUtils.ts
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import {
   Modifiers,
   Edge,
@@ -18,7 +19,7 @@ import { K8sResourceKind } from '@console/internal/module/k8s';
 import { createConnection } from './components/createConnection';
 import { removeConnection } from './components/removeConnection';
 import { moveNodeToGroup } from './components/moveNodeToGroup';
-import { TYPE_CONNECTS_TO, TYPE_WORKLOAD, TYPE_KNATIVE_SERVICE, TYPE_EVENT_SOURCE } from './const';
+import { TYPE_WORKLOAD, TYPE_KNATIVE_SERVICE, TYPE_EVENT_SOURCE } from './const';
 import './components/GraphComponent.scss';
 import { graphContextMenu, groupContextMenu } from './nodeContextMenu';
 import { errorModal } from '@console/internal/components/modals';
@@ -44,6 +45,8 @@ const REGROUP_OPERATION = 'regroup';
 
 const editOperations = [REGROUP_OPERATION, MOVE_CONNECTOR_OPERATION, CREATE_CONNECTOR_OPERATION];
 
+const regroupTypes = [TYPE_WORKLOAD, TYPE_KNATIVE_SERVICE, TYPE_EVENT_SOURCE];
+
 const highlightNodeOperations = [MOVE_CONNECTOR_OPERATION, CREATE_CONNECTOR_OPERATION];
 
 const canDropEdgeOnNode = (operation: string, edge: Edge, node: Node): boolean => {
@@ -162,17 +165,13 @@ const graphWorkloadDropTargetSpec: DropTargetSpec<
   { dragEditInProgress: boolean },
   GraphProps
 > = {
-  accept: [
-    TYPE_WORKLOAD,
-    TYPE_KNATIVE_SERVICE,
-    TYPE_EVENT_SOURCE,
-    TYPE_CONNECTS_TO,
-    CREATE_CONNECTOR_DROP_TYPE,
-  ],
+  accept: [...regroupTypes, CREATE_CONNECTOR_DROP_TYPE],
+  hitTest: () => true,
   canDrop: (item, monitor, props) => {
     return (
-      (monitor.getOperation() === REGROUP_OPERATION && item.getParent() !== props.element) ||
-      monitor.getItemType() === CREATE_CONNECTOR_DROP_TYPE
+      monitor.isOver({ shallow: monitor.getItemType() === CREATE_CONNECTOR_DROP_TYPE }) &&
+      ((monitor.getOperation() === REGROUP_OPERATION && item.getParent() !== props.element) ||
+        monitor.getItemType() === CREATE_CONNECTOR_DROP_TYPE)
     );
   },
   collect: (monitor) => ({
@@ -187,14 +186,18 @@ const groupWorkloadDropTargetSpec: DropTargetSpec<
   { droppable: boolean; dropTarget: boolean; canDrop: boolean },
   any
 > = {
-  accept: [TYPE_WORKLOAD, TYPE_EVENT_SOURCE, TYPE_KNATIVE_SERVICE, CREATE_CONNECTOR_DROP_TYPE],
+  accept: [...regroupTypes, CREATE_CONNECTOR_DROP_TYPE],
   canDrop: (item, monitor) =>
-    monitor.getOperation() === REGROUP_OPERATION ||
-    monitor.getItemType() === CREATE_CONNECTOR_DROP_TYPE,
+    monitor.isOver({ shallow: monitor.getItemType() === CREATE_CONNECTOR_DROP_TYPE }) &&
+    (monitor.getOperation() === REGROUP_OPERATION ||
+      monitor.getItemType() === CREATE_CONNECTOR_DROP_TYPE),
   collect: (monitor) => ({
     droppable: monitor.isDragging() && monitor.getOperation() === REGROUP_OPERATION,
-    dropTarget: monitor.isOver({ shallow: true }),
-    canDrop: monitor.canDrop(),
+    dropTarget: monitor.isOver({ shallow: monitor.getItemType() === CREATE_CONNECTOR_DROP_TYPE }),
+    canDrop:
+      monitor.isDragging() &&
+      (monitor.getOperation() === REGROUP_OPERATION ||
+        monitor.getItemType() === CREATE_CONNECTOR_DROP_TYPE),
   }),
   dropHint: 'create',
 };
@@ -205,12 +208,18 @@ const graphEventSourceDropTargetSpec: DropTargetSpec<
   { canDrop: boolean; dropTarget: boolean; edgeDragging: boolean },
   NodeProps
 > = {
-  accept: [MOVE_EV_SRC_CONNECTOR_DROP_TYPE],
+  accept: [CREATE_CONNECTOR_DROP_TYPE, MOVE_EV_SRC_CONNECTOR_DROP_TYPE],
   canDrop: (item, monitor, props) => {
-    return item.getSource() !== props.element;
+    return (
+      monitor.getOperation() === MOVE_EV_SRC_CONNECTOR_DROP_TYPE &&
+      item.getSource() !== props.element
+    );
   },
   collect: (monitor, props) => ({
-    canDrop: monitor.canDrop(),
+    canDrop:
+      monitor.isDragging() &&
+      monitor.getOperation() === MOVE_EV_SRC_CONNECTOR_DROP_TYPE &&
+      monitor.canDrop(),
     dropTarget: monitor.isOver({ shallow: true }),
     edgeDragging: nodesEdgeIsDragging(monitor, props),
   }),
@@ -254,6 +263,13 @@ const edgeDragSourceSpec = (
   }),
 });
 
+const noDropTargetSpec: DropTargetSpec<GraphElement, any, {}, { element: GraphElement }> = {
+  accept: [...regroupTypes, CREATE_CONNECTOR_DROP_TYPE],
+  canDrop: () => {
+    return false;
+  },
+};
+
 const createConnectorCallback = (serviceBinding: boolean) => (
   source: Node,
   target: Node | Graph,
@@ -288,6 +304,7 @@ export {
   groupWorkloadDropTargetSpec,
   graphEventSourceDropTargetSpec,
   edgeDragSourceSpec,
+  noDropTargetSpec,
   createConnectorCallback,
   removeConnectorCallback,
   MOVE_CONNECTOR_DROP_TYPE,
diff --git a/frontend/packages/dev-console/src/components/topology/components/GraphComponent.scss b/frontend/packages/dev-console/src/components/topology/components/GraphComponent.scss
index 0277ccd4e9f..3493ee744f5 100644
--- a/frontend/packages/dev-console/src/components/topology/components/GraphComponent.scss
+++ b/frontend/packages/dev-console/src/components/topology/components/GraphComponent.scss
@@ -1,9 +1,14 @@
+@import '../topology-utils';
+
 .odc-m-drag-active {
   cursor: grab !important;
+  .topology-create-connector {
+    pointer-events: none;
+  }
 }
 
 .topology-connector__remove-bg {
-  fill: var(--pf-global--active-color--400);
+  fill: #{$interactive-stroke-color};
   cursor: pointer;
   .odc-m-drag-active & {
     display: none;
diff --git a/frontend/packages/dev-console/src/components/topology/components/edges/BaseEdge.scss b/frontend/packages/dev-console/src/components/topology/components/edges/BaseEdge.scss
index c800d567430..783ae9e938d 100644
--- a/frontend/packages/dev-console/src/components/topology/components/edges/BaseEdge.scss
+++ b/frontend/packages/dev-console/src/components/topology/components/edges/BaseEdge.scss
@@ -12,6 +12,8 @@
   --edge--active--fill: var(--edge--active--stroke);
   --edge--drag-active--opacity: #{$de-emphasize-opacity};
   --edge__arrow--cursor: default;
+  --edge--interactive--stroke: #{$interactive-stroke-color};
+  --edge--interactive--fill: var(--edge--interactive--stroke);
 
   cursor: var(--edge--cursor);
   stroke: var(--edge--stroke);
@@ -23,9 +25,7 @@
     stroke-dasharray: var(--edge--stroke-dasharray);
   }
 
-  &.is-hover,
-  &.is-selected,
-  &.is-dragging {
+  &.is-selected {
     fill: var(--edge--active--fill);
     stroke: var(--edge--active--stroke);
     .odc-base-edge__link,
@@ -33,6 +33,16 @@
       stroke: var(--edge--active--stroke);
     }
   }
+
+  &.is-hover,
+  &.is-dragging {
+    fill: var(--edge--interactive--fill);
+    stroke: var(--edge--interactive--stroke);
+    .odc-base-edge__link,
+    .topology-connector-arrow {
+      stroke: var(--edge--interactive--stroke);
+    }
+  }
   .topology-connector-arrow {
     cursor: var(--edge__arrow--cursor);
     stroke: var(--edge--stroke);
@@ -48,10 +58,14 @@
 
 .odc-m-drag-active {
   .odc-base-edge {
+    pointer-events: none;
     opacity: var(--edge--drag-active--opacity);
     &.is-dragging {
       opacity: var(--edge--opacity);
     }
+    .topology-connector-arrow {
+      pointer-events: none;
+    }
   }
 }
 .odc-m-filter-active {
diff --git a/frontend/packages/dev-console/src/components/topology/components/groups/HelmRelease.scss b/frontend/packages/dev-console/src/components/topology/components/groups/HelmRelease.scss
index d7759796fc8..cf2ebaedb62 100644
--- a/frontend/packages/dev-console/src/components/topology/components/groups/HelmRelease.scss
+++ b/frontend/packages/dev-console/src/components/topology/components/groups/HelmRelease.scss
@@ -5,7 +5,7 @@
   cursor: pointer;
 
   .odc-m-drag-active & {
-    cursor: grab;
+    pointer-events: none;
   }
 
   &__bg {
diff --git a/frontend/packages/dev-console/src/components/topology/components/groups/HelmRelease.tsx b/frontend/packages/dev-console/src/components/topology/components/groups/HelmRelease.tsx
index 99baf1fa407..c51ac259fbe 100644
--- a/frontend/packages/dev-console/src/components/topology/components/groups/HelmRelease.tsx
+++ b/frontend/packages/dev-console/src/components/topology/components/groups/HelmRelease.tsx
@@ -1,8 +1,5 @@
 import * as React from 'react';
-import { connect } from 'react-redux';
-import { Node, observer, WithSelectionProps } from '@console/topology';
-import { RootState } from '@console/internal/redux';
-import { getTopologyFilters, TopologyFilters } from '../../filters/filter-utils';
+import { Node, observer, WithSelectionProps, WithDndDropProps } from '@console/topology';
 import HelmReleaseNode from './HelmReleaseNode';
 import HelmReleaseGroup from './HelmReleaseGroup';
 
@@ -10,8 +7,8 @@ import './HelmRelease.scss';
 
 export type HelmReleaseProps = {
   element: Node;
-  filters: TopologyFilters;
-} & WithSelectionProps;
+} & WithSelectionProps &
+  WithDndDropProps;
 
 const HelmRelease: React.FC<HelmReleaseProps> = (props) => {
   if (
@@ -25,8 +22,4 @@ const HelmRelease: React.FC<HelmReleaseProps> = (props) => {
   return <HelmReleaseGroup {...props} />;
 };
 
-const HelmReleaseState = (state: RootState) => ({
-  filters: getTopologyFilters(state),
-});
-
-export default connect(HelmReleaseState)(observer(HelmRelease));
+export default observer(HelmRelease);
diff --git a/frontend/packages/dev-console/src/components/topology/components/groups/HelmReleaseGroup.tsx b/frontend/packages/dev-console/src/components/topology/components/groups/HelmReleaseGroup.tsx
index 67ca3f233dd..200bac114a5 100644
--- a/frontend/packages/dev-console/src/components/topology/components/groups/HelmReleaseGroup.tsx
+++ b/frontend/packages/dev-console/src/components/topology/components/groups/HelmReleaseGroup.tsx
@@ -7,37 +7,45 @@ import {
   createSvgIdUrl,
   useDragNode,
   WithSelectionProps,
+  WithDndDropProps,
   observer,
   useCombineRefs,
 } from '@console/topology';
 import NodeShadows, { NODE_SHADOW_FILTER_ID_HOVER, NODE_SHADOW_FILTER_ID } from '../NodeShadows';
 import SvgBoxedText from '../../../svg/SvgBoxedText';
 import useSearchFilter from '../../filters/useSearchFilter';
+import { nodeDragSourceSpec } from '../../componentUtils';
+import { TYPE_HELM_RELEASE } from '../../const';
 
 export type HelmReleaseGroupProps = {
   element: Node;
-} & WithSelectionProps;
+} & WithSelectionProps &
+  WithDndDropProps;
 
-const HelmReleaseGroup: React.FC<HelmReleaseGroupProps> = ({ element, onSelect, selected }) => {
+const HelmReleaseGroup: React.FC<HelmReleaseGroupProps> = ({
+  element,
+  onSelect,
+  selected,
+  dndDropRef,
+}) => {
   const [hover, hoverRef] = useHover();
   const [labelHover, labelHoverRef] = useHover();
   const { x, y, width, height } = element.getBounds();
-  const [{ dragging }, dragNodeRef] = useDragNode({
-    collect: (monitor) => ({
-      dragging: monitor.isDragging(),
-    }),
+  const [{ dragging }, dragNodeRef] = useDragNode(nodeDragSourceSpec(TYPE_HELM_RELEASE, false), {
+    element,
   });
-  const [{ labelDragging }, dragLabelRef] = useDragNode({
-    collect: (monitor) => ({
-      labelDragging: monitor.isDragging(),
-    }),
-  });
-  const refs = useCombineRefs(dragNodeRef, hoverRef);
+  const [{ dragging: labelDragging }, dragLabelRef] = useDragNode(
+    nodeDragSourceSpec(TYPE_HELM_RELEASE, false),
+    {
+      element,
+    },
+  );
+  const refs = useCombineRefs(dragNodeRef, dndDropRef, hoverRef);
   const [filtered] = useSearchFilter(element.getLabel());
   return (
     <>
       <NodeShadows />
-      <Layer id={dragging ? undefined : 'groups'}>
+      <Layer id={dragging || labelDragging ? undefined : 'groups'}>
         <g
           className={classNames('odc-helm-release', {
             'is-dragging': dragging || labelDragging,
diff --git a/frontend/packages/dev-console/src/components/topology/components/groups/HelmReleaseNode.tsx b/frontend/packages/dev-console/src/components/topology/components/groups/HelmReleaseNode.tsx
index fc879e6faf1..619d9ebfd9b 100644
--- a/frontend/packages/dev-console/src/components/topology/components/groups/HelmReleaseNode.tsx
+++ b/frontend/packages/dev-console/src/components/topology/components/groups/HelmReleaseNode.tsx
@@ -8,26 +8,33 @@ import {
   createSvgIdUrl,
   useDragNode,
   WithSelectionProps,
+  WithDndDropProps,
   observer,
   useCombineRefs,
 } from '@console/topology';
 import NodeShadows, { NODE_SHADOW_FILTER_ID_HOVER, NODE_SHADOW_FILTER_ID } from '../NodeShadows';
 import useSearchFilter from '../../filters/useSearchFilter';
 import GroupNode from '../nodes/GroupNode';
+import { nodeDragSourceSpec } from '../../componentUtils';
+import { TYPE_HELM_RELEASE } from '../../const';
 
 export type HelmReleaseNodeProps = {
   element: Node;
-} & WithSelectionProps;
+} & WithSelectionProps &
+  WithDndDropProps;
 
-const HelmReleaseNode: React.FC<HelmReleaseNodeProps> = ({ element, onSelect, selected }) => {
+const HelmReleaseNode: React.FC<HelmReleaseNodeProps> = ({
+  element,
+  onSelect,
+  selected,
+  dndDropRef,
+}) => {
   useAnchor((e: Node) => new RectAnchor(e, 4));
   const [hover, hoverRef] = useHover();
-  const [{ dragging }, dragNodeRef] = useDragNode({
-    collect: (monitor) => ({
-      dragging: monitor.isDragging(),
-    }),
+  const [{ dragging }, dragNodeRef] = useDragNode(nodeDragSourceSpec(TYPE_HELM_RELEASE, false), {
+    element,
   });
-  const refs = useCombineRefs<SVGRectElement>(dragNodeRef, hoverRef);
+  const refs = useCombineRefs<SVGRectElement>(dragNodeRef, dndDropRef, hoverRef);
   const [filtered] = useSearchFilter(element.getLabel());
   const { width, height } = element.getBounds();
 
diff --git a/frontend/packages/dev-console/src/components/topology/components/nodes/Application.scss b/frontend/packages/dev-console/src/components/topology/components/nodes/Application.scss
index 831269361dc..58c65e2b872 100644
--- a/frontend/packages/dev-console/src/components/topology/components/nodes/Application.scss
+++ b/frontend/packages/dev-console/src/components/topology/components/nodes/Application.scss
@@ -5,7 +5,7 @@
   outline: none;
   cursor: pointer;
   .odc-m-drag-active & {
-    cursor: grab;
+    pointer-events: none;
   }
 
   &__bg {
diff --git a/frontend/packages/dev-console/src/components/topology/components/nodes/BaseNode.scss b/frontend/packages/dev-console/src/components/topology/components/nodes/BaseNode.scss
index 02bfd2e92a7..6b543b28179 100644
--- a/frontend/packages/dev-console/src/components/topology/components/nodes/BaseNode.scss
+++ b/frontend/packages/dev-console/src/components/topology/components/nodes/BaseNode.scss
@@ -4,12 +4,12 @@
   outline: none;
   cursor: pointer;
 
-  &:focus {
-    outline: none;
+  .odc-m-drag-active & {
+    pointer-events: none;
   }
 
-  &.is-dragging {
-    cursor: grab;
+  &:focus {
+    outline: none;
   }
 
   &__bg {
@@ -59,4 +59,4 @@
       opacity: 1;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/packages/dev-console/src/components/topology/components/nodes/EventSource.scss b/frontend/packages/dev-console/src/components/topology/components/nodes/EventSource.scss
index c397987e779..d4e2c933280 100644
--- a/frontend/packages/dev-console/src/components/topology/components/nodes/EventSource.scss
+++ b/frontend/packages/dev-console/src/components/topology/components/nodes/EventSource.scss
@@ -4,7 +4,7 @@
   cursor: pointer;
 
   .odc-m-drag-active & {
-    cursor: grab;
+    pointer-events: none;
   }
 
   &__bg {
diff --git a/frontend/packages/dev-console/src/components/topology/components/nodes/EventSource.tsx b/frontend/packages/dev-console/src/components/topology/components/nodes/EventSource.tsx
index bc0a869016d..fdb7aa36c92 100644
--- a/frontend/packages/dev-console/src/components/topology/components/nodes/EventSource.tsx
+++ b/frontend/packages/dev-console/src/components/topology/components/nodes/EventSource.tsx
@@ -5,6 +5,7 @@ import {
   observer,
   useHover,
   WithSelectionProps,
+  WithDndDropProps,
   WithContextMenuProps,
   useSvgAnchor,
   useCombineRefs,
@@ -24,6 +25,7 @@ export type EventSourceProps = {
   edgeDragging?: boolean;
 } & WithSelectionProps &
   WithDragNodeProps &
+  WithDndDropProps &
   WithContextMenuProps;
 
 const EventSource: React.FC<EventSourceProps> = ({
@@ -33,12 +35,13 @@ const EventSource: React.FC<EventSourceProps> = ({
   onContextMenu,
   contextMenuOpen,
   dragNodeRef,
+  dndDropRef,
   dragging,
   edgeDragging,
 }) => {
   const svgAnchorRef = useSvgAnchor();
   const [hover, hoverRef] = useHover();
-  const groupRefs = useCombineRefs(dragNodeRef, hoverRef);
+  const groupRefs = useCombineRefs(dragNodeRef, dndDropRef, hoverRef);
   const [filtered] = useSearchFilter(element.getLabel());
   const { width, height } = element.getBounds();
   const size = Math.min(width, height);
diff --git a/frontend/packages/dev-console/src/components/topology/components/nodes/KnativeService.scss b/frontend/packages/dev-console/src/components/topology/components/nodes/KnativeService.scss
index 3b8e22e62da..6404f6833e4 100644
--- a/frontend/packages/dev-console/src/components/topology/components/nodes/KnativeService.scss
+++ b/frontend/packages/dev-console/src/components/topology/components/nodes/KnativeService.scss
@@ -5,7 +5,7 @@
   cursor: pointer;
 
   .odc-m-drag-active & {
-    cursor: grab;
+    pointer-events: none;
   }
 
   &__bg {
diff --git a/frontend/packages/dev-console/src/components/topology/components/nodes/OperatorBackedService.scss b/frontend/packages/dev-console/src/components/topology/components/nodes/OperatorBackedService.scss
index f3737be1100..e016f632bb4 100644
--- a/frontend/packages/dev-console/src/components/topology/components/nodes/OperatorBackedService.scss
+++ b/frontend/packages/dev-console/src/components/topology/components/nodes/OperatorBackedService.scss
@@ -5,7 +5,7 @@
   cursor: pointer;
 
   .odc-m-drag-active & {
-    cursor: grab;
+    pointer-events: none;
   }
 
   &__bg {
diff --git a/frontend/packages/dev-console/src/components/topology/components/nodes/OperatorBackedService.tsx b/frontend/packages/dev-console/src/components/topology/components/nodes/OperatorBackedService.tsx
index 18819572946..c133d0c06ab 100644
--- a/frontend/packages/dev-console/src/components/topology/components/nodes/OperatorBackedService.tsx
+++ b/frontend/packages/dev-console/src/components/topology/components/nodes/OperatorBackedService.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Node, observer, WithSelectionProps } from '@console/topology';
+import { Node, observer, WithSelectionProps, WithDndDropProps } from '@console/topology';
 import OperatorBackedServiceGroup from './OperatorBackedServiceGroup';
 import OperatorBackedServiceNode from './OperatorBackedServiceNode';
 
@@ -7,7 +7,8 @@ import './OperatorBackedService.scss';
 
 export type OperatorBackedServiceProps = {
   element: Node;
-} & WithSelectionProps;
+} & WithSelectionProps &
+  WithDndDropProps;
 
 const OperatorBackedService: React.FC<OperatorBackedServiceProps> = (
   props: OperatorBackedServiceProps,
diff --git a/frontend/packages/dev-console/src/components/topology/components/nodes/OperatorBackedServiceGroup.tsx b/frontend/packages/dev-console/src/components/topology/components/nodes/OperatorBackedServiceGroup.tsx
index 8ce64396b8b..783633f6fcf 100644
--- a/frontend/packages/dev-console/src/components/topology/components/nodes/OperatorBackedServiceGroup.tsx
+++ b/frontend/packages/dev-console/src/components/topology/components/nodes/OperatorBackedServiceGroup.tsx
@@ -4,6 +4,7 @@ import {
   Node,
   observer,
   WithSelectionProps,
+  WithDndDropProps,
   useDragNode,
   Layer,
   useHover,
@@ -18,22 +19,24 @@ import NodeShadows, { NODE_SHADOW_FILTER_ID, NODE_SHADOW_FILTER_ID_HOVER } from
 
 export type OperatorBackedServiceGroupProps = {
   element: Node;
-} & WithSelectionProps;
+} & WithSelectionProps &
+  WithDndDropProps;
 
 const OperatorBackedServiceGroup: React.FC<OperatorBackedServiceGroupProps> = ({
   element,
   selected,
   onSelect,
+  dndDropRef,
 }) => {
   const [hover, hoverRef] = useHover();
   const [innerHover, innerHoverRef] = useHover();
-  const [{ dragging, regrouping }, dragNodeRef] = useDragNode(
+  const [{ dragging }, dragNodeRef] = useDragNode(
     nodeDragSourceSpec(TYPE_OPERATOR_BACKED_SERVICE, false),
     {
       element,
     },
   );
-  const [{ dragging: labelDragging, regrouping: labelRegrouping }, dragLabelRef] = useDragNode(
+  const [{ dragging: labelDragging }, dragLabelRef] = useDragNode(
     nodeDragSourceSpec(TYPE_OPERATOR_BACKED_SERVICE, false),
     {
       element,
@@ -55,9 +58,7 @@ const OperatorBackedServiceGroup: React.FC<OperatorBackedServiceGroupProps> = ({
       })}
     >
       <NodeShadows />
-      <Layer
-        id={(dragging || labelDragging) && (regrouping || labelRegrouping) ? undefined : 'groups2'}
-      >
+      <Layer id={dragging || labelDragging ? undefined : 'groups2'}>
         <g
           ref={nodeRefs}
           className={classNames('odc-operator-backed-service', {
@@ -67,6 +68,7 @@ const OperatorBackedServiceGroup: React.FC<OperatorBackedServiceGroupProps> = ({
           })}
         >
           <rect
+            ref={dndDropRef}
             className="odc-operator-backed-service__bg"
             x={x}
             y={y}
diff --git a/frontend/packages/dev-console/src/components/topology/components/nodes/OperatorBackedServiceNode.tsx b/frontend/packages/dev-console/src/components/topology/components/nodes/OperatorBackedServiceNode.tsx
index d65134617fd..2f358b2abd2 100644
--- a/frontend/packages/dev-console/src/components/topology/components/nodes/OperatorBackedServiceNode.tsx
+++ b/frontend/packages/dev-console/src/components/topology/components/nodes/OperatorBackedServiceNode.tsx
@@ -4,6 +4,7 @@ import {
   observer,
   Node,
   WithSelectionProps,
+  WithDndDropProps,
   useAnchor,
   RectAnchor,
   useCombineRefs,
@@ -19,12 +20,14 @@ import GroupNode from './GroupNode';
 
 export type OperatorBackedServiceNodeProps = {
   element: Node;
-} & WithSelectionProps;
+} & WithSelectionProps &
+  WithDndDropProps;
 
 const OperatorBackedServiceNode: React.FC<OperatorBackedServiceNodeProps> = ({
   element,
   selected,
   onSelect,
+  dndDropRef,
 }) => {
   useAnchor((e: Node) => new RectAnchor(e, 4));
   const [hover, hoverRef] = useHover();
@@ -34,7 +37,7 @@ const OperatorBackedServiceNode: React.FC<OperatorBackedServiceNodeProps> = ({
       element,
     },
   );
-  const refs = useCombineRefs<SVGRectElement>(hoverRef, dragNodeRef);
+  const refs = useCombineRefs<SVGRectElement>(hoverRef, dragNodeRef, dndDropRef);
   const [filtered] = useSearchFilter(element.getLabel());
   const kind = 'Operator';
   const { width, height } = element.getBounds();
diff --git a/frontend/packages/dev-console/src/components/topology/topology-utils.scss b/frontend/packages/dev-console/src/components/topology/topology-utils.scss
index 332a6603cf3..65cc939bb3b 100644
--- a/frontend/packages/dev-console/src/components/topology/topology-utils.scss
+++ b/frontend/packages/dev-console/src/components/topology/topology-utils.scss
@@ -6,7 +6,7 @@ $selected-fill-color: #A5C4E2;
 $selected-stroke-color: $pf-color-blue-400;
 
 $interactive-fill-color: #A5C4E2;
-$interactive-stroke-color: $pf-color-blue-400;
+$interactive-stroke-color: $pf-color-blue-200;
 
 $group-node-stroke-color: $pf-color-black-500;
 $group-node-fill-color: $pf-color-black-300;
diff --git a/frontend/packages/topology/src/behavior/CreateConnector.scss b/frontend/packages/topology/src/behavior/CreateConnector.scss
new file mode 100644
index 00000000000..9978c735a95
--- /dev/null
+++ b/frontend/packages/topology/src/behavior/CreateConnector.scss
@@ -0,0 +1,3 @@
+.topology-create-connector {
+  cursor: pointer;
+}
diff --git a/frontend/packages/topology/src/behavior/withCreateConnector.tsx b/frontend/packages/topology/src/behavior/withCreateConnector.tsx
index c5150fb79fa..1cd173f9b56 100644
--- a/frontend/packages/topology/src/behavior/withCreateConnector.tsx
+++ b/frontend/packages/topology/src/behavior/withCreateConnector.tsx
@@ -9,6 +9,8 @@ import { Node, isNode, AnchorEnd, GraphElement, isGraph, Graph } from '../types'
 import { DragSourceSpec, DragSourceMonitor, DragEvent } from './dnd-types';
 import { useDndDrag } from './useDndDrag';
 
+import './CreateConnector.scss';
+
 export const CREATE_CONNECTOR_OPERATION = 'createconnector';
 
 export type ConnectorChoice = {
@@ -141,10 +143,10 @@ const CreateConnectorWidget: React.FC<CreateConnectorWidgetProps> = observer((pr
     <>
       <Layer id="top">
         <g
+          className="topology-create-connector"
           ref={dragRef}
           onMouseEnter={!active ? () => onKeepAlive(true) : undefined}
           onMouseLeave={!active ? () => onKeepAlive(false) : undefined}
-          style={{ cursor: !dragging ? 'pointer' : undefined }}
         >
           {renderConnector(startPoint, endPoint, hintsRef.current)}
           {!active && (