diff --git a/package-lock.json b/package-lock.json
index 2b88a08..e3541a2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,8 @@
       "version": "0.0.0",
       "dependencies": {
         "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "svg-pan-zoom": "^3.6.1"
       },
       "devDependencies": {
         "@types/react": "^18.0.15",
@@ -4063,6 +4064,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svg-pan-zoom": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/svg-pan-zoom/-/svg-pan-zoom-3.6.1.tgz",
+      "integrity": "sha512-JaKkGHHfGvRrcMPdJWkssLBeWqM+Isg/a09H7kgNNajT1cX5AztDTNs+C8UzpCxjCTRrG34WbquwaovZbmSk9g=="
+    },
     "node_modules/tailwindcss": {
       "version": "3.1.7",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.7.tgz",
@@ -7164,6 +7170,11 @@
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
       "dev": true
     },
+    "svg-pan-zoom": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/svg-pan-zoom/-/svg-pan-zoom-3.6.1.tgz",
+      "integrity": "sha512-JaKkGHHfGvRrcMPdJWkssLBeWqM+Isg/a09H7kgNNajT1cX5AztDTNs+C8UzpCxjCTRrG34WbquwaovZbmSk9g=="
+    },
     "tailwindcss": {
       "version": "3.1.7",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.7.tgz",
diff --git a/package.json b/package.json
index 519721a..fa7bf42 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "svg-pan-zoom": "^3.6.1"
   },
   "devDependencies": {
     "@types/react": "^18.0.15",
diff --git a/src/App.scss b/src/App.scss
index 4134015..ac9c791 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -1,5 +1,7 @@
 html,
 body,
-#root {
+#root,
+svg {
   height: 100%;
+  width: 100%;
 }
\ No newline at end of file
diff --git a/src/SVG/SVG.tsx b/src/SVG/SVG.tsx
index dd3e46a..81f5bf4 100644
--- a/src/SVG/SVG.tsx
+++ b/src/SVG/SVG.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { AvailableContainer } from '../Interfaces/AvailableContainer';
 import { Container } from './Elements/Container';
 import { MainContainer } from './Elements/MainContainer';
+import * as svgPanZoom from 'svg-pan-zoom';
 
 interface ISVGProps {
   MainContainer: AvailableContainer
@@ -13,6 +14,7 @@ interface ISVGState {
 
 export class SVG extends React.Component<ISVGProps> {
   public state: ISVGState;
+  public svg: React.RefObject<SVGSVGElement>;
 
   constructor(props: ISVGProps) {
     super(props);
@@ -24,9 +26,10 @@ export class SVG extends React.Component<ISVGProps> {
         window.innerHeight
       ]
     };
+    this.svg = React.createRef<SVGSVGElement>();
   }
 
-  updateViewBox() {
+  resizeViewBox() {
     this.setState({
       viewBox: [
         0,
@@ -38,11 +41,13 @@ export class SVG extends React.Component<ISVGProps> {
   }
 
   componentDidMount() {
-    window.addEventListener('resize', this.updateViewBox.bind(this));
-  }
+    if (this.svg === null ||
+      this.svg === undefined ||
+      this.svg.current === null) {
+      return;
+    }
 
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.updateViewBox.bind(this));
+    svgPanZoom(this.svg.current);
   }
 
   render() {
@@ -56,7 +61,7 @@ export class SVG extends React.Component<ISVGProps> {
     const children: Container[] = [];
 
     return (
-        <svg {...properties}>
+        <svg ref={this.svg} {...properties}>
           <MainContainer
             width={this.props.MainContainer.Width}
             height={this.props.MainContainer.Height}