diff --git a/addons/web_chat/static/src/css/chat.css b/addons/web_chat/static/src/css/chat.css
index 299cad4d5cc..887d8b2fef2 100644
--- a/addons/web_chat/static/src/css/chat.css
+++ b/addons/web_chat/static/src/css/chat.css
@@ -1,6 +1,11 @@
 
 .openerp .oe_chat {
     position: fixed;
-    bottom: 0px;
-    right: 0px;
+    background-color: #E8EBEF;
+    width: 220px;
+    border-left: 1px solid #AEB9BD;
 }
+
+.openerp .oe_topbar_chatbutton{
+    
+}
\ No newline at end of file
diff --git a/addons/web_chat/static/src/js/chat.js b/addons/web_chat/static/src/js/chat.js
index 204b3f2e777..51259ae417d 100644
--- a/addons/web_chat/static/src/js/chat.js
+++ b/addons/web_chat/static/src/js/chat.js
@@ -1,19 +1,44 @@
 
 openerp.web_chat = function(instance) {
 
-    instance.web.Menu = instance.web.Menu.extend({
-        start: function() {
-            new instance.web_chat.Chat(instance.client).appendTo(instance.client.$el);
-            return this._super();
-        }
+    instance.web.UserMenu.include({
+        do_update: function(){
+            var self = this;
+            this.update_promise.then(function() {
+                var chat = new instance.web_chat.Chat(self);
+                chat.appendTo(instance.client.$el);
+                var button = new instance.web.ChatTopButton(self);
+                button.chat = chat;
+                button.appendTo(instance.webclient.$el.find('.oe_systray'));
+            });
+            return this._super.apply(this, arguments);
+        },
+    });
+
+    instance.web.ChatTopButton = instance.web.Widget.extend({
+        template:'ChatTopButton',
+        events: {
+            "click button": "clicked",
+        },
+        clicked: function() {
+            this.chat.switch_display();
+        },
     });
 
     instance.web_chat.Chat = instance.web.Widget.extend({
         template: "Chat",
+        init: function(parent) {
+            this._super(parent);
+            this.shown = false;
+        },
         start: function() {
             var self = this;
+            this.$el.css("right", -this.$el.outerWidth());
             self.poll();
             self.last = null;
+            $(window).scroll(_.bind(this.calc_box, this));
+            $(window).resize(_.bind(this.calc_box, this));
+            self.calc_box();
             self.$(".oe_chat_input").keypress(function(e) {
                 if(e.which != 13) {
                     return;
@@ -24,6 +49,25 @@ openerp.web_chat = function(instance) {
                 model.call("post", [mes], {context: new instance.web.CompoundContext()});
             }).focus();
         },
+        calc_box: function() {
+            var $topbar = instance.client.$(".oe_topbar");
+            var top = $topbar.offset().top + $topbar.height();
+            top = Math.max(top - $(window).scrollTop(), 0);
+            this.$el.css("top", top);
+            this.$el.css("bottom", 0);
+        },
+        switch_display: function() {
+            if (this.shown) {
+                this.$el.animate({
+                    right: -this.$el.outerWidth(),
+                });
+            } else {
+                this.$el.animate({
+                    right: 0,
+                });
+            }
+            this.shown = ! this.shown;
+        },
         poll: function() {
             var self = this;
             this.rpc("/chat/poll", {
diff --git a/addons/web_chat/static/src/xml/chat.xml b/addons/web_chat/static/src/xml/chat.xml
index 8d364a1e48b..c6f0499b2b1 100644
--- a/addons/web_chat/static/src/xml/chat.xml
+++ b/addons/web_chat/static/src/xml/chat.xml
@@ -8,4 +8,9 @@
             <input class="oe_chat_input" type="text"/>
         </div>
     </t>
+    <t t-name="ChatTopButton">
+        <div title='Display chat' class="oe_topbar_item oe_topbar_chatbutton">
+            <button></button>
+        </div>
+    </t>
 </templates>
\ No newline at end of file