diff --git a/apps/canvas/src/components/handle-port-out.tsx b/apps/canvas/src/components/handle-port-out.tsx
new file mode 100644
index 0000000..c8cbd7a
--- /dev/null
+++ b/apps/canvas/src/components/handle-port-out.tsx
@@ -0,0 +1,26 @@
+import { Handle, Position } from "@xyflow/react";
+import { ReactElement } from "react";
+import { v4 as uuidv4 } from "uuid";
+
+export class PortOut {
+    public readonly id: string;
+    // private name: string;
+    // private value: number;
+
+    constructor() {
+        this.id = uuidv4();
+        // this.name = "";
+        // this.value = 0;
+    }
+
+    public handle(): ReactElement {
+        return (
+            <Handle 
+                id={this.id} 
+                type={"source"} 
+                position={Position.Top}
+            />
+        )
+    }
+}
+