diff --git a/test/test.py b/test/test.py
index 84c6498ce..1e00ccc62 100644
--- a/test/test.py
+++ b/test/test.py
@@ -65,6 +65,7 @@ MIMEs = {
     '.pdf': 'application/pdf',
     '.xhtml': 'application/xhtml+xml',
     '.ico': 'image/x-icon',
+    '.png': 'image/png',
     '.log': 'text/plain'
 }
 
diff --git a/web/images/pin_down.png b/web/images/pin_down.png
new file mode 100644
index 000000000..81c1ad11f
Binary files /dev/null and b/web/images/pin_down.png differ
diff --git a/web/images/pin_up.png b/web/images/pin_up.png
new file mode 100644
index 000000000..8e268c7f8
Binary files /dev/null and b/web/images/pin_up.png differ
diff --git a/web/viewer.css b/web/viewer.css
index 4d0c64dad..5a621006b 100644
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -89,7 +89,8 @@ span#info {
   z-index: 1;
 }
 
-#sidebar:hover {
+#sidebar:hover,
+#sidebar.pinned {
   left: 0px;
   transition: left 0.25s ease-in-out 0s;
   -o-transition: left 0.25s ease-in-out 0s;
@@ -97,6 +98,24 @@ span#info {
   -webkit-transition: left 0.25s ease-in-out 0s;
 }
 
+#pinIcon {
+  position: absolute;
+  top: 4px;
+  right: 55px;
+  width: 15px;
+  height: 15px;
+  background: center no-repeat;
+  background-image: url('images/pin_up.png');
+}
+
+#pinIcon:hover {
+  background-color: rgba(255,255,255,0.35);
+}
+
+#sidebar.pinned #pinIcon {
+  background-image: url('images/pin_down.png');
+}
+
 #sidebarBox {
   background-color: rgba(0, 0, 0, 0.7);
   width: 300px;
@@ -116,7 +135,7 @@ span#info {
   position: absolute;
   overflow: hidden;
   overflow-y: auto;
-  top: 10px;
+  top: 20px;
   bottom: 10px;
   left: 10px;
   width: 280px;
@@ -147,7 +166,7 @@ span#info {
   position: absolute;
   background-color: #fff;
   overflow: auto;
-  top: 10px;
+  top: 20px;
   bottom: 10px;
   left: 10px;
   width: 280px;
@@ -381,6 +400,6 @@ canvas {
 }
 
 #loading {
-	margin: 100px 0;
-	text-align: center;
+  margin: 100px 0;
+  text-align: center;
 }
diff --git a/web/viewer.html b/web/viewer.html
index 7c55ec735..484becf82 100644
--- a/web/viewer.html
+++ b/web/viewer.html
@@ -122,6 +122,7 @@
 
     <div id="sidebar">
       <div id="sidebarBox">
+        <div id="pinIcon" onClick="PDFView.pinSidebar()"></div>
         <div id="sidebarScrollView">
           <div id="sidebarView"></div>
         </div>
@@ -136,7 +137,7 @@
             <img src="images/nav-outline.svg" align="top" height="16" alt="Document Outline" />
           </button>
         </div>
-     </div>
+      </div>
     </div>
 
     <div id="loading">Loading... 0%</div>
diff --git a/web/viewer.js b/web/viewer.js
index d5162a194..41bb2ab00 100644
--- a/web/viewer.js
+++ b/web/viewer.js
@@ -571,6 +571,10 @@ var PDFView = {
     }
   },
 
+  pinSidebar: function pdfViewPinSidebar() {
+    document.getElementById('sidebar').classList.toggle('pinned');
+  },
+
   getVisiblePages: function pdfViewGetVisiblePages() {
     var pages = this.pages;
     var kBottomMargin = 10;