diff --git a/html/css/dashboard.css b/html/css/dashboard.css
index 5357b6b14..833078661 100644
--- a/html/css/dashboard.css
+++ b/html/css/dashboard.css
@@ -16,6 +16,7 @@
     left: 0;
     bottom: 45px;
     right: 0;
+    touch-action: pan-x pan-y;
 }
 
 #pedalboard-dashboard.dev_api:after {
diff --git a/html/index.html b/html/index.html
index d4a2c44db..cfc5c3d67 100644
--- a/html/index.html
+++ b/html/index.html
@@ -45,6 +45,7 @@
 
 <script type="text/javascript" src="js/lib/jquery-1.9.1.min.js?v={{version}}"></script>
 <script type="text/javascript" src="js/lib/jquery-ui-1.10.1.custom.min.js?v={{version}}"></script>
+<script> if (! ("ontouchend" in document)){document.ontouchend=''}</script>
 <script type="text/javascript" src="js/lib/jquery.ui.touch-punch.min.js?v={{version}}"></script>
 <script type="text/javascript" src="js/lib/jquery.ba-resize.min.js?v={{version}}"></script>
 <script type="text/javascript" src="js/lib/mustache.js?v={{version}}"></script>
diff --git a/html/js/desktop.js b/html/js/desktop.js
index 9abb51eb3..7e880a3d2 100644
--- a/html/js/desktop.js
+++ b/html/js/desktop.js
@@ -532,31 +532,31 @@ function Desktop(elements) {
         removeBPMHardwareMapping: function(syncMode) {
           var instanceAndSymbol = "/pedalboard/:bpm"
           if (self.hardwareManager.removeHardwareMappping(instanceAndSymbol)) {
-              var source = syncMode === "link" ? "Ableton Link" : "MIDI"
-              new Notification('info', 'BPM addressing removed, incompatible with ' + source + ' sync mode', 8000)
-          }
-          self.pedalboardModified = true
+                var source = syncMode === "link" ? "Ableton Link" : "MIDI"
+                new Notification('info', 'BPM addressing removed, incompatible with ' + source + ' sync mode', 8000)
+            }
+            self.pedalboardModified = true
         },
         setSyncMode: function(syncMode, callback) {
           $.ajax({
-              url: '/pedalboard/transport/set_sync_mode/' + syncMode,
-              type: 'POST',
-              success: function (resp) {
-                  if (resp) {
-                      callback(true)
-                  } else {
-                      new Bug("Couldn't set new sync mode")
-                      callback(false)
-                  }
-              },
-              error: function () {
-                  new Bug("Couldn't set new sync mode, server error")
-                  callback(false)
-              },
-              cache: false,
-              dataType: 'json'
+            url: '/pedalboard/transport/set_sync_mode/' + syncMode,
+            type: 'POST',
+            success: function (resp) {
+                if (resp) {
+                    callback(true)
+                } else {
+                    new Bug("Couldn't set new sync mode")
+                    callback(false)
+                }
+            },
+            error: function () {
+                new Bug("Couldn't set new sync mode, server error")
+                callback(false)
+            },
+            cache: false,
+            dataType: 'json'
           })
-        },
+        },  
         unaddressPort: function (portSymbol, syncMode, callback) {
             var addressing = {
                 uri    : kNullAddressURI,
@@ -672,7 +672,7 @@ function Desktop(elements) {
             }),
             success: function (resp) {
                 if (! resp.result) {
-					callback(false)
+                    callback(false)
                     return
                 }
                 callback(true)
@@ -1269,15 +1269,15 @@ function Desktop(elements) {
         }
     })
 
-	elements.settingsIcon.click(function() {
-		document.location.href = '/settings';
-	})
+    elements.settingsIcon.click(function() {
+        document.location.href = '/settings';
+    })
 
-	elements.settingsIcon.statusTooltip()
-	elements.pedalboardTrigger.statusTooltip()
-	elements.pedalboardBoxTrigger.statusTooltip()
-	elements.bankBoxTrigger.statusTooltip()
-	elements.cloudPluginBoxTrigger.statusTooltip()
+    elements.settingsIcon.statusTooltip()
+    elements.pedalboardTrigger.statusTooltip()
+    elements.pedalboardBoxTrigger.statusTooltip()
+    elements.bankBoxTrigger.statusTooltip()
+    elements.cloudPluginBoxTrigger.statusTooltip()
 
     this.upgradeWindow = elements.upgradeWindow.upgradeWindow({
         icon: elements.upgradeIcon,
@@ -1304,9 +1304,9 @@ function Desktop(elements) {
     var prevent = function (ev) {
         ev.preventDefault()
     }
+
     $('body')[0].addEventListener('gesturestart', prevent)
     $('body')[0].addEventListener('gesturechange', prevent)
-    $('body')[0].addEventListener('touchmove', prevent)
     $('body')[0].addEventListener('dblclick', prevent)
 }
 
diff --git a/html/js/pedalboard.js b/html/js/pedalboard.js
index e209964f1..0d3e32fab 100644
--- a/html/js/pedalboard.js
+++ b/html/js/pedalboard.js
@@ -239,7 +239,7 @@ JqueryClass('pedalboard', {
         }});
 
         // Dragging the pedalboard move the view area
-        self.mousedown(function (e) {
+        self.bind('mousedown touchstart', function (e) {
             self.pedalboard('drag', e)
         })
 
@@ -726,6 +726,18 @@ JqueryClass('pedalboard', {
 
         var scale = self.data('scale')
 
+        // pure side effects - update the event if touch
+        function patchTouchEvent(e) {
+            if (e.type.indexOf('touch') == 0) {
+                var touch = e.originalEvent.touches[0]
+                e.pageX = touch.pageX
+                e.pageY = touch.pageY
+            }
+            return e
+        }
+
+        start = patchTouchEvent(start)
+
         var canvasX = (start.pageX - self.offset().left) / scale
         var canvasY = (start.pageY - self.offset().top) / scale
         var screenX = start.pageX - self.parent().offset().left
@@ -735,6 +747,8 @@ JqueryClass('pedalboard', {
             if (self.data('preventDrag'))
                 return
 
+            e = patchTouchEvent(e)
+
             self.pedalboard('zoom', scale, canvasX, canvasY,
                 screenX + e.pageX - start.pageX,
                 screenY + e.pageY - start.pageY,
@@ -742,12 +756,12 @@ JqueryClass('pedalboard', {
         }
 
         var upHandler = function (e) {
-            $(document).unbind('mouseup', upHandler)
-            $(document).unbind('mousemove', moveHandler)
+            $(document).unbind('mouseup touchend', upHandler)
+            $(document).unbind('mousemove touchmove', moveHandler)
         }
 
-        $(document).bind('mousemove', moveHandler)
-        $(document).bind('mouseup', upHandler)
+        $(document).bind('mousemove touchmove', moveHandler)
+        $(document).bind('mouseup touchend', upHandler)
     },
 
     // Changes the viewing scale of the pedalboard and position it in a way that
@@ -1352,13 +1366,13 @@ JqueryClass('pedalboard', {
                 }
             }
 
-            icon.mousedown(function () {
+            icon.bind('mousedown touchstart', function () {
                 self.pedalboard('preventDrag', true)
                 var upHandler = function () {
                     self.pedalboard('preventDrag', false)
-                    $('body').unbind('mouseup', upHandler)
+                    $('body').unbind('mouseup touchend', upHandler)
                 }
-                $('body').bind('mouseup', upHandler)
+                $('body').bind('mouseup touchend', upHandler)
             })
 
             var actions = $('<div>').addClass('mod-actions').appendTo(icon)
@@ -1462,7 +1476,7 @@ JqueryClass('pedalboard', {
                     gui.disable(symbol)
                 } else {
                     gui.addressPort(symbol)
-                }
+                 }
             }
 
             self.pedalboard('addUniqueCallbackToArrive', cb, targetname1, callbackId)