diff --git a/addons/website_sale/static/src/css/Makefile b/addons/website_sale/static/src/css/Makefile
index 6753818a302..69799f86913 100644
--- a/addons/website_sale/static/src/css/Makefile
+++ b/addons/website_sale/static/src/css/Makefile
@@ -1,2 +1,3 @@
 sass:
 	sass -t expanded --unix-newlines --watch website_sale.sass:website_sale.css&
+	sass -t expanded --unix-newlines --watch website_mail.sass:website_mail.css&
diff --git a/addons/website_sale/static/src/css/website_mail.css b/addons/website_sale/static/src/css/website_mail.css
new file mode 100644
index 00000000000..34cc159982c
--- /dev/null
+++ b/addons/website_sale/static/src/css/website_mail.css
@@ -0,0 +1,51 @@
+@charset "utf-8";
+/* ---- OpenChatter Website ---- */
+.oe_msg img.oe_msg_avatar {
+  width: 50px;
+  margin-right: 10px;
+}
+
+.oe_msg_attachment {
+  display: inline-block;
+  width: 120px;
+  margin: 4px 2px;
+  min-height: 80px;
+  position: relative;
+  border-radius: 3px;
+  text-align: center;
+  vertical-align: top;
+}
+.oe_msg_attachment a img.oe_attachment_embedded {
+  display: block;
+  position: relative;
+  margin: 0px;
+  margin-left: 10px;
+  width: 100px;
+  height: 80px;
+  border-radius: 1px;
+  border: solid 3px white;
+  -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.19);
+  -moz-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.19);
+  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.19);
+}
+.oe_msg_attachment a img.oe_attachment_webimage {
+  display: block;
+  position: relative;
+  width: 48px;
+  height: 48px;
+  top: 0px;
+  margin-left: 36px;
+}
+.oe_msg_attachment a div.oe_attachment_name {
+  display: inline-block;
+  max-width: 100%;
+  padding: 1px 3px;
+  margin-top: 2px;
+  margin-bottom: 5px;
+  background: #f4f5fa;
+  overflow: hidden;
+  color: #4c4c4c;
+  text-shadow: none;
+  border-radius: 3px;
+  word-wrap: break-word;
+}
diff --git a/addons/website_sale/static/src/css/website_mail.sass b/addons/website_sale/static/src/css/website_mail.sass
new file mode 100644
index 00000000000..7bc2a54214d
--- /dev/null
+++ b/addons/website_sale/static/src/css/website_mail.sass
@@ -0,0 +1,50 @@
+@charset "utf-8"
+
+/* ---- OpenChatter Website ---- */
+
+.oe_msg
+    img.oe_msg_avatar
+        width: 50px
+        margin-right: 10px
+
+.oe_msg_attachment
+    display: inline-block
+    width: 120px
+    margin: 4px 2px
+    min-height: 80px
+    position: relative
+    border-radius: 3px
+    text-align: center
+    vertical-align: top
+    a
+        img.oe_attachment_embedded
+            display: block
+            position: relative
+            margin: 0px
+            margin-left: 10px
+            width: 100px
+            height: 80px
+            border-radius: 1px
+            border: solid 3px #FFF
+            -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.19)
+            -moz-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.19)
+            box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.19)
+        img.oe_attachment_webimage
+            display: block
+            position: relative
+            width: 48px
+            height: 48px
+            top: 0px
+            margin-left: 36px
+        div.oe_attachment_name
+            display: inline-block
+            max-width: 100%
+            padding: 1px 3px
+            margin-top: 2px
+            margin-bottom: 5px
+            background: #F4F5FA
+            overflow: hidden
+            color: #4c4c4c
+            text-shadow: none
+            border-radius: 3px
+            word-wrap: break-word
\ No newline at end of file
diff --git a/addons/website_sale/views/website_sale.xml b/addons/website_sale/views/website_sale.xml
index 3f040dae0fd..d1ddd7f5fb7 100644
--- a/addons/website_sale/views/website_sale.xml
+++ b/addons/website_sale/views/website_sale.xml
@@ -256,6 +256,7 @@
       <t t-set="head">
           <script type="text/javascript" src="/website_sale/static/src/js/website_sale.js"></script>
           <link rel='stylesheet' href='/website_sale/static/src/css/website_sale.css'/>
+          <link rel='stylesheet' href='/website_sale/static/src/css/website_mail.css'/>
       </t>
       <t t-set="additional_title" t-value="product.name"/>
       <div id="wrap">
@@ -386,9 +387,9 @@
                 <a id="comments"/>
                 <ul class="media-list" id="comments-list">
                     <li t-foreach="product.website_message_ids" t-as="message" class="media">
-                        <div class="media-body">
-                            <img class="media-object pull-left" t-att-src="'/website/image?model=res.partner&amp;field=image_small&amp;id='+str(message.author_id.id)" style="width: 50px; margin-right: 10px;"/>
-                            <div class="media-body">
+                        <div class="media-body oe_msg">
+                            <img class="media-object pull-left oe_msg_avatar" t-att-src="'/website/image?model=res.partner&amp;field=image_small&amp;id='+str(message.author_id.id)" style="width: 50px; margin-right: 10px;"/>
+                            <div class="media-body oe_msg_content">
                                 <t t-call="website.publish_short">
                                     <t t-set="object" t-value="message"/>
                                 </t>
@@ -397,15 +398,17 @@
                                 </h5>
                                 <div t-field="message.body"/>
                                 <div>
-                                    <div class="col-md-2" t-foreach='message.attachment_ids' t-as='attachment'>
+                                    <div class="oe_msg_attachment" t-foreach='message.attachment_ids' t-as='attachment'>
                                         <a t-att-href="'/mail/download_attachment?model=mail.message&amp;id='+str(message.id)+'&amp;method=download_attachment&amp;attachment_id='+str(attachment.id)" target="_blank">
                                             <t t-if="attachment.file_type == 'webimage'">
-                                                <img t-att-src="'/web/binary/image?model=ir.attachment&amp;field=datas&amp;id=' + str(attachment.id) + '&amp;resize=100,80'"></img>
+                                                <img t-att-src="'/web/binary/image?model=ir.attachment&amp;field=datas&amp;id=' + str(attachment.id) + '&amp;resize=100,80'"
+                                                    class='oe_attachment_embedded'></img>
                                             </t>
                                             <t t-if="attachment.file_type != 'webimage'">
-                                                <img t-att-src="'/mail/static/src/img/mimetypes/' + attachment.file_type + '.png'"></img>
+                                                <img t-att-src="'/mail/static/src/img/mimetypes/' + attachment.file_type + '.png'"
+                                                    class='oe_attachment_webimage'></img>
                                             </t>
-                                            <div class='oe_name'><t t-raw='attachment.name' /></div>
+                                            <div class='oe_attachment_name'><t t-raw='attachment.name' /></div>
                                         </a>
                                     </div>
                                 </div>