diff --git a/package.json b/package.json
index 1ebe095..078d75b 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "@astrojs/svelte": "^1.0.2",
     "@astrojs/tailwind": "^2.1.3",
     "astro": "^1.6.15",
+    "cytoscape": "^3.23.0",
     "daisyui": "^2.45.0",
     "p5-svelte": "^3.1.2",
     "svelte": "^3.55.0",
diff --git a/src/pages/projects/sitemap/sitemapgraph.svelte b/src/pages/projects/sitemap/sitemapgraph.svelte
index 665d9e5..0bf822c 100644
--- a/src/pages/projects/sitemap/sitemapgraph.svelte
+++ b/src/pages/projects/sitemap/sitemapgraph.svelte
@@ -1,11 +1,107 @@
 <script>
+    import cytoscape from 'cytoscape';
+  import { onMount } from 'svelte';
+    let div;
+    let data = {"map":[{"name":"root","adj":[{"destination":{"name":"http://localhost:8000/","ajd":[{"destination":{"name":"http://localhost:8000/about.html","ajd":[]}},{"destination":{"name":"http://localhost:8000/blog/demo1.html","ajd":[]}},{"destination":{"name":"http://localhost:8000/blog/demo2.html","ajd":[]}}]}}]},{"name":"http://localhost:8000/","adj":[{"destination":{"name":"http://localhost:8000/about.html","ajd":[]}},{"destination":{"name":"http://localhost:8000/blog/demo1.html","ajd":[]}},{"destination":{"name":"http://localhost:8000/blog/demo2.html","ajd":[]}}]},{"name":"http://localhost:8000/about.html","adj":[]},{"name":"http://localhost:8000/blog/demo1.html","adj":[]},{"name":"http://localhost:8000/blog/demo2.html","adj":[]}]};
+    let cyElements = [];
 
+    onMount(()=>{
+        //load all vertexes into cytoscape
+        data.map.forEach((element) => {
+            let shortURL = element.name.replace(/^(?:\/\/|[^/]+)*\//, "/");
+            cyElements.push({
+              data: {
+                id: element.name,
+                name: element.name,
+                short: shortURL,
+                href: element.name,
+              },
+            });
+          });
+
+          data.map.forEach((element) => {
+            if (element.adj.length > 0) {
+              for (let i = 0; i < element.adj.length; i++) {
+                const e = element.adj[i];
+                let cyid = element.name + "," + element.adj[i].destination.name;
+                let cysrc = element.name;
+                let cytgt = element.adj[i].destination.name;
+                cyElements.push({
+                  data: {
+                    id: cyid,
+                    source: cysrc,
+                    target: cytgt,
+                  },
+                });
+              }
+            }
+          });
+
+          cytoscape({
+            container: div,
+            elements: cyElements,
+            style: [
+              {
+                selector: "node",
+                style: {
+                  'content': "data(name)",
+                  'text-valign' : 'center',
+                  'shape': 'round-rectangle',
+                  'width': '500px',
+                  'height': '50px',
+                  'background-color' : '#F8F9FA',
+                  'border-color': '#000',
+                },
+              },
+              {
+                selector: "edge",
+                style: {
+                  'line-color': "#fff"
+                }
+              }
+            ],
+            layout: {
+              name: "breadthfirst",
+              fit: true, // whether to fit the viewport to the graph
+              directed: true, // whether the tree is directed downwards (or edges can point in any direction if false)
+              padding: 10, // padding on fit
+              circle: false, // put depths in concentric circles if true, put depths top down if false
+              grid: false, // whether to create an even grid into which the DAG is placed (circle:false only)
+              spacingFactor: 1, // positive spacing factor, larger => more space between nodes (N.B. n/a if causes overlap)
+              boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
+              avoidOverlap: true, // prevents node overlap, may overflow boundingBox if not enough space
+              nodeDimensionsIncludeLabels: false, // Excludes the label when calculating node bounding boxes for the layout algorithm
+              roots: cyElements[0], // the roots of the trees
+              maximal: false, // whether to shift nodes down their natural BFS depths in order to avoid upwards edges (DAGS only)
+              depthSort: undefined, // a sorting function to order nodes at equal depth. e.g. function(a, b){ return a.data('weight') - b.data('weight') }
+              animate: false, // whether to transition the node positions
+              animationDuration: 500, // duration of animation in ms if enabled
+              animationEasing: undefined, // easing of animation if enabled,
+              animateFilter: function (node, i) {
+                return true;
+              }, // a function that determines whether the node should be animated.  All nodes animated by default on animate enabled.  Non-animated nodes are positioned immediately when the layout starts
+              ready: undefined, // callback on layoutready
+              stop: undefined, // callback on layoutstop
+              transform: function (node, position) {
+                return position;
+              },
+            },
+          });
+    })
+
+     
 </script>
 
-<style>
 
+<style>
+    #cy {
+        width: 100%;
+        height: 75vh;
+        display: block;
+        background-color: #343A40;
+    }
 </style>
 
-<div>
+<div bind:this={div} id="cy">
     
 </div>
\ No newline at end of file