diff --git a/addons/website_sale_quote/__openerp__.py b/addons/website_sale_quote/__openerp__.py
index 726bfa0bb47..03806300594 100644
--- a/addons/website_sale_quote/__openerp__.py
+++ b/addons/website_sale_quote/__openerp__.py
@@ -9,7 +9,7 @@ OpenERP Sale Quote Roller
 
         """,
     'author': 'OpenERP SA',
-    'depends': ['sale', 'portal_sale', 'mail'],
+    'depends': ['website','sale', 'portal_sale', 'mail'],
     'data': [
         'views/website_sale_quote.xml',
         'sale_quote_view.xml',
diff --git a/addons/website_sale_quote/controllers/main.py b/addons/website_sale_quote/controllers/main.py
index 23ccc8ca1e4..98ca55dbedf 100644
--- a/addons/website_sale_quote/controllers/main.py
+++ b/addons/website_sale_quote/controllers/main.py
@@ -97,3 +97,19 @@ class sale_quote(http.Controller):
             'template': quote,
         }
         return request.website.render('website_sale_quote.so_template', values)
+        
+    @website.route(['/quote/add_line'], type='json', auth="public")
+    def add(self, option=None, order=None, product=None, **post):
+        vals = {}
+        product_obj = request.registry.get('product.product').browse(request.cr, SUPERUSER_ID, int(product), context=request.context)
+        vals.update({
+            'price_unit': product_obj.list_price,
+            'website_description': product_obj.website_description,
+            'name': product_obj.name,
+            'order_id': int(order),
+            'product_id' : product_obj.id,
+        })
+        new = request.registry.get('sale.order.line').create(request.cr, SUPERUSER_ID, vals, context=request.context)
+        request.registry.get('sale.option.line').write(request.cr, SUPERUSER_ID, [int(option)], {'add_to_line': True}, context=request.context)
+        return [new]
+
diff --git a/addons/website_sale_quote/models/order.py b/addons/website_sale_quote/models/order.py
index 6c9424f4b3f..fe463c45a8f 100644
--- a/addons/website_sale_quote/models/order.py
+++ b/addons/website_sale_quote/models/order.py
@@ -33,11 +33,12 @@ class sale_quote_template(osv.osv):
         'quote_line': fields.one2many('sale.quote.line', 'quote_id', 'Quote Template Lines'),
         'note': fields.text('Terms and conditions'),
     }
+
     def open_template(self, cr, uid, quote_id, context=None):
         return {
             'type': 'ir.actions.act_url',
             'target': 'self',
-            'url': '/template/%d' % quote_id
+            'url': '/template/%d' % quote_id[0]
         }
 
 
@@ -86,6 +87,7 @@ class sale_order(osv.osv):
         'access_token': fields.char('Security Token', size=256, required=True),
         'template_id': fields.many2one('sale.quote.template', 'Quote Template'),
         'website_description': fields.html('Description'),
+        'options' : fields.one2many('sale.option.line', 'option_id', 'Optional Products Lines'),
     }
     _defaults = {
         'access_token': lambda self, cr, uid, ctx={}: str(uuid.uuid4())
@@ -95,7 +97,7 @@ class sale_order(osv.osv):
         return {
             'type': 'ir.actions.act_url',
             'target': 'self',
-            'url': '/quote/%d/%s' % (quote.id, quote.access_token)
+            'url': '/quote/%s/%s' % (quote.id, quote.access_token)
         }
 
     def _get_sale_order_line(self, cr, uid, template_id, context=None):
@@ -124,3 +126,31 @@ class sale_order(osv.osv):
         for line in order_line:
             products += line.product_id.product_tmpl_id.recommended_products(context=context)
         return products
+        
+class sale_option_line(osv.osv):
+    _name = "sale.option.line"
+    _description = "Sale Options"
+    _columns = {
+        'option_id': fields.many2one('sale.order', 'Sale Order Reference', required=True, ondelete='cascade', select=True),
+        'name': fields.text('Description', required=True),
+        'product_id': fields.many2one('product.product', 'Product', domain=[('sale_ok', '=', True)], change_default=True),
+        'website_description': fields.html('Line Description'),
+        'price_unit': fields.float('Unit Price', required=True),
+        'add_to_line': fields.boolean('Add to Line'),
+    }
+
+    def on_change_product_id(self, cr, uid, ids, product, context=None):
+        vals = {}
+        product_obj = self.pool.get('product.product').browse(cr, uid, product, context=context)
+        vals.update({
+            'price_unit': product_obj.list_price,
+            'website_description': product_obj.website_description,
+            'name': product_obj.name,
+        })
+        return {'value': vals}
+
+class product_template(osv.Model):
+    _inherit = "product.template"
+    _columns = {
+        'website_description': fields.html('Description for the website'),
+    }
diff --git a/addons/website_sale_quote/sale_quote_view.xml b/addons/website_sale_quote/sale_quote_view.xml
index 2935b082bed..8fb9baaac0b 100644
--- a/addons/website_sale_quote/sale_quote_view.xml
+++ b/addons/website_sale_quote/sale_quote_view.xml
@@ -10,6 +10,17 @@
                     <button name="open_quotation" string="View Quotation" type="object"
                         attrs="{'invisible': [('template_id','=',False)]}"/>
                 </xpath>
+                <xpath expr="//field[@name='order_line']" position="after">
+                    <label string="Optional Products &amp; Services" for="options"/>
+                    <field name="options">
+                        <tree string="Sales Quote Template Lines" editable="bottom">
+                                <field name="product_id" on_change="on_change_product_id(product_id)"/>
+                                <field name="name"/>
+                                <field name="price_unit"/>
+                                <field name="website_description" invisible="1"/>
+                        </tree>
+                    </field>
+                </xpath>
                 <xpath expr="//field[@name='client_order_ref']" position="after">
                     <field name="template_id" on_change="onchange_template_id(template_id)"/>
                     <field name="website_description" invisible="1"/>
diff --git a/addons/website_sale_quote/static/src/js/sale_quote.js b/addons/website_sale_quote/static/src/js/sale_quote.js
index 5e187816143..97345d2255f 100644
--- a/addons/website_sale_quote/static/src/js/sale_quote.js
+++ b/addons/website_sale_quote/static/src/js/sale_quote.js
@@ -20,5 +20,23 @@ $(document).ready(function () {
                 });
         return false;
     });
+
+    $('a.js_add_line_json').on('click', function (ev) {
+        ev.preventDefault();
+        var $link = $(ev.currentTarget);
+        var href = $link.attr("href");
+        var order = $link.attr("href").match(/order=([0-9]+)/);
+        var option = href.match(/add_line\/([0-9]+)/);
+        var product = $link.attr("href").match(/product=([0-9]+)/);
+        openerp.jsonRpc("/quote/add_line/", 'call', {
+                'option': option[1],
+                'order': order[1],
+                'product': product[1],
+                })
+                .then(function (data) {
+                    location.reload();
+                });
+        return false;
+    });
 });
 //vim:et fdc=0 fdl=0 foldnestmax=3 fdm=syntax:
diff --git a/addons/website_sale_quote/views/website_sale_quote.xml b/addons/website_sale_quote/views/website_sale_quote.xml
index a5e2f8b9188..ae677990862 100644
--- a/addons/website_sale_quote/views/website_sale_quote.xml
+++ b/addons/website_sale_quote/views/website_sale_quote.xml
@@ -2,7 +2,34 @@
 <openerp>
     <data>
         <template id="pricing" name="Price">
+          <ul class="wizard pull-right">
+              <li></li>
+          </ul>
+
             <section id="quote" class="container">
+                 <div class="col-xs-6 col-sm-6 col-md-6 text-muted">
+                    <h4>Bill To:</h4>
+                    <div t-field="quotation.partner_invoice_id" t-field-options='{
+                        "widget": "contact",
+                        "fields": ["address", "name", "phone", "email"]
+                        }'/>
+                    <h4 class="mt32">Ship To:</h4>
+                    <t t-if="quotation.partner_shipping_id and quotation.partner_shipping_id.id != quotation.partner_invoice_id.id">
+                      <div t-field="quotation.partner_shipping_id" t-field-options='{
+                        "widget": "contact",
+                        "fields": ["address", "name", "phone"]
+                        }'/>
+                    </t>
+                    <address t-if="quotation.partner_shipping_id.id == quotation.partner_invoice_id.id">Ship to the same address</address>
+                </div>
+                <div class="col-xs-6 col-sm-6 col-md-6 text-right text-muted">
+                    <p>
+                        <em>Date: <t t-esc="quotation.date_order"/></em>
+                    </p>
+                    <p>
+                        <em>Quotation #: <t t-esc="quotation.name"/></em>
+                    </p>
+                </div>
                 <table class="table table-hover">
                     <thead>
                         <tr>
@@ -19,18 +46,8 @@
                                 <div t-field="line.name"/>
                             </td>
                             <td>
-                                <div class="input-group">
-                                    <span class="input-group-addon">
-                                        <a t-href="./update_line/#{ line.id }/?order_id=#{ quotation.id }&amp;remove=True" class="mb8 js_update_line_json">
-                                            <span class="fa fa-minus"/>
-                                        </a>
-                                    </span>
-                                    <input type="text" class="js_quantity form-control" t-att-data-id="line.id" t-att-value="line.product_uom_qty"/>
-                                    <span class="input-group-addon">
-                                        <a t-href="./update_line/#{ line.id }/?order_id=#{ quotation.id }" class="mb8 js_update_line_json">
-                                            <span class="fa fa-plus"/>
-                                        </a>
-                                    </span>
+                                <div id="quote_qty">
+                                    <t t-esc="line.product_uom_qty"/>
                                 </div>
                             </td>
                             <td>
@@ -76,6 +93,24 @@
             </section>
         </template>
 
+        <template id="change_quantity" inherit_option_id="website_sale_quote.pricing" name="Change Quantity">
+            <xpath expr="//div[@id='quote_qty']" position="replace">
+                <div class="input-group">
+                    <span class="input-group-addon">
+                        <a t-href="./update_line/#{ line.id }/?order_id=#{ quotation.id }&amp;remove=True" class="mb8 js_update_line_json">
+                            <span class="fa fa-minus"/>
+                        </a>
+                    </span>
+                    <input type="text" class="js_quantity form-control" t-att-data-id="line.id" t-att-value="line.product_uom_qty"/>
+                    <span class="input-group-addon">
+                        <a t-href="./update_line/#{ line.id }/?order_id=#{ quotation.id }" class="mb8 js_update_line_json">
+                            <span class="fa fa-plus"/>
+                        </a>
+                    </span>
+                </div>
+            </xpath>
+        </template>
+
         <template id="quote_status">
             <div class="btn-group btn-group-lg mt16 mb16" t-if="quotation.state in ('draft', 'sent', 'waiting_date')">
                 <a class="btn btn-success fa fa-check" type="submit" t-href="/quote/#{ quotation.id }/accept">
@@ -137,66 +172,72 @@
                     <script type="text/javascript" src="/website_sale_quote/static/src/js/sale_quote.js"></script>
                     <t t-raw="head or ''"/>
                 </t>
-                <div class="col-md-4">
-                    <ul class="nav nav-pills nav-stacked" data-spy="affix">
-                        <li class="active">
-                            <a href="#introduction11" data-toggle="tab">Introduction</a>
-                        </li>
-                        <li t-foreach="quotation.order_line" t-as="line">
-                            <a t-att-href="'#%s'% line.id" data-toggle="tab">
-                                <t t-raw="line.product_id.name_template"/>
-                            </a>
-                        </li>
-                        <li><a href="#quote" data-toggle="tab">Pricing</a></li>
-                        <li><a href="#terms" data-toggle="tab">Terms &amp; Conditions</a></li>
-                    </ul>
-                </div>
-                <div class="col-md-8">
-                    <t t-call="website_sale_quote.quote_status"/>
-                    <div class="modal fade" id="modeldecline" role="dialog" aria-hidden="true">
-                      <div class="modal-dialog">
-                        <div class="modal-content">
-                          <div class="modal-header">
-                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
-                            <h4 class="modal-title">Reason</h4>
-                          </div>
-                          <form id="post" accept-charset="UTF-8" method="POST" t-att-action="'/quote/%%s/post#post' %% (quotation.id)">
-                              <div class="modal-body">
-                                <textarea rows="3" id="decline_message" name="decline_message" placeholder="Your Comment....." class="form-control span7"> </textarea>
-                            </div>
-                          <div class="modal-footer">
-                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-                                <button type="submit" t-att-id="quotation.id" class="btn btn-info">Post</button>
-                          </div>
-                        </form>
-                        </div>
-                      </div>
+                <body data-spy="scroll" data-target=".navbar">
+                    <div class="col-md-4 navbar">
+                        <ul class="nav nav-pills nav-stacked" data-spy="affix">
+                            <li class="active">
+                                <a href="#introduction11" data-toggle="tab">Introduction</a>
+                            </li>
+                            <li t-foreach="quotation.order_line" t-as="line">
+                                <a t-att-href="'#%s'% line.id" data-toggle="tab">
+                                    <t t-raw="line.product_id.name"/>
+                                </a>
+                            </li>
+                            <li><a href="#quote" data-toggle="tab">Pricing</a></li>
+                            <li><a href="#terms" data-toggle="tab">Terms &amp; Conditions</a></li>
+                        </ul>
                     </div>
-                    <section id="introduction11" class="tab-pane active" t-field="quotation.website_description">
-                    </section>
-                    <t t-foreach="quotation.order_line" t-as="line">
-                        <section class="tab-pane" t-att-id="line.id">
-                            <div t-field="line.website_description" class="oe_structure"/>
+                    <div class="col-md-8">
+                        <t t-call="website_sale_quote.quote_status"/>
+                        <div class="modal fade" id="modeldecline" role="dialog" aria-hidden="true">
+                          <div class="modal-dialog">
+                            <div class="modal-content">
+                              <div class="modal-header">
+                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
+                                <h4 class="modal-title">Reason</h4>
+                              </div>
+                              <form id="post" accept-charset="UTF-8" method="POST" t-att-action="'/quote/%%s/post#post' %% (quotation.id)">
+                                  <div class="modal-body">
+                                    <textarea rows="3" id="decline_message" name="decline_message" placeholder="Your Comment....." class="form-control span7"> </textarea>
+                                </div>
+                              <div class="modal-footer">
+                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                                    <button type="submit" t-att-id="quotation.id" class="btn btn-info">Post</button>
+                              </div>
+                            </form>
+                            </div>
+                          </div>
+                        </div>
+                        <section id="introduction11" class="tab-pane active" t-field="quotation.website_description">
                         </section>
-                    </t>
-                    <t t-call="website_sale_quote.pricing"/>
-                    <t t-call="website_sale_quote.product_recommendation"/>
-                    <t t-call="website_sale_quote.chatter"/>
-                </div>
+                        <t t-foreach="quotation.order_line" t-as="line">
+                            <section class="tab-pane" t-att-id="line.id">
+                                <div t-field="line.website_description" class="oe_structure"/>
+                            </section>
+                        </t>
+                        <t t-call="website_sale_quote.pricing"/>
+                        <t t-call="website_sale_quote.optional_products"/>
+                        <t t-call="website_sale_quote.chatter"/>
+                    </div>
+                </body>
             </t>
         </template>
 
-        <template id="product_recommendation">
-            <div class="container mt32" t-if="quotation.recommended_products()">
-                <h3>Customers who have bought this product also bought:</h3>
+        <template id="optional_products">
+            <div class="container mt32" t-if="quotation.options">
+                <h3>Optional Products &amp; Services:</h3>
                 <div class='row mt16'>
-                    <t t-foreach="quotation.recommended_products()" t-as="product">
-                        <div class='col-md-2 thumbnail' style='width: 170px; margin-right: 16px;'>
-                            <div class='mt16 text-center'>
-                                <a href="#" t-field="product.name"/>
-                                <span t-field="product.image_small" t-field-options='{"widget": "image", "class": "img-rounded"}'/>
+                    <t t-foreach="quotation.options" t-as="option">
+                        <t t-if="not option.add_to_line">
+                            <div class='col-md-2 thumbnail' style='width: 170px; margin-right: 16px;'>
+                                <div class='mt16 text-center'>
+                                    <a href="#" t-field="option.product_id.name"/>
+                                    <span t-field="option.product_id.image_small" t-field-options='{"widget": "image", "class": "img-rounded"}'/>
+                                </div>
+                                <a type="submit" t-href="./add_line/#{ option.id }/?order=#{ quotation.id }&amp;product=#{option.product_id.id}" class="btn btn-primary btn-xs js_add_line_json">Add To Quotation
+                                </a>
                             </div>
-                        </div>
+                        </t>
                     </t>
                 </div>
             </div>