diff --git a/src/assets/hand_pointer.svg b/src/assets/hand_pointer.svg
new file mode 100644
index 0000000..6c3677c
--- /dev/null
+++ b/src/assets/hand_pointer.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg fill="#000000" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M 13 2 C 11.355469 2 10 3.355469 10 5 L 10 16.8125 L 9.34375 16.125 L 9.09375 15.90625 C 7.941406 14.753906 6.058594 14.753906 4.90625 15.90625 C 3.753906 17.058594 3.753906 18.941406 4.90625 20.09375 L 4.90625 20.125 L 13.09375 28.21875 L 13.15625 28.25 L 13.1875 28.3125 C 14.535156 29.324219 16.253906 30 18.1875 30 L 19.90625 30 C 24.441406 30 28.09375 26.347656 28.09375 21.8125 L 28.09375 14 C 28.09375 12.355469 26.738281 11 25.09375 11 C 24.667969 11 24.273438 11.117188 23.90625 11.28125 C 23.578125 9.980469 22.394531 9 21 9 C 20.234375 9 19.53125 9.300781 19 9.78125 C 18.46875 9.300781 17.765625 9 17 9 C 16.648438 9 16.316406 9.074219 16 9.1875 L 16 5 C 16 3.355469 14.644531 2 13 2 Z M 13 4 C 13.554688 4 14 4.445313 14 5 L 14 16 L 16 16 L 16 12 C 16 11.445313 16.445313 11 17 11 C 17.554688 11 18 11.445313 18 12 L 18 16 L 20 16 L 20 12 C 20 11.445313 20.445313 11 21 11 C 21.554688 11 22 11.445313 22 12 L 22 16 L 24.09375 16 L 24.09375 14 C 24.09375 13.445313 24.539063 13 25.09375 13 C 25.648438 13 26.09375 13.445313 26.09375 14 L 26.09375 21.8125 C 26.09375 25.277344 23.371094 28 19.90625 28 L 18.1875 28 C 16.722656 28 15.457031 27.476563 14.40625 26.6875 L 6.3125 18.6875 C 5.867188 18.242188 5.867188 17.757813 6.3125 17.3125 C 6.757813 16.867188 7.242188 16.867188 7.6875 17.3125 L 12 21.625 L 12 5 C 12 4.445313 12.445313 4 13 4 Z"/></svg>
diff --git a/src/index.ts b/src/index.ts
index 3b4d194..5f23ac9 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,9 +1,13 @@
 // Doing this includes the file in the build
 import './style.css';
 
-import { Application, Graphics, GraphicsContext, FederatedPointerEvent, EventSystem, PointData } from 'pixi.js';
+// Assets
 import RouterSvg from './assets/router.svg';
 import ConnectionSvg from './assets/connection.svg';
+import HandPointer from './assets/hand_pointer.svg';
+
+import { Application, Graphics, GraphicsContext, FederatedPointerEvent, EventSystem, PointData } from 'pixi.js';
+
 import * as pixi_viewport from 'pixi-viewport';
 
 
@@ -11,27 +15,155 @@ const WORLD_WIDTH = 10000;
 const WORLD_HEIGHT = 10000;
 
 
-enum CursorMode {
-    Router,
-    Connection,
+// > context.ts
+
+class GlobalContext {
+    private mode: ModeStrategy = null;
+    private viewport: Viewport = null;
+
+    initialize(viewport: Viewport, mode: ModeStrategy) {
+        this.viewport = viewport;
+        this.setMode(mode);
+    }
+
+    getViewport() { return this.viewport; }
+
+    getMode() { return this.mode; }
+
+    setMode(mode: ModeStrategy) {
+        this.mode = mode;
+        this.mode.initialize(this);
+    }
 }
 
+interface ModeStrategy {
+    initialize(ctx: GlobalContext): void;
+    clickViewport(ctx: GlobalContext, e: FederatedPointerEvent): void;
+    clickCircle(ctx: GlobalContext, e: FederatedPointerEvent, circle: Circle): void;
+}
 
-class GlobalContext {
-    // TODO: merge mode and selected fields into strategy class
-    mode: CursorMode = CursorMode.Router;
-    selected: Circle = null;
+class MoveMode implements ModeStrategy {
+    initialize(ctx: GlobalContext) {
+        ctx.getViewport().enableMovement();
+    }
 
-    viewport: Viewport = null;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    clickViewport(ctx: GlobalContext, e: FederatedPointerEvent) {
+        // do nothing
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    clickCircle(ctx: GlobalContext, e: FederatedPointerEvent, circle: Circle) {
+        // do nothing
+    }
+}
+
+class RouterMode {
+    initialize(ctx: GlobalContext) {
+        ctx.getViewport().disableMovement();
+    }
+
+    clickViewport(ctx: GlobalContext, e: FederatedPointerEvent) {
+        const position = ctx.getViewport().toWorld(e.global);
+        const circle = new Circle(ctx, position);
+        ctx.getViewport().addChild(circle);
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    clickCircle(ctx: GlobalContext, e: FederatedPointerEvent, circle: Circle) {
+        // To avoid overlapping circles
+        e.stopPropagation();
+    }
+}
 
-    popSelected() {
+class ConnectionMode {
+    private selected: Circle = null;
+
+    initialize(ctx: GlobalContext) {
+        ctx.getViewport().disableMovement();
+    }
+
+    clickViewport(ctx: GlobalContext, e: FederatedPointerEvent) {
+        e.stopPropagation();
+    }
+
+    clickCircle(ctx: GlobalContext, e: FederatedPointerEvent, circle: Circle) {
+        e.stopPropagation();
+        const selected = this.popSelected();
+
+        if (selected === null) {
+            this.selected = circle;
+            return;
+        }
+        // TODO: this could be moved to a separate function/class
+        const line = new Graphics()
+            .moveTo(selected.x, selected.y)
+            .lineTo(circle.x, circle.y)
+            .stroke({ width: 2, color: 0 });
+        line.zIndex = 1;
+        ctx.getViewport().addChild(line);
+    }
+
+    // Private
+    private popSelected() {
         const selected = this.selected;
         this.selected = null;
         return selected;
     }
+}
 
-    setViewport(viewport: Viewport) {
-        this.viewport = viewport;
+
+// > graphics.ts
+
+class Background extends Graphics {
+    constructor() {
+        super();
+        this.rect(0, 0, WORLD_WIDTH, WORLD_HEIGHT).fill(0xe3e2e1);
+        this.zIndex = 0;
+    }
+
+    resize(width: number, height: number) {
+        this.width = width;
+        this.height = height;
+    }
+}
+
+class Viewport extends pixi_viewport.Viewport {
+    static usedPlugins = ['drag', 'pinch'];
+
+    constructor(ctx: GlobalContext, events: EventSystem) {
+        super({
+            worldWidth: WORLD_WIDTH,
+            worldHeight: WORLD_HEIGHT,
+            events: events,
+        });
+        this.moveCenter(WORLD_WIDTH / 2, WORLD_HEIGHT / 2);
+        this.sortableChildren = true;
+        this.initializeMovement();
+
+        this.addChild(new Background());
+
+        // Circle and lines logic
+        this.on('click', (e) => { ctx.getMode().clickViewport(ctx, e) });
+    }
+
+    private initializeMovement() {
+        this.drag().pinch().wheel()
+            .clamp({ direction: 'all' })
+            // TODO: revisit when all icons are finalized
+            .clampZoom({ minHeight: 200, minWidth: 200, maxWidth: WORLD_WIDTH / 5, maxHeight: WORLD_HEIGHT / 5 });
+    }
+
+    enableMovement() {
+        for (const plugin of Viewport.usedPlugins) {
+            this.plugins.resume(plugin);
+        }
+    }
+
+    disableMovement() {
+        for (const plugin of Viewport.usedPlugins) {
+            this.plugins.pause(plugin);
+        }
     }
 }
 
@@ -42,30 +174,13 @@ class Circle extends Graphics {
         super(Circle.graphicsContext);
         this.position = position;
         this.zIndex = 2;
-        this.on('click', (e) => this.onClick(ctx, e));
+        this.on('click', (e) => ctx.getMode().clickCircle(ctx, e, this));
         this.eventMode = 'static';
     }
+}
 
-    onClick(ctx: GlobalContext, e: FederatedPointerEvent) {
-        if (ctx.mode != CursorMode.Connection) {
-            return;
-        }
-        e.stopPropagation();
-        const selected = ctx.popSelected();
 
-        if (selected === null) {
-            ctx.selected = this;
-        } else {
-            // TODO: this could be moved to a separate function/class
-            const line = new Graphics()
-                .moveTo(selected.x, selected.y)
-                .lineTo(this.x, this.y)
-                .stroke({ width: 2, color: 0 });
-            line.zIndex = 1;
-            ctx.viewport.addChild(line);
-        }
-    }
-}
+// > left_bar.ts
 
 class LeftBar {
     private leftBar: HTMLElement;
@@ -90,6 +205,8 @@ class LeftBar {
     }
 }
 
+// > right_bar.ts
+
 class RightBar {
     private rightBar: HTMLElement;
 
@@ -101,46 +218,8 @@ class RightBar {
     }
 }
 
-class Background extends Graphics {
-    constructor() {
-        super();
-        this.rect(0, 0, WORLD_WIDTH, WORLD_HEIGHT).fill(0xe3e2e1);
-        this.zIndex = 0;
-    }
-
-    resize(width: number, height: number) {
-        this.width = width;
-        this.height = height;
-    }
-}
-
-class Viewport extends pixi_viewport.Viewport {
-    constructor(ctx: GlobalContext, events: EventSystem) {
-        super({
-            worldWidth: WORLD_WIDTH,
-            worldHeight: WORLD_HEIGHT,
-            events: events,
-        });
-        this.moveCenter(WORLD_WIDTH / 2, WORLD_HEIGHT / 2);
-        this.sortableChildren = true;
-        ctx.setViewport(this);
-        this.drag().pinch().wheel()
-            .clamp({ direction: 'all' })
-            // TODO: revisit when all icons are finalized
-            .clampZoom({ minHeight: 200, minWidth: 200, maxWidth: WORLD_WIDTH / 5, maxHeight: WORLD_HEIGHT / 5 });
 
-        this.addChild(new Background());
-
-        // Circle and lines logic
-        this.on('click', (e) => {
-            if (ctx.mode == CursorMode.Router) {
-                const position = this.toWorld(e.global);
-                const circle = new Circle(ctx, position);
-                this.addChild(circle);
-            }
-        });
-    }
-}
+// > index.ts
 
 // IIFE to avoid errors
 (async () => {
@@ -161,20 +240,21 @@ class Viewport extends pixi_viewport.Viewport {
     // Left bar logic
     const leftBar = LeftBar.getFrom(document);
 
+    // Add move button
+    leftBar.addButton(HandPointer, () => { ctx.setMode(new MoveMode()) });
+
     // Add router button
-    leftBar.addButton(RouterSvg, () => {
-        ctx.mode = CursorMode.Router;
-    });
+    leftBar.addButton(RouterSvg, () => { ctx.setMode(new RouterMode()) });
 
     // Add connection button
-    leftBar.addButton(ConnectionSvg, () => {
-        ctx.mode = CursorMode.Connection;
-    });
+    leftBar.addButton(ConnectionSvg, () => { ctx.setMode(new ConnectionMode()) });
 
     // Get right bar
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const rightBar = RightBar.getFrom(document);
 
+    ctx.initialize(viewport, new MoveMode());
+
     // Ticker logic
     // app.ticker.add(() => { });