diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramBaseHandle.ts b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramBaseHandle.ts
new file mode 100644
index 000000000..79c271c49
--- /dev/null
+++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramBaseHandle.ts
@@ -0,0 +1,14 @@
+import styled from '@emotion/styled';
+import { Handle } from '@xyflow/react';
+import { NODE_HANDLE_HEIGHT_PX } from '@/workflow/workflow-diagram/constants/NodeHandleHeightPx';
+import { NODE_HANDLE_WIDTH_PX } from '@/workflow/workflow-diagram/constants/NodeHandleWidthPx';
+import { CREATE_STEP_NODE_WIDTH } from '@/workflow/workflow-diagram/constants/CreateStepNodeWidth';
+
+export const StyledHandle = styled(Handle)`
+  height: ${NODE_HANDLE_HEIGHT_PX}px;
+  width: ${NODE_HANDLE_WIDTH_PX}px;
+  left: ${CREATE_STEP_NODE_WIDTH}px;
+  visibility: hidden;
+`;
+
+export { StyledHandle as WorkflowDiagramBaseHandle };
diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCreateStepNode.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCreateStepNode.tsx
index 3b253d4e2..50be5747c 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCreateStepNode.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCreateStepNode.tsx
@@ -1,27 +1,20 @@
-import { StyledHandle } from '@/workflow/workflow-diagram/components/WorkflowDiagramStepNodeBase';
-import { NODE_BORDER_WIDTH } from '@/workflow/workflow-diagram/constants/NodeBorderWidth';
-import { NODE_ICON_LEFT_MARGIN } from '@/workflow/workflow-diagram/constants/NodeIconLeftMargin';
-import { NODE_ICON_WIDTH } from '@/workflow/workflow-diagram/constants/NodeIconWidth';
 import styled from '@emotion/styled';
 import { Position } from '@xyflow/react';
 import { IconButton } from 'twenty-ui/input';
 import { IconPlus } from 'twenty-ui/display';
+import { WorkflowDiagramBaseHandle } from '@/workflow/workflow-diagram/components/WorkflowDiagramBaseHandle';
+import { CREATE_STEP_NODE_WIDTH } from '@/workflow/workflow-diagram/constants/CreateStepNodeWidth';
 
 const StyledContainer = styled.div`
+  left: ${CREATE_STEP_NODE_WIDTH / 2}px;
   padding-top: ${({ theme }) => theme.spacing(3)};
-  transform: translateX(-50%);
   position: relative;
-  left: ${NODE_ICON_WIDTH + NODE_ICON_LEFT_MARGIN + NODE_BORDER_WIDTH}px;
-`;
-
-const StyledTargetHandle = styled(StyledHandle)`
-  visibility: hidden;
 `;
 
 export const WorkflowDiagramCreateStepNode = () => {
   return (
     <StyledContainer>
-      <StyledTargetHandle type="target" position={Position.Top} />
+      <WorkflowDiagramBaseHandle type="target" position={Position.Top} />
 
       <IconButton Icon={IconPlus} size="medium" ariaLabel="Add a step" />
     </StyledContainer>
diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramDefaultEdge.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramDefaultEdge.tsx
index 80e003bf9..075ce242b 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramDefaultEdge.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramDefaultEdge.tsx
@@ -1,12 +1,11 @@
 import { useTheme } from '@emotion/react';
 import { BaseEdge, EdgeProps, getStraightPath } from '@xyflow/react';
+import { CREATE_STEP_NODE_WIDTH } from '@/workflow/workflow-diagram/constants/CreateStepNodeWidth';
 
 type WorkflowDiagramDefaultEdgeProps = EdgeProps;
 
 export const WorkflowDiagramDefaultEdge = ({
-  sourceX,
   sourceY,
-  targetX,
   targetY,
   markerStart,
   markerEnd,
@@ -14,9 +13,9 @@ export const WorkflowDiagramDefaultEdge = ({
   const theme = useTheme();
 
   const [edgePath] = getStraightPath({
-    sourceX,
+    sourceX: CREATE_STEP_NODE_WIDTH,
     sourceY,
-    targetX,
+    targetX: CREATE_STEP_NODE_WIDTH,
     targetY,
   });
 
diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramStepNodeBase.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramStepNodeBase.tsx
index c6a5769b4..f93a6ab1b 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramStepNodeBase.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramStepNodeBase.tsx
@@ -1,17 +1,14 @@
 import { NODE_BORDER_WIDTH } from '@/workflow/workflow-diagram/constants/NodeBorderWidth';
-import { NODE_HANDLE_HEIGHT_PX } from '@/workflow/workflow-diagram/constants/NodeHandleHeightPx';
-import { NODE_HANDLE_WIDTH_PX } from '@/workflow/workflow-diagram/constants/NodeHandleWidthPx';
-import { NODE_ICON_LEFT_MARGIN } from '@/workflow/workflow-diagram/constants/NodeIconLeftMargin';
-import { NODE_ICON_WIDTH } from '@/workflow/workflow-diagram/constants/NodeIconWidth';
 import { WorkflowDiagramStepNodeData } from '@/workflow/workflow-diagram/types/WorkflowDiagram';
 import { WorkflowDiagramNodeVariant } from '@/workflow/workflow-diagram/types/WorkflowDiagramNodeVariant';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import { Handle, Position } from '@xyflow/react';
+import { Position } from '@xyflow/react';
 import React from 'react';
 import { capitalize, isDefined } from 'twenty-shared/utils';
 import { Label, OverflowingTextWithTooltip } from 'twenty-ui/display';
 import { Loader } from 'twenty-ui/feedback';
+import { WorkflowDiagramBaseHandle } from '@/workflow/workflow-diagram/components/WorkflowDiagramBaseHandle';
 
 const StyledStepNodeContainer = styled.div`
   display: flex;
@@ -164,21 +161,6 @@ const StyledStepNodeLabel = styled.div<{
   }
 `;
 
-export const StyledHandle = styled(Handle)`
-  height: ${NODE_HANDLE_HEIGHT_PX}px;
-  width: ${NODE_HANDLE_WIDTH_PX}px;
-`;
-
-const StyledSourceHandle = styled(StyledHandle)`
-  left: ${NODE_ICON_WIDTH + NODE_ICON_LEFT_MARGIN + NODE_BORDER_WIDTH}px;
-  visibility: hidden;
-`;
-
-const StyledTargetHandle = styled(StyledSourceHandle)`
-  left: ${NODE_ICON_WIDTH + NODE_ICON_LEFT_MARGIN + NODE_BORDER_WIDTH}px;
-  visibility: hidden;
-`;
-
 const StyledRightFloatingElementContainer = styled.div`
   display: flex;
   align-items: center;
@@ -205,7 +187,7 @@ export const WorkflowDiagramStepNodeBase = ({
   return (
     <StyledStepNodeContainer className="workflow-node-container">
       {nodeType !== 'trigger' ? (
-        <StyledTargetHandle type="target" position={Position.Top} />
+        <WorkflowDiagramBaseHandle type="target" position={Position.Top} />
       ) : null}
 
       <StyledStepNodeType variant="small" nodeVariant={variant}>
@@ -226,7 +208,7 @@ export const WorkflowDiagramStepNodeBase = ({
         ) : null}
       </StyledStepNodeInnerContainer>
 
-      <StyledSourceHandle type="source" position={Position.Bottom} />
+      <WorkflowDiagramBaseHandle type="source" position={Position.Bottom} />
     </StyledStepNodeContainer>
   );
 };
diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/CreateStepNodeWidth.ts b/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/CreateStepNodeWidth.ts
new file mode 100644
index 000000000..11026a62a
--- /dev/null
+++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/CreateStepNodeWidth.ts
@@ -0,0 +1,8 @@
+import { NODE_BORDER_WIDTH } from '@/workflow/workflow-diagram/constants/NodeBorderWidth';
+
+const STEP_ICON_WIDTH = 24;
+
+const STEP_PADDING = 8;
+
+export const CREATE_STEP_NODE_WIDTH =
+  STEP_ICON_WIDTH + STEP_PADDING + NODE_BORDER_WIDTH;
diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/NodeIconLeftMargin.ts b/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/NodeIconLeftMargin.ts
deleted file mode 100644
index ad4ccb3a3..000000000
--- a/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/NodeIconLeftMargin.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { THEME_COMMON } from 'twenty-ui/theme';
-export const NODE_ICON_LEFT_MARGIN = Number(
-  THEME_COMMON.spacing(2).replace('px', ''),
-);
diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/NodeIconWidth.ts b/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/NodeIconWidth.ts
deleted file mode 100644
index 6e87e6379..000000000
--- a/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/NodeIconWidth.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { THEME_COMMON } from 'twenty-ui/theme';
-export const NODE_ICON_WIDTH = Number(
-  THEME_COMMON.spacing(6).replace('px', ''),
-);