diff --git a/web/src/views/Workflow/components/Properties/CaseList/index.tsx b/web/src/views/Workflow/components/Properties/CaseList/index.tsx
index d1849872..e1583ca0 100644
--- a/web/src/views/Workflow/components/Properties/CaseList/index.tsx
+++ b/web/src/views/Workflow/components/Properties/CaseList/index.tsx
@@ -61,6 +61,20 @@ const CaseList: FC<CaseListProps> = ({
   const { t } = useTranslation();
   const form = Form.useFormInstance();
 
+  const bringLoopChildrenToFront = (cell: any) => {
+    const type = cell?.getData()?.type;
+    if ((type !== 'loop' && type !== 'iteration') || !graphRef?.current) return;
+    const cycleId = cell.getData().id;
+    graphRef.current.getEdges().forEach((edge: any) => {
+      const src = graphRef.current?.getCellById(edge.getSourceCellId());
+      const tgt = graphRef.current?.getCellById(edge.getTargetCellId());
+      if (src?.getData()?.cycle === cycleId || tgt?.getData()?.cycle === cycleId) edge.toFront();
+    });
+    graphRef.current.getNodes().forEach((n: any) => {
+      if (n.getData()?.cycle === cycleId) n.toFront();
+    });
+  };
+
   // Recalculate node height and port Y positions without rebuilding ports
   const updateNodeLayout = (cases: any[]) => {
     if (!selectedNode || !graphRef?.current) return;
@@ -141,6 +155,8 @@ const CaseList: FC<CaseListProps> = ({
           }
           sourceCell.toFront()
           selectedNode.toFront()
+          bringLoopChildrenToFront(sourceCell)
+          bringLoopChildrenToFront(selectedNode)
           graphRef.current?.removeCell(edge);
           return;
         }
@@ -186,7 +202,9 @@ const CaseList: FC<CaseListProps> = ({
               ...edgeAttrs
             });
             selectedNode.toFront()
+            bringLoopChildrenToFront(selectedNode)
             targetCell.toFront()
+            bringLoopChildrenToFront(targetCell)
           }
         }
         
diff --git a/web/src/views/Workflow/components/Properties/CategoryList/index.tsx b/web/src/views/Workflow/components/Properties/CategoryList/index.tsx
index d37699d9..8a406a7a 100644
--- a/web/src/views/Workflow/components/Properties/CategoryList/index.tsx
+++ b/web/src/views/Workflow/components/Properties/CategoryList/index.tsx
@@ -25,6 +25,20 @@ const CategoryList: FC<CategoryListProps> = ({ parentName, selectedNode, graphRe
   const form = Form.useFormInstance();
   const formValues = Form.useWatch([parentName], form);
 
+  const bringLoopChildrenToFront = (cell: any) => {
+    const type = cell?.getData()?.type;
+    if ((type !== 'loop' && type !== 'iteration') || !graphRef?.current) return;
+    const cycleId = cell.getData().id;
+    graphRef.current.getEdges().forEach((edge: any) => {
+      const src = graphRef.current?.getCellById(edge.getSourceCellId());
+      const tgt = graphRef.current?.getCellById(edge.getTargetCellId());
+      if (src?.getData()?.cycle === cycleId || tgt?.getData()?.cycle === cycleId) edge.toFront();
+    });
+    graphRef.current.getNodes().forEach((n: any) => {
+      if (n.getData()?.cycle === cycleId) n.toFront();
+    });
+  };
+
   // Update node ports based on category count changes (add/remove categories)
   const updateNodePorts = (caseCount: number, removedCaseIndex?: number) => {
     if (!selectedNode || !graphRef?.current) return;
@@ -89,7 +103,9 @@ const CategoryList: FC<CategoryListProps> = ({ parentName, selectedNode, graphRe
               ...edgeAttrs
             });
             sourceCell.toFront()
+            bringLoopChildrenToFront(sourceCell)
             selectedNode.toFront()
+            bringLoopChildrenToFront(selectedNode)
           }
           return;
         }
@@ -122,7 +138,9 @@ const CategoryList: FC<CategoryListProps> = ({ parentName, selectedNode, graphRe
               ...edgeAttrs
             });
             selectedNode.toFront()
+            bringLoopChildrenToFront(selectedNode)
             targetCell.toFront()
+            bringLoopChildrenToFront(targetCell)
           }
         }
       });