diff --git a/karavan-app/src/main/webui/src/designer/karavan.css b/karavan-app/src/main/webui/src/designer/karavan.css
index d3e96c87871..7053de7d8d4 100644
--- a/karavan-app/src/main/webui/src/designer/karavan.css
+++ b/karavan-app/src/main/webui/src/designer/karavan.css
@@ -397,8 +397,8 @@
 }
 
 .karavan .dsl-page .graph .connections .icon {
-    height: 20px;
-    width: 20px;
+    height: 22px;
+    width: 22px;
 }
 
 .karavan .dsl-page .graph .connections .arrow {
diff --git a/karavan-app/src/main/webui/src/designer/route/DslConnections.tsx b/karavan-app/src/main/webui/src/designer/route/DslConnections.tsx
index f0b0ff7a782..d1720b55584 100644
--- a/karavan-app/src/main/webui/src/designer/route/DslConnections.tsx
+++ b/karavan-app/src/main/webui/src/designer/route/DslConnections.tsx
@@ -30,6 +30,8 @@ import {getIntegrations} from "../../topology/TopologyApi";
 import {ComponentApi} from "karavan-core/lib/api/ComponentApi";
 
 const overlapGap: number = 40;
+const DIAMETER: number = 34;
+const RADIUS: number = DIAMETER / 2;
 
 export function DslConnections() {
 
@@ -146,8 +148,8 @@ export function DslConnections() {
             const fromY = pos.headerRect.y + pos.headerRect.height / 2 - top;
             const r = pos.headerRect.height / 2;
             const incomingX = 20;
-            const imageX = incomingX - r + 5;
-            const imageY = fromY - r + 5;
+            const imageX = incomingX - r + 6;
+            const imageY = fromY - r + 6;
             return (
                 <div key={pos.step.uuid + "-icon"}
                      style={{display: "block", position: "absolute", top: imageY, left: imageX}}>
@@ -213,11 +215,11 @@ export function DslConnections() {
             const r = pos.headerRect.height / 2;
 
             const outgoingX = width - 20;
-            const outgoingY = data[1] + 15;
+            const outgoingY = data[1] + RADIUS;
 
             const lineX1 = fromX + r;
             const lineY1 = fromY;
-            const lineX2 = outgoingX - r * 2 + 4;
+            const lineX2 = outgoingX - r * 2 + 6;
             const lineY2 = outgoingY;
 
             const lineXi = lineX1 + 40;
@@ -227,7 +229,7 @@ export function DslConnections() {
                 <g key={pos.step.uuid + "-outgoing"}>
                     <circle cx={outgoingX} cy={outgoingY} r={r} className="circle-outgoing"/>
                     <path
-                        d={`M ${lineX1},${lineY1} C ${lineXi - 20}, ${lineY1} ${lineX1 - 15},${lineYi} ${lineXi},${lineYi} L ${lineX2},${lineY2}`}
+                        d={`M ${lineX1},${lineY1} C ${lineXi - 20}, ${lineY1} ${lineX1 - RADIUS},${lineYi} ${lineXi},${lineYi} L ${lineX2},${lineY2}`}
                         className="path-incoming" markerEnd="url(#arrowhead)"/>
                 </g>
             )
@@ -243,9 +245,9 @@ export function DslConnections() {
             const name = directOrSeda ? (step?.parameters?.name) : '';
             const r = pos.headerRect.height / 2;
             const outgoingX = width - 20;
-            const outgoingY = data[1] + 15;
-            const imageX = outgoingX - r + 5;
-            const imageY = outgoingY - r + 5;
+            const outgoingY = data[1] + RADIUS;
+            const imageX = outgoingX - r + 6;
+            const imageY = outgoingY - r + 6;
             return (
                 <div key={pos.step.uuid + "-icon"}
                      style={{display: "block", position: "absolute", top: imageY, left: imageX}}>
@@ -405,8 +407,8 @@ export function DslConnections() {
         const gapX = Math.abs(endX - startX);
         const gapY = Math.abs(endTempY - startY);
 
-        const radX = gapX > 30 ? 20 : gapX/2;
-        const radY = gapY > 30 ? 20 : gapY/2;
+        const radX = gapX > DIAMETER ? 20 : gapX/2;
+        const radY = gapY > DIAMETER ? 20 : gapY/2;
         const endY = rect2.y - top - radY - (toHeader ? 9 : 6);
 
         const iRadX = startX > endX ? -1 * radX : radX;
diff --git a/karavan-app/src/main/webui/src/designer/route/element/DslElement.css b/karavan-app/src/main/webui/src/designer/route/element/DslElement.css
index 4f0109c54c0..785f667b8a8 100644
--- a/karavan-app/src/main/webui/src/designer/route/element/DslElement.css
+++ b/karavan-app/src/main/webui/src/designer/route/element/DslElement.css
@@ -97,11 +97,11 @@
 }
 
 .karavan .step-element .header .text-bottom {
-    background-color: rgba(255, 255, 255, 0.5);
+    background-color: rgba(255, 255, 255, 0.2);
 }
 
 .karavan .step-element .header .text-right {
-    padding-left: 17px;
+    padding-left: 21px;
     width: 50%;
     text-align: start;
 }
@@ -112,19 +112,38 @@
 }
 
 .karavan .step-element .header-icon {
-    border-color: var(--pf-v5-global--Color--200);
+    border-color: var(--pf-v5-global--Color--300);
     border-style: solid;
-    border-radius: 30px;
     border-width: 1px;
     background: white;
-    width: 30px;
-    height: 30px;
+    width: 33px;
+    height: 33px;
     margin: auto;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
+.karavan .step-element .header-icon-circle {
+    border-radius: 33px;
+}
+
+.karavan .step-element .header-icon-square {
+    border-radius: 33px;
+}
+
+.karavan .step-element .header-icon-diamond {
+    border-radius: 4px;
+    transform: rotate(45deg);
+    margin-top: -4px;
+    width: 30px;
+    height: 30px;
+}
+.karavan .step-element .header-icon-diamond .icon {
+    transform: rotate(-45deg);
+}
+
+
 .karavan .step-element .route-icons {
     position: absolute;
     top: 0;
@@ -133,7 +152,7 @@
 
 .karavan .step-element .header .icon,
 .element-builder .header .icon {
-    height: 20px;
+    height: 22px;
     width: auto;
     border: none;
     -webkit-user-select: none;
diff --git a/karavan-app/src/main/webui/src/designer/route/element/DslElementHeader.tsx b/karavan-app/src/main/webui/src/designer/route/element/DslElementHeader.tsx
index a9f78827df2..c911dc2c2df 100644
--- a/karavan-app/src/main/webui/src/designer/route/element/DslElementHeader.tsx
+++ b/karavan-app/src/main/webui/src/designer/route/element/DslElementHeader.tsx
@@ -59,6 +59,8 @@ export function DslElementHeader(props: Props) {
         useDesignerStore((s) =>
             [s.selectedUuids, s.selectedStep, s.showMoveConfirmation, s.setShowMoveConfirmation, s.setMoveElements], shallow)
 
+    const step: CamelElement = props.step;
+
     function onOpenSelector(evt: React.MouseEvent, showSteps: boolean = true, isInsert: boolean = false) {
         evt.stopPropagation();
         if (isInsert && props.parent) {
@@ -143,9 +145,20 @@ export function DslElementHeader(props: Props) {
     || (rc.onCompletion !== undefined && rc.onCompletion.length > 0)
     }
 
+    function getHeaderIconClasses(): string {
+        const classes: string[] = ['header-icon'];
+        if (['ToDefinition', 'FromDefinition'].includes(step.dslName)) {
+            classes.push('header-icon-square');
+        } else if (step.dslName === 'ChoiceDefinition') {
+            classes.push('header-icon-diamond');
+        } else {
+            classes.push('header-icon-circle');
+        }
+        return classes.join(" ");
+    }
+
     function getHeaderClasses(): string {
         const classes: string[] = [];
-        const step: CamelElement = props.step;
         if (step.dslName === 'RouteDefinition') {
             classes.push('header-route')
             classes.push('header-bottom-line')
@@ -179,7 +192,7 @@ export function DslElementHeader(props: Props) {
             <div className={"dsl-element " + headerClasses} style={getHeaderStyle()} ref={props.headerRef}>
                 {!['RouteConfigurationDefinition', 'RouteDefinition'].includes(props.step.dslName) &&
                     <div
-                        className={"header-icon"}
+                        className={getHeaderIconClasses()}
                         style={isWide() ? {width: ""} : {}}>
                         {CamelUi.getIconForElement(step)}
                     </div>
@@ -226,7 +239,7 @@ export function DslElementHeader(props: Props) {
         let className = hasWideChildrenElement ? "text text-right" : "text text-bottom";
         if (!checkRequired[0]) className = className + " header-text-required";
         if (checkRequired[0]) {
-            return <Text className={className}>{title}</Text>
+            return <Text style={{marginTop: (step.dslName === 'ChoiceDefinition' ? '-5px' : 'inherit')}} className={className}>{title}</Text>
         } else return (
             <Tooltip position={"right"} className="tooltip-required-field"
                      content={checkRequired[1].map((text, i) => (<div key={i}>{text}</div>))}>
diff --git a/karavan-app/src/main/webui/src/designer/utils/ElementIcon.css b/karavan-app/src/main/webui/src/designer/utils/ElementIcon.css
index 15f2dbe3c2c..f89c962bfd5 100644
--- a/karavan-app/src/main/webui/src/designer/utils/ElementIcon.css
+++ b/karavan-app/src/main/webui/src/designer/utils/ElementIcon.css
@@ -20,7 +20,7 @@
     fill: var(--pf-v5-global--primary-color--100);
     width: 20px;
     height: 20px;
-    background: white;
+    background: transparent;
     vertical-align: text-bottom;
 }
 
@@ -28,6 +28,6 @@
     fill: var(--pf-v5-global--danger-color--100);
     width: 20px;
     height: 20px;
-    background: white;
+    background: transparent;
     vertical-align: text-bottom;
 }
diff --git a/karavan-designer/public/example/demo.camel.yaml b/karavan-designer/public/example/demo.camel.yaml
index 5d0138d7aa7..ef7ef78fee7 100644
--- a/karavan-designer/public/example/demo.camel.yaml
+++ b/karavan-designer/public/example/demo.camel.yaml
@@ -8,25 +8,40 @@
         message: Hello
         period: 1
       steps:
-        - aggregate:
-            id: aggregate-46cb
-            completionSize: 1
         - to:
             id: to-df39
             uri: amqp
-        - aggregate:
-            id: aggregate-1193
-            completionSize: 121212
-            completionTimeout: "{{bean:beanName.method}}"
         - to:
             id: to-1600
             uri: kamelet:kafka-sink
-- rest:
-    id: rest-d262
-    description: Hello
-    get:
-      - id: get-7de4
-        to: direct:test
+        - choice:
+            id: choice-41b7
+            when:
+              - id: when-29c0
+                expression:
+                  simple:
+                    id: simple-289b
+                steps:
+                  - aggregate:
+                      id: aggregate-1193
+                      completionSize: 121212
+                      completionTimeout: "{{bean:beanName.method}}"
+                      steps:
+                        - bean:
+                            id: bean-a9e0
+                        - to:
+                            id: to-df17
+                            uri: amqp
+            otherwise:
+              id: otherwise-b00c
+              steps:
+                - aggregate:
+                    id: aggregate-46cb
+                    completionSize: 1
+                    steps:
+                      - to:
+                          id: to-5565
+                          uri: activemq
 - route:
     id: test
     from:
@@ -34,3 +49,7 @@
       uri: direct
       parameters:
         name: test
+      steps:
+        - to:
+            id: to-1daf
+            uri: kamelet:aws-bedrock-agent-runtime-sink
diff --git a/karavan-designer/src/App.tsx b/karavan-designer/src/App.tsx
index b7344e3078f..bc6d9f7b356 100644
--- a/karavan-designer/src/App.tsx
+++ b/karavan-designer/src/App.tsx
@@ -58,7 +58,7 @@ class MenuItem {
 
 export function App() {
 
-    const [pageId, setPageId] = useState<string>('topology');
+    const [pageId, setPageId] = useState<string>('designer');
     const [name, setName] = useState<string>('example.yaml');
     const [key, setKey] = useState<string>('');
     const [yaml, setYaml] = useState<string>('');
diff --git a/karavan-designer/src/designer/karavan.css b/karavan-designer/src/designer/karavan.css
index d3e96c87871..7053de7d8d4 100644
--- a/karavan-designer/src/designer/karavan.css
+++ b/karavan-designer/src/designer/karavan.css
@@ -397,8 +397,8 @@
 }
 
 .karavan .dsl-page .graph .connections .icon {
-    height: 20px;
-    width: 20px;
+    height: 22px;
+    width: 22px;
 }
 
 .karavan .dsl-page .graph .connections .arrow {
diff --git a/karavan-designer/src/designer/route/DslConnections.tsx b/karavan-designer/src/designer/route/DslConnections.tsx
index f0b0ff7a782..d1720b55584 100644
--- a/karavan-designer/src/designer/route/DslConnections.tsx
+++ b/karavan-designer/src/designer/route/DslConnections.tsx
@@ -30,6 +30,8 @@ import {getIntegrations} from "../../topology/TopologyApi";
 import {ComponentApi} from "karavan-core/lib/api/ComponentApi";
 
 const overlapGap: number = 40;
+const DIAMETER: number = 34;
+const RADIUS: number = DIAMETER / 2;
 
 export function DslConnections() {
 
@@ -146,8 +148,8 @@ export function DslConnections() {
             const fromY = pos.headerRect.y + pos.headerRect.height / 2 - top;
             const r = pos.headerRect.height / 2;
             const incomingX = 20;
-            const imageX = incomingX - r + 5;
-            const imageY = fromY - r + 5;
+            const imageX = incomingX - r + 6;
+            const imageY = fromY - r + 6;
             return (
                 <div key={pos.step.uuid + "-icon"}
                      style={{display: "block", position: "absolute", top: imageY, left: imageX}}>
@@ -213,11 +215,11 @@ export function DslConnections() {
             const r = pos.headerRect.height / 2;
 
             const outgoingX = width - 20;
-            const outgoingY = data[1] + 15;
+            const outgoingY = data[1] + RADIUS;
 
             const lineX1 = fromX + r;
             const lineY1 = fromY;
-            const lineX2 = outgoingX - r * 2 + 4;
+            const lineX2 = outgoingX - r * 2 + 6;
             const lineY2 = outgoingY;
 
             const lineXi = lineX1 + 40;
@@ -227,7 +229,7 @@ export function DslConnections() {
                 <g key={pos.step.uuid + "-outgoing"}>
                     <circle cx={outgoingX} cy={outgoingY} r={r} className="circle-outgoing"/>
                     <path
-                        d={`M ${lineX1},${lineY1} C ${lineXi - 20}, ${lineY1} ${lineX1 - 15},${lineYi} ${lineXi},${lineYi} L ${lineX2},${lineY2}`}
+                        d={`M ${lineX1},${lineY1} C ${lineXi - 20}, ${lineY1} ${lineX1 - RADIUS},${lineYi} ${lineXi},${lineYi} L ${lineX2},${lineY2}`}
                         className="path-incoming" markerEnd="url(#arrowhead)"/>
                 </g>
             )
@@ -243,9 +245,9 @@ export function DslConnections() {
             const name = directOrSeda ? (step?.parameters?.name) : '';
             const r = pos.headerRect.height / 2;
             const outgoingX = width - 20;
-            const outgoingY = data[1] + 15;
-            const imageX = outgoingX - r + 5;
-            const imageY = outgoingY - r + 5;
+            const outgoingY = data[1] + RADIUS;
+            const imageX = outgoingX - r + 6;
+            const imageY = outgoingY - r + 6;
             return (
                 <div key={pos.step.uuid + "-icon"}
                      style={{display: "block", position: "absolute", top: imageY, left: imageX}}>
@@ -405,8 +407,8 @@ export function DslConnections() {
         const gapX = Math.abs(endX - startX);
         const gapY = Math.abs(endTempY - startY);
 
-        const radX = gapX > 30 ? 20 : gapX/2;
-        const radY = gapY > 30 ? 20 : gapY/2;
+        const radX = gapX > DIAMETER ? 20 : gapX/2;
+        const radY = gapY > DIAMETER ? 20 : gapY/2;
         const endY = rect2.y - top - radY - (toHeader ? 9 : 6);
 
         const iRadX = startX > endX ? -1 * radX : radX;
diff --git a/karavan-designer/src/designer/route/element/DslElement.css b/karavan-designer/src/designer/route/element/DslElement.css
index 4f0109c54c0..785f667b8a8 100644
--- a/karavan-designer/src/designer/route/element/DslElement.css
+++ b/karavan-designer/src/designer/route/element/DslElement.css
@@ -97,11 +97,11 @@
 }
 
 .karavan .step-element .header .text-bottom {
-    background-color: rgba(255, 255, 255, 0.5);
+    background-color: rgba(255, 255, 255, 0.2);
 }
 
 .karavan .step-element .header .text-right {
-    padding-left: 17px;
+    padding-left: 21px;
     width: 50%;
     text-align: start;
 }
@@ -112,19 +112,38 @@
 }
 
 .karavan .step-element .header-icon {
-    border-color: var(--pf-v5-global--Color--200);
+    border-color: var(--pf-v5-global--Color--300);
     border-style: solid;
-    border-radius: 30px;
     border-width: 1px;
     background: white;
-    width: 30px;
-    height: 30px;
+    width: 33px;
+    height: 33px;
     margin: auto;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
+.karavan .step-element .header-icon-circle {
+    border-radius: 33px;
+}
+
+.karavan .step-element .header-icon-square {
+    border-radius: 33px;
+}
+
+.karavan .step-element .header-icon-diamond {
+    border-radius: 4px;
+    transform: rotate(45deg);
+    margin-top: -4px;
+    width: 30px;
+    height: 30px;
+}
+.karavan .step-element .header-icon-diamond .icon {
+    transform: rotate(-45deg);
+}
+
+
 .karavan .step-element .route-icons {
     position: absolute;
     top: 0;
@@ -133,7 +152,7 @@
 
 .karavan .step-element .header .icon,
 .element-builder .header .icon {
-    height: 20px;
+    height: 22px;
     width: auto;
     border: none;
     -webkit-user-select: none;
diff --git a/karavan-designer/src/designer/route/element/DslElementHeader.tsx b/karavan-designer/src/designer/route/element/DslElementHeader.tsx
index a9f78827df2..c911dc2c2df 100644
--- a/karavan-designer/src/designer/route/element/DslElementHeader.tsx
+++ b/karavan-designer/src/designer/route/element/DslElementHeader.tsx
@@ -59,6 +59,8 @@ export function DslElementHeader(props: Props) {
         useDesignerStore((s) =>
             [s.selectedUuids, s.selectedStep, s.showMoveConfirmation, s.setShowMoveConfirmation, s.setMoveElements], shallow)
 
+    const step: CamelElement = props.step;
+
     function onOpenSelector(evt: React.MouseEvent, showSteps: boolean = true, isInsert: boolean = false) {
         evt.stopPropagation();
         if (isInsert && props.parent) {
@@ -143,9 +145,20 @@ export function DslElementHeader(props: Props) {
     || (rc.onCompletion !== undefined && rc.onCompletion.length > 0)
     }
 
+    function getHeaderIconClasses(): string {
+        const classes: string[] = ['header-icon'];
+        if (['ToDefinition', 'FromDefinition'].includes(step.dslName)) {
+            classes.push('header-icon-square');
+        } else if (step.dslName === 'ChoiceDefinition') {
+            classes.push('header-icon-diamond');
+        } else {
+            classes.push('header-icon-circle');
+        }
+        return classes.join(" ");
+    }
+
     function getHeaderClasses(): string {
         const classes: string[] = [];
-        const step: CamelElement = props.step;
         if (step.dslName === 'RouteDefinition') {
             classes.push('header-route')
             classes.push('header-bottom-line')
@@ -179,7 +192,7 @@ export function DslElementHeader(props: Props) {
             <div className={"dsl-element " + headerClasses} style={getHeaderStyle()} ref={props.headerRef}>
                 {!['RouteConfigurationDefinition', 'RouteDefinition'].includes(props.step.dslName) &&
                     <div
-                        className={"header-icon"}
+                        className={getHeaderIconClasses()}
                         style={isWide() ? {width: ""} : {}}>
                         {CamelUi.getIconForElement(step)}
                     </div>
@@ -226,7 +239,7 @@ export function DslElementHeader(props: Props) {
         let className = hasWideChildrenElement ? "text text-right" : "text text-bottom";
         if (!checkRequired[0]) className = className + " header-text-required";
         if (checkRequired[0]) {
-            return <Text className={className}>{title}</Text>
+            return <Text style={{marginTop: (step.dslName === 'ChoiceDefinition' ? '-5px' : 'inherit')}} className={className}>{title}</Text>
         } else return (
             <Tooltip position={"right"} className="tooltip-required-field"
                      content={checkRequired[1].map((text, i) => (<div key={i}>{text}</div>))}>
diff --git a/karavan-designer/src/designer/utils/ElementIcon.css b/karavan-designer/src/designer/utils/ElementIcon.css
index 15f2dbe3c2c..f89c962bfd5 100644
--- a/karavan-designer/src/designer/utils/ElementIcon.css
+++ b/karavan-designer/src/designer/utils/ElementIcon.css
@@ -20,7 +20,7 @@
     fill: var(--pf-v5-global--primary-color--100);
     width: 20px;
     height: 20px;
-    background: white;
+    background: transparent;
     vertical-align: text-bottom;
 }
 
@@ -28,6 +28,6 @@
     fill: var(--pf-v5-global--danger-color--100);
     width: 20px;
     height: 20px;
-    background: white;
+    background: transparent;
     vertical-align: text-bottom;
 }
diff --git a/karavan-space/src/designer/karavan.css b/karavan-space/src/designer/karavan.css
index d3e96c87871..7053de7d8d4 100644
--- a/karavan-space/src/designer/karavan.css
+++ b/karavan-space/src/designer/karavan.css
@@ -397,8 +397,8 @@
 }
 
 .karavan .dsl-page .graph .connections .icon {
-    height: 20px;
-    width: 20px;
+    height: 22px;
+    width: 22px;
 }
 
 .karavan .dsl-page .graph .connections .arrow {
diff --git a/karavan-space/src/designer/route/DslConnections.tsx b/karavan-space/src/designer/route/DslConnections.tsx
index f0b0ff7a782..d1720b55584 100644
--- a/karavan-space/src/designer/route/DslConnections.tsx
+++ b/karavan-space/src/designer/route/DslConnections.tsx
@@ -30,6 +30,8 @@ import {getIntegrations} from "../../topology/TopologyApi";
 import {ComponentApi} from "karavan-core/lib/api/ComponentApi";
 
 const overlapGap: number = 40;
+const DIAMETER: number = 34;
+const RADIUS: number = DIAMETER / 2;
 
 export function DslConnections() {
 
@@ -146,8 +148,8 @@ export function DslConnections() {
             const fromY = pos.headerRect.y + pos.headerRect.height / 2 - top;
             const r = pos.headerRect.height / 2;
             const incomingX = 20;
-            const imageX = incomingX - r + 5;
-            const imageY = fromY - r + 5;
+            const imageX = incomingX - r + 6;
+            const imageY = fromY - r + 6;
             return (
                 <div key={pos.step.uuid + "-icon"}
                      style={{display: "block", position: "absolute", top: imageY, left: imageX}}>
@@ -213,11 +215,11 @@ export function DslConnections() {
             const r = pos.headerRect.height / 2;
 
             const outgoingX = width - 20;
-            const outgoingY = data[1] + 15;
+            const outgoingY = data[1] + RADIUS;
 
             const lineX1 = fromX + r;
             const lineY1 = fromY;
-            const lineX2 = outgoingX - r * 2 + 4;
+            const lineX2 = outgoingX - r * 2 + 6;
             const lineY2 = outgoingY;
 
             const lineXi = lineX1 + 40;
@@ -227,7 +229,7 @@ export function DslConnections() {
                 <g key={pos.step.uuid + "-outgoing"}>
                     <circle cx={outgoingX} cy={outgoingY} r={r} className="circle-outgoing"/>
                     <path
-                        d={`M ${lineX1},${lineY1} C ${lineXi - 20}, ${lineY1} ${lineX1 - 15},${lineYi} ${lineXi},${lineYi} L ${lineX2},${lineY2}`}
+                        d={`M ${lineX1},${lineY1} C ${lineXi - 20}, ${lineY1} ${lineX1 - RADIUS},${lineYi} ${lineXi},${lineYi} L ${lineX2},${lineY2}`}
                         className="path-incoming" markerEnd="url(#arrowhead)"/>
                 </g>
             )
@@ -243,9 +245,9 @@ export function DslConnections() {
             const name = directOrSeda ? (step?.parameters?.name) : '';
             const r = pos.headerRect.height / 2;
             const outgoingX = width - 20;
-            const outgoingY = data[1] + 15;
-            const imageX = outgoingX - r + 5;
-            const imageY = outgoingY - r + 5;
+            const outgoingY = data[1] + RADIUS;
+            const imageX = outgoingX - r + 6;
+            const imageY = outgoingY - r + 6;
             return (
                 <div key={pos.step.uuid + "-icon"}
                      style={{display: "block", position: "absolute", top: imageY, left: imageX}}>
@@ -405,8 +407,8 @@ export function DslConnections() {
         const gapX = Math.abs(endX - startX);
         const gapY = Math.abs(endTempY - startY);
 
-        const radX = gapX > 30 ? 20 : gapX/2;
-        const radY = gapY > 30 ? 20 : gapY/2;
+        const radX = gapX > DIAMETER ? 20 : gapX/2;
+        const radY = gapY > DIAMETER ? 20 : gapY/2;
         const endY = rect2.y - top - radY - (toHeader ? 9 : 6);
 
         const iRadX = startX > endX ? -1 * radX : radX;
diff --git a/karavan-space/src/designer/route/element/DslElement.css b/karavan-space/src/designer/route/element/DslElement.css
index 4f0109c54c0..785f667b8a8 100644
--- a/karavan-space/src/designer/route/element/DslElement.css
+++ b/karavan-space/src/designer/route/element/DslElement.css
@@ -97,11 +97,11 @@
 }
 
 .karavan .step-element .header .text-bottom {
-    background-color: rgba(255, 255, 255, 0.5);
+    background-color: rgba(255, 255, 255, 0.2);
 }
 
 .karavan .step-element .header .text-right {
-    padding-left: 17px;
+    padding-left: 21px;
     width: 50%;
     text-align: start;
 }
@@ -112,19 +112,38 @@
 }
 
 .karavan .step-element .header-icon {
-    border-color: var(--pf-v5-global--Color--200);
+    border-color: var(--pf-v5-global--Color--300);
     border-style: solid;
-    border-radius: 30px;
     border-width: 1px;
     background: white;
-    width: 30px;
-    height: 30px;
+    width: 33px;
+    height: 33px;
     margin: auto;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
+.karavan .step-element .header-icon-circle {
+    border-radius: 33px;
+}
+
+.karavan .step-element .header-icon-square {
+    border-radius: 33px;
+}
+
+.karavan .step-element .header-icon-diamond {
+    border-radius: 4px;
+    transform: rotate(45deg);
+    margin-top: -4px;
+    width: 30px;
+    height: 30px;
+}
+.karavan .step-element .header-icon-diamond .icon {
+    transform: rotate(-45deg);
+}
+
+
 .karavan .step-element .route-icons {
     position: absolute;
     top: 0;
@@ -133,7 +152,7 @@
 
 .karavan .step-element .header .icon,
 .element-builder .header .icon {
-    height: 20px;
+    height: 22px;
     width: auto;
     border: none;
     -webkit-user-select: none;
diff --git a/karavan-space/src/designer/route/element/DslElementHeader.tsx b/karavan-space/src/designer/route/element/DslElementHeader.tsx
index a9f78827df2..c911dc2c2df 100644
--- a/karavan-space/src/designer/route/element/DslElementHeader.tsx
+++ b/karavan-space/src/designer/route/element/DslElementHeader.tsx
@@ -59,6 +59,8 @@ export function DslElementHeader(props: Props) {
         useDesignerStore((s) =>
             [s.selectedUuids, s.selectedStep, s.showMoveConfirmation, s.setShowMoveConfirmation, s.setMoveElements], shallow)
 
+    const step: CamelElement = props.step;
+
     function onOpenSelector(evt: React.MouseEvent, showSteps: boolean = true, isInsert: boolean = false) {
         evt.stopPropagation();
         if (isInsert && props.parent) {
@@ -143,9 +145,20 @@ export function DslElementHeader(props: Props) {
     || (rc.onCompletion !== undefined && rc.onCompletion.length > 0)
     }
 
+    function getHeaderIconClasses(): string {
+        const classes: string[] = ['header-icon'];
+        if (['ToDefinition', 'FromDefinition'].includes(step.dslName)) {
+            classes.push('header-icon-square');
+        } else if (step.dslName === 'ChoiceDefinition') {
+            classes.push('header-icon-diamond');
+        } else {
+            classes.push('header-icon-circle');
+        }
+        return classes.join(" ");
+    }
+
     function getHeaderClasses(): string {
         const classes: string[] = [];
-        const step: CamelElement = props.step;
         if (step.dslName === 'RouteDefinition') {
             classes.push('header-route')
             classes.push('header-bottom-line')
@@ -179,7 +192,7 @@ export function DslElementHeader(props: Props) {
             <div className={"dsl-element " + headerClasses} style={getHeaderStyle()} ref={props.headerRef}>
                 {!['RouteConfigurationDefinition', 'RouteDefinition'].includes(props.step.dslName) &&
                     <div
-                        className={"header-icon"}
+                        className={getHeaderIconClasses()}
                         style={isWide() ? {width: ""} : {}}>
                         {CamelUi.getIconForElement(step)}
                     </div>
@@ -226,7 +239,7 @@ export function DslElementHeader(props: Props) {
         let className = hasWideChildrenElement ? "text text-right" : "text text-bottom";
         if (!checkRequired[0]) className = className + " header-text-required";
         if (checkRequired[0]) {
-            return <Text className={className}>{title}</Text>
+            return <Text style={{marginTop: (step.dslName === 'ChoiceDefinition' ? '-5px' : 'inherit')}} className={className}>{title}</Text>
         } else return (
             <Tooltip position={"right"} className="tooltip-required-field"
                      content={checkRequired[1].map((text, i) => (<div key={i}>{text}</div>))}>
diff --git a/karavan-space/src/designer/utils/ElementIcon.css b/karavan-space/src/designer/utils/ElementIcon.css
index 15f2dbe3c2c..f89c962bfd5 100644
--- a/karavan-space/src/designer/utils/ElementIcon.css
+++ b/karavan-space/src/designer/utils/ElementIcon.css
@@ -20,7 +20,7 @@
     fill: var(--pf-v5-global--primary-color--100);
     width: 20px;
     height: 20px;
-    background: white;
+    background: transparent;
     vertical-align: text-bottom;
 }
 
@@ -28,6 +28,6 @@
     fill: var(--pf-v5-global--danger-color--100);
     width: 20px;
     height: 20px;
-    background: white;
+    background: transparent;
     vertical-align: text-bottom;
 }