diff --git a/components/Graph.js b/components/Graph.js
deleted file mode 100644
index 74b8fc8..0000000
--- a/components/Graph.js
+++ /dev/null
@@ -1,115 +0,0 @@
-import React, {useState} from 'react';
-// import cytoscape from 'cytoscape';
-// import cola from 'cytoscape-cola';
-import {useRouter} from 'next/router'
-
-import CytoscapeComponent from "react-cytoscapejs";
-
-
-const layout = {
-    name: 'circle',
-    fit: true, // whether to fit the viewport to the graph
-    padding: 32, // the padding on fit
-    boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
-    avoidOverlap: true, // prevents node overlap, may overflow boundingBox and radius if not enough space
-    nodeDimensionsIncludeLabels: false, // Excludes the label when calculating node bounding boxes for the layout algorithm
-    spacingFactor: 0.9, // Applies a multiplicative factor (>0) to expand or compress the overall area that the nodes take up
-    radius: 150, // the radius of the circle
-    startAngle: -2 / 4 * Math.PI, // where nodes start in radians
-    //sweep: undefined, // how many radians should be between the first and last node (defaults to full circle)
-    clockwise: true, // whether the layout should go clockwise (true) or counterclockwise/anticlockwise (false)
-    sort: undefined, // a sorting function to order the nodes; 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;
-    } // transform a given node position. Useful for changing flow direction in discrete layouts
-};
-
-const styleSheet = [{
-    selector: "node",
-    style: {
-        "background-color": "#666",
-        "font-size": "12px",
-        "width": "20px",
-        "height": "20px",
-        "label":"data(label)"
-    }
-}, {
-    selector: "label",
-    style: {"font-size": "12px"},
-},
-    {
-        selector: 'edge',
-        style: {
-            'width': 2,
-            "height": 200,
-            'line-color': '#b2b2b2',
-            'target-arrow-color': '#ccc',
-            // 'target-arrow-shape': 'triangle',
-            'curve-style': 'straight'
-        }
-    }];
-
-function Graph({graph}) {
-
-    const [width, setWidth] = useState("300px");
-    const [height, setHeight] = useState("300px");
-    const [graphData, setGraphData] = useState({
-        nodes: graph.nodes,
-        edges: graph.edges
-    });
-
-    let myCyRef;
-    const router = useRouter()
-    //TODO: Listen to query change/ graphdata change to update state of this component
-    // Can use this: https://github.com/vercel/next.js/discussions/12661
-
-    return (
-        <>
-            <div className="right-bar-container">
-                <h3>Interactive Graph</h3>
-                <div
-                    style={{
-                        border: "1px solid #ddd",
-                        backgroundColor: "#f5f6fe",
-                        borderRadius:"8px"
-                    }}
-                >
-                    <CytoscapeComponent
-                        elements={CytoscapeComponent.normalizeElements(graphData)}
-                        // pan={{ x: 200, y: 200 }}
-                        style={{width: width, height: height}}
-                        zoomingEnabled={true}
-                        maxZoom={2}
-                        minZoom={0.5}
-                        autounselectify={false}
-                        boxSelectionEnabled={true}
-                        layout={layout}
-                        stylesheet={styleSheet}
-                        cy={cy => {
-                            myCyRef = cy;
-
-                            console.log("EVT", cy);
-
-                            cy.on("tap", "node", evt => {
-                                var node = evt.target;
-                                let nodeData = node.data();
-                                if (typeof nodeData.id === 'string') {
-                                    const path = '/note/' + node.data().id
-                                    router.push(path)
-                                }
-                            });
-                        }}
-                    />
-                </div>
-            </div>
-        </>
-    );
-}
-
-export default Graph;
\ No newline at end of file
diff --git a/pages/index.js b/pages/index.js
index 2aee291..5b66f0d 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,11 +1,11 @@
 import Layout from "../components/Layout";
 import {
-    getSinglePost,
-    getDirectoryData,
-    convertObject,
-    getFlattenArray,
-    getLocalGraphData,
-    constructGraphData
+  getSinglePost,
+  getDirectoryData,
+  convertObject,
+  getFlattenArray,
+  getLocalGraphData,
+  constructGraphData
 } from "../lib/utils";
 import FolderTree from "../components/FolderTree";
 import dynamic from 'next/dynamic'
@@ -13,43 +13,37 @@ import MDContent from "../components/MDContent";
 
 
 // This trick is to dynamically load component that interact with window object (browser only)
-const DynamicGraph = dynamic(
-    () => import('../components/Graph'),
-    { loading: () => <p>Loading ...</p>, ssr: false }
-)
-
-export default function Home({graphData, content, tree, flattenNodes, backLinks}) {
-    return (
-        <Layout>
-            <div className = 'container'>
-                <nav className="nav-bar">
-                    <FolderTree tree={tree} flattenNodes={flattenNodes}/>
-                </nav>
-                <MDContent content={content}  handleOpenNewContent={null} backLinks={backLinks}/>
-                <DynamicGraph graph={graphData}/>
-            </div>
-        </Layout>
-    );
+export default function Home({ graphData, content, tree, flattenNodes, backLinks }) {
+  return (
+    <Layout>
+      <div className='container'>
+        <nav className="nav-bar">
+          <FolderTree tree={tree} flattenNodes={flattenNodes} />
+        </nav>
+        <MDContent content={content} handleOpenNewContent={null} backLinks={backLinks} />
+      </div>
+    </Layout>
+  );
 
 }
-const {nodes, edges} = constructGraphData()
+const { nodes, edges } = constructGraphData()
 
 export function getStaticProps() {
-    const tree = convertObject(getDirectoryData());
-    const contentData = getSinglePost("index");
-    const flattenNodes = getFlattenArray(tree)
-    const listOfEdges =   edges.filter(anEdge => anEdge.target === "index")
-    const internalLinks = listOfEdges.map(anEdge => nodes.find(aNode => aNode.slug === anEdge.source)).filter(element => element !== undefined)
-    const backLinks = [...new Set(internalLinks)]
+  const tree = convertObject(getDirectoryData());
+  const contentData = getSinglePost("index");
+  const flattenNodes = getFlattenArray(tree)
+  const listOfEdges = edges.filter(anEdge => anEdge.target === "index")
+  const internalLinks = listOfEdges.map(anEdge => nodes.find(aNode => aNode.slug === anEdge.source)).filter(element => element !== undefined)
+  const backLinks = [...new Set(internalLinks)]
 
-    const graphData = getLocalGraphData("index");
-    return {
-        props: {
-            content: contentData.data,
-            tree: tree,
-            flattenNodes: flattenNodes,
-            graphData:graphData,
-            backLinks: backLinks
-        },
-    };
+  const graphData = getLocalGraphData("index");
+  return {
+    props: {
+      content: contentData.data,
+      tree: tree,
+      flattenNodes: flattenNodes,
+      graphData: graphData,
+      backLinks: backLinks
+    },
+  };
 }
diff --git a/pages/note/[id].js b/pages/note/[id].js
index 73c4330..c91b125 100644
--- a/pages/note/[id].js
+++ b/pages/note/[id].js
@@ -1,69 +1,63 @@
 import Head from "next/head";
 import Layout from "../../components/Layout";
 import {
-    getAllSlugs,
-    getSinglePost,
-    convertObject,
-    getDirectoryData,
-    constructGraphData, getLocalGraphData
+  getAllSlugs,
+  getSinglePost,
+  convertObject,
+  getDirectoryData,
+  constructGraphData, getLocalGraphData
 } from "../../lib/utils";
 import FolderTree from "../../components/FolderTree";
-import {getFlattenArray} from "../../lib/utils";
+import { getFlattenArray } from "../../lib/utils";
 import MDContent from "../../components/MDContent";
-import dynamic from 'next/dynamic'
 
-const DynamicGraph = dynamic(
-    () => import('../../components/Graph'),
-    { loading: () => <p>Loading ...</p>, ssr: false }
-)
 
-export default function Home({note, backLinks, fileNames, tree, flattenNodes, graphData}) {
+export default function Home({ note, backLinks, fileNames, tree, flattenNodes, graphData }) {
 
-    return (
-        <Layout>
-            <Head>
-                {note.title && <meta name="title" content={note.title}/>}
-            </Head>
-            <div className='container'>
-                <nav className="nav-bar">
-                    <FolderTree tree={tree} flattenNodes={flattenNodes}/>
-                </nav>
-                <MDContent content={note.data} fileNames={fileNames} handleOpenNewContent={null} backLinks={backLinks}/>
-                <DynamicGraph graph={graphData}/>
-            </div>
+  return (
+    <Layout>
+      <Head>
+        {note.title && <meta name="title" content={note.title} />}
+      </Head>
+      <div className='container'>
+        <nav className="nav-bar">
+          <FolderTree tree={tree} flattenNodes={flattenNodes} />
+        </nav>
+        <MDContent content={note.data} fileNames={fileNames} handleOpenNewContent={null} backLinks={backLinks} />
+      </div>
 
-        </Layout>
-    );
+    </Layout>
+  );
 }
 
 export async function getStaticPaths() {
-    const allPostsData = getAllSlugs();
-    const paths = allPostsData.map(p => ({params: {id: p}}))
+  const allPostsData = getAllSlugs();
+  const paths = allPostsData.map(p => ({ params: { id: p } }))
 
-    return {
-        paths,
-        fallback: false
-    };
+  return {
+    paths,
+    fallback: false
+  };
 }
 
-const {nodes, edges} = constructGraphData()
+const { nodes, edges } = constructGraphData()
 
-export function getStaticProps({params}) {
-    const note = getSinglePost(params.id);
-    const tree = convertObject(getDirectoryData());
-    const flattenNodes = getFlattenArray(tree)
+export function getStaticProps({ params }) {
+  const note = getSinglePost(params.id);
+  const tree = convertObject(getDirectoryData());
+  const flattenNodes = getFlattenArray(tree)
 
-    const listOfEdges =   edges.filter(anEdge => anEdge.target === params.id)
-    const internalLinks = listOfEdges.map(anEdge => nodes.find(aNode => aNode.slug === anEdge.source)).filter(element => element !== undefined)
-    const backLinks = [...new Set(internalLinks)]
-    const graphData = getLocalGraphData(params.id)
-    return {
-        props: {
-            note,
-            tree: tree,
-            flattenNodes: flattenNodes,
-            backLinks: backLinks.filter(link => link.slug !== params.id),
-            graphData: graphData
-        },
-    };
+  const listOfEdges = edges.filter(anEdge => anEdge.target === params.id)
+  const internalLinks = listOfEdges.map(anEdge => nodes.find(aNode => aNode.slug === anEdge.source)).filter(element => element !== undefined)
+  const backLinks = [...new Set(internalLinks)]
+  const graphData = getLocalGraphData(params.id)
+  return {
+    props: {
+      note,
+      tree: tree,
+      flattenNodes: flattenNodes,
+      backLinks: backLinks.filter(link => link.slug !== params.id),
+      graphData: graphData
+    },
+  };
 }