diff --git a/src/App.svelte b/src/App.svelte
index 95b9d09..2ac9ccf 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -6,6 +6,7 @@
   import Filter from "./Filter.svelte";
   import FilterPicker from "./FilterPicker.svelte";
   import Graph from "./Graph.svelte";
+  import GraphOld from "./GraphOld.svelte";
   import { FFmpeg } from "@ffmpeg/ffmpeg";
   import { fetchFile, toBlobURL } from "@ffmpeg/util";
   import { dndzone } from "svelte-dnd-action";
@@ -195,8 +196,12 @@
   </section>
 
   <section class="graph">
-    <Graph />
+    <GraphOld />
   </section>
+
+  <!-- <section class="graph"> -->
+  <!--   <Graph /> -->
+  <!-- </section> -->
 </main>
 
 <style>
diff --git a/src/GraphOld.svelte b/src/GraphOld.svelte
new file mode 100644
index 0000000..5ad78fe
--- /dev/null
+++ b/src/GraphOld.svelte
@@ -0,0 +1,126 @@
+<script>
+	import { v4 as uuidv4 } from "uuid";
+  import { nodes, edges } from "./stores.js";
+  import { Anchor, Node, Svelvet, Minimap, Controls } from "svelvet";
+
+
+  function onConnect(e) {
+	console.log(e);
+		const sourceAnchor = e.detail.sourceAnchor;
+		const targetAnchor = e.detail.targetAnchor;
+		const sourceNode = e.detail.sourceNode;
+		const targetNode = e.detail.targetNode;
+		// console.log(e);
+		// console.log(sourceNode.id, "->", targetNode.id)
+		// console.log(sourceAnchor.id, "->", targetAnchor.id)
+		$edges.push({id: uuidv4(), sourceAnchor: sourceAnchor.id, targetAnchor: targetAnchor.id, sourceNode: sourceNode.id, targetNode: targetNode.id})
+		$edges = $edges;
+  }
+
+  function onDisconnect(e) {
+		const sourceAnchor = e.detail.sourceAnchor.id;
+		const targetAnchor = e.detail.targetAnchor.id;
+		const sourceNode = e.detail.sourceNode.id;
+		const targetNode = e.detail.targetNode.id;
+
+		// console.log(sourceNode.id, "-/>", targetNode.id)
+		// console.log(sourceAnchor.id, "-/>", targetAnchor.id)
+
+		const index = edges.findIndex((e) => e.source);
+		$edges.splice(index, 1);
+		$edges = edges;
+  }
+</script>
+
+<Svelvet
+  id="my-canvas"
+  width={800}
+  height={500}
+  snapTo={25}
+  on:disconnection={onDisconnect}
+  on:connection={onConnect}
+>
+  {#each $nodes as n, index}
+    <Node inputs={n.data.inputs.length} outputs={n.data.outputs.length} id={n.id} bind:position={n.position}>
+      <div class="node">
+        <div class="header">
+          {n.data.name}
+        </div>
+        <slot />
+      </div>
+      <div class="input-anchors">
+        {#each n.data.inputs as inp, index}
+          <Anchor id={inp + "_" + index} let:linked let:connecting let:hovering input>
+            <div class:linked class:hovering class:connecting class="anchor in {inp}">{inp}</div>
+          </Anchor>
+        {/each}
+      </div>
+      <div class="output-anchors">
+        {#each n.data.outputs as out}
+          <Anchor id={out + "_" + index} let:linked let:connecting let:hovering output>
+            <div class:linked class:hovering class:connecting class="anchor in {out}">{out}</div>
+          </Anchor>
+        {/each}
+      </div>
+    </Node>
+  {/each}
+  <Controls />
+</Svelvet>
+
+<div>
+	{JSON.stringify($edges)}
+</div>
+
+<style>
+  .node {
+    box-sizing: border-box;
+    width: fit-content;
+    height: fit-content;
+    position: relative;
+    pointer-events: auto;
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+    gap: 10px;
+    background-color: #fff;
+    border: 1px solid var(--b1);
+    font: 12px Times, serif;
+    box-shadow: none !important;
+  }
+  .output-anchors {
+    position: absolute;
+    right: -16px;
+    top: 0px;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+  .input-anchors {
+    position: absolute;
+    left: -16px;
+    top: 0px;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+  .anchor {
+    background-color: #fff;
+    font-size: 12px;
+    text-align: center;
+    line-height: 12px;
+    width: 14px;
+    height: 14px;
+    font-family: Times, serif;
+    border: solid 1px white;
+    border-color: var(--b1);
+  }
+  .hovering {
+    scale: 1.2;
+  }
+  .linked {
+    background-color: rgb(17, 214, 17) !important;
+  }
+  .connecting {
+    background-color: goldenrod;
+  }
+</style>
diff --git a/src/Graph_old.svelte b/src/Graph_old.svelte
deleted file mode 100644
index 5c16521..0000000
--- a/src/Graph_old.svelte
+++ /dev/null
@@ -1,201 +0,0 @@
-<script>
-  import { inputs, output, filters } from "./stores.js";
-  import { Anchor, Node, Svelvet, Minimap, Controls } from "svelvet";
-
-	// let nodes = [];
-	// for (let inp of $inputs) {
-	// 	nodes.push({item: inp});
-	// }
-	//
-	// for (let filter of $filters) {
-	// 	nodes.push({item: filter});
-	// }
-	let edges = [];
-	let command = '';
-
-	function makeCommand() {
-		for (let e of edges) {
-			const [from, to] = e;
-			const [fromAnchorId, fromNodeId] = from.split("/");
-			const [toAnchorId, toNodeId] = to.split("/");
-		}
-	}
-
-  function countInputs(f) {
-    const [ins, outs] = f.type.split("->");
-    if (ins == "N") return 1;
-    return ins.length;
-  }
-
-  function countCons(f) {
-    const [ins, outs] = f.type.split("->");
-    return { in: ins.split(""), out: outs.split("") };
-  }
-
-  function countOutputs(f) {
-    const [ins, outs] = f.type.split("->");
-    if (outs == "N") return 1;
-    return outs.length;
-  }
-
-  function onConnect(e) {
-		const sourceAnchor = e.detail.sourceAnchor;
-		const targetAnchor = e.detail.targetAnchor;
-		const sourceNode = e.detail.sourceNode;
-		const targetNode = e.detail.targetNode;
-		// console.log(e);
-		// console.log(sourceNode.id, "->", targetNode.id)
-		// console.log(sourceAnchor.id, "->", targetAnchor.id)
-		edges.push([sourceAnchor.id, targetAnchor.id])
-		edges = edges;
-		makeCommand();
-  }
-
-  function onDisconnect(e) {
-		const sourceAnchor = e.detail.sourceAnchor;
-		const targetAnchor = e.detail.targetAnchor;
-		const sourceNode = e.detail.sourceNode;
-		const targetNode = e.detail.targetNode;
-
-		// console.log(sourceNode.id, "-/>", targetNode.id)
-		// console.log(sourceAnchor.id, "-/>", targetAnchor.id)
-
-		const index = edges.findIndex((e) => e[0] === sourceAnchor.id && e[1] === targetAnchor.id);
-		edges.splice(index, 1);
-		edges = edges;
-		makeCommand();
-  }
-</script>
-
-<Svelvet
-  id="my-canvas"
-  width={800}
-  height={500}
-  snapTo={25}
-  on:disconnection={onDisconnect}
-  on:connection={onConnect}
->
-  {#each $inputs as inp, index}
-    <Node inputs={0} outputs={2} id={"input_" + inp.id}>
-      <div class="node">
-        <div class="header">
-          {inp.name}
-        </div>
-        <slot />
-      </div>
-      <div class="output-anchors">
-        <Anchor id={"video"} let:linked let:connecting let:hovering output>
-          <div class:linked class:hovering class:connecting class="anchor video">v</div>
-        </Anchor>
-        <Anchor id={"audio"} let:linked let:connecting let:hovering output>
-          <div class:linked class:hovering class:connecting class="anchor audio">a</div>
-        </Anchor>
-      </div>
-    </Node>
-  {/each}
-
-  {#each $filters as f, index}
-    <Node inputs={countInputs(f)} outputs={countOutputs(f)} id={"filter_" + f.id}>
-      <div class="node">
-        <div class="header">
-          {f.name}
-        </div>
-        <slot />
-      </div>
-      <div class="input-anchors">
-        {#each countCons(f).in as inp, index}
-          <Anchor id={"in_" + inp + "_" + index} let:linked let:connecting let:hovering input>
-            <div class:linked class:hovering class:connecting class="anchor in {inp}">{inp}</div>
-          </Anchor>
-        {/each}
-      </div>
-      <div class="output-anchors">
-        {#each countCons(f).out as out}
-          <Anchor id={"out_" + out + "_" + index} let:linked let:connecting let:hovering output>
-            <div class:linked class:hovering class:connecting class="anchor in {out}">{out}</div>
-          </Anchor>
-        {/each}
-      </div>
-    </Node>
-  {/each}
-
-  <Node inputs={2} outputs="0" id="output" position={{ x: 600, y: 250 }}>
-    <div class="node">
-      <div class="header">
-        {$output}
-      </div>
-      <slot />
-    </div>
-    <div class="input-anchors">
-      <Anchor id={"output_video"} let:linked let:connecting let:hovering input>
-        <div class:linked class:hovering class:connecting class="anchor video">v</div>
-      </Anchor>
-      <Anchor id={"output_audio"} let:linked let:connecting let:hovering input>
-        <div class:linked class:hovering class:connecting class="anchor audio">a</div>
-      </Anchor>
-    </div>
-  </Node>
-  <Controls />
-</Svelvet>
-
-<div>
-	{#each edges as e}
-		<p>
-			{e[0]} =======> {e[1]}
-		</p>
-	{/each}
-</div>
-
-<style>
-  .node {
-    box-sizing: border-box;
-    width: fit-content;
-    height: fit-content;
-    position: relative;
-    pointer-events: auto;
-    display: flex;
-    flex-direction: column;
-    padding: 10px;
-    gap: 10px;
-    background-color: #fff;
-    border: 1px solid var(--b1);
-    font: 12px Times, serif;
-    box-shadow: none !important;
-  }
-  .output-anchors {
-    position: absolute;
-    right: -16px;
-    top: 0px;
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-  }
-  .input-anchors {
-    position: absolute;
-    left: -16px;
-    top: 0px;
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-  }
-  .anchor {
-    background-color: #fff;
-    font-size: 12px;
-    text-align: center;
-    line-height: 12px;
-    width: 14px;
-    height: 14px;
-    font-family: Times, serif;
-    border: solid 1px white;
-    border-color: var(--b1);
-  }
-  .hovering {
-    scale: 1.2;
-  }
-  .linked {
-    background-color: rgb(17, 214, 17) !important;
-  }
-  .connecting {
-    background-color: goldenrod;
-  }
-</style>
diff --git a/src/app.css b/src/app.css
index f485d16..236873e 100644
--- a/src/app.css
+++ b/src/app.css
@@ -104,3 +104,7 @@ input[type="range"]::-moz-range-thumb {
 
 input[type="range"]:focus::-moz-range-thumb {
 }
+.svelte-flow__node {
+	border-radius: 0px !important;
+	border: 1px solid var(--b1) !important;
+}
diff --git a/src/nodes/Node.svelte b/src/nodes/Node.svelte
index bdee8b1..b4de612 100644
--- a/src/nodes/Node.svelte
+++ b/src/nodes/Node.svelte
@@ -4,14 +4,14 @@
   export let data = { name: "", inputs: [], outputs: [], onChange: () => {} };
 </script>
 
-<div>
+<div class="node">
   {data.name}
 </div>
 {#each data.inputs as inp, index}
-  <Handle type="target" position={Position.Left} id={inp + "_" + index} style="top: {index*10}px; background-color: {inp == 'v' ? 'blue' : 'red'}" on:connect />
+  <Handle type="target" position={Position.Left} id={inp + "_" + index} style="top: {index*10}px; background-color: {inp == 'v' ? 'blue' : 'red'}"  />
 {/each}
 {#each data.outputs as out, index}
-  <Handle type="source" id={out + "_" + index} position={Position.Right} style="top: {index*10}px; background-color: {out == 'v' ? 'blue' : 'red'}" on:connect />
+  <Handle type="source" id={out + "_" + index} position={Position.Right} style="top: {index*10}px; background-color: {out == 'v' ? 'blue' : 'red'}"  />
 {/each}
 <!-- <Handle type="source" position={Position.Right} id="a" style="top: 10px;" on:connect /> -->
 <!-- <Handle -->
@@ -21,3 +21,8 @@
 <!--   style="top: auto; bottom: 10px;" -->
 <!--   on:connect -->
 <!-- /> -->
+<style>
+	.node {
+		padding: 5px;
+	}
+</style>