diff --git a/packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.test.tsx b/packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.test.tsx
index 81f73fcc2..6fc9a871a 100644
--- a/packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.test.tsx
+++ b/packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.test.tsx
@@ -23,7 +23,6 @@ import {
 import { EntitiesContext, EntitiesProvider } from '../../../../providers/entities.provider';
 import { camelRouteJson, kameletJson } from '../../../../stubs';
 import { getFirstCatalogMap } from '../../../../stubs/test-load-catalog';
-import { ROOT_PATH } from '../../../../utils';
 import { CanvasNode } from '../canvas.models';
 import { FlowService } from '../flow.service';
 import { CanvasForm } from './CanvasForm';
@@ -77,7 +76,7 @@ describe('CanvasForm', () => {
 
   it('should render nothing if no schema is available', () => {
     const vizNode = createVisualizationNode('route', {
-      path: ROOT_PATH,
+      path: CamelRouteVisualEntity.ROOT_PATH,
       entity: new CamelRouteVisualEntity(camelRouteJson),
       isGroup: true,
       processorName: 'route',
@@ -113,7 +112,7 @@ describe('CanvasForm', () => {
     };
 
     const vizNode = createVisualizationNode('route', {
-      path: ROOT_PATH,
+      path: CamelRouteVisualEntity.ROOT_PATH,
       entity: new CamelRouteVisualEntity(camelRouteJson),
       isGroup: true,
       processorName: 'route',
diff --git a/packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.tsx b/packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.tsx
index 1b2c2cdb8..5f28d6e6a 100644
--- a/packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.tsx
+++ b/packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.tsx
@@ -18,7 +18,7 @@ export const CanvasForm: FunctionComponent<CanvasFormProps> = ({ selectedNode, o
   const { visualFlowsApi } = useContext(VisibleFlowsContext)!;
   const flowIdRef = useRef<string | undefined>(undefined);
   const vizNode = selectedNode.data?.vizNode;
-  const title = vizNode?.getTitle();
+  const title = vizNode?.getNodeTitle();
 
   /** Store the flow's initial Id */
   useEffect(() => {
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 95dcdd2b4..15ab708da 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
@@ -49,7 +49,6 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a group wi
               "nextNode": undefined,
               "parentNode": [Circular],
               "previousNode": undefined,
-              "title": "child2",
             },
           ],
           "data": {
@@ -59,10 +58,8 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a group wi
           "nextNode": undefined,
           "parentNode": undefined,
           "previousNode": undefined,
-          "title": "group",
         },
         "previousNode": undefined,
-        "title": "child1",
       },
     },
     "height": 75,
@@ -118,7 +115,6 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a group wi
               "nextNode": undefined,
               "parentNode": [Circular],
               "previousNode": undefined,
-              "title": "child1",
             },
             [Circular],
           ],
@@ -129,10 +125,8 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a group wi
           "nextNode": undefined,
           "parentNode": undefined,
           "previousNode": undefined,
-          "title": "group",
         },
         "previousNode": undefined,
-        "title": "child2",
       },
     },
     "height": 75,
@@ -177,7 +171,6 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a group wi
             "nextNode": undefined,
             "parentNode": [Circular],
             "previousNode": undefined,
-            "title": "child1",
           },
           VisualizationNode {
             "DISABLED_NODE_INTERACTION": {
@@ -196,7 +189,6 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a group wi
             "nextNode": undefined,
             "parentNode": [Circular],
             "previousNode": undefined,
-            "title": "child2",
           },
         ],
         "data": {
@@ -206,7 +198,6 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a group wi
         "nextNode": undefined,
         "parentNode": undefined,
         "previousNode": undefined,
-        "title": "group",
       },
     },
     "group": true,
@@ -296,7 +287,6 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a multiple
                     "nextNode": undefined,
                     "parentNode": [Circular],
                     "previousNode": undefined,
-                    "title": "when-leaf",
                   },
                 ],
                 "data": {},
@@ -304,7 +294,6 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a multiple
                 "nextNode": undefined,
                 "parentNode": [Circular],
                 "previousNode": undefined,
-                "title": "when",
               },
               VisualizationNode {
                 "DISABLED_NODE_INTERACTION": {
@@ -347,7 +336,6 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a multiple
                         "nextNode": undefined,
                         "parentNode": [Circular],
                         "previousNode": undefined,
-                        "title": "log",
                       },
                     ],
                     "data": {},
@@ -355,7 +343,6 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a multiple
                     "nextNode": undefined,
                     "parentNode": [Circular],
                     "previousNode": undefined,
-                    "title": "process",
                   },
                 ],
                 "data": {},
@@ -363,7 +350,6 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a multiple
                 "nextNode": undefined,
                 "parentNode": [Circular],
                 "previousNode": undefined,
-                "title": "otherwise",
               },
             ],
             "data": {},
@@ -385,19 +371,15 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a multiple
               "nextNode": undefined,
               "parentNode": undefined,
               "previousNode": [Circular],
-              "title": "direct",
             },
             "parentNode": undefined,
             "previousNode": [Circular],
-            "title": "choice",
           },
           "parentNode": undefined,
           "previousNode": [Circular],
-          "title": "set-header",
         },
         "parentNode": undefined,
         "previousNode": undefined,
-        "title": "node",
       },
     },
     "height": 75,
@@ -443,7 +425,6 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a simple V
         "nextNode": undefined,
         "parentNode": undefined,
         "previousNode": undefined,
-        "title": "node",
       },
     },
     "height": 75,
@@ -491,7 +472,6 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a two-node
             "nextNode": undefined,
             "parentNode": [Circular],
             "previousNode": undefined,
-            "title": "child",
           },
         ],
         "data": {},
@@ -499,7 +479,6 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a two-node
         "nextNode": undefined,
         "parentNode": undefined,
         "previousNode": undefined,
-        "title": "node",
       },
     },
     "height": 75,
diff --git a/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsList.tsx b/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsList.tsx
index 77479254c..c497c6d89 100644
--- a/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsList.tsx
+++ b/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsList.tsx
@@ -144,7 +144,7 @@ export const FlowsList: FunctionComponent<IFlowsList> = (props) => {
                       "Do you want to delete the '" +
                       flow.toVizNode().getId() +
                       "' " +
-                      flow.toVizNode().getTitle() +
+                      flow.toVizNode().getNodeTitle() +
                       '?',
                     text: 'All steps will be lost.',
                   });
diff --git a/packages/ui/src/components/Visualization/Custom/ContextMenu/ItemDeleteGroup.test.tsx b/packages/ui/src/components/Visualization/Custom/ContextMenu/ItemDeleteGroup.test.tsx
index 8e2cb2fef..e320e48fe 100644
--- a/packages/ui/src/components/Visualization/Custom/ContextMenu/ItemDeleteGroup.test.tsx
+++ b/packages/ui/src/components/Visualization/Custom/ContextMenu/ItemDeleteGroup.test.tsx
@@ -44,7 +44,7 @@ describe('ItemDeleteGroup', () => {
     fireEvent.click(wrapper.getByText('Delete'));
 
     expect(mockDeleteModalContext.actionConfirmation).toHaveBeenCalledWith({
-      title: "Do you want to delete the 'undefined' test?",
+      title: "Do you want to delete the 'undefined' test-1234?",
       text: 'All steps will be lost.',
     });
   });
diff --git a/packages/ui/src/components/Visualization/Custom/hooks/delete-group.hook.tsx b/packages/ui/src/components/Visualization/Custom/hooks/delete-group.hook.tsx
index c86152a2f..806660c56 100644
--- a/packages/ui/src/components/Visualization/Custom/hooks/delete-group.hook.tsx
+++ b/packages/ui/src/components/Visualization/Custom/hooks/delete-group.hook.tsx
@@ -24,7 +24,7 @@ export const useDeleteGroup = (vizNode: IVisualizationNode) => {
     const buttonOptions = modalCustoms.length > 0 ? modalCustoms[0].buttonOptions : undefined;
     /** Open delete confirm modal, get the confirmation  */
     const modalAnswer = await deleteModalContext?.actionConfirmation({
-      title: "Do you want to delete the '" + vizNode.getId() + "' " + vizNode.getTitle() + '?',
+      title: "Do you want to delete the '" + vizNode.getId() + "' " + vizNode.getNodeTitle() + '?',
       text: 'All steps will be lost.',
       additionalModalText,
       buttonOptions,
diff --git a/packages/ui/src/models/visualization/base-visual-entity.ts b/packages/ui/src/models/visualization/base-visual-entity.ts
index f93758c10..675259904 100644
--- a/packages/ui/src/models/visualization/base-visual-entity.ts
+++ b/packages/ui/src/models/visualization/base-visual-entity.ts
@@ -24,6 +24,9 @@ export interface BaseVisualCamelEntity extends BaseCamelEntity {
   /** Given a path, get the component label */
   getNodeLabel: (path?: string, labelType?: NodeLabelType) => string;
 
+  /** Given a path, get the component title from the catalog */
+  getNodeTitle: (path?: string) => string;
+
   /** Given a path, get the component tooltip content */
   getTooltipContent: (path?: string) => string;
 
@@ -83,11 +86,8 @@ export interface IVisualizationNode<T extends IVisualizationNodeData = IVisualiz
   /** This method returns the tooltip content to be used by the canvas nodes */
   getTooltipContent(): string;
 
-  /** This method set the title used by the CanvasForm component */
-  setTitle(title: string): void;
-
   /** This method returns the title used by the CanvasForm component */
-  getTitle(): string;
+  getNodeTitle(): string;
 
   addBaseEntityStep(definedComponent: DefinedComponent, mode: AddStepMode, targetProperty?: string): void;
 
diff --git a/packages/ui/src/models/visualization/flows/__snapshots__/pipe-visual-entity.test.ts.snap b/packages/ui/src/models/visualization/flows/__snapshots__/pipe-visual-entity.test.ts.snap
index 4de6251da..1368d429b 100644
--- a/packages/ui/src/models/visualization/flows/__snapshots__/pipe-visual-entity.test.ts.snap
+++ b/packages/ui/src/models/visualization/flows/__snapshots__/pipe-visual-entity.test.ts.snap
@@ -4,12 +4,12 @@ exports[`Pipe getNodeInteraction should return the correct interaction for the '
 {
   "canBeDisabled": false,
   "canHaveChildren": false,
-  "canHaveNextStep": false,
-  "canHavePreviousStep": false,
+  "canHaveNextStep": true,
+  "canHavePreviousStep": true,
   "canHaveSpecialChildren": false,
-  "canRemoveFlow": true,
-  "canRemoveStep": false,
-  "canReplaceStep": false,
+  "canRemoveFlow": false,
+  "canRemoveStep": true,
+  "canReplaceStep": true,
 }
 `;
 
diff --git a/packages/ui/src/models/visualization/flows/abstract-camel-visual-entity.ts b/packages/ui/src/models/visualization/flows/abstract-camel-visual-entity.ts
index 0e8dc38bc..2aba6cf38 100644
--- a/packages/ui/src/models/visualization/flows/abstract-camel-visual-entity.ts
+++ b/packages/ui/src/models/visualization/flows/abstract-camel-visual-entity.ts
@@ -1,6 +1,6 @@
 import { ProcessorDefinition } from '@kaoto/camel-catalog/types';
 import { SchemaService } from '../../../components/Form/schema.service';
-import { getArrayProperty, getValue, setValue } from '../../../utils';
+import { camelCaseToSpaces, getArrayProperty, getValue, setValue } from '../../../utils';
 import { NodeIconResolver, NodeIconType } from '../../../utils/node-icon-resolver';
 import { DefinedComponent } from '../../camel-catalog-index';
 import { EntityType } from '../../camel/entities';
@@ -56,6 +56,21 @@ export abstract class AbstractCamelVisualEntity<T extends object> implements Bas
     return label;
   }
 
+  getNodeTitle(path?: string): string {
+    if (!path) return '';
+    if (path === this.getRootPath()) {
+      return camelCaseToSpaces(this.getRootPath(), { capitalize: true });
+    }
+
+    const componentModel = getValue(this.entityDef, path);
+
+    const title = CamelComponentSchemaService.getNodeTitle(
+      CamelComponentSchemaService.getCamelComponentLookup(path, componentModel),
+    );
+
+    return title;
+  }
+
   getTooltipContent(path?: string): string {
     if (!path) return '';
     const componentModel = getValue(this.entityDef, path);
diff --git a/packages/ui/src/models/visualization/flows/camel-error-handler-visual-entity.test.ts b/packages/ui/src/models/visualization/flows/camel-error-handler-visual-entity.test.ts
index 4bfc2d2e0..2a81f0365 100644
--- a/packages/ui/src/models/visualization/flows/camel-error-handler-visual-entity.test.ts
+++ b/packages/ui/src/models/visualization/flows/camel-error-handler-visual-entity.test.ts
@@ -174,7 +174,7 @@ describe('CamelErrorHandlerVisualEntity', () => {
     const entity = new CamelErrorHandlerVisualEntity(errorHandlerDef);
     const vizNode = entity.toVizNode();
 
-    expect(vizNode.getTitle()).toEqual('Error Handler');
+    expect(vizNode.getNodeTitle()).toEqual('Error Handler');
   });
 
   it('should serialize the errorHandler definition', () => {
diff --git a/packages/ui/src/models/visualization/flows/camel-error-handler-visual-entity.ts b/packages/ui/src/models/visualization/flows/camel-error-handler-visual-entity.ts
index c476474e5..5272686e7 100644
--- a/packages/ui/src/models/visualization/flows/camel-error-handler-visual-entity.ts
+++ b/packages/ui/src/models/visualization/flows/camel-error-handler-visual-entity.ts
@@ -78,6 +78,10 @@ export class CamelErrorHandlerVisualEntity implements BaseVisualCamelEntity {
     return errorHandlerId;
   }
 
+  getNodeTitle(): string {
+    return 'Error Handler';
+  }
+
   getTooltipContent(): string {
     return 'errorHandler';
   }
@@ -139,7 +143,6 @@ export class CamelErrorHandlerVisualEntity implements BaseVisualCamelEntity {
     errorHandlerGroupNode.data.entity = this;
     errorHandlerGroupNode.data.isGroup = true;
     errorHandlerGroupNode.data.icon = NodeIconResolver.getIcon(this.type, NodeIconType.VisualEntity);
-    errorHandlerGroupNode.setTitle('Error Handler');
 
     return errorHandlerGroupNode;
   }
diff --git a/packages/ui/src/models/visualization/flows/camel-rest-configuration-visual-entity.test.ts b/packages/ui/src/models/visualization/flows/camel-rest-configuration-visual-entity.test.ts
index bfe2758a5..e6c01c0d7 100644
--- a/packages/ui/src/models/visualization/flows/camel-rest-configuration-visual-entity.test.ts
+++ b/packages/ui/src/models/visualization/flows/camel-rest-configuration-visual-entity.test.ts
@@ -206,7 +206,7 @@ describe('CamelRestConfigurationVisualEntity', () => {
       const entity = new CamelRestConfigurationVisualEntity(restConfigurationDef);
       const vizNode = entity.toVizNode();
 
-      expect(vizNode.getTitle()).toEqual('Rest Configuration');
+      expect(vizNode.getNodeTitle()).toEqual('Rest Configuration');
     });
   });
 
diff --git a/packages/ui/src/models/visualization/flows/camel-rest-configuration-visual-entity.ts b/packages/ui/src/models/visualization/flows/camel-rest-configuration-visual-entity.ts
index c484791d8..f70cd2e53 100644
--- a/packages/ui/src/models/visualization/flows/camel-rest-configuration-visual-entity.ts
+++ b/packages/ui/src/models/visualization/flows/camel-rest-configuration-visual-entity.ts
@@ -61,6 +61,10 @@ export class CamelRestConfigurationVisualEntity implements BaseVisualCamelEntity
     return 'restConfiguration';
   }
 
+  getNodeTitle(): string {
+    return 'Rest Configuration';
+  }
+
   getTooltipContent(): string {
     return 'restConfiguration';
   }
@@ -131,7 +135,6 @@ export class CamelRestConfigurationVisualEntity implements BaseVisualCamelEntity
     restConfigurationGroupNode.data.entity = this;
     restConfigurationGroupNode.data.isGroup = true;
     restConfigurationGroupNode.data.icon = NodeIconResolver.getIcon(this.type, NodeIconType.VisualEntity);
-    restConfigurationGroupNode.setTitle('Rest Configuration');
 
     return restConfigurationGroupNode;
   }
diff --git a/packages/ui/src/models/visualization/flows/camel-route-configuration-visual-entity.test.ts b/packages/ui/src/models/visualization/flows/camel-route-configuration-visual-entity.test.ts
index 3b52def53..0aa00ec4d 100644
--- a/packages/ui/src/models/visualization/flows/camel-route-configuration-visual-entity.test.ts
+++ b/packages/ui/src/models/visualization/flows/camel-route-configuration-visual-entity.test.ts
@@ -215,7 +215,7 @@ describe('CamelRouteConfigurationVisualEntity', () => {
       const entity = new CamelRouteConfigurationVisualEntity(routeConfigurationDef);
       const vizNode = entity.toVizNode();
 
-      expect(vizNode.getTitle()).toEqual('Route Configuration');
+      expect(vizNode.getNodeTitle()).toEqual('Route Configuration');
     });
   });
 
diff --git a/packages/ui/src/models/visualization/flows/camel-route-configuration-visual-entity.ts b/packages/ui/src/models/visualization/flows/camel-route-configuration-visual-entity.ts
index bc5603d12..f4fd6745c 100644
--- a/packages/ui/src/models/visualization/flows/camel-route-configuration-visual-entity.ts
+++ b/packages/ui/src/models/visualization/flows/camel-route-configuration-visual-entity.ts
@@ -86,6 +86,14 @@ export class CamelRouteConfigurationVisualEntity
     return super.getTooltipContent(path);
   }
 
+  getNodeLabel(path?: string): string {
+    if (path === this.getRootPath()) {
+      return 'Route Configuration';
+    }
+
+    return super.getNodeLabel(path);
+  }
+
   getComponentSchema(path?: string | undefined): VisualComponentSchema | undefined {
     if (path === this.getRootPath()) {
       const schema = CamelCatalogService.getComponent(CatalogKind.Entity, 'routeConfiguration');
@@ -150,7 +158,6 @@ export class CamelRouteConfigurationVisualEntity
       icon: NodeIconResolver.getIcon(this.type, NodeIconType.VisualEntity),
       processorName: this.getRootPath(),
     });
-    routeConfigurationGroupNode.setTitle('Route Configuration');
 
     CamelComponentSchemaService.getProcessorStepsProperties(this.getRootPath() as keyof ProcessorDefinition).forEach(
       (stepsProperty) => {
diff --git a/packages/ui/src/models/visualization/flows/camel-route-visual-entity.test.ts b/packages/ui/src/models/visualization/flows/camel-route-visual-entity.test.ts
index e6f9bbb7f..b9a9dd9c6 100644
--- a/packages/ui/src/models/visualization/flows/camel-route-visual-entity.test.ts
+++ b/packages/ui/src/models/visualization/flows/camel-route-visual-entity.test.ts
@@ -2,7 +2,6 @@ import { ProcessorDefinition, RouteDefinition } from '@kaoto/camel-catalog/types
 import { cloneDeep } from 'lodash';
 import { camelFromJson } from '../../../stubs/camel-from';
 import { camelRouteJson } from '../../../stubs/camel-route';
-import { ROOT_PATH } from '../../../utils';
 import { EntityType } from '../../camel/entities/base-entity';
 import { KaotoSchemaDefinition } from '../../kaoto-schema';
 import { NodeLabelType } from '../../settings/settings.model';
@@ -197,7 +196,7 @@ describe('Camel Route', () => {
   });
 
   describe('toVizNode', () => {
-    it(`should return the group viz node and set the initial path to '${ROOT_PATH}'`, () => {
+    it(`should return the group viz node and set the initial path to '${CamelRouteVisualEntity.ROOT_PATH}'`, () => {
       const vizNode = camelEntity.toVizNode();
 
       expect(vizNode).toBeDefined();
diff --git a/packages/ui/src/models/visualization/flows/kamelet-visual-entity.test.ts b/packages/ui/src/models/visualization/flows/kamelet-visual-entity.test.ts
index aad0444cd..8a2043600 100644
--- a/packages/ui/src/models/visualization/flows/kamelet-visual-entity.test.ts
+++ b/packages/ui/src/models/visualization/flows/kamelet-visual-entity.test.ts
@@ -161,7 +161,7 @@ describe('KameletVisualEntity', () => {
       const kamelet = new KameletVisualEntity(kameletDef);
       const vizNode = kamelet.toVizNode();
 
-      expect(vizNode.getTitle()).toEqual('Kamelet');
+      expect(vizNode.getNodeTitle()).toEqual('Kamelet');
     });
   });
 });
diff --git a/packages/ui/src/models/visualization/flows/kamelet-visual-entity.ts b/packages/ui/src/models/visualization/flows/kamelet-visual-entity.ts
index bcec30360..702c091d9 100644
--- a/packages/ui/src/models/visualization/flows/kamelet-visual-entity.ts
+++ b/packages/ui/src/models/visualization/flows/kamelet-visual-entity.ts
@@ -6,11 +6,11 @@ import { EntityType } from '../../camel/entities';
 import { CatalogKind } from '../../catalog-kind';
 import { IKameletDefinition } from '../../kamelets-catalog';
 import { KaotoSchemaDefinition } from '../../kaoto-schema';
-import { AddStepMode, IVisualizationNode, IVisualizationNodeData, VisualComponentSchema } from '../base-visual-entity';
+import { NodeLabelType } from '../../settings';
+import { AddStepMode, IVisualizationNodeData, VisualComponentSchema } from '../base-visual-entity';
 import { AbstractCamelVisualEntity } from './abstract-camel-visual-entity';
 import { CamelCatalogService } from './camel-catalog.service';
 import { CamelComponentDefaultService } from './support/camel-component-default.service';
-import { NodeLabelType } from '../../settings';
 
 export class KameletVisualEntity extends AbstractCamelVisualEntity<{ id: string; template: { from: FromDefinition } }> {
   id: string;
@@ -53,6 +53,14 @@ export class KameletVisualEntity extends AbstractCamelVisualEntity<{ id: string;
     return super.getNodeLabel(path, labelType);
   }
 
+  getNodeTitle(path?: string): string {
+    if (path === this.getRootPath()) {
+      return 'Kamelet';
+    }
+
+    return super.getNodeTitle(path);
+  }
+
   toJSON(): { from: FromDefinition } {
     return { from: this.entityDef.template.from };
   }
@@ -114,13 +122,6 @@ export class KameletVisualEntity extends AbstractCamelVisualEntity<{ id: string;
     super.removeStep(path);
   }
 
-  toVizNode(): IVisualizationNode {
-    const vizNode = super.toVizNode();
-    vizNode.setTitle('Kamelet');
-
-    return vizNode;
-  }
-
   protected getRootUri(): string | undefined {
     return this.kamelet.spec.template.from?.uri;
   }
diff --git a/packages/ui/src/models/visualization/flows/nodes/mappers/datamapper-node-mapper.ts b/packages/ui/src/models/visualization/flows/nodes/mappers/datamapper-node-mapper.ts
index 334a75187..eb19525df 100644
--- a/packages/ui/src/models/visualization/flows/nodes/mappers/datamapper-node-mapper.ts
+++ b/packages/ui/src/models/visualization/flows/nodes/mappers/datamapper-node-mapper.ts
@@ -21,10 +21,7 @@ export class DataMapperNodeMapper extends BaseNodeMapper {
       isGroup: false,
     };
 
-    const vizNode = createVisualizationNode(processorName, data);
-    vizNode.setTitle('Kaoto data mapper');
-
-    return vizNode;
+    return createVisualizationNode(processorName, data);
   }
 
   static isDataMapperNode(stepDefinition: Step): boolean {
diff --git a/packages/ui/src/models/visualization/flows/pipe-visual-entity.test.ts b/packages/ui/src/models/visualization/flows/pipe-visual-entity.test.ts
index 64a4b6d0f..7b0bcfab0 100644
--- a/packages/ui/src/models/visualization/flows/pipe-visual-entity.test.ts
+++ b/packages/ui/src/models/visualization/flows/pipe-visual-entity.test.ts
@@ -165,7 +165,7 @@ describe('Pipe', () => {
       const vizNode = pipeVisualEntity.toVizNode();
 
       expect(vizNode).toBeDefined();
-      expect(vizNode.data.path).toEqual('#');
+      expect(vizNode.data.path).toEqual(PipeVisualEntity.ROOT_PATH);
     });
 
     it('should use the uri as the node label', () => {
@@ -177,19 +177,19 @@ describe('Pipe', () => {
     it('should set the title to `Pipe`', () => {
       const vizNode = pipeVisualEntity.toVizNode();
 
-      expect(vizNode.getTitle()).toEqual('Pipe');
+      expect(vizNode.getNodeTitle()).toEqual('Pipe');
     });
 
-    it('should set the title to children nodes', () => {
+    it('should get the titles from children nodes', () => {
       const vizNode = pipeVisualEntity.toVizNode();
 
       const sourceNode = vizNode.getChildren()![0];
       const stepNode = vizNode.getChildren()![1];
       const sinkNode = vizNode.getChildren()![2];
 
-      expect(sourceNode.getTitle()).toEqual('webhook-source');
-      expect(stepNode.getTitle()).toEqual('delay-action');
-      expect(sinkNode.getTitle()).toEqual('log-sink');
+      expect(sourceNode.getNodeTitle()).toEqual('Webhook Source');
+      expect(stepNode.getNodeTitle()).toEqual('Delay Action');
+      expect(sinkNode.getNodeTitle()).toEqual('Log Sink');
     });
 
     it('should set the node labels when the uri is not available', () => {
@@ -205,7 +205,7 @@ describe('Pipe', () => {
     it('should populate the viz node chain with the steps', () => {
       const vizNode = pipeVisualEntity.toVizNode();
 
-      expect(vizNode.data.path).toEqual('#');
+      expect(vizNode.data.path).toEqual(PipeVisualEntity.ROOT_PATH);
       expect(vizNode.getNodeLabel()).toEqual('webhook-binding');
       expect(vizNode.getPreviousNode()).toBeUndefined();
       expect(vizNode.getNextNode()).toBeUndefined();
diff --git a/packages/ui/src/models/visualization/flows/pipe-visual-entity.ts b/packages/ui/src/models/visualization/flows/pipe-visual-entity.ts
index 29848aa49..3a02bd7bb 100644
--- a/packages/ui/src/models/visualization/flows/pipe-visual-entity.ts
+++ b/packages/ui/src/models/visualization/flows/pipe-visual-entity.ts
@@ -6,7 +6,6 @@ import {
   getArrayProperty,
   NodeIconResolver,
   NodeIconType,
-  ROOT_PATH,
   getCustomSchemaFromPipe,
   updatePipeFromCustomSchema,
   setValue,
@@ -33,6 +32,7 @@ import { CatalogKind } from '../../catalog-kind';
 export class PipeVisualEntity implements BaseVisualCamelEntity {
   id: string;
   readonly type: EntityType = EntityType.Pipe;
+  static readonly ROOT_PATH = 'pipe';
 
   constructor(public pipe: Pipe) {
     this.id = (pipe.metadata?.name as string) ?? getCamelRandomId('pipe');
@@ -47,7 +47,7 @@ export class PipeVisualEntity implements BaseVisualCamelEntity {
   }
 
   getRootPath(): string {
-    return ROOT_PATH;
+    return PipeVisualEntity.ROOT_PATH;
   }
 
   /** Internal API methods */
@@ -71,6 +71,17 @@ export class PipeVisualEntity implements BaseVisualCamelEntity {
     return KameletSchemaService.getNodeLabel(stepModel, path);
   }
 
+  getNodeTitle(path?: string): string {
+    if (!path) return '';
+
+    if (path === this.getRootPath()) {
+      return 'Pipe';
+    }
+
+    const stepModel = get(this.pipe.spec, path) as PipeStep;
+    return KameletSchemaService.getNodeTitle(stepModel);
+  }
+
   getTooltipContent(path?: string): string {
     if (!path) return '';
 
@@ -221,7 +232,6 @@ export class PipeVisualEntity implements BaseVisualCamelEntity {
     const stepNodes = this.getVizNodesFromSteps(this.pipe.spec!.steps);
     const sinkNode = this.getVizNodeFromStep(this.pipe.spec!.sink, 'sink');
 
-    pipeGroupNode.setTitle('Pipe');
     pipeGroupNode.addChild(sourceNode);
     stepNodes.forEach((stepNode) => pipeGroupNode.addChild(stepNode));
     pipeGroupNode.addChild(sinkNode);
@@ -264,10 +274,7 @@ export class PipeVisualEntity implements BaseVisualCamelEntity {
       icon,
     };
 
-    const vizNode = createVisualizationNode(step?.ref?.name ?? path, data);
-    vizNode.setTitle(kameletDefinition?.metadata.name ?? '');
-
-    return vizNode;
+    return createVisualizationNode(step?.ref?.name ?? path, data);
   }
 
   private getVizNodesFromSteps(steps: PipeStep[] = []): IVisualizationNode[] {
diff --git a/packages/ui/src/models/visualization/flows/support/camel-component-schema.service.ts b/packages/ui/src/models/visualization/flows/support/camel-component-schema.service.ts
index 5edebd8ae..815d19c39 100644
--- a/packages/ui/src/models/visualization/flows/support/camel-component-schema.service.ts
+++ b/packages/ui/src/models/visualization/flows/support/camel-component-schema.service.ts
@@ -8,7 +8,6 @@ import {
   isDataMapperNode,
   isDefined,
 } from '../../../../utils';
-import { ICamelComponentDefinition } from '../../../camel-components-catalog';
 import { CatalogKind } from '../../../catalog-kind';
 import { IKameletDefinition } from '../../../kamelets-catalog';
 import { KaotoSchemaDefinition } from '../../../kaoto-schema';
@@ -115,15 +114,30 @@ export class CamelComponentSchemaService {
     }
   }
 
-  static getTooltipContent(camelElementLookup: ICamelElementLookupResult): string {
+  static getNodeTitle(camelElementLookup: ICamelElementLookupResult): string {
     if (camelElementLookup.componentName !== undefined) {
       const catalogLookup = CamelCatalogService.getCatalogLookup(camelElementLookup.componentName);
       if (catalogLookup.catalogKind === CatalogKind.Component) {
+        return catalogLookup.definition?.component.title ?? camelElementLookup.componentName;
+      }
+
+      if (catalogLookup.catalogKind === CatalogKind.Kamelet) {
         return (
-          (catalogLookup.definition as unknown as ICamelComponentDefinition)?.component.description ??
+          (catalogLookup.definition as unknown as IKameletDefinition)?.spec.definition.title ??
           camelElementLookup.componentName
         );
       }
+    }
+
+    return camelElementLookup.processorName;
+  }
+
+  static getTooltipContent(camelElementLookup: ICamelElementLookupResult): string {
+    if (camelElementLookup.componentName !== undefined) {
+      const catalogLookup = CamelCatalogService.getCatalogLookup(camelElementLookup.componentName);
+      if (catalogLookup.catalogKind === CatalogKind.Component) {
+        return catalogLookup.definition?.component.description ?? camelElementLookup.componentName;
+      }
 
       if (catalogLookup.catalogKind === CatalogKind.Kamelet) {
         return (
diff --git a/packages/ui/src/models/visualization/flows/support/kamelet-schema.service.ts b/packages/ui/src/models/visualization/flows/support/kamelet-schema.service.ts
index de29cf2ce..db0c29287 100644
--- a/packages/ui/src/models/visualization/flows/support/kamelet-schema.service.ts
+++ b/packages/ui/src/models/visualization/flows/support/kamelet-schema.service.ts
@@ -37,6 +37,12 @@ export class KameletSchemaService {
     return '';
   }
 
+  static getNodeTitle(step?: PipeStep): string {
+    const kameletDefinition = this.getKameletDefinition(step);
+
+    return kameletDefinition?.spec.definition.title ?? step?.ref?.name ?? '';
+  }
+
   static getTooltipContent(step: PipeStep, path: string): string {
     const schema = this.getKameletDefinition(step)?.propertiesSchema;
     if (schema?.description !== undefined) {
diff --git a/packages/ui/src/models/visualization/visualization-node.test.ts b/packages/ui/src/models/visualization/visualization-node.test.ts
index 8dfe649c2..bdf2e47a7 100644
--- a/packages/ui/src/models/visualization/visualization-node.test.ts
+++ b/packages/ui/src/models/visualization/visualization-node.test.ts
@@ -21,7 +21,7 @@ describe('VisualizationNode', () => {
   });
 
   it('should create a node and set the ID as the title', () => {
-    expect(node.getTitle()).toEqual('test');
+    expect(node.getNodeTitle()).toEqual('test-1234');
   });
 
   it('should return the base entity ID', () => {
diff --git a/packages/ui/src/models/visualization/visualization-node.ts b/packages/ui/src/models/visualization/visualization-node.ts
index 09031a174..9855250fe 100644
--- a/packages/ui/src/models/visualization/visualization-node.ts
+++ b/packages/ui/src/models/visualization/visualization-node.ts
@@ -15,10 +15,7 @@ export const createVisualizationNode = <T extends IVisualizationNodeData = IVisu
   id: string,
   data: T,
 ): IVisualizationNode<T> => {
-  const vizNode = new VisualizationNode(getCamelRandomId(id), data);
-  vizNode.setTitle(id);
-
-  return vizNode;
+  return new VisualizationNode(getCamelRandomId(id), data);
 };
 
 /**
@@ -27,7 +24,6 @@ export const createVisualizationNode = <T extends IVisualizationNodeData = IVisu
  * It shouldn't be used directly, but rather through the IVisualizationNode interface.
  */
 class VisualizationNode<T extends IVisualizationNodeData = IVisualizationNodeData> implements IVisualizationNode<T> {
-  private title = '';
   private parentNode: IVisualizationNode | undefined = undefined;
   private previousNode: IVisualizationNode | undefined = undefined;
   private nextNode: IVisualizationNode | undefined = undefined;
@@ -51,12 +47,8 @@ class VisualizationNode<T extends IVisualizationNodeData = IVisualizationNodeDat
     return this.getBaseEntity()?.getTooltipContent(this.data.path) ?? this.id;
   }
 
-  setTitle(title: string): void {
-    this.title = title;
-  }
-
-  getTitle(): string {
-    return this.title;
+  getNodeTitle(): string {
+    return this.getBaseEntity()?.getNodeTitle(this.data.path) ?? this.id;
   }
 
   addBaseEntityStep(definition: DefinedComponent, mode: AddStepMode): void {
diff --git a/packages/ui/src/tests/__snapshots__/nodes-edges.test.ts.snap b/packages/ui/src/tests/__snapshots__/nodes-edges.test.ts.snap
index b49630a8e..35916fee9 100644
--- a/packages/ui/src/tests/__snapshots__/nodes-edges.test.ts.snap
+++ b/packages/ui/src/tests/__snapshots__/nodes-edges.test.ts.snap
@@ -70,7 +70,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                   "nextNode": undefined,
                   "parentNode": [Circular],
                   "previousNode": undefined,
-                  "title": "setHeader",
                 },
               ],
               "data": {
@@ -83,7 +82,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
               "nextNode": undefined,
               "parentNode": [Circular],
               "previousNode": undefined,
-              "title": "when",
             },
             VisualizationNode {
               "DISABLED_NODE_INTERACTION": {
@@ -119,7 +117,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                   "nextNode": undefined,
                   "parentNode": [Circular],
                   "previousNode": undefined,
-                  "title": "log",
                 },
               ],
               "data": {
@@ -132,7 +129,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
               "nextNode": undefined,
               "parentNode": [Circular],
               "previousNode": undefined,
-              "title": "otherwise",
             },
           ],
           "data": {
@@ -246,10 +242,8 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
               "nextNode": undefined,
               "parentNode": undefined,
               "previousNode": undefined,
-              "title": "route",
             },
             "previousNode": [Circular],
-            "title": "sql",
           },
           "parentNode": VisualizationNode {
             "DISABLED_NODE_INTERACTION": {
@@ -287,7 +281,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "nextNode": undefined,
                 "parentNode": [Circular],
                 "previousNode": [Circular],
-                "title": "sql",
               },
             ],
             "data": {
@@ -358,10 +351,8 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
             "nextNode": undefined,
             "parentNode": undefined,
             "previousNode": undefined,
-            "title": "route",
           },
           "previousNode": [Circular],
-          "title": "choice",
         },
         "parentNode": VisualizationNode {
           "DISABLED_NODE_INTERACTION": {
@@ -422,7 +413,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                       "nextNode": undefined,
                       "parentNode": [Circular],
                       "previousNode": undefined,
-                      "title": "setHeader",
                     },
                   ],
                   "data": {
@@ -435,7 +425,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                   "nextNode": undefined,
                   "parentNode": [Circular],
                   "previousNode": undefined,
-                  "title": "when",
                 },
                 VisualizationNode {
                   "DISABLED_NODE_INTERACTION": {
@@ -471,7 +460,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                       "nextNode": undefined,
                       "parentNode": [Circular],
                       "previousNode": undefined,
-                      "title": "log",
                     },
                   ],
                   "data": {
@@ -484,7 +472,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                   "nextNode": undefined,
                   "parentNode": [Circular],
                   "previousNode": undefined,
-                  "title": "otherwise",
                 },
               ],
               "data": {
@@ -516,11 +503,9 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "nextNode": undefined,
                 "parentNode": [Circular],
                 "previousNode": [Circular],
-                "title": "sql",
               },
               "parentNode": [Circular],
               "previousNode": [Circular],
-              "title": "choice",
             },
             VisualizationNode {
               "DISABLED_NODE_INTERACTION": {
@@ -589,7 +574,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                         "nextNode": undefined,
                         "parentNode": [Circular],
                         "previousNode": undefined,
-                        "title": "setHeader",
                       },
                     ],
                     "data": {
@@ -602,7 +586,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                     "nextNode": undefined,
                     "parentNode": [Circular],
                     "previousNode": undefined,
-                    "title": "when",
                   },
                   VisualizationNode {
                     "DISABLED_NODE_INTERACTION": {
@@ -638,7 +621,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                         "nextNode": undefined,
                         "parentNode": [Circular],
                         "previousNode": undefined,
-                        "title": "log",
                       },
                     ],
                     "data": {
@@ -651,7 +633,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                     "nextNode": undefined,
                     "parentNode": [Circular],
                     "previousNode": undefined,
-                    "title": "otherwise",
                   },
                 ],
                 "data": {
@@ -664,9 +645,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "nextNode": [Circular],
                 "parentNode": [Circular],
                 "previousNode": [Circular],
-                "title": "choice",
               },
-              "title": "sql",
             },
           ],
           "data": {
@@ -737,10 +716,8 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
           "nextNode": undefined,
           "parentNode": undefined,
           "previousNode": undefined,
-          "title": "route",
         },
         "previousNode": undefined,
-        "title": "timer",
       },
     },
     "height": 75,
@@ -841,7 +818,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                     "nextNode": undefined,
                     "parentNode": [Circular],
                     "previousNode": undefined,
-                    "title": "log",
                   },
                 ],
                 "data": {
@@ -854,7 +830,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "nextNode": undefined,
                 "parentNode": [Circular],
                 "previousNode": undefined,
-                "title": "otherwise",
               },
             ],
             "data": {
@@ -919,7 +894,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                     "nextNode": [Circular],
                     "parentNode": [Circular],
                     "previousNode": undefined,
-                    "title": "timer",
                   },
                   [Circular],
                   [Circular],
@@ -992,10 +966,8 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "nextNode": undefined,
                 "parentNode": undefined,
                 "previousNode": undefined,
-                "title": "route",
               },
               "previousNode": [Circular],
-              "title": "sql",
             },
             "parentNode": VisualizationNode {
               "DISABLED_NODE_INTERACTION": {
@@ -1032,7 +1004,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                   "nextNode": [Circular],
                   "parentNode": [Circular],
                   "previousNode": undefined,
-                  "title": "timer",
                 },
                 [Circular],
                 VisualizationNode {
@@ -1057,7 +1028,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                   "nextNode": undefined,
                   "parentNode": [Circular],
                   "previousNode": [Circular],
-                  "title": "sql",
                 },
               ],
               "data": {
@@ -1128,7 +1098,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
               "nextNode": undefined,
               "parentNode": undefined,
               "previousNode": undefined,
-              "title": "route",
             },
             "previousNode": VisualizationNode {
               "DISABLED_NODE_INTERACTION": {
@@ -1187,7 +1156,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                     "nextNode": undefined,
                     "parentNode": [Circular],
                     "previousNode": [Circular],
-                    "title": "sql",
                   },
                 ],
                 "data": {
@@ -1258,18 +1226,13 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "nextNode": undefined,
                 "parentNode": undefined,
                 "previousNode": undefined,
-                "title": "route",
               },
               "previousNode": undefined,
-              "title": "timer",
             },
-            "title": "choice",
           },
           "previousNode": undefined,
-          "title": "when",
         },
         "previousNode": undefined,
-        "title": "setHeader",
       },
     },
     "height": 75,
@@ -1318,7 +1281,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
             "nextNode": undefined,
             "parentNode": [Circular],
             "previousNode": undefined,
-            "title": "setHeader",
           },
         ],
         "data": {
@@ -1376,7 +1338,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                   "nextNode": undefined,
                   "parentNode": [Circular],
                   "previousNode": undefined,
-                  "title": "log",
                 },
               ],
               "data": {
@@ -1389,7 +1350,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
               "nextNode": undefined,
               "parentNode": [Circular],
               "previousNode": undefined,
-              "title": "otherwise",
             },
           ],
           "data": {
@@ -1454,7 +1414,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                   "nextNode": [Circular],
                   "parentNode": [Circular],
                   "previousNode": undefined,
-                  "title": "timer",
                 },
                 [Circular],
                 [Circular],
@@ -1527,10 +1486,8 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
               "nextNode": undefined,
               "parentNode": undefined,
               "previousNode": undefined,
-              "title": "route",
             },
             "previousNode": [Circular],
-            "title": "sql",
           },
           "parentNode": VisualizationNode {
             "DISABLED_NODE_INTERACTION": {
@@ -1567,7 +1524,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "nextNode": [Circular],
                 "parentNode": [Circular],
                 "previousNode": undefined,
-                "title": "timer",
               },
               [Circular],
               VisualizationNode {
@@ -1592,7 +1548,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "nextNode": undefined,
                 "parentNode": [Circular],
                 "previousNode": [Circular],
-                "title": "sql",
               },
             ],
             "data": {
@@ -1663,7 +1618,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
             "nextNode": undefined,
             "parentNode": undefined,
             "previousNode": undefined,
-            "title": "route",
           },
           "previousNode": VisualizationNode {
             "DISABLED_NODE_INTERACTION": {
@@ -1722,7 +1676,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                   "nextNode": undefined,
                   "parentNode": [Circular],
                   "previousNode": [Circular],
-                  "title": "sql",
                 },
               ],
               "data": {
@@ -1793,15 +1746,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
               "nextNode": undefined,
               "parentNode": undefined,
               "previousNode": undefined,
-              "title": "route",
             },
             "previousNode": undefined,
-            "title": "timer",
           },
-          "title": "choice",
         },
         "previousNode": undefined,
-        "title": "when",
       },
     },
     "group": true,
@@ -1903,7 +1852,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                     "nextNode": undefined,
                     "parentNode": [Circular],
                     "previousNode": undefined,
-                    "title": "setHeader",
                   },
                 ],
                 "data": {
@@ -1916,7 +1864,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "nextNode": undefined,
                 "parentNode": [Circular],
                 "previousNode": undefined,
-                "title": "when",
               },
               [Circular],
             ],
@@ -1982,7 +1929,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                     "nextNode": [Circular],
                     "parentNode": [Circular],
                     "previousNode": undefined,
-                    "title": "timer",
                   },
                   [Circular],
                   [Circular],
@@ -2055,10 +2001,8 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "nextNode": undefined,
                 "parentNode": undefined,
                 "previousNode": undefined,
-                "title": "route",
               },
               "previousNode": [Circular],
-              "title": "sql",
             },
             "parentNode": VisualizationNode {
               "DISABLED_NODE_INTERACTION": {
@@ -2095,7 +2039,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                   "nextNode": [Circular],
                   "parentNode": [Circular],
                   "previousNode": undefined,
-                  "title": "timer",
                 },
                 [Circular],
                 VisualizationNode {
@@ -2120,7 +2063,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                   "nextNode": undefined,
                   "parentNode": [Circular],
                   "previousNode": [Circular],
-                  "title": "sql",
                 },
               ],
               "data": {
@@ -2191,7 +2133,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
               "nextNode": undefined,
               "parentNode": undefined,
               "previousNode": undefined,
-              "title": "route",
             },
             "previousNode": VisualizationNode {
               "DISABLED_NODE_INTERACTION": {
@@ -2250,7 +2191,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                     "nextNode": undefined,
                     "parentNode": [Circular],
                     "previousNode": [Circular],
-                    "title": "sql",
                   },
                 ],
                 "data": {
@@ -2321,18 +2261,13 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "nextNode": undefined,
                 "parentNode": undefined,
                 "previousNode": undefined,
-                "title": "route",
               },
               "previousNode": undefined,
-              "title": "timer",
             },
-            "title": "choice",
           },
           "previousNode": undefined,
-          "title": "otherwise",
         },
         "previousNode": undefined,
-        "title": "log",
       },
     },
     "height": 75,
@@ -2381,7 +2316,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
             "nextNode": undefined,
             "parentNode": [Circular],
             "previousNode": undefined,
-            "title": "log",
           },
         ],
         "data": {
@@ -2438,7 +2372,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                   "nextNode": undefined,
                   "parentNode": [Circular],
                   "previousNode": undefined,
-                  "title": "setHeader",
                 },
               ],
               "data": {
@@ -2451,7 +2384,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
               "nextNode": undefined,
               "parentNode": [Circular],
               "previousNode": undefined,
-              "title": "when",
             },
             [Circular],
           ],
@@ -2517,7 +2449,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                   "nextNode": [Circular],
                   "parentNode": [Circular],
                   "previousNode": undefined,
-                  "title": "timer",
                 },
                 [Circular],
                 [Circular],
@@ -2590,10 +2521,8 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
               "nextNode": undefined,
               "parentNode": undefined,
               "previousNode": undefined,
-              "title": "route",
             },
             "previousNode": [Circular],
-            "title": "sql",
           },
           "parentNode": VisualizationNode {
             "DISABLED_NODE_INTERACTION": {
@@ -2630,7 +2559,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "nextNode": [Circular],
                 "parentNode": [Circular],
                 "previousNode": undefined,
-                "title": "timer",
               },
               [Circular],
               VisualizationNode {
@@ -2655,7 +2583,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "nextNode": undefined,
                 "parentNode": [Circular],
                 "previousNode": [Circular],
-                "title": "sql",
               },
             ],
             "data": {
@@ -2726,7 +2653,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
             "nextNode": undefined,
             "parentNode": undefined,
             "previousNode": undefined,
-            "title": "route",
           },
           "previousNode": VisualizationNode {
             "DISABLED_NODE_INTERACTION": {
@@ -2785,7 +2711,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                   "nextNode": undefined,
                   "parentNode": [Circular],
                   "previousNode": [Circular],
-                  "title": "sql",
                 },
               ],
               "data": {
@@ -2856,15 +2781,11 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
               "nextNode": undefined,
               "parentNode": undefined,
               "previousNode": undefined,
-              "title": "route",
             },
             "previousNode": undefined,
-            "title": "timer",
           },
-          "title": "choice",
         },
         "previousNode": undefined,
-        "title": "otherwise",
       },
     },
     "group": true,
@@ -2928,7 +2849,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "nextNode": undefined,
                 "parentNode": [Circular],
                 "previousNode": undefined,
-                "title": "setHeader",
               },
             ],
             "data": {
@@ -2941,7 +2861,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
             "nextNode": undefined,
             "parentNode": [Circular],
             "previousNode": undefined,
-            "title": "when",
           },
           VisualizationNode {
             "DISABLED_NODE_INTERACTION": {
@@ -2977,7 +2896,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "nextNode": undefined,
                 "parentNode": [Circular],
                 "previousNode": undefined,
-                "title": "log",
               },
             ],
             "data": {
@@ -2990,7 +2908,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
             "nextNode": undefined,
             "parentNode": [Circular],
             "previousNode": undefined,
-            "title": "otherwise",
           },
         ],
         "data": {
@@ -3055,7 +2972,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "nextNode": [Circular],
                 "parentNode": [Circular],
                 "previousNode": undefined,
-                "title": "timer",
               },
               [Circular],
               [Circular],
@@ -3128,10 +3044,8 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
             "nextNode": undefined,
             "parentNode": undefined,
             "previousNode": undefined,
-            "title": "route",
           },
           "previousNode": [Circular],
-          "title": "sql",
         },
         "parentNode": VisualizationNode {
           "DISABLED_NODE_INTERACTION": {
@@ -3168,7 +3082,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
               "nextNode": [Circular],
               "parentNode": [Circular],
               "previousNode": undefined,
-              "title": "timer",
             },
             [Circular],
             VisualizationNode {
@@ -3193,7 +3106,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
               "nextNode": undefined,
               "parentNode": [Circular],
               "previousNode": [Circular],
-              "title": "sql",
             },
           ],
           "data": {
@@ -3264,7 +3176,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
           "nextNode": undefined,
           "parentNode": undefined,
           "previousNode": undefined,
-          "title": "route",
         },
         "previousNode": VisualizationNode {
           "DISABLED_NODE_INTERACTION": {
@@ -3323,7 +3234,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "nextNode": undefined,
                 "parentNode": [Circular],
                 "previousNode": [Circular],
-                "title": "sql",
               },
             ],
             "data": {
@@ -3394,12 +3304,9 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
             "nextNode": undefined,
             "parentNode": undefined,
             "previousNode": undefined,
-            "title": "route",
           },
           "previousNode": undefined,
-          "title": "timer",
         },
-        "title": "choice",
       },
     },
     "group": true,
@@ -3511,7 +3418,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                         "nextNode": undefined,
                         "parentNode": [Circular],
                         "previousNode": undefined,
-                        "title": "setHeader",
                       },
                     ],
                     "data": {
@@ -3524,7 +3430,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                     "nextNode": undefined,
                     "parentNode": [Circular],
                     "previousNode": undefined,
-                    "title": "when",
                   },
                   VisualizationNode {
                     "DISABLED_NODE_INTERACTION": {
@@ -3560,7 +3465,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                         "nextNode": undefined,
                         "parentNode": [Circular],
                         "previousNode": undefined,
-                        "title": "log",
                       },
                     ],
                     "data": {
@@ -3573,7 +3477,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                     "nextNode": undefined,
                     "parentNode": [Circular],
                     "previousNode": undefined,
-                    "title": "otherwise",
                   },
                 ],
                 "data": {
@@ -3586,11 +3489,9 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "nextNode": [Circular],
                 "parentNode": [Circular],
                 "previousNode": [Circular],
-                "title": "choice",
               },
               "parentNode": [Circular],
               "previousNode": undefined,
-              "title": "timer",
             },
             VisualizationNode {
               "DISABLED_NODE_INTERACTION": {
@@ -3638,7 +3539,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                       "nextNode": undefined,
                       "parentNode": [Circular],
                       "previousNode": undefined,
-                      "title": "setHeader",
                     },
                   ],
                   "data": {
@@ -3651,7 +3551,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                   "nextNode": undefined,
                   "parentNode": [Circular],
                   "previousNode": undefined,
-                  "title": "when",
                 },
                 VisualizationNode {
                   "DISABLED_NODE_INTERACTION": {
@@ -3687,7 +3586,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                       "nextNode": undefined,
                       "parentNode": [Circular],
                       "previousNode": undefined,
-                      "title": "log",
                     },
                   ],
                   "data": {
@@ -3700,7 +3598,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                   "nextNode": undefined,
                   "parentNode": [Circular],
                   "previousNode": undefined,
-                  "title": "otherwise",
                 },
               ],
               "data": {
@@ -3735,9 +3632,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "nextNode": [Circular],
                 "parentNode": [Circular],
                 "previousNode": undefined,
-                "title": "timer",
               },
-              "title": "choice",
             },
             [Circular],
           ],
@@ -3809,7 +3704,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
           "nextNode": undefined,
           "parentNode": undefined,
           "previousNode": undefined,
-          "title": "route",
         },
         "previousNode": VisualizationNode {
           "DISABLED_NODE_INTERACTION": {
@@ -3857,7 +3751,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                   "nextNode": undefined,
                   "parentNode": [Circular],
                   "previousNode": undefined,
-                  "title": "setHeader",
                 },
               ],
               "data": {
@@ -3870,7 +3763,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
               "nextNode": undefined,
               "parentNode": [Circular],
               "previousNode": undefined,
-              "title": "when",
             },
             VisualizationNode {
               "DISABLED_NODE_INTERACTION": {
@@ -3906,7 +3798,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                   "nextNode": undefined,
                   "parentNode": [Circular],
                   "previousNode": undefined,
-                  "title": "log",
                 },
               ],
               "data": {
@@ -3919,7 +3810,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
               "nextNode": undefined,
               "parentNode": [Circular],
               "previousNode": undefined,
-              "title": "otherwise",
             },
           ],
           "data": {
@@ -3965,7 +3855,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "nextNode": [Circular],
                 "parentNode": [Circular],
                 "previousNode": undefined,
-                "title": "timer",
               },
               [Circular],
               [Circular],
@@ -4038,7 +3927,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
             "nextNode": undefined,
             "parentNode": undefined,
             "previousNode": undefined,
-            "title": "route",
           },
           "previousNode": VisualizationNode {
             "DISABLED_NODE_INTERACTION": {
@@ -4145,14 +4033,10 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
               "nextNode": undefined,
               "parentNode": undefined,
               "previousNode": undefined,
-              "title": "route",
             },
             "previousNode": undefined,
-            "title": "timer",
           },
-          "title": "choice",
         },
-        "title": "sql",
       },
     },
     "height": 75,
@@ -4247,7 +4131,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                       "nextNode": undefined,
                       "parentNode": [Circular],
                       "previousNode": undefined,
-                      "title": "setHeader",
                     },
                   ],
                   "data": {
@@ -4260,7 +4143,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                   "nextNode": undefined,
                   "parentNode": [Circular],
                   "previousNode": undefined,
-                  "title": "when",
                 },
                 VisualizationNode {
                   "DISABLED_NODE_INTERACTION": {
@@ -4296,7 +4178,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                       "nextNode": undefined,
                       "parentNode": [Circular],
                       "previousNode": undefined,
-                      "title": "log",
                     },
                   ],
                   "data": {
@@ -4309,7 +4190,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                   "nextNode": undefined,
                   "parentNode": [Circular],
                   "previousNode": undefined,
-                  "title": "otherwise",
                 },
               ],
               "data": {
@@ -4341,15 +4221,12 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "nextNode": undefined,
                 "parentNode": [Circular],
                 "previousNode": [Circular],
-                "title": "sql",
               },
               "parentNode": [Circular],
               "previousNode": [Circular],
-              "title": "choice",
             },
             "parentNode": [Circular],
             "previousNode": undefined,
-            "title": "timer",
           },
           VisualizationNode {
             "DISABLED_NODE_INTERACTION": {
@@ -4397,7 +4274,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                     "nextNode": undefined,
                     "parentNode": [Circular],
                     "previousNode": undefined,
-                    "title": "setHeader",
                   },
                 ],
                 "data": {
@@ -4410,7 +4286,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "nextNode": undefined,
                 "parentNode": [Circular],
                 "previousNode": undefined,
-                "title": "when",
               },
               VisualizationNode {
                 "DISABLED_NODE_INTERACTION": {
@@ -4446,7 +4321,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                     "nextNode": undefined,
                     "parentNode": [Circular],
                     "previousNode": undefined,
-                    "title": "log",
                   },
                 ],
                 "data": {
@@ -4459,7 +4333,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "nextNode": undefined,
                 "parentNode": [Circular],
                 "previousNode": undefined,
-                "title": "otherwise",
               },
             ],
             "data": {
@@ -4491,7 +4364,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
               "nextNode": undefined,
               "parentNode": [Circular],
               "previousNode": [Circular],
-              "title": "sql",
             },
             "parentNode": [Circular],
             "previousNode": VisualizationNode {
@@ -4517,9 +4389,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
               "nextNode": [Circular],
               "parentNode": [Circular],
               "previousNode": undefined,
-              "title": "timer",
             },
-            "title": "choice",
           },
           VisualizationNode {
             "DISABLED_NODE_INTERACTION": {
@@ -4588,7 +4458,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                       "nextNode": undefined,
                       "parentNode": [Circular],
                       "previousNode": undefined,
-                      "title": "setHeader",
                     },
                   ],
                   "data": {
@@ -4601,7 +4470,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                   "nextNode": undefined,
                   "parentNode": [Circular],
                   "previousNode": undefined,
-                  "title": "when",
                 },
                 VisualizationNode {
                   "DISABLED_NODE_INTERACTION": {
@@ -4637,7 +4505,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                       "nextNode": undefined,
                       "parentNode": [Circular],
                       "previousNode": undefined,
-                      "title": "log",
                     },
                   ],
                   "data": {
@@ -4650,7 +4517,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                   "nextNode": undefined,
                   "parentNode": [Circular],
                   "previousNode": undefined,
-                  "title": "otherwise",
                 },
               ],
               "data": {
@@ -4685,11 +4551,8 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
                 "nextNode": [Circular],
                 "parentNode": [Circular],
                 "previousNode": undefined,
-                "title": "timer",
               },
-              "title": "choice",
             },
-            "title": "sql",
           },
         ],
         "data": {
@@ -4760,7 +4623,6 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
         "nextNode": undefined,
         "parentNode": undefined,
         "previousNode": undefined,
-        "title": "route",
       },
     },
     "group": true,
diff --git a/packages/ui/src/utils/camel-case-to-space.test.ts b/packages/ui/src/utils/camel-case-to-space.test.ts
new file mode 100644
index 000000000..2072c7f7c
--- /dev/null
+++ b/packages/ui/src/utils/camel-case-to-space.test.ts
@@ -0,0 +1,39 @@
+import { camelCaseToSpaces } from './camel-case-to-space';
+
+describe('camelCaseToSpaces', () => {
+  it('should convert camelCase to space separated string', () => {
+    expect(camelCaseToSpaces('camelCaseString')).toBe('camel Case String');
+  });
+
+  it('should return an empty string if input is empty', () => {
+    expect(camelCaseToSpaces('')).toBe('');
+  });
+
+  it('should handle single word strings', () => {
+    expect(camelCaseToSpaces('word')).toBe('word');
+  });
+
+  it('should capitalize words if the capitalize option is true', () => {
+    expect(camelCaseToSpaces('camelCaseString', { capitalize: true })).toBe('Camel Case String');
+  });
+
+  it('should not capitalize words if the capitalize option is false', () => {
+    expect(camelCaseToSpaces('camelCaseString', { capitalize: false })).toBe('camel Case String');
+  });
+
+  it('should ignore strings with multiple uppercase letters', () => {
+    expect(camelCaseToSpaces('thisIsATestString')).toBe('this Is ATest String');
+  });
+
+  it('should handle strings with no uppercase letters', () => {
+    expect(camelCaseToSpaces('teststring')).toBe('teststring');
+  });
+
+  it('should handle strings with leading uppercase letters', () => {
+    expect(camelCaseToSpaces('TestString')).toBe('Test String');
+  });
+
+  it('should handle strings with trailing uppercase letters', () => {
+    expect(camelCaseToSpaces('testStringA')).toBe('test String A');
+  });
+});
diff --git a/packages/ui/src/utils/camel-case-to-space.ts b/packages/ui/src/utils/camel-case-to-space.ts
new file mode 100644
index 000000000..aacc846db
--- /dev/null
+++ b/packages/ui/src/utils/camel-case-to-space.ts
@@ -0,0 +1,18 @@
+/**
+ * Converts a camelCase string to a space separated string.
+ * @param str The camelCase string to convert.
+ * @returns The space-separated string.
+ */
+export function camelCaseToSpaces(str: string, options?: { capitalize: boolean }): string {
+  if (!str) {
+    return '';
+  }
+
+  let spacedString = str.replace(/([a-z])([A-Z])/g, '$1 $2');
+
+  if (options?.capitalize) {
+    spacedString = spacedString.substring(0, 1).toUpperCase() + spacedString.slice(1);
+  }
+
+  return spacedString;
+}
diff --git a/packages/ui/src/utils/index.ts b/packages/ui/src/utils/index.ts
index 7a05172ed..e2178ee3d 100644
--- a/packages/ui/src/utils/index.ts
+++ b/packages/ui/src/utils/index.ts
@@ -1,3 +1,4 @@
+export * from './camel-case-to-space';
 export * from './camel-uri-helper';
 export * from './catalog-schema-loader';
 export * from './create-camel-properties-sorter';