diff --git a/addons/mass_mailing/static/src/js/mass_mailing_editor.js b/addons/mass_mailing/static/src/js/mass_mailing_editor.js
index 23e8a84f155..a02836ce4d8 100644
--- a/addons/mass_mailing/static/src/js/mass_mailing_editor.js
+++ b/addons/mass_mailing/static/src/js/mass_mailing_editor.js
@@ -8,8 +8,6 @@ var web_editor = require('web_editor.editor');
 var options = require('web_editor.snippets.options');
 var snippets_editor = require('web_editor.snippet.editor');
 
-var _t = core._t;
-
 var $editable_area = $("#editable_area");
 if ($editable_area.length === 0 || !$editable_area.is(".o_mail_area")) {
     return;
@@ -145,54 +143,179 @@ snippets_editor.Class.include({
         return url;
     },
     compute_snippet_templates: function (html) {
+        var self = this;
         var ret = this._super.apply(this, arguments);
 
-        var $themes = this.$("#email_designer_themes").children().addClass("oe_snippet_body");
+        var $themes = this.$("#email_designer_themes").children();
         if ($themes.length === 0) return ret;
 
+        /**
+         * Initialize theme parameters.
+         */
         var all_classes = "";
-        var $dropdown = $(core.qweb.render("mass_mailing.theme_selector", {
-            themes: _.map($themes, function (theme) {
-                var $theme = $(theme);
-                var classname = $theme.data("class");
-                all_classes += " " + classname;
-                return {
-                    className: classname,
-                    imgSource: $theme.data("img"),
-                };
-            }),
-        }));
+        var themes_params = _.map($themes, function (theme) {
+            var $theme = $(theme);
+            var name = $theme.data("name");
+            var classname = "o_" + name + "_theme";
+            all_classes += " " + classname;
+            var images_info = _.defaults($theme.data("imagesInfo") || {}, {all: {}});
+            _.each(images_info, function (info) {
+                info = _.defaults(info, {module: "mass_mailing", format: "jpg"});
+            });
+            return {
+                name: name,
+                className: classname || "",
+                img: $theme.data("img") || "",
+                template: $theme.html().trim(),
+                get_image_info: function (filename) {
+                    if (images_info[filename]) {
+                        return images_info[filename];
+                    }
+                    return images_info.all;
+                }
+            };
+        });
+        $themes.parent().remove();
 
         var $body = $(document.body);
-        $dropdown.on("mouseenter click", "li > a", function (e) {
+        var $snippets = this.$(".oe_snippet");
+
+        /**
+         * Create theme selection screen and check if it must be forced opened.
+         * Reforce it opened if the last snippet is removed.
+         */
+        var $dropdown = $(core.qweb.render("mass_mailing.theme_selector", {
+            themes: themes_params
+        }));
+        var first_choice;
+        check_if_must_force_theme_choice();
+
+        /**
+         * Switch theme when a theme button is hovered. Confirm change if the theme button
+         * is pressed.
+         */
+        var selected_theme = false;
+        $dropdown.on("mouseenter", "li > a", function (e) {
+            if (first_choice) return;
             e.preventDefault();
-            var classname = $(e.currentTarget).data("class");
-            $body.removeClass(all_classes).addClass(classname);
+            var theme_params = themes_params[$(e.currentTarget).parent().index()];
+            switch_theme(theme_params);
+        });
+        $dropdown.on("click", "li > a", function (e) {
+            e.preventDefault();
+            var theme_params = themes_params[$(e.currentTarget).parent().index()];
+            if (first_choice) {
+                switch_theme(theme_params);
+                $body.removeClass("o_force_mail_theme_choice");
+                first_choice = false;
+            } else {
+                switch_images(theme_params, $snippets);
+            }
+            selected_theme = theme_params;
+
+            // Notify form view
+            window.top.odoo[window.callback+"_downup"]($editable_area.addClass("o_dirty").html());
+        });
+
+        /**
+         * If the user opens the theme selection screen, indicates which one is active and
+         * saves the information...
+         * ... then when the user closes check if the user confirmed its choice and restore
+         * previous state if this is not the case.
+         */
+        $dropdown.on("shown.bs.dropdown", function () {
+            check_selected_theme();
+            $dropdown.find("li").removeClass("selected").filter(function () {
+                return ($(this).has("img[src=\"" + (selected_theme && selected_theme.img) + "\"]").length > 0);
+            }).addClass("selected");
+        });
+        $dropdown.on("hidden.bs.dropdown", function () {
+            switch_theme(selected_theme);
+        });
+
+        /**
+         * On page load, check the selected theme and force switching to it (body needs the
+         * theme style for its edition toolbar).
+         */
+        check_selected_theme();
+        $body.addClass(selected_theme.className);
+
+        $dropdown.insertAfter(this.$el.find("#snippets_menu"));
+
+        return ret;
+
+        function check_if_must_force_theme_choice() {
+            first_choice = editable_area_is_empty();
+            $body.toggleClass("o_force_mail_theme_choice", first_choice);
+        }
+
+        function editable_area_is_empty($layout) {
+            $layout = $layout || $editable_area.find(".o_layout");
+            return ($editable_area.html().trim() === "" || ($layout.length > 0 && $layout.html().trim() === ""));
+        }
+
+        function check_selected_theme() {
             var $layout = $editable_area.find(".o_layout");
+            if ($layout.length === 0) {
+                selected_theme = false;
+            } else {
+                _.each(themes_params, function (theme_params) {
+                    if ($layout.hasClass(theme_params.className)) {
+                        selected_theme = theme_params;
+                    }
+                });
+            }
+        }
+
+        function switch_images(theme_params, $container) {
+            $container.find("img").each(function () {
+                var $img = $(this);
+                var src = $img.attr("src");
+
+                var m = src.match(/^\/web\/image\/\w+\.s_default_image_(?:theme_[a-z]+_)?(.+)$/);
+                if (!m) {
+                    m = src.match(/^\/\w+\/static\/src\/img\/(?:theme_[a-z]+\/)?s_default_image_(.+)\.[a-z]+$/);
+                }
+                if (!m) return;
+
+                var file = m[1];
+                var img_info = theme_params.get_image_info(file);
+
+                if (img_info.format) {
+                    src = "/" + img_info.module + "/static/src/img/theme_" + theme_params.name + "/s_default_image_" + file + "." + img_info.format;
+                } else {
+                    src = "/web/image/" + img_info.module + ".s_default_image_theme_" + theme_params.name + "_" + file;
+                }
+
+                $img.attr("src", src);
+            });
+        }
+
+        function switch_theme(theme_params) {
+            if (!theme_params || switch_theme.last === theme_params) return;
+            switch_theme.last = theme_params;
+
+            $body.removeClass(all_classes).addClass(theme_params.className);
+            switch_images(theme_params, $editable_area);
+
+            var $old_layout = $editable_area.find(".o_layout");
+            var $new_layout = $("<div/>", {"class": "o_layout oe_structure " + theme_params.className});
+
             var $contents;
-            if ($layout.length) {
-                $contents = ($layout.hasClass("oe_structure") ? $layout : $layout.find(".oe_structure").first()).contents();
+            if (first_choice) {
+                $contents = theme_params.template;
+            } else if ($old_layout.length) {
+                $contents = ($old_layout.hasClass("oe_structure") ? $old_layout : $old_layout.find(".oe_structure").first()).contents();
             } else {
                 $contents = $editable_area.contents();
             }
-            var $div = $("<div/>", {"class": "o_layout oe_structure " + classname});
-            $editable_area.append($div);
-            $div.append($contents);
-            $layout.remove();
-        });
 
-        var $snippets_menu = this.$el.find("#snippets_menu");
-        var old_title = $snippets_menu.text();
-        $dropdown.on("shown.bs.dropdown", function () {
-            $snippets_menu.text(_t("Choose a Theme"));
-        });
-        $dropdown.on("hidden.bs.dropdown", function () {
-            $snippets_menu.text(old_title);
-        });
+            $editable_area.empty().append($new_layout);
+            $new_layout.append($contents);
+            $old_layout.remove();
 
-        $dropdown.insertAfter($snippets_menu);
-
-        return ret;
+            self.show_blocks();
+        }
     },
 });
 
@@ -217,7 +340,6 @@ window.top.odoo[window["callback"]+"_updown"] = function (value, fields_values,
         }
 
         if (value.indexOf('on_change_model_and_list') === -1) {
-
             $editable.html(value);
 
             if (editor_enable) {
diff --git a/addons/mass_mailing/static/src/less/mass_mailing.ui.less b/addons/mass_mailing/static/src/less/mass_mailing.ui.less
index 9b72a72adc7..63336f77c99 100644
--- a/addons/mass_mailing/static/src/less/mass_mailing.ui.less
+++ b/addons/mass_mailing/static/src/less/mass_mailing.ui.less
@@ -10,8 +10,28 @@
         overflow: auto;
         background-color: @o-we-color-dark;
 
-        > li:hover > a {
-            background-color: @o-we-color-darker;
+        > li {
+            &:hover > a {
+                background-color: @o-we-color-darker;
+            }
+            &.selected {
+                border: 2px solid @odoo-brand-primary;
+            }
         }
     }
 }
+
+body.o_force_mail_theme_choice {
+    .o_mail_theme_selector {
+        .dropdown-toggle {
+            display: none;
+        }
+        .dropdown-menu {
+            display: block;
+        }
+    }
+    #editable_area::after {
+        content: "";
+        .o-position-absolute(0, 0, 0, 0);
+    }
+}
diff --git a/addons/mass_mailing/static/src/xml/mass_mailing.xml b/addons/mass_mailing/static/src/xml/mass_mailing.xml
index e82f4dbf88e..f780527d999 100644
--- a/addons/mass_mailing/static/src/xml/mass_mailing.xml
+++ b/addons/mass_mailing/static/src/xml/mass_mailing.xml
@@ -1,17 +1,13 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates id="template" xml:space="preserve">
-    <t t-name="mass_mailing.theme_selector">
-        <div class="o_mail_theme_selector">
-            <a href="#" class="btn btn-xs btn-primary dropdown-toggle" data-toggle="dropdown">
-                <i class="fa fa-paint-brush"/>
-            </a>
-            <div class="dropdown-menu">
-                <li t-foreach="themes" t-as="theme">
-                    <a href="#" t-att-data-class="theme.className">
-                        <img class="img img-responsive" t-att-src="theme.imgSource"/>
-                    </a>
-                </li>
-            </div>
+    <div t-name="mass_mailing.theme_selector" class="o_mail_theme_selector">
+        <a href="#" class="btn btn-xs btn-primary dropdown-toggle" data-toggle="dropdown">
+            <i class="fa fa-paint-brush"/>
+        </a>
+        <div class="dropdown-menu">
+            <li t-foreach="themes" t-as="theme">
+                <a href="#"><img class="img img-responsive" t-att-src="theme.img"/></a>
+            </li>
         </div>
-    </t>
+    </div>
 </templates>
diff --git a/addons/mass_mailing/views/snippets_themes.xml b/addons/mass_mailing/views/snippets_themes.xml
index 44c477a92bb..71650285903 100644
--- a/addons/mass_mailing/views/snippets_themes.xml
+++ b/addons/mass_mailing/views/snippets_themes.xml
@@ -2,13 +2,24 @@
 <odoo>
 <!-- Snippets & Themes Menu -->
 <template id="email_designer_snippets" inherit_id="web_editor.snippets" primary="True">
+    <xpath expr="//h2[@id='snippets_menu']" position="replace">
+        <h2 id="snippets_menu">Choose style</h2>
+    </xpath>
     <xpath expr="//div[@id='o_scroll']" position="replace">
         <div id="o_scroll">
             <div id="email_designer_themes">
-                <div data-class="o_default_theme" data-img="/mass_mailing/static/src/img/theme_imgs/default_template_thumb.png"/>
-                <div data-class="o_airmail_theme" data-img="/mass_mailing/static/src/img/theme_imgs/airmail_template_thumb.png"/>
-                <div data-class="o_tech_theme" data-img="/mass_mailing/static/src/img/theme_imgs/tech_template_thumb.png"/>
-                <div data-class="o_lemon_theme" data-img="/mass_mailing/static/src/img/theme_imgs/lemon_template_thumb.png"/>
+                <div data-name="default" data-img="/mass_mailing/static/src/img/theme_imgs/default_template_thumb.png">
+                    <!-- here put the t-call to the default theme template -->
+                </div>
+                <div data-name="airmail" data-img="/mass_mailing/static/src/img/theme_imgs/airmail_template_thumb.png">
+
+                </div>
+                <div data-name="tech" data-img="/mass_mailing/static/src/img/theme_imgs/tech_template_thumb.png">
+
+                </div>
+                <div data-name="lemon" data-img="/mass_mailing/static/src/img/theme_imgs/lemon_template_thumb.png">
+
+                </div>
             </div>
             <div id="email_designer_default_headers" class="o_panel">
                 <div class="o_panel_header">
diff --git a/addons/mass_mailing/views/snippets_themes_options.xml b/addons/mass_mailing/views/snippets_themes_options.xml
index 85433913278..d7f1c4f320f 100644
--- a/addons/mass_mailing/views/snippets_themes_options.xml
+++ b/addons/mass_mailing/views/snippets_themes_options.xml
@@ -29,11 +29,6 @@
         data-drop-in="[data-oe-field='body_html']:not(:has(.o_layout)), .oe_structure">
     </div>
 
-    <div data-js='resize'
-        data-selector="div.snippet_row"
-        data-drop-in=".oe_structure, [data-oe-type=html]:not(:has(.o_layout))">
-    </div>
-
     <!-- <div data-js='background'
         data-selector="div.snippet_row">
         <li data-choose_image="choose_image" data-background=""><a>Choose a background image</a></li>