diff --git a/packages/ui-tests/cypress/e2e/codeEditor/sourceCodeActions.cy.ts b/packages/ui-tests/cypress/e2e/codeEditor/sourceCodeActions.cy.ts
index 832fbeedc..e25f1ef54 100644
--- a/packages/ui-tests/cypress/e2e/codeEditor/sourceCodeActions.cy.ts
+++ b/packages/ui-tests/cypress/e2e/codeEditor/sourceCodeActions.cy.ts
@@ -6,13 +6,13 @@ describe('Test source code editor', () => {
   it('loads the YAML editor and deletes steps, check with visualization', () => {
     cy.uploadFixture('flows/kameletBinding/kafkaSourceSink.yaml');
     cy.openDesignPage();
-    cy.get('[data-id^="json-deserialize-action"]').should('exist');
+    cy.get('[data-id^="Updated integration|json-deserialize-action"]').should('exist');
     cy.openSourceCode();
     cy.editorDeleteLine(19, 5);
 
     // CHECK that the code editor contains the new timer source step
     cy.openDesignPage();
-    cy.checkNodeExist('json-deserialize-action', 0);
+    cy.checkNodeExist('Updated integration|json-deserialize-action', 0);
   });
 
   it('User adds step to the YAML', () => {
@@ -36,7 +36,7 @@ describe('Test source code editor', () => {
     cy.editorDeleteLine(12, 6);
     cy.openDesignPage();
     // CHECK the kafka-sink step was removed
-    cy.checkNodeExist('kafka-sink', 0);
+    cy.checkNodeExist('integration|kafka-sink', 0);
   });
 
   it('User edits step in the YAML', () => {
diff --git a/packages/ui-tests/cypress/e2e/designer/branchingFlows/branchingStepAddition.cy.ts b/packages/ui-tests/cypress/e2e/designer/branchingFlows/branchingStepAddition.cy.ts
index a2c2b80c4..328d2be8d 100644
--- a/packages/ui-tests/cypress/e2e/designer/branchingFlows/branchingStepAddition.cy.ts
+++ b/packages/ui-tests/cypress/e2e/designer/branchingFlows/branchingStepAddition.cy.ts
@@ -62,6 +62,7 @@ describe('Test for Branching actions from the canvas', () => {
 
     cy.checkNodeExist('activemq', 1);
     cy.checkEdgeExists(
+      'eip-action',
       'template.from.steps.1.choice.when.0.steps.1.setHeader',
       'template.from.steps.1.choice.when.0.steps.2.to',
     );
@@ -77,6 +78,7 @@ describe('Test for Branching actions from the canvas', () => {
 
     cy.checkNodeExist('activemq', 1);
     cy.checkEdgeExists(
+      'eip-action',
       'template.from.steps.1.choice.when.0.steps.0.to',
       'template.from.steps.1.choice.when.0.steps.1.to',
     );
@@ -91,6 +93,6 @@ describe('Test for Branching actions from the canvas', () => {
     cy.chooseFromCatalog('component', 'activemq');
 
     cy.checkNodeExist('activemq', 1);
-    cy.checkEdgeExists('template.from.steps.2.to', 'template.from.steps.3.filter');
+    cy.checkEdgeExists('eip-action', 'template.from.steps.2.to', 'template.from.steps.3.filter');
   });
 });
diff --git a/packages/ui-tests/cypress/support/cypress.d.ts b/packages/ui-tests/cypress/support/cypress.d.ts
index e4f264895..4d6d62698 100644
--- a/packages/ui-tests/cypress/support/cypress.d.ts
+++ b/packages/ui-tests/cypress/support/cypress.d.ts
@@ -61,7 +61,7 @@ declare global {
       selectRemoveGroup(groupName: string, nodeIndex?: number): Chainable<JQuery<Element>>;
       performNodeAction(nodeName: string, action: ActionType, nodeIndex?: number): Chainable<JQuery<Element>>;
       checkNodeExist(inputName: string, nodesCount: number): Chainable<JQuery<Element>>;
-      checkEdgeExists(sourceName: string, targetName: string): Chainable<JQuery<Element>>;
+      checkEdgeExists(scope: string, sourceName: string, targetName: string): Chainable<JQuery<Element>>;
       deleteBranch(branchIndex: number): Chainable<JQuery<Element>>;
       selectCamelRouteType(type: string, subType?: string): Chainable<JQuery<Element>>;
       selectRuntimeVersion(type: string): Chainable<JQuery<Element>>;
diff --git a/packages/ui-tests/cypress/support/next-commands/design.ts b/packages/ui-tests/cypress/support/next-commands/design.ts
index ed39aea91..d650d3ed0 100644
--- a/packages/ui-tests/cypress/support/next-commands/design.ts
+++ b/packages/ui-tests/cypress/support/next-commands/design.ts
@@ -105,8 +105,8 @@ Cypress.Commands.add('checkNodeExist', (inputName, nodesCount) => {
   cy.get(`foreignObject[data-nodelabel="${inputName}"]`).should('have.length', nodesCount);
 });
 
-Cypress.Commands.add('checkEdgeExists', (sourceName: string, targetName: string) => {
-  const idPattern = `${sourceName} >>> ${targetName}`;
+Cypress.Commands.add('checkEdgeExists', (scope: string, sourceName: string, targetName: string) => {
+  const idPattern = `${scope}|${sourceName} >>> ${targetName}`;
   // Check if an element with the matching id exists
   cy.get('g').should(($elements) => {
     // Use Cypress commands to check if any element matches the id pattern
diff --git a/packages/ui/src/components/Visualization/Canvas/__snapshots__/flow.service.test.ts.snap b/packages/ui/src/components/Visualization/Canvas/__snapshots__/flow.service.test.ts.snap
index 1a645ca5d..abb5743ba 100644
--- a/packages/ui/src/components/Visualization/Canvas/__snapshots__/flow.service.test.ts.snap
+++ b/packages/ui/src/components/Visualization/Canvas/__snapshots__/flow.service.test.ts.snap
@@ -399,7 +399,7 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a multiple
 [
   {
     "edgeStyle": "solid",
-    "id": "node >>> set-header",
+    "id": "test|node >>> set-header",
     "source": "test|node",
     "target": "test|set-header",
     "type": "edge",
diff --git a/packages/ui/src/components/Visualization/Canvas/flow.service.test.ts b/packages/ui/src/components/Visualization/Canvas/flow.service.test.ts
index c48943215..3af1355e5 100644
--- a/packages/ui/src/components/Visualization/Canvas/flow.service.test.ts
+++ b/packages/ui/src/components/Visualization/Canvas/flow.service.test.ts
@@ -102,5 +102,23 @@ describe('FlowService', () => {
       expect(group.children).toEqual(['test|route.from', 'test|route.from.steps.0.placeholder']);
       expect(group.group).toBeTruthy();
     });
+
+    it('should scope nodes & edges IDs', () => {
+      const routeNode = new CamelRouteVisualEntity({
+        route: { id: 'route-8888', from: { uri: 'timer:clock', steps: [{ to: { uri: 'log' } }] } },
+      }).toVizNode();
+
+      const { nodes, edges } = FlowService.getFlowDiagram('test', routeNode);
+
+      expect(nodes).toHaveLength(3);
+      expect(nodes[0].id).toEqual('test|route.from');
+      expect(nodes[1].id).toEqual('test|route.from.steps.0.to');
+      expect(nodes[2].id).toEqual('test|route');
+
+      expect(edges).toHaveLength(1);
+      expect(edges[0].id).toEqual('test|route.from >>> route.from.steps.0.to');
+      expect(edges[0].source).toEqual('test|route.from');
+      expect(edges[0].target).toEqual('test|route.from.steps.0.to');
+    });
   });
 });
diff --git a/packages/ui/src/components/Visualization/Canvas/flow.service.ts b/packages/ui/src/components/Visualization/Canvas/flow.service.ts
index 5d954cfa1..5e156cbd3 100644
--- a/packages/ui/src/components/Visualization/Canvas/flow.service.ts
+++ b/packages/ui/src/components/Visualization/Canvas/flow.service.ts
@@ -21,6 +21,7 @@ export class FlowService {
       node.parentNode = node.parentNode ? `${scope}|${node.parentNode}` : undefined;
     });
     this.edges.forEach((edge) => {
+      edge.id = `${scope}|${edge.id}`;
       edge.source = `${scope}|${edge.source}`;
       edge.target = `${scope}|${edge.target}`;
     });