diff --git a/package.json b/package.json
index bc0059f..53b4f0f 100644
--- a/package.json
+++ b/package.json
@@ -31,8 +31,8 @@
 	"dependencies": {
 		"dracula-ui": "^1.0.6",
 		"ngraph.forcelayout": "^3.3.1",
+		"ngraph.generators": "^20.1.0",
 		"ngraph.graph": "^20.0.1",
-		"ngraph.pixel": "^2.4.1",
-		"ngraph.pixi": "^0.0.5"
+		"ngraph.pixel": "^2.4.1"
 	}
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9d003c1..a959515 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,15 +7,15 @@ dependencies:
   ngraph.forcelayout:
     specifier: ^3.3.1
     version: 3.3.1
+  ngraph.generators:
+    specifier: ^20.1.0
+    version: 20.1.0
   ngraph.graph:
     specifier: ^20.0.1
     version: 20.0.1
   ngraph.pixel:
     specifier: ^2.4.1
     version: 2.4.1
-  ngraph.pixi:
-    specifier: ^0.0.5
-    version: 0.0.5
 
 devDependencies:
   '@sveltejs/adapter-auto':
@@ -626,10 +626,6 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /bit-twiddle@1.0.2:
-    resolution: {integrity: sha512-B9UhK0DKFZhoTFcfvAzhqsjStvGJp9vYWf3+6SNTtdSQnvIgfkHbgHrg/e4+TH71N2GDu8tpmCVoyfrL1d7ntA==}
-    dev: false
-
   /brace-expansion@1.1.11:
     resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
     dependencies:
@@ -772,10 +768,6 @@ packages:
       react: 18.2.0
     dev: false
 
-  /earcut@2.2.4:
-    resolution: {integrity: sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==}
-    dev: false
-
   /element-class@0.2.2:
     resolution: {integrity: sha512-e4tkRAFtQkGiZB8fzxAFdjEbx5zajMb1GpiRwKs3lhOLxQcvdOIG7XlERT1sTX3/ulIUGZrgL02YZ0cRNC5OLQ==}
     dev: false
@@ -966,10 +958,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /eventemitter3@2.0.3:
-    resolution: {integrity: sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg==}
-    dev: false
-
   /fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
     dev: true
@@ -1180,10 +1168,6 @@ packages:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
     dev: true
 
-  /ismobilejs@0.5.2:
-    resolution: {integrity: sha512-ta9UdV60xVZk/ZafFtSFslQaE76SvNkcs1r73d2PVR21zVzx9xuYv9tNe4MxA1NN7WoeCc2RjGot3Bz1eHDx3Q==}
-    dev: false
-
   /js-sdsl@4.4.0:
     resolution: {integrity: sha512-FfVSdx6pJ41Oa+CF7RDaFmTnCaFhua+SNYQX74riGOpl96x+2jQCqEfQ2bnXu/5DPCqlRuiqyvTJM0Qjz26IVg==}
     dev: true
@@ -1300,10 +1284,6 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
-  /mini-signals@1.2.0:
-    resolution: {integrity: sha512-alffqMkGCjjTSwvYMVLx+7QeJ6sTuxbXqBkP21my4iWU5+QpTQAJt3h7htA1OKm9F3BpMM0vnu72QIoiJakrLA==}
-    dev: false
-
   /minimatch@3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
     dependencies:
@@ -1314,6 +1294,12 @@ packages:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
     dev: true
 
+  /miserables@2.0.0:
+    resolution: {integrity: sha512-J+4obMHbesciklE0SoVy4EJFsgeBW2RsRzrhBWGFhpBDcxCSJ3igSzDVz8SUaPx5PQaduImkt5UWus2Yx0a5/A==}
+    dependencies:
+      ngraph.graph: 19.1.0
+    dev: false
+
   /mkdirp@0.5.6:
     resolution: {integrity: sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==}
     hasBin: true
@@ -1379,13 +1365,6 @@ packages:
       ngraph.physics.simulator: 0.0.12
     dev: false
 
-  /ngraph.forcelayout@0.1.2:
-    resolution: {integrity: sha512-N6W/KPtxnpprpm1tg0V2ubahD9Q0nJvlAKh6QkUuZvOBK6OsLAlfhUwn+3iDt3ZhgCuhyebRWZYt80Yrlqkzjw==}
-    dependencies:
-      ngraph.events: 0.0.3
-      ngraph.physics.simulator: 0.1.1
-    dev: false
-
   /ngraph.forcelayout@3.3.1:
     resolution: {integrity: sha512-MKBuEh1wujyQHFTW57y5vd/uuEOK0XfXYxm3lC7kktjJLRdt/KEKEknyOlc6tjXflqBKEuYBBcu7Ax5VY+S6aw==}
     dependencies:
@@ -1394,6 +1373,20 @@ packages:
       ngraph.random: 1.1.0
     dev: false
 
+  /ngraph.generators@20.1.0:
+    resolution: {integrity: sha512-z/+R7HkNTFVgf5+o6KANgoKyr4FI9uiY+vSLYIzcLaTpz1scsCQuVbp+WsTf1MnJfeizlRjREhbgD4oeBZPqNA==}
+    dependencies:
+      miserables: 2.0.0
+      ngraph.graph: 20.0.1
+      ngraph.random: 1.1.0
+    dev: false
+
+  /ngraph.graph@19.1.0:
+    resolution: {integrity: sha512-9cws84qfPkrYa7BaBtT+KgZfLXrd6pNL9Gl5Do+MBO/0Hm6rOM7qK78MZaO1uEoIK6p2pgUs6lu29zn/6tP59w==}
+    dependencies:
+      ngraph.events: 1.2.2
+    dev: false
+
   /ngraph.graph@20.0.1:
     resolution: {integrity: sha512-VFsQ+EMkT+7lcJO1QP8Ik3w64WbHJl27Q53EO9hiFU9CRyxJ8HfcXtfWz/U8okuoYKDctbciL6pX3vG5dt1rYA==}
     dependencies:
@@ -1412,16 +1405,6 @@ packages:
     resolution: {integrity: sha512-7jPm14fYcuJ9kytOVNOKxFy6r/Uu9Dnj++uT3iR9XkBcsBahn2xcYJkV6vF1bIb1fQ5XrDCRjRIOcMwEum6jwQ==}
     dev: false
 
-  /ngraph.physics.simulator@0.0.11:
-    resolution: {integrity: sha512-h+WjVDAdqiQ05Y159Zer8hznhN8zs9sJiMXlME8cGsFsSG63VAdbuNvpxNpcwa38Kw2CsLzNqt04AEisc722hQ==}
-    dependencies:
-      ngraph.expose: 0.0.0
-      ngraph.merge: 0.0.1
-      ngraph.physics.primitives: 0.0.7
-      ngraph.quadtreebh: 0.0.3
-      ngraph.random: 0.0.1
-    dev: false
-
   /ngraph.physics.simulator@0.0.12:
     resolution: {integrity: sha512-c5THBS9fbzfUsFP39lKrWAt4UdNUqdKtahRE+SmB1uuv2B9aglyd0yAOtNTumrzGIG7vNy8isAw0Qd4Qztg7BQ==}
     dependencies:
@@ -1433,17 +1416,6 @@ packages:
       ngraph.random: 0.0.1
     dev: false
 
-  /ngraph.physics.simulator@0.1.1:
-    resolution: {integrity: sha512-2UQE4ZK9MUvwiwrfSY8yQwpwtR44Fx6mbiNerKk/4Hrbu7I9b1EB0yFnUlYTTIj8IMpwOoXeSVR6c4VrBAUkfQ==}
-    dependencies:
-      ngraph.events: 0.0.3
-      ngraph.expose: 0.0.0
-      ngraph.merge: 0.0.1
-      ngraph.physics.primitives: 0.0.7
-      ngraph.quadtreebh: 0.0.4
-      ngraph.random: 0.0.1
-    dev: false
-
   /ngraph.pixel@2.4.1:
     resolution: {integrity: sha512-H4hqyEVMhGZ6hGL30pXKZ+RpZw8NQaLa4hGGj3UutokUp3yfvTLrToOq+/W09jK/Sn6DzimYPuLAn+OuIfx4Zw==}
     dependencies:
@@ -1451,19 +1423,10 @@ packages:
       insert-css: 0.2.0
       ngraph.events: 0.0.3
       pixel.layout: 0.1.2
-      three: 0.73.2
+      three: 0.73.0
       three.fly: 0.1.6
     dev: false
 
-  /ngraph.pixi@0.0.5:
-    resolution: {integrity: sha512-vNTHLYSkzWeO6K3Y0td0jZ317PRKuJnSvNp+e/VpLYsNEJv9Q5f16W+LwkwmbMzMWJ5sWPx01foxpgojJ9gGZA==}
-    dependencies:
-      ngraph.forcelayout: 0.1.2
-      ngraph.merge: 0.0.1
-      ngraph.physics.simulator: 0.0.11
-      pixi.js: 4.8.9
-    dev: false
-
   /ngraph.quadtreebh3d@0.0.3:
     resolution: {integrity: sha512-DIRiviYWity+/yiZpRRs95V7gShtXnxDifQbdLffAi4PdNWnprFarcXuk+q/YbTakH4cWcOXZo7mQyUTO9odZg==}
     dependencies:
@@ -1476,12 +1439,6 @@ packages:
       ngraph.random: 0.0.1
     dev: false
 
-  /ngraph.quadtreebh@0.0.4:
-    resolution: {integrity: sha512-xTIkWGXt5Ajnoq9VOr0xDOI9ZL+q4sPhD0Z7vxvn4MCa+l0wf43rg0C7qv0t+RIOgbQBAp0xDpn568hpXAckJA==}
-    dependencies:
-      ngraph.random: 0.0.1
-    dev: false
-
   /ngraph.random@0.0.1:
     resolution: {integrity: sha512-QPKU7ChXF/VrvMQxVo9aWcvXCXp98VfL4nKUteTW/olDqeUqQ61t7m+jvFb8Dj7kKvlKlnsbDA1aWLJGmm17XA==}
     dev: false
@@ -1495,11 +1452,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /object-assign@4.1.1:
-    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
   /once@1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
     dependencies:
@@ -1539,11 +1491,6 @@ packages:
       callsites: 3.1.0
     dev: true
 
-  /parse-uri@1.0.7:
-    resolution: {integrity: sha512-eWuZCMKNlVkXrEoANdXxbmqhu2SQO9jUMCSpdbJDObin0JxISn6e400EWsSRbr/czdKvWKkhZnMKEGUwf/Plmg==}
-    engines: {node: '>= 0.10'}
-    dev: false
-
   /path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
@@ -1580,23 +1527,6 @@ packages:
       ngraph.forcelayout3d: 0.0.15
     dev: false
 
-  /pixi-gl-core@1.1.4:
-    resolution: {integrity: sha512-dGLwg7664yASpT1insVUexNTMVEtvPZh/eDoXu8QUBoq2CY1Fc8axNwR+qbS1aJ8vj6y/TfWiOEaOSyNH41txw==}
-    dev: false
-
-  /pixi.js@4.8.9:
-    resolution: {integrity: sha512-YcepG5/bXLAVTSTXaMIU9NeSzwyPq/oMu2oQi6L6iE5giwng02ixVCKgc6/eMv3zl2Ho+teSOLC8R5Wp3jBvLA==}
-    dependencies:
-      bit-twiddle: 1.0.2
-      earcut: 2.2.4
-      eventemitter3: 2.0.3
-      ismobilejs: 0.5.2
-      object-assign: 4.1.1
-      pixi-gl-core: 1.1.4
-      remove-array-items: 1.1.1
-      resource-loader: 2.2.4
-    dev: false
-
   /postcss-load-config@3.1.4(postcss@8.4.23):
     resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
     engines: {node: '>= 10'}
@@ -1676,22 +1606,11 @@ packages:
       picomatch: 2.3.1
     dev: true
 
-  /remove-array-items@1.1.1:
-    resolution: {integrity: sha512-MXW/jtHyl5F1PZI7NbpS8SOtympdLuF20aoWJT5lELR1p/HJDd5nqW8Eu9uLh/hCRY3FgvrIT5AwDCgBODklcA==}
-    dev: false
-
   /resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
     dev: true
 
-  /resource-loader@2.2.4:
-    resolution: {integrity: sha512-MrY0bEJN26us3h4bzJUSP0n4tFEb79lCpYBavtLjSezWCcXZMgxhSgvC9LxueuqpcxG+qPjhwFu5SQAcUNacdA==}
-    dependencies:
-      mini-signals: 1.2.0
-      parse-uri: 1.0.7
-    dev: false
-
   /reusify@1.0.4:
     resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
@@ -1939,8 +1858,8 @@ packages:
       ngraph.events: 0.0.3
     dev: false
 
-  /three@0.73.2:
-    resolution: {integrity: sha512-TC2H54TAnLwLwuMz5mUNN60BuK5MvLI1OgF2X1PdxnVehgZ7p9sNbaHpJEj3hi2T8WadlIUE8d/96oe3XlpPAw==}
+  /three@0.73.0:
+    resolution: {integrity: sha512-D3P2p6rvUx5A61++zho1jqs8gPbx81UHGRMSjF8QPabFCHMHAaUWxK7k3xxdNMDtE1wqnlZMqwD1Kv1kOy+TyQ==}
     dev: false
 
   /tiny-glob@0.2.9:
diff --git a/src/components/NGraph.svelte b/src/components/NGraph.svelte
index 336118e..fc3cd78 100644
--- a/src/components/NGraph.svelte
+++ b/src/components/NGraph.svelte
@@ -1,22 +1,47 @@
 <script>
     import { onMount } from 'svelte';
-    
+
     import renderGraph from "ngraph.pixel";
-   
+    import createLayout from "ngraph.forcelayout";
+    import graphGenerators from "ngraph.generators";
+    
     export let graph;
 
+    function createNodeUI(node) {
+        return {
+            color: 0x1DE9B6,
+            size: 10
+        };
+    }
 
-    onMount(() => {
+    function createLinkUI(link) {
+        return {
+            fromColor: 0xBDBDBD,
+            toColor: 0xBDBDBD
+        };
+    }
+
+    function getGraphFromQueryString(query) {
+        var createGraph = graphGenerators[query.graph] || graphGenerators.grid;
+        return createGraph(getNumber(query.n), getNumber(query.m), getNumber(query.k));
+    }
+
+    function getNumber(string, defaultValue) {
+        var number = parseFloat(string);
+        return (typeof number === 'number') && !isNaN(number) ? number : (defaultValue || 10);
+    }
+    
+    onMount(async () => {
         let div = document.getElementById("container-ngraph")
         let render = renderGraph(graph, {
             container: div,
             clearAlpha: 0.0,
             is3D: true,
+            createLayout: createLayout,
+            node: createNodeUI,
+            link: createLinkUI,
         });
     });
-
-
-    console.log(`${graph}`);
 </script>
 
 <div id="container-ngraph"></div>
@@ -24,13 +49,16 @@
 <style>
 
 #container-ngraph{
-    height: 100vh;
-    width: 100vw;
+    height: 80vh;
+    width: 90vw;
     overflow: hidden;
     position: absolute;
     overflow: hidden;
     padding: 0;
     margin: 0;
+    top:  50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
 }
 
 </style>
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 87bf247..4ecf767 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -4,19 +4,14 @@
     import NGraph from "../components/NGraph.svelte";
     
     
-    
     export function buildGraph() {
         let graph = createGraph();
         graph.addLink(1, 2);
- 
+        graph.addLink(4, 5);
+        graph.addLink(1, 5);
         return graph;
      }
 
 </script>
 
-<div id="app">
-    <NGraph graph={buildGraph()} />
-</div>
-
-<style>
-</style>
\ No newline at end of file
+<NGraph graph={buildGraph()} />
\ No newline at end of file