diff --git a/static/js/click_handlers.js b/static/js/click_handlers.js
index 6cc8c34eee..9753b54e97 100644
--- a/static/js/click_handlers.js
+++ b/static/js/click_handlers.js
@@ -596,8 +596,16 @@ $(function () {
         var $this = $(this);
 
         $("#settings_overlay_container .sidebar li").removeClass("active no-border");
-            $this.addClass("active");
-        $this.prev().addClass("no-border");
+        $this.addClass("active").prev().addClass("no-border");
+
+        var $settings_overlay_container = $("#settings_overlay_container");
+        $settings_overlay_container.find(".right").addClass("show");
+        $settings_overlay_container.find(".settings-header.mobile").addClass("slide-left");
+    });
+
+    $(".settings-header.mobile .icon-vector-chevron-left").on("click", function () {
+        $("#settings_page").find(".right").removeClass("show");
+        $(this).parent().removeClass("slide-left");
     });
 
     $("#settings_overlay_container .sidebar").on("click", "li[data-section]", function () {
diff --git a/static/styles/settings.css b/static/styles/settings.css
index fd10e7baac..1d7b7b90ea 100644
--- a/static/styles/settings.css
+++ b/static/styles/settings.css
@@ -795,6 +795,18 @@ input[type=checkbox].inline-block {
     border-bottom: 1px solid #ddd;
 }
 
+#settings_page .settings-header.mobile {
+    display: none;
+    border-bottom: 1px solid #ddd;
+}
+
+.settings-header.mobile .icon-vector-chevron-left {
+    float: left;
+    position: relative;
+    top: 14px;
+    left: 10px;
+}
+
 #settings_page .content-wrapper #settings_content {
     position: relative;
     width: 100%;
@@ -802,6 +814,7 @@ input[type=checkbox].inline-block {
 
     float: left;
     overflow-y: auto;
+    overflow-x: hidden;
 }
 
 #settings_page .table-striped thead th {
@@ -1064,6 +1077,24 @@ input[type=text]#settings_search {
     }
 }
 
+@media (max-width: 700px) {
+    #settings_page .settings-header.mobile {
+        display: block;
+    }
+
+    #settings_page .content-wrapper .settings-header {
+        display: none;
+    }
+
+    #settings_page .content-wrapper #settings_content {
+        height: 100%;
+    }
+
+    #settings_page .content-wrapper.right {
+        top: 47px;
+    }
+}
+
 @media (max-width: 953px) {
     #settings_content .warning {
         display: none;
diff --git a/static/styles/subscriptions.css b/static/styles/subscriptions.css
index 772d501253..4e29753644 100644
--- a/static/styles/subscriptions.css
+++ b/static/styles/subscriptions.css
@@ -430,9 +430,8 @@ form#add_new_subscription {
     border-bottom: 1px solid #ddd;
 }
 
-.subscriptions-header .icon-vector-chevron-left {
-    display: none;
-
+.subscriptions-header .icon-vector-chevron-left,
+#settings_overlay_container .settings-header.mobile .icon-vector-chevron-left {
     position: relative;
     transform: translate(-50px, 0px);
     opacity: 0;
@@ -446,7 +445,8 @@ form#add_new_subscription {
     transition: all 0.3s ease;
 }
 
-.subscriptions-header.slide-left .icon-vector-chevron-left {
+.subscriptions-header.slide-left .icon-vector-chevron-left,
+#settings_overlay_container .settings-header.mobile.slide-left .icon-vector-chevron-left {
     transform: translate(-0px, 0px);
     opacity: 1;
 }
@@ -956,7 +956,9 @@ form#add_new_subscription {
     }
 
     #subscription_overlay .left,
-    #subscription_overlay .right {
+    #subscription_overlay .right,
+    #settings_page .left,
+    #settings_page .right {
         position: absolute;
         display: block;
         margin: 0;
@@ -974,7 +976,8 @@ form#add_new_subscription {
         text-align: left;
     }
 
-    #subscription_overlay .right {
+    #subscription_overlay .right,
+    #settings_page .right {
         position: absolute;
         left: 101%;
 
@@ -987,7 +990,8 @@ form#add_new_subscription {
         z-index: 10;
     }
 
-    #subscription_overlay .right.show {
+    #subscription_overlay .right.show,
+    #settings_page .right.show {
         left: 0%;
     }
 
diff --git a/templates/zerver/settings_overlay.html b/templates/zerver/settings_overlay.html
index 21109f7a11..189b9f5aff 100644
--- a/templates/zerver/settings_overlay.html
+++ b/templates/zerver/settings_overlay.html
@@ -1,5 +1,13 @@
 <div id="settings_page" class="new-style overlay-content">
-    <div class="sidebar">
+    <div class="settings-header mobile">
+        <div class="icon-vector-chevron-left"></div>
+        <h1>{{ _('Settings') }}</h1>
+        <div class="exit">
+            <span class="exit-sign">&times;</span>
+        </div>
+        <div class="clear-float"></div>
+    </div>
+    <div class="sidebar left">
         <div class="sidebar-list dark-grey small-text">
             <div class="center tab-container"></div>
             <ul class="settings-list">
@@ -88,7 +96,7 @@
             </ul>
         </div>
     </div>
-    <div class="content-wrapper">
+    <div class="content-wrapper right">
         <div class="settings-header">
             <h1>{{ _('Settings') }}</h1>
             <div class="exit">
diff --git a/tools/lib/find_add_class.py b/tools/lib/find_add_class.py
index eee2d75916..3a66e6dc57 100644
--- a/tools/lib/find_add_class.py
+++ b/tools/lib/find_add_class.py
@@ -14,21 +14,22 @@ GENERIC_KEYWORDS = [
     'disabled',
     'error',
     'expanded',
+    'fade-out',
+    'first',
     'hide',
     'in',
     'show',
     'notdisplayed',
     'popover',
     'no-border',
+    'second',
+    'selected',
+    'slide-left',
     'success',
     'text-error',
     'warning',
     'zoom-in',  # TODO: clean these up, they are confusing
     'zoom-out',
-    'first',
-    'second',
-    'selected',
-    'fade-out',
 ]
 
 def raise_error(fn, i, line):