diff --git a/package-lock.json b/package-lock.json
index 053faed17..23eeea1d5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "headlamp-edp",
-  "version": "0.2.2",
+  "version": "0.11.0-SNAPSHOT",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "headlamp-edp",
-      "version": "0.2.2",
+      "version": "0.11.0-SNAPSHOT",
       "dependencies": {
         "@carbon/charts": "0.58.2",
         "@carbon/charts-react": "0.58.2",
@@ -31,6 +31,7 @@
         "react-query": "^3.39.3",
         "react-redux": "^7.2.5",
         "react-router-dom": "^5.3.0",
+        "react-zoom-pan-pinch": "^3.1.0",
         "uuid": "^9.0.0"
       },
       "devDependencies": {
@@ -36659,6 +36660,19 @@
         "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-zoom-pan-pinch": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/react-zoom-pan-pinch/-/react-zoom-pan-pinch-3.1.0.tgz",
+      "integrity": "sha512-a3LlP8QPgTikvteCNkZ3X6wIWC0lrg1geP5WkUJyx2MXXAhHQek3r17N1nT/esOiWGuPIECnsd9AGoK8jOeGcg==",
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-dom": "*"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -70346,6 +70360,12 @@
         "memoize-one": ">=3.1.1 <6"
       }
     },
+    "react-zoom-pan-pinch": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/react-zoom-pan-pinch/-/react-zoom-pan-pinch-3.1.0.tgz",
+      "integrity": "sha512-a3LlP8QPgTikvteCNkZ3X6wIWC0lrg1geP5WkUJyx2MXXAhHQek3r17N1nT/esOiWGuPIECnsd9AGoK8jOeGcg==",
+      "requires": {}
+    },
     "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 57ccb81f1..bf15deba6 100644
--- a/package.json
+++ b/package.json
@@ -55,6 +55,7 @@
     "react-query": "^3.39.3",
     "react-redux": "^7.2.5",
     "react-router-dom": "^5.3.0",
+    "react-zoom-pan-pinch": "^3.1.0",
     "uuid": "^9.0.0"
   },
   "devDependencies": {
diff --git a/src/components/Graph/index.tsx b/src/components/Graph/index.tsx
index 802872e80..f3b91dc54 100644
--- a/src/components/Graph/index.tsx
+++ b/src/components/Graph/index.tsx
@@ -3,9 +3,11 @@ import { ArrowRightMarker } from '@carbon/charts-react/diagrams/Marker';
 import { ElkNode } from 'elkjs';
 import ELK from 'elkjs/lib/elk.bundled';
 import React, { useEffect, useState } from 'react';
+import { ReactZoomPanPinchRef, TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';
 import { Edge } from './components/Edge';
 import { Node } from './components/Node';
 import { GraphProps } from './components/types';
+
 export const Graph = ({ direction = 'RIGHT', id, nodes, edges, type = 'detailed' }: GraphProps) => {
     const elk = React.useMemo(
         () =>
@@ -45,6 +47,8 @@ export const Graph = ({ direction = 'RIGHT', id, nodes, edges, type = 'detailed'
             .catch(console.error);
     }, [direction, elk, graph]);
 
+    const transformComponentRef = React.useRef<ReactZoomPanPinchRef | null>(null);
+
     if (!positions) return null;
 
     const {
@@ -55,19 +59,31 @@ export const Graph = ({ direction = 'RIGHT', id, nodes, edges, type = 'detailed'
     } = positions;
 
     return (
-        <div className="tkn--pipeline-graph">
-            <svg style={{ height: graphHeight, width: graphWidth }}>
-                <defs>
-                    <ArrowRightMarker id="arrowRight" />
-                </defs>
-                {graphEdges.map((edge, i) => {
-                    return <Edge direction={direction} key={`edge_${i}`} {...edge} />;
-                })}
-                {graphNodes.map((node, i) => {
-                    //@ts-ignore
-                    return <Node key={`node_${i}`} {...node} />;
-                })}
-            </svg>
-        </div>
+        <TransformWrapper
+            initialScale={1}
+            minScale={0.8}
+            initialPositionX={0}
+            initialPositionY={0}
+            ref={transformComponentRef}
+        >
+            <TransformComponent>
+                <svg
+                    style={{ height: graphHeight + 100, width: graphWidth }}
+                    viewBox={`0 0 ${graphWidth} ${graphHeight + 100 - graphHeight / 2}`}
+                    id="graph-svg"
+                >
+                    <defs>
+                        <ArrowRightMarker id="arrowRight" />
+                    </defs>
+                    {graphEdges.map((edge, i) => {
+                        return <Edge direction={direction} key={`edge_${i}`} {...edge} />;
+                    })}
+                    {graphNodes.map((node, i) => {
+                        //@ts-ignore
+                        return <Node key={`node_${i}`} {...node} />;
+                    })}
+                </svg>
+            </TransformComponent>
+        </TransformWrapper>
     );
 };
diff --git a/src/override.css b/src/override.css
index ec278cff4..85a34da09 100644
--- a/src/override.css
+++ b/src/override.css
@@ -24,3 +24,8 @@ div[class*="SnackbarItem-variantWarning"] {
     color: #000;
 }
 
+.react-transform-wrapper {
+    width: auto !important;
+    height: auto !important;
+}
+