diff --git a/addons/payment/views/payment_templates.xml b/addons/payment/views/payment_templates.xml
index 1b6246290fa..45ad4a9b0e6 100644
--- a/addons/payment/views/payment_templates.xml
+++ b/addons/payment/views/payment_templates.xml
@@ -138,11 +138,18 @@
                     </div>
                 </t>
             </div>
+            <div t-if='back_button_txt' class="pull-left">
+                <a t-att-href="back_button_link or '#'" t-att-class="back_button_class or 'btn btn-lg btn-default'">
+                    <i t-if="back_button_icon_class" t-attf-class="fa {{back_button_icon_class}}"/>
+                    <t t-esc="back_button_txt"/>
+                </a>
+            </div>
             <div class="pull-right">
                 <button t-if="mode == 'payment'" id="o_payment_form_pay" type="submit" t-att-class="submit_class if submit_class else 'btn btn-primary btn-lg mb8 mt8'">
                     <t t-if="submit_txt">
-                        <i t-if="icon_class" t-attf-class="fa {{icon_class}}"/>
+                        <i t-if="icon_class and not icon_right" t-attf-class="fa {{icon_class}}"/>
                         <t t-esc="submit_txt"/>
+                        <i t-if="icon_class and icon_right" t-attf-class="fa {{icon_class}}"/>
                     </t>
                     <t t-else="">
                         <i class="fa fa-lock"> Pay</i>
diff --git a/addons/website_event_sale/static/src/js/website.tour.event_sale.js b/addons/website_event_sale/static/src/js/website.tour.event_sale.js
index fef2c038777..b3208db0040 100644
--- a/addons/website_event_sale/static/src/js/website.tour.event_sale.js
+++ b/addons/website_event_sale/static/src/js/website.tour.event_sale.js
@@ -70,10 +70,6 @@ tour.register('event_buy_tickets', {
             extra_trigger: 'a:has(.my_cart_quantity):contains(4),#cart_products input.js_quantity[value="3"]',
             trigger: '.btn-primary:contains("Process Checkout")'
         },
-        {
-            content: "Complete the checkout",
-            trigger: 'a[href="/shop/confirm_order"]:contains("Confirm")',
-        },
         {
             content: "Check that the subtotal is 5,500.00 USD", // this test will fail if the currency of the main company is not USD
             trigger: '#order_total_untaxed .oe_currency_value:contains("5,500.00")',
diff --git a/addons/website_sale/controllers/main.py b/addons/website_sale/controllers/main.py
index 3cf961ada09..5cb4f856a20 100644
--- a/addons/website_sale/controllers/main.py
+++ b/addons/website_sale/controllers/main.py
@@ -417,6 +417,10 @@ class WebsiteSale(http.Controller):
             'compute_currency': lambda price: from_currency.compute(price, to_currency),
             'suggested_products': order._cart_accessories()
         })
+        value['website_sale.short_cart_summary'] = request.env['ir.ui.view'].render_template("website_sale.short_cart_summary", {
+            'website_sale_order': order,
+            'compute_currency': lambda price: from_currency.compute(price, to_currency),
+        })
         return value
 
     # ------------------------------------------------------
@@ -615,16 +619,17 @@ class WebsiteSale(http.Controller):
                 values = kw
             else:
                 partner_id = self._checkout_form_save(mode, post, kw)
-
                 if mode[1] == 'billing':
                     order.partner_id = partner_id
                     order.onchange_partner_id()
+                    if not kw.get('use_same'):
+                        kw['callback'] = kw.get('callback') or (not order.only_services and '/shop/address')
                 elif mode[1] == 'shipping':
                     order.partner_shipping_id = partner_id
 
                 order.message_partner_ids = [(4, partner_id), (3, request.website.partner_id.id)]
                 if not errors:
-                    return request.redirect(kw.get('callback') or '/shop/checkout')
+                    return request.redirect(kw.get('callback') or '/shop/confirm_order')
 
         country = 'country_id' in values and values['country_id'] != '' and request.env['res.country'].browse(int(values['country_id']))
         country = country and country.exists() or def_country_id
@@ -638,6 +643,7 @@ class WebsiteSale(http.Controller):
             "states": country.get_website_sale_states(mode=mode[1]),
             'error': errors,
             'callback': kw.get('callback'),
+            'only_services': order and order.only_services,
         }
         return request.render("website_sale.address", render_values)
 
@@ -658,6 +664,10 @@ class WebsiteSale(http.Controller):
 
         values = self.checkout_values(**post)
 
+        if post.get('express'):
+            return request.redirect('/shop/confirm_order')
+
+
         values.update({'website_sale_order': order})
 
         # Avoid useless rendering if called in ajax
@@ -770,6 +780,7 @@ class WebsiteSale(http.Controller):
             return redirection
 
         render_values = self._get_shop_payment_values(order, **post)
+        render_values['only_services'] = order and order.only_services or False
 
         if render_values['errors']:
             render_values.pop('acquirers', '')
diff --git a/addons/website_sale/models/website.py b/addons/website_sale/models/website.py
index 9f43a6791d8..0a3b20d9070 100644
--- a/addons/website_sale/models/website.py
+++ b/addons/website_sale/models/website.py
@@ -158,6 +158,8 @@ class Website(models.Model):
         affiliate_id = request.session.get('affiliate_id')
         salesperson_id = affiliate_id if self.env['res.users'].sudo().browse(affiliate_id).exists() else request.website.salesperson_id.id
         addr = partner.address_get(['delivery', 'invoice'])
+        if len(partner.sale_order_ids):  # first = me
+            addr['delivery'] = partner.sale_order_ids[0].partner_shipping_id.id
         default_user_id = partner.parent_id.user_id.id or partner.user_id.id
         values = {
             'partner_id': partner.id,
@@ -228,7 +230,7 @@ class Website(models.Model):
 
             request.session['sale_order_id'] = sale_order.id
 
-            if request.website.partner_id.id != partner.id:
+            if request.website.partner_id.id != partner.id and partner.last_website_so_id.id != sale_order.id:
                 partner.write({'last_website_so_id': sale_order.id})
 
         if sale_order:
diff --git a/addons/website_sale/static/src/js/website_sale.js b/addons/website_sale/static/src/js/website_sale.js
index 1544f199088..ddbcf60319d 100644
--- a/addons/website_sale/static/src/js/website_sale.js
+++ b/addons/website_sale/static/src/js/website_sale.js
@@ -161,8 +161,7 @@ odoo.define('website_sale.website_sale', function (require) {
                     $q.parents('li:first').removeClass("hidden");
                 }
                 else {
-                    $q.parents('li:first').addClass("hidden");
-                    $('a[href*="/shop/checkout"]').addClass("hidden");
+                    window.location = '/shop/cart';
                 }
 
                 $q.html(data.cart_quantity).hide().fadeIn(600);
@@ -170,6 +169,7 @@ odoo.define('website_sale.website_sale', function (require) {
                 $('.js_quantity[data-line-id='+line_id+']').val(data.quantity).html(data.quantity);
 
                 $(".js_cart_lines").first().before(data['website_sale.cart_lines']).end().remove();
+                $(".js_cart_summary").first().before(data['website_sale.short_cart_summary']).end().remove();
 
                 if (data.warning) {
                     var cart_alert = $('.oe_cart').parent().find('#data_warning');
@@ -369,6 +369,10 @@ odoo.define('website_sale.website_sale', function (require) {
             $('input.js_variant_change, select.js_variant_change', this).first().trigger('change');
         });
 
+        $('.oe_website_sale').on('click', '.show_coupon', function(e) {
+            $(e.currentTarget).hide();
+            $('.coupon_form').removeClass('hidden');
+        });
         $('.oe_cart').on('click', '.js_change_shipping', function() {
           if (!$('body.editor_enable').length) { //allow to edit button text with editor
             var $old = $('.all_shipping').find('.panel.border_primary');
@@ -460,6 +464,23 @@ odoo.define('website_sale.website_sale', function (require) {
         }
         $("select[name='country_id']").change();
     });
+    if ($('#checkbox_cgv').length) {
+        $('#checkbox_cgv').trigger('change');
+    }
+    $('#shipping_use_same').on('change', function(e) {
+        $('.ship_to_other').toggle(!$(e.currentTarget).prop('checked'));
+    });
+
+    $('.toggle_summary').on('click', function(e) {
+        $('.toggle_summary_div').toggleClass('hidden');
+        $('.toggle_summary_div').removeClass('visible-lg');
+    });
+
+    core.bus.on('resize', this, function() {
+        if (config.device.size_class === config.device.SIZES.LG) {
+            $('.toggle_summary_div').addClass('visible-lg');
+        }
+    });
 
     // Deactivate image zoom for mobile devices, since it might prevent users to scroll
     if (!config.device.isMobile) {
diff --git a/addons/website_sale/static/src/js/website_sale_tour_buy.js b/addons/website_sale/static/src/js/website_sale_tour_buy.js
index 10ff83552ed..7b691eacc31 100644
--- a/addons/website_sale/static/src/js/website_sale_tour_buy.js
+++ b/addons/website_sale/static/src/js/website_sale_tour_buy.js
@@ -62,12 +62,7 @@ tour.register('shop_buy_product', {
         {
             content: "go to checkout",
             extra_trigger: '#cart_products input.js_quantity:propValue(1)',
-            trigger: 'a[href="/shop/checkout"]',
-        },
-        {
-            content: "Confirm checkout",
-            extra_trigger: "div.all_shipping .panel",
-            trigger: 'a[href="/shop/confirm_order"]',
+            trigger: 'a[href*="/shop/checkout"]',
         },
         {
             content: "select payment",
diff --git a/addons/website_sale/static/src/less/website_sale.less b/addons/website_sale/static/src/less/website_sale.less
index 756f2aa3422..1a6119603f7 100644
--- a/addons/website_sale/static/src/less/website_sale.less
+++ b/addons/website_sale/static/src/less/website_sale.less
@@ -29,6 +29,30 @@
 }
 
 .oe_website_sale {
+
+    .show_coupon {
+        white-space: nowrap;
+    }
+    .o_payment_form .panel {
+        border-radius: 4px !important;
+    }
+    .address-inline address {
+        display: inline-block;
+    }
+    table#cart_products tr td, table#suggested_products tr td {
+        vertical-align: middle;
+    }
+
+    table#cart_products {
+        margin-bottom: 0;
+
+        td, th {
+            &:first-child {
+                padding-left: @grid-gutter-width*0.5;
+            }
+        }
+    }
+
     ul ul {
         margin-left: 1.5em;
     }
@@ -49,6 +73,13 @@
 
     .td-qty {
         width: 130px;
+        a.input-group-addon {
+            background-color: transparent;
+            border: 0px;
+        }
+    }
+    .td-action {
+        width: 30px;
     }
 
     .td-price,
@@ -70,11 +101,6 @@
             width: 80px;
         }
     }
-    @media (min-width: 768px) {
-        .o_website_sale_rightfit {
-            padding-right: 0;
-        }
-    }
 
     @media (max-width: 476px) {
         .td-qty {
@@ -743,7 +769,7 @@ td.noborder {
 }
 
 .border_primary {
-    border: 1px solid #337ab7;
+    border: 1px solid @odoo-brand-primary;
 }
 
 .js_change_shipping {
diff --git a/addons/website_sale/static/src/less/website_sale_frontend.less b/addons/website_sale/static/src/less/website_sale_frontend.less
new file mode 100644
index 00000000000..f7d35c780a6
--- /dev/null
+++ b/addons/website_sale/static/src/less/website_sale_frontend.less
@@ -0,0 +1,139 @@
+//## Website Sale frontent design
+//## ----------------------------
+
+// Theming variables
+@o-wsale-wizard-thickness: 2px;
+@o-wsale-wizard-dot-size: 10px;
+@o-wsale-wizard-dot-active-glow: 4px;
+
+@o-wsale-wizard-color-inner: white;
+@o-wsale-wizard-color-default: @gray-lighter;
+
+@o-wsale-wizard-dot-active: @brand-primary;
+@o-wsale-wizard-dot-completed: @brand-success;
+
+@o-wsale-wizard-label-default: @text-muted;
+@o-wsale-wizard-label-active: @text-color;
+@o-wsale-wizard-label-completed: @state-success-text;
+
+
+.progress-wizard {
+    // Scoped variables
+    @tmp-dot-radius: (@o-wsale-wizard-dot-size + @o-wsale-wizard-thickness)*0.5;
+    @tmp-check-size: max(@font-size-base, @o-wsale-wizard-dot-size + @o-wsale-wizard-thickness + @o-wsale-wizard-dot-active-glow*2);
+    @tmp-check-pos: @o-wsale-wizard-dot-size*0.5 - @tmp-check-size*0.5;
+
+    margin-top: @grid-gutter-width*0.5;
+    padding: 0 @grid-gutter-width*0.5;
+
+    @media (min-width: @screen-sm-min) {
+        padding: 0;
+    }
+
+    .progress-wizard-step {
+        position: relative;
+
+        @media (min-width: @screen-sm-min) {
+            margin-top: @tmp-dot-radius + @o-wsale-wizard-thickness*3.5;
+            float: left;
+            width: 100%/3;
+
+            .o_wizard_has_extra_step + & {
+                width: 100%/4;
+            }
+        }
+        @media (max-width: @screen-xs-max) {
+            &.disabled, &.complete {
+                display:none;
+            }
+        }
+        .progress-wizard-dot {
+            .square(@o-wsale-wizard-dot-size);
+            position: relative;
+            display: inline-block;
+            background-color: @o-wsale-wizard-color-inner;
+            border-radius: 50%;
+            box-shadow: 0 0 0 @o-wsale-wizard-thickness @o-wsale-wizard-color-default;
+
+            @media (min-width: @screen-sm-min) {
+                .o-position-absolute(@left: 50%);
+                margin: -@tmp-dot-radius 0 0 -(@o-wsale-wizard-dot-size*0.5);
+            }
+        }
+
+        .progress-wizard-steplabel {
+            color: @o-wsale-wizard-label-default;
+            margin: 5px 0 5px 5px;
+            font-size: @font-size-base;
+            display: inline-block;
+
+            @media (min-width: @screen-sm-min) {
+                display: block;
+                margin: (10px + @tmp-dot-radius) 0 20px 0;
+            }
+            @media (max-width: @screen-xs-max) {
+                margin-left: -15px;
+                font-size:24px;
+            }
+        }
+
+        .progress-wizard-bar {
+            height: @o-wsale-wizard-thickness;
+            background-color: @o-wsale-wizard-color-default;
+        }
+
+        &.active {
+            .progress-wizard-dot {
+                .o-animation(fadeIn, 1s);
+                background: @o-wsale-wizard-dot-active;
+                box-shadow: 0 0 0 @o-wsale-wizard-dot-active-glow - 1px @o-wsale-wizard-color-inner,
+                            0 0 0 @o-wsale-wizard-dot-active-glow fade(@o-wsale-wizard-dot-active, 50%);
+            }
+
+            .progress-wizard-steplabel {
+                color: @o-wsale-wizard-label-active;
+                font-weight: bolder;
+            }
+        }
+
+        &.complete {
+            .progress-wizard-dot {
+                background: none;
+                box-shadow: none;
+
+                &:after {
+                    .o-position-absolute(@tmp-check-pos, @left: @tmp-check-pos);
+                    .square(@tmp-check-size);
+                    border-radius: 100%;
+
+                    background: @o-wsale-wizard-color-inner;
+                    color: @o-wsale-wizard-dot-completed;
+                    text-align: center;
+                    line-height: 1;
+                    font-size: @tmp-check-size;
+                    font-family: FontAwesome;
+
+                    content: "\f058";
+                }
+            }
+
+            .progress-wizard-steplabel {
+                color: @o-wsale-wizard-label-completed;
+            }
+
+            &:hover:not(.disabled) {
+                .progress-wizard-dot:after {
+                    color: @o-wsale-wizard-label-completed;
+                }
+
+                .progress-wizard-steplabel {
+                    color: @o-wsale-wizard-label-active;
+                }
+            }
+        }
+
+        &.disabled {
+            cursor: default;
+        }
+    }
+}
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index af6c2617d60..1f8c1aa0230 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -12,6 +12,7 @@
         <xpath expr="link[last()]" position="after">
             <link rel="stylesheet" type="text/less" href="/website_sale/static/src/less/website_sale.less" />
             <link rel="stylesheet" type="text/less" href="/website_sale/static/src/less/website_mail.less" />
+            <link rel="stylesheet" href="/website_sale/static/src/less/website_sale_frontend.less"/>
         </xpath>
         <xpath expr="script[last()]" position="after">
             <script type="text/javascript" src="/website_sale/static/src/js/website_sale.js"></script>
@@ -686,32 +687,36 @@
 
     <template id="wizard_checkout" name="Wizard Checkout">
         <t t-set="website_sale_order" t-value="website.sale_get_order()"/>
-        <ul class="wizard pull-right hidden-xs">
-            <li t-att-class="step==10 and 'text-primary' or 'text-muted'" id="step10">
-                <t t-set="step_review_order" t-value="step&gt;10 and step&lt;50"/>
-                <a t-att-href="step_review_order and '/shop/cart' or '#'" t-att-class="step_review_order and 'text-success' or 'o_link_disable'">
-                    <span>Review Order</span>
-                </a>
-                <span class="chevron"/>
-            </li>
-            <li t-att-class="(step==20 and 'text-primary') or 'text-muted'" id="step20">
-                <!-- why website_sale_order is not set here ? -->
-                <t t-set="step_billing" t-value="step&gt;20 and step&lt;50"/>
-                <a t-att-href="step_billing and '/shop/checkout' or '#'" t-att-class="step_billing and 'text-success' or ('o_link_disable' + ('' if step == 20 else ' text-muted'))">
-                    <!-- billing if not loggedin - TODO -->
-                    <t t-set="website_sale_order" t-value="website.sale_get_order()" />
-                    <span>Billing</span>
-                    <t t-if="not website_sale_order or not website_sale_order.website_order_line or not website_sale_order.only_services"><span> &amp; Shipping</span></t>
-                    <span class="chevron"/>
-                </a>
-            </li>
-            <li t-att-class="(step==40 and 'text-primary') or 'text-muted'" id="step40">
-                Payment<span class="chevron"></span>
-            </li>
-            <li t-att-class="(step==50 and 'text-primary') or 'text-muted'" id="step50">
-                Confirmation<span class="chevron"></span>
-            </li>
-        </ul>
+
+        <div class="row">
+            <div class="col-lg-8">
+                <div class="wizard">
+                    <div class="progress-wizard">
+                        <a class="no-decoration" t-att-href="step&gt;=10 and '/shop/cart' or '#'">
+                          <div id="wizard-step10" t-att-class="'progress-wizard-step %s' % (step == 10 and 'active' or step&gt;10 and 'complete' or 'disabled')">
+                            <div class="progress-wizard-bar hidden-xs"/>
+                            <span class="progress-wizard-dot hidden-xs"></span>
+                            <div class="text-center progress-wizard-steplabel">Review Order</div>
+                          </div>
+                        </a>
+                        <a class="no-decoration" t-att-href="step&gt;=20 and '/shop/checkout' or '#'">
+                          <div id="wizard-step20" t-att-class="'progress-wizard-step %s' % (step == 20 and 'active' or step&gt;20 and 'complete' or 'disabled')">
+                            <div class="progress-wizard-bar hidden-xs"/>
+                            <span class="progress-wizard-dot hidden-xs"></span>
+                            <div class="text-center progress-wizard-steplabel">Address</div>
+                          </div>
+                        </a>
+                        <a class="no-decoration" t-att-href="step&gt;=40 and '/shop/payment' or '#'">
+                          <div id="wizard-step40" t-att-class="'progress-wizard-step %s' % (step == 40 and 'active' or step&gt;40 and 'complete' or 'disabled')">
+                            <div class="progress-wizard-bar hidden-xs"/>
+                            <span class="progress-wizard-dot hidden-xs"></span>
+                            <div class="text-center progress-wizard-steplabel">Confirm Order</div>
+                          </div>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
     </template>
 
     <template id="extra_info" name="Checkout Extra Info">
@@ -720,57 +725,53 @@
             <div id="wrap">
                 <div class="container oe_website_sale">
                     <div class="row">
-                        <div class="col-md-8 col-md-offset-2 oe_cart">
-                            <div class='row'>
-                                <t t-call="website_sale.wizard_checkout">
-                                    <t t-set="step" t-value="30"/>
-                                </t>
-                            </div>
+                        <div class='col-md-12'>
+                            <t t-call="website_sale.wizard_checkout">
+                                <t t-set="step" t-value="30"/>
+                            </t>
+                        </div>
+                        <div class="col-lg-4 col-lg-push-8 hidden visible-lg">
+                            <t t-call='website_sale.cart_summary'/>
+                        </div>
+                        <div class="col-lg-8 col-lg-pull-4 col-sm-12 col-xs-12 oe_cart">
                             <div class="row">
-                                <div class='col-md-12 o_website_sale_rightfit'>
-                                    <h2 class="mb8 mt8">Extra Step</h2>
+                                <div class='col-md-12'>
                                     <form action="/website_form/" method="post" class="s_website_form form-horizontal container-fluid" enctype="multipart/form-data" data-force_action="shop.sale.order" data-model_name="sale.order" data-success_page="/shop/payment">
                                         <div class="form-group form-field o_website_form_custom">
                                             <div class="col-md-3 col-sm-4 text-right-not-xs">
                                                 <label class="control-label" for="client_order_ref">Your Reference</label>
                                             </div>
-                                            <div class="col-md-7 col-sm-8">
+                                            <div class="col-md-9 col-sm-8">
                                                 <input type="text" class="form-control o_website_form_input" name="client_order_ref"/>
                                             </div>
                                         </div>
                                         <div class="form-group form-field o_website_form_custom">
                                             <div class="col-md-3 col-sm-4 text-right-not-xs">
-                                                <label class="control-label" for="Give us your feedback...">Give us your feedback...</label>
+                                                <label class="control-label" for="Give us your feedback">Give us your feedback</label>
                                             </div>
-                                            <div class="col-md-7 col-sm-8">
-                                                <textarea class="form-control o_website_form_input" name="Give us your feedback..." />
+                                            <div class="col-md-9 col-sm-8">
+                                                <textarea class="form-control o_website_form_input" rows="8" name="Give us your feedback" />
                                             </div>
                                         </div>
                                         <div class="form-group form-field o_website_form_custom">
                                             <div class="col-md-3 col-sm-4 text-right-not-xs">
                                                 <label class="control-label" for="a_document">A document to provide</label>
                                             </div>
-                                            <div class="col-md-7 col-sm-8">
+                                            <div class="col-md-9 col-sm-8">
                                                 <input type="file" class="form-control o_website_form_input" name="a_document" />
                                             </div>
                                         </div>
                                         <div class="form-group">
                                             <div class="col-md-3 col-sm-4">
                                             </div>
-                                            <div class="col-md-7 col-sm-8">
-                                                <a href="/shop/checkout" class="btn btn-default mb32 pull-left"><span class="fa fa-long-arrow-left" /> Previous</a>
-                                                <a class="btn btn-primary pull-right mb32 o_website_form_send" href="/shop/confirm_order">Next <span class="fa fa-long-arrow-right" /></a>
+                                            <div class="col-md-9 col-sm-8">
+                                                <a href="/shop/checkout" class="btn btn-default mb32 pull-left"><span class="fa fa-chevron-left" /> Previous</a>
+                                                <a class="btn btn-primary pull-right mb32 o_website_form_send" href="/shop/confirm_order">Next <span class="fa fa-chevron-right" /></a>
                                             </div>
                                         </div>
                                     </form>
                                 </div>
                             </div>
-                            <!--
-                                Sample Code to re-inject previous value is needed.
-                                <script>
-                                    $("input[name='client_order_ref']").val(_.unescape('<t t-esc="escape(website_sale_order.client_order_ref or '') or ''"/>'));
-                                </script>
-                            -->
                         </div>
                     </div>
                 </div>
@@ -780,29 +781,18 @@
     </template>
 
     <template id="extra_info_option" name="Extra Step Option" inherit_id="wizard_checkout" active="False" customize_show="True">
-        <xpath expr="//li[@id='step40']" position="replace">
-            <li t-att-class="(step==40 and 'text-primary') or 'text-muted'" id="step40">
-                <t t-if="step&gt;40 and step&lt;50">
-                    <a href="/shop/payment" class="text-success">
-                        Payment<span class="chevron"></span>
-                    </a>
-                </t>
-                <t t-if="not (step&gt;40 and step&lt;50)">
-                    Payment<span class="chevron"></span>
-                </t>
-            </li>
+        <!-- Add a "flag element" to trigger style variation -->
+        <xpath expr="//div[hasclass('wizard')]/div" position="before">
+            <span class="o_wizard_has_extra_step hidden"/>
         </xpath>
-        <xpath expr="//li[@id='step20']" position="after">
-            <li t-att-class="(step==30 and 'text-primary') or 'text-muted'" id="step30">
-                <t t-if="step&gt;30 and step&lt;50">
-                    <a href="/shop/extra_info" class="text-success">
-                        Extra Info<span class="chevron"></span>
-                    </a>
-                </t>
-                <t t-if="not (step&gt;30 and step&lt;50)">
-                    Extra Info<span class="chevron"></span>
-                </t>
-            </li>
+        <xpath expr="//div[@id='wizard-step20']" position="after">
+            <a class="no-decoration" t-att-href="step&gt;=30 and '/shop/extra_info' or '#'">
+                <div id="wizard-step30" t-att-class="'progress-wizard-step %s' % (step == 30 and 'active' or step&gt;30 and 'complete' or 'disabled')">
+                    <div class="progress-wizard-bar hidden-xs"/>
+                        <span class="progress-wizard-dot hidden-xs"></span>
+                    <div class="text-center progress-wizard-steplabel">Extra Info</div>
+                </div>
+            </a>
         </xpath>
     </template>
 
@@ -810,13 +800,14 @@
         <div t-if="not website_sale_order or not website_sale_order.website_order_line" class="js_cart_lines well well-lg">
           Your cart is empty!
         </div>
-        <table class="table table-striped table-condensed js_cart_lines" id="cart_products" t-if="website_sale_order and website_sale_order.website_order_line">
+        <table class="mb16 table table-striped table-condensed js_cart_lines" id="cart_products" t-if="website_sale_order and website_sale_order.website_order_line">
             <thead>
                 <tr>
                     <th class="td-img">Product</th>
                     <th></th>
                     <th class="text-center td-qty">Quantity</th>
                     <th class="text-center td-price">Price</th>
+                    <th class="text-center td-action"></th>
                 </tr>
             </thead>
             <tbody>
@@ -837,7 +828,6 @@
                                     <span><t t-esc="name_line"/></span><br/>
                                 </t>
                             </div>
-                            <a href='#' class='js_delete_product hidden-xs no-decoration'> <small><i class='fa fa-trash-o'></i> Remove</small></a>
                         </td>
                         <td class="text-center td-qty">
                             <div class="css_quantity input-group oe_website_spinner">
@@ -857,16 +847,14 @@
                             <span t-field="line.price_reduce_taxexcl" style="white-space: nowrap;" t-options="{'widget': 'monetary', 'from_currency': website_sale_order.pricelist_id.currency_id, 'display_currency': website.currency_id}" groups="sale.group_show_price_subtotal" />
                             <span t-field="line.price_reduce_taxinc" style="white-space: nowrap;" t-options="{'widget': 'monetary', 'from_currency': website_sale_order.pricelist_id.currency_id, 'display_currency': website.currency_id}" groups="sale.group_show_price_total" />
                         </td>
+                        <td class="td-action">
+                            <a href='#' class='js_delete_product no-decoration'> <small><i class='fa fa-trash-o'></i></small></a>
+                        </td>
                     </tr>
                 </t>
             </tbody>
         </table>
-        <div class="js_cart_lines row">
-            <t t-call="website_sale.total">
-                <t t-set='extra_class' t-value='"col-xs-12 col-sm-5 col-sm-push-7"'/>
-                <t t-set='redirect'>/shop/cart</t>
-            </t>
-        </div>
+
     </template>
 
     <template id="cart" name="Shopping Cart">
@@ -874,15 +862,14 @@
             <div id="wrap">
                 <div class="container oe_website_sale">
                     <div class="row">
-                        <div class="col-md-8 col-md-offset-2 oe_cart">
+                        <div class="col-md-12">
+                            <t t-call="website_sale.wizard_checkout">
+                                <t t-set="step" t-value="10" />
+                            </t>
+                        </div>
+                        <div class="col-lg-8 col-sm-12 col-xs-12 oe_cart">
                             <div class="row">
-                                <t t-call="website_sale.wizard_checkout">
-                                    <t t-set="step" t-value="10" />
-                                </t>
-                            </div>
-                            <div class="row">
-                                <div class="col-md-12 o_website_sale_rightfit">
-                                    <h2 class="mb8 mt8">Shopping Cart</h2>
+                                <div class="col-md-12">
                                     <div t-if="abandoned_proceed or access_token" class="mt8 mb8 alert alert-info"> <!-- abandoned cart choices -->
                                         <t t-if="abandoned_proceed">
                                             <p>Your previous cart has already been completed.</p>
@@ -899,15 +886,31 @@
                                     </div>
                                     <t t-call="website_sale.cart_lines" />
                                     <div class="clearfix" />
-                                    <a t-if="website_sale_order and website_sale_order.website_order_line" class="btn btn-primary pull-right mb32 mr8" href="/shop/checkout">
-                                        <span class="hidden-xs">Process Checkout</span>
-                                        <span class="visible-xs-inline">Checkout</span>
-                                        <span class="fa fa-long-arrow-right" />
+                                    <a href="/shop" class="btn btn-default mb32 hidden-xs hidden-sm hidden-md">
+                                        <span class="fa fa-chevron-left" />
+                                        <span class="">Continue Shopping</span>
+                                    </a>
+                                    <a t-if="website_sale_order and website_sale_order.website_order_line" class="btn btn-primary pull-right mb32 mr8 hidden visible-lg" href="/shop/checkout?express=1">
+                                        <span class="">Process Checkout</span>
+                                        <span class="fa fa-chevron-right" />
                                     </a>
                                     <div class="oe_structure" />
                                 </div>
                             </div>
                         </div>
+                        <div class="col-lg-4 col-sm-12 col-xs-12">
+                            <t t-call='website_sale.short_cart_summary'/>
+                            <div class='hidden-lg'>
+                                <a href="/shop" class="btn btn-default mb32">
+                                    <span class="fa fa-chevron-left" />
+                                    Continue<span class="hidden-xs"> Shopping</span>
+                                </a>
+                                <a t-if="website_sale_order and website_sale_order.website_order_line" class="btn btn-primary pull-right mb32 mr8" href="/shop/checkout?express=1">
+                                    <span class="">Process Checkout</span>
+                                    <span class="fa fa-chevron-right" />
+                                </a>
+                            </div>
+                        </div>
                     </div>
                 </div>
                 <div class="oe_structure" />
@@ -917,8 +920,8 @@
 
     <template id="cart_popover" name="Cart Popover">
         <div t-if="not website_sale_order or not website_sale_order.website_order_line" class="well well-lg">
-                  Your cart is empty!
-                </div>
+          Your cart is empty!
+        </div>
         <t t-if="website_sale_order and website_sale_order.website_order_line">
             <t t-foreach="website_sale_order.website_order_line" t-as="line">
                 <div class="row mb8 cart_line">
@@ -950,7 +953,7 @@
     <template id="suggested_products_list" inherit_id="website_sale.cart_lines" customize_show="True" name="Alternative Products in my cart">
         <xpath expr="//table[@id='cart_products']" position="after">
             <h5 class='text-muted js_cart_lines' t-if="suggested_products">Suggested Accessories:</h5>
-            <table t-if="suggested_products" class="js_cart_lines table table-striped table-condensed">
+            <table t-if="suggested_products" id="suggested_products" class="js_cart_lines table table-striped table-condensed">
                 <tbody>
                     <tr t-foreach="suggested_products" t-as="product">
                         <td class='td-img'>
@@ -984,16 +987,6 @@
         </xpath>
     </template>
 
-    <template id="continue_shopping" inherit_id="website_sale.cart" customize_show="True" name="Continue Shopping Button">
-        <xpath expr="//a[@href='/shop/checkout']" position="before">
-            <a href="/shop" class="btn btn-default mb32">
-                <span class="fa fa-long-arrow-left" />
-                <span class="hidden-xs">Continue Shopping</span>
-                <span class="visible-xs-inline">Continue</span>
-            </a>
-        </xpath>
-    </template>
-
     <template id='coupon_form' name='Coupon form'>
         <t t-if="request.params.get('code_not_available')" name="code_not_available">
             <p class="bg-warning">This promo code is not available</p>
@@ -1001,8 +994,8 @@
         <form t-att-action="'/shop/pricelist%s' % (redirect and '?r=' + redirect or '')"
             method="post" class="mb32" name="coupon_code">
             <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" />
-            <div class="input-group">
-                <input name="promo" class="form-control" type="text" placeholder="code..." t-att-value="website_sale_order.pricelist_id.code or None" />
+            <div class="input-group" style='margin-left:auto; margin-right: auto'>
+                <input name="promo" style='min-width:180px' class="form-control" type="text" placeholder="code..." t-att-value="website_sale_order.pricelist_id.code or None" />
                 <div class="input-group-btn">
                     <a class="btn btn-default a-submit">Apply</a>
                 </div>
@@ -1018,15 +1011,18 @@
                 <div class="container oe_website_sale">
                     <t t-set="same_shipping" t-value="bool(order.partner_shipping_id==order.partner_id or only_services)" />
                     <div class="row">
-                        <div class="col-md-8 col-md-offset-2 oe_cart">
-                            <div class='row'>
-                                <t t-call="website_sale.wizard_checkout">
-                                    <t t-set="step" t-value="20" />
-                                </t>
-                            </div>
+                        <div class='col-md-12'>
+                            <t t-call="website_sale.wizard_checkout">
+                                <t t-set="step" t-value="20" />
+                            </t>
+                        </div>
+                        <div class="col-lg-4 col-lg-push-8 hidden visible-lg">
+                            <t t-call='website_sale.cart_summary' />
+                        </div>
+                        <div class="col-lg-8 col-lg-pull-4 col-sm-12 col-xs-12 oe_cart">
                             <div class="row">
                                 <div class="col-md-12">
-                                    <h2 class="page-header mt8">Billing Address</h2>
+                                    <h3 class="page-header mt8">Billing Address</h3>
                                 </div>
                                 <div class="col-md-6 one_kanban">
                                     <t t-call="website_sale.address_kanban">
@@ -1039,8 +1035,7 @@
                             <t t-if="not only_services" groups="sale.group_delivery_invoice_address">
                                 <div class="row">
                                     <div class="col-md-12">
-                                        <h2 class="page-header mt16 mb4">Shipping Address
-                                        </h2>
+                                        <h3 class="page-header mt16 mb4">Shipping Address</h3>
                                     </div>
                                 </div>
                                 <div class="row all_shipping">
@@ -1072,8 +1067,8 @@
                             <div class="clearfix" />
                             <div>
                                 <a href="/shop/cart" class="btn btn-default mb32">
-                                    <span class="fa fa-long-arrow-left" /> Return to Cart</a>
-                                <a class="btn btn-primary pull-right mb32 " href="/shop/confirm_order">Confirm <span class="fa fa-long-arrow-right" /></a>
+                                    <span class="fa fa-chevron-left" /> Return to Cart</a>
+                                <a class="btn btn-primary pull-right mb32 " href="/shop/confirm_order">Confirm <span class="fa fa-chevron-right" /></a>
                             </div>
                         </div>
                     </div>
@@ -1116,13 +1111,18 @@
         <t t-call="website.layout">
             <div id="wrap">
                 <div class="container oe_website_sale">
-                    <div class="row">
-                        <div class="col-md-8 col-md-offset-2 oe_cart">
                     <div class='row'>
-                        <t t-call="website_sale.wizard_checkout">
-                            <t t-set="step" t-value="20" />
-                        </t>
+                        <div class="col-md-12">
+                            <t t-call="website_sale.wizard_checkout">
+                                <t t-set="step" t-value="20" />
+                            </t>
+                        </div>
                     </div>
+                    <div class="row">
+                        <div class="col-lg-4 col-lg-push-8 hidden visible-lg">
+                            <t t-call='website_sale.cart_summary' />
+                        </div>
+                        <div class="col-lg-8 col-lg-pull-4 col-sm-12 col-xs-12 oe_cart">
                             <div class="row">
                                 <t t-if="mode == ('new', 'billing')">
                                     <h2 class="page-header mt8 ml16">Your Address
@@ -1217,6 +1217,18 @@
                                         </select>
                                     </div>
 
+                                    <div class="clearfix" />
+                                    <t t-if="mode == ('new', 'billing') and not only_services">
+                                        <div class="col-md-12">
+                                            <div class="well checkbox">
+                                              <label>
+                                                <input type="checkbox" id='shipping_use_same'  name='use_same' value="1" checked='checked'/>Ship to the same address
+                                                <span class='ship_to_other text-muted' style="display: none">&amp;nbsp;(<i>Your shipping address will be requested later) </i></span>
+                                                </label>
+                                            </div>
+                                        </div>
+                                    </t>
+
                                     <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" />
                                     <input type="hidden" name="submitted" value="1" />
                                     <input type="hidden" name="partner_id" t-att-value="partner_id or '0'" />
@@ -1227,10 +1239,10 @@
                                     <div class="clearfix"/>
                                     <div style='padding: 0 15px'>
                                         <a t-att-href="mode == ('new', 'billing') and '/shop/cart' or '/shop/checkout'" class="btn btn-default mb32">
-                                            <span class="fa fa-long-arrow-left" /> Back
+                                            <span class="fa fa-chevron-left" /> Back
                                         </a>
                                         <a class="btn btn-primary pull-right mb32 a-submit a-submit-disable a-submit-loading">
-                                            <span>Next </span><span class="fa fa-long-arrow-right" />
+                                            <span>Next </span><span class="fa fa-chevron-right" />
                                         </a>
                                     </div>
                                 </form>
@@ -1241,6 +1253,8 @@
             </div>
         </t>
     </template>
+
+
     <template id="payment" name="Payment">
         <t t-call="website.layout">
             <t t-set="additional_title">Shop - Select Payment Acquirer</t>
@@ -1249,7 +1263,12 @@
             <div id="wrap">
                 <div class="container oe_website_sale">
                     <div class="row">
-                        <div class="col-md-offset-2 col-lg-8 col-sm-9" t-if="errors">
+                        <div class='col-xs-12'>
+                            <t t-call="website_sale.wizard_checkout">
+                                <t t-set="step" t-value="40" />
+                            </t>
+                        </div>
+                        <div class="col-xs-12" t-if="errors">
                             <t t-foreach="errors" t-as="error">
                                 <div class="alert alert-danger" t-if="error">
                                     <h4>
@@ -1259,71 +1278,42 @@
                                 </div>
                             </t>
                         </div>
-                        <div class="col-md-8 col-md-offset-2 oe_cart">
-                          <div class='row'>
-                            <t t-call="website_sale.wizard_checkout">
-                                <t t-set="step" t-value="40" />
-                            </t>
-                         </div>
+                        <div class="col-lg-4 col-lg-push-8 col-sm-12 col-xs-12">
+                            <t t-call='website_sale.cart_summary' />
+                        </div>
+                        <div class="col-lg-8 col-lg-pull-4 col-sm-12 col-xs-12 oe_cart">
                          <div class="row">
-                            <div class='col-md-12 o_website_sale_rightfit'>
-                                <h2 class="mb8 mt8">Confirm Order</h2>
-                                <table class="table table-striped table-condensed" id="cart_products" t-if="website_sale_order and website_sale_order.website_order_line">
-                                    <thead>
-                                        <tr>
-                                            <th class='td-img'>Product</th>
-                                            <th></th>
-                                            <th class='td-qty'>Quantity</th>
-                                            <th class='text-center td-price'>Price</th>
-                                        </tr>
-                                    </thead>
-                                    <tbody>
-                                        <tr t-foreach="website_sale_order.website_order_line" t-as="line">
-                                            <td class='' colspan="2" t-if="not line.product_id.product_tmpl_id"></td>
-                                            <td class='td-img' t-if="line.product_id.product_tmpl_id">
-                                                <a t-attf-href="/shop/product/#{ slug(line.product_id.product_tmpl_id) }">
-                                                    <span t-field="line.product_id.image_small" t-options="{'widget': 'image', 'class': 'img-rounded'}" />
-                                                </a>
-                                            </td>
-                                            <td class='td-product_name' t-if="line.product_id.product_tmpl_id">
-                                                <div>
-                                                    <strong t-field="line.product_id.with_context(display_default_code=False).display_name" />
-                                                </div>
-                                                <div class="text-muted hidden-xs small">
-                                                    <t t-foreach="line.name.splitlines()[1:]" t-as="name_line">
-                                                        <span><t t-esc="name_line"/></span><br/>
-                                                    </t>
-                                                </div>
-                                            </td>
-                                            <td class='td-qty'>
-                                              <div t-esc="int(line.product_uom_qty) == line.product_uom_qty and int(line.product_uom_qty) or line.product_uom_qty" />
-                                            </td>
-                                            <td class="text-center td-price">
-                                                <span t-field="line.price_unit" style="white-space: nowrap;" t-options="{'widget': 'monetary','from_currency': website_sale_order.pricelist_id.currency_id,'display_currency': website.currency_id}" />
-                                            </td>
-                                        </tr>
-                                    </tbody>
-                                </table>
-                            </div>
-                            <div class="col-md-12">
-                                <t t-call="website_sale.total">
-                                    <t t-set='extra_class' t-value='"col-xs-12 col-sm-5 col-sm-push-7"'/>
-                                    <t t-set='redirect'>/shop/payment</t>
-                                </t>
+                            <div class='col-md-12'>
+                                <div class="panel panel-default">
+                                  <div class="panel-headisng"></div>
+                                  <div class="panel-body">
+                                    <a class='pull-right no-decoration' href='/shop/checkout'><i class='fa fa-edit'/> Edit</a>
+                                    <t t-set="same_shipping" t-value="bool(order.partner_shipping_id==order.partner_id or only_services)" />
+                                    <div><b>Billing<t t-if="same_shipping and not only_services"> &amp; Shipping</t>: </b><span t-esc='order.partner_id' t-options="dict(widget='contact', fields=['address'], no_marker=True, separator=', ')" class="address-inline"/></div>
+                                    <div t-if="not same_shipping and not only_services" groups="sale.group_delivery_invoice_address"><b>Shipping: </b><span t-esc='order.partner_shipping_id' t-options="dict(widget='contact', fields=['address'], no_marker=True, separator=', ')"  class="address-inline"/></div>
+                                  </div>
+                                </div>
                             </div>
                             <div class="clearfix" />
                             <div class="oe_structure" />
 
-                            <div id="payment_method" class="col-md-12 o_website_sale_rightfit" t-if="(form_acquirers or s2s_acquirers or tokens) and website_sale_order.amount_total">
+                            <div id="payment_method" class="col-md-12" t-if="(form_acquirers or s2s_acquirers or tokens) and website_sale_order.amount_total">
                                 <h3 class="mb24">Pay with </h3>
                                 <t t-call="payment.payment_tokens_list">
                                     <t t-set="mode" t-value="'payment'"/>
                                     <t t-set="submit_txt">Pay Now</t>
-                                    <t t-set="icon_class" t-value="'fa-lock'"/>
+                                    <t t-set="icon_right" t-value="1"/>
+                                    <t t-set="icon_class" t-value="'fa-chevron-right'"/>
+                                    <t t-set="submit_class" t-value="'btn btn-primary'"/>
                                     <t t-set="pms" t-value="tokens"/>
                                     <t t-set="form_action" t-value="'/shop/payment/token'"/>
                                     <t t-set="prepare_tx_url" t-value="'/shop/payment/transaction/'"/>
                                     <t t-set="partner_id" t-value="partner"/>
+
+                                    <t t-set="back_button_icon_class" t-value="'fa-chevron-left'"/>
+                                    <t t-set="back_button_txt" t-value="'Return to Cart'"/>
+                                    <t t-set="back_button_class" t-value="'btn btn-default'"/>
+                                    <t t-set="back_button_link" t-value="'/shop/cart'"/>
                                 </t>
                             </div>
 
@@ -1339,16 +1329,14 @@
                                     <form target="_self" action="/shop/payment/validate" method="post" class="pull-right">
                                         <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" />
                                         <a class="btn btn-primary a-submit">
-                                            <span t-if="order.amount_total &gt; 0">Pay Now <span class="fa fa-long-arrow-right"></span></span>
-                                            <span t-if="order.amount_total == 0">Confirm Order <span class="fa fa-long-arrow-right"></span></span>
+                                            <span t-if="order.amount_total &gt; 0">Pay Now <span class="fa fa-chevron-right"></span></span>
+                                            <span t-if="order.amount_total == 0">Confirm Order <span class="fa fa-chevron-right"></span></span>
                                         </a>
                                     </form>
                                 </div>
                             </div>
                           </div>
                         </div>
-
-
                     </div>
                 </div>
                 <div class="oe_structure" />
@@ -1356,11 +1344,79 @@
         </t>
     </template>
 
+
+    <template id="short_cart_summary" name="Short Cart right column">
+        <div class="panel panel-default js_cart_summary" t-if="website_sale_order and website_sale_order.website_order_line" >
+            <div class="panel-body row">
+                <h4 class='col-md-12 hidden visible-lg'>Order Total</h4>
+                <div class='col-md-12'>
+                    <t t-call="website_sale.total">
+                        <t t-set='no_rowspan'>1</t>
+                    </t>
+                    <a t-if="website_sale_order and website_sale_order.website_order_line" class="btn btn-default pull-right mb32 mr8 hidden visible-lg" href="/shop/checkout?express=1">
+                        <span>Process Checkout</span>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </template>
+
+    <template id="cart_summary" name="Cart right column">
+        <div class="panel panel-default">
+            <div class="panel-body row">
+                <div class='toggle_summary col-md-12 hidden-lg'>
+                    <b>Your order: </b> <span t-field="website_sale_order.amount_total" t-options='{"widget": "monetary", "display_currency": website_sale_order.pricelist_id.currency_id}'/>
+                    <span class='fa fa-chevron-down fa-border pull-right'></span>
+                </div>
+
+                <div t-if="not website_sale_order or not website_sale_order.website_order_line" class="well well-lg">
+                  Your cart is empty!
+                </div>
+                <div class='toggle_summary_div hidden visible-lg'>
+                    <table class="table table-striped table-condensed col-md-12" id="cart_products" t-if="website_sale_order and website_sale_order.website_order_line">
+                        <thead>
+                            <tr>
+                                <th class='td-img'>Product</th>
+                                <th></th>
+                                <th class='td-qty'>Quantity</th>
+                                <th class='text-center td-price'>Price</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr t-foreach="website_sale_order.website_order_line" t-as="line">
+                                <td class='' colspan="2" t-if="not line.product_id.product_tmpl_id"></td>
+                                <td class='td-img' t-if="line.product_id.product_tmpl_id">
+                                    <span t-field="line.product_id.image_small" t-options="{'widget': 'image', 'class': 'img-rounded'}" />
+                                </td>
+                                <td class='td-product_name' t-if="line.product_id.product_tmpl_id">
+                                    <div>
+                                        <strong t-field="line.product_id.with_context(display_default_code=False).display_name" />
+                                    </div>
+                           </td>
+                                <td class='td-qty'>
+                                    <div t-esc="line.product_uom_qty" />
+                                </td>
+                                <td class="text-center td-price">
+                                    <span t-field="line.price_reduce_taxexcl" style="white-space: nowrap;" t-options="{'widget': 'monetary', 'from_currency': website_sale_order.pricelist_id.currency_id, 'display_currency': website.currency_id}" groups="sale.group_show_price_subtotal" />
+                                    <span t-field="line.price_reduce_taxinc" style="white-space: nowrap;" t-options="{'widget': 'monetary', 'from_currency': website_sale_order.pricelist_id.currency_id, 'display_currency': website.currency_id}" groups="sale.group_show_price_total" />
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                    <t t-call="website_sale.total">
+                        <t t-set='redirect'>/shop/payment</t>
+                    </t>
+                </div>
+            </div>
+        </div>
+    </template>
+
     <template id="payment_sale_note" inherit_id="payment" name="Accept Terms &amp; Conditions" customize_show="True" active="False">
-        <xpath expr="//div[@id='payment_method']" position="before">
-            <div class="oe_accept_cgv_button">
+        <xpath expr="//div[@id='payment_method'][hasclass('js_payment')]" position="after">
+            <div class="clearfix"/>
+            <div class="oe_accept_cgv_button col-md-12 text-right oe_accept_cgv_button">
                 <label>
-                    <input type="checkbox" checked="checked" id="checkbox_cgv" />
+                    <input type="checkbox" id="checkbox_cgv"/>
                     I agree to the <a target='_BLANK' href='/shop/terms'>terms &amp; conditions</a>
 
                 </label>
@@ -1374,124 +1430,60 @@
             <div id="wrap">
                 <div class="container oe_website_sale">
                     <div class="row">
-                        <div class="col-md-9">
-                            <h1 class="mb32"><span>Order</span> <em t-field="order.name" /> <t t-if="order.state == 'sale'"><span>Confirmed</span></t></h1>
-                            <div class="thanks_msg">
-                                <h2>Thank you for your order.
-                                    <a class="btn btn-primary pull-right hidden-xs" href="/shop/print" target="_blank"><i class="fa fa-print"></i> Print</a>
-                                </h2>
+                        <div class="col-md-12 col-lg-8">
+                            <div class="oe_cart">
+
+                                <h1 class="mb32"><span>Order</span> <em t-field="order.name" /> <t t-if="order.state == 'sale'"><span>Confirmed</span></t></h1>
+                                <div class="thanks_msg mb32">
+                                    <h2>Thank you for your order.
+                                        <a class="btn btn-primary hidden-xs" href="/shop/print" target="_blank"><i class="fa fa-print"></i> Print</a>
+                                    </h2>
+                                </div>
+                                <t t-if="request.env['ir.config_parameter'].sudo().get_param('auth_signup.invitation_scope', 'b2b') == 'b2c' and request.website.is_public_user()">
+                                    <p class='alert alert-info mt16'>
+                                        <a t-att-href='order.partner_id.signup_prepare() and order.partner_id.signup_url' class='btn btn-sm btn-primary'>Sign Up</a>
+                                         to follow your order.
+                                    </p>
+                                </t>
+                                <div class="clearfix" />
+                                <div class="oe_structure" />
+                                <h3 class="text-left">
+                                    <strong>Payment Information:</strong>
+                                </h3>
+                                <table class="table">
+                                    <tbody>
+                                        <tr>
+                                            <td colspan="2">
+                                                <t t-esc="order.payment_acquirer_id.name" />
+                                            </td>
+                                            <td class="text-right" width="100">
+                                                <strong>Total:</strong>
+                                            </td>
+                                            <td class="text-right" width="100">
+                                                <strong t-field="order.amount_total" t-options="{'widget': 'monetary', 'display_currency': order.pricelist_id.currency_id}" />
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                                <t t-call="website_sale.payment_confirmation_status" />
+                                <div class="panel panel-default">
+                                  <div class="panel-headisng"></div>
+                                  <div class="panel-body">
+                                    <t t-set="same_shipping" t-value="bool(order.partner_shipping_id==order.partner_id or only_services)" />
+                                    <div><b>Billing <t t-if="same_shipping and not only_services"> &amp; Shipping</t>: </b><span t-esc='order.partner_id' t-options="dict(widget='contact', fields=['address'], no_marker=True, separator=', ')" class="address-inline"/></div>
+                                    <div t-if="not same_shipping and not only_services" groups="sale.group_delivery_invoice_address"><b>Shipping: </b><span t-esc='order.partner_shipping_id' t-options="dict(widget='contact', fields=['address'], no_marker=True, separator=', ')"  class="address-inline"/></div>
+                                  </div>
+                                </div>
+                                <div class="oe_structure" />
                             </div>
                         </div>
+                        <div class="col-lg-4 col-md-12 mt16">
+                            <t t-set='website_sale_order' t-value='order'/>
+                            <t t-call='website_sale.cart_summary'>
+                                <t t-set='hide_coupon'>1</t>
+                            </t>
+                        </div>
                     </div>
-                        <div class="row">
-                            <div class="col-md-9">
-                                <div class="oe_cart">
-                                    <h3 class="mt32 text-left">
-                                        <strong>Order Details:</strong>
-                                    </h3>
-                                    <table class="table table-striped table-condensed">
-                                        <thead>
-                                            <tr>
-                                                <th class='td-product_name'>Product</th>
-                                                <th class='td-qty'>Quantity</th>
-                                                <th class="text-right td-price">Unit Price</th>
-                                                <th class="text-right td-price-total">Subtotal</th>
-                                            </tr>
-                                        </thead>
-                                        <tbody>
-                                          <tr t-foreach="order.order_line" t-as="line">
-                                              <td class='td-product_name'>
-                                                  <div>
-                                                      <a t-attf-href="/shop/product/#{ slug(line.product_id.product_tmpl_id) }">
-                                                          <strong t-esc="line.product_id.with_context(display_default_code=False).display_name"/>
-                                                      </a>
-                                                  </div>
-                                                  <div class="text-muted hidden-xs small">
-                                                      <t t-foreach="line.name.splitlines()[1:]" t-as="name_line">
-                                                          <span><t t-esc="name_line"/></span><br/>
-                                                      </t>
-                                                  </div>
-                                              </td>
-                                              <td class='td-qty'>
-                                                  <div id="quote_qty">
-                                                      <span t-esc="int(line.product_uom_qty) == line.product_uom_qty and int(line.product_uom_qty) or line.product_uom_qty"/>
-                                                      <span class='hidden-xs' t-field="line.product_uom" groups="uom.group_uom"/>
-                                                  </div>
-                                              </td>
-                                              <td class='td-price'>
-                                                  <span class="text-right">
-                                                      <div t-field="line.price_unit"
-                                                          t-options='{"widget": "monetary", "display_currency": order.pricelist_id.currency_id}'/>
-                                                  </span>
-                                              </td>
-                                              <td class='td-price-total'>
-                                                  <div class="text-right"
-                                                      t-field="line.price_subtotal"
-                                                      t-options='{"widget": "monetary", "display_currency": order.pricelist_id.currency_id}'/>
-                                              </td>
-                                          </tr>
-                                        </tbody>
-                                    </table>
-                                    <table class='table'>
-                                      <tr>
-                                          <td class="col-md-8"></td>
-                                          <td class="text-right-not-xs text-left-xs col-sm-2 col-xs-3">Subtotal:</td>
-                                          <td class="text-right col-sm-2 col-xs-3">
-                                              <span t-field="order.amount_untaxed" style="white-space: nowrap;" t-options="{'widget': 'monetary','from_currency': order.pricelist_id.currency_id,'display_currency': website.currency_id}" />
-                                          </td>
-                                      </tr>
-                                      <tr>
-                                          <td class='noborder'></td>
-                                          <td class="text-right noborder">Taxes:</td>
-                                          <td class="text-right-not-xs text-left-xs noborder">
-                                               <span t-field="order.amount_tax" style="white-space: nowrap;" t-options="{'widget': 'monetary', 'from_currency': order.pricelist_id.currency_id, 'display_currency': website.currency_id}" />
-                                          </td>
-                                      </tr>
-                                      <tr>
-                                          <td class='noborder'></td>
-                                          <td class="text-right"><strong>Total:</strong></td>
-                                          <td class="text-right-not-xs text-left-xs">
-                                              <strong t-field="order.amount_total"
-                                                  t-options='{"widget": "monetary", "display_currency": order.pricelist_id.currency_id}'/>
-                                          </td>
-                                      </tr>
-                                    </table>
-                                    <div class="clearfix" />
-                                    <div class="oe_structure" />
-                                    <h3 class="text-left">
-                                        <strong>Payment Information:</strong>
-                                    </h3>
-                                    <table class="table">
-                                        <tbody>
-                                            <tr>
-                                                <td colspan="2">
-                                                    <t t-esc="order.payment_acquirer_id.name" />
-                                                </td>
-                                                <td class="text-right" width="100">
-                                                    <strong>Total:</strong>
-                                                </td>
-                                                <td class="text-right" width="100">
-                                                    <strong t-field="order.amount_total" t-options="{'widget': 'monetary', 'display_currency': order.pricelist_id.currency_id}" />
-                                                </td>
-                                            </tr>
-                                        </tbody>
-                                    </table>
-                                    <t t-call="website_sale.payment_confirmation_status" />
-                                    <t t-if="request.env['ir.config_parameter'].sudo().get_param('auth_signup.invitation_scope', 'b2b') == 'b2c' and request.website.is_public_user()">
-                                        <p class='alert alert-info mt16'>
-                                            <a t-att-href='order.partner_id.signup_prepare() and order.partner_id.signup_url' class='btn btn-primary'>Sign Up</a>
-                                             Now to Follow Your Order
-                                        </p>
-                                    </t>
-                                </div>
-                            </div>
-                            <div class="col-md-3 hidden-sm hidden-xs text-muted">
-                                <h3 class='mt32'>&amp;nbsp;</h3>
-                                <t t-call='website_sale.bill_to'>
-                                    <t t-set="order" t-value= "order"/>
-                                </t>
-                            </div>
-                        </div>
                 </div>
                 <div class="oe_structure" />
             </div>
@@ -1500,39 +1492,55 @@
 
     <template id="total">
         <div id="cart_total" t-att-class="extra_class or ''" t-if="website_sale_order and website_sale_order.website_order_line">
-            <div class="row" id="order_total_untaxed">
-                <span class="col-xs-6 text-right text-muted">Subtotal:</span>
-                <span class="col-xs-6 text-right-not-xs text-left-xs text-muted">
-                    <span t-field="website_sale_order.amount_untaxed" style="white-space: nowrap;" t-options="{'widget': 'monetary','from_currency': website_sale_order.pricelist_id.currency_id,'display_currency': website.currency_id}" />
-                </span>
-            </div>
-            <div class="row" id="order_total_taxes">
-                <span class="col-xs-6 text-right text-muted" title="Taxes may be updated after providing shipping address"> Taxes:</span>
-                <span class="col-xs-6 text-right-not-xs text-left-xs text-muted">
-                    <span t-field="website_sale_order.amount_tax" style="white-space: nowrap;" t-options="{'widget': 'monetary', 'from_currency': website_sale_order.pricelist_id.currency_id, 'display_currency': website.currency_id}" />
-                </span>
-            </div>
-            <div class="row" id="order_total">
-                <hr class="mt8 mb0"/>
-                <span class="col-xs-6 text-right h4 mt0">Total:</span>
-                <span class="col-xs-6 text-right-not-xs text-left-xs h4 mt0" style="white-space: nowrap;">
-                    <span t-field="website_sale_order.amount_total" style="white-space: nowrap;" t-options="{'widget': 'monetary','from_currency': website_sale_order.pricelist_id.currency_id,'display_currency': website.currency_id}" />
-                </span>
-            </div>
+            <table class='table'>
+                  <tr id="empty">
+                      <t t-if='not no_rowspan'><td rowspan="10"/></t>
+                      <td class="col-sm-2 col-xs-3"></td>
+                      <td class="col-sm-2 col-xs-3" ></td>
+                  </tr>
+                  <tr id="order_total_untaxed">
+                      <td class="text-right noborder">Subtotal:</td>
+                      <td class="text-left-not-lg text-right-lg noborder" >
+                          <span t-field="website_sale_order.amount_untaxed" style="white-space: nowrap;" t-options="{'widget': 'monetary','from_currency': website_sale_order.pricelist_id.currency_id,'display_currency': website.currency_id}" />
+                      </td>
+                  </tr>
+                  <tr id="order_total_taxes">
+                      <td class="text-right noborder">Taxes:</td>
+                      <td class="text-left-not-lg text-right-lg  noborder">
+                           <span t-field="website_sale_order.amount_tax" style="white-space: nowrap;" t-options="{'widget': 'monetary', 'from_currency': website_sale_order.pricelist_id.currency_id, 'display_currency': website.currency_id}" />
+                      </td>
+                  </tr>
+                  <tr id="order_total">
+                      <td class="text-right"><strong>Total:</strong></td>
+                      <td class="text-left-not-lg text-right-lg">
+                          <strong t-field="website_sale_order.amount_total"
+                              t-options='{"widget": "monetary", "display_currency": website_sale_order.pricelist_id.currency_id}'/>
+                      </td>
+                  </tr>
+            </table>
         </div>
     </template>
 
-    <template id="reduction_code" inherit_id="website_sale.total" active="False" customize_show="True" name="Promo Code">
-        <xpath expr="//div[@id='cart_total']" position="after">
-            <div class='col-xs-12 col-sm-6 col-sm-pull-5 text-muted' t-if="not hide_coupon and website_sale_order and website_sale_order.website_order_line" id="coupon_box">
-                <p>
-                  Have a promo code? Fill in this field and apply.
-                </p>
-                <t t-call='website_sale.coupon_form'/>
-            </div>
+    <template id="reduction_code" inherit_id="website_sale.total" active="True" customize_show="True" name="Promo Code">
+        <xpath expr="//div[@id='cart_total']//table/tr[last()]" position="after">
+            <tr t-if="not hide_coupon">
+                <td colspan="3" class='noborder text-right-lg text-center'>
+                <span class=''>
+                    <t t-set='force_coupon' t-value="website_sale_order.pricelist_id.code or request.params.get('code_not_available')"/>
+                    <t t-if="not force_coupon">
+                        <a class='show_coupon'>I have a promo code?</a>
+                    </t>
+                    <div t-attf-class='coupon_form #{not force_coupon and "hidden"}'>
+                        <t t-call='website_sale.coupon_form'>
+                        </t>
+                    </div>
+                </span>
+                </td>
+            </tr>
         </xpath>
     </template>
 
+
     <template id="payment_confirmation_status">
         <div class="oe_website_sale_tx_status" t-att-data-order-id="order.id">
             <div t-att-class="'panel %s' % (
@@ -1568,23 +1576,6 @@
         </div>
     </template>
 
-    <template id='website_sale.bill_to' name="Bill to">
-        <div class="panel panel-info break-word">
-          <div class="panel-heading">Bill To:</div>
-          <div class="panel-body">
-            <div t-field="order.partner_invoice_id" t-options="{'widget': 'contact','fields': ['address', 'name', 'phone', 'email']}" />
-          </div>
-        </div>
-        <t t-if="not order.only_services" groups="sale.group_delivery_invoice_address">
-            <div class="panel panel-info break-word">
-              <div class="panel-heading">Ship To:</div>
-              <div class="panel-body">
-                <div t-field="order.partner_shipping_id" t-options="{'widget': 'contact','fields': ['address', 'name', 'phone']}" />
-              </div>
-            </div>
-        </t>
-    </template>
-
     <template id="website.layout_footer_copyright" inherit_id="website.layout" name="Footer Copyright">
         <xpath expr="//footer" position="inside">
             <div class="container mt16 mb8">
diff --git a/addons/website_sale_delivery/views/website_sale_delivery_templates.xml b/addons/website_sale_delivery/views/website_sale_delivery_templates.xml
index 3a39f64c27f..2d570094f66 100644
--- a/addons/website_sale_delivery/views/website_sale_delivery_templates.xml
+++ b/addons/website_sale_delivery/views/website_sale_delivery_templates.xml
@@ -2,16 +2,16 @@
 <odoo>
 
     <template id="cart_delivery" name="Delivery Costs" inherit_id="website_sale.total">
-        <xpath expr="//div[@id='order_total_untaxed']" position="before">
-            <div class="row" id="order_delivery" t-if="website_sale_order and website_sale_order.has_delivery">
-                  <span class="col-xs-6 text-right text-muted" title="Delivery will be updated after choosing a new delivery method"> Delivery:</span>
-                  <span class="col-xs-6 text-right-not-xs text-left-xs text-muted">
-                      <span t-field="website_sale_order.amount_delivery" style="white-space: nowrap;" t-options='{
-                              "widget": "monetary",
-                              "display_currency": website_sale_order.currency_id,
-                          }'/>
-                  </span>
-            </div>
+        <xpath expr="//tr[@id='order_total_untaxed']" position="before">
+            <tr id="order_delivery" t-if="website_sale_order and website_sale_order.has_delivery">
+              <td class="text-right noborder text-muted"  title="Delivery will be updated after choosing a new delivery method">Delivery:</td>
+              <td class="text-left-not-lg text-right-lg noborder text-muted" >
+                   <span t-field="website_sale_order.amount_delivery" style="white-space: nowrap;" t-options='{
+                      "widget": "monetary",
+                      "display_currency": website_sale_order.currency_id,
+                  }'/>
+              </td>
+            </tr>
         </xpath>
     </template>
 
@@ -24,7 +24,7 @@
 
     <template id="payment_delivery" name="Delivery Costs" inherit_id="website_sale.payment">
         <xpath expr="//div[@id='payment_method']" position="before">
-            <div t-if="deliveries" class="col-md-12 o_website_sale_rightfit" id="delivery_carrier">
+            <div t-if="deliveries" class="col-md-12" id="delivery_carrier">
                 <h3 class="mb24">Choose a delivery method</h3>
                 <div class="panel panel-default" id="delivery_method">
                     <ul class="list-group">
@@ -50,11 +50,6 @@
                     </t>
                     </ul>
                 </div>
-                <a class="btn-link"
-                        groups="base.group_system"
-                        t-attf-href="/web#return_label=Website&amp;action=#{delivery_action_id}">
-                    <i class="fa fa-arrow-right" aria-hidden="true"></i> Add delivery methods
-                </a>
             </div>
         </xpath>
     </template>
diff --git a/addons/website_sale_stock/views/website_sale_stock_templates.xml b/addons/website_sale_stock/views/website_sale_stock_templates.xml
index 87798d2fe63..87d9dfd2bdd 100644
--- a/addons/website_sale_stock/views/website_sale_stock_templates.xml
+++ b/addons/website_sale_stock/views/website_sale_stock_templates.xml
@@ -39,8 +39,8 @@
     </xpath>
   </template>
 
-  <template id="website_sale_stock_payment" inherit_id="website_sale.payment">
-    <xpath expr="//table[@id='cart_products']//td[hasclass('td-qty')]" position="inside">
+  <template id="website_sale_stock_payment" inherit_id="website_sale.cart_summary">
+     <xpath expr="//table[@id='cart_products']//td[hasclass('td-qty')]" position="inside">
       <t t-if='line._get_stock_warning(clear=False)'>
         <i class='fa fa-warning text-warning' t-att-title="line._get_stock_warning()" />
       </t>
diff --git a/addons/website_sale_stock_options/__manifest__.py b/addons/website_sale_stock_options/__manifest__.py
index 472b4505206..83a83ae163f 100644
--- a/addons/website_sale_stock_options/__manifest__.py
+++ b/addons/website_sale_stock_options/__manifest__.py
@@ -2,7 +2,7 @@
 # Part of Odoo. See LICENSE file for full copyright and licensing details.
 
 {
-    'name': 'Website Sale Stock&Options',
+    'name': 'Website Sale Stock & Options',
     'category': 'Website',
     'description': """
 Odoo E-Commerce