diff --git a/src/app/services/flows/flows-call.fake.ts b/src/app/services/flows/flows-call.fake.ts
index 0cb6096..5f02e34 100644
--- a/src/app/services/flows/flows-call.fake.ts
+++ b/src/app/services/flows/flows-call.fake.ts
@@ -68,7 +68,7 @@ const testDataFlow ={
     "visibility": "PUBLIC",
     "createdAt": "2026-01-21T10:38:50.671+00:00",
     "updatedAt": "2026-01-21T10:38:50.671+00:00",
-    "name": "Test Flow",
+    "name": "my test flow",
     "description": "This is a test flow",
     "nodes": [
         {
@@ -154,13 +154,17 @@ const testDataFlow ={
     "connections": [
         {
             "key": "c335e3da-2af3-4e8f-a8ee-9bfc236196ee",
-            "from": "3ec4a0e5-914a-41e0-ab74-d4e64a4dba09:phrase",
-            "to": "80519c40-20ba-49cf-800a-598ee2e64f65:phrase"
+            "sourceNode": "3ec4a0e5-914a-41e0-ab74-d4e64a4dba09",
+            "sourceField": "phrase",
+            "targetNode": "80519c40-20ba-49cf-800a-598ee2e64f65",
+            "targetField": "phrase"
         },
         {
             "key": "e0239aef-d570-463d-b453-c3906ab0e4b0",
-            "from": "80519c40-20ba-49cf-800a-598ee2e64f65:translated",
-            "to": "ff349078-dce1-4ecd-8b2f-bd43100633fc:translated"
+            "sourceNode": "80519c40-20ba-49cf-800a-598ee2e64f65",
+            "sourceField": "translated",
+            "targetNode": "ff349078-dce1-4ecd-8b2f-bd43100633fc",
+            "targetField": "translated"
         }
     ]
 }; 
\ No newline at end of file
diff --git a/src/app/shared/flows-list/flow-item/flow-item.html b/src/app/shared/flows-list/flow-item/flow-item.html
index 0abaf5f..643fcc0 100644
--- a/src/app/shared/flows-list/flow-item/flow-item.html
+++ b/src/app/shared/flows-list/flow-item/flow-item.html
@@ -8,10 +8,10 @@
     <div class="flex items-center justify-between text-sm ">
         <div class="flex items-center gap-2 text-indigo-700 font-medium">
             <i class="bi" [ngClass]="{
-          'bi-globe': flow().visibility === 'public',
-          'bi-lock-fill': flow().visibility === 'private'
-        }" [class.text-indigo-500]="flow().visibility === 'public'"
-                [class.text-gray-500]="flow().visibility === 'private'">
+          'bi-globe': flow().visibility === 'PUBLIC',
+          'bi-lock-fill': flow().visibility === 'PRIVATE'
+        }" [class.text-indigo-500]="flow().visibility === 'PUBLIC'"
+                [class.text-gray-500]="flow().visibility === 'PRIVATE'">
             </i>
 
             {{ flow().name }}
@@ -63,12 +63,12 @@
                 </button>
 
                 <button class="p-1 rounded enabled:hover:bg-indigo-100 enabled:text-indigo-600 disabled:text-indigo-200" title="Clone"
-                    (click)="$event.stopPropagation(); clone()" [disabled]="this.flow().visibility!=='private'">
+                    (click)="$event.stopPropagation(); clone()" [disabled]="this.flow().visibility!=='PRIVATE'">
                     <i class="bi bi-files"></i>
                 </button>
 
                 <button class="p-1 rounded enabled:hover:bg-red-100 enabled:text-red-600 disabled:text-red-200" title="Delete"
-                    (click)="$event.stopPropagation(); remove()" [disabled]="this.flow().visibility!=='private'">
+                    (click)="$event.stopPropagation(); remove()" [disabled]="this.flow().visibility!=='PRIVATE'">
                     <i class="bi bi-trash"></i>
                 </button>
             </div>
diff --git a/src/app/shared/nodes/input/input-node.component.html b/src/app/shared/nodes/input/input-node.component.html
index 1fa9877..f42c5a9 100644
--- a/src/app/shared/nodes/input/input-node.component.html
+++ b/src/app/shared/nodes/input/input-node.component.html
@@ -1,22 +1,21 @@
-<div class="rounded-xl bg-white shadow-md border border-gray-200">
-  <div class="p-3 flex flex-col items-center gap-2">
-    <div class="w-full flex justify-end">
+<div class="rounded-xl bg-white shadow-md border border-gray-200 cursor-pointer">
+  <div class="p-3 flex items-center justify-between gap-2">
+    <p class="text-sm font-semibold text-gray-700">
+      {{ data.label }}
+    </p>
+
+    <div class="flex justify-end">
       <div
-        class="cursor-pointer"
         refComponent
         [data]="{
           type: 'socket',
           side: 'output',
-          key: data.outputs[0]?.id,
+          key: outputKey,
           nodeId: data.id,
-          payload: data.outputs[0]?.socket,
-          seed: seed
+          payload: outputSocket
         }"
         [emit]="emit"
-        data-testid="output-socket"
       ></div>
     </div>
-
-    <p class="text-sm font-semibold text-gray-700">Input</p>
   </div>
 </div>
diff --git a/src/app/shared/nodes/input/input-node.component.ts b/src/app/shared/nodes/input/input-node.component.ts
index 7f8e9b9..468f31d 100644
--- a/src/app/shared/nodes/input/input-node.component.ts
+++ b/src/app/shared/nodes/input/input-node.component.ts
@@ -7,6 +7,7 @@ import {
 import { CommonModule, KeyValue } from "@angular/common";
 import { ReteModule } from "rete-angular-plugin/21";
 import { HFNode } from "@models/nodes";
+import { ClassicPreset } from "rete";
 
 @Component({
   templateUrl: "./input-node.component.html",
@@ -27,20 +28,19 @@ export class InputNodeComponent {
     return this.data.selected;
   }
 
-  constructor(private cdr: ChangeDetectorRef) {
-    this.cdr.detach();
+  outputKey!: string;
+  outputSocket!: ClassicPreset.Socket;
+
+  ngOnInit() {
+    const entries = Object.entries(this.data.outputs);
+    const [key, output] = entries[0];
+
+    this.outputKey = key;
+    this.outputSocket = (output as any).socket;
   }
 
-  ngOnChanges(): void {
-    this.cdr.detectChanges();
-    requestAnimationFrame(() => this.rendered());
-    this.seed++; // force render sockets
+  ngAfterViewInit() {
+    this.rendered();
   }
 
-  sortByIndex(
-  a: KeyValue<string, { index?: number } | undefined>,
-  b: KeyValue<string, { index?: number } | undefined>
-): number {
-  return (a.value?.index ?? 0) - (b.value?.index ?? 0);
-}
 }
diff --git a/src/app/shared/nodes/output/output-node.component.html b/src/app/shared/nodes/output/output-node.component.html
index 9d19f27..41d53da 100644
--- a/src/app/shared/nodes/output/output-node.component.html
+++ b/src/app/shared/nodes/output/output-node.component.html
@@ -1,21 +1,20 @@
-<div class="rounded-xl bg-white shadow-md border border-gray-200">
-  <div class="p-3 flex items-center justify-center">
-    <p class="text-sm font-semibold text-gray-700">Output</p>
-    <div class="w-full flex justify-end">
+<div class="rounded-xl bg-white shadow-md border border-gray-200 cursor-pointer">
+  <div class="p-3 flex items-center justify-between gap-2">
+    <div class="flex justify-start">
       <div
-        class="cursor-pointer"
         refComponent
         [data]="{
           type: 'socket',
           side: 'input',
-          key: data.inputs[0]?.id,
+          key: inputKey,
           nodeId: data.id,
-          payload: data.inputs[0]?.socket,
-          seed: seed
+          payload: inputSocket
         }"
         [emit]="emit"
-        data-testid="output-socket"
       ></div>
     </div>
+    <p class="text-sm font-semibold text-gray-700">
+      {{ data.label }}
+    </p>
   </div>
 </div>
diff --git a/src/app/shared/nodes/output/output-node.component.ts b/src/app/shared/nodes/output/output-node.component.ts
index bb30560..546ba4b 100644
--- a/src/app/shared/nodes/output/output-node.component.ts
+++ b/src/app/shared/nodes/output/output-node.component.ts
@@ -15,10 +15,10 @@ import { HFNode } from "@models/nodes";
   styleUrls: ["./output-node.component.scss"],
   imports: [CommonModule, ReteModule],
   host: {
-    "data-testid": "output-node"
+    "data-testid": "node"
   }
 })
-export class OutputNodeComponent implements OnChanges {
+export class OutputNodeComponent {
   @Input() data!: ClassicPreset.Node;
   @Input() emit!: (data: any) => void;
   @Input() rendered!: () => void;
@@ -29,23 +29,19 @@ export class OutputNodeComponent implements OnChanges {
     return this.data.selected;
   }
 
-  constructor(private cdr: ChangeDetectorRef) {
-    this.cdr.detach();
+  inputKey!: string;
+  inputSocket!: ClassicPreset.Socket;
+
+  ngAfterViewInit() {
+    this.rendered();
   }
 
-  ngOnChanges(): void {
-    this.cdr.detectChanges();
-    requestAnimationFrame(() => this.rendered());
-    this.seed++; // force render sockets
-  }
+  ngOnInit(): void {
+    const entries = Object.entries(this.data.inputs);
+    const [key, input] = entries[0];
 
-  sortByIndex<
-    N extends object,
-    T extends KeyValue<string, N & { index?: number }>
-  >(a: T, b: T) {
-    const ai = a.value.index || 0;
-    const bi = b.value.index || 0;
+    this.inputKey = key;
+    this.inputSocket = (input as any).socket;
 
-    return ai - bi;
   }
 }
diff --git a/src/app/utilities/rete-editor.ts b/src/app/utilities/rete-editor.ts
index c96807a..0ae0128 100644
--- a/src/app/utilities/rete-editor.ts
+++ b/src/app/utilities/rete-editor.ts
@@ -126,8 +126,8 @@ async function loadFlowData(editor: NodeEditor<HFSchemes>, flowData: FlowData) {
   for (const connections of flowData.connections) { {
       const targetNode = editor.getNode(nodeMapping.get(connections.targetNode) || "");
       const node = editor.getNode(nodeMapping.get(connections.sourceNode) || "");
-      console.log("Creating connection from", connections.sourceNode, "to", connections.targetNode);
       if (node && targetNode) {
+        console.log("Creating connection from", node.id, "to", targetNode.id);
         const connection = new ClassicPreset.Connection(
           node,
           connections.sourceField,