diff --git a/app/javascript/controllers/hello_controller.js b/app/javascript/controllers/hello_controller.js
deleted file mode 100644
index 28fdb137..00000000
--- a/app/javascript/controllers/hello_controller.js
+++ /dev/null
@@ -1,18 +0,0 @@
-// Visit The Stimulus Handbook for more details 
-// https://stimulusjs.org/handbook/introduction
-// 
-// This example controller works with specially annotated HTML like:
-//
-// <div data-controller="hello">
-//   <h1 data-target="hello.output"></h1>
-// </div>
-
-import { Controller } from "stimulus"
-
-export default class extends Controller {
-  static targets = [ "output" ]
-
-  connect() {
-    this.outputTarget.textContent = 'Hello, Stimulus!'
-  }
-}
diff --git a/app/javascript/controllers/seats_controller.js b/app/javascript/controllers/seats_controller.js
new file mode 100644
index 00000000..974b16f7
--- /dev/null
+++ b/app/javascript/controllers/seats_controller.js
@@ -0,0 +1,24 @@
+import { Controller } from "stimulus"
+import svgPanZoom from "svg-pan-zoom"
+
+export default class extends Controller {
+  static targets = [
+    "map",
+  ]
+
+  connect() {
+    this.map = svgPanZoom(this.mapTarget, {
+      viewportSelector: "#map-viewport",
+      center: true,
+      fit: true,
+      zoomEnabled: false,
+      zoomScaleSensitivity: 0.75,
+      minZoom: 1.0,
+      maxZoom: 8,
+    })
+  }
+
+  disconnect() {
+    this.map.destroy()
+  }
+}
diff --git a/app/views/seats/index.html.erb b/app/views/seats/index.html.erb
index 46826f46..5ec9a240 100644
--- a/app/views/seats/index.html.erb
+++ b/app/views/seats/index.html.erb
@@ -7,6 +7,7 @@
 <main class="syos-site-frame__main">
   <section
     class="syos-frame"
+    data-controller="seats"
   >
     <div class="syos-frame__map">
       <nav class="syos-frame__floor-nav syos-floor-nav">
@@ -84,6 +85,7 @@
         width="1600px"
         height="1600px"
         viewBox="0 0 1600 1600"
+        data-target="seats.map"
       >
         <rect fill="none" x="0" y="0" width="1600" height="1600"></rect>
 
@@ -108,7 +110,7 @@
           </symbol>
         </svg>
 
-        <g>
+        <g id="map-viewport">
           <% sections.each do |section| %>
             <g
               <% if params.fetch(:maximum, Float::INFINITY).to_f >= section.price %>
diff --git a/package.json b/package.json
index 8dbf5289..7aacfb39 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "breakpoint-sass": "2.7.1",
     "dialog-polyfill": "^0.5.0",
     "stimulus": "^1.1.1",
+    "svg-pan-zoom": "^3.6.0",
     "turbolinks": "^5.2.0"
   },
   "version": "0.1.0",
diff --git a/yarn.lock b/yarn.lock
index c3c792f5..0fc29e12 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6788,6 +6788,11 @@ supports-color@^7.0.0:
   dependencies:
     has-flag "^4.0.0"
 
+svg-pan-zoom@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/svg-pan-zoom/-/svg-pan-zoom-3.6.0.tgz#31d8137d7e079e8f059effd85c7605b0567b6e4b"
+  integrity sha512-ZBEL2z/n/W2fLLFzn3NTQgd+7QEfbrKvKmu29U3qvMflmJgLaWkwKbOzWJYESFidTiGYMHkijAKmY6m64moyYg==
+
 svgo@^1.0.0:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167"