diff --git a/app/controllers/public/chat_controller.rb b/app/controllers/public/chat_controller.rb
index 3c54bd9..b31cc6c 100644
--- a/app/controllers/public/chat_controller.rb
+++ b/app/controllers/public/chat_controller.rb
@@ -68,6 +68,11 @@ class ChatController < PublicController
     render :json => {:order => conversations_order.reverse, :domain => environment.default_hostname.gsub('.','-')}.to_json
   end
 
+  #TODO Ideally this is done through roster table on ejabberd.
+  def roster_groups
+    render :text => user.memberships.map {|m| {:jid => m.jid, :name => m.name}}.to_json
+  end
+
   protected
 
   def check_environment_feature
diff --git a/app/views/shared/logged_in/xmpp_chat.html.erb b/app/views/shared/logged_in/xmpp_chat.html.erb
index 94c9de2..08392bd 100644
--- a/app/views/shared/logged_in/xmpp_chat.html.erb
+++ b/app/views/shared/logged_in/xmpp_chat.html.erb
@@ -13,11 +13,9 @@
     </script>
 
 
-  <div id="chat-label" class="opened">
-    <span class="right-arrow">&gt;</span>
+  <div id="chat-label">
+    <span class="right-arrow">&#9654;</span>
     <span class="title"><%= _('Chat') %></span>
-    <br clear="both" />
-    <div class="icon-big-chat"></div>
   </div>
 
   <div id='chat'>
diff --git a/public/javascripts/application.js b/public/javascripts/application.js
index 2a8120d..b8356d9 100644
--- a/public/javascripts/application.js
+++ b/public/javascripts/application.js
@@ -567,14 +567,14 @@ function display_notice(message) {
    setTimeout(function() { $noticeBox.fadeOut('fast'); }, 5000);
 }
 
-function open_chat_window(self_link, anchor) {
+function open_chat_window(anchor) {
    jQuery('#chat').addClass('opened');
-   jQuery('#chat-label').removeClass('opened');
+   jQuery('#chat-label').addClass('opened');
    jQuery("#chat" ).trigger('opengroup', anchor);
    return false;
 }
 
-function toggle_chat_window(self_link) {
+function toggle_chat_window() {
    if(jQuery('#conversations .conversation').length == 0) jQuery('.buddies a').first().click();
    jQuery('#chat').toggleClass('opened');
    jQuery('#chat-label').toggleClass('opened');
diff --git a/public/javascripts/chat.js b/public/javascripts/chat.js
index bde7bb3..840f9bb 100644
--- a/public/javascripts/chat.js
+++ b/public/javascripts/chat.js
@@ -177,7 +177,7 @@ jQuery(function($) {
         Jabber.connection.send(
            $pres({to: room_jid + '/' + $own_name}).c('x', {xmlns: Strophe.NS.MUC}).c('history', {maxchars: 0})
         );
-        Jabber.insert_or_update_group(room_jid, 'group');
+        Jabber.insert_or_update_group(room_jid, 'online');
         Jabber.update_chat_title();
      },
 
@@ -232,6 +232,22 @@ jQuery(function($) {
            var jid_id = Jabber.jid_to_id(jid);
            Jabber.insert_or_update_contact(jid, name);
         });
+        //TODO Add groups through roster too...
+        $.ajax({
+          url: '/chat/roster_groups',
+          dataType: 'json',
+          success: function(data){
+            data.each(function(room){
+              console.log('==> '+room.jid);
+              var jid_id = Jabber.jid_to_id(room.jid);
+              Jabber.jids[jid_id] = {jid: room.jid, name: room.name, type: 'groupchat'};
+              Jabber.insert_or_update_group(room.jid, 'online');
+            });
+          },
+          error: function(data, textStatus, jqXHR){
+            console.log(data);
+          },
+        });
         sort_conversations();
         // set up presence handler and send initial presence
         Jabber.connection.addHandler(Jabber.on_presence, null, "presence");
@@ -719,12 +735,12 @@ jQuery(function($) {
      var name = Jabber.name_of(jid_id);
      var identifier = Strophe.getNodeFromJid(jid);
      var avatar = "/chat/avatar/"+identifier
-     if(!$('#chat').is(':visible') || window.isHidden()) {
+     if(!$('#chat').hasClass('opened') || window.isHidden()) {
        var options = {body: message.body, icon: avatar, tag: jid_id};
-       notifyMe(name, options).onclick = function(){
-         jQuery('#chat').show('fast');
-         jQuery('a#'+jid_id).click();
-       };
+       console.log('Notify '+name);
+       $(notifyMe(name, options)).on('click', function(){
+         open_chat_window('#'+jid+'/'+name);
+       });
        $.sound.play('/sounds/receive.wav');
      }
    }
@@ -773,6 +789,6 @@ jQuery(function($) {
   });
 
   $('#chat-label').click(function(){
-    toggle_chat_window(this);
+    toggle_chat_window();
   });
 });
diff --git a/public/stylesheets/chat.css b/public/stylesheets/chat.css
index 8dc5770..9f7a20d 100644
--- a/public/stylesheets/chat.css
+++ b/public/stylesheets/chat.css
@@ -23,7 +23,7 @@
 #chat #buddy-list {
   background-color: #f9f9f9;
   top: 0;
-  right: 0;
+  right: -5px;
   width: 0;
   bottom: 100px;
   position: absolute;
@@ -39,6 +39,7 @@
 }
 
 #chat #buddy-list:hover {
+  right: 0;
   width: 190px;
   transition: width 0.3s ease-in;
 }
@@ -479,35 +480,31 @@ div.occupants > a.up {
 }
 
 #chat-label {
-  width: 20px;
-  height: 80px;
-  background-color: #2E3436;
+  right: 0;
+  width: 0;
+  height: 0;
+  background-color: #888A85;
   position: fixed;
   top: 20%;
-  right: 350px;
   cursor: pointer;
   text-align: center;
   z-index: 11;
-  transition: background-color 0.2s linear, right 0.3s ease-in, width 0.3s ease-in;
-  border-top-left-radius: 10px;
-  border-bottom-left-radius: 10px;
+  transition: background-color 0.2s linear, right 0.3s ease-in;
 }
 
 #chat-label.opened {
-  right: 0;
-  width: 100px;
-  transition: background-color 0.2s linear, right 0.3s ease-in, width 0.3s ease-in;
-}
-
-#chat-label.opened:hover {
+  width: 20px;
+  height: 90px;
+  right: 350px;
   background-color: #888A85;
-  transition: background-color 0.2s linear, right 0.3s ease-in, width 0.3s ease-in;
+  border-radius: 10px 0px 0 10px;
+  font-size: 14px;
+  transition: background-color 0.2s linear, right 0.3s ease-in;
 }
 
-#chat-label:hover {
-  background-color: #888A85;
+#chat-label.opened:hover {
+  background-color: #2E3436;
   transition: background-color 0.2s linear, right 0.3s ease-in;
-  transition: background-color 0.2s linear, right 0.3s ease-in, width 0.3s ease-in;
 }
 
 #chat-label span {
@@ -515,29 +512,43 @@ div.occupants > a.up {
 }
 
 #chat-label span.title {
-  font-size: 18px;
-  line-height: 24px;
+  font-size: 16px;
+  position: absolute;
+  background-color: #888A85;
+  border-radius: 10px 10px 0 0;
+  transform: rotate(-90deg);
+  top: 35px;
+  right: -34px;
+  width: 80px;
+  padding: 2px 5px;
+  text-shadow: 1px -1px 0 #666;
+  transition: background-color 0.2s linear, right 0.3s ease-in;
+}
+
+#chat-label:hover span.title {
+  background-color: #2E3436;
+  transition: background-color 0.2s linear, right 0.3s ease-in;
 }
 
 #chat-label span.right-arrow {
-  font-size: 24px;
-  line-height: 77px;
+  font-size: 18pxpx;
+  line-height: 87px;
 }
 
 #chat-label .title {
-  display: none;
+  display: inline;
 }
 
 #chat-label.opened .title {
-  display: inline;
+  display: none;
 }
 
 #chat-label .right-arrow {
-  display: inline;
+  display: none;
 }
 
 #chat-label.opened .right-arrow {
-  display: none;
+  display: inline;
 }
 
 #chat-label div {
--
libgit2 0.21.2