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 e697a911..ff613008 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,36 +110,38 @@
           </symbol>
         </svg>
 
-        <% sections.each do |section| %>
-          <g
-            <% if params.fetch(:maximum, Float::INFINITY).to_f >= section.price %>
-              opacity="1.0"
-            <% else %>
-              opacity="0.3"
-              aria-hidden="true"
-            <% end %>
-          >
-            <% section.seats.each do |seat| %>
-              <a
-                href="<%= venue_floor_seat_path(venue, floor, seat.row_number) %>"
-                aria-label="<%= seat.row_number %>"
-              >
-                <use
-                  <% if Current.cart.include?(seat) %>
-                    xlink:href="#seat-icon-selected"
-                  <% else %>
-                    xlink:href="#seat-icon-unselected"
-                  <% end %>
-                  width="12px"
-                  height="12px"
-                  x="<%= seat.x %>"
-                  y="<%= seat.y %>"
+        <g id="map-viewport">
+          <% sections.each do |section| %>
+            <g
+              <% if params.fetch(:maximum, Float::INFINITY).to_f >= section.price %>
+                opacity="1.0"
+              <% else %>
+                opacity="0.3"
+                aria-hidden="true"
+              <% end %>
+            >
+              <% section.seats.each do |seat| %>
+                <a
+                  href="<%= venue_floor_seat_path(venue, floor, seat.row_number) %>"
+                  aria-label="<%= seat.row_number %>"
                 >
-                </use>
-              </a>
-            <% end %>
-          </g>
-        <% end %>
+                  <use
+                    <% if Current.cart.include?(seat) %>
+                      xlink:href="#seat-icon-selected"
+                    <% else %>
+                      xlink:href="#seat-icon-unselected"
+                    <% end %>
+                    width="12px"
+                    height="12px"
+                    x="<%= seat.x %>"
+                    y="<%= seat.y %>"
+                  >
+                  </use>
+                </a>
+              <% end %>
+            </g>
+          <% end %>
+        </g>
       </svg>
     </div>
 
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"