diff --git a/addons/website_crm_partner_assign/views/website_crm_partner_assign_templates.xml b/addons/website_crm_partner_assign/views/website_crm_partner_assign_templates.xml
index 130964339e9..9193e3cdc4f 100644
--- a/addons/website_crm_partner_assign/views/website_crm_partner_assign_templates.xml
+++ b/addons/website_crm_partner_assign/views/website_crm_partner_assign_templates.xml
@@ -501,42 +501,224 @@
 
     <template id="portal_my_opportunity" name="My Opportunity">
         <t t-call="portal.portal_layout">
-            <div class="card">
-                <div class="card-header">
-                    <div class="row">
-                        <div class="col-lg-12">
-                            <h4 style="display:inline-block">
-                                Opportunity - <span t-field="opportunity.name"/>
-                            </h4>
-                            <span class="btn-group float-right" role="group">
-                                <t t-foreach="stages" t-as="stage">
-                                    <button type="button" t-att-data="stage.id" t-att-opp="opportunity.id" t-attf-class="float-right btn opp-stage-button #{'btn-secondary' if opportunity.stage_id.name != stage.name else 'disabled btn-primary'}">
+            <t t-set="wrapwrap_classes" t-value="'o_portal_bg_dark'"/>
+            <t t-call="portal.portal_record_layout">
+                <t t-set="card_header">
+                    <div class="row no-gutters">
+                        <div class="col-md">
+                            <h5 class="mb-2 mb-md-0">
+                                <small class="text-muted">Opportunity - </small>
+                                <span t-field="opportunity.name"/>
+                            </h5>
+                        </div>
+                        <div class="col-md text-md-right">
+                            <div class="d-inline-block">
+                                <small class="mr-2"><b>Stage:</b></small>
+                                <div t-foreach="stages" t-as="stage" class="float-right">
+                                    <button type="button" t-att-data="stage.id" t-att-opp="opportunity.id" t-attf-class="btn btn-sm px-2 opp-stage-button #{'btn-secondary' if opportunity.stage_id.name != stage.name else 'btn-primary disabled'}">
                                         <span t-field="stage.name"/>
                                     </button>
-                                </t>
-                            </span>
+                                    <i t-if="not stage_first" class="fa fa-chevron-right ml-1 mr-2 small" style="opacity: 0.5"/>
+                                </div>
+                            </div>
                         </div>
                     </div>
+                </t>
+
+                <t t-set="card_body">
                     <div class="row">
-                        <div class="col-lg-4">
-                                <strong><span class="text-nowrap" t-esc="opportunity.planned_revenue" t-options="{'widget': 'monetary', 'display_currency': opportunity.company_currency}"/> at <span t-field="opportunity.probability"/>%</strong>
+                        <div class="col-lg-5 mb-4 mb-lg-0">
+                            <div class="border-bottom d-flex justify-content-between py-2 mb-3 align-items-center">
+                                <h5 class="mb-0">
+                                    <span class="text-nowrap" t-esc="opportunity.planned_revenue" t-options="{'widget': 'monetary', 'display_currency': opportunity.company_currency}"/> at
+                                    <span class="badge badge-info badge-pill"><span t-field="opportunity.probability"/>%</span>
+                                </h5>
+                                <button type="button" data-toggle="modal" data-target=".modal_edit_opp" class="btn btn-link btn-sm"><i class="fa fa-pencil mr-1"/>Edit</button>
+                            </div>
+                            <div class="row mb-2">
+                                <strong class="col-12 col-sm-4">Deadline</strong>
+                                <div class="col">
+                                    <span t-if="opportunity.date_deadline" t-field="opportunity.date_deadline"/>
+                                    <span t-else="" class="text-muted"> - </span>
+                                </div>
+                            </div>
+                            <div class="row mb-2">
+                                <strong class="col-12 col-sm-4">Priority</strong>
+                                <div class="col">
+                                    <span class="" title="Rating" role="img" t-attf-aria-label="Rating: #{opportunity.priority} on 4">
+                                        <t t-foreach="range(1, 4)" t-as="i">
+                                            <span t-attf-class="fa text-warning fa-lg fa-star#{'' if i &lt;= int(opportunity.priority) else '-o'}" role="img" t-att-aria-label="'Star %d of 3' % i"/>
+                                        </t>
+                                    </span>
+                                </div>
+                            </div>
+                            <div class="row">
+                                <strong class="col-12 col-sm-4">Next Activity</strong>
+                                <div class="col" t-if="user_activity">
+                                    <span t-field="user_activity.activity_type_id"/>
+                                    <span t-if="user_activity.date_deadline">&#160;on&#160;</span>
+                                    <span t-field="user_activity.date_deadline"/>
+                                    <em class="d-block" t-field="user_activity.summary"/>
+                                </div>
+                                <div class="col" t-else="">
+                                    <span class="text-muted"> - </span>
+                                </div>
+                            </div>
                         </div>
-                        <div class="col-lg-4">
-                                <strong>Expected Closing: <span t-field="opportunity.date_deadline" /></strong>
+
+                        <div class="col-lg-6 offset-lg-1 col-xl-5 offset-xl-2">
+                            <div class="d-flex justify-content-between py-2 mb-3 border-bottom align-items-center">
+                                <h5 class="card-title mb-0">Contact</h5>
+                                <button type="button" data-toggle="modal" data-target=".modal_edit_contact" class="btn btn-link btn-sm"><i class="fa fa-pencil mr-1"/>Edit</button>
+                            </div>
+                            <div class="row mb-3" t-if="opportunity.partner_name or opportunity.email_from or opportunity.contact_name">
+                                <strong class="col-12 col-sm-3">Customer</strong>
+                                <div class="col">
+                                    <div>
+                                        <span class="fa fa-user fa-fw" role="img" aria-label="User" title="User"/>
+                                        <strong class="font-italic" t-if="opportunity.partner_name" itemprop="name" t-field="opportunity.partner_name" />
+                                        <strong class="font-italic" t-else="" itemprop="name" t-field="opportunity.contact_name" />
+                                    </div>
+                                    <div>
+                                        <span class="fa fa-phone fa-fw" role="img" aria-label="Phone" title="Phone"/>
+                                        <span t-if="opportunity.phone" itemprop="telephone" t-field="opportunity.phone"/>
+                                        <span t-else="" class="text-muted"> - </span>
+                                    </div>
+                                    <div>
+                                        <span class="fa fa-mobile fa-fw" role="img" aria-label="Mobile" title="Mobile"/>
+                                        <span t-if="opportunity.mobile" itemprop="mobile" t-field="opportunity.mobile"/>
+                                        <span t-else="" class="text-muted"> - </span>
+                                    </div>
+                                    <div>
+                                        <span class="fa fa-envelope fa-fw" role="img" aria-label="Email" title="Email"/>
+                                        <span t-if="opportunity.email_from" itemprop="email" t-field="opportunity.email_from"/>
+                                        <span t-else="" class="text-muted"> - </span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="row">
+                                <strong class="col-12 col-sm-3">Address</strong>
+                                <address class="col d-flex align-items-baseline mb-0">
+                                    <span class="fa fa-map-marker fa-fw" role="img" aria-label="Address" title="Address"/>
+                                    <div>
+                                        <div t-if="opportunity.street"><span t-field="opportunity.street"/></div>
+                                        <span t-else="" class="text-muted"> - </span>
+                                        <div t-if="opportunity.street2"><span t-field="opportunity.street2"/></div>
+                                        <div t-if="opportunity.city or opportunity.zip">
+                                            <span t-field="opportunity.city"/> <span t-field="opportunity.zip"/>
+                                        </div>
+                                        <div t-if="opportunity.state_id or country_id">
+                                            <span t-field="opportunity.state_id"/> <span t-field="opportunity.country_id"/>
+                                        </div>
+                                    </div>
+                                </address>
+                            </div>
                         </div>
-                        <div class="col-lg-4">
-                            <span class="float-right" title="Rating" role="img" t-attf-aria-label="Rating: #{opportunity.priority} on 4">
-                                <t t-foreach="range(1, 4)" t-as="i">
-                                    <span t-attf-class="fa fa-lg fa-star#{'' if i &lt;= int(opportunity.priority) else '-o'}" role="img" t-att-aria-label="'Star %d of 3' % i"/>
-                                </t>
-                            </span>
-                        </div>
-                    </div>
-                </div>
-                <div class="card-body">
-                    <div class="col-lg-6">
+
+                        <!-- ==== MODALS ==== -->
                         <div>
-                            <button type="button" data-toggle="modal" data-target=".modal_edit_contact" class="btn btn-primary" style="margin-bottom: 10px;">Edit Contact</button>
+                            <div role="dialog" class="modal fade modal_edit_opp">
+                                <div class="modal-dialog">
+                                    <form method="POST" class="js_accept_json modal-content js_website_submit_form edit_opp_form">
+                                        <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
+                                        <input type="hidden" name="opportunity_id" class="opportunity_id" t-att-value="opportunity.id"/>
+                                        <header class="modal-header">
+                                            <h4 class="modal-title">Edit Opportunity</h4>
+                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">&amp;times;</button>
+                                        </header>
+                                        <main class="modal-body" id="sign-dialog">
+                                            <div class="form-group">
+                                                <div class="form-row align-items-center">
+                                                    <div class="col-auto flex-grow-1">
+                                                        <div class="input-group">
+                                                            <div class="input-group-prepend">
+                                                                <div class="input-group-text"><span class="text-nowrap" t-esc="opportunity.company_currency.symbol"/></div>
+                                                            </div>
+                                                            <input type="text" name="planned_revenue" class="form-control planned_revenue" t-att-value="opportunity.planned_revenue" placeholder="Planned Revenue"/>
+                                                        </div>
+                                                    </div>
+                                                    <div class="col-auto">at</div>
+                                                    <div class="col-auto">
+                                                        <div class="input-group">
+                                                            <input type="text" name="probability" class="form-control probability" t-att-value="opportunity.probability" placeholder="Probability"/>
+                                                            <div class="input-group-append">
+                                                                <div class="input-group-text">%</div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="form-group">
+                                                <div class="row">
+                                                    <div class="col-md-6">
+                                                        <label>Priority:</label>
+                                                        <div class="input-group">
+                                                            <label class="radio-inline">
+                                                                <input type="radio" name="PriorityRadioOptions" value="0" t-att-checked="opportunity.priority not in ['1','2','3']" aria-label="Rating: 0 on 3" title="Rating: 0 on 3"/>
+                                                                <i class="ml-1 fa fa-star-o"></i>
+                                                            </label>
+                                                            <label class="radio-inline ml-2">
+                                                                <input type="radio" name="PriorityRadioOptions" value="1" t-att-checked="opportunity.priority == '1'" aria-label="Rating: 1 on 3" title="Rating: 1 on 3"/>
+                                                                <i class="ml-1 fa text-warning fa-star"></i>
+                                                            </label>
+                                                            <label class="radio-inline ml-2">
+                                                                <input type="radio" name="PriorityRadioOptions" value="2" t-att-checked="opportunity.priority == '2'" aria-label="Rating: 2 on 3" title="Rating: 2 on 3"/>
+                                                                <i class="ml-1 fa text-warning fa-star"></i>
+                                                                <i class="ml-1 fa text-warning fa-star"></i>
+                                                            </label>
+                                                            <label class="radio-inline ml-2">
+                                                                <input type="radio" name="PriorityRadioOptions" value="3" t-att-checked="opportunity.priority == '3'" aria-label="Rating: 3 on 3" title="Rating: 3 on 3"/>
+                                                                <i class="ml-1 fa text-warning fa-star"></i>
+                                                                <i class="ml-1 fa text-warning fa-star"></i>
+                                                                <i class="ml-1 fa text-warning fa-star"></i>
+                                                            </label>
+                                                        </div>
+                                                    </div>
+                                                    <div class="col-md-6">
+                                                        <label>Deadline:</label>
+                                                        <div class="input-group date">
+                                                            <input type="text" name="date_deadline" t-att-value="opportunity.date_deadline" class="form-control date_deadline" data-date-format="YYYY-MM-DD" t-att-name="prefix" placeholder="YYYY-MM-DD"/>
+                                                            <div class="input-group-append">
+                                                                <span class="input-group-text">
+                                                                    <span class="fa fa-calendar" role="img" aria-label="Calendar"></span>
+                                                                </span>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="form-group">
+                                                <label class="col-form-label" for="next_activity">Next Activity</label>
+                                                <select class="form-control next_activity" name="next_activity">
+                                                    <t t-foreach="activity_types" t-as="activity_type">
+                                                        <option t-att-data="activity_type.id" t-att-selected="activity_type.id == user_activity.activity_type_id.id" t-att-name="activity_type.name" t-att-summary="activity_type.summary"><t t-esc="activity_type.name"/></option>
+                                                    </t>
+                                                </select>
+                                            </div>
+                                            <div class="form-group">
+                                                <label class="col-form-label" for="activity_summary">Details Next Activity</label>
+                                                <textarea row="3" name="activity_summary" class="form-control activity_summary"><t t-esc="user_activity.summary"/></textarea>
+                                            </div>
+                                            <div class="form-group">
+                                                <label class="col-form-label" for="activity_date_deadline">Next Activity Date</label>
+                                                <div class="input-group date">
+                                                    <input type="text" name="activity_date_deadline" t-att-value="user_activity.date_deadline" class="form-control activity_date_deadline" data-date-format="YYYY-MM-DD" t-att-name="prefix" placeholder="YYYY-MM-DD"/>
+                                                    <div class="input-group-append">
+                                                        <span class="input-group-text">
+                                                            <span class="fa fa-calendar" role="img" aria-label="Calendar" title="Calendar"></span>
+                                                        </span>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </main>
+                                        <footer class="modal-footer">
+                                            <button t-attf-class="btn btn-primary edit_opp_confirm">Confirm</button>
+                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+                                        </footer>
+                                    </form>
+                                </div>
+                            </div>
+
                             <div role="dialog" class="modal fade modal_edit_contact">
                                 <div class="modal-dialog">
                                     <form method="POST" class="js_accept_json modal-content js_website_submit_form edit_contact_form">
@@ -588,7 +770,7 @@
                                                             <option>States...</option>
                                                             <t t-foreach="states or []" t-as="state">
                                                                 <option class="state" t-att-value="state.id" t-att-country="state.country_id.id" t-att-selected="state.id == opportunity.state_id.id">
-                                                                    <t t-esc="state.name" />
+                                                                    <t t-esc="state.name"/>
                                                                 </option>
                                                             </t>
                                                         </select>
@@ -603,7 +785,7 @@
                                                     <option>Countries...</option>
                                                     <t t-foreach="countries or []" t-as="country">
                                                         <option t-att-value="country.id" t-att-selected="country.id == opportunity.country_id.id">
-                                                            <t t-esc="country.name" />
+                                                            <t t-esc="country.name"/>
                                                         </option>
                                                     </t>
                                                 </select>
@@ -617,153 +799,14 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="row" t-if="opportunity.partner_name or opportunity.email_from or opportunity.contact_name">
-                            <label class="col-4">Customer</label>
-                            <address class="col-8">
-                                <div>
-                                    <span t-if="opportunity.partner_name" itemprop="name" t-field="opportunity.partner_name" />
-                                    <span t-if="not opportunity.partner_name" itemprop="name" t-field="opportunity.contact_name" />
-                                </div>
-                                <div t-if="opportunity.phone">
-                                    <span class="fa fa-phone" role="img" aria-label="Phone" title="Phone"/> <span itemprop="telephone" t-field="opportunity.phone" />
-                                </div>
-                                <div t-if="opportunity.mobile">
-                                    <span class="fa fa-mobile" role="img" aria-label="Mobile" title="Mobile"/> <span itemprop="mobile" t-field="opportunity.mobile" />
-                                </div>
-                                <div t-if="opportunity.email_from">
-                                    <span class="fa fa-envelope" role="img" aria-label="Email" title="Email"/> <span itemprop="email" t-field="opportunity.email_from" />
-                                </div>
-                            </address>
-                        </div>
-                        <div class="row" t-if="opportunity.street or opportunity.street2 or opportunity.city or opportunity.state_id or opportunity.country_id">
-                            <label class="col-4">Address</label>
-                            <address class="col-8">
-                                <div t-if="opportunity.street"><span t-field="opportunity.street"/></div>
-                                <div t-if="opportunity.street2"><span t-field="opportunity.street2"/></div>
-                                <div t-if="opportunity.city or opportunity.zip">
-                                    <span t-field="opportunity.city"/> <span t-field="opportunity.zip"/>
-                                </div>
-                                <div t-if="opportunity.state_id or country_id">
-                                    <span t-field="opportunity.state_id"/> <span t-field="opportunity.country_id"/>
-                                </div>
-                            </address>
-                        </div>
+                        <!-- === / MODALS === -->
                     </div>
-                    <div class="col-lg-6">
-                        <div>
-                            <button type="button" data-toggle="modal" data-target=".modal_edit_opp" class="btn btn-primary" style="margin-bottom: 10px;">Edit Opportunity</button>
-                            <div role="dialog" class="modal fade modal_edit_opp">
-                                <div class="modal-dialog">
-                                    <form method="POST" class="js_accept_json modal-content js_website_submit_form edit_opp_form">
-                                        <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
-                                        <input type="hidden" name="opportunity_id" class="opportunity_id" t-att-value="opportunity.id"/>
-                                        <header class="modal-header">
-                                            <h4 class="modal-title">Edit Opportunity</h4>
-                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">&amp;times;</button>
-                                        </header>
-                                        <main class="modal-body" id="sign-dialog">
-                                            <div class="form-group">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                        <div class="input-group">
-                                                            <div class="input-group-prepend">
-                                                                <div class="input-group-text"><span class="text-nowrap" t-esc="opportunity.company_currency.symbol"/></div>
-                                                            </div>
-                                                            <input type="text" name="planned_revenue" class="form-control planned_revenue" t-att-value="opportunity.planned_revenue" placeholder="Planned Revenue"/>
-                                                        </div>
-                                                    </div>
-                                                    <div class="col-md-1">
-                                                        <span>at </span>
-                                                    </div>
-                                                    <div class="col-md-5">
-                                                        <div class="input-group">
-                                                            <input type="text" name="probability" class="form-control probability" t-att-value="opportunity.probability" placeholder="Probability"/>
-                                                            <div class="input-group-append">
-                                                                <div class="input-group-text">%</div>
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div class="form-group">
-                                                <div class="row">
-                                                    <div class="col-md-6">
-                                                      <label>Priority: </label>
-                                                      <div class="input-group">
-                                                        <label class="radio-inline">
-                                                          <input type="radio" name="PriorityRadioOptions" value="0" t-att-checked="opportunity.priority not in ['1','2','3']" aria-label="Rating: 0 on 3" title="Rating: 0 on 3"/><i class="fa fa-star-o"></i>
-                                                        </label>
-                                                        <label class="radio-inline">
-                                                          <input type="radio" name="PriorityRadioOptions" value="1" t-att-checked="opportunity.priority == '1'" aria-label="Rating: 1 on 3" title="Rating: 1 on 3"/><i class="fa fa-star"></i>
-                                                        </label>
-                                                        <label class="radio-inline">
-                                                          <input type="radio" name="PriorityRadioOptions" value="2" t-att-checked="opportunity.priority == '2'" aria-label="Rating: 2 on 3" title="Rating: 2 on 3"/><i class="fa fa-star"></i><i class="fa fa-star"></i>
-                                                        </label>
-                                                        <label class="radio-inline">
-                                                          <input type="radio" name="PriorityRadioOptions" value="3" t-att-checked="opportunity.priority == '3'" aria-label="Rating: 3 on 3" title="Rating: 3 on 3"/><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>
-                                                        </label>
-                                                      </div>
-                                                    </div>
-                                                    <div class="col-md-6">
-                                                        <label>Deadline: </label>
-                                                        <div class='input-group date'>
-                                                            <input type="text" name="date_deadline" t-att-value="opportunity.date_deadline" class="form-control date_deadline" data-date-format="YYYY-MM-DD" t-att-name="prefix" placeholder="YYYY-MM-DD" />
-                                                            <div class="input-group-append">
-                                                                <span class="input-group-text"><span class="fa fa-calendar" role="img" aria-label="Calendar"></span></span>
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div class="form-group">
-                                                <label class="col-form-label" for="next_activity">Next Activity</label>
-                                                <select class="form-control next_activity" name="next_activity">
-                                                    <t t-foreach="activity_types" t-as="activity_type">
-                                                        <option t-att-data="activity_type.id" t-att-selected="activity_type.id == user_activity.activity_type_id.id" t-att-name="activity_type.name" t-att-days="activity_type.days" t-att-summary="activity_type.summary"><t t-esc="activity_type.name"/></option>
-                                                    </t>
-                                                </select>
-                                            </div>
-                                            <div class="form-group">
-                                                <label class="col-form-label" for="activity_summary">Details Next Activity</label>
-                                                <textarea row="3" name="activity_summary" class="form-control activity_summary"><t t-esc="user_activity.summary"/></textarea>
-                                            </div>
-                                            <div class="form-group">
-                                                <label class="col-form-label" for="activity_date_deadline">Next Activity Date</label>
-                                                <div class='input-group date'>
-                                                    <input type="text" name="activity_date_deadline" t-att-value="user_activity.date_deadline" class="form-control activity_date_deadline" data-date-format="YYYY-MM-DD" t-att-name="prefix" placeholder="YYYY-MM-DD" />
-                                                    <div class="input-group-append">
-                                                        <span class="input-group-text"><span class="fa fa-calendar" role="img" aria-label="Calendar" title="Calendar"></span></span>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </main>
-                                        <footer class="modal-footer">
-                                            <button t-attf-class="btn btn-primary edit_opp_confirm">Confirm</button>
-                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
-                                        </footer>
-                                    </form>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="row" t-if="user_activity">
-                            <label class="col-4">Next Activity</label>
-                            <span class="col-8">
-                                <span t-field="user_activity.activity_type_id"/>
-                                <span t-if="user_activity.date_deadline">&#160;on&#160;</span>
-                                <span t-field="user_activity.date_deadline"/>
-                            </span>
-                        </div>
-                        <div class="row" t-if="user_activity">
-                            <span class="col-8 offset-4" t-field="user_activity.summary"/>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="row mt32">
-                <div class="col-lg-12">
-                    <h4><strong>Message and communication history</strong></h4>
-                </div>
-                <div class="col-lg-10 offset-lg-1 mt16">
+                </t>
+            </t>
+
+            <div class="mt32">
+                <h4><strong>Message and communication history</strong></h4>
+                <div class="mt16">
                     <t t-call="portal.message_thread">
                         <t t-set="object" t-value="opportunity"/>
                     </t>