diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
deleted file mode 100644
index d7f555b..0000000
--- a/src/components/Footer.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<script lang="ts">
-  import { themeStore } from '../stores'
-
-  /**
-   * Firefox doesn't fully support background-clip so the marquee text is cut off half way through the animation
-   */
-  const isFirefox = navigator.userAgent.indexOf('Firefox') !== -1
-</script>
-
-<div
-  class="fixed z-0 lg:z-20 right-0 bottom-0 left-0 h-8 flex items-center motion-reduce:justify-center motion-safe:justify-end bg-base-content overflow-x-hidden"
->
-  {#if $themeStore === 'light'}
-    <p
-      class="motion-safe:animate-marquee motion-safe:left-full whitespace-nowrap font-bold text-xxs {isFirefox
-        ? 'text-orange-500'
-        : 'text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-orange-300'}"
-    >
-      *** Experimental *** - You are currently previewing Webnative SDK Alpha
-      0.2
-    </p>
-  {:else}
-    <p
-      class="motion-safe:animate-marquee motion-safe:left-full whitespace-nowrap font-bold text-xxs text-[#DD1F13]"
-    >
-      *** Experimental *** - You are currently previewing Webnative SDK Alpha
-      0.2
-    </p>
-  {/if}
-</div>
diff --git a/src/components/explore/Explore.svelte b/src/components/explore/Explore.svelte
index 5675b08..f2e7ac1 100644
--- a/src/components/explore/Explore.svelte
+++ b/src/components/explore/Explore.svelte
@@ -1,223 +1,247 @@
 <script lang="ts">
-  import cytoscape from 'cytoscape';
+  import cytoscape from 'cytoscape'
   import { onMount } from 'svelte'
 
-  let cy;
-  let cyDiv;
-
-  const createGraph = () => {
-    cy = cytoscape({
-      container: cyDiv,
-      elements: [],
-      style: [],
-    });
-  };
+  let cy
+  let cyDiv
 
   interface INodeData {
-  id: string;
-}
-
-interface INode {
-  data: INodeData;
-}
-
-interface IEdgeData {
-  id: string;
-  source: string;
-  target: string;
-  label: string;
-}
-
-interface IEdge {
-  data: IEdgeData;
-}
-
-let knowledgeGraphJson: any = {
-	"entities": [{
-		"label": "Organization",
-		"title": "Neuralink"
-	}, {
-		"label": "Organization",
-		"title": "SpaceX"
-	}, {
-		"label": "Organization",
-		"title": "Pretoria"
-	}, {
-		"label": "Organization",
-		"title": "The Boring Company"
-	}, {
-		"label": "Organization",
-		"title": "University of Pretoria"
-	}, {
-		"label": "Organization",
-		"title": "Stanford University"
-	}, {
-		"label": "Person",
-		"title": "Jeff Bezos"
-	}, {
-		"label": "Organization",
-		"title": "University of Pennsylvania"
-	}, {
-		"label": "Person",
-		"title": "Kimbal Musk"
-	}, {
-		"label": "Organization",
-		"title": "Tesla, Inc."
-	}, {
-		"label": "Person",
-		"title": "Elon Musk"
-	}],
-	"relations": [{
-		"source": "Elon Musk",
-		"target": "Neuralink"
-	}, {
-		"source": "Tesla, Inc.",
-		"target": "Elon Musk",
-		"type": "owned by"
-	}, {
-		"source": "Elon Musk",
-		"target": "University of Pennsylvania",
-		"type": "residence"
-	}, {
-		"source": "Elon Musk",
-		"target": "Tesla, Inc.",
-		"type": "owned by"
-	}, {
-		"source": "The Boring Company",
-		"target": "Tesla, Inc.",
-		"type": "owned by"
-	}, {
-		"source": "Elon Musk",
-		"target": "Kimbal Musk",
-		"type": "sibling"
-	}, {
-		"source": "University of Pennsylvania",
-		"target": "Elon Musk",
-		"type": "residence"
-	}, {
-		"source": "The Boring Company",
-		"target": "Neuralink",
-		"type": "subsidiary"
-	}, {
-		"source": "Elon Musk",
-		"target": "University of Pretoria",
-		"type": "work location"
-	}, {
-		"source": "The Boring Company",
-		"target": "Elon Musk",
-		"type": "owned by"
-	}, {
-		"source": "Kimbal Musk",
-		"target": "Elon Musk",
-		"type": "sibling"
-	}, {
-		"source": "Neuralink",
-		"target": "Elon Musk",
-		"type": "owned by"
-	}, {
-		"source": "Elon Musk",
-		"target": "The Boring Company",
-		"type": "owned by"
-	}, {
-		"source": "Elon Musk",
-		"target": "University of Pennsylvania",
-		"type": "work location"
-	}]
-};
-
-async function fetchData() {
-  const response = await fetch('./data.json');
-  if (response.ok) {
-    knowledgeGraphJson = await response.json();
-  } else {
-    alert(`HTTP-Error: ${response.status}`);
+    id: string
   }
-}
 
-let nodes: INode[] = [];
-let edges: IEdge[] = [];
+  interface INode {
+    data: INodeData
+  }
+
+  interface IEdgeData {
+    id: string
+    source: string
+    target: string
+    label: string
+  }
+
+  interface IEdge {
+    data: IEdgeData
+  }
+
+  let knowledgeGraphJson: any = {
+    entities: [
+      {
+        label: 'Organization',
+        title: 'Neuralink'
+      },
+      {
+        label: 'Organization',
+        title: 'SpaceX'
+      },
+      {
+        label: 'Organization',
+        title: 'Pretoria'
+      },
+      {
+        label: 'Organization',
+        title: 'The Boring Company'
+      },
+      {
+        label: 'Organization',
+        title: 'University of Pretoria'
+      },
+      {
+        label: 'Organization',
+        title: 'Stanford University'
+      },
+      {
+        label: 'Person',
+        title: 'Jeff Bezos'
+      },
+      {
+        label: 'Organization',
+        title: 'University of Pennsylvania'
+      },
+      {
+        label: 'Person',
+        title: 'Kimbal Musk'
+      },
+      {
+        label: 'Organization',
+        title: 'Tesla, Inc.'
+      },
+      {
+        label: 'Person',
+        title: 'Elon Musk'
+      }
+    ],
+    relations: [
+      {
+        source: 'Elon Musk',
+        target: 'Neuralink'
+      },
+      {
+        source: 'Tesla, Inc.',
+        target: 'Elon Musk',
+        type: 'owned by'
+      },
+      {
+        source: 'Elon Musk',
+        target: 'University of Pennsylvania',
+        type: 'residence'
+      },
+      {
+        source: 'Elon Musk',
+        target: 'Tesla, Inc.',
+        type: 'owned by'
+      },
+      {
+        source: 'The Boring Company',
+        target: 'Tesla, Inc.',
+        type: 'owned by'
+      },
+      {
+        source: 'Elon Musk',
+        target: 'Kimbal Musk',
+        type: 'sibling'
+      },
+      {
+        source: 'University of Pennsylvania',
+        target: 'Elon Musk',
+        type: 'residence'
+      },
+      {
+        source: 'The Boring Company',
+        target: 'Neuralink',
+        type: 'subsidiary'
+      },
+      {
+        source: 'Elon Musk',
+        target: 'University of Pretoria',
+        type: 'work location'
+      },
+      {
+        source: 'The Boring Company',
+        target: 'Elon Musk',
+        type: 'owned by'
+      },
+      {
+        source: 'Kimbal Musk',
+        target: 'Elon Musk',
+        type: 'sibling'
+      },
+      {
+        source: 'Neuralink',
+        target: 'Elon Musk',
+        type: 'owned by'
+      },
+      {
+        source: 'Elon Musk',
+        target: 'The Boring Company',
+        type: 'owned by'
+      },
+      {
+        source: 'Elon Musk',
+        target: 'University of Pennsylvania',
+        type: 'work location'
+      }
+    ]
+  }
+
+//   async function fetchData() {
+//     const response = await fetch('./data.json')
+//     if (response.ok) {
+//       knowledgeGraphJson = await response.json()
+//     } else {
+//       alert(`HTTP-Error: ${response.status}`)
+//     }
+//   }
+
+  let nodes: INode[] = []
+  let edges: IEdge[] = []
 
   onMount(async () => {
-    console.log("1");
-    cyDiv = document.getElementById('cy');
-    console.log("2");
-
     //await fetchData();
+    nodes = knowledgeGraphJson.entities.map((entity: any) => ({
+      data: { id: entity.title }
+    }))
 
-    console.log(knowledgeGraphJson);
+    edges = knowledgeGraphJson.relations.map(
+      (relation: any, index: string) => ({
+        data: {
+          id: index,
+          source: relation.source,
+          target: relation.target,
+          label: relation.type
+        }
+      })
+    )
 
-  nodes = knowledgeGraphJson.entities.map((entity: any) => ({
-    data: { id: entity.title },
-  }));
-
-  edges = knowledgeGraphJson.relations.map((relation: any, index: string) => ({
-    data: {
-      id: index,
-      source: relation.source,
-      target: relation.target,
-      label: relation.type,
-    },
-  }));
-
-
-  console.log(edges);
-  const cy = cytoscape({
-    container: document.getElementById('cy'),
-    elements: {
-      nodes,
-      edges,
-    },
-    style: [
-      {
-        selector: 'node',
-        style: {
-          'text-valign': 'center',
-          'text-halign': 'center',
-          label: 'data(id)',
-          width: 100,
-          height: 100,
-        },
+    let cy = cytoscape({
+      container: document.getElementById('cy'),
+      elements: {
+        nodes,
+        edges
       },
-      {
-        selector: 'edge',
-        style: {
-          width: 5,
-          'line-color': 'light grey',
-          'target-arrow-color': 'grey',
-          'target-arrow-shape': 'triangle',
-          'curve-style': 'bezier',
-          label: 'data(label)',
+      style: [
+        {
+          selector: 'node',
+          style: {
+            'text-valign': 'center',
+            'text-halign': 'center',
+            label: 'data(id)',
+            width: 100,
+            height: 100
+          }
         },
-      },
-    ],
-  });
+        {
+          selector: 'edge',
+          style: {
+            width: 5,
+            'line-color': 'light grey',
+            'target-arrow-color': 'grey',
+            'target-arrow-shape': 'triangle',
+            'curve-style': 'bezier',
+            label: 'data(label)'
+          }
+        }
+      ],
+      layout: {
+        name: 'cose'
+        // infinite: true,
+      }
+    })
 
-  cy.layout({
-    name: 'cose',
-  }).run();
-  });
+    cy.on('tap', 'node', event => {
+      const node = event.target
+      const nodeId = node.data('id')
+      alert('Display info for ' + nodeId)
+    })
+
+	cy.on('tap', 'edge', event => {
+      const edge = event.target
+      const edgeId = edge.data('id')
+      alert('Display info for ' + edgeId)
+    })
+
+    //   cy.on('tap', 'node', function(){
+    //   alert("put code here"));
+    //   });
+
+    //   cy.layout({
+    //     name: 'cola'
+    //   }).run();
+  })
 </script>
 
+<section class="overflow-hidden text-gray-700">
+  <div class="pt-8 p-6 md:p-8 mx-auto" />
+
+  <div id="cy" />
+</section>
+
 <style>
   #cy {
     width: 100%;
-    height: 100%;
+    height: 95%;
     position: absolute;
     top: 55px;
     left: 0px;
   }
 </style>
-
-
-<section class="overflow-hidden text-gray-700">
-  <div class="pt-8 p-6 md:p-8 mx-auto">
-
-  </div>
-
-  <div id="cy"></div>
-
-</section>
-
-
-
-
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 968dd05..44519ac 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -5,7 +5,6 @@
   import { sessionStore, themeStore } from '../stores'
   import { errorToMessage } from '$lib/session'
   import { initialize } from '$lib/init'
-  import Footer from '$components/Footer.svelte'
   import Header from '$components/Header.svelte'
   import Notifications from '$components/notifications/Notifications.svelte'
   import SidebarNav from '$components/nav/SidebarNav.svelte'
@@ -60,5 +59,4 @@
       <slot />
     </div>
   </SidebarNav>
-  <Footer />
 </div>