diff --git a/package.json b/package.json
index b6bd141..67c85e6 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-flow-extension",
   "displayName": "React flow extension",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "An extension for GitHub, GitLab and Bitbucket to see the diff-graph over the files changed and easily navigate the pull request changes.",
   "author": "Avikalp Gupta <avikalp@vibinex.com>",
   "scripts": {
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@plasmohq/messaging": "^0.7.1",
+    "@xyflow/react": "^12.4.3",
     "plasmo": "0.90.3",
     "react": "18.2.0",
     "react-dom": "18.2.0"
diff --git a/src/sidepanel/index.tsx b/src/sidepanel/index.tsx
index 56d77f1..34aae8f 100644
--- a/src/sidepanel/index.tsx
+++ b/src/sidepanel/index.tsx
@@ -1,4 +1,7 @@
 import { useEffect, useState } from "react"
+import { ReactFlow } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import { edges, nodes } from "~utils/reactFlow/sexiest-pr-data";
 
 interface PRInfo {
 	repo: string
@@ -82,7 +85,7 @@ function IndexSidePanel() {
 					justifyContent: "center",
 					color: "#666"
 				}}>
-				Canvas area for React Flow
+				<ReactFlow nodes={nodes} edges={edges} />
 			</div>
 		</div>
 	)
diff --git a/src/utils/reactFlow/initial-data.tsx b/src/utils/reactFlow/initial-data.tsx
new file mode 100644
index 0000000..309ff20
--- /dev/null
+++ b/src/utils/reactFlow/initial-data.tsx
@@ -0,0 +1,180 @@
+import React from 'react';
+import { MarkerType, type Edge, type Node } from '@xyflow/react';
+
+export const nodes: Node[] = [
+	{
+		id: 'annotation-1',
+		type: 'annotation',
+		draggable: false,
+		selectable: false,
+		data: {
+			level: 1,
+			label:
+				'Built-in node and edge types. Draggable, deletable and connectable!',
+			arrowStyle: {
+				right: 0,
+				bottom: 0,
+				transform: 'translate(-30px,10px) rotate(-80deg)',
+			},
+		},
+		position: { x: -200, y: -30 },
+	},
+	{
+		id: '1-1',
+		type: 'input',
+		data: {
+			label: 'Input Node',
+		},
+		position: { x: 150, y: 0 },
+	},
+	{
+		id: '1-2',
+		type: 'default',
+		data: {
+			label: 'Default Node',
+		},
+		position: { x: 0, y: 100 },
+	},
+	{
+		id: '1-3',
+		type: 'output',
+		data: {
+			label: 'Output Node',
+		},
+		position: { x: 300, y: 100 },
+	},
+	{
+		id: 'annotation-2',
+		type: 'annotation',
+		draggable: false,
+		selectable: false,
+		data: {
+			level: 2,
+			label: 'Sub flows, toolbars and resizable nodes!',
+			arrowStyle: {
+				left: 0,
+				bottom: 0,
+				transform: 'translate(5px, 25px) scale(1, -1) rotate(100deg)',
+			},
+		},
+		position: { x: 220, y: 200 },
+	},
+	{
+		id: '2-1',
+		type: 'group',
+		data: {},
+		position: {
+			x: -170,
+			y: 250,
+		},
+		style: {
+			width: 380,
+			height: 180,
+		},
+	},
+	{
+		id: '2-2',
+		data: {},
+		type: 'tools',
+		position: { x: 50, y: 50 },
+		style: {
+			width: 80,
+			height: 80,
+		},
+		parentId: '2-1',
+		extent: 'parent',
+	},
+	{
+		id: '2-3',
+		type: 'resizer',
+		data: {
+			label: 'Resize Me',
+		},
+		position: { x: 250, y: 50 },
+		style: {
+			width: 80,
+			height: 80,
+		},
+		parentId: '2-1',
+		extent: 'parent',
+	},
+	{
+		id: 'annotation-3',
+		type: 'annotation',
+		draggable: false,
+		selectable: false,
+		data: {
+			level: 3,
+			label: <>Nodes and edges can be anything and are fully customizable!</>,
+			arrowStyle: {
+				right: 0,
+				bottom: 0,
+				transform: 'translate(-35px, 20px) rotate(-80deg)',
+			},
+		},
+		position: { x: -40, y: 570 },
+	},
+	{
+		id: '3-2',
+		type: 'textinput',
+		position: { x: 150, y: 650 },
+		data: {},
+	},
+	{
+		id: '3-1',
+		type: 'circle',
+		position: { x: 350, y: 500 },
+		data: {},
+	},
+];
+
+export const edges: Edge[] = [
+	{
+		id: 'e1-2',
+		source: '1-1',
+		target: '1-2',
+		label: 'edge',
+		type: 'smoothstep',
+	},
+	{
+		id: 'e1-3',
+		source: '1-1',
+		target: '1-3',
+		animated: true,
+		label: 'animated edge',
+	},
+	{
+		id: 'e2-2',
+		source: '1-2',
+		target: '2-2',
+		type: 'smoothstep',
+		markerEnd: {
+			type: MarkerType.ArrowClosed,
+		},
+	},
+	{
+		id: 'e2-3',
+		source: '2-2',
+		target: '2-3',
+		type: 'smoothstep',
+		markerEnd: {
+			type: MarkerType.ArrowClosed,
+		},
+	},
+	{
+		id: 'e3-3',
+		source: '2-3',
+		sourceHandle: 'a',
+		target: '3-2',
+		type: 'button',
+		animated: true,
+		style: { stroke: 'rgb(158, 118, 255)' },
+	},
+	{
+		id: 'e3-4',
+		source: '2-3',
+		sourceHandle: 'b',
+		target: '3-1',
+		type: 'button',
+	},
+];
\ No newline at end of file
diff --git a/src/utils/reactFlow/sexiest-pr-data.tsx b/src/utils/reactFlow/sexiest-pr-data.tsx
new file mode 100644
index 0000000..d957483
--- /dev/null
+++ b/src/utils/reactFlow/sexiest-pr-data.tsx
@@ -0,0 +1,143 @@
+import React from 'react';
+import { MarkerType, type Edge, type Node } from '@xyflow/react';
+
+export const nodes: Node[] = [
+	{
+		id: 'browser_use/browser/browser.py',
+		type: 'default',
+		draggable: false,
+		selectable: false,
+		data: {
+			level: 1,
+			label:
+				'browser_use/browser/browser.py',
+		},
+		position: { x: 0, y: 0 },
+		style: {
+			width: 200,
+			height: 300,
+			fontSize: 12,
+		},
+	},
+	{
+		id: 'BrowserConfig',
+		type: 'default',
+		data: {
+			label: 'class BrowserConfig',
+			level: 1,
+		},
+		position: { x: 30, y: 30 },
+		style: {
+			width: 130,
+			height: 20,
+			fontSize: 10,
+			textAlign: "center",
+			alignItems: "flex-start",
+			padding: "1px",
+			backgroundColor: "yellow"
+			
+		},
+	},
+	{
+		id: 'Browser',
+		type: 'default',
+		data: {
+			label: 'class Browser',
+			level: 1,
+		},
+		position: { x: 30, y: 60 },
+		style: {
+			width: 130,
+			height: 230,
+			fontSize: 10,
+			textAlign: "center",
+			alignItems: "flex-start",
+			padding: "1px"
+		},
+	},
+	{
+		id: '_setup_cdp',
+		type: 'default',
+		data: {
+			label: 'fn _setup_cdp',
+			level: 1,
+		},
+		position: { x: 40, y: 90 },
+		style: {
+			width: 110,
+			height: 40,
+			fontSize:8,
+			textAlign: "center",
+			alignItems: "flex-start",
+			padding: "1px",
+			backgroundColor: "yellow",
+		},
+	},
+	{
+		id: '_setup_users',
+		type: 'default',
+		data: {
+			label: 'fn _setup_users',
+			level: 1,
+		},
+		position: { x: 40, y: 140 },
+		style: {
+			width: 110,
+			height: 40,
+			fontSize: 8,
+			textAlign: "center",
+			alignItems: "flex-start",
+			padding: "1px",
+			backgroundColor: "yellow"
+		},
+	},
+	{
+		id: '_setup_browser_with_instance',
+		type: 'default',
+		data: {
+			label: 'fn _setup_browser_with_instance',
+			level: 1,
+		},
+		position: { x: 40, y: 190 },
+		style: {
+			width: 110,
+			height: 40,
+			fontSize: 8,
+			textAlign: "center",
+			alignItems: "flex-start",
+			padding: "1px",
+			backgroundColor: "yellow"
+		},
+	},
+	{
+		id: '_setup_browser',
+		type: 'default',
+		data: {
+			label: 'fn _setup_browser',
+			level: 1,
+		},
+		position: { x: 40, y: 240 },
+		style: {
+			width: 110,
+			height: 40,
+			fontSize: 8,
+			textAlign: "center",
+			alignItems: "flex-start",
+			padding: "1px",
+			backgroundColor: "yellow"
+		},
+	},
+];
+
+export const edges: Edge[] = [
+	{
+		id: 'e1-2',
+		source: 'BrowserConfig',
+		target: 'Browser',
+		label: 'Line 75',
+		type: 'smoothstep',
+		markerEnd: {
+			type: MarkerType.ArrowClosed,
+		},
+	},
+];
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index f947657..b21f1b6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2204,6 +2204,45 @@
     "@types/filesystem" "*"
     "@types/har-format" "*"
 
+"@types/d3-color@*":
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/@types/d3-color/-/d3-color-3.1.3.tgz#368c961a18de721da8200e80bf3943fb53136af2"
+  integrity sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==
+
+"@types/d3-drag@^3.0.7":
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/@types/d3-drag/-/d3-drag-3.0.7.tgz#b13aba8b2442b4068c9a9e6d1d82f8bcea77fc02"
+  integrity sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==
+  dependencies:
+    "@types/d3-selection" "*"
+
+"@types/d3-interpolate@*":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz#412b90e84870285f2ff8a846c6eb60344f12a41c"
+  integrity sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==
+  dependencies:
+    "@types/d3-color" "*"
+
+"@types/d3-selection@*", "@types/d3-selection@^3.0.10":
+  version "3.0.11"
+  resolved "https://registry.yarnpkg.com/@types/d3-selection/-/d3-selection-3.0.11.tgz#bd7a45fc0a8c3167a631675e61bc2ca2b058d4a3"
+  integrity sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==
+
+"@types/d3-transition@^3.0.8":
+  version "3.0.9"
+  resolved "https://registry.yarnpkg.com/@types/d3-transition/-/d3-transition-3.0.9.tgz#1136bc57e9ddb3c390dccc9b5ff3b7d2b8d94706"
+  integrity sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==
+  dependencies:
+    "@types/d3-selection" "*"
+
+"@types/d3-zoom@^3.0.8":
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/@types/d3-zoom/-/d3-zoom-3.0.8.tgz#dccb32d1c56b1e1c6e0f1180d994896f038bc40b"
+  integrity sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==
+  dependencies:
+    "@types/d3-interpolate" "*"
+    "@types/d3-selection" "*"
+
 "@types/estree@^1.0.0", "@types/estree@^1.0.1", "@types/estree@^1.0.6":
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.6.tgz#628effeeae2064a1b4e79f78e81d87b7e5fc7b50"
@@ -2371,6 +2410,28 @@
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.3.4.tgz#06e83c5027f464eef861c329be81454bc8b70780"
   integrity sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==
 
+"@xyflow/react@^12.4.3":
+  version "12.4.3"
+  resolved "https://registry.yarnpkg.com/@xyflow/react/-/react-12.4.3.tgz#0943fca8ff64e5360b0f8c8f46da2e3dc1a64c6b"
+  integrity sha512-oO50TIY4rbgOURK5pmvL4LwLOQdh6YkvrvOBZPBedltJ1TINCRp0FiyYKfYhLnaDcW8/aayvGtFpUcSkPQxpGg==
+  dependencies:
+    "@xyflow/system" "0.0.51"
+    classcat "^5.0.3"
+    zustand "^4.4.0"
+
+"@xyflow/system@0.0.51":
+  version "0.0.51"
+  resolved "https://registry.yarnpkg.com/@xyflow/system/-/system-0.0.51.tgz#3816c75edc8b43f1c9554bccda92afc6bbe79658"
+  integrity sha512-cYnuM3oWQQjx2Rdz0LdZCnbUaWZdZDiik20kPDYsa5SIlq++ZDIcKiDF6a93ncfMv9Ej5GWfDkouE7bObrdRqQ==
+  dependencies:
+    "@types/d3-drag" "^3.0.7"
+    "@types/d3-selection" "^3.0.10"
+    "@types/d3-transition" "^3.0.8"
+    "@types/d3-zoom" "^3.0.8"
+    d3-drag "^3.0.0"
+    d3-selection "^3.0.0"
+    d3-zoom "^3.0.0"
+
 abortcontroller-polyfill@1.7.5:
   version "1.7.5"
   resolved "https://registry.yarnpkg.com/abortcontroller-polyfill/-/abortcontroller-polyfill-1.7.5.tgz#6738495f4e901fbb57b6c0611d0c75f76c485bed"
@@ -2630,6 +2691,11 @@ chrome-trace-event@^1.0.2:
   resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz#05bffd7ff928465093314708c93bdfa9bd1f0f5b"
   integrity sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==
 
+classcat@^5.0.3:
+  version "5.0.5"
+  resolved "https://registry.yarnpkg.com/classcat/-/classcat-5.0.5.tgz#8c209f359a93ac302404a10161b501eba9c09c77"
+  integrity sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w==
+
 cli-width@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-4.1.0.tgz#42daac41d3c254ef38ad8ac037672130173691c5"
@@ -2795,6 +2861,68 @@ csstype@^3.0.2, csstype@^3.1.1:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
 
+"d3-color@1 - 3":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-3.1.0.tgz#395b2833dfac71507f12ac2f7af23bf819de24e2"
+  integrity sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==
+
+"d3-dispatch@1 - 3":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-3.0.1.tgz#5fc75284e9c2375c36c839411a0cf550cbfc4d5e"
+  integrity sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==
+
+"d3-drag@2 - 3", d3-drag@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-drag/-/d3-drag-3.0.0.tgz#994aae9cd23c719f53b5e10e3a0a6108c69607ba"
+  integrity sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==
+  dependencies:
+    d3-dispatch "1 - 3"
+    d3-selection "3"
+
+"d3-ease@1 - 3":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-3.0.1.tgz#9658ac38a2140d59d346160f1f6c30fda0bd12f4"
+  integrity sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==
+
+"d3-interpolate@1 - 3":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-3.0.1.tgz#3c47aa5b32c5b3dfb56ef3fd4342078a632b400d"
+  integrity sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==
+  dependencies:
+    d3-color "1 - 3"
+
+"d3-selection@2 - 3", d3-selection@3, d3-selection@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-3.0.0.tgz#c25338207efa72cc5b9bd1458a1a41901f1e1b31"
+  integrity sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==
+
+"d3-timer@1 - 3":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-3.0.1.tgz#6284d2a2708285b1abb7e201eda4380af35e63b0"
+  integrity sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==
+
+"d3-transition@2 - 3":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-transition/-/d3-transition-3.0.1.tgz#6869fdde1448868077fdd5989200cb61b2a1645f"
+  integrity sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==
+  dependencies:
+    d3-color "1 - 3"
+    d3-dispatch "1 - 3"
+    d3-ease "1 - 3"
+    d3-interpolate "1 - 3"
+    d3-timer "1 - 3"
+
+d3-zoom@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-zoom/-/d3-zoom-3.0.0.tgz#d13f4165c73217ffeaa54295cd6969b3e7aee8f3"
+  integrity sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==
+  dependencies:
+    d3-dispatch "1 - 3"
+    d3-drag "2 - 3"
+    d3-interpolate "1 - 3"
+    d3-selection "2 - 3"
+    d3-transition "2 - 3"
+
 debug@^4.1.0, debug@^4.3.1:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.0.tgz#2b3f2aea2ffeb776477460267377dc8710faba8a"
@@ -4731,6 +4859,11 @@ update-browserslist-db@^1.0.13, update-browserslist-db@^1.1.1:
     escalade "^3.2.0"
     picocolors "^1.1.1"
 
+use-sync-external-store@^1.2.2:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.4.0.tgz#adbc795d8eeb47029963016cefdf89dc799fcebc"
+  integrity sha512-9WXSPC5fMv61vaupRkCKCxsPxBocVnwakBEkMIHHpkTTg6icbJtg6jzgtLDm4bl3cSHAca52rYWih0k4K3PfHw==
+
 utility-types@^3.10.0:
   version "3.11.0"
   resolved "https://registry.yarnpkg.com/utility-types/-/utility-types-3.11.0.tgz#607c40edb4f258915e901ea7995607fdf319424c"
@@ -4829,3 +4962,10 @@ yoctocolors-cjs@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/yoctocolors-cjs/-/yoctocolors-cjs-2.1.2.tgz#f4b905a840a37506813a7acaa28febe97767a242"
   integrity sha512-cYVsTjKl8b+FrnidjibDWskAv7UKOfcwaVZdp/it9n1s9fU3IkgDbhdIRKCW4JDsAlECJY0ytoVPT3sK6kideA==
+
+zustand@^4.4.0:
+  version "4.5.6"
+  resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.5.6.tgz#6857d52af44874a79fb3408c9473f78367255c96"
+  integrity sha512-ibr/n1hBzLLj5Y+yUcU7dYw8p6WnIVzdJbnX+1YpaScvZVF2ziugqHs+LAmHw4lWO9c/zRj+K1ncgWDQuthEdQ==
+  dependencies:
+    use-sync-external-store "^1.2.2"