diff --git a/addons/web/static/src/less/navbar.less b/addons/web/static/src/less/navbar.less
index 8d68773ecff..d000ed4f469 100644
--- a/addons/web/static/src/less/navbar.less
+++ b/addons/web/static/src/less/navbar.less
@@ -2,17 +2,17 @@
 .o_main_navbar {
     position: relative;
     height: @odoo-navbar-height;
-    border: 1px solid @odoo-navbar-inverse-link-hover-bg;
+    border-bottom: 1px solid @odoo-navbar-inverse-link-hover-bg;
     background-color: @odoo-brand-primary;
     color: white;
 
     > a, > button {
         float: left;
-        width: @odoo-navbar-height - 2;
-        height: @odoo-navbar-height - 2;
+        width: @odoo-navbar-height;
+        height: @odoo-navbar-height;
         border: none;
         padding: 0;
-        line-height: @odoo-navbar-height - 2;
+        line-height: @odoo-navbar-height;
         background-color: transparent;
         text-align: center;
         color: inherit;
@@ -37,7 +37,7 @@
         color: white;
         font-size: 22px;
         font-weight: 500;
-        line-height: @odoo-navbar-height - 2;
+        line-height: @odoo-navbar-height;
 
         @media (max-width: @screen-xs-max) {
             float: none;
@@ -65,10 +65,10 @@
 
             > a {
                 display: block;
-                height: @odoo-navbar-height - 2;
+                height: @odoo-navbar-height;
                 padding: 0 10px;
                 color: white;
-                line-height: @odoo-navbar-height - 2;
+                line-height: @odoo-navbar-height;
 
                 &:hover {
                     background-color: @odoo-navbar-inverse-link-hover-bg;
@@ -81,7 +81,7 @@
 
             &.o_extra_menu_items {
                 > a {
-                    width: @odoo-navbar-height - 2;
+                    width: @odoo-navbar-height;
                     text-align: center;
                 }
                 &.open > ul {
@@ -176,8 +176,8 @@
             }
 
             &.o_menu_systray {
-                .o-position-absolute(0px, @odoo-navbar-height - 2, auto, @odoo-navbar-height - 2);
-                height: @odoo-navbar-height - 2;
+                .o-position-absolute(0px, @odoo-navbar-height, auto, @odoo-navbar-height);
+                height: @odoo-navbar-height;
                 text-align: right;
 
                 > li {
diff --git a/addons/web_editor/static/src/js/snippets.options.js b/addons/web_editor/static/src/js/snippets.options.js
index c3c97505305..68301312cd5 100644
--- a/addons/web_editor/static/src/js/snippets.options.js
+++ b/addons/web_editor/static/src/js/snippets.options.js
@@ -329,6 +329,8 @@ odoo.define('web_editor.snippets.options', function (require) {
                     if (change) {
                         self.on_resize(compass, beginClass, current);
                         self.buildingBlock.cover_target(self.$overlay, self.$target);
+                        self.adapt_margin_preview_size();
+                        $handle.addClass('oe_handle_change');
                     }
                 };
 
@@ -343,10 +345,13 @@ odoo.define('web_editor.snippets.options', function (require) {
                         }
                     },0);
                     self.$target.removeClass("resize_editor_busy");
+                    $handle.removeClass('oe_handle_change');
 
                     if (compass === "size") {
                         $fixed_size.addClass("active");
                         $auto_size.removeClass("active");
+                    } else {
+                        self._highlight_margins_preview(300);
                     }
                 };
                 $body.mousemove(body_mousemove);
@@ -372,10 +377,14 @@ odoo.define('web_editor.snippets.options', function (require) {
         on_focus : function () {
             this._super();
             this.change_cursor();
+            this.adapt_margin_preview_size();
         },
 
         change_cursor : function () {
             var _class = this.$target.attr("class") || "";
+            var $handle_s = this.$overlay.find('.oe_handle.s');
+            var $handle_n = this.$overlay.find('.oe_handle.n');
+            var $handle_w = this.$overlay.find('.oe_handle.w');
 
             var col = _class.match(/col-md-([0-9-]+)/i);
             col = col ? +col[1] : 0;
@@ -387,20 +396,44 @@ odoo.define('web_editor.snippets.options', function (require) {
             if (col+offset >= 12) overlay_class+= " block-e-right";
             if (col === 1) overlay_class+= " block-w-right block-e-left";
             if (offset === 0) overlay_class+= " block-w-left";
+            $handle_w.toggleClass('oe_handle_centered', offset > 0).toggleClass('o_handle_edited', offset >= 1 );
 
             var mb = _class.match(/mb([0-9-]+)/i);
             mb = mb ? +mb[1] : parseInt(this.$target.css('margin-bottom'));
             if (mb >= 128) overlay_class+= " block-s-bottom";
             else if (!mb) overlay_class+= " block-s-top";
+            $handle_s.toggleClass('oe_handle_centered', mb >= 32).toggleClass('o_handle_edited', mb > 0 );
 
             var mt = _class.match(/mt([0-9-]+)/i);
             mt = mt ? +mt[1] : parseInt(this.$target.css('margin-top'));
             if (mt >= 128) overlay_class+= " block-n-top";
             else if (!mt) overlay_class+= " block-n-bottom";
+            $handle_n.toggleClass('oe_handle_centered', mt >= 32).toggleClass('o_handle_edited', mt > 0 );
 
             this.$overlay.attr("class", overlay_class);
         },
 
+        adapt_margin_preview_size : function () {
+            var self = this,
+                ml = this.$target.css('margin-left');
+            _.each(this.$overlay.find(".oe_handle.n, .oe_handle.s"), function (handle) {
+                var $handle = $(handle);
+                var direction = $handle.hasClass('n') ? 'top': 'bottom';
+                $handle.height(self.$target.css('margin-' + direction ));
+            });
+            this.$overlay.find(".oe_handle.w").css({
+                width: ml,
+                left: '-' + ml
+            });
+        },
+
+        _highlight_margins_preview: function (timing) {
+            var handlers = this.$overlay.find(".oe_handle.n, .oe_handle.s, .oe_handle.w");
+            handlers.addClass('oe_handle_active').delay(timing).queue(function(){
+                handlers.removeClass('oe_handle_active').dequeue();
+            });
+        },
+
         /* on_resize
         *  called when the box is resizing and the class change, before the cover_target
         *  @compass: resize direction : 'n', 's', 'e', 'w'
diff --git a/addons/web_editor/static/src/js/widgets.js b/addons/web_editor/static/src/js/widgets.js
index 7e0a3ad103a..240a61b0458 100644
--- a/addons/web_editor/static/src/js/widgets.js
+++ b/addons/web_editor/static/src/js/widgets.js
@@ -471,8 +471,8 @@ var ImageDialog = Widget.extend({
 
         this.$('.existing-attachments').replaceWith(QWeb.render('web_editor.dialog.image.existing.content', {rows: rows}));
         this.parent.$('.pager')
-            .find('li.previous').toggleClass('disabled', (from === 0)).end()
-            .find('li.next').toggleClass('disabled', (from + per_screen >= records.length));
+            .find('li.previous a').toggleClass('disabled', (from === 0)).end()
+            .find('li.next a').toggleClass('disabled', (from + per_screen >= records.length));
 
         this.$el.find('.o_image').each(function () {
             var $div = $(this);
diff --git a/addons/web_editor/static/src/less/web_editor.ui.components.less b/addons/web_editor/static/src/less/web_editor.ui.components.less
index 826f7b0618d..ac93545c87b 100644
--- a/addons/web_editor/static/src/less/web_editor.ui.components.less
+++ b/addons/web_editor/static/src/less/web_editor.ui.components.less
@@ -1,49 +1,56 @@
 // INPUTS
+@o-switch-size: 2ex;
+@o-switch-inactive-color: @gray-lighter;
+
 .o_switch {
     .o-flex-display();
     .o-align-items(center);
     font-weight: normal;
-    height: 1.5em;
     cursor: pointer;
 
     > input {
         display: none;
 
         + span {
-            background: #bababa;
-            border-radius: 0.4em;
-            height: 1em;
-            width: 2.5em;
+            background-color: @o-switch-inactive-color;
+            box-shadow: inset 0 0 0px 1px darken(@o-switch-inactive-color,10%);
+            border-radius: 100rem;
+            height: @o-switch-size;
+            width: @o-switch-size * 1.8;
             margin-right: 0.5em;
             display: inline-block;
             .transition(all 0.3s @o-we-md-ease);
+
             &:after {
                 content: "";
-                background: #fafafa;
+                background: @o-we-color-paper;
                 display: block;
-                width: 1.5em;
-                height: 1.5em;
-                border-radius: 100em;
-                margin-top: -0.3em;
-                margin-left: -0.1em;
+                width: @o-switch-size - 0.2;
+                height: @o-switch-size - 0.2;
+                margin-top: 0.1ex;
+                margin-left: 0.3ex;
+                border-radius: 100rem;
                 .transition(all 0.3s @o-we-md-ease);
-                box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+                box-shadow: 0 1px 1px darken(@o-switch-inactive-color,35%), inset 0 0 0 1px lighten(@o-switch-inactive-color,10%);
             }
         }
 
         &:checked + span {
-            background-color: rgb(142, 224, 212);
-            background-color: transparentize(@odoo-brand-optional, 0.5);
+            box-shadow: none;
+            .o-linear-gradient(0deg, @o-we-color-success, darken(@o-we-color-success, 10%));
+
             &:after {
-                background-color: @odoo-brand-optional;
-                margin-left: 1.1em;
+                margin-left: (@o-switch-size*1.8 - @o-switch-size) + 0.1;
             }
         }
     }
-    &:hover > input + span:after {
-        background-color: mix(@odoo-brand-optional, #fafafa);
-    }
 }
+
+.dropdown-menu label .o_switch {
+    margin: 0;
+    padding: 2px 0;
+}
+
 .text-input-group {
     position: relative;
     margin-bottom: 45px;
@@ -208,16 +215,15 @@ body .modal {
         width: 80%;
 
         .modal-body {
+            .nav-tabs .active > a[href="#editor-media-icon"] {
+                background-color: white;
+            }
+
             li.search {
                 float: right;
 
-                ul.pager {
-                    margin: 0;
-                    > li > a {
-                        border-radius: 0px;
-                        margin-left: 2px;
-                        padding: 6px 14px;
-                    }
+                ul.pager li:last-child{
+                    margin-left: 2px;
                 }
                 .form-group {
                     position: relative;
@@ -233,6 +239,7 @@ body .modal {
             }
 
             .well {
+                border-color: @gray-lighter;
                 border-top-width: 0;
 
                 label {
diff --git a/addons/web_editor/static/src/less/web_editor.ui.less b/addons/web_editor/static/src/less/web_editor.ui.less
index 3ba3621db9f..1e44204c906 100644
--- a/addons/web_editor/static/src/less/web_editor.ui.less
+++ b/addons/web_editor/static/src/less/web_editor.ui.less
@@ -299,7 +299,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
 
 // MANIPULATORS
 #oe_manipulators {
-    @odoo-handle-edge-size: 8px;
+    @odoo-handle-edge-size: 1px;
     @odoo-handle-border-width: 1px;
 
     // SNIPPET MANIPULATORS
@@ -534,34 +534,78 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
         // HANDLES
         > .oe_handles {
             @o-handles-offset-to-hide: 10000px;
+            @o-handless-accent-color: #00e2ff;
             .o-position-absolute(-@o-handles-offset-to-hide, 0, auto, 0);
 
-            > .oe_handle {
-                @o-handle-size: 18px;
+            &:hover > .oe_handle {
+                background-color: fade(@o-handless-accent-color, 5%);
+            }
 
+            > .oe_handle {
+                @o-handle-btn-size: 18px;
                 opacity: 0.5;
                 .o-transition(opacity, 400ms);
-                &:hover {
-                    opacity: 0.9;
+                border: 0 solid @o-handless-accent-color;
+
+                // MARGINS PREVIEW
+                &.n, &.s, &.w {
+                    position: relative;
+                    .o-transition(background, 0.3s);
+
+                    &.oe_handle_change, &.oe_handle_active, &:hover {
+                        background-color: fade(@o-handless-accent-color, 20%);
+                    }
+
+                    &.o_handle_edited {
+                        opacity: 0.9;
+
+                        &:after {
+                            color: white;
+                            border-color: darken(@o-handless-accent-color, 10%);
+                            background-color: darken(@o-handless-accent-color, 20%);
+                        }
+                    }
+
+                    &.oe_handle_change, &:hover {
+                        opacity: 1;
+
+                        &:before {
+                            .o-position-absolute(0, @left:50%);
+                            width: 1px;
+                            height: 100%;
+                            margin-left: -1px;
+                            background-color: fade(@o-handless-accent-color, 50%);
+                            content:'';
+                        }
+
+                        &.w:before {
+                            .o-position-absolute(50%,@left: 0);
+                            width: 100%;
+                            height: 1px;
+                        }
+
+                        &:after {
+                            border-color: darken(@o-handless-accent-color, 10%);
+                            background-color: darken(@o-handless-accent-color, 20%);
+                        }
+                    }
                 }
-                border: 0 dashed black;
 
                 &:after {
                     display: block;
-                    width: @o-handle-size;
-                    height: @o-handle-size;
+                    width: @o-handle-btn-size;
+                    height: @o-handle-btn-size;
                     border: solid 1px rgba(0, 0, 0, 0.2);
-                    line-height: @o-handle-size - 2;
+                    line-height: @o-handle-btn-size - 2;
                     font-size: 14px;
                     font-family: FontAwesome;
                     background-color: @o-we-color-light;
                     color: @o-we-color-text-light;
                 }
-                &:hover:after {
-                    background-color: @o-we-color-dark;
-                    color: white;
-                    box-shadow: 0 0 5px 3px rgba(255,255,255,0.7);
+                &:hover {
+                    opacity: 0.9;
                 }
+
                 &.w:after, &.e:after {
                     content: "\f07e";
                 }
@@ -570,14 +614,18 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
                 }
 
                 &.w {
-                    border-left-width: @odoo-handle-border-width;
+                    border-width: @odoo-handle-border-width;
+                    border-right-width: 0;
                     cursor: e-resize;
                     width: @odoo-handle-edge-size;
                     .o-position-absolute(@o-handles-offset-to-hide, auto, -@o-handles-offset-to-hide, 0);
 
                     &:after {
-                        .o-position-absolute(@top: 50%, @left: -@odoo-handle-border-width);
-                        margin-top: -@o-handle-size/2;
+                        .o-position-absolute(@top: 50%, @left: 50%);
+                        margin-top: -@o-handle-btn-size/2;
+                    }
+                    &.oe_handle_centered:after {
+                        margin-left: -@o-handle-btn-size/2;
                     }
                 }
                 &.e {
@@ -588,29 +636,33 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
 
                     &:after {
                         .o-position-absolute(@top: 50%, @right: -@odoo-handle-border-width);
-                        margin-top: -@o-handle-size/2;
+                        margin-top: -@o-handle-btn-size/2;
                     }
                 }
                 &.n {
                     border-top-width: @odoo-handle-border-width;
-                    cursor: s-resize;
-                    height: @odoo-handle-edge-size;
                     .o-position-absolute(@o-handles-offset-to-hide, 0, auto, 0);
 
                     &:after {
-                        .o-position-absolute(@left: 50%, @top: -@odoo-handle-border-width);
-                        margin-left: -@o-handle-size/2;
+                        .o-position-absolute(@left: 50%, @top: 50%);
+                        margin-left: -@o-handle-btn-size/2;
                     }
                 }
                 &.s {
                     border-bottom-width: @odoo-handle-border-width;
-                    cursor: n-resize;
-                    height: @odoo-handle-edge-size;
                     .o-position-absolute(auto, 0, -@o-handles-offset-to-hide, 0);
 
                     &:after {
-                        .o-position-absolute(@left: 50%, @bottom: -@odoo-handle-border-width);
-                        margin-left: -@o-handle-size/2;
+                        .o-position-absolute(@left: 50%, @bottom: 50%);
+                        margin-left: -@o-handle-btn-size/2;
+                    }
+                }
+                &.n, &.s {
+                    cursor: ns-resize;
+
+                    &.oe_handle_centered:after {
+                        .o-position-absolute(@left: 50%, @top: 50%);
+                        margin-top:  -@o-handle-btn-size/2;
                     }
                 }
 
@@ -689,17 +741,17 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
         &.block-e-left.block-e-right .e:after {
             display: none !important;
         }
-        &.block-s-top .s:after {
-            content: "" !important;
+        &.block-s-bottom .s, &.block-n-top .n {
+            cursor: n-resize!important;
+            &:after {
+                content: "\f062" !important;
+            }
         }
-        &.block-s-bottom .s:after {
-            content: "" !important;
-        }
-        &.block-n-top .n:after {
-            content: "" !important;
-        }
-        &.block-n-bottom .n:after {
-            content: "" !important;
+        &.block-s-top .s, &.block-n-bottom .n {
+            cursor: s-resize!important;
+            &:after {
+                content: "\f063" !important;
+            }
         }
     }
 }
diff --git a/addons/web_editor/static/src/less/web_editor.variables.less b/addons/web_editor/static/src/less/web_editor.variables.less
index 327befe5438..188d62b955d 100644
--- a/addons/web_editor/static/src/less/web_editor.variables.less
+++ b/addons/web_editor/static/src/less/web_editor.variables.less
@@ -9,7 +9,7 @@
 @o-we-color-divider: #33363e;
 @o-we-color-light: #4e525b;
 @o-we-color-normal: #50545d;
-@o-we-color-paper: #fbfbfd;
+@o-we-color-paper: #fcfcfc;
 @o-we-color-text-normal: #999999;
 @o-we-color-text-light: #d4d5d7;
 @o-we-color-danger: #e6586c;
@@ -115,6 +115,12 @@
             outline: none!important;
         }
     }
+
+    .label {
+        &:hover a, a {
+            color: #fff;
+        }
+    }
 }
 
 .o-w-preserve-forms() {
@@ -128,6 +134,13 @@
         background-color: #fff;
         border-radius: 0;
     }
+
+    select.form-control {
+        .o-appearance(none);
+        background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPScxLjEnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZycgeG1 sbnM6eGxpbms9J2h0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsnIHdpZHRoPScyNCcgaGVpZ2 h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0Jz48cGF0aCBpZD0nc3ZnXzEnIGQ9J203LjQwNiw3L jgyOGw0LjU5NCw0LjU5NGw0LjU5NCwtNC41OTRsMC40MDYsMS40MDZsLTUsNC43NjZsLTUsLTQu NzY2bDAuNDA2LC0xLjQwNnonIGZpbGw9JyM4ODgnLz48L3N2Zz4=');
+        background-position: 100% 65%;
+        background-repeat: no-repeat;
+    }
 }
 
 .o-w-preserve-modals() {
@@ -146,6 +159,31 @@
     }
 }
 
+.o-w-preserve-tabs() {
+    .nav-tabs {
+        border-bottom: 1px solid @gray-lighter;
+
+        > li  {
+            > a {
+                line-height: 1.42857143;
+                color: @o-we-color-light;
+                &:hover {
+                    border-color: @gray-lighter;
+                }
+            }
+
+            &.active > a {
+                &, &:hover, &:focus {
+                    color: @o-we-color-normal;
+                    background-color: @o-we-color-paper;
+                    border-color: @gray-lighter;
+                    border-bottom-color: transparent;
+                }
+            }
+        }
+    }
+}
+
 .o-w-preserve-btn() {
     .btn:not(.o_btn_preview) {
         border-width: 1px;
@@ -155,11 +193,9 @@
 
         &.btn-primary {
             .button-variant(white, @odoo-brand-optional, darken(@odoo-brand-optional,5%));
-            text-transform: uppercase;
         }
         &.btn-default {
-            .button-variant(@odoo-brand-optional, white, @o-we-color-text-light);
-            text-transform: uppercase;
+            .button-variant(@o-we-color-normal, white, @o-we-color-text-light);
         }
         &.btn-link {
             .button-variant(@odoo-brand-optional, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
diff --git a/addons/web_editor/static/src/xml/editor.xml b/addons/web_editor/static/src/xml/editor.xml
index e8fdacc42d3..39bb389f1de 100644
--- a/addons/web_editor/static/src/xml/editor.xml
+++ b/addons/web_editor/static/src/xml/editor.xml
@@ -53,11 +53,11 @@
             <li><a href="#editor-media-video" data-toggle="tab">Video</a></li>
             <li class="search">
                 <ul class="pager mb0 mt0">
-                    <li class="previous disabled">
-                        <a href="#">← Previous</a>
+                    <li class="previous">
+                        <a class="btn btn-default disabled" href="#"><i class="fa fa-angle-left"/>&#32;Previous</a>
                     </li>
-                    <li class="next disabled">
-                        <a href="#">Next →</a>
+                    <li class="next">
+                        <a class="btn btn-default disabled" href="#">Next&#32;<i class="fa fa-angle-right"/></a>
                     </li>
                 </ul>
             </li>
@@ -202,16 +202,16 @@
                     <button class="btn btn-default">Preview</button>
                 </div>
             </div>
-            <div id="video-preview" style="width: 450px; margin: 0 auto;">
+            <div id="video-preview">
                 <div class="media_iframe_video">
                     <div class="media_iframe_video_size"/>
                     <iframe allowfullscreen="allowfullscreen" frameborder="0" src=""/>
                 </div>
             </div>
-            <div class="text-center mt32">
+            <div class="text-center mt8">
                 <div class="checkbox">
                     <label title="The feature might not be supported for every video type">
-                        <input id="autoplay" type="checkbox"/>Autoplay</label>
+                        <input id="autoplay" style="margin-right:5px" type="checkbox"/>Autoplay</label>
                 </div>
             </div>
         </form>
diff --git a/addons/web_planner/static/src/less/web_planner_common.less b/addons/web_planner/static/src/less/web_planner_common.less
index 043bdbb6528..cf6c20da7b3 100644
--- a/addons/web_planner/static/src/less/web_planner_common.less
+++ b/addons/web_planner/static/src/less/web_planner_common.less
@@ -33,7 +33,7 @@
     > .progress {
         width: 70px;
         height: @planner-height;
-        margin: floor((@odoo-navbar-height - 2 - @planner-height)/2) 10px 0;
+        margin: floor((@odoo-navbar-height - @planner-height)/2) 10px 0;
         cursor: pointer;
 
         > .progress-bar {
diff --git a/addons/website/static/src/js/website.contentMenu.js b/addons/website/static/src/js/website.contentMenu.js
index 3a9a5cbe3b9..70f35871e74 100644
--- a/addons/website/static/src/js/website.contentMenu.js
+++ b/addons/website/static/src/js/website.contentMenu.js
@@ -204,7 +204,8 @@ var EditMenuDialog = widget.Dialog.extend({
         this.flat = this.flatenize(menu);
         this.to_delete = [];
         this._super(parent, _.extend({}, {
-            title: _t("Edit Menu")
+            title: _t("Edit Menu"),
+            size: 'medium',
         }, options || {}));
     },
     start: function () {
@@ -332,6 +333,8 @@ var MenuEntryDialog = widget.LinkDialog.extend({
                 self.$('#o_link_dialog_url_input').closest('.form-group').toggle();
             });
         }
+        this.$modal.find('.modal-lg').removeClass('modal-lg')
+                   .find('.col-md-8').removeClass('col-md-8').addClass('col-xs-12');
 
         return this._super.apply(this, arguments);
     },
diff --git a/addons/website/static/src/js/website.seo.js b/addons/website/static/src/js/website.seo.js
index a05fc4a5883..93b434a5f44 100644
--- a/addons/website/static/src/js/website.seo.js
+++ b/addons/website/static/src/js/website.seo.js
@@ -23,10 +23,10 @@ ajax.loadXML('/website/static/src/xml/website.seo.xml', qweb);
 
 function analyzeKeyword(htmlPage, keyword) {
     return  htmlPage.isInTitle(keyword) ? {
-                title: 'label label-primary',
+                title: 'label label-success',
                 description: "This keyword is used in the page title",
             } : htmlPage.isInDescription(keyword) ? {
-                title: 'label label-info',
+                title: 'label label-primary',
                 description: "This keyword is used in the page description",
             } : htmlPage.isInBody(keyword) ? {
                 title: 'label label-info',
@@ -202,6 +202,7 @@ var KeywordList = Widget.extend({
             keyword.on('removed', self, function () {
                self.trigger('list-not-full');
                self.trigger('removed', word);
+               self.trigger('content-updated', true);
             });
             keyword.on('selected', self, function (word, language) {
                 self.trigger('selected', word, language);
@@ -211,6 +212,7 @@ var KeywordList = Widget.extend({
         if (self.isFull()) {
             self.trigger('list-full');
         }
+        self.trigger('content-updated');
     },
 });
 
@@ -392,10 +394,14 @@ var Configurator = Dialog.extend({
         this.keywordList.on('selected', self, function (word, language) {
             self.keywordList.add(word, language);
         });
-        this.keywordList.appendTo(this.$('.js_seo_keywords_list'));
+        this.keywordList.on('content-updated', self, function (removed) {
+            self.updateTable(removed);
+        });
+        this.keywordList.insertAfter(this.$('.table thead'));
         this.disableUnsavableFields();
         this.renderPreview();
         this.getLanguages();
+        this.updateTable();
     },
     getLanguages: function () {
         var self = this;
@@ -453,7 +459,7 @@ var Configurator = Dialog.extend({
         var keyword = _.isString(word) ? word : $input.val();
         var language = $language.val().toLowerCase();
         this.keywordList.add(keyword, language);
-        $input.val("");
+        $input.val("").focus();
     },
     update: function () {
         var self = this;
@@ -551,6 +557,12 @@ var Configurator = Dialog.extend({
         this.htmlPage.changeKeywords(this.keywordList.keywords());
         this._super.apply(this, arguments);
     },
+    updateTable : function (removed) {
+        var self = this,
+             val = removed ? (this.$el.find('tbody > tr').length - 1) : (this.$el.find('tbody > tr').length);
+        this.$('table').toggleClass('js_seo_has_content', val > 0 );
+        this.$el.scrollTop(self.$el[0].scrollHeight);
+    },
 });
 
 website.TopBar.include({
diff --git a/addons/website/static/src/less/website.ui.components.less b/addons/website/static/src/less/website.ui.components.less
index f7c1dbdfe94..384262752d1 100644
--- a/addons/website/static/src/less/website.ui.components.less
+++ b/addons/website/static/src/less/website.ui.components.less
@@ -2,6 +2,37 @@
 /// This file regroups the style of website UI components (edition modals, forms, ...).
 ///
 
+.o-w-close-icon(@size:12px, @color:#000, @color-hover:#000, @thickness: 1px, @opacity: 0.7, @opacity-hover: 1) {
+    color: transparent;
+    position: relative;
+    display: inline-block;
+    opacity: @opacity;
+    .square(@size);
+
+    &:hover, &:focus {
+        outline: none;
+        opacity: @opacity-hover;
+
+        &::after, &::before {
+            background: @color-hover;
+        }
+    }
+
+    &:after, &:before {
+        content: '';
+        margin-top: -1px;
+        background: @color;
+        .size(100%, @thickness);
+        .o-position-absolute(50%, @left:0);
+        .o-transform(rotate(45deg));
+    }
+
+    &:after {
+        .o-transform(rotate(-45deg));
+    }
+}
+
+
 // MODALS
 body .modal {
     &.o_website_modal {
@@ -12,6 +43,12 @@ body .modal {
         .o-w-preserve-btn();
         .o-w-preserve-wells();
         .o-w-preserve-modals();
+        .o-w-preserve-tabs();
+
+        button.close {
+            .o-w-close-icon(12px);
+            margin-right: -2px;
+        }
 
         .modal-content {
             .modal-header .o_subtitle {
@@ -23,6 +60,11 @@ body .modal {
                     .clearfix();
                 }
             }
+            .modal-footer {
+                .btn {
+                    text-transform: uppercase;
+                }
+            }
         }
 
         @media (min-width: @screen-sm-min) {
@@ -185,62 +227,171 @@ body .modal {
         }
     }
 
+    // TOP MENU EDITOR
+    .oe_menu_editor {
+        ul {
+            padding-left: 37px;
+        }
+
+        li {
+            margin-top: -1px;
+
+            .input-group-addon {
+                border-radius: 0;
+            }
+        }
+    }
+
     // SEO CONFIGURATION
     &.oe_seo_configuration {
-        li.oe_seo_preview_g {
-            line-height: 1.2;
-            font-size: small;
-            font-family: arial, sans-serif;
-            h3 {
-                font-size: medium;
+        #language-box {
+            padding-right: 25px;
+            background-color:white;
+            margin-left: -1px;
+        }
+
+        .table {
+            td {
+                vertical-align: middle;
+
+                &:first-child {
+                    padding-right: 15px;
+                    border-width: 0;
+                    width: 35%;
+                }
+
+                &:last-child {
+                    visibility: hidden;
+                }
             }
-            .r {
-                margin: 0;
-                font-size: 16px;
-                font-style: normal;
-                font-weight: normal;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                -webkit-text-overflow: ellipsis;
-                white-space: nowrap;
-                a {
-                    color: #1e0fbe;
-                    text-decoration: underline;
-                    text-transform: none;
-                    em {
-                        font-style: normal !important;
+
+            > tfoot {
+                display: none;
+            }
+
+            &.js_seo_has_content {
+                td {
+                    &:first-child {
+                        width: 55%;
+                        padding-right: 15px;
+                        border: 1px solid @o-we-color-text-light;
+                        text-align: right;
+                        background-color: @o-we-color-paper;
+
+                        @media screen and (min-width: @screen-md-min) {
+                            width: 38%;
+                        }
+                    }
+
+                    &:last-child {
+                        border: none;
+                        visibility: visible;
+                        padding-left: 15px;
+
+                        @media screen and (min-width: @screen-md-min) {
+                            padding-left: 50px;
+                        }
                     }
                 }
-            }
-            .s {
-                color: #444;
-                max-width: 42em;
-            }
-            li.oe_seo_preview_g {
-                &, .st {
-                    line-height: 1.24;
+
+                tbody {
+                    td {
+                        padding: 5px;
+                        .o-transition(padding, .3s);
+
+                        &:first-child {
+                            border-width: 0 1px;
+
+                            .label {
+                                position: relative;
+                                display: inline-block;
+                                padding: 7px 35px;
+                                font-size: 16px;
+                                font-weight: normal;
+
+                                .oe_remove {
+                                    .o-w-close-icon(10px, white, @o-we-color-danger, 2px);
+                                    .o-position-absolute(5px, 5px);
+                                }
+                            }
+                        }
+
+                        &:last-child {
+                            .label {
+                                display: block;
+                                font-size: 12px;
+                                font-weight: normal;
+                                opacity: 0.8;
+                                cursor: pointer;
+
+                                &:hover {
+                                    opacity: 1;
+                                }
+                            }
+                        }
+                    }
+
+                    tr {
+                        .o-animation(fadeInDownSmall, .3s);
+
+                        &:first-child {
+                            td:first-child {
+                                padding-top: 10px;
+                            }
+                        }
+
+                        &:last-child {
+                            td:first-child {
+                                padding-bottom: 10px;
+                                border-bottom-width: 1px;
+                            }
+                        }
+                    }
                 }
-                .kv, .slp {
-                    display: block;
-                    margin-bottom: 1px;
-                }
-                .f {
-                    color: #666;
-                    margin-bottom: 1px;
-                    cite {
-                        color: #006621;
-                        font-style: normal;
-                        font-size: 14px;
+
+                > tfoot {
+                    display: table-footer-group;
+
+                    hr {
+                        margin: 10px 0;
+                    }
+
+                    td, td:first-child {
+                        border: none;
+                        background: none;
                     }
                 }
             }
         }
-        @media (min-width: @screen-sm-min) {
-           .dl-horizontal dt {
-                min-width: 160px;
-                width: auto;
-           }
-       }
+
+        li.oe_seo_preview_g {
+            list-style: none;
+            font-family: arial, sans-serif;
+
+            .r {
+                cursor: pointer;
+                color:#1a0dab;
+                font-size: 18px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                -webkit-text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+
+            .s {
+                font-size: 13px;
+                line-height: 18px;
+                color: #545454;
+                .kv {
+                    color: #006621;
+                    font-size: 14px;
+                    line-height: 18px;
+                }
+                .st {
+                    height: 50px;
+                }
+            }
+        }
     }
 }
 
diff --git a/addons/website/static/src/less/website.ui.less b/addons/website/static/src/less/website.ui.less
index b515ad40096..74ba4b59a63 100644
--- a/addons/website/static/src/less/website.ui.less
+++ b/addons/website/static/src/less/website.ui.less
@@ -29,12 +29,6 @@ body.o_connected_user {
 
             &[data-action="edit"], &[data-action="translate"] {
                 .button-variant(white, @odoo-brand-optional, @odoo-brand-optional);
-
-                @media (max-width: @screen-xs-max) {
-                    &, &:hover, &:focus {
-                        outline: none;
-                    }
-                }
             }
 
             > .fa-plus, > .fa-pencil {
diff --git a/addons/website/static/src/less/website.wrapwrap.less b/addons/website/static/src/less/website.wrapwrap.less
index 141b08e4fbd..0e422f3faea 100644
--- a/addons/website/static/src/less/website.wrapwrap.less
+++ b/addons/website/static/src/less/website.wrapwrap.less
@@ -179,9 +179,15 @@ hr {
 // HEADER NAV BAR
 .navbar.navbar-static-top {
     margin-bottom: 0;
-    ul.nav > li.divider {
-        .o-w-fill-navbar();
-        border-right: 1px solid @navbar-default-link-disabled-color;
+    ul.nav > li {
+        &.divider {
+            .o-w-fill-navbar();
+            border-right: 1px solid @navbar-default-link-disabled-color;
+        }
+
+        &.active + .divider {
+            visibility: hidden;
+        }
     }
 }
 ul.nav-stacked > li > a {
diff --git a/addons/website/static/src/xml/website.contentMenu.xml b/addons/website/static/src/xml/website.contentMenu.xml
index fa822226b07..d7fa51e1ad8 100644
--- a/addons/website/static/src/xml/website.contentMenu.xml
+++ b/addons/website/static/src/xml/website.contentMenu.xml
@@ -40,15 +40,13 @@
             <t t-call="website.contentMenu.dialog.submenu"/>
         </t>
     </ul>
-    <div class="mt16">
-        <div class="pull-right text-muted">
+    <div class="mt32">
+        <small class="pull-right text-muted">
             Drag a menu to the right to create a sub-menu
-        </div>
-        <div>
-            <a href="#" class="js_add_menu">
-                <i class="fa fa-plus-circle"/> Add Menu Entry
-            </a>
-        </div>
+        </small>
+        <a href="#" class="js_add_menu">
+            <i class="fa fa-plus-circle"/> Add Menu Entry
+        </a>
     </div>
 </div>
 <t t-name="website.contentMenu.dialog.edit.link_menu_options">
diff --git a/addons/website/static/src/xml/website.seo.xml b/addons/website/static/src/xml/website.seo.xml
index 57f3cc76a31..807a9e5711c 100644
--- a/addons/website/static/src/xml/website.seo.xml
+++ b/addons/website/static/src/xml/website.seo.xml
@@ -12,55 +12,70 @@
     </t>
 
     <div t-name="website.seo_configuration">
+        <section class="row">
+            <div class="col-md-6">
+                <div class="form-horizontal mt16" role="form">
+                    <div class="form-group">
+                        <label for="seo_page_title" class="col-xs-3 control-label">Page title</label>
+                        <div class="col-xs-9">
+                            <input type="text" name="seo_page_title" class="form-control" maxlength="70" size="70"/>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label for="seo_page_description" class="col-xs-3 control-label">Description</label>
+                        <div class="col-xs-9">
+                            <textarea name="seo_page_description" class="form-control" style="max-width: 100%;height:145px;max-height:145px" t-att-maxlength="widget.maxDescriptionSize"/>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-6">
+                <h5 class="mt16">Preview <small>how your page will be listed on Google</small></h5>
+                <div class="well">
+                    <div class="panel mb0">
+                        <div class="panel-body">
+                            <div class="js_seo_preview"/>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <hr/>
         <div class="js_seo_tips" />
         <section class="js_seo_keywords_list">
-            <h3 class="page-header mt16">1. Define Keywords <small>describing your page content</small></h3>
-            <div class="form-horizontal" role="form">
-                <div class="form-group">
-                    <label for="seo_page_keywords" class="col-sm-3 control-label">Add keyword:</label>
-                    <div class="col-sm-4">
-                        <div>
-                          <input type="text" name="seo_page_keywords" class="form-control" maxlength="30"/>
-                        </div>
-                    </div>
-                </div>
-                <div class="row mt8">
-                    <label for="seo_page_language" class="col-sm-3 control-label">Language:</label>
-                    <div>
-                        <div class="col-sm-4">
-                            <select name="seo_page_language" id="language-box" class="form-control"/>
-                        </div>
-                    </div>
-                </div>
-                <div class="row mt8">
-                    <div class="col-md-10 text-center">
-                        <button data-action="add" class="btn btn-default" type="button">Add</button>
-                    </div>
-                </div>
-            </div>
-            <span class="text-muted">Most searched topics related to your keywords, ordered by importance:</span>
-            <!-- filled in JS -->
-        </section>
-        <section>
-            <h3 class="page-header">2. Reference Your Page <small>using above suggested keywords</small></h3>
-            <div class="form-horizontal mt16" role="form">
-                <div class="form-group">
-                    <label for="seo_page_title" class="col-sm-2 control-label">Title</label>
-                    <div class="col-sm-8">
-                        <input type="text" name="seo_page_title" class="form-control" maxlength="70" size="70"/>
-                    </div>
-                </div>
-                <div class="form-group">
-                    <label for="seo_page_description" class="col-sm-2 control-label">Description</label>
-                    <div class="col-sm-8">
-                        <textarea name="seo_page_description" class="form-control" rows="3" cols="70" t-att-maxlength="widget.maxDescriptionSize"/>
-                    </div>
-                </div>
-            </div>
-        </section>
-        <section>
-            <h3 class="page-header">3. Preview <small>how your page will be listed on Google</small></h3>
-            <div class="js_seo_preview"></div>
+            <h4 class="mt16">Define Keywords <small>describing your page content</small></h4>
+            <table class="table table-responsive">
+                <thead>
+                    <tr>
+                        <td>
+                            <div class="form-inline" role="form">
+                                <div class="input-group">
+                                    <input type="text" style="min-width:170px" name="seo_page_keywords" class="form-control" placeholder="Keyword" maxlength="30"/>
+                                    <span class="input-group-btn">
+                                        <select name="seo_page_language" id="language-box" class="btn form-control"/>
+                                    </span>
+                                    <span class="input-group-btn">
+                                        <button data-action="add" class="btn btn-success" type="button">Add</button>
+                                    </span>
+                                </div>
+                            </div>
+                        </td>
+                        <td>Suggested<br/><small class="text-muted">Most searched topics related to your keywords, ordered by importance:</small></td>
+                    </tr>
+                </thead>
+                <tfoot>
+                    <tr>
+                        <td/>
+                        <td><hr/>
+                            <small class="text-muted">Legend:</small>
+                            <span class="label label-default">Not used</span>
+                            <span class="label label-success">In title</span>
+                            <span class="label label-primary">In description</span>
+                            <span class="label label-info">In page's content</span>
+                        </td>
+                    </tr>
+                </tfoot>
+            </table>
         </section>
     </div>
 
@@ -71,9 +86,9 @@
     </t>
 
     <t t-name="website.seo_list">
-        <div>
+        <tbody>
             <!-- filled in JS -->
-        </div>
+        </tbody>
     </t>
 
     <t t-name="website.seo_tip">
@@ -83,16 +98,16 @@
     </t>
 
     <t t-name="website.seo_keyword">
-        <dl class="dl-horizontal mt8 mb8">
-            <dt>
+        <tr>
+            <td>
                 <span t-attf-title="#{ widget.tooltip() }" t-attf-class="oe_seo_keyword #{ widget.highlight() } js_seo_keyword" t-att-data-keyword="widget.keyword">
-                    <t t-raw="widget.keyword"/> <a href="#" class="oe_remove" data-action="remove-keyword">x</a>
+                    <t t-raw="widget.keyword"/> <a href="#" class="oe_remove" data-action="remove-keyword"/>
                 </span>
-            </dt>
-            <dd class="js_seo_keyword_suggestion">
+            </td>
+            <td class="js_seo_keyword_suggestion">
                 <!-- filled in JS -->
-            </dd>
-        </dl>
+            </td>
+        </tr>
     </t>
 
     <t t-name="website.seo_suggestion">
@@ -113,20 +128,10 @@
     <t t-name="website.seo_preview">
         <li class="oe_seo_preview_g">
             <div class="rc">
-                <span class="altcts"></span>
-                <h3 class="r">
-                    <a t-att-href="url">
-                        <em><t t-esc="widget.title"/></em>
-                    </a>
-                </h3>
+                <div class="r"><t t-esc="widget.title"/></div>
                 <div class="s">
-                    <div>
-                        <div class="f kv" style="white-space:nowrap">
-                            <cite><t t-esc="widget.url"/></cite>
-                        </div>
-                        <div class="f slp"></div>
-                        <span class="st"><t t-esc="widget.description"/></span>
-                    </div>
+                    <div class="kv"><t t-esc="widget.url"/></div>
+                    <div class="st"><t t-esc="widget.description"/></div>
                 </div>
             </div>
         </li>
diff --git a/addons/website/static/src/xml/website.xml b/addons/website/static/src/xml/website.xml
index 83cda18373f..e42405ce156 100644
--- a/addons/website/static/src/xml/website.xml
+++ b/addons/website/static/src/xml/website.xml
@@ -59,37 +59,40 @@
     </t>
 
     <t t-name="website.dependencies">
-        <t t-if="dependencies">
-            <p class="text-warning">
-              <strong>Warning!</strong> Don't forget to update all links referring to this page:
-            </p>
+        <div t-if="_.keys(dependencies).length > 0" class="panel panel-warning">
+            <div class="panel-heading"><strong>Warning!</strong> Don't forget to update all links referring to this page:</div>
+
             <t t-set='tid' t-value='0'/>
-            <div t-foreach="_.keys(dependencies)" t-as="type" class="mb16">
-                <a class="collapsed fa fa-caret-right" data-toggle="collapse" t-att-href="'#collapseDependencies'+tid" aria-expanded="false" t-att-aria-controls="'collapseDependencies'+tid">
-                  <t t-esc="type"/>:&amp;nbsp;
-                  <span class="text-muted"><t t-esc="dependencies[type].length"/> found(s)</span>
-                </a>
-                <div t-att-id="'collapseDependencies'+tid" class="collapse" aria-expanded="false" >
-                  <ul>
-                      <li t-foreach="dependencies[type]" t-as="error">
-                          <a t-if="!_.contains(['', '#', false,], error.link)" t-att-href="error.link">
-                              <t t-raw="error.text"/>
-                          </a>
-                          <t t-if="_.contains(['', '#', false,], error.link)" t-raw="error.text"/>
-                      </li>
-                  </ul>
+            <div class="panel-body">
+                <div t-foreach="_.keys(dependencies)" t-as="type">
+                    <a class="collapsed" data-toggle="collapse" t-att-href="'#collapseDependencies'+tid" aria-expanded="false" t-att-aria-controls="'collapseDependencies'+tid">
+                        <i class="fa fa-caret-right"/>
+                        <b><t t-esc="type"/></b>:&amp;nbsp;
+                        <span class="text-muted"><t t-esc="dependencies[type].length"/> found<span t-if="dependencies[type].length > 1">s</span></span>
+                    </a>
+                    <div t-att-id="'collapseDependencies'+tid" class="collapse" aria-expanded="false">
+                        <ul>
+                            <li t-foreach="dependencies[type]" t-as="error">
+                                <a t-if="!_.contains(['', '#', false,], error.link)" t-att-href="error.link">
+                                    <t t-raw="error.text"/>
+                                </a>
+                                <t t-if="_.contains(['', '#', false,], error.link)" t-raw="error.text"/>
+                            </li>
+                        </ul>
+                    </div>
+                    <t t-set='tid' t-value='tid+1'/>
                 </div>
-                <t t-set='tid' t-value='tid+1'/>
             </div>
-        </t>
+        </div>
     </t>
     <t t-name="website.delete_page">
         <t t-call="website.modal_base">
             <t t-call="website.dependencies" />
             <form class="form-horizontal" role="form" t-att-id="id">
                 <div class="form-group">
-                    <label class="col-sm-offset-2 col-sm-8 text-left alert alert-danger">
-                        <input type="checkbox" onchange="$('.btn-continue').prop('disabled', !this.checked)"/> I'm sure, I want to delete this page definitively
+                    <label class="col-xs-offset-1 col-xs-10 col-sm-offset-2 col-sm-8 mt16 text-center alert alert-danger">
+                        <input style="margin-right:10px" type="checkbox" onchange="$('.btn-continue').prop('disabled', !this.checked)"/>
+                        <span style="font-weight:normal"><br class="visible-xs"/><b>I'm sure</b>, I want to delete this page <b> <ins>definitively</ins></b></span>
                     </label>
                 </div>
             </form>
@@ -99,8 +102,8 @@
     <t t-name="website.rename_page">
         <t t-call="website.modal_base">
             <t t-call="website.dependencies" />
-            <div class="row">
-                <form class="form-horizontal alert alert-info" role="form" t-att-id="id">
+            <div class="well">
+                <form class="form-horizontal" role="form" t-att-id="id">
                     <div class="form-group mb0" >
                         <label for="new_name" class="control-label col-sm-4">Rename Page To:</label>
                         <div class="col-sm-8">