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 42d7c67..baeda0e 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
@@ -402,6 +402,61 @@
   }
 
     /* end validation errors */
+  
+  .dec-start-end-node {
+   position: relative;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+ }
+ 
+ .dec-start-node,
+ .dec-end-node {
+   width: 72px;
+   height: 72px;
+   border-radius: 50%;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   position: relative;
+ 
+   @apply dec:border
+     dec:border-slate-300
+     dec:bg-slate-100
+     dec:text-slate-600;
+ }
+ 
+ .dec-end-node-inner {
+   position: absolute;
+   inset: 6px;
+   border-radius: 50%;
+   pointer-events: none;
+ 
+   @apply dec:border
+     dec:border-slate-300
+     dec:bg-slate-100;
+ }
+ 
+ .dec-start-end-node.selected .dec-start-node,
+ .dec-start-end-node.selected .dec-end-node,
+ .dec-start-node:hover,
+ .dec-end-node:hover {
+   box-shadow: 0 0 0 4px rgba(209, 204, 204, 0.3);
+ }
+ 
+ .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 */
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 9a9efe6..c676b5e 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
@@ -182,26 +182,18 @@ 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, data, selected, type }: NodeContentProps) {
+  const isStart = type === GraphNodeType.Start;
   return (
     <div
-      className={`custom-node-container ${selected ? "selected" : ""}`}
+      className={`dec-start-end-node ${selected ? "selected" : ""}`}
       data-testid={`${type}-node-${id}`}
     >
-      <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="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} />
+      {isStart && <RF.Handle type="source" position={RF.Position.Bottom} />}
     </div>
   );
 }
@@ -210,14 +202,14 @@ function PlaceholderContent({ id, data, selected, type }: PlaceholderProps) {
 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} />;
+  return <StartEndNode id={id} data={data} selected={selected} 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} />;
+  return <StartEndNode id={id} data={data} selected={selected} type={type} />;
 }
 
 /* entry node */