diff --git a/static/js/ui.js b/static/js/ui.js
index df07e0da2f..cd35e1d740 100644
--- a/static/js/ui.js
+++ b/static/js/ui.js
@@ -280,6 +280,24 @@ exports.lightbox = function (data) {
     popovers.hide_all();
 };
 
+$(document).ready(function () {
+    var info_overlay_toggle = components.toggle({
+        name: "info-overlay-toggle",
+        selected: 0,
+        values: [
+            { label: "Keyboard Shortcuts" },
+            { label: "Message Formatting" },
+            { label: "Search Help" },
+        ],
+        callback: function () {
+
+        }
+    }).get();
+
+    $(".informational-overlays .overlay-tabs")
+        .append($(info_overlay_toggle).addClass("large"));
+});
+
 exports.show_info_overlay = function (target) {
     var el = {
         tabs: $(".informational-overlays .tab"),
diff --git a/static/styles/informational-overlays.css b/static/styles/informational-overlays.css
index a592889a1d..99b9ebde1f 100644
--- a/static/styles/informational-overlays.css
+++ b/static/styles/informational-overlays.css
@@ -42,30 +42,9 @@
 }
 
 .informational-overlays .overlay-tabs {
+    padding: 10px 0px;
     border-bottom: 1px solid #eee;
-    background-color: #888;
-}
-
-.informational-overlays .overlay-tabs .tab {
-    float: left;
-    width: calc(33.33% - 1.1px);
-
     text-align: center;
-    padding: 12px 0px;
-    border-right: 1px solid #eee;
-    background-color: #fff;
-
-    cursor: pointer;
-}
-
-.informational-overlays .overlay-tabs .tab:last-of-type {
-    border-right: none;
-}
-
-.informational-overlays .overlay-tabs .tab.active {
-    background-color: #888;
-    color: #fff;
-    border-color: transparent;
 }
 
 .informational-overlays .overlay-modal .modal-body {
diff --git a/templates/zerver/index.html b/templates/zerver/index.html
index bf8f4c0818..f22f8b9485 100644
--- a/templates/zerver/index.html
+++ b/templates/zerver/index.html
@@ -123,14 +123,10 @@ var page_params = {{ page_params }};
     {% include "zerver/image-overlay.html" %}
     {% include "zerver/subscriptions.html" %}
 </div><!--/row-->
-    <div class="informational-overlays">
+    <div class="informational-overlays new-style">
         <div class="overlay-content">
             <h1>Zulip Usage Guide</h1>
             <div class="overlay-tabs">
-                <div class="tab active" data-overlay-trigger="keyboard-shortcuts">Keyboard Shortcuts</div>
-                <div class="tab" data-overlay-trigger="search-operators">Search Help</div>
-                <div class="tab last" data-overlay-trigger="markdown-help">Markdown Formatting</div>
-                <div class="float-clear"></div>
             </div>
             <div class="overlay-body">
                 {% include "zerver/keyboard_shortcuts.html" %}