diff --git a/bower.json b/bower.json
index d2b8e85..d87c023 100644
--- a/bower.json
+++ b/bower.json
@@ -27,7 +27,7 @@
     "leaflet.locatecontrol": "^0.60.0",
     "font-awesome": "^4.7.0",
     "bootstrap-select": "hugdx/bootstrap-select#patch-1",
-    "sidebar-v2": "~0.4.0",
+    "leaflet-sidebar-v2": "nrenner/leaflet-sidebar-v2#dev",
     "leaflet.editable": "^1.1.0"
   },
   "overrides": {
@@ -99,12 +99,6 @@
         "jquery": "*",
         "bootstrap": "*"
       }
-    },
-    "sidebar-v2": {
-      "main": [
-        "css/leaflet-sidebar.css",
-        "js/leaflet-sidebar.js"
-      ]
     }
   },
   "resolutions": {
diff --git a/css/style.css b/css/style.css
index 4ef7553..85f804d 100644
--- a/css/style.css
+++ b/css/style.css
@@ -11,7 +11,7 @@ body, #content {
 }
 
 .flexcolumn,
-.sidebar-pane.active,
+.leaflet-sidebar-pane.active,
 #datatable_wrapper,
 .dataTables_scroll,
 .dataTables_scrollBody {
@@ -288,10 +288,13 @@ table.dataTable.display tbody tr.even:hover {
 }
 
 /*
- * sidebar-v2 
+ * leaflet-sidebar-v2
  */
 
-.sidebar-pane {
+.leaflet-sidebar-pane#tab_profile,
+.leaflet-sidebar-pane#tab_data {
+    /* Full height for content with inner scrolling, 
+       overrides scroll fix for long content in Firefox */
     height: 100%;
 }
 
@@ -301,3 +304,8 @@ table.dataTable.display tbody tr.even:hover {
     font-size: 0.9rem;
     line-height: normal;
 }
+
+/* hide currently unused bottom tabs container because of touch border artefacts */
+.leaflet-sidebar-tabs > ul:last-child {
+    display: none;
+}
diff --git a/index.html b/index.html
index c179166..6103c41 100644
--- a/index.html
+++ b/index.html
@@ -165,55 +165,58 @@
     </div>
 
     <div id="content" class="flexcolumn flexgrow">
-        <div id="sidebar" class="sidebar collapsed">
-            <div class="sidebar-tabs">
-                <ul role="tablist">
-                    <li><a href="#tab_layers_control" role="tab"><img src="dist/images/layers.png"></a></li>
-                    <li hidden><a href="#tab_itinerary" role="tab"><i class="fa fa-map-signs"></i></a></li>
-                    <li><a href="#tab_profile" role="tab"><i class="fa fa-wrench"></i></a></li>
-                    <li><a href="#tab_data" role="tab"><i class="fa fa-table"></i></a></li> 
-                </ul>
-            </div>
-            <div class="sidebar-content">
+        <div id="sidebarTabs" class="leaflet-sidebar-tabs collapsed">
+            <ul role="tablist">
+                <li><a href="#tab_layers_control" role="tab"><img src="dist/images/layers.png" width="20px"></a></li>
+                <li hidden><a href="#tab_itinerary" role="tab"><i class="fa fa-map-signs"></i></a></li>
+                <li><a href="#tab_profile" role="tab"><i class="fa fa-wrench"></i></a></li>
+                <li><a href="#tab_data" role="tab"><i class="fa fa-table"></i></a></li> 
+            </ul>
+        </div>
+        
+        <div class="leaflet-sidebar-flex-row flexgrow">
+            <div id="map" class="leaflet-sidebar-map"></div>
 
-                <div class="sidebar-pane" id="tab_layers_control">
-                    <h1 class="sidebar-header">Layers<span class="sidebar-close"><i class="fa fa-caret-right"></i></span></h1>
-                    <div id="layers-control-wrapper"></div>
-                    <div class="leaflet-control-layers-separator"></div>
-                    <div>
-                        <button type="button" id="custom_layers_button" class="btn btn-sm pull-right" title="Add or remove custom layers"><span class="fa fa-plus-square"></span> Customize layers</button>
-                    </div>
-                </div>
-                
-                <div class="sidebar-pane" id="tab_profile">
-                    <h1 class="sidebar-header">Custom routing profile<span class="sidebar-close"><i class="fa fa-caret-right"></i></span></h1>
-                    <form class="flexcolumn flexgrow">
-                        <textarea class="form-control flexgrow" id="profile_upload" spellcheck="false" wrap="off" placeholder="Write your custom profile here."></textarea>
-                        <div id="profile_message"></div>
-                        <div class="form-group" id="profile_buttons">
-                             <button id="clear" type="button" class="btn btn-sm"><span class="fa fa-eraser"></span> Clear</button>
-                             <button id="upload" type="button" class="btn btn-sm" data-uploading-text="Uploading…"><span class="fa fa-cloud-upload"></span> Upload</button>
-                             <a href="http://brouter.de/brouter/costfunctions.html" target="_blank" class="btn btn-sm btn-info pull-right"><span class="fa fa-question"></span> Help</a>
+            <div id="sidebar" class="leaflet-sidebar collapsed">
+
+                <div class="leaflet-sidebar-content">
+                    <div class="leaflet-sidebar-pane" id="tab_layers_control">
+                        <h1 class="leaflet-sidebar-header">Layers<span class="leaflet-sidebar-close"><i class="fa fa-caret-right"></i></span></h1>
+                        <div id="layers-control-wrapper"></div>
+                        <div class="leaflet-control-layers-separator"></div>
+                        <div>
+                            <button type="button" id="custom_layers_button" class="btn btn-sm pull-right" title="Add or remove custom layers"><span class="fa fa-plus-square"></span> Custom layers</button>
                         </div>
-                    </form>
-                </div>
-
-                <div class="sidebar-pane" id="tab_data">
-                    <h1 class="sidebar-header">Data<span class="sidebar-close"><i class="fa fa-caret-right"></i></span></h1>
-                    <table id="datatable" class="table mini cell-border hover stripe"></table>
-                </div>
-
-                <div class="sidebar-pane" id="tab_itinerary">
-                    <h1 class="sidebar-header">Itinerary<span class="sidebar-close"><i class="fa fa-caret-right"></i></span></h1>
-                    <div id="itinerary">
                     </div>
-                </div>
 
+                    <div class="leaflet-sidebar-pane" id="tab_profile">
+                        <h1 class="leaflet-sidebar-header">Custom routing profile<span class="leaflet-sidebar-close"><i class="fa fa-caret-right"></i></span></h1>
+                        <form class="flexcolumn flexgrow">
+                            <textarea class="form-control flexgrow" id="profile_upload" spellcheck="false" wrap="off" placeholder="Write your custom profile here."></textarea>
+                            <div id="profile_message"></div>
+                            <div class="form-group" id="profile_buttons">
+                                 <button id="clear" type="button" class="btn btn-sm"><span class="fa fa-eraser"></span> Clear</button>
+                                 <button id="upload" type="button" class="btn btn-sm" data-uploading-text="Uploading…"><span class="fa fa-cloud-upload"></span> Upload</button>
+                                 <a href="http://brouter.de/brouter/costfunctions.html" target="_blank" class="btn btn-sm btn-info pull-right"><span class="fa fa-question"></span> Help</a>
+                            </div>
+                        </form>
+                    </div>
+
+                    <div class="leaflet-sidebar-pane" id="tab_data">
+                        <h1 class="leaflet-sidebar-header">Data<span class="leaflet-sidebar-close"><i class="fa fa-caret-right"></i></span></h1>
+                        <table id="datatable" class="table mini cell-border hover stripe"></table>
+                    </div>
+
+                    <div class="leaflet-sidebar-pane" id="tab_itinerary">
+                        <h1 class="leaflet-sidebar-header">Itinerary<span class="leaflet-sidebar-close"><i class="fa fa-caret-right"></i></span></h1>
+                        <div id="itinerary">
+                        </div>
+                    </div>
+
+                </div>
             </div>
         </div>
 
-        <div id="map" class="sidebar-map"></div>
-
         <div id="message"></div>
     </div>
 
diff --git a/js/index.js b/js/index.js
index da648b6..354e44c 100644
--- a/js/index.js
+++ b/js/index.js
@@ -219,7 +219,7 @@
 
         trackMessages.onAdd(map);
 
-        sidebar = BR.sidebar('sidebar', {
+        sidebar = BR.sidebar({
             listeningTabs: {
                 'tab_data': trackMessages
             }
diff --git a/js/plugin/Sidebar.js b/js/plugin/Sidebar.js
index 9abff85..257f359 100644
--- a/js/plugin/Sidebar.js
+++ b/js/plugin/Sidebar.js
@@ -3,6 +3,9 @@ BR.Sidebar = L.Control.Sidebar.extend({
 
     options: {
         position: 'right',
+        container: 'sidebar', 
+        tabContainer: 'sidebarTabs',
+        autopan: false,
 
         // Tabs to be notified when shown or hidden
         // (tab div id -> object implementing show/hide methods)
@@ -23,6 +26,11 @@ BR.Sidebar = L.Control.Sidebar.extend({
 
         this._rememberTabState();
 
+        if (L.Browser.touch && BR.Browser.touchScreenDetectable && !BR.Browser.touchScreen) {
+            L.DomUtil.removeClass(this._container, 'leaflet-touch');
+            L.DomUtil.removeClass(this._tabContainer, 'leaflet-touch');
+        }
+
         return this;
     },