diff --git a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css
index 40f49d0..19f2b01 100644
--- a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css
+++ b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css
@@ -74,25 +74,25 @@
   }
 
   /* minimap */
-  .dec-root .react-flow__minimap{
+  .dec-root .react-flow__minimap {
     --xy-minimap-background-color: var(--dec-minimap-bg);
     --xy-minimap-mask-background-color: var(--dec-minimap-mask);
     --xy-minimap-mask-stroke-color: var(--dec-minimap-viewport);
     --xy-minimap-node-background-color: var(--dec-minimap-node);
     --xy-minimap-node-stroke-color: var(--dec-minimap-node-stroke);
     --xy-minimap-node-stroke-width: 2;
-    
+
     border: 1px solid var(--dec-minimap-border);
-    border-radius:8px;
+    border-radius: 8px;
     box-shadow: 0 4px 12px var(--dec-minimap-shadow);
     overflow: hidden;
-}
+  }
 
   .dec-root .react-flow__minimap-node {
     fill: var(--dec-minimap-node);
     stroke: var(--dec-minimap-node-stroke);
     stroke-width: 2;
-}
+  }
 }
 
 /* custom nodes */
@@ -316,13 +316,21 @@
   .dec-root .dec-task-node-badge,
   .dec-root .dec-task-node-badge-custom {
     color: color-mix(in srgb, var(--task-node-color) 60%, black);
-    background-color: color-mix(in srgb, var(--task-node-color) 12%, transparent);
+    background-color: color-mix(
+      in srgb,
+      var(--task-node-color) 12%,
+      transparent
+    );
   }
 
   .dec-root.dark .dec-task-node-badge,
   .dec-root.dark .dec-task-node-badge-custom {
     color: color-mix(in srgb, var(--task-node-color) 18%, white);
-    background-color: color-mix(in srgb, var(--task-node-color) 40%, transparent);
+    background-color: color-mix(
+      in srgb,
+      var(--task-node-color) 40%,
+      transparent
+    );
   }
 
   .dec-root .dec-task-node-badge {
@@ -429,7 +437,53 @@
     stroke-width: 2.25;
   }
 
-    /* end validation errors */
+  /* end validation errors */
+
+  .dec-root .dec-start-end-node {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .dec-root .dec-start-node, .dec-root .dec-end-node{
+    width: 45px;
+    height: 45px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+
+    @apply dec:border
+     dec:border-slate-400
+     dec:bg-slate-100;
+  }
+
+  .dec-root .dec-end-node-inner {
+    position: absolute;
+    inset: 6px;
+    border-radius: 50%;
+    pointer-events: none;
+
+    @apply dec:border
+     dec:border-slate-400
+     dec:bg-slate-100;
+  }
+
+  .dec-root.dark .dec-start-node,
+  .dec-root.dark .dec-end-node {
+    @apply dec:border
+     dec:border-slate-600
+     dec:bg-slate-800
+     dec:text-slate-300;
+  }
+
+  .dec-root.dark .dec-end-node-inner {
+    @apply dec:border
+     dec:border-slate-600
+     dec:bg-slate-800;
+  }
 }
 
 /* custom edges */
@@ -442,7 +496,7 @@
 
 .dec-root .edge-line.error {
   stroke: var(--dec-error-accent);
-  @apply  dec:[stroke-dasharray:5_5];
+  @apply dec:[stroke-dasharray:5_5];
 }
 
 .dec-root .edge-line.condition {
@@ -465,14 +519,14 @@
 /* Selected edge shadow effect - lighter for light mode */
 .dec-root .edge-line.selected {
   filter: drop-shadow(0 0 2px rgba(59, 130, 246, 0.8))
-          drop-shadow(0 0 6px rgba(59, 130, 246, 0.4))
-          drop-shadow(0 0 12px rgba(59, 130, 246, 0.2));
+    drop-shadow(0 0 6px rgba(59, 130, 246, 0.4))
+    drop-shadow(0 0 12px rgba(59, 130, 246, 0.2));
 }
 
 .dec-root.dark .edge-line.selected {
   filter: drop-shadow(0 0 3px rgb(59 130 246))
-          drop-shadow(0 0 8px rgb(59 130 246))
-          drop-shadow(0 0 16px rgba(59, 130, 246, 0.8));
+    drop-shadow(0 0 8px rgb(59 130 246))
+    drop-shadow(0 0 16px rgba(59, 130, 246, 0.8));
 }
 
 /* custom edge labels */
diff --git a/packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx b/packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx
index 6b338a2..ec48e16 100644
--- a/packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx
+++ b/packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx
@@ -188,42 +188,37 @@ function TerminalNodeContent({ id, type }: { id: string; type: TerminalNodeType
   );
 }
 
-// TODO: These props are just a placeholder
-interface PlaceholderProps {
-  id: string;
-  data: BaseNodeData;
-  selected: boolean;
-  type: string;
-}
-
-// TODO: This content is just a placeholder
-function PlaceholderContent({ id, data, selected, type }: PlaceholderProps) {
+function StartEndNode({ id, type }: { id: string; type: GraphNodeType.Start | GraphNodeType.End }) {
+  const isStart = type === GraphNodeType.Start;
   return (
     <div
-      className={`custom-node-container ${selected ? "selected" : ""}`}
+      className="dec-start-end-node"
       data-testid={`${type}-node-${id}`}
+      onClick={(e) => e.stopPropagation()}
     >
-      <RF.Handle type="target" position={RF.Position.Top} />
-      <div className="node-label-container" data-testid={`${type}-label-${id}`}>
-        {`${type}\n${data.label}`}
+      {isStart ? (
+        <RF.Handle type="source" position={RF.Position.Bottom} />
+      ) : (
+        <RF.Handle type="target" position={RF.Position.Top} />
+      )}
+
+      <div className={isStart ? "dec-start-node" : "dec-end-node"}>
+        {!isStart && <div className="dec-end-node-inner" />}
       </div>
-      <RF.Handle type="source" position={RF.Position.Bottom} />
     </div>
   );
 }
 
 /* start node */
 export type StartNodeType = RF.Node<BaseNodeData, typeof GraphNodeType.Start>;
-export function StartNode({ id, data, selected, type }: RF.NodeProps<StartNodeType>) {
-  // TODO: This component is just a placeholder
-  return <PlaceholderContent id={id} data={data} selected={selected} type={type} />;
+export function StartNode({ id, type }: RF.NodeProps<StartNodeType>) {
+  return <StartEndNode id={id} type={type} />;
 }
 
 /* end node */
 export type EndNodeType = RF.Node<BaseNodeData, typeof GraphNodeType.End>;
-export function EndNode({ id, data, selected, type }: RF.NodeProps<EndNodeType>) {
-  // TODO: This component is just a placeholder
-  return <PlaceholderContent id={id} data={data} selected={selected} type={type} />;
+export function EndNode({ id, type }: RF.NodeProps<EndNodeType>) {
+  return <StartEndNode id={id} type={type} />;
 }
 
 /* entry node */