diff --git a/src/renderer/components/Experiment/Workflows/WorkflowCanvas.tsx b/src/renderer/components/Experiment/Workflows/WorkflowCanvas.tsx
index 1bac7d0e150ae9f3b3e43716361c3307e5772d02..28638857aa4ada10751251d7a1579c2832ba3097 100644
--- a/src/renderer/components/Experiment/Workflows/WorkflowCanvas.tsx
+++ b/src/renderer/components/Experiment/Workflows/WorkflowCanvas.tsx
@@ -80,8 +80,18 @@ function generateEdges(workflow: any) {
         id: currentNode.id + nextId,
         source: currentNode.id,
         target: nextId,
+        animated: false,
+        type: 'bezier',
+        style: {
+          stroke: 'var(--joy-palette-primary-outlinedDisabledColor)',
+          strokeWidth: 2,
+        },
         markerEnd: {
           type: 'arrow',
+          color: 'var(--joy-palette-primary-outlinedDisabledColor)',
+          width: 12,
+          height: 10,
+          strokeWidth: 2,
         },
       });
     });
@@ -156,6 +166,11 @@ const Flow = ({
       onEdgesChange={onEdgesChange}
       onNodeDragStop={onNodeDragStop}
       nodeTypes={nodeTypes}
+      snapToGrid={true}
+      snapGrid={[15, 15]}
+      elementsSelectable={true}
+      nodesDraggable={true}
+      nodesConnectable={true}
       fitView
       zoomOnScroll={false}
       zoomOnPinch={false}
diff --git a/src/renderer/styles.css b/src/renderer/styles.css
index 5a6180c83c3489aadfd18ac1ae21624b33d8ecfc..d0cf6ea861ac59a74f635d2a476c6b09c97e4152 100644
--- a/src/renderer/styles.css
+++ b/src/renderer/styles.css
@@ -264,8 +264,9 @@ code if we want */
   align-items: center;
 }
 
-
-
+path.react-flow__edge-path {
+  stroke-width: 2;
+}
 
 .custom-node-delete-button {
   opacity: 0.0;