diff --git a/Netdisco/public/css/style.css b/Netdisco/public/css/style.css
index 1070a6b8..a72e9318 100644
--- a/Netdisco/public/css/style.css
+++ b/Netdisco/public/css/style.css
@@ -168,3 +168,20 @@ form .clearfix.success input {
 .vlan_total {
   float: right;
 }
+
+/* for placing the sidebar toggle icons */
+#sidebar_toggle_img_in {
+  position: fixed;
+  top: 55px;
+  left: 25px;
+}
+
+/* for placing the sidebar toggle icons */
+#sidebar_toggle_img_out {
+  position: fixed;
+  top: 60px;
+  left: 4px;
+  z-index: 1;
+  display: none;
+}
+
diff --git a/Netdisco/public/images/application_side_contract.png b/Netdisco/public/images/application_side_contract.png
new file mode 100644
index 00000000..3585f94d
Binary files /dev/null and b/Netdisco/public/images/application_side_contract.png differ
diff --git a/Netdisco/public/images/application_side_expand.png b/Netdisco/public/images/application_side_expand.png
new file mode 100644
index 00000000..030cf7c3
Binary files /dev/null and b/Netdisco/public/images/application_side_expand.png differ
diff --git a/Netdisco/public/images/glyphicons_072_bookmark.png b/Netdisco/public/images/glyphicons_072_bookmark.png
old mode 100755
new mode 100644
diff --git a/Netdisco/views/device.tt b/Netdisco/views/device.tt
index 7ba4030b..eddfb97a 100644
--- a/Netdisco/views/device.tt
+++ b/Netdisco/views/device.tt
@@ -1,13 +1,17 @@
+<img class="sidebar_toggle" id="sidebar_toggle_img_out"
+  src="[% uri_base %]/images/application_side_expand.png"
+  rel="twipsy" data-placement="right" data-offset="5" title="Show Sidebar"/>
 <div class="container-fluid">
   <div class="sidebar">
     <div class="well">
+      <img class="sidebar_toggle" id="sidebar_toggle_img_in"
+        src="[% uri_base %]/images/application_side_contract.png"
+        rel="twipsy" data-placement="right" data-offset="5" title="Hide Sidebar"/>
+      <h3 class="device_label">[% d.ip %]</h3>
+      <p class="device_label">[% d.dns.remove(settings.domain_suffix) %]</p>
       <div class="tab-content">
         [% FOREACH tab IN vars.tabs %]
         <div id="[% tab.id %]_search" class="tab-pane [% 'active' IF params.tab == tab.id %]">
-          <div class="clearfix">
-            <h3 class="device_label">[% d.ip %]</h3>
-            <p class="device_label">[% d.dns.remove(settings.domain_suffix) %]</p>
-          </div>
           [%+ TRY %][% INCLUDE "sidebar/device/${tab.id}.tt" %][% CATCH %]<!-- no "[% tab.id %]" search options -->[% END %]
         </div> <!-- /tab-pane -->
         [% END %]
diff --git a/Netdisco/views/js/device.js b/Netdisco/views/js/device.js
index 30dd0e33..7487f90b 100644
--- a/Netdisco/views/js/device.js
+++ b/Netdisco/views/js/device.js
@@ -113,4 +113,24 @@
       $(this).parents('.add-on').toggleClass('active', $(this).is(':checked'));
     };
     $('.add-on :checkbox').each(syncCheckBox).click(syncCheckBox);
+
+    // sidebar toggle
+    $('#sidebar_toggle_img_in').click(
+      function() {
+        $('.sidebar').toggle(
+          function() {
+            $('#sidebar_toggle_img_out').toggle();
+            $('.nd_content').animate({'margin-left': '5px !important'}, 100);
+          }
+        );
+      }
+    );
+    $('#sidebar_toggle_img_out').click(
+      function() {
+        $('#sidebar_toggle_img_out').toggle();
+        $('.nd_content').animate({'margin-left': '225px !important'}, 200,
+          function() { $('.sidebar').toggle(200) }
+        );
+      }
+    );
   });