diff --git a/web/images/pin_down.png b/web/images/pin_down.png
new file mode 100644
index 000000000..06c985b6a
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..aff30c15e
Binary files /dev/null and b/web/images/pin_up.png differ
diff --git a/web/viewer.css b/web/viewer.css
index 681e5046a..e8071a5ce 100644
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -76,11 +76,15 @@ span#info {
 }
 
 /* === Sidebar === */
+
 #sidebar {
   position: fixed;
   width: 350px;
   top: 62px;
   bottom: 18px;
+}
+
+#sidebar.released {
   left: -290px;
   transition: left 0.25s ease-in-out 1s;
   -o-transition: left 0.25s ease-in-out 1s;
@@ -89,7 +93,8 @@ span#info {
   z-index: 1;
 }
 
-#sidebar:hover {
+#sidebar.pinned,
+#sidebar.released:hover {
   left: 0px;
   transition: left 0.25s ease-in-out 0s;
   -o-transition: left 0.25s ease-in-out 0s;
@@ -97,6 +102,22 @@ span#info {
   -webkit-transition: left 0.25s ease-in-out 0s;
 }
 
+#pinIcon {
+	position: absolute;
+	top: 4px;
+	right: 56px;
+	width: 11px;
+	height: 12px;
+}
+
+#pinIcon.released {
+	background-image: url('images/pin_up.png');
+}
+
+#pinIcon.pinned {
+	background-image: url('images/pin_down.png');
+}
+
 #sidebarBox {
   background-color: rgba(0, 0, 0, 0.7);
   width: 300px;
@@ -116,7 +137,7 @@ span#info {
   position: absolute;
   overflow: hidden;
   overflow-y: auto;
-  top: 10px;
+  top: 20px;
   bottom: 10px;
   left: 10px;
   width: 280px;
@@ -382,4 +403,4 @@ canvas {
 #loading {
 	margin: 100px 0;
 	text-align: center;
-}
+}
\ No newline at end of file
diff --git a/web/viewer.html b/web/viewer.html
index 7c55ec735..c9a35816f 100644
--- a/web/viewer.html
+++ b/web/viewer.html
@@ -33,6 +33,45 @@
         <script type="text/javascript" src="viewer.js"></script>
 
     </head>
+	
+	
+	<script type="text/javascript">
+	
+	function pinCleanup() {
+		var sidebarClass = document.getElementById("sidebar").className;
+		sidebarClass = sidebarClass.replace( /(?:^|\s)released(?!\S)/ , '' );
+		sidebarClass = sidebarClass.replace( /(?:^|\s)pinned(?!\S)/ , '' );	
+		document.getElementById("sidebar").className = sidebarClass;
+		
+		var iconClass = document.getElementById("pinIcon").className;
+		iconClass = iconClass.replace( /(?:^|\s)released(?!\S)/ , '' );
+		iconClass = iconClass.replace( /(?:^|\s)pinned(?!\S)/ , '' );	
+		document.getElementById("pinIcon").className = iconClass;
+	}
+	
+	function pinActivate() {
+		pinCleanup();
+		
+		document.getElementById("sidebar").className = (document.getElementById("sidebar").className + " pinned").trim();
+		document.getElementById("pinIcon").className = (document.getElementById("pinIcon").className + " pinned").trim();
+	}
+
+	function pinDeactivate() {
+		pinCleanup();
+		
+		document.getElementById("sidebar").className = (document.getElementById("sidebar").className + " released").trim();
+		document.getElementById("pinIcon").className = (document.getElementById("pinIcon").className + " released").trim();	
+	}
+	
+	function pinToggle() {
+		var iconClass = document.getElementById("pinIcon").className;
+		if(iconClass == "pinned")
+			pinDeactivate();
+		else
+			pinActivate();
+	}
+
+	</script>
 
   <body>
     <div id="controls">
@@ -120,9 +159,10 @@
       <textarea id="errorMoreInfo" hidden='true' readonly="readonly"></textarea>
     </div>
 
-    <div id="sidebar">
+    <div id="sidebar" class="released">
       <div id="sidebarBox">
-        <div id="sidebarScrollView">
+	    <div id="pinIcon" class="released" onClick="javascript:pinToggle()"></div>
+	    <div id="sidebarScrollView">
           <div id="sidebarView"></div>
         </div>
         <div id="outlineScrollView" hidden='true'>
