diff --git a/src/renderer/components/Experiment/Workflows/WorkflowCanvas.tsx b/src/renderer/components/Experiment/Workflows/WorkflowCanvas.tsx
index 4074a6b9f803434c2a7a9374557d013c1eb0a6ad..f4820e9569ef2641ace96efd14af8a92101d5397 100644
--- a/src/renderer/components/Experiment/Workflows/WorkflowCanvas.tsx
+++ b/src/renderer/components/Experiment/Workflows/WorkflowCanvas.tsx
@@ -22,13 +22,19 @@ function generateNodes(workflow: any) {
   console.log(workflowConfig);
 
   while (currentTask < workflowConfig.nodes.length) {
-    out.push({
+    const data = {
+      label: workflowConfig.nodes[currentTask].name,
+      jobType: workflowConfig.nodes[currentTask].type,
+      template: workflowConfig.nodes[currentTask].template,
+    };
+    const nextNode = {
       id: currentTask,
       type: 'customNode',
       position: { x: 0, y: position },
-      data: { label: workflowConfig.nodes[currentTask].name },
-    });
-    position += 60;
+      data: data,
+    };
+    out.push(nextNode);
+    position += 120;
     currentTask = workflowConfig.nodes[currentTask].out;
   }
 
diff --git a/src/renderer/styles.css b/src/renderer/styles.css
index 1d449531c511235f91449294802e75ed54564abd..af690b371aaeaff811a951f17357983ffae66453 100644
--- a/src/renderer/styles.css
+++ b/src/renderer/styles.css
@@ -266,4 +266,21 @@ code if we want */
   /* add a light shadow effect */
   box-shadow: 0 0 10px var(--joy-palette-primary-400);
   transition: box-shadow 0.2s ease-in-out;
+}
+
+.react-flow__node {
+  /* box-shadow: var(--xy-node-boxshadow-default);
+  border-radius: var(--xy-node-border-radius-default);
+  background-color: var(--xy-node-background-color-default); */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding: 10px;
+  font-size: 12px;
+  flex-direction: column;
+  /* border: var(--xy-node-border-default);
+  color: var(--xy-node-color, var(--xy-node-color-default)); */
+  overflow: hidden;
+  word-break: break-all;
 }
\ No newline at end of file