diff --git a/public/index.html b/public/index.html
index 0183da9d1..e39ee7409 100644
--- a/public/index.html
+++ b/public/index.html
@@ -16,32 +16,31 @@
 </head>
 <body ng-cloak class="ng-cloak">
 
-  <div class="page" ng-controller="indexController as index">
-    <div notifications="right top"></div>
-    <div ng-include="'views/includes/tx-details.html'" ng-if="index.showTx"></div>
-    <div ng-include="'views/includes/password.html'" ng-if="index.askPassword"></div>
-    <div ng-include="'views/includes/alert.html'" ng-if="index.showAlert"></div>
-    <div ng-include="'views/includes/confirm-tx.html'" ng-if="index.confirmTx"></div>
+  <ion-side-menus class="page" ng-controller="indexController as index">
 
-    <div class="off-canvas-wrap" id="off-canvas-wrap"
-      ng-swipe-disable-mouse
-      ng-swipe-left="index.closeMenu()"
-      ng-swipe-right="index.openMenu()">
-      <div class="inner-wrap">
-        <div ng-include="'views/includes/sidebar.html'" ng-if="index.hasProfile"></div>
-        <div id="sectionContainer">
-          <div id="mainSection">
-            <section ui-view="main"
-              ng-class="{
-                'main': index.hasProfile
-              }"></section>
-          </div>
+    <!-- Left menu -->
+    <ion-side-menu side="left">
+      <div ng-include="'views/includes/sidebar.html'" ng-if="index.hasProfile"></div>
+    </ion-side-menu>
+
+    <!-- Main content -->
+
+    <ion-side-menu-content>
+      <div notifications="right top"></div>
+      <div ng-include="'views/includes/tx-details.html'" ng-if="index.showTx"></div>
+      <div ng-include="'views/includes/password.html'" ng-if="index.askPassword"></div>
+      <div ng-include="'views/includes/alert.html'" ng-if="index.showAlert"></div>
+      <div ng-include="'views/includes/confirm-tx.html'" ng-if="index.confirmTx"></div>
+      <div id="sectionContainer">
+        <div id="mainSection">
+          <section ui-view="main"
+            ng-class="{
+              'main': index.hasProfile
+            }"></section>
         </div>
-        <a class="close-menu" ng-click="index.closeMenu()"></a>
-
       </div>
-    </div>
-  </div>
+    </ion-side-menu-content>
+  </ion-side-menus>
 
   <script src="lib/ionic.bundle.js"></script>
   <script src="lib/angular.js"></script>
diff --git a/public/views/includes/sidebar.html b/public/views/includes/sidebar.html
index 997fecfc4..69c3e296d 100644
--- a/public/views/includes/sidebar.html
+++ b/public/views/includes/sidebar.html
@@ -1,51 +1,53 @@
-<nav class="sidebar left-off-canvas-menu" ng-controller="sidebarController as sidebar">
-  <header>
-    <logo ng-if="!sidebar.isWindowsPhoneApp" negative="true" width="80"></logo>
-    <img ng-if="sidebar.isWindowsPhoneApp" src="img/logo-negative.png" alt="Copay" width="80">
-    <div ng-include="'views/includes/version.html'"></div>
-  </header>
-  <ul class="off-canvas-list">
-    <li ng-show="sidebar.wallets[0]"
-    ng-repeat="item in sidebar.wallets track by $index"
-    ng-class="{'selected': item.id == index.walletId}"
-    class="nav-item">
-    <a ng-click="sidebar.closeMenu(); sidebar.switchWallet(item.id, index.walletId)" class="oh">
-      <div class="avatar-wallet"
-        ng-style="{'background-color':item.color}">
-        <i class="icon-wallet size-21"></i>
-      </div>
-      <div class="name-wallet" ng-class="{'m8t':item.n == 1}">{{item.name || item.id}}</div>
-      <div class="size-12" ng-show="item.n > 1" translate>{{item.m}}-of-{{item.n}}</div>
-    </a>
-    </li>
-    <li>
-      <a ng-click="sidebar.closeMenu(); $root.go('add')" class="oh">
-        <i class="icon-arrow-right3 size-18 right m10t vm"></i>
-        <i class="fi-plus size-24 icon vm"></i>
-        <div class="tu text-bold">
-          <span class="size-12" translate>Add wallet</span>
-        </div>
-        <div translate>Create, join or import</div>
-      </a>
-    </li>
-    <li ng-show="!index.isWindowsPhoneApp && index.isComplete && (index.glideraEnabled || index.coinbaseEnabled)">
-      <a ng-click="sidebar.closeMenu(); $root.go('buyandsell')" class="oh">
-        <i class="icon-arrow-right3 size-18 right m10t vm"></i>
-        <i class="icon-bank size-24 icon vm"></i>
-        <div class="tu text-bold m5t">
-          <span class="size-12" translate>Buy &amp; Sell</span>
-        </div>
-      </a>
-    </li>
-    <li>
-      <a ng-click="sidebar.closeMenu(); $root.go('preferencesGlobal')" class="oh">
-        <i class="icon-arrow-right3 size-18 right m10t vm"></i>
-        <i class="fi-widget size-24 icon vm"></i>
-        <div class="tu text-bold">
-          <span class="size-12" translate>Settings</span>
-        </div>
-        <div translate>Global preferences</div>
-      </a>
-    </li>
-  </ul>
+<nav class="sidebar" ng-controller="sidebarController as sidebar">
+    <header>
+      <logo ng-if="!sidebar.isWindowsPhoneApp" negative="true" width="80"></logo>
+      <img ng-if="sidebar.isWindowsPhoneApp" src="img/logo-negative.png" alt="Copay" width="80">
+      <div ng-include="'views/includes/version.html'"></div>
+    </header>
+    <ion-content overflow-scroll="true">
+      <ul class="pr">
+        <li ng-show="sidebar.wallets[0]"
+        ng-repeat="item in sidebar.wallets track by $index"
+        ng-class="{'selected': item.id == index.walletId}"
+        class="nav-item">
+        <a menu-toggle  ng-click="$root.go('walletHome'); sidebar.switchWallet(item.id, index.walletId)" class="oh">
+          <div class="avatar-wallet"
+            ng-style="{'background-color':item.color}">
+            <i class="icon-wallet size-21"></i>
+          </div>
+          <div class="name-wallet" ng-class="{'m8t':item.n == 1}">{{item.name || item.id}}</div>
+          <div class="size-12" ng-show="item.n > 1" translate>{{item.m}}-of-{{item.n}}</div>
+        </a>
+        </li>
+        <li>
+          <a menu-toggle ng-click="$root.go('add')" class="oh">
+            <i class="icon-arrow-right3 size-18 right m10t vm"></i>
+            <i class="fi-plus size-24 icon vm"></i>
+            <div class="tu text-bold">
+              <span class="size-12" translate>Add wallet</span>
+            </div>
+            <div translate>Create, join or import</div>
+          </a>
+        </li>
+        <li ng-show="!index.isWindowsPhoneApp && index.isComplete && (index.glideraEnabled || index.coinbaseEnabled)">
+          <a menu-toggle ng-click="$root.go('buyandsell')" class="oh">
+            <i class="icon-arrow-right3 size-18 right m10t vm"></i>
+            <i class="icon-bank size-24 icon vm"></i>
+            <div class="tu text-bold m5t">
+              <span class="size-12" translate>Buy &amp; Sell</span>
+            </div>
+          </a>
+        </li>
+        <li>
+          <a menu-toggle ng-click="$root.go('preferencesGlobal')" class="oh">
+            <i class="icon-arrow-right3 size-18 right m10t vm"></i>
+            <i class="fi-widget size-24 icon vm"></i>
+            <div class="tu text-bold">
+              <span class="size-12" translate>Settings</span>
+            </div>
+            <div translate>Global preferences</div>
+          </a>
+        </li>
+      </ul>
+    </ion-content>
 </nav>
diff --git a/public/views/includes/topbar.html b/public/views/includes/topbar.html
index 1a7f28d40..9759a1860 100644
--- a/public/views/includes/topbar.html
+++ b/public/views/includes/topbar.html
@@ -3,7 +3,7 @@
   ng-style="{'background-color': noColor ? '#4B6178' : index.backgroundColor}">
   <section class="left-small">
     <a id="hamburger" class="p10" ng-show="!goBackToState && !closeToHome  && !index.noFocusedWallet"
-      ng-click="index.openMenu()"><i class="fi-list size-24"></i>
+      ng-click="index.toggleLeftMenu()"><i class="fi-list size-24"></i>
     </a>
     <a ng-show="goBackToState"
       ng-click="$root.go(goBackToState); goBackToState = null"><i class="icon-arrow-left3 icon-back"></i>
diff --git a/src/js/controllers/index.js b/src/js/controllers/index.js
index 1ce8d636c..f52ec3e84 100644
--- a/src/js/controllers/index.js
+++ b/src/js/controllers/index.js
@@ -1155,18 +1155,14 @@ angular.module('copayApp.controllers').controller('indexController', function($r
     });
   };
 
-  self.openMenu = function() {
+  self.toggleLeftMenu = function() {
     profileService.isDisclaimerAccepted(function(val) {
-      if (val) go.swipe(true);
+      if (val) go.toggleLeftMenu();
       else
         $log.debug('Disclaimer not accepted, cannot open menu');
     });
   };
 
-  self.closeMenu = function() {
-    go.swipe();
-  };
-
   self.retryScan = function() {
     var self = this;
     self.startScan(self.walletId);
diff --git a/src/js/controllers/sidebar.js b/src/js/controllers/sidebar.js
index af34c6f57..5cf85cff2 100644
--- a/src/js/controllers/sidebar.js
+++ b/src/js/controllers/sidebar.js
@@ -20,11 +20,6 @@ angular.module('copayApp.controllers').controller('sidebarController',
       self.setWallets();
     });
 
-
-    self.closeMenu = function() {
-      go.swipe();
-    };
-
     self.signout = function() {
       profileService.signout();
     };
diff --git a/src/js/services/go.js b/src/js/services/go.js
index 6b5ff3f1b..388149117 100644
--- a/src/js/services/go.js
+++ b/src/js/services/go.js
@@ -1,36 +1,10 @@
 'use strict';
 
-angular.module('copayApp.services').factory('go', function($window, $rootScope, $location, $state, $timeout, $log, profileService, platformInfo, nodeWebkit) {
+angular.module('copayApp.services').factory('go', function($window, $ionicSideMenuDelegate, $rootScope, $location, $state, $timeout, $log, profileService, platformInfo, nodeWebkit) {
   var root = {};
 
-  var hideSidebars = function() {
-    if (typeof document === 'undefined')
-      return;
-
-    var elem = document.getElementById('off-canvas-wrap');
-    elem.className = 'off-canvas-wrap';
-  };
-
-  var toggleSidebar = function(invert) {
-    if (typeof document === 'undefined')
-      return;
-
-    var elem = document.getElementById('off-canvas-wrap');
-    var leftbarActive = elem.className.indexOf('move-right') >= 0;
-
-    if (invert) {
-      if (profileService.profile && !$rootScope.hideNavigation) {
-        elem.className = 'off-canvas-wrap move-right';
-      }
-    } else {
-      if (leftbarActive) {
-        hideSidebars();
-      }
-    }
-  };
-
   root.openExternalLink = function(url, target) {
-    if ( platformInfo.isNW) {
+    if (platformInfo.isNW) {
       nodeWebkit.openExternalLink(url);
     } else {
       target = target || '_blank';
@@ -49,11 +23,10 @@ angular.module('copayApp.services').factory('go', function($window, $rootScope,
       }, function() {
         if (cb) return cb('animation in progress');
       });
-    hideSidebars();
   };
 
-  root.swipe = function(invert) {
-    toggleSidebar(invert);
+  root.toggleLeftMenu = function() {
+    $ionicSideMenuDelegate.toggleLeft()
   };
 
   root.walletHome = function() {
diff --git a/src/sass/main.scss b/src/sass/main.scss
index fff0b70f6..3961bd618 100644
--- a/src/sass/main.scss
+++ b/src/sass/main.scss
@@ -833,10 +833,6 @@ ul.manage li {
   }
 }
 
-.sidebar li.nav-item.selected .name-wallet {
-  color: #fff;
-}
-
 .locked {
   font-size: 11px;
   color: #7A8C9E;
@@ -1606,14 +1602,6 @@ input.ng-invalid-match {
   left: 0;
 }
 
-.right-off-canvas-menu {
-  background-color: #213140;
-}
-
-.off-canvas-wrap, .inner-wrap {
-  height: 100%;
-}
-
 .walletHome {
   .avatar-wallet {
     padding: 0.5rem;
@@ -1687,6 +1675,11 @@ a.missing-copayers {
   margin-bottom: 50px;
 }
 
+.sidebar ion-content {
+  background: #2C3E50;
+  top: 115px;
+}
+
 .sidebar {
   background: #2C3E50;
   .icon {
@@ -1757,16 +1750,24 @@ a.missing-copayers {
       color: #fff;
     }
   }
-  ul.off-canvas-list {
-    margin-bottom: 30px;
-    li a {
-      font-size: 12px;
-      font-weight: 300;
-      border-bottom: transparent;
-      color: #A5B2BF;
-      padding: 1rem 0.7rem;
-    }
-  }
+}
+
+.sidebar li {
+  overflow: hidden;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+
+  padding: 1rem 0.7rem;
+  font-size: 12px;
+  font-weight: 300;
+}
+
+.sidebar ul {
+  margin: 0 0 30px 0;
+}
+
+.sidebar a {
+  color: #A5B2BF;
 }
 
 .modal-content ul li a {
@@ -1790,11 +1791,6 @@ a.missing-copayers {
   }
 }
 
-.sidebar .left-off-canvas-menu {
-  background: #E4E8EC;
-  line-height: 24px;
-}
-
 /*
  * Remove all vendors hover / shadow / fade
  */
@@ -1807,23 +1803,6 @@ a.missing-copayers {
   box-shadow: none;
 }
 
-ul.off-canvas-list li a:hover {
-  background: none;
-}
-
-.move-right .close-menu {
-  cursor: pointer;
-  box-shadow: none;
-  display: block;
-  position: absolute;
-  background: none;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 1002;
-}
-
 /* === */
 
 /* Have to set height explicity on ui-view
