diff --git a/packages/ui/src/components/Visualization/Canvas/__snapshots__/Canvas.test.tsx.snap b/packages/ui/src/components/Visualization/Canvas/__snapshots__/Canvas.test.tsx.snap
index 2d1f5cdd5..95efc56b4 100644
--- a/packages/ui/src/components/Visualization/Canvas/__snapshots__/Canvas.test.tsx.snap
+++ b/packages/ui/src/components/Visualization/Canvas/__snapshots__/Canvas.test.tsx.snap
@@ -61,7 +61,7 @@ exports[`Canvas Catalog button should NOT be present if \`CatalogModalContext\`
                       />
                       <g
                         data-surface="true"
-                        transform="translate(-0.40555555555555556, -0.5097222222222222) scale(0.0011111111111111111)"
+                        transform="translate(-0.3994708994708995, -0.4986772486772487) scale(0.0010582010582010583)"
                       >
                         <g
                           data-layer-id="bottom"
@@ -78,18 +78,18 @@ exports[`Canvas Catalog button should NOT be present if \`CatalogModalContext\`
                             <g>
                               <rect
                                 class="phantom-rect"
-                                height="902.5"
-                                width="900"
-                                x="-85"
-                                y="12.5"
+                                height="927.5"
+                                width="945"
+                                x="-95"
+                                y="7.5"
                               />
                               <foreignobject
                                 class="foreign-object"
                                 data-nodelabel="route-8888"
-                                height="902.5"
-                                width="900"
-                                x="-85"
-                                y="12.5"
+                                height="927.5"
+                                width="945"
+                                x="-95"
+                                y="7.5"
                               >
                                 <div
                                   class="custom-group"
@@ -170,17 +170,17 @@ exports[`Canvas Catalog button should NOT be present if \`CatalogModalContext\`
                             <g>
                               <rect
                                 class="phantom-rect"
-                                height="637.5"
-                                width="780"
-                                x="-25"
+                                height="652.5"
+                                width="815"
+                                x="-30"
                                 y="72.5"
                               />
                               <foreignobject
                                 class="foreign-object"
                                 data-nodelabel="choice"
-                                height="637.5"
-                                width="780"
-                                x="-25"
+                                height="652.5"
+                                width="815"
+                                x="-30"
                                 y="72.5"
                               >
                                 <div
@@ -263,17 +263,17 @@ exports[`Canvas Catalog button should NOT be present if \`CatalogModalContext\`
                               <rect
                                 class="phantom-rect"
                                 height="205"
-                                width="390"
-                                x="305"
-                                y="445"
+                                width="400"
+                                x="320"
+                                y="455"
                               />
                               <foreignobject
                                 class="foreign-object"
                                 data-nodelabel="otherwise"
                                 height="205"
-                                width="390"
-                                x="305"
-                                y="445"
+                                width="400"
+                                x="320"
+                                y="455"
                               >
                                 <div
                                   class="custom-group"
@@ -361,16 +361,16 @@ exports[`Canvas Catalog button should NOT be present if \`CatalogModalContext\`
                             >
                               <path
                                 class="pf-topology__edge__background"
-                                d="M455 132.5 L455 263.5"
+                                d="M475 137.5 L475 268.5"
                               />
                               <path
                                 class="pf-topology__edge__link pf-m-solid"
-                                d="M455 132.5 L455 277.5"
+                                d="M475 137.5 L475 282.5"
                                 style="animation-duration: 0s;"
                               />
                               <g
                                 class="pf-topology-connector-arrow pf-topology__edge"
-                                transform="translate(455, 263.5) rotate(90)"
+                                transform="translate(475, 268.5) rotate(90)"
                               >
                                 <polygon
                                   points=" 0,7 0,-7 14,0"
@@ -394,16 +394,16 @@ exports[`Canvas Catalog button should NOT be present if \`CatalogModalContext\`
                             >
                               <path
                                 class="pf-topology__edge__background"
-                                d="M455 277.5 L455 86.5"
+                                d="M475 282.5 L475 86.5"
                               />
                               <path
                                 class="pf-topology__edge__link pf-m-solid"
-                                d="M455 277.5 L455 72.5"
+                                d="M475 282.5 L475 72.5"
                                 style="animation-duration: 0s;"
                               />
                               <g
                                 class="pf-topology-connector-arrow pf-topology__edge"
-                                transform="translate(455, 86.5) rotate(270)"
+                                transform="translate(475, 86.5) rotate(270)"
                               >
                                 <polygon
                                   points=" 0,7 0,-7 14,0"
@@ -427,11 +427,11 @@ exports[`Canvas Catalog button should NOT be present if \`CatalogModalContext\`
                             >
                               <path
                                 class="pf-topology__edge__background"
-                                d="M402.5 580 L402.5 627.5"
+                                d="M422.5 595 L422.5 642.5"
                               />
                               <path
                                 class="pf-topology__edge__link pf-m-dashed"
-                                d="M402.5 580 L402.5 627.5"
+                                d="M422.5 595 L422.5 642.5"
                                 style="animation-duration: 0s;"
                               />
                               <g
@@ -443,12 +443,12 @@ exports[`Canvas Catalog button should NOT be present if \`CatalogModalContext\`
                                 >
                                   <circle
                                     class="pf-topology__node__decorator__bg"
-                                    cx="402.5"
-                                    cy="631.5"
+                                    cx="422.5"
+                                    cy="646.5"
                                     r="14"
                                   />
                                   <g
-                                    transform="translate(402.5, 631.5)"
+                                    transform="translate(422.5, 646.5)"
                                   >
                                     <g
                                       class="pf-topology__node__decorator__icon"
@@ -486,16 +486,16 @@ exports[`Canvas Catalog button should NOT be present if \`CatalogModalContext\`
                             >
                               <path
                                 class="pf-topology__edge__background"
-                                d="M597.5 580 L597.5 613.5"
+                                d="M617.5 595 L617.5 628.5"
                               />
                               <path
                                 class="pf-topology__edge__link pf-m-solid"
-                                d="M597.5 580 L597.5 627.5"
+                                d="M617.5 595 L617.5 642.5"
                                 style="animation-duration: 0s;"
                               />
                               <g
                                 class="pf-topology-connector-arrow pf-topology__edge"
-                                transform="translate(597.5, 613.5) rotate(90)"
+                                transform="translate(617.5, 628.5) rotate(90)"
                               >
                                 <polygon
                                   points=" 0,7 0,-7 14,0"
@@ -519,16 +519,16 @@ exports[`Canvas Catalog button should NOT be present if \`CatalogModalContext\`
                             >
                               <path
                                 class="pf-topology__edge__background"
-                                d="M455 700 L455 793.5"
+                                d="M475 725 L475 818.5"
                               />
                               <path
                                 class="pf-topology__edge__link pf-m-solid"
-                                d="M455 700 L455 807.5"
+                                d="M475 725 L475 832.5"
                                 style="animation-duration: 0s;"
                               />
                               <g
                                 class="pf-topology-connector-arrow pf-topology__edge"
-                                transform="translate(455, 793.5) rotate(90)"
+                                transform="translate(475, 818.5) rotate(90)"
                               >
                                 <polygon
                                   points=" 0,7 0,-7 14,0"
@@ -552,11 +552,11 @@ exports[`Canvas Catalog button should NOT be present if \`CatalogModalContext\`
                             >
                               <path
                                 class="pf-topology__edge__background"
-                                d="M455 845 L455 892.5"
+                                d="M475 870 L475 917.5"
                               />
                               <path
                                 class="pf-topology__edge__link pf-m-dashed"
-                                d="M455 845 L455 892.5"
+                                d="M475 870 L475 917.5"
                                 style="animation-duration: 0s;"
                               />
                               <g
@@ -568,12 +568,12 @@ exports[`Canvas Catalog button should NOT be present if \`CatalogModalContext\`
                                 >
                                   <circle
                                     class="pf-topology__node__decorator__bg"
-                                    cx="455"
-                                    cy="896.5"
+                                    cx="475"
+                                    cy="921.5"
                                     r="14"
                                   />
                                   <g
-                                    transform="translate(455, 896.5)"
+                                    transform="translate(475, 921.5)"
                                   >
                                     <g
                                       class="pf-topology__node__decorator__icon"
@@ -611,13 +611,13 @@ exports[`Canvas Catalog button should NOT be present if \`CatalogModalContext\`
                               data-id="timer-1234"
                               data-kind="node"
                               data-type="node"
-                              transform="translate(417.5, 95)"
+                              transform="translate(437.5, 100)"
                             />
                             <g
                               data-id="set-header-1234"
                               data-kind="node"
                               data-type="node"
-                              transform="translate(417.5, 240)"
+                              transform="translate(437.5, 245)"
                             />
                             <g
                               data-id="choice-1234"
@@ -644,13 +644,13 @@ exports[`Canvas Catalog button should NOT be present if \`CatalogModalContext\`
                                   data-id="amqp-1234"
                                   data-kind="node"
                                   data-type="node"
-                                  transform="translate(560, 505)"
+                                  transform="translate(580, 520)"
                                 />
                                 <g
                                   data-id="log-1234"
                                   data-kind="node"
                                   data-type="node"
-                                  transform="translate(365, 505)"
+                                  transform="translate(385, 520)"
                                 />
                               </g>
                             </g>
@@ -658,7 +658,7 @@ exports[`Canvas Catalog button should NOT be present if \`CatalogModalContext\`
                               data-id="direct-1234"
                               data-kind="node"
                               data-type="node"
-                              transform="translate(417.5, 770)"
+                              transform="translate(437.5, 795)"
                             />
                           </g>
                         </g>
@@ -955,7 +955,7 @@ exports[`Canvas Catalog button should be present if \`CatalogModalContext\` is p
                       />
                       <g
                         data-surface="true"
-                        transform="translate(-0.40555555555555556, -0.5097222222222222) scale(0.0011111111111111111)"
+                        transform="translate(-0.3994708994708995, -0.4986772486772487) scale(0.0010582010582010583)"
                       >
                         <g
                           data-layer-id="bottom"
@@ -972,18 +972,18 @@ exports[`Canvas Catalog button should be present if \`CatalogModalContext\` is p
                             <g>
                               <rect
                                 class="phantom-rect"
-                                height="902.5"
-                                width="900"
-                                x="-85"
-                                y="12.5"
+                                height="927.5"
+                                width="945"
+                                x="-95"
+                                y="7.5"
                               />
                               <foreignobject
                                 class="foreign-object"
                                 data-nodelabel="route-8888"
-                                height="902.5"
-                                width="900"
-                                x="-85"
-                                y="12.5"
+                                height="927.5"
+                                width="945"
+                                x="-95"
+                                y="7.5"
                               >
                                 <div
                                   class="custom-group"
@@ -1064,17 +1064,17 @@ exports[`Canvas Catalog button should be present if \`CatalogModalContext\` is p
                             <g>
                               <rect
                                 class="phantom-rect"
-                                height="637.5"
-                                width="780"
-                                x="-25"
+                                height="652.5"
+                                width="815"
+                                x="-30"
                                 y="72.5"
                               />
                               <foreignobject
                                 class="foreign-object"
                                 data-nodelabel="choice"
-                                height="637.5"
-                                width="780"
-                                x="-25"
+                                height="652.5"
+                                width="815"
+                                x="-30"
                                 y="72.5"
                               >
                                 <div
@@ -1157,17 +1157,17 @@ exports[`Canvas Catalog button should be present if \`CatalogModalContext\` is p
                               <rect
                                 class="phantom-rect"
                                 height="205"
-                                width="390"
-                                x="305"
-                                y="445"
+                                width="400"
+                                x="320"
+                                y="455"
                               />
                               <foreignobject
                                 class="foreign-object"
                                 data-nodelabel="otherwise"
                                 height="205"
-                                width="390"
-                                x="305"
-                                y="445"
+                                width="400"
+                                x="320"
+                                y="455"
                               >
                                 <div
                                   class="custom-group"
@@ -1255,16 +1255,16 @@ exports[`Canvas Catalog button should be present if \`CatalogModalContext\` is p
                             >
                               <path
                                 class="pf-topology__edge__background"
-                                d="M455 132.5 L455 263.5"
+                                d="M475 137.5 L475 268.5"
                               />
                               <path
                                 class="pf-topology__edge__link pf-m-solid"
-                                d="M455 132.5 L455 277.5"
+                                d="M475 137.5 L475 282.5"
                                 style="animation-duration: 0s;"
                               />
                               <g
                                 class="pf-topology-connector-arrow pf-topology__edge"
-                                transform="translate(455, 263.5) rotate(90)"
+                                transform="translate(475, 268.5) rotate(90)"
                               >
                                 <polygon
                                   points=" 0,7 0,-7 14,0"
@@ -1288,16 +1288,16 @@ exports[`Canvas Catalog button should be present if \`CatalogModalContext\` is p
                             >
                               <path
                                 class="pf-topology__edge__background"
-                                d="M455 277.5 L455 86.5"
+                                d="M475 282.5 L475 86.5"
                               />
                               <path
                                 class="pf-topology__edge__link pf-m-solid"
-                                d="M455 277.5 L455 72.5"
+                                d="M475 282.5 L475 72.5"
                                 style="animation-duration: 0s;"
                               />
                               <g
                                 class="pf-topology-connector-arrow pf-topology__edge"
-                                transform="translate(455, 86.5) rotate(270)"
+                                transform="translate(475, 86.5) rotate(270)"
                               >
                                 <polygon
                                   points=" 0,7 0,-7 14,0"
@@ -1321,11 +1321,11 @@ exports[`Canvas Catalog button should be present if \`CatalogModalContext\` is p
                             >
                               <path
                                 class="pf-topology__edge__background"
-                                d="M402.5 580 L402.5 627.5"
+                                d="M422.5 595 L422.5 642.5"
                               />
                               <path
                                 class="pf-topology__edge__link pf-m-dashed"
-                                d="M402.5 580 L402.5 627.5"
+                                d="M422.5 595 L422.5 642.5"
                                 style="animation-duration: 0s;"
                               />
                               <g
@@ -1337,12 +1337,12 @@ exports[`Canvas Catalog button should be present if \`CatalogModalContext\` is p
                                 >
                                   <circle
                                     class="pf-topology__node__decorator__bg"
-                                    cx="402.5"
-                                    cy="631.5"
+                                    cx="422.5"
+                                    cy="646.5"
                                     r="14"
                                   />
                                   <g
-                                    transform="translate(402.5, 631.5)"
+                                    transform="translate(422.5, 646.5)"
                                   >
                                     <g
                                       class="pf-topology__node__decorator__icon"
@@ -1380,16 +1380,16 @@ exports[`Canvas Catalog button should be present if \`CatalogModalContext\` is p
                             >
                               <path
                                 class="pf-topology__edge__background"
-                                d="M597.5 580 L597.5 613.5"
+                                d="M617.5 595 L617.5 628.5"
                               />
                               <path
                                 class="pf-topology__edge__link pf-m-solid"
-                                d="M597.5 580 L597.5 627.5"
+                                d="M617.5 595 L617.5 642.5"
                                 style="animation-duration: 0s;"
                               />
                               <g
                                 class="pf-topology-connector-arrow pf-topology__edge"
-                                transform="translate(597.5, 613.5) rotate(90)"
+                                transform="translate(617.5, 628.5) rotate(90)"
                               >
                                 <polygon
                                   points=" 0,7 0,-7 14,0"
@@ -1413,16 +1413,16 @@ exports[`Canvas Catalog button should be present if \`CatalogModalContext\` is p
                             >
                               <path
                                 class="pf-topology__edge__background"
-                                d="M455 700 L455 793.5"
+                                d="M475 725 L475 818.5"
                               />
                               <path
                                 class="pf-topology__edge__link pf-m-solid"
-                                d="M455 700 L455 807.5"
+                                d="M475 725 L475 832.5"
                                 style="animation-duration: 0s;"
                               />
                               <g
                                 class="pf-topology-connector-arrow pf-topology__edge"
-                                transform="translate(455, 793.5) rotate(90)"
+                                transform="translate(475, 818.5) rotate(90)"
                               >
                                 <polygon
                                   points=" 0,7 0,-7 14,0"
@@ -1446,11 +1446,11 @@ exports[`Canvas Catalog button should be present if \`CatalogModalContext\` is p
                             >
                               <path
                                 class="pf-topology__edge__background"
-                                d="M455 845 L455 892.5"
+                                d="M475 870 L475 917.5"
                               />
                               <path
                                 class="pf-topology__edge__link pf-m-dashed"
-                                d="M455 845 L455 892.5"
+                                d="M475 870 L475 917.5"
                                 style="animation-duration: 0s;"
                               />
                               <g
@@ -1462,12 +1462,12 @@ exports[`Canvas Catalog button should be present if \`CatalogModalContext\` is p
                                 >
                                   <circle
                                     class="pf-topology__node__decorator__bg"
-                                    cx="455"
-                                    cy="896.5"
+                                    cx="475"
+                                    cy="921.5"
                                     r="14"
                                   />
                                   <g
-                                    transform="translate(455, 896.5)"
+                                    transform="translate(475, 921.5)"
                                   >
                                     <g
                                       class="pf-topology__node__decorator__icon"
@@ -1505,13 +1505,13 @@ exports[`Canvas Catalog button should be present if \`CatalogModalContext\` is p
                               data-id="timer-1234"
                               data-kind="node"
                               data-type="node"
-                              transform="translate(417.5, 95)"
+                              transform="translate(437.5, 100)"
                             />
                             <g
                               data-id="set-header-1234"
                               data-kind="node"
                               data-type="node"
-                              transform="translate(417.5, 240)"
+                              transform="translate(437.5, 245)"
                             />
                             <g
                               data-id="choice-1234"
@@ -1538,13 +1538,13 @@ exports[`Canvas Catalog button should be present if \`CatalogModalContext\` is p
                                   data-id="amqp-1234"
                                   data-kind="node"
                                   data-type="node"
-                                  transform="translate(560, 505)"
+                                  transform="translate(580, 520)"
                                 />
                                 <g
                                   data-id="log-1234"
                                   data-kind="node"
                                   data-type="node"
-                                  transform="translate(365, 505)"
+                                  transform="translate(385, 520)"
                                 />
                               </g>
                             </g>
@@ -1552,7 +1552,7 @@ exports[`Canvas Catalog button should be present if \`CatalogModalContext\` is p
                               data-id="direct-1234"
                               data-kind="node"
                               data-type="node"
-                              transform="translate(417.5, 770)"
+                              transform="translate(437.5, 795)"
                             />
                           </g>
                         </g>
@@ -2661,7 +2661,7 @@ exports[`Canvas should render correctly 1`] = `
                       />
                       <g
                         data-surface="true"
-                        transform="translate(-0.40555555555555556, -0.5097222222222222) scale(0.0011111111111111111)"
+                        transform="translate(-0.3994708994708995, -0.4986772486772487) scale(0.0010582010582010583)"
                       >
                         <g
                           data-layer-id="bottom"
@@ -2678,18 +2678,18 @@ exports[`Canvas should render correctly 1`] = `
                             <g>
                               <rect
                                 class="phantom-rect"
-                                height="902.5"
-                                width="900"
-                                x="-85"
-                                y="12.5"
+                                height="927.5"
+                                width="945"
+                                x="-95"
+                                y="7.5"
                               />
                               <foreignobject
                                 class="foreign-object"
                                 data-nodelabel="route-8888"
-                                height="902.5"
-                                width="900"
-                                x="-85"
-                                y="12.5"
+                                height="927.5"
+                                width="945"
+                                x="-95"
+                                y="7.5"
                               >
                                 <div
                                   class="custom-group"
@@ -2770,17 +2770,17 @@ exports[`Canvas should render correctly 1`] = `
                             <g>
                               <rect
                                 class="phantom-rect"
-                                height="637.5"
-                                width="780"
-                                x="-25"
+                                height="652.5"
+                                width="815"
+                                x="-30"
                                 y="72.5"
                               />
                               <foreignobject
                                 class="foreign-object"
                                 data-nodelabel="choice"
-                                height="637.5"
-                                width="780"
-                                x="-25"
+                                height="652.5"
+                                width="815"
+                                x="-30"
                                 y="72.5"
                               >
                                 <div
@@ -2863,17 +2863,17 @@ exports[`Canvas should render correctly 1`] = `
                               <rect
                                 class="phantom-rect"
                                 height="205"
-                                width="390"
-                                x="305"
-                                y="445"
+                                width="400"
+                                x="320"
+                                y="455"
                               />
                               <foreignobject
                                 class="foreign-object"
                                 data-nodelabel="otherwise"
                                 height="205"
-                                width="390"
-                                x="305"
-                                y="445"
+                                width="400"
+                                x="320"
+                                y="455"
                               >
                                 <div
                                   class="custom-group"
@@ -2961,16 +2961,16 @@ exports[`Canvas should render correctly 1`] = `
                             >
                               <path
                                 class="pf-topology__edge__background"
-                                d="M455 132.5 L455 263.5"
+                                d="M475 137.5 L475 268.5"
                               />
                               <path
                                 class="pf-topology__edge__link pf-m-solid"
-                                d="M455 132.5 L455 277.5"
+                                d="M475 137.5 L475 282.5"
                                 style="animation-duration: 0s;"
                               />
                               <g
                                 class="pf-topology-connector-arrow pf-topology__edge"
-                                transform="translate(455, 263.5) rotate(90)"
+                                transform="translate(475, 268.5) rotate(90)"
                               >
                                 <polygon
                                   points=" 0,7 0,-7 14,0"
@@ -2994,16 +2994,16 @@ exports[`Canvas should render correctly 1`] = `
                             >
                               <path
                                 class="pf-topology__edge__background"
-                                d="M455 277.5 L455 86.5"
+                                d="M475 282.5 L475 86.5"
                               />
                               <path
                                 class="pf-topology__edge__link pf-m-solid"
-                                d="M455 277.5 L455 72.5"
+                                d="M475 282.5 L475 72.5"
                                 style="animation-duration: 0s;"
                               />
                               <g
                                 class="pf-topology-connector-arrow pf-topology__edge"
-                                transform="translate(455, 86.5) rotate(270)"
+                                transform="translate(475, 86.5) rotate(270)"
                               >
                                 <polygon
                                   points=" 0,7 0,-7 14,0"
@@ -3027,11 +3027,11 @@ exports[`Canvas should render correctly 1`] = `
                             >
                               <path
                                 class="pf-topology__edge__background"
-                                d="M402.5 580 L402.5 627.5"
+                                d="M422.5 595 L422.5 642.5"
                               />
                               <path
                                 class="pf-topology__edge__link pf-m-dashed"
-                                d="M402.5 580 L402.5 627.5"
+                                d="M422.5 595 L422.5 642.5"
                                 style="animation-duration: 0s;"
                               />
                               <g
@@ -3043,12 +3043,12 @@ exports[`Canvas should render correctly 1`] = `
                                 >
                                   <circle
                                     class="pf-topology__node__decorator__bg"
-                                    cx="402.5"
-                                    cy="631.5"
+                                    cx="422.5"
+                                    cy="646.5"
                                     r="14"
                                   />
                                   <g
-                                    transform="translate(402.5, 631.5)"
+                                    transform="translate(422.5, 646.5)"
                                   >
                                     <g
                                       class="pf-topology__node__decorator__icon"
@@ -3086,16 +3086,16 @@ exports[`Canvas should render correctly 1`] = `
                             >
                               <path
                                 class="pf-topology__edge__background"
-                                d="M597.5 580 L597.5 613.5"
+                                d="M617.5 595 L617.5 628.5"
                               />
                               <path
                                 class="pf-topology__edge__link pf-m-solid"
-                                d="M597.5 580 L597.5 627.5"
+                                d="M617.5 595 L617.5 642.5"
                                 style="animation-duration: 0s;"
                               />
                               <g
                                 class="pf-topology-connector-arrow pf-topology__edge"
-                                transform="translate(597.5, 613.5) rotate(90)"
+                                transform="translate(617.5, 628.5) rotate(90)"
                               >
                                 <polygon
                                   points=" 0,7 0,-7 14,0"
@@ -3119,16 +3119,16 @@ exports[`Canvas should render correctly 1`] = `
                             >
                               <path
                                 class="pf-topology__edge__background"
-                                d="M455 700 L455 793.5"
+                                d="M475 725 L475 818.5"
                               />
                               <path
                                 class="pf-topology__edge__link pf-m-solid"
-                                d="M455 700 L455 807.5"
+                                d="M475 725 L475 832.5"
                                 style="animation-duration: 0s;"
                               />
                               <g
                                 class="pf-topology-connector-arrow pf-topology__edge"
-                                transform="translate(455, 793.5) rotate(90)"
+                                transform="translate(475, 818.5) rotate(90)"
                               >
                                 <polygon
                                   points=" 0,7 0,-7 14,0"
@@ -3152,11 +3152,11 @@ exports[`Canvas should render correctly 1`] = `
                             >
                               <path
                                 class="pf-topology__edge__background"
-                                d="M455 845 L455 892.5"
+                                d="M475 870 L475 917.5"
                               />
                               <path
                                 class="pf-topology__edge__link pf-m-dashed"
-                                d="M455 845 L455 892.5"
+                                d="M475 870 L475 917.5"
                                 style="animation-duration: 0s;"
                               />
                               <g
@@ -3168,12 +3168,12 @@ exports[`Canvas should render correctly 1`] = `
                                 >
                                   <circle
                                     class="pf-topology__node__decorator__bg"
-                                    cx="455"
-                                    cy="896.5"
+                                    cx="475"
+                                    cy="921.5"
                                     r="14"
                                   />
                                   <g
-                                    transform="translate(455, 896.5)"
+                                    transform="translate(475, 921.5)"
                                   >
                                     <g
                                       class="pf-topology__node__decorator__icon"
@@ -3211,13 +3211,13 @@ exports[`Canvas should render correctly 1`] = `
                               data-id="timer-1234"
                               data-kind="node"
                               data-type="node"
-                              transform="translate(417.5, 95)"
+                              transform="translate(437.5, 100)"
                             />
                             <g
                               data-id="set-header-1234"
                               data-kind="node"
                               data-type="node"
-                              transform="translate(417.5, 240)"
+                              transform="translate(437.5, 245)"
                             />
                             <g
                               data-id="choice-1234"
@@ -3244,13 +3244,13 @@ exports[`Canvas should render correctly 1`] = `
                                   data-id="amqp-1234"
                                   data-kind="node"
                                   data-type="node"
-                                  transform="translate(560, 505)"
+                                  transform="translate(580, 520)"
                                 />
                                 <g
                                   data-id="log-1234"
                                   data-kind="node"
                                   data-type="node"
-                                  transform="translate(365, 505)"
+                                  transform="translate(385, 520)"
                                 />
                               </g>
                             </g>
@@ -3258,7 +3258,7 @@ exports[`Canvas should render correctly 1`] = `
                               data-id="direct-1234"
                               data-kind="node"
                               data-type="node"
-                              transform="translate(417.5, 770)"
+                              transform="translate(437.5, 795)"
                             />
                           </g>
                         </g>
@@ -3555,7 +3555,7 @@ exports[`Canvas should render correctly with more routes  1`] = `
                       />
                       <g
                         data-surface="true"
-                        transform="translate(-0.40555555555555556, -0.5097222222222222) scale(0.0011111111111111111)"
+                        transform="translate(-0.3994708994708995, -0.4986772486772487) scale(0.0010582010582010583)"
                       >
                         <g
                           data-layer-id="bottom"
@@ -3572,18 +3572,18 @@ exports[`Canvas should render correctly with more routes  1`] = `
                             <g>
                               <rect
                                 class="phantom-rect"
-                                height="902.5"
-                                width="900"
-                                x="-85"
-                                y="12.5"
+                                height="927.5"
+                                width="945"
+                                x="-95"
+                                y="7.5"
                               />
                               <foreignobject
                                 class="foreign-object"
                                 data-nodelabel="route-8888"
-                                height="902.5"
-                                width="900"
-                                x="-85"
-                                y="12.5"
+                                height="927.5"
+                                width="945"
+                                x="-95"
+                                y="7.5"
                               >
                                 <div
                                   class="custom-group"
@@ -3664,17 +3664,17 @@ exports[`Canvas should render correctly with more routes  1`] = `
                             <g>
                               <rect
                                 class="phantom-rect"
-                                height="637.5"
-                                width="780"
-                                x="-25"
+                                height="652.5"
+                                width="815"
+                                x="-30"
                                 y="72.5"
                               />
                               <foreignobject
                                 class="foreign-object"
                                 data-nodelabel="choice"
-                                height="637.5"
-                                width="780"
-                                x="-25"
+                                height="652.5"
+                                width="815"
+                                x="-30"
                                 y="72.5"
                               >
                                 <div
@@ -3757,17 +3757,17 @@ exports[`Canvas should render correctly with more routes  1`] = `
                               <rect
                                 class="phantom-rect"
                                 height="205"
-                                width="390"
-                                x="305"
-                                y="445"
+                                width="400"
+                                x="320"
+                                y="455"
                               />
                               <foreignobject
                                 class="foreign-object"
                                 data-nodelabel="otherwise"
                                 height="205"
-                                width="390"
-                                x="305"
-                                y="445"
+                                width="400"
+                                x="320"
+                                y="455"
                               >
                                 <div
                                   class="custom-group"
@@ -3855,16 +3855,16 @@ exports[`Canvas should render correctly with more routes  1`] = `
                             >
                               <path
                                 class="pf-topology__edge__background"
-                                d="M455 132.5 L455 263.5"
+                                d="M475 137.5 L475 268.5"
                               />
                               <path
                                 class="pf-topology__edge__link pf-m-solid"
-                                d="M455 132.5 L455 277.5"
+                                d="M475 137.5 L475 282.5"
                                 style="animation-duration: 0s;"
                               />
                               <g
                                 class="pf-topology-connector-arrow pf-topology__edge"
-                                transform="translate(455, 263.5) rotate(90)"
+                                transform="translate(475, 268.5) rotate(90)"
                               >
                                 <polygon
                                   points=" 0,7 0,-7 14,0"
@@ -3888,16 +3888,16 @@ exports[`Canvas should render correctly with more routes  1`] = `
                             >
                               <path
                                 class="pf-topology__edge__background"
-                                d="M455 277.5 L455 86.5"
+                                d="M475 282.5 L475 86.5"
                               />
                               <path
                                 class="pf-topology__edge__link pf-m-solid"
-                                d="M455 277.5 L455 72.5"
+                                d="M475 282.5 L475 72.5"
                                 style="animation-duration: 0s;"
                               />
                               <g
                                 class="pf-topology-connector-arrow pf-topology__edge"
-                                transform="translate(455, 86.5) rotate(270)"
+                                transform="translate(475, 86.5) rotate(270)"
                               >
                                 <polygon
                                   points=" 0,7 0,-7 14,0"
@@ -3921,11 +3921,11 @@ exports[`Canvas should render correctly with more routes  1`] = `
                             >
                               <path
                                 class="pf-topology__edge__background"
-                                d="M402.5 580 L402.5 627.5"
+                                d="M422.5 595 L422.5 642.5"
                               />
                               <path
                                 class="pf-topology__edge__link pf-m-dashed"
-                                d="M402.5 580 L402.5 627.5"
+                                d="M422.5 595 L422.5 642.5"
                                 style="animation-duration: 0s;"
                               />
                               <g
@@ -3937,12 +3937,12 @@ exports[`Canvas should render correctly with more routes  1`] = `
                                 >
                                   <circle
                                     class="pf-topology__node__decorator__bg"
-                                    cx="402.5"
-                                    cy="631.5"
+                                    cx="422.5"
+                                    cy="646.5"
                                     r="14"
                                   />
                                   <g
-                                    transform="translate(402.5, 631.5)"
+                                    transform="translate(422.5, 646.5)"
                                   >
                                     <g
                                       class="pf-topology__node__decorator__icon"
@@ -3980,16 +3980,16 @@ exports[`Canvas should render correctly with more routes  1`] = `
                             >
                               <path
                                 class="pf-topology__edge__background"
-                                d="M597.5 580 L597.5 613.5"
+                                d="M617.5 595 L617.5 628.5"
                               />
                               <path
                                 class="pf-topology__edge__link pf-m-solid"
-                                d="M597.5 580 L597.5 627.5"
+                                d="M617.5 595 L617.5 642.5"
                                 style="animation-duration: 0s;"
                               />
                               <g
                                 class="pf-topology-connector-arrow pf-topology__edge"
-                                transform="translate(597.5, 613.5) rotate(90)"
+                                transform="translate(617.5, 628.5) rotate(90)"
                               >
                                 <polygon
                                   points=" 0,7 0,-7 14,0"
@@ -4013,16 +4013,16 @@ exports[`Canvas should render correctly with more routes  1`] = `
                             >
                               <path
                                 class="pf-topology__edge__background"
-                                d="M455 700 L455 793.5"
+                                d="M475 725 L475 818.5"
                               />
                               <path
                                 class="pf-topology__edge__link pf-m-solid"
-                                d="M455 700 L455 807.5"
+                                d="M475 725 L475 832.5"
                                 style="animation-duration: 0s;"
                               />
                               <g
                                 class="pf-topology-connector-arrow pf-topology__edge"
-                                transform="translate(455, 793.5) rotate(90)"
+                                transform="translate(475, 818.5) rotate(90)"
                               >
                                 <polygon
                                   points=" 0,7 0,-7 14,0"
@@ -4046,11 +4046,11 @@ exports[`Canvas should render correctly with more routes  1`] = `
                             >
                               <path
                                 class="pf-topology__edge__background"
-                                d="M455 845 L455 892.5"
+                                d="M475 870 L475 917.5"
                               />
                               <path
                                 class="pf-topology__edge__link pf-m-dashed"
-                                d="M455 845 L455 892.5"
+                                d="M475 870 L475 917.5"
                                 style="animation-duration: 0s;"
                               />
                               <g
@@ -4062,12 +4062,12 @@ exports[`Canvas should render correctly with more routes  1`] = `
                                 >
                                   <circle
                                     class="pf-topology__node__decorator__bg"
-                                    cx="455"
-                                    cy="896.5"
+                                    cx="475"
+                                    cy="921.5"
                                     r="14"
                                   />
                                   <g
-                                    transform="translate(455, 896.5)"
+                                    transform="translate(475, 921.5)"
                                   >
                                     <g
                                       class="pf-topology__node__decorator__icon"
@@ -4105,13 +4105,13 @@ exports[`Canvas should render correctly with more routes  1`] = `
                               data-id="timer-1234"
                               data-kind="node"
                               data-type="node"
-                              transform="translate(417.5, 95)"
+                              transform="translate(437.5, 100)"
                             />
                             <g
                               data-id="set-header-1234"
                               data-kind="node"
                               data-type="node"
-                              transform="translate(417.5, 240)"
+                              transform="translate(437.5, 245)"
                             />
                             <g
                               data-id="choice-1234"
@@ -4138,13 +4138,13 @@ exports[`Canvas should render correctly with more routes  1`] = `
                                   data-id="amqp-1234"
                                   data-kind="node"
                                   data-type="node"
-                                  transform="translate(560, 505)"
+                                  transform="translate(580, 520)"
                                 />
                                 <g
                                   data-id="log-1234"
                                   data-kind="node"
                                   data-type="node"
-                                  transform="translate(365, 505)"
+                                  transform="translate(385, 520)"
                                 />
                               </g>
                             </g>
@@ -4152,7 +4152,7 @@ exports[`Canvas should render correctly with more routes  1`] = `
                               data-id="direct-1234"
                               data-kind="node"
                               data-type="node"
-                              transform="translate(417.5, 770)"
+                              transform="translate(437.5, 795)"
                             />
                           </g>
                         </g>
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 5f040493f..76bf868d4 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
@@ -223,7 +223,7 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a group wi
     "label": "group-1234",
     "parentNode": undefined,
     "style": {
-      "padding": 60,
+      "padding": 65,
     },
     "type": "group",
   },
diff --git a/packages/ui/src/components/Visualization/Canvas/canvas.defaults.ts b/packages/ui/src/components/Visualization/Canvas/canvas.defaults.ts
index ca6795c8d..aac38b9b8 100644
--- a/packages/ui/src/components/Visualization/Canvas/canvas.defaults.ts
+++ b/packages/ui/src/components/Visualization/Canvas/canvas.defaults.ts
@@ -5,6 +5,6 @@ export class CanvasDefaults {
   static readonly DEFAULT_LAYOUT = LayoutType.DagreVertical;
   static readonly DEFAULT_NODE_SHAPE = NodeShape.rect;
   static readonly DEFAULT_NODE_DIAMETER = 75;
-  static readonly DEFAULT_GROUP_PADDING = 50;
+  static readonly DEFAULT_GROUP_PADDING = 65;
   static readonly DEFAULT_SIDEBAR_WIDTH = 500;
 }
diff --git a/packages/ui/src/components/Visualization/Canvas/flow.service.ts b/packages/ui/src/components/Visualization/Canvas/flow.service.ts
index c93e06262..caa5b04b6 100644
--- a/packages/ui/src/components/Visualization/Canvas/flow.service.ts
+++ b/packages/ui/src/components/Visualization/Canvas/flow.service.ts
@@ -33,7 +33,7 @@ export class FlowService {
       });
 
       const containerId = vizNodeParam.id;
-      node = this.getContainer(containerId, {
+      node = this.getGroup(containerId, {
         label: containerId,
         children: children.map((child) => child.id),
         parentNode: vizNodeParam.getParentNode()?.id,
@@ -75,7 +75,7 @@ export class FlowService {
     return edges;
   }
 
-  private static getContainer(
+  private static getGroup(
     id: string,
     options: { label?: string; children?: string[]; parentNode?: string; data?: CanvasNode['data'] } = {},
   ): CanvasNode {
@@ -88,7 +88,7 @@ export class FlowService {
       parentNode: options.parentNode,
       data: options.data,
       style: {
-        padding: CanvasDefaults.DEFAULT_NODE_DIAMETER * 0.8,
+        padding: CanvasDefaults.DEFAULT_GROUP_PADDING,
       },
     };
   }
diff --git a/packages/ui/src/components/Visualization/Custom/Group/CustomGroupExpanded.tsx b/packages/ui/src/components/Visualization/Custom/Group/CustomGroupExpanded.tsx
index 6abf174c8..67659e082 100644
--- a/packages/ui/src/components/Visualization/Custom/Group/CustomGroupExpanded.tsx
+++ b/packages/ui/src/components/Visualization/Custom/Group/CustomGroupExpanded.tsx
@@ -46,7 +46,7 @@ export const CustomGroupExpanded: FunctionComponent<CustomGroupExpandedProps> =
               x={boxRef.current.x}
               y={boxRef.current.y}
               width={boxRef.current.width}
-              height={boxRef.current.height + 10}
+              height={boxRef.current.height}
             />
             <foreignObject
               data-nodelabel={label}
@@ -54,7 +54,7 @@ export const CustomGroupExpanded: FunctionComponent<CustomGroupExpandedProps> =
               x={boxRef.current.x}
               y={boxRef.current.y}
               width={boxRef.current.width}
-              height={boxRef.current.height + 10}
+              height={boxRef.current.height}
             >
               <div className={className}>
                 <div className="custom-group__title">
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 de387427c..2a5c75d9d 100644
--- a/packages/ui/src/tests/__snapshots__/nodes-edges.test.ts.snap
+++ b/packages/ui/src/tests/__snapshots__/nodes-edges.test.ts.snap
@@ -1860,7 +1860,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
     "label": "when-1234",
     "parentNode": "choice-1234",
     "style": {
-      "padding": 60,
+      "padding": 65,
     },
     "type": "group",
   },
@@ -2951,7 +2951,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
     "label": "otherwise-1234",
     "parentNode": "choice-1234",
     "style": {
-      "padding": 60,
+      "padding": 65,
     },
     "type": "group",
   },
@@ -3500,7 +3500,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
     "label": "choice-1234",
     "parentNode": "route-1234",
     "style": {
-      "padding": 60,
+      "padding": 65,
     },
     "type": "group",
   },
@@ -4906,7 +4906,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
     "label": "route-1234",
     "parentNode": undefined,
     "style": {
-      "padding": 60,
+      "padding": 65,
     },
     "type": "group",
   },