diff --git a/addons/web_im/static/src/css/im.css b/addons/web_im/static/src/css/im.css
index c802037236a..cec95a12e33 100644
--- a/addons/web_im/static/src/css/im.css
+++ b/addons/web_im/static/src/css/im.css
@@ -88,11 +88,81 @@
     position: relative;
 }
 
-.openerp .oe_im_conversation {
+/* conversations */
+
+.openerp .oe_im_chatview {
     position: fixed;
-    bottom: 0px;
-    background-color: #E8EBEF;
-    margin: 10px;
-    width: 180px;
+    bottom: 6px;
+    margin-right: 5px;
+    background: rgba(0, 0, 0, 0.6);
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    -moz-box-shadow: 0 0 3px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.3);
+    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.3);
+    width: 240px;
+}
+
+.openerp .oe_im_chatview .oe_im_chatview_disconnected {
+    display:none;
+}
+
+.openerp .oe_im_chatview .oe_im_chatview_header {
+    padding: 3px 6px 2px;
+    background: #DEDEDE;
+    background: -moz-linear-gradient(#FCFCFC, #DEDEDE);
+    background: -webkit-gradient(linear, left top, left bottom, from(#FCFCFC), to(#DEDEDE));
+    -moz-border-radius: 3px 3px 0 0;
+    -webkit-border-radius: 3px 3px 0 0;
+    border-radius: 3px 3px 0 0;
+    border-bottom: 1px solid #AEB9BD;
+    cursor: pointer;
+}
+
+.openerp .oe_im_chatview .oe_im_chatview_close {
+    padding: 0;
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+    -webkit-appearance: none;
+    font-size: 18px;
+    line-height: 16px;
+    float: right;
+    font-weight: bold;
+    color: black;
+    text-shadow: 0 1px 0 white;
+    opacity: 0.2;
+}
+
+.openerp .oe_im_chatview .oe_im_chatview_content {
+    overflow: auto;
+    height: 287px;
+}
+
+.openerp .oe_im_chatview .oe_im_chatview_footer {
+    position: relative;
+    padding: 3px;
+    border-top: 1px solid #AEB9BD;
+    background: #DEDEDE;
+    background: -moz-linear-gradient(#FCFCFC, #DEDEDE);
+    background: -webkit-gradient(linear, left top, left bottom, from(#FCFCFC), to(#DEDEDE));
+    -moz-border-radius: 0 0 3px 3px;
+    -webkit-border-radius: 0 0 3px 3px;
+    border-radius: 0 0 3px 3px;
+}
+
+.openerp .oe_im_chatview .oe_im_chatview_input {
+    width: 222px;
+    font-family: Lato, Helvetica, sans-serif;
+    font-size: 13px;
+    color: #333;
+    padding: 1px 5px;
     border: 1px solid #AEB9BD;
-}
\ No newline at end of file
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    -moz-box-shadow: inset 0 1px 4px rgba(0,0,0,0.2);
+    -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
+    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
+}
diff --git a/addons/web_im/static/src/js/im.js b/addons/web_im/static/src/js/im.js
index a9cd9b9d683..434fe7d16db 100644
--- a/addons/web_im/static/src/js/im.js
+++ b/addons/web_im/static/src/js/im.js
@@ -207,7 +207,7 @@ openerp.web_im = function(instance) {
             this.$el.css("right", this.get("right_position"));
         },
         received_message: function(message) {
-            this.$(".oe_conversation_text").append($("<div>").text("Him: " + message.message));
+            this.$(".oe_im_chatview_content").append($("<div>").text("Him: " + message.message));
         },
         send_message: function(e) {
             if(e && e.which !== 13) {
@@ -215,7 +215,7 @@ openerp.web_im = function(instance) {
             }
             var mes = this.$("input").val();
             this.$("input").val("");
-            this.$(".oe_conversation_text").append($("<div>").text("Me: " + mes));
+            this.$(".oe_im_chatview_content").append($("<div>").text("Me: " + mes));
             var model = new instance.web.Model("im.message");
             model.call("post", [mes, this.user_rec.id], {context: new instance.web.CompoundContext()});
         },
diff --git a/addons/web_im/static/src/xml/im.xml b/addons/web_im/static/src/xml/im.xml
index cb42e8c7fe8..d22b4202c92 100644
--- a/addons/web_im/static/src/xml/im.xml
+++ b/addons/web_im/static/src/xml/im.xml
@@ -27,9 +27,18 @@
         </div>
     </t>
     <t t-name="Conversation">
-        <div class="oe_im_conversation">
-            <div class="oe_conversation_text"></div>
-            <input class="oe_conversation_input" type="text"/>
+        <div class="oe_im_chatview">
+            <div class="oe_im_chatview_header">
+                <t t-esc="widget.user_rec.name"/>
+                <button class="oe_im_chatview_close">×</button>
+            </div>
+            <div class="oe_im_chatview_disconnected">
+                <t t-esc='_.str.sprintf(_t("%s is offline. He/She will receive your messages on his/her next connection."), widget.user_rec.name)'/>
+            </div>
+            <div class="oe_im_chatview_content"></div>
+            <div class="oe_im_chatview_footer">
+                <input class="oe_im_chatview_input" placeholder="Say something..." />
+            </div>
         </div>
     </t>
 </templates>
\ No newline at end of file