diff --git a/app/graph/page.tsx b/app/graph/page.tsx
new file mode 100644
index 0000000..51e59ee
--- /dev/null
+++ b/app/graph/page.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import CytoscapeComponent from "react-cytoscapejs";
+
+export default function Graph() {
+  const elements = [
+    { data: { id: "one", label: "Node 1" }, position: { x: 100, y: 100 } },
+    { data: { id: "two", label: "Node 2" }, position: { x: 200, y: 200 } },
+    {
+      data: { source: "one", target: "two", label: "Edge from Node1 to Node2" },
+    },
+  ];
+  return (
+    <CytoscapeComponent
+      elements={elements}
+      style={{ width: "600px", height: "600px" }}
+    />
+  );
+}
diff --git a/package-lock.json b/package-lock.json
index 2884372..708a52b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,8 +11,10 @@
         "@heroicons/react": "^2.1.1",
         "@radix-ui/react-slider": "^1.1.2",
         "clsx": "^2.1.0",
+        "cytoscape": "^3.30.2",
         "next": "^14.1.1",
         "react": "^18",
+        "react-cytoscapejs": "^2.0.0",
         "react-dom": "^18",
         "zod": "^3.22.4"
       },
@@ -21,6 +23,7 @@
         "@tailwindcss/forms": "^0.5.7",
         "@types/node": "^22",
         "@types/react": "^18",
+        "@types/react-cytoscapejs": "^1.2.5",
         "@types/react-dom": "^18",
         "autoprefixer": "^10.0.1",
         "postcss": "^8",
@@ -717,6 +720,13 @@
         "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20"
       }
     },
+    "node_modules/@types/cytoscape": {
+      "version": "3.21.8",
+      "resolved": "https://registry.npmjs.org/@types/cytoscape/-/cytoscape-3.21.8.tgz",
+      "integrity": "sha512-6Bo9ZDrv0vfwe8Sg/ERc5VL0yU0gYvP4dgZi0fAXYkKHfyHaNqWRMcwYm3mu4sLsXbB8ZuXE75sR7qnaOL5JgQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/node": {
       "version": "22.7.4",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-22.7.4.tgz",
@@ -742,6 +752,17 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/@types/react-cytoscapejs": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@types/react-cytoscapejs/-/react-cytoscapejs-1.2.5.tgz",
+      "integrity": "sha512-G9VcGQOlER3njklOu5D0FDGHYfkQJ3yEL95kGbgI/MR08N5dQ7IbLSZI8WqaB4fG0zOURIg0BUtOCrbE5HRZEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/cytoscape": "*",
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-dom": {
       "version": "18.3.0",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
@@ -1055,6 +1076,15 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "devOptional": true
     },
+    "node_modules/cytoscape": {
+      "version": "3.30.2",
+      "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.30.2.tgz",
+      "integrity": "sha512-oICxQsjW8uSaRmn4UK/jkczKOqTrVqt5/1WL0POiJUT2EKNc9STM4hYFHv917yu55aTBMFNRzymlJhVAiWPCxw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -1564,7 +1594,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -1805,6 +1834,17 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -1836,6 +1876,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-cytoscapejs": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/react-cytoscapejs/-/react-cytoscapejs-2.0.0.tgz",
+      "integrity": "sha512-t3SSl1DQy7+JQjN+8QHi1anEJlM3i3aAeydHTsJwmjo/isyKK7Rs7oCvU6kZsB9NwZidzZQR21Vm2PcBLG/Tjg==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "cytoscape": "^3.2.19",
+        "react": ">=15.0.0"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
@@ -1848,6 +1901,12 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/package.json b/package.json
index 87b3eb1..458fb4d 100644
--- a/package.json
+++ b/package.json
@@ -13,8 +13,10 @@
     "@heroicons/react": "^2.1.1",
     "@radix-ui/react-slider": "^1.1.2",
     "clsx": "^2.1.0",
+    "cytoscape": "^3.30.2",
     "next": "^14.1.1",
     "react": "^18",
+    "react-cytoscapejs": "^2.0.0",
     "react-dom": "^18",
     "zod": "^3.22.4"
   },
@@ -23,6 +25,7 @@
     "@tailwindcss/forms": "^0.5.7",
     "@types/node": "^22",
     "@types/react": "^18",
+    "@types/react-cytoscapejs": "^1.2.5",
     "@types/react-dom": "^18",
     "autoprefixer": "^10.0.1",
     "postcss": "^8",