diff --git a/addons/mass_mailing/data/mass_mailing_demo.xml b/addons/mass_mailing/data/mass_mailing_demo.xml
index d5a84419f93..2bbfcce4512 100644
--- a/addons/mass_mailing/data/mass_mailing_demo.xml
+++ b/addons/mass_mailing/data/mass_mailing_demo.xml
@@ -31,6 +31,63 @@
             <field name="opt_out" eval="True"/>
         </record>
 
+        <!-- Demo newsletter template -->
+       <!--Email template -->
+        <record id="newsletter_template" model="email.template">
+            <field name="name">Newsletter</field>
+            <field name="subject">Newsletter</field>
+            <field name="model_id" ref="mass_mailing.model_mail_mass_mailing_contact"/>
+            <field name="use_default_to" eval="True"/>
+            <field name="auto_delete" eval="True"/>
+            <field name="body_html"><![CDATA[<div data-snippet-id="big-picture" style="padding:0px; margin:0px">
+<table cellpadding="0" cellspacing="0" style="margin:10px 0px 0px;vertical-align:top;padding:0px;font-family:arial;font-size:12px;color:rgb(51,51,51)">
+    <tbody>
+        <tr>
+            <td style="width:600px" valign="top">
+            <h2 style="text-align: center; padding:0px 5px">A Punchy Headline</h2>
+            </td>
+        </tr>
+        <tr>
+            <td style="width:600px" valign="top"><img src="/website/static/src/img/big_picture.png" style="display:block;border:none;min-height:250px;margin:0 auto;" width="500"></td>
+        </tr>
+        <tr>
+            <td style="width:600px" valign="top">
+            <p style="text-align: center; overflow:hidden"></p>
+
+            <h3 style="text-align: center; padding:0px 5px">A Small Subtitle for ${object.name}</h3>
+
+            <p></p>
+
+            <p style="text-align: center; overflow:hidden">Choose a vibrant image and write an inspiring paragraph about it. It does not have to be long, but it should reinforce your image.</p>
+            </td>
+        </tr>
+    </tbody>
+</table>
+</div>
+<div data-snippet-id="three-columns" style="padding:0px; margin:0px">
+<table cellpadding="0" cellspacing="0" style="margin:10px 0px 0px;vertical-align:top;padding:0px;font-family:arial;font-size:12px;color:rgb(51,51,51)">
+    <tbody>
+        <tr>
+            <td style="width:300px" valign="top"><img src="/website/static/src/img/desert_thumb.jpg" style="display:block;border:none;min-height:50px" width="275"></td>
+            <td style="width:300px" valign="top"><img src="/website/static/src/img/deers_thumb.jpg" style="display:block;border:none;min-height:50px" width="275"></td>
+        </tr>
+        <tr>
+            <td style="width:300px" valign="top">
+            <h3 style="text-align: center; padding:0px 5px">Feature One</h3>
+
+            <p style="overflow:hidden">Choose a vibrant image and write an inspiring paragraph about it. It does not have to be long, but it should reinforce your image.</p>
+            </td>
+            <td style="width:300px" valign="top">
+            <h3 style="text-align: center; padding:0px 5px">Feature Two</h3>
+
+            <p style="overflow:hidden">Choose a vibrant image and write an inspiring paragraph about it. It does not have to be long, but it should reinforce your image.</p>
+            </td>
+        </tr>
+    </tbody>
+</table>
+</div>]]></field>
+        </record>
+
         <!-- Create campaign and mailings -->
         <record id="mass_mail_category_1" model="mail.mass_mailing.category">
             <field name="name">Marketing</field>
diff --git a/addons/website_mail/static/src/css/website_mail.css b/addons/website_mail/static/src/css/website_mail.css
index b3c6b7ed942..ef0bbce4ab3 100644
--- a/addons/website_mail/static/src/css/website_mail.css
+++ b/addons/website_mail/static/src/css/website_mail.css
@@ -17,3 +17,8 @@
     transform-origin:         0 0; 
     margin:                   0 0px -300px 0;
 }
+
+.o_mail_body {
+    width: 620px;
+    margin-left: 16px;
+}
\ No newline at end of file
diff --git a/addons/website_mail/static/src/js/website_email_designer.js b/addons/website_mail/static/src/js/website_email_designer.js
index bd6516bc955..1ea39ae657c 100644
--- a/addons/website_mail/static/src/js/website_email_designer.js
+++ b/addons/website_mail/static/src/js/website_email_designer.js
@@ -14,6 +14,9 @@
             $('#email_designer').show();
             $('#email_template').hide();
             $(".js_content", $(this).parent()).children().clone().appendTo('#email_body');
+            $(".js_content", $(this).parent()).children().clone().appendTo('#email_body_html');
+            $('#email_body').addClass('oe_dirty');
+            $('#email_body_html').addClass('oe_dirty');
 
             openerp.website.editor_bar.edit();
             event.preventDefault();
diff --git a/addons/website_mail/views/website_email_designer.xml b/addons/website_mail/views/website_email_designer.xml
index 5dee573d735..31df858d50b 100644
--- a/addons/website_mail/views/website_email_designer.xml
+++ b/addons/website_mail/views/website_email_designer.xml
@@ -64,11 +64,11 @@
                 </div>
                 <hr/>
                 <!-- body fields -->
-                <div t-if="body_field == 'body_html'">
-                    <div t-field="record.body_html" id="email_body_html"/>
+                <div t-if="body_field == 'body_html'" class="col-sm-offset-2">
+                    <div t-field="record.body_html" id="email_body_html" class="o_mail_body"/>
                 </div>
-                <div t-if="body_field == 'body'">
-                    <div t-field="record.body" id="email_body"/>
+                <div t-if="body_field == 'body'" class="col-sm-offset-2">
+                    <div t-field="record.body" id="email_body" class="o_mail_body"/>
                 </div>
             </div>
         </div>