diff --git a/addons/portal/views/portal_templates.xml b/addons/portal/views/portal_templates.xml
index dfef009723f..2f8484e149e 100644
--- a/addons/portal/views/portal_templates.xml
+++ b/addons/portal/views/portal_templates.xml
@@ -79,7 +79,7 @@
                             <div t-attf-class="col-12 col-md col-lg-6">
                                 <t t-raw="0"/>
                             </div>
-                            <div id="o_my_sidebar" class="col-12 col-md col-lg-4 col-xl-3 o_my_sidebar">
+                            <div id="o_my_sidebar" class="pt-3 pt-lg-0 col-12 col-md col-lg-4 col-xl-3 o_my_sidebar">
                                 <div class="o_my_contact" t-if="sales_user">
                                     <t t-call="portal.portal_contact"/>
                                 </div>
diff --git a/addons/purchase/controllers/portal.py b/addons/purchase/controllers/portal.py
index ed4672bed5c..402a6700dd3 100644
--- a/addons/purchase/controllers/portal.py
+++ b/addons/purchase/controllers/portal.py
@@ -34,7 +34,7 @@ class CustomerPortal(CustomerPortal):
             'order': order,
             'resize_to_48': resize_to_48,
         }
-        return self._get_page_view_values(order, access_token, values, 'my_purchases_history', True, **kwargs)
+        return self._get_page_view_values(order, access_token, values, 'my_purchases_history', False, **kwargs)
 
     @http.route(['/my/purchase', '/my/purchase/page/<int:page>'], type='http', auth="user", website=True)
     def portal_my_purchase_orders(self, page=1, date_begin=None, date_end=None, sortby=None, filterby=None, **kw):
@@ -109,5 +109,8 @@ class CustomerPortal(CustomerPortal):
         except (AccessError, MissingError):
             return request.redirect('/my')
 
+        report_type = kw.get('report_type')
+        if report_type in ('html', 'pdf', 'text'):
+            return self._show_report(model=order_sudo, report_type=report_type, report_ref='purchase.action_report_purchase_order',download=kw.get('download'))
         values = self._purchase_order_get_page_view_values(order_sudo, access_token, **kw)
         return request.render("purchase.portal_my_purchase_order", values)
diff --git a/addons/purchase/models/purchase.py b/addons/purchase/models/purchase.py
index 9f66f9cd3f1..998c8bdc24b 100644
--- a/addons/purchase/models/purchase.py
+++ b/addons/purchase/models/purchase.py
@@ -216,6 +216,10 @@ class PurchaseOrder(models.Model):
             return self.env.ref('purchase.mt_rfq_done')
         return super(PurchaseOrder, self)._track_subtype(init_values)
 
+    def _get_report_base_filename(self):
+        self.ensure_one()
+        return 'Purchase Order-%s' % (self.name)
+
     @api.onchange('partner_id', 'company_id')
     def onchange_partner_id(self):
         # Ensures all properties and fiscal positions
diff --git a/addons/purchase/views/portal_templates.xml b/addons/purchase/views/portal_templates.xml
index 2917cd5858b..e9553037b0b 100644
--- a/addons/purchase/views/portal_templates.xml
+++ b/addons/purchase/views/portal_templates.xml
@@ -25,23 +25,28 @@
 
   <template id="portal_my_purchase_orders" name="Portal: My Purchase Orders">
     <t t-call="portal.portal_layout">
-      <t t-call="portal.portal_searchbar">
-        <t t-set="title">Purchase Orders</t>
-      </t>
+      <t t-set="breadcrumbs_searchbar" t-value="True"/>
+      <t t-call="portal.portal_searchbar"/>
       <t t-if="orders" t-call="portal.portal_table">
         <thead>
           <tr class="active">
             <th>Purchase Orders #</th>
-            <th>Order Date</th>
+            <th class="text-right">Confirmation Date</th>
             <th></th>
-            <th>Total</th>
+            <th class="text-right">Total</th>
           </tr>
         </thead>
         <tbody>
           <t t-foreach="orders" t-as="order">
             <tr>
-              <td><a t-attf-href="/my/purchase/#{order.id}?#{keep_query()}"><t t-esc="order.name"/></a></td>
-              <td><span t-field="order.date_order"/></td>
+              <td>
+                <a t-att-href="order.get_portal_url()">
+                  <t t-esc="order.name"/>
+               </a>
+              </td>
+              <td class="text-right">
+                <span t-field="order.date_approve"/>
+              </td>
               <td>
                 <t t-if="order.invoice_status == 'to invoice'">
                   <span class="badge badge-info"><i class="fa fa-fw fa-file-text"/> Waiting for Bill</span>
@@ -50,7 +55,9 @@
                   <span class="badge badge-secondary"><i class="fa fa-fw fa-remove"/> Cancelled</span>
                 </t>
               </td>
-              <td><span t-field="order.amount_total" t-options='{"widget": "monetary", "display_currency": order.currency_id}'/></td>
+              <td class="text-right">
+                <span t-field="order.amount_total" t-options='{"widget": "monetary", "display_currency": order.currency_id}'/>
+              </td>
             </tr>
           </t>
         </tbody>
@@ -61,120 +68,147 @@
   <template id="portal_my_purchase_order" name="Portal: My Purchase Order">
     <t t-call="portal.portal_layout">
       <t t-set="purchase_order" t-value="order"/>
+      <t t-set="o_portal_fullwidth_alert" groups="purchase.group_purchase_manager">
+        <t t-call="portal.portal_back_in_edit_mode">
+          <t t-set="backend_url" t-value="'/web#return_label=Website&amp;model=%s&amp;id=%s&amp;action=%s&amp;view_type=form' % (purchase_order._name, purchase_order.id, purchase_order.env.ref('purchase.purchase_rfq').id)"/>
+        </t>
+      </t>
       <div id="optional_placeholder"></div>
       <div class="container">
-          <div class="card">
-            <div class="card-header">
-              <div class="row">
-                <div class="col-lg-12">
-                  <h4>
-                    <t t-if="order.state in ['draft', 'sent']">
-                      Request for Quotation
+        <div class="row mt16 o_portal_purchase_sidebar">
+          <!-- Sidebar -->
+          <t t-call="portal.portal_record_sidebar">
+            <t t-set="classes" t-value="'col-lg-auto d-print-none'"/>
+              <t t-set="title">
+                <h2 class="mb-0">
+                  <b t-field="purchase_order.amount_total" data-id="total_amount"/>
+                </h2>
+              </t>
+            <t t-set="entries">
+              <ul class="list-group list-group-flush flex-wrap flex-row flex-lg-column">
+                <li class="list-group-item flex-grow-1">
+                  <div class="o_download_pdf btn-toolbar flex-sm-nowrap">
+                    <div class="btn-group flex-grow-1 mr-1 mb-1">
+                      <a class="btn btn-secondary btn-block o_download_btn" t-att-href="purchase_order.get_portal_url(report_type='pdf', download=True)" title="Download"><i class="fa fa-download"/> Download</a>
+                    </div>
+                    <div class="btn-group flex-grow-1 mb-1">
+                        <a class="btn btn-secondary btn-block o_print_btn o_portal_invoice_print" t-att-href="purchase_order.get_portal_url(report_type='pdf')" id="print_invoice_report" title="Print" target="_blank"><i class="fa fa-print"/> Print</a>
+                    </div>
+                  </div>
+                </li>
+
+                <li t-if="purchase_order.user_id" class="list-group-item flex-grow-1">
+                  <div class="small mb-1">
+                    <strong class="text-muted">Purchase Representative</strong>
+                  </div>
+                  <div class="row flex-nowrap">
+                    <div class="col flex-grow-0 pr-2">
+                      <img class="rounded-circle mr4 float-left o_portal_contact_img" t-if="purchase_order.user_id.image_1024" t-att-src="image_data_uri(purchase_order.user_id.image_1024)" alt="Contact"/>
+                      <img class="rounded-circle mr4 float-left o_portal_contact_img" t-if="not purchase_order.user_id.image_1024" src="/web/static/src/img/placeholder.png" alt="Contact"/>
+                    </div>
+                    <div class="col pl-0" style="min-width: 150px">
+                      <span t-field="purchase_order.user_id" t-options='{"widget": "contact", "fields": ["name", "phone"], "no_marker": True}'/>
+                      <a href="#discussion" class="small"><i class="fa fa-comment"></i> Send message</a>
+                    </div>
+                  </div>
+                </li>
+              </ul>
+            </t>
+          </t>
+          <div class=" col-lg col-12 justify-content-end w-100">
+            <div class= "card pb-5">
+              <div class="card-header bg-white pb-1">
+                <div class="row">
+                  <div class="col-lg-12">
+                    <h2 class="font-weight-normal">
+                      <t t-if="order.state in ['draft', 'sent']">Request for Quotation</t>
+                      <t t-else="1">
+                        Purchase Order
+                      </t>
+                      <span class="font-italic" t-esc="order.name"/>
+                    </h2>
+                  </div>
+                </div>
+              </div>
+              <div class="card-body">
+                <div class="mb-4">
+                  <strong>Confirmation Date:</strong> <span t-field="order.date_approve" t-options='{"widget": "date"}'/><br/>
+                  <div t-att-class="'d-inline' if order.date_planned else 'd-none'">
+                    <strong>Receipt Date:</strong><span class="ml-1" t-field="order.date_planned" t-options='{"widget": "date"}'/>
+                  </div>
+                </div>
+                <h3 class="font-weight-normal">Pricing</h3>
+                <table class="table table-sm">
+                  <thead class="bg-100">
+                    <tr>
+                      <th>Products</th>
+                      <th class="text-right d-none d-sm-table-cell">Unit Price</th>
+                      <th class="text-right">Quantity</th>
+                      <th class="text-right">Subtotal</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <t t-foreach="order.order_line" t-as="ol">
+                      <tr>
+                        <td>
+                          <img t-att-src="image_data_uri(resize_to_48(ol.product_id.image_1024))" alt="Product" class="d-none d-lg-inline"/>
+                          <span t-esc="ol.name"/>
+                        </td>
+                        <td class="text-right d-none d-sm-table-cell">
+                          <span t-field="ol.price_unit" t-options='{"widget": "monetary", "display_currency": order.currency_id}'/>
+                        </td>
+                        <td class="text-right">
+                          <span t-esc="ol.product_qty"/>
+                        </td>
+                        <td class="text-right">
+                          <span t-field="ol.price_subtotal" t-options='{"widget": "monetary", "display_currency": order.currency_id}'/>
+                        </td>
+                      </tr>
                     </t>
-                    <t t-else="1">
-                      Purchase Order
-                    </t>
-                    <span t-esc="order.name"/>
-                  </h4>
+                  </tbody>
+                </table>
+                <div class="row">
+                  <div class="col-sm-7 col-md-5 ml-auto">
+                    <table class="table table-sm">
+                      <tbody>
+                        <tr>
+                          <td>
+                            <strong>Untaxed Amount:</strong>
+                          </td>
+                          <td class="text-right">
+                            <span t-field="order.amount_untaxed" t-options='{"widget": "monetary", "display_currency": order.currency_id}'/>
+                          </td>
+                        </tr>
+                        <tr>
+                          <td>
+                            <strong>Taxes:</strong>
+                          </td>
+                          <td class="text-right">
+                            <span t-field="order.amount_tax" t-options='{"widget": "monetary", "display_currency": order.currency_id}'/>
+                          </td>
+                        </tr>
+                        <tr>
+                          <td>
+                            <strong>Total:</strong>
+                          </td>
+                          <td class="text-right">
+                            <span t-field="order.amount_total" t-options='{"widget": "monetary", "display_currency": order.currency_id}'/>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
                 </div>
               </div>
             </div>
-            <div class="card-body">
-              <div class="mb8">
-                  <strong>Date:</strong> <span t-field="order.date_order" t-options='{"widget": "date"}'/>
-              </div>
-              <div class="row">
-                <div class="col-lg-6">
-                  <strong>Product</strong>
-                </div>
-                <div class="col-lg-2 text-right">
-                  <strong>Unit Price</strong>
-                </div>
-                <div class="col-lg-2 text-right">
-                  <strong>Quantity</strong>
-                </div>
-                <div class="col-lg-2 text-right">
-                  <strong>Subtotal</strong>
-                </div>
-              </div>
-              <t t-set="current_subtotal" t-value="0"/>
-              <t t-foreach="order.order_line" t-as="ol">
-                <t t-set="current_subtotal" t-value="current_subtotal + ol.price_subtotal" groups="account.group_show_line_subtotals_tax_excluded"/>
-                <t t-set="current_subtotal" t-value="current_subtotal + ol.price_total" groups="account.group_show_line_subtotals_tax_included"/>
-                <div t-if="not ol.display_type" class="row purchases_vertical_align">
-                  <div class="col-lg-1 text-center">
-                      <img t-att-src="image_data_uri(resize_to_48(ol.product_id.image_128))" alt="Product"/>
-                  </div>
-                  <div id='product_name' class="col-lg-5">
-                    <span t-esc="ol.name"/>
-                  </div>
-                  <div class="col-lg-2 text-right">
-                    <span t-field="ol.price_unit" t-options='{"widget": "monetary", "display_currency": order.currency_id}'/>
-                  </div>
-                  <div class="col-lg-2 text-right">
-                      <span t-esc="ol.product_qty"/>
-                  </div>
-                  <div class="col-lg-2 text-right">
-                    <span t-field="ol.price_subtotal" t-options='{"widget": "monetary", "display_currency": order.currency_id}'/>
-                  </div>
-                </div>
-                <t t-if="ol.display_type == 'line_section'">
-                    <div class="col-lg-12 bg-200">
-                        <strong t-esc="ol.name"/>
-                    </div>
-                    <t t-set="current_section" t-value="ol"/>
-                    <t t-set="current_subtotal" t-value="0"/>
-                </t>
-                <t t-elif="ol.display_type == 'line_note'">
-                    <div class="col-lg-12 font-italic">
-                        <span t-esc="ol.name"/>
-                    </div>
-                </t>
-                <t t-if="current_section and (ol_last or order.order_line[ol_index+1].display_type == 'line_section')">
-                  <div class="row">
-                    <div class="col-lg-10 text-right">Subtotal</div>
-                    <div class="col-lg-2 text-right">
-                      <span
-                            t-esc="current_subtotal"
-                            t-options='{"widget": "monetary", "display_currency": order.currency_id}'
-                          />
-                    </div>
-                  </div>
-                </t>
+            <div id="purchase_order_communication" class="mt-4">
+              <h2>History</h2>
+              <t t-call="portal.message_thread">
+                <t t-set="object" t-value="purchase_order"/>
               </t>
-
-              <hr/>
-
-              <div class="row">
-                <div class="col-lg-12 text-right">
-                  <div class="row">
-                    <div class="col-lg-10 text-right">
-                      Untaxed Amount:
-                    </div>
-                    <div class="col-lg-2 text-right">
-                      <span t-field="order.amount_untaxed" t-options='{"widget": "monetary", "display_currency": order.currency_id}'/>
-                    </div>
-                  </div>
-                  <div class="row">
-                    <div class="col-lg-10 text-right">
-                      Taxes:
-                    </div>
-                    <div class="col-lg-2 text-right">
-                      <span t-field="order.amount_tax" t-options='{"widget": "monetary", "display_currency": order.currency_id}'/>
-                    </div>
-                  </div>
-                  <div class="row">
-                    <div class="col-lg-10 text-right">
-                      <strong>Total:</strong>
-                    </div>
-                    <div class="col-lg-2 text-right">
-                      <strong><span t-field="order.amount_total" t-options='{"widget": "monetary", "display_currency": order.currency_id}'/></strong>
-                    </div>
-                  </div>
-                </div>
-              </div>
             </div>
           </div>
+        </div>
       </div>
       <div class="oe_structure mb32"/>
     </t>