diff --git a/assets/css/src/box.styl b/assets/css/src/box.styl
index 0932c6e852..77f82475b9 100644
--- a/assets/css/src/box.styl
+++ b/assets/css/src/box.styl
@@ -198,10 +198,6 @@ $box-description-font-size = $box-description-line-height
 [data-type*="woocommerce"] .mailpoet_thumbnail
   background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUwMCIgaGVpZ2h0PSIxNDk0IiB2aWV3Qm94PSIwIDAgMjU2IDE1MyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCI+PHBhdGggZD0iTTIzLjc1OSAwaDIwOC4zNzhDMjQ1LjMyNSAwIDI1NiAxMC42NzUgMjU2IDIzLjg2M3Y3OS41NDFjMCAxMy4xODgtMTAuNjc1IDIzLjg2My0yMy44NjMgMjMuODYzSDE1Ny40MWwxMC4yNTcgMjUuMTE4LTQ1LjEwOS0yNS4xMThIMjMuODYzYy0xMy4xODcgMC0yMy44NjItMTAuNjc1LTIzLjg2Mi0yMy44NjNWMjMuODYzQy0uMTA0IDEwLjc4IDEwLjU3IDAgMjMuNzU5IDB6IiBmaWxsPSIjOUI1QzhGIi8+PHBhdGggZD0iTTE0LjU3OCAyMS43NWMxLjQ1Ny0xLjk3OCAzLjY0Mi0zLjAxOCA2LjU1Ni0zLjIyNiA1LjMwOC0uNDE3IDguMzI2IDIuMDggOS4wNTQgNy40OTIgMy4yMjYgMjEuNzUgNi43NjQgNDAuMTcgMTAuNTEgNTUuMjU5bDIyLjc5LTQzLjM5NWMyLjA4Mi0zLjk1NSA0LjY4NC02LjAzNiA3LjgwNi02LjI0NCA0LjU3OS0uMzEyIDcuMzg4IDIuNjAxIDguNTMzIDguNzQxIDIuNjAyIDEzLjg0IDUuOTMyIDI1LjYgOS44ODYgMzUuNTkgMi43MDYtMjYuNDMyIDcuMjg1LTQ1LjQ3NiAxMy43MzctNTcuMjM1IDEuNTYtMi45MTQgMy44NS00LjM3MSA2Ljg2OC00LjU4IDIuMzk0LS4yMDcgNC41NzkuNTIxIDYuNTU2IDIuMDgyIDEuOTc3IDEuNTYxIDMuMDE4IDMuNTM4IDMuMjI2IDUuOTMyLjEwNCAxLjg3My0uMjA4IDMuNDM0LTEuMDQgNC45OTUtNC4wNTkgNy40OTMtNy4zOSAyMC4wODUtMTAuMDk1IDM3LjU2Ny0yLjYwMSAxNi45NjMtMy41MzggMzAuMTgtMi45MTQgMzkuNjUuMjA5IDIuNi0uMjA4IDQuODktMS4yNDggNi44NjgtMS4yNSAyLjI4OS0zLjEyMiAzLjUzOC01LjUxNiAzLjc0Ni0yLjcwNi4yMDgtNS41MTUtMS4wNC04LjIyMS0zLjg1LTkuNjc4LTkuODg3LTE3LjM3OS0yNC42NjQtMjIuOTk4LTQ0LjMzMi02Ljc2NSAxMy4zMi0xMS43NiAyMy4zMS0xNC45ODYgMjkuOTctNi4xNCAxMS43Ni0xMS4zNDMgMTcuNzk2LTE1LjcxNCAxOC4xMDgtMi44MS4yMDgtNS4yMDMtMi4xODYtNy4yODQtNy4xOC01LjMwNy0xMy42MzMtMTEuMDMxLTM5Ljk2Mi0xNy4xNy03OC45ODYtLjQxNy0yLjcwNi4yMDctNS4xIDEuNjY0LTYuOTcyem0yMjMuNjM2IDE2LjMzOGMtMy43NDYtNi41NTYtOS4yNjItMTAuNTEtMTYuNjUtMTIuMDcyLTEuOTc4LS40MTYtMy44NS0uNjI0LTUuNjItLjYyNC05Ljk5IDAtMTguMTA3IDUuMjAzLTI0LjQ1NSAxNS42MS01LjQxMiA4Ljg0NS04LjExNyAxOC42MjctOC4xMTcgMjkuMzQ2IDAgOC4wMTMgMS42NjUgMTQuODgxIDQuOTk1IDIwLjYwNSAzLjc0NiA2LjU1NiA5LjI2MiAxMC41MSAxNi42NSAxMi4wNzEgMS45NzcuNDE3IDMuODUuNjI1IDUuNjIuNjI1IDEwLjA5NCAwIDE4LjIxMS01LjIwMyAyNC40NTUtMTUuNjEgNS40MTEtOC45NSA4LjExNy0xOC43MzIgOC4xMTctMjkuNDUuMTA0LTguMTE3LTEuNjY1LTE0Ljg4Mi00Ljk5NS0yMC41MDF6bS0xMy4xMTIgMjguODI2Yy0xLjQ1NyA2Ljg2OC00LjA1OSAxMS45NjctNy45MSAxNS40MDEtMy4wMTcgMi43MDYtNS44MjcgMy44NS04LjQyOCAzLjMzLTIuNDk4LS41Mi00LjU4LTIuNzA1LTYuMTQtNi43NjQtMS4yNS0zLjIyNi0xLjg3My02LjQ1Mi0xLjg3My05LjQ3IDAtMi42MDEuMjA4LTUuMjAzLjcyOC03LjU5Ni45MzctNC4yNjcgMi43MDYtOC40MyA1LjUxNS0xMi4zODQgMy40MzUtNS4xIDcuMDc3LTcuMTggMTAuODIzLTYuNDUyIDIuNDk4LjUyIDQuNTggMi43MDYgNi4xNCA2Ljc2NCAxLjI0OSAzLjIyNiAxLjg3MyA2LjQ1MiAxLjg3MyA5LjQ3IDAgMi43MDYtLjIwOCA1LjMwNy0uNzI4IDcuN3ptLTUyLjAzMy0yOC44MjZjLTMuNzQ2LTYuNTU2LTkuMzY2LTEwLjUxLTE2LjY1LTEyLjA3Mi0xLjk3Ny0uNDE2LTMuODUtLjYyNC01LjYyLS42MjQtOS45OSAwLTE4LjEwNyA1LjIwMy0yNC40NTUgMTUuNjEtNS40MTEgOC44NDUtOC4xMTcgMTguNjI3LTguMTE3IDI5LjM0NiAwIDguMDEzIDEuNjY1IDE0Ljg4MSA0Ljk5NSAyMC42MDUgMy43NDYgNi41NTYgOS4yNjIgMTAuNTEgMTYuNjUgMTIuMDcxIDEuOTc4LjQxNyAzLjg1LjYyNSA1LjYyLjYyNSAxMC4wOTQgMCAxOC4yMTEtNS4yMDMgMjQuNDU1LTE1LjYxIDUuNDEyLTguOTUgOC4xMTctMTguNzMyIDguMTE3LTI5LjQ1IDAtOC4xMTctMS42NjUtMTQuODgyLTQuOTk1LTIwLjUwMXptLTEzLjIxNiAyOC44MjZjLTEuNDU3IDYuODY4LTQuMDU5IDExLjk2Ny03LjkwOSAxNS40MDEtMy4wMTggMi43MDYtNS44MjggMy44NS04LjQzIDMuMzMtMi40OTctLjUyLTQuNTc4LTIuNzA1LTYuMTQtNi43NjQtMS4yNDgtMy4yMjYtMS44NzItNi40NTItMS44NzItOS40NyAwLTIuNjAxLjIwOC01LjIwMy43MjgtNy41OTYuOTM3LTQuMjY3IDIuNzA2LTguNDMgNS41MTYtMTIuMzg0IDMuNDM0LTUuMSA3LjA3Ni03LjE4IDEwLjgyMi02LjQ1MiAyLjQ5OC41MiA0LjU4IDIuNzA2IDYuMTQgNi43NjQgMS4yNSAzLjIyNiAxLjg3MyA2LjQ1MiAxLjg3MyA5LjQ3LjEwNSAyLjcwNi0uMjA4IDUuMzA3LS43MjggNy43eiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==')
 
-.mailpoet_boxes_preview
-  margin: -10px
-  padding: 10px 20px
-
 .mailpoet_boxes
   .title_and_badge
     display: flex
diff --git a/assets/css/src/in_app_announcements.styl b/assets/css/src/in_app_announcements.styl
index e3620fbd36..fa1179a66c 100644
--- a/assets/css/src/in_app_announcements.styl
+++ b/assets/css/src/in_app_announcements.styl
@@ -26,10 +26,6 @@
 
 .mailpoet_drag_and_drop_tutorial
   text-align: center
-  h2
-    font-size: 28px
-  video
-    margin-top: 20px
 
 .new_subscriber_notification_announcement
   h2
diff --git a/assets/css/src/modal.styl b/assets/css/src/modal.styl
index c794b9537e..acb6250f97 100644
--- a/assets/css/src/modal.styl
+++ b/assets/css/src/modal.styl
@@ -1,8 +1,12 @@
 modal_title_color = #cfcfcf
-modal_title_background_color = #222
 modal_highlight_background_color = #f1f1f1
-modal_content_background_color = #f0f0f0
-overlay_background_color = alpha(#000, 60%)
+modal_background_color = #fff
+modal_popup_margin = 30px
+modal_popup_margin_mobile = 10px
+modal_popup_padding = 30px
+modal_popup_padding_mobile = 12px
+modal_close_button_size = 23px
+overlay_background_color = rgba(0, 0, 0, 0.6)
 
 // hide scrollbars on background when a modal window opened
 body.mailpoet_modal_opened
@@ -22,6 +26,8 @@ body.mailpoet_modal_opened
   display: flex
   align-items: center
   justify-content: center
+  padding: modal_popup_margin
+  box-sizing: border-box
 
 .mailpoet_modal_highlight
   pointer-events: none
@@ -39,47 +45,53 @@ body.mailpoet_modal_opened
   background-color: overlay_background_color !important
   display: flex !important
 
-.mailpoet_modal_opened .mailpoet_modal_overlay
-  display: block
-
 // modal popup
 .mailpoet_popup
   z-index: 25
+  max-width: 100%
   margin: auto
+  animation: mailpoet_popup_fadein .5s
+
+@keyframes mailpoet_popup_fadein
+  from
+    opacity: 0
+  to
+    opacity: 1
 
 .mailpoet_popup_wrapper
-  background-color: modal_content_background_color
+  display: flex
+  flex-flow: column
+  background-color: modal_background_color
   overflow: hidden
   position: relative
   width: 100%
+  height: 100%
   z-index: 0
-  height: 96%
+  border-radius: 4px
+  box-shadow: 1px 2px 4px #343434
+  box-sizing: border-box
+  padding: modal_popup_padding
 
 .mailpoet_overlay_hidden .mailpoet_popup_wrapper
   border: 1px solid #333
 
-.mailpoet_popup_title
-  background-color: modal_title_background_color
-  border: 1px solid #333
-  height: 27px
-  margin: 0
-  padding: 0 30px 0 0
-
 .mailpoet_popup_title h2
-  color: modal_title_color
-  font-size: 12px
-  font-weight: normal
-  margin: 6px 0 0 10px
-  padding: 0
-  font-family: "Lucida Grande", Verdana, Arial, sans-serif
+  font-size: 23px;
+  font-weight: 600;
+  line-height: 29px;
+  margin: 0 (modal_close_button_size + 20) 0 0
 
 .mailpoet_popup_body
-  padding: 10px 10px 10px 10px
-  height: 92%
+  flex-grow: 1
+  position: relative
+  margin-top: 20px
 
   .button + .button
     margin-left: 10px
 
+.mailpoet_popup_has_title .mailpoet_popup_body
+  margin-top: 30px
+
 // modal panel
 .mailpoet_modal_overlay.mailpoet_panel_overlay
   top: 32px
@@ -115,7 +127,6 @@ body.mailpoet_modal_opened
 
 .mailpoet_panel_title h2
   color: modal_title_color
-  background-color: modal_title_background_color
   border-left: 1px solid #444
   border-right: 1px solid #444
   font-size: 1em
@@ -130,24 +141,33 @@ body.mailpoet_modal_opened
 
 // modal button
 .mailpoet_modal_close
-  background: url(../img/modal_close_button.png) 7px 7px no-repeat
-  border: 0
   cursor: pointer
-  height: 30px
+  position: absolute
   overflow: hidden
   padding: 0
-  position: absolute
-  width: 30px
   z-index: 2
   outline: 0 none
 
+  svg
+    opacity: .5
+    stroke: #979797
+
+    &:hover
+      stroke: #636363
+
 .mailpoet_popup .mailpoet_modal_close
-  right: 0
-  top: 0
+  right: modal_popup_padding
+  top: modal_popup_padding
+  width: modal_close_button_size
+  height: modal_close_button_size
+  padding: 3px 0
 
 .mailpoet_panel .mailpoet_modal_close
-  right: 10px
-  top: 7px
+  width: 16px
+  height: 16px
+  right: 20px
+  top: 20px
+  padding: 2px 0
 
 .mailpoet_modal_close:focus
   outline: 0 none
@@ -166,6 +186,23 @@ body.mailpoet_modal_opened
   text-align: right
 
 @media screen and (max-width: 782px)
+  .mailpoet_modal_overlay
+    padding: modal_popup_margin_mobile
+
+  .mailpoet_popup
+    width: 100%
+    min-width: auto !important
+
+  .mailpoet_popup_wrapper
+    padding: modal_popup_padding_mobile
+
+  .mailpoet_popup_title h2
+    margin-right: modal_close_button_size + 10
+
+  .mailpoet_popup .mailpoet_modal_close
+    top: modal_popup_padding_mobile
+    right: modal_popup_padding_mobile
+
   .mailpoet_modal_overlay.mailpoet_panel_overlay
     top: 46px
 
diff --git a/assets/css/src/newsletter_editor/components/sidebar.styl b/assets/css/src/newsletter_editor/components/sidebar.styl
index cc28a88398..c6697aaf19 100644
--- a/assets/css/src/newsletter_editor/components/sidebar.styl
+++ b/assets/css/src/newsletter_editor/components/sidebar.styl
@@ -128,24 +128,37 @@ $widget-icon-width = 30px
       display: none
 
 /* Browser preview modal */
+.mailpoet_browser_preview_wrapper
+  position: absolute
+  width: 100%
+  height: 100%
+  display: flex
+  flex-direction: column
+
 .mailpoet_browser_preview_toggle
+  flex: 0 1 auto
   height: 30px
   padding: 10px 0
   text-align: center
+  position: absolute
+  top: -30px
+  width: 100%
 
 .mailpoet_browser_preview_toggle > label
   display: inline-block
   margin: 0 5px
 
 .mailpoet_browser_preview_container
-  margin: auto
-  height: calc(100% - 60px)
+  flex: 1 1 auto
+  margin: 15px auto 0 auto
   transition: width 0.5s
-  border: 20px solid white
-  border-radius: 20px
   box-sizing: border-box
-  background: white
-  padding: 15px 0
+  height: 100%
+  padding: 20px
+  border: 1px solid #979797
+  border-radius: 20px
+  display: flex
+  flex-direction: column
 
 .mailpoet_browser_preview_container_desktop
   width: 100%
@@ -153,5 +166,15 @@ $widget-icon-width = 30px
 .mailpoet_browser_preview_container_mobile
   width: 350px
 
-.mailpoet_browser_preview_iframe
+// fix for https://bugs.chromium.org/p/chromium/issues/detail?id=765138
+// causing border on iframe to sometimes disappear when resizing
+.mailpoet_browser_preview_border
+  width: 100%
+  height: 100%
+  box-sizing: border-box
   border: 1px solid #c3c3c3
+
+.mailpoet_browser_preview_iframe
+  width: calc(100% - 1px)
+  margin: auto
+  display: block
diff --git a/assets/css/src/newsletter_editor/libraryOverrides.styl b/assets/css/src/newsletter_editor/libraryOverrides.styl
index 922981af99..4f7780c8ba 100644
--- a/assets/css/src/newsletter_editor/libraryOverrides.styl
+++ b/assets/css/src/newsletter_editor/libraryOverrides.styl
@@ -122,6 +122,9 @@ body
   margin: 19px
   padding: 0
 
+  .mailpoet_editor_settings h3
+    margin-top: 0
+
 .mailpoet_panel_wrapper
   background-color: $primary-background-color
   border: 1px solid $content-border-color
diff --git a/assets/img/modal_close_button.png b/assets/img/modal_close_button.png
deleted file mode 100644
index 6a48f46908..0000000000
Binary files a/assets/img/modal_close_button.png and /dev/null differ
diff --git a/assets/js/src/modal.js b/assets/js/src/modal.js
index ec810499e3..54fbd3e146 100644
--- a/assets/js/src/modal.js
+++ b/assets/js/src/modal.js
@@ -4,6 +4,11 @@ define('modal', ['mailpoet', 'jquery'],
     'use strict';
 
     var MailPoet = mp;
+    var closeModalImage =
+      '<svg viewBox="0 0 23 23" xmlns="http://www.w3.org/2000/svg">' +
+        '<path d="M21.454 1.546L1.546 21.454M1.546 1.546L21.454 21.454" stroke-width="3" stroke-linecap="round" />' +
+      '</svg>';
+
     /** *************************************************************************
     MailPoet Modal:
 
@@ -82,7 +87,7 @@ define('modal', ['mailpoet', 'jquery'],
         overlay: '<div id="mailpoet_modal_overlay" class="mailpoet_modal_overlay" style="display:none;"></div>',
         popup: '<div id="mailpoet_popup" class="mailpoet_popup" tabindex="-1">' +
         '<div class="mailpoet_popup_wrapper">' +
-        '<a href="javascript:;" id="mailpoet_modal_close" class="mailpoet_modal_close"></a>' +
+        '<a href="javascript:;" id="mailpoet_modal_close" class="mailpoet_modal_close">' + closeModalImage + '</a>' +
         '<div id="mailpoet_popup_title" class="mailpoet_popup_title"><h2></h2></div>' +
         '<div class="mailpoet_popup_body clearfix"></div>' +
         '</div>' +
@@ -93,7 +98,7 @@ define('modal', ['mailpoet', 'jquery'],
         '<div id="mailpoet_modal_loading_3" class="mailpoet_modal_loading mailpoet_modal_loading_3"></div>' +
         '</div>',
         panel: '<div id="mailpoet_panel" class="mailpoet_panel">' +
-        '<a href="javascript:;" id="mailpoet_modal_close" class="mailpoet_modal_close"></a>' +
+        '<a href="javascript:;" id="mailpoet_modal_close" class="mailpoet_modal_close">' + closeModalImage + '</a>' +
         '<div class="mailpoet_panel_wrapper" tabindex="-1">' +
         '<div class="mailpoet_panel_body clearfix"></div>' +
         '</div>' +
@@ -142,6 +147,8 @@ define('modal', ['mailpoet', 'jquery'],
             jQuery('#mailpoet_modal_overlay')
               .append(modal(this.options));
             // set title
+            jQuery('#mailpoet_popup')
+              .toggleClass('mailpoet_popup_has_title', Boolean(this.options.title));
             jQuery('#mailpoet_popup_title h2')
               .html(this.options.title);
           } else if (this.options.type === 'panel') {
@@ -312,14 +319,21 @@ define('modal', ['mailpoet', 'jquery'],
         switch (this.options.type) {
           case 'popup':
             // set popup dimensions
-            jQuery('#mailpoet_popup').css({
-              width: this.options.width,
-              height: this.options.height
-            });
-            // set popup wrapper height
-            jQuery('#mailpoet_popup_wrapper').css({
-              height: this.options.height
-            });
+            if (this.options.width && this.options.width !== 'auto') {
+              jQuery('#mailpoet_popup').css({
+                width: this.options.width
+              });
+            }
+
+            if (this.options.height && this.options.height !== 'auto') {
+              jQuery('#mailpoet_popup_wrapper').css({
+                height: this.options.height
+              });
+              jQuery('#mailpoet_popup').css({
+                height: this.options.height
+              });
+            }
+
             if (this.options.minWidth) {
               jQuery('#mailpoet_popup').css({ minWidth: this.options.minWidth });
             }
@@ -398,6 +412,9 @@ define('modal', ['mailpoet', 'jquery'],
           this.focus();
         }
 
+        // reset any possible scroll from previous modal
+        jQuery('#mailpoet_modal_overlay').scrollTop(0);
+
         // set popup as opened
         this.opened = true;
 
@@ -441,10 +458,12 @@ define('modal', ['mailpoet', 'jquery'],
       },
       showOverlay: function () {
         jQuery('#mailpoet_modal_overlay').show();
+        jQuery('body').addClass('mailpoet_modal_opened');
         return this;
       },
       hideOverlay: function () {
         jQuery('#mailpoet_modal_overlay').hide();
+        jQuery('body').removeClass('mailpoet_modal_opened');
         return this;
       },
       popup: function (opts) {
diff --git a/assets/js/src/newsletter_editor/components/sidebar.js b/assets/js/src/newsletter_editor/components/sidebar.js
index eea0319406..8fe70b9ebd 100644
--- a/assets/js/src/newsletter_editor/components/sidebar.js
+++ b/assets/js/src/newsletter_editor/components/sidebar.js
@@ -270,13 +270,12 @@ define([
         });
 
         this.previewView.render();
-        this.previewView.$el.css('height', '100%');
 
         MailPoet.Modal.popup({
           template: '',
           element: this.previewView.$el,
-          width: '95%',
-          height: '94%',
+          minWidth: '95%',
+          height: '100%',
           title: MailPoet.I18n.t('newsletterPreview'),
           onCancel: function () {
             this.previewView.destroy();
@@ -351,6 +350,7 @@ define([
   });
 
   Module.NewsletterPreviewView = Marionette.View.extend({
+    className: 'mailpoet_browser_preview_wrapper',
     getTemplate: function () { return window.templates.newsletterPreview; },
     events: function () {
       return {
diff --git a/assets/js/src/newsletter_editor/tutorial.jsx b/assets/js/src/newsletter_editor/tutorial.jsx
index 9968ac4a69..23af757d42 100644
--- a/assets/js/src/newsletter_editor/tutorial.jsx
+++ b/assets/js/src/newsletter_editor/tutorial.jsx
@@ -10,7 +10,8 @@ const displayTutorial = () => {
     return;
   }
   MailPoet.Modal.popup({
-    template: `<div class="mailpoet_drag_and_drop_tutorial"><h2>${MailPoet.I18n.t('tutorialVideoTitle')}</h2><video style="height:640px;" src="${window.config.dragDemoUrl}" controls autoplay></video></div>`,
+    title: MailPoet.I18n.t('tutorialVideoTitle'),
+    template: `<div class="mailpoet_drag_and_drop_tutorial"><video style="height:640px;" src="${window.config.dragDemoUrl}" controls autoplay></video></div>`,
     onCancel: () => {
       MailPoet.Ajax.post({
         api_version: window.mailpoet_api_version,
diff --git a/views/newsletter/templates/components/newsletterPreview.hbs b/views/newsletter/templates/components/newsletterPreview.hbs
index cfe0214f71..183087ebee 100644
--- a/views/newsletter/templates/components/newsletterPreview.hbs
+++ b/views/newsletter/templates/components/newsletterPreview.hbs
@@ -7,5 +7,7 @@
   </label>
 </div>
 <div class="mailpoet_browser_preview_container {{#ifCond previewType '==' 'mobile'}}mailpoet_browser_preview_container_mobile{{else}}mailpoet_browser_preview_container_desktop{{/ifCond}}">
-  <iframe class="mailpoet_browser_preview_iframe" src="{{ previewUrl }}" width="{{ width }}" height="{{ height }}"></iframe>
-</div>
\ No newline at end of file
+  <div class="mailpoet_browser_preview_border">
+    <iframe class="mailpoet_browser_preview_iframe" src="{{ previewUrl }}" width="{{ width }}" height="{{ height }}"></iframe>
+  </div>
+</div>