diff --git a/app/views/shared/logged_in/xmpp_chat.html.erb b/app/views/shared/logged_in/xmpp_chat.html.erb
index 2f9fe5c..abd915f 100644
--- a/app/views/shared/logged_in/xmpp_chat.html.erb
+++ b/app/views/shared/logged_in/xmpp_chat.html.erb
@@ -77,7 +77,8 @@
       </div>
 
       <div class="occupant-list-template">
-        <div class="occupant-list">
+        <div class="occupants">
+          <a href="#" class="up">&nbsp;</a>
           <ul class='occupant-list'></ul>
         </div>
       </div>
@@ -85,7 +86,8 @@
       <div class="occupant-item">
         <li class='%{presence_status}'>
           <a data-id='%{jid_id}' class='icon-menu-%{presence_status}-11' href='#'>
-            %{name}
+            %{avatar}
+            <span class="name">%{name}<span>
           </a>
         </li>
       </div>
diff --git a/public/javascripts/chat.js b/public/javascripts/chat.js
index c28f5b7..efd1f58 100644
--- a/public/javascripts/chat.js
+++ b/public/javascripts/chat.js
@@ -89,7 +89,7 @@ jQuery(function($) {
      insert_or_update_occupant: function (jid, name, presence, room_jid) {
         log('adding or updating occupant ' + jid + ' as ' + presence);
         var jid_id = Jabber.jid_to_id(jid);
-        var list = $('#' + Jabber.conversation_prefix + Jabber.jid_to_id(room_jid) + ' .occupant-list ul');
+        var list = $('#' + Jabber.conversation_prefix + Jabber.jid_to_id(room_jid) + ' .occupants ul');
         var item = $(list).find('a[data-id='+ jid_id +']');
         Jabber.insert_or_update_user(list, item, jid, name, presence, Jabber.template('.occupant-item'), 'chat');
         if (Jabber.rooms[Jabber.jid_to_id(room_jid)] === undefined) {
@@ -199,7 +199,7 @@ jQuery(function($) {
               break;
            case Strophe.Status.DISCONNECTED:
               log('disconnected');
-              $('#buddy-list ul.buddy-list, .occupant-list ul.occupant-list').html('');
+              $('#buddy-list ul.buddy-list, .occupants ul.occupant-list').html('');
               Jabber.update_chat_title();
               $('#buddy-list .toolbar').removeClass('small-loading-dark');
               $('textarea').prop('disabled', 'disabled');
@@ -528,12 +528,11 @@ jQuery(function($) {
    });
 
    // put name into text area when click in one occupant
-   // FIXME
-   $('.occupant-list .occupant-list li a').live('click', function() {
+   $('.occupants .occupant-list li a').live('click', function() {
       var jid_id = $(this).attr('data-id');
       var name = Jabber.name_of(jid_id);
       var val = $('.conversation textarea:visible').val();
-      $('.conversation textarea:visible').val(val + name + ', ').focus();
+      $('.conversation textarea:visible').focus().val(val + name + ', ');
    });
 
    $('#chat .conversation .history').live('click', function() {
@@ -569,8 +568,9 @@ jQuery(function($) {
       textarea.attr('name', panel.id);
 
       if (Jabber.is_a_room(jid_id)) {
-          panel.append(Jabber.template('.occupant-list-template'));
+          panel.find('.conversation').append(Jabber.template('.occupant-list-template'));
           panel.find('.history').addClass('room');
+          $('#chat .occupants .occupant-list').perfectScrollbar();
       }
       textarea.attr('data-to', jid);
 
@@ -672,6 +672,10 @@ jQuery(function($) {
    $('.title-bar a').click(function() {
      $(this).parents('.status-group').find('.buddy-list').toggle('fast');
    });
+   $('#chat').on('click', '.occupants a', function() {
+     $(this).siblings('.occupant-list').toggle('fast');
+     $(this).toggleClass('up');
+   });
 
    //restore connection if user was connected
    if($presence=='' || $presence == 'chat') {
diff --git a/public/stylesheets/chat.css b/public/stylesheets/chat.css
index ce0c466..910c4b7 100644
--- a/public/stylesheets/chat.css
+++ b/public/stylesheets/chat.css
@@ -174,18 +174,33 @@
   text-align: center;
   display: block;
 }
-.conversation .occupant-list {
+div.occupants {
   position: absolute;
-  top: 0;
-  right: 0;
-  width: 200px;
-  bottom: 125px;
+  width: 100%;
+  bottom: 98px;
+  background-color: rgba(0, 0, 0, 0.7);
 }
-.conversation .occupant-list ul {
+div.occupants ul.occupant-list {
   padding: 0;
-  list-style: none;
-  font-size: 12px;
+  margin: 0;
+  max-height: 162px;
+  overflow: hidden;
+  position: relative;
+  display: none;
+  border-top: 1px solid rgb(37, 37, 37);
 }
+div.occupants > a {
+  color: rgb(168, 168, 168);
+  text-align: center;
+  width: 100%;
+  display: inline-block;
+  text-decoration: none;
+  background: url(/images/down-arrow.png) center center no-repeat;
+}
+div.occupants > a.up {
+  background: url(/images/top-arrow.png) center center no-repeat;
+}
+
 #chat-window .comment-balloon-content {
   min-height: 50px;
   padding: 5px 0 5px 25px;
--
libgit2 0.21.2