diff --git a/www/assets/css/ytsync.css b/www/assets/css/ytsync.css
index c7e3016b..ce752dca 100644
--- a/www/assets/css/ytsync.css
+++ b/www/assets/css/ytsync.css
@@ -77,12 +77,21 @@ html, body {
     margin-bottom: 0;
 }
 
-#usercount, #currenttitle {
+#usercountcontainer, #currenttitle {
     border: 1px solid #aaaaaa;
     border-bottom: none;
     margin: 0;
 }
 
+#usercount {
+    margin: 0;
+}
+
+#ulistchevron {
+    cursor: pointer;
+    float: left;
+}
+
 #plmeta {
     border: 1px solid #aaaaaa;
     background-color: #ffffff;
diff --git a/www/assets/js/client.js b/www/assets/js/client.js
index 1701b9ee..9982be90 100644
--- a/www/assets/js/client.js
+++ b/www/assets/js/client.js
@@ -149,6 +149,18 @@ if(!USEROPTS.hidevid) {
     firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 }
 
+$("#ulistchevron").click(function() {
+    var state = $("#userlist").css("display");
+    if(state == "none") {
+        $("#userlist").show();
+        $("#ulistchevron").removeClass().addClass("icon-chevron-up");
+    }
+    else {
+        $("#userlist").hide();
+        $("#ulistchevron").removeClass().addClass("icon-chevron-down");
+    }
+});
+
 var sendVideoUpdate = function() { }
 setInterval(function() {
     sendVideoUpdate();
diff --git a/www/channel.html b/www/channel.html
index 7de2fc89..53ecf038 100644
--- a/www/channel.html
+++ b/www/channel.html
@@ -58,7 +58,10 @@
         </div>
         <div class="row" id="main" style="margin-top: 20px;">
             <div class="span5" id="chatdiv">
-                <p id="usercount"></p>
+                <div id="usercountcontainer">
+                    <i class="icon-chevron-up" id="ulistchevron" title="Show/Hide Userlist"></i>
+                    <p id="usercount"></p>
+                </div>
                 <div id="userlist">
                 </div>
                 <div id="messagebuffer">