diff --git a/addons/website_sale/static/src/css/website_sale.css b/addons/website_sale/static/src/css/website_sale.css
index c70ad591a53..1e07076f96b 100644
--- a/addons/website_sale/static/src/css/website_sale.css
+++ b/addons/website_sale/static/src/css/website_sale.css
@@ -23,46 +23,46 @@
   margin-right: auto;
 }
 
-.oe_website_sale ul ul {
-  margin-left: 1.5em;
-}
-.oe_website_sale ul ul .td-product_name {
+.oe_website_sale .td-product_name, .oe_website_sale h1[itemprop="name"], .oe_website_sale .oe_product_cart form h5 {
   word-wrap: break-word;
 }
-.oe_website_sale ul ul .td-img {
+.oe_website_sale .td-product_name {
+  min-width: 140px;
+}
+.oe_website_sale .td-img {
   width: 100px;
 }
-.oe_website_sale ul ul .td-qty {
+.oe_website_sale .td-qty {
   width: 130px;
 }
-.oe_website_sale ul ul .td-price, .oe_website_sale ul ul .td-price-total {
+.oe_website_sale .td-price, .oe_website_sale .td-price-total {
   width: 100px;
 }
 @media (max-width: 767px) {
-  .oe_website_sale ul ul .td-img, .oe_website_sale ul ul .td-price-total {
+  .oe_website_sale .td-img, .oe_website_sale .td-price-total {
     display: none;
   }
-  .oe_website_sale ul ul .td-qty {
-    width: 80px;
+  .oe_website_sale .td-qty {
+    width: 60px;
   }
-  .oe_website_sale ul ul .td-price {
+  .oe_website_sale .td-price {
     width: 80px;
   }
 }
 @media (max-width: 476px) {
-  .oe_website_sale ul ul .td-qty {
+  .oe_website_sale .td-qty {
     width: 60px;
   }
-  .oe_website_sale ul ul .oe_cart table thead, .oe_website_sale ul ul #modal_optional_products table thead {
+  .oe_website_sale .oe_cart table thead, .oe_website_sale #modal_optional_products table thead {
     display: none;
   }
-  .oe_website_sale ul ul .oe_cart table td.td-img, .oe_website_sale ul ul #modal_optional_products table td.td-img {
+  .oe_website_sale .oe_cart table td.td-img, .oe_website_sale #modal_optional_products table td.td-img {
     display: none;
   }
-  .oe_website_sale ul ul .oe_cart a span.hidden-xs, .oe_website_sale ul ul #modal_optional_products a span.hidden-xs {
+  .oe_website_sale .oe_cart a span.hidden-xs, .oe_website_sale #modal_optional_products a span.hidden-xs {
     display: none !important;
   }
-  .oe_website_sale ul ul .oe_cart a span.visible-xs-inline, .oe_website_sale ul ul #modal_optional_products a span.visible-xs-inline {
+  .oe_website_sale .oe_cart a span.visible-xs-inline, .oe_website_sale #modal_optional_products a span.visible-xs-inline {
     display: inline !important;
   }
 }
@@ -535,6 +535,14 @@ ul.wizard li:first-child {
   border-radius: 4px 0 0 4px;
 }
 
+ul.wizard li:last-child {
+  border-radius: 0 4px 4px 0;
+  border-right-width: 1px;
+}
+ul.wizard li:last-child .chevron {
+  display: none;
+}
+
 /* Shipping & Billing */
 .label-optional {
   font-weight: normal;
diff --git a/addons/website_sale/static/src/css/website_sale.sass b/addons/website_sale/static/src/css/website_sale.sass
index e28ebd40182..11acccca662 100644
--- a/addons/website_sale/static/src/css/website_sale.sass
+++ b/addons/website_sale/static/src/css/website_sale.sass
@@ -20,12 +20,12 @@
         margin-left: auto
         margin-right: auto
 
-.oe_website_sale ul ul
-    margin-left: 1.5em
-
-    .td-product_name
+.oe_website_sale
+    .td-product_name, h1[itemprop="name"], .oe_product_cart form h5
         word-wrap: break-word
 
+    .td-product_name
+        min-width: 140px
     .td-img
         width: 100px
 
@@ -39,7 +39,7 @@
         .td-img, .td-price-total
             display: none
         .td-qty
-            width: 80px
+            width: 60px
         .td-price
             width: 80px
 
@@ -466,6 +466,12 @@ ul.wizard li:first-child
     padding-left: 15px
     border-radius: 4px 0 0 4px
 
+ul.wizard li:last-child
+    border-radius: 0 4px 4px 0
+    border-right-width: 1px
+    .chevron
+        display: none
+
 /* Shipping & Billing */
 .label-optional
     font-weight: normal
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index 81dba1e66e5..71b110dfca0 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -745,6 +745,8 @@
                     </a>
                 </t>
                 <t t-if="not (step&gt;20 and step&lt;50)">
+                    <!-- why website_sale_order is not set here ? -->
+                    <t t-set="website_sale_order" t-value="website.sale_get_order()" />
                     <t t-if="not website_sale_order or not website_sale_order.website_order_line or not website_sale_order.only_services">Shipping &amp;</t>
                         Billing<span class="chevron"/>
                 </t>
@@ -760,52 +762,58 @@
 
     <template id="extra_info" name="Checkout Extra Info">
         <t t-call="website.layout">
+            <t t-set="no_footer">1</t>
             <div id="wrap">
                 <div class="container oe_website_sale">
-                    <t t-call="website_sale.wizard_checkout">
-                        <t t-set="step" t-value="30" />
-                    </t>
-                    <h1 class="mb32">Extra Step</h1>
+                    <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>
+                            <h2 class="mb32 ml16">Extra Step</h2>
+                          </div>
+                        </div>
+                    </div>
                 </div>
-                <div class="oe_structure">
-                    <form action="/website_form/" method="post" class="s_website_form form-horizontal container-fluid mt32" 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">
-                                <label class="control-label" for="client_order_ref">
-                                  Your Reference
-                                </label>
+                <div class="oe_structure row">
+                    <div class='col-md-6 col-md-offset-3'>
+                        <form action="/website_form/" method="post" class="s_website_form form-horizontal container-fluid  text-right-not-xs" 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-4 col-sm-5">
+                                    <label class="control-label" for="client_order_ref">Your Reference</label>
+                                </div>
+                                <div class="col-md-8 col-sm-7">
+                                    <input type="text" class="form-control o_website_form_input" name="client_order_ref"/>
+                                </div>
                             </div>
-                            <div class="col-md-7 col-sm-8">
-                                <input type="text" class="form-control o_website_form_input" name="client_order_ref"/>
+                            <div class="form-group form-field o_website_form_custom">
+                                <div class="col-md-4 col-sm-5">
+                                    <label class="control-label" for="Give us your feedback...">Give us your feedback...</label>
+                                </div>
+                                <div class="col-md-8 col-sm-7">
+                                    <textarea class="form-control o_website_form_input" name="Give us your feedback..." />
+                                </div>
                             </div>
-                        </div>
-                        <div class="form-group form-field o_website_form_custom">
-                            <div class="col-md-3 col-sm-4 text-right">
-                                <label class="control-label" for="Give us your feedback...">Give us your feedback...</label>
+                            <div class="form-group form-field o_website_form_custom">
+                                <div class="col-md-4 col-sm-5">
+                                    <label class="control-label" for="a_document">A document to provide ? </label>
+                                </div>
+                                <div class="col-md-8 col-sm-7">
+                                    <input type="file" class="form-control o_website_form_input" name="a_document" />
+                                </div>
                             </div>
-                            <div class="col-md-7 col-sm-8">
-                                <textarea class="form-control o_website_form_input" name="Give us your feedback..." />
+                            <div class="form-group">
+                                <div class="col-md-4 col-sm-5">
+                                </div>
+                                <div class="col-md-8 col-sm-7">
+                                    <a href="/shop/checkout" class="btn btn-default mb32 pull-left"><span class="fa fa-long-arrow-left" /> Previous</a>
+                                    <a class="btn btn-default btn-primary pull-right mb32 o_website_form_send" href="/shop/confirm_order">Next <span class="fa fa-long-arrow-right" /></a>
+                                </div>
                             </div>
-                        </div>
-                        <div class="form-group form-field o_website_form_custom">
-                            <div class="col-md-3 col-sm-4 text-right">
-                                <label class="control-label" for="a_document">A document to provide ? </label>
-                            </div>
-                            <div class="col-md-7 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-offset-3 col-sm-offset-4 col-sm-8 col-md-7">
-                                <span class="btn btn-primary pull-right btn-lg o_website_form_send o_default_snippet_text">
-                                    <span>Next </span><span class="fa fa-long-arrow-right" />
-                                </span>
-                                <span id="o_website_form_result" class="text-danger ml8" />
-                            </div>
-                        </div>
-                    </form>
+                        </form>
+                    </div>
                     <!--
-                        <t t-set="website_sale_order" t-value="website.sale_get_order()" />
                         <script>
                             $("input[name='client_order_ref']").val(_.unescape('<t t-esc="escape(website_sale_order.client_order_ref or '') or ''"/>'));
                         </script>
@@ -908,10 +916,12 @@
         <t t-call="website.layout">
             <div id="wrap">
                 <div class="container oe_website_sale">
-                    <t t-call="website_sale.wizard_checkout">
-                        <t t-set="step" t-value="10" />
-                    </t>
-                    <h1 class="mb32">Shopping Cart</h1>
+                    <div class="row">
+                        <t t-call="website_sale.wizard_checkout">
+                            <t t-set="step" t-value="10" />
+                        </t>
+                        <h2 class="mb32 ml16">Shopping Cart</h2>
+                    </div>
                     <div class="row">
                         <div class="col-md-8 col-sm-9 oe_cart">
                             <t t-call="website_sale.cart_lines" />
@@ -923,14 +933,14 @@
                             </a>
                             <div class="oe_structure" />
                         </div>
-                        <div class="col-lg-3 col-lg-offset-1 col-sm-3 col-md-3 hidden-xs text-muted" id="right_column">
-                            <h4>Policies</h4>
-                            <ul class="list-unstyled mb32">
+                        <div class="col-lg-3 col-lg-offset-1 col-sm-3 col-md-3 text-muted" id="right_column">
+                            <h4 class='hidden-xs'>Policies</h4>
+                            <ul class="hidden-xs list-unstyled mb32">
                                 <li>☑ 30-days money-back guarantee</li>
                                 <li>☑ Invoice sent by e-Mail</li>
                             </ul>
-                            <h4>Secure Payment</h4>
-                            <ul class="list-unstyled mb32">
+                            <h4 class='hidden-xs'>Secure Payment</h4>
+                            <ul class="hidden-xs list-unstyled mb32">
                                 <li>☑ 256 bit encryption</li>
                                 <li>☑ Processed by Ogone</li>
                             </ul>
@@ -974,7 +984,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' t-if="suggested_products">Suggested Accessories:</h5>
+            <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">
                 <tbody>
                     <tr t-foreach="suggested_products" t-as="product">
@@ -1023,8 +1033,8 @@
         <xpath expr="//div[@id='right_column']" position="inside">
             <h4>Coupon Code</h4>
             <p>
-                        Have a coupon code? Fill in this field and apply.
-                      </p>
+              Have a coupon code? Fill in this field and apply.
+            </p>
             <t t-if="code_not_available">
                 <p class="bg-warning">This promo code is not available</p>
             </t>
@@ -1294,48 +1304,51 @@
                             </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>
-                                <h1 class="mb32">Confirm Order</h1>
+                          <div class='row'>
+                            <t t-call="website_sale.wizard_checkout">
+                                <t t-set="step" t-value="40" />
+                            </t>
+                            <h2 class="mb32 ml16">Confirm Order</h2>
+                         </div>
+                         <div class="row">
+                            <div class='col-md-12'>
+                                <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="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>
-                            <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="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>
                                 <t t-call="website_sale.total">
                                     <t t-set='extra_class' t-value='"col-sm-4 col-sm-offset-8 col-xs-8 col-xs-offset-4"'/>
@@ -1343,8 +1356,8 @@
                             </div>
                             <div class="clearfix" />
                             <div class="oe_structure" />
-
-                            <div class="js_payment mb64 row" t-if="acquirers and website_sale_order.amount_total" id="payment_method">
+                          </div>
+                          <div class="js_payment mb64 row" t-if="acquirers and website_sale_order.amount_total" id="payment_method">
                                 <div class="col-lg-5 col-sm-6">
                                     <h4>Payment Method:</h4>
                                     <ul class="list-unstyled">
@@ -1402,8 +1415,8 @@
                                         </div>
                                     </t>
                                 </div>
-                            </div>
-                            <div class="js_payment mb64 row" t-if="not website_sale_order.amount_total" id="payment_method">
+                          </div>
+                          <div class="js_payment mb64 row" t-if="not website_sale_order.amount_total" id="payment_method">
                                 <div class="col-sm-12">
                                     <form target="_self" action="/shop/payment/validate" method="post" class="pull-right">
                                         <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" />
@@ -1413,7 +1426,7 @@
                                         </a>
                                     </form>
                                 </div>
-                            </div>
+                          </div>
                         </div>
 
 
@@ -1663,10 +1676,12 @@
             <t t-set="additional_title">Shop - Confirm payment</t>
             <div id="wrap">
                 <div class="container oe_website_sale">
-                    <t t-call="website_sale.wizard_checkout">
-                        <t t-set="step" t-value="40" />
-                    </t>
-                    <h1 class="mb32">Confirm <em t-field="tx.sale_order_id.name" /> Payment</h1>
+                    <div class="row">
+                        <t t-call="website_sale.wizard_checkout">
+                            <t t-set="step" t-value="40" />
+                        </t>
+                        <h2 class="mb32 ml16">Confirm <em t-field="tx.sale_order_id.name" /> Payment</h2>
+                    </div>
                     <div class="row">
                         <div class="col-lg-8 col-md-9 col-sm-12">
                             <div class='row'>
diff --git a/addons/website_sale_options/static/src/css/website_sale.css b/addons/website_sale_options/static/src/css/website_sale.css
index 4352127081b..fa9b85cbce0 100644
--- a/addons/website_sale_options/static/src/css/website_sale.css
+++ b/addons/website_sale_options/static/src/css/website_sale.css
@@ -3,5 +3,15 @@
 }
 
 table.js_cart_lines .optional_product .js_delete_product {
-    display: none
-}
\ No newline at end of file
+  display: none;
+}
+
+div#modal_optional_products table tr td {
+  border: 0px;
+}
+
+@media (max-width: 767px) {
+  div#modal_optional_products .td-qty {
+    display: none;
+  }
+}
diff --git a/addons/website_sale_options/static/src/css/website_sale.sass b/addons/website_sale_options/static/src/css/website_sale.sass
index a71219d3b32..7dad69368c3 100644
--- a/addons/website_sale_options/static/src/css/website_sale.sass
+++ b/addons/website_sale_options/static/src/css/website_sale.sass
@@ -3,4 +3,11 @@
         display: none
 
 table.js_cart_lines .optional_product .js_delete_product
-    display: none
\ No newline at end of file
+    display: none
+
+div#modal_optional_products table tr td
+    border: 0px
+
+@media (max-width: 767px)
+    div#modal_optional_products .td-qty
+        display: none
diff --git a/addons/website_sale_options/static/src/js/website_sale.js b/addons/website_sale_options/static/src/js/website_sale.js
index ecd5959273f..797879d399c 100644
--- a/addons/website_sale_options/static/src/js/website_sale.js
+++ b/addons/website_sale_options/static/src/js/website_sale.js
@@ -10,11 +10,6 @@ if(!$('.js_add_cart_variants[data-attribute_value_ids]').length) {
     return $.Deferred().reject("DOM doesn't contain '.js_add_cart_variants[data-attribute_value_ids]'");
 }
 
-if (window.outerWidth <= 468 && window.outerWidth > 0) {
-    console.log('xs screen');
-    return;
-}
-
 $('.oe_website_sale #add_to_cart, .oe_website_sale #products_grid .a-submit')
     .off('click')
     .removeClass('a-submit')
diff --git a/addons/website_sale_options/views/website_sale_options_templates.xml b/addons/website_sale_options/views/website_sale_options_templates.xml
index ccb6a4b459b..74a50aadac1 100644
--- a/addons/website_sale_options/views/website_sale_options_templates.xml
+++ b/addons/website_sale_options/views/website_sale_options_templates.xml
@@ -35,25 +35,36 @@
         <table class="table table-striped table-condensed">
           <thead>
               <tr>
-                  <th colspan="2">Product</th>
-                  <th style="min-width: 140px;"> </th>
-                  <th width="100">Price</th>
-                  <th class='td-qty'>Quantity</th>
+                  <th class="td-img">Product</th>
+                  <th></th>
+                  <th class="text-center td-qty">Quantity</th>
+                  <th class="text-center td-price">Price</th>
               </tr>
           </thead>
           <tbody>
               <tr id="product_confirmation">
-                <td width="100">
+                <td class='td-img'>
                   <span t-field="product.image_medium" t-options='{"widget": "image" }'/>
                 </td>
-                <td colspan="2">
+                <td class='td-product_name'>
                   <strong t-field="product.display_name"/>
-                  <div class="text-muted">
+                  <div class="text-muted small">
                     <div t-field="product.description_sale"/>
                     <div class="js_attributes"/>
                   </div>
                 </td>
-                <td>
+                <td class="text-center td-qty">
+                  <div class="css_quantity input-group oe_website_spinner">
+                      <a t-attf-href="#" class="mb8 input-group-addon js_add_cart_json hidden-xs">
+                          <i class="fa fa-minus"></i>
+                      </a>
+                      <input type="text" class="js_quantity form-control" data-min="1" name="add_qty" value="1"/>
+                      <a t-attf-href="#" class="mb8 input-group-addon float_left js_add_cart_json hidden-xs">
+                          <i class="fa fa-plus"></i>
+                      </a>
+                  </div>
+                </td>
+                <td class="text-center td-price" name="price">
                   <span t-attf-class="text-danger oe_default_price" t-att-style="'text-decoration: line-through; white-space: nowrap;' + '' if (compute_currency(product.lst_price) - product.with_context(quantity=1).website_price ) &gt; 0.01 else 'display: none;'"
                     t-field="product.lst_price"
                     t-options='{
@@ -69,37 +80,26 @@
                        "display_currency": website.currency_id
                    }'/>
                 </td>
-                <td>
-                  <div class="css_quantity input-group oe_website_spinner">
-                      <a t-attf-href="#" class="mb8 input-group-addon js_add_cart_json hidden-xs">
-                          <i class="fa fa-minus"></i>
-                      </a>
-                      <input type="text" class="js_quantity form-control" data-min="1" name="add_qty" value="1"/>
-                      <a t-attf-href="#" class="mb8 input-group-addon float_left js_add_cart_json hidden-xs">
-                          <i class="fa fa-plus"></i>
-                      </a>
-                  </div>
-                </td>
               </tr>
 
-              <tr t-if="product.optional_product_ids"><td colspan="5"><h4>Select Your Options:</h4></td></tr>
+              <tr t-if="product.optional_product_ids"><td colspan="2"><h4>Select Your Options:</h4></td></tr>
               <tr class="js_product" t-foreach="product.optional_product_ids" t-as="product">
-                <td width="100">
+                <td class="td-img">
                   <input type="hidden" class="product_id" t-attf-name="optional-product-#{product_index}" t-att-value="product.product_variant_id.id if len(product.product_variant_ids) == 1 else '0'"/>
                   <span t-field="product.image_small" t-options='{"widget": "image"}'/>
                 </td>
-                <td>
+                <td class='td-product_name'>
                   <div class="pull-left">
                     <strong class="media-heading" t-field="product.name"/>
-                    <div class="text-muted" t-field="product.description_sale"/>
+                    <div class="text-muted small" t-field="product.description_sale"/>
                   </div>
                 </td>
-                <td>
+                <td class="td-qty">
                   <div class="pull-right">
                     <t t-call="website_sale.variants"/>
                   </div>
                 </td>
-                <td>
+                <td class="td-price">
                   <span class="text-danger oe_default_price oe_optional"
                     t-field="product.lst_price"
                     t-options='{
@@ -114,14 +114,15 @@
                        "display_currency": website.currency_id
                    }'/>
                   <p class="css_not_available_msg bg-danger" style="position:absolute; padding: 15px;">Product not available</p>
-                </td>
-                <td>
-                  <input type="hidden" class="js_optional_same_quantity" t-attf-name="optional-add-#{product_index}" value="0"/>
-                  <a href="#" class="js_add"><strong>Add to Cart</strong></a>
-                  <span class="js_remove hidden">
-                    <span class="js_item">1 Item</span><span class="js_items hidden">5 Items</span><br/>
-                    <a href="#" class="js_remove"><small>Remove from cart</small></a>
-                  </span>
+
+                  <div class='mt8'>
+                    <input type="hidden" class="js_optional_same_quantity" t-attf-name="optional-add-#{product_index}" value="0"/>
+                    <a href="#" class="js_add btn btn-sm btn-info"><strong>Add<span class='hidden-xs'> to Cart</span></strong></a>
+                    <span class="js_remove hidden">
+                      <span class="js_item">1 Item</span><span class="js_items hidden">5 Items</span><br/>
+                      <a href="#" class="js_remove btn btn-sm btn-info"><small>Remove <span class='hidden-xs'> from Cart</span></small></a>
+                    </span>
+                  </div>
                 </td>
               </tr>