diff --git a/ui/src/components/flow/edges/CustomEdge.tsx b/ui/src/components/flow/edges/CustomEdge.tsx
index 56ad50d..f50f3df 100644
--- a/ui/src/components/flow/edges/CustomEdge.tsx
+++ b/ui/src/components/flow/edges/CustomEdge.tsx
@@ -1,5 +1,5 @@
 import { BaseEdge, type Edge, EdgeLabelRenderer, type EdgeProps, getSmoothStepPath, useReactFlow } from '@xyflow/react';
-import { AlertCircle, Pencil } from 'lucide-react';
+import { AlertCircle, Pencil, Trash2 } from 'lucide-react';
 import { useCallback, useEffect, useState } from 'react';
 
 import { useWorkflow, useWorkflowOptional } from "@/app/workflow/[workflowId]/contexts/WorkflowContext";
@@ -158,6 +158,7 @@ export default function CustomEdge(props: CustomEdgeProps) {
     const { getEdges, setNodes } = useReactFlow<FlowNode, FlowEdge>();
     const { saveWorkflow } = useWorkflow();
     const updateEdge = useWorkflowStore((state) => state.updateEdge);
+    const deleteEdge = useWorkflowStore((state) => state.deleteEdge);
     const [open, setOpen] = useState(false);
     const [isHovered, setIsHovered] = useState(false);
 
@@ -259,6 +260,10 @@ export default function CustomEdge(props: CustomEdgeProps) {
         await saveWorkflow();
     }, [id, updateEdge, saveWorkflow]);
 
+    const handleDeleteEdge = useCallback(() => {
+        deleteEdge(id);
+    }, [id, deleteEdge]);
+
     return (
         <>
             <g
@@ -321,14 +326,24 @@ export default function CustomEdge(props: CustomEdgeProps) {
                                 <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
                                     Condition
                                 </span>
-                                <Button
-                                    variant="ghost"
-                                    size="icon"
-                                    className="h-6 w-6 p-0 hover:bg-muted text-muted-foreground"
-                                    onClick={() => setOpen(true)}
-                                >
-                                    <Pencil className="h-3 w-3" />
-                                </Button>
+                                <div className="flex items-center gap-1">
+                                    <Button
+                                        variant="ghost"
+                                        size="icon"
+                                        className="h-6 w-6 p-0 hover:bg-destructive/10 hover:text-destructive text-muted-foreground"
+                                        onClick={handleDeleteEdge}
+                                    >
+                                        <Trash2 className="h-3 w-3" />
+                                    </Button>
+                                    <Button
+                                        variant="ghost"
+                                        size="icon"
+                                        className="h-6 w-6 p-0 hover:bg-muted text-muted-foreground"
+                                        onClick={() => setOpen(true)}
+                                    >
+                                        <Pencil className="h-3 w-3" />
+                                    </Button>
+                                </div>
                             </div>
                             {/* Content */}
                             <div className="px-3 pb-3">