diff --git a/css/glowingbear.css b/css/glowingbear.css
index f40d06c..5182d5c 100644
--- a/css/glowingbear.css
+++ b/css/glowingbear.css
@@ -263,19 +263,85 @@ input[type=text], input[type=password], .badge {
 .navbar-inverse {
     background-color: #181818;
 }
+
+.color-light-green {
+    color: chartreuse;
+}
+
+.color-27 {
+    color: deepskyblue;
+}
+
+.danger, .alert-danger, .badge .alert-danger {
+    background-color: rgb(217, 83, 79);
+    color: #ddd;
+}
+.alert-danger {
+  border-color: #121212;
+  color: black;
+}
+
+li.notification {
+    color: green;
+}
+
+[ng-click],
+[data-ng-click],
+[x-ng-click] {
+    cursor: pointer;
+}
+::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+::-webkit-scrollbar-track-piece  {
+    background-color: black;
+}
+::-webkit-scrollbar-thumb:vertical {
+    height: 15px;
+    background: rgba(255,255,255,0.5);
+}
+
+img.embed {
+  max-height: 300px;
+}
+
+
+table.notimestamp td.time {
+    display: none;
+}
+
+
+/* */
+/* Mobile layout */
+/* */
 @media (max-width: 968px) {
+    .message span {
+        color: #C7C7C7;
+    }
+
+    .bufferline {
+        line-height: 25px;
+    }
+
     #sidebar {
         font-size: normal;
         z-index: 1;
+        bottom: 0px;
         width: 60%;
+        top: 0px;
     }
+
     #sidebar.in, #sidebar.collapsing {
         -webkit-box-shadow: 0px 0px 120px #000;
-                box-shadow: 0px 0px 120px #000;
+        box-shadow: 0px 0px 120px #000;
+        bottom: 0px;
     }
+
     #topbar .title {
         left: 40px;
     }
+
     #bufferlines, #nicklist {
         position: relative;
         min-height: 0;
@@ -284,82 +350,52 @@ input[type=text], input[type=password], .badge {
         max-width: 100%;
         border: 0;
     }
+
     #nicklist {
-        width: 100%;
+        width: 160px;
         text-align: center;
+        -webkit-box-shadow: 0px 0px 120px #000;
+        box-shadow: 0px 0px 120px #000;
+        position: fixed;
+        margin-top: 10px;
+        background: #282828;
+        bottom: 0px;
     }
+
     #bufferlines {
-        padding-bottom: 38px; /* navbar fixed bottom */
+        padding-bottom: 38px;
+     /* navbar fixed bottom */;
     }
+
     .navbar-fixed-bottom {
         margin: 0;
     }
+
     .navbar {
         min-height: 0%;
     }
+
     #bufferlines td.time {
         display: inline;
         padding-right: 0;
     }
+
     #bufferlines td.prefix {
         display: inline;
         padding-right: 0;
         border: 0;
     }
+
     #bufferlines td.message {
         padding-left: 0;
         display: inline;
     }
+
     #bufferlines td.prefix:before {
         content: "<";
     }
+
     #bufferlines td.prefix:after {
         content: ">";
     }
 }
-.color-light-green {
-    color: chartreuse;
-}
-
-.color-27 {
-    color: deepskyblue;
-}
-
-.danger, .alert-danger, .badge .alert-danger {
-    background-color: rgb(217, 83, 79);
-    color: #ddd;
-}
-.alert-danger {
-  border-color: #121212;
-  color: black;
-}
-
-li.notification {
-    color: green;
-}
-
-[ng-click],
-[data-ng-click],
-[x-ng-click] {
-    cursor: pointer;
-}
-::-webkit-scrollbar {
-    width: 10px;
-    height: 10px;
-}
-::-webkit-scrollbar-track-piece  {
-    background-color: black;
-}
-::-webkit-scrollbar-thumb:vertical {
-    height: 15px;
-    background: rgba(255,255,255,0.5);
-}
-
-img.embed {
-  max-height: 300px;
-}
-
-
-table.notimestamp td.time {
-    display: none;
-}
diff --git a/index.html b/index.html
index bd2613c..e62be31 100644
--- a/index.html
+++ b/index.html
@@ -17,6 +17,7 @@
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular-route.min.js"></script>
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular-sanitize.min.js"></script>
+    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular-touch.js"></script>
     <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
     <script type="text/javascript" src="3rdparty/inflate.min.js"></script>
     <script type="text/javascript" src="js/localstorage.js"></script>
@@ -270,7 +271,7 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
           </a>
         </div>
       </div>
-      <div bindonce id="sidebar" class="vertical-line collapse in">
+      <div bindonce id="sidebar" ng-swipe-left="swipeSidebar()" class="vertical-line collapse in">
         <ul class="nav nav-pills nav-stacked" ng-class="{'indented': (predicate === 'serverSortKey')}">
           <li class="bufferfilter">
             <form role="form">
@@ -287,7 +288,7 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
         </ul>
       </div>
       <div bindonce id="bufferlines" class="monospace" ng-class="{'withnicklist': showNicklist}">
-        <div id="nicklist" ng-show="showNicklist" class="vertical-line-left">
+        <div id="nicklist" ng-show="showNicklist" ng-swipe-right="closeNick()" class="vertical-line-left">
           <ul class="nicklistgroup list-unstyled" ng-repeat="group in activeBuffer().nicklist">
             <li ng-repeat="nick in group.nicks|orderBy:'name'" ng-click="openBuffer(nick.name)">
               <a ng-click="nickAction(nick)"><span bo-class="nick.prefixClasses" bo-text="nick.prefix"></span><span bo-class="nick.nameClasses" bo-text="nick.name"></span></a>
@@ -305,7 +306,7 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
               </td>
             </tr>
           </tbody>
-          <tbody ng-repeat="bufferline in (bufferlines = activeBuffer().lines)">
+          <tbody ng-swipe-right="swipeSidebar()" ng-swipe-left="openNick()" ng-repeat="bufferline in (bufferlines = activeBuffer().lines)">
             <tr class="bufferline">
               <td class="time">
                 <span class="date" bo-class="{'repeated-time': bufferline.shortTime==bufferlines[$index-1].shortTime}">
diff --git a/js/glowingbear.js b/js/glowingbear.js
index 21f0c0f..ba68d2f 100644
--- a/js/glowingbear.js
+++ b/js/glowingbear.js
@@ -1,4 +1,4 @@
-var weechat = angular.module('weechat', ['ngRoute', 'localStorage', 'weechatModels', 'plugins', 'ngSanitize', 'ngWebsockets', 'pasvaz.bindonce']);
+var weechat = angular.module('weechat', ['ngRoute', 'localStorage', 'weechatModels', 'plugins', 'ngSanitize', 'ngWebsockets', 'pasvaz.bindonce', 'ngTouch']);
 
 weechat.filter('toArray', function () {
     'use strict';
@@ -619,7 +619,29 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
         $scope.noembed = true;
         $scope.notimestamp = true;
     }
-
+	// Open and close panels while on mobile devices through swiping
+	$scope.swipeSidebar = function() { 
+	        if (document.body.clientWidth < 968) {
+            $('#sidebar').collapse('toggle');
+        }
+	};
+	
+	
+	$scope.openNick = function() {
+		if (document.body.clientWidth < 968) {
+			if($scope.nonicklist) { 
+				$scope.nonicklist = false;
+			} 
+		}
+	};
+
+	$scope.closeNick = function() {
+		if (document.body.clientWidth < 968) {
+			if(!$scope.nonicklist) { 
+				$scope.nonicklist = true;
+			} 
+		}
+	};
 
     // Watch model and update show setting when it changes
     $scope.$watch('noembed', function() {
@@ -636,7 +658,7 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
         // If we are on mobile we need to collapse the menu on sidebar clicks
         // We use 968 px as the cutoff, which should match the value in glowingbear.css
         if (document.body.clientWidth < 968) {
-            document.querySelector('#sidebar').collapse();
+            $('#sidebar').collapse('toggle');
         }
         return models.setActiveBuffer(bufferId, key);
     };