diff --git a/fusion_plating/fusion_plating_portal/views/fp_portal_templates.xml b/fusion_plating/fusion_plating_portal/views/fp_portal_templates.xml
index 0a97878e..69f0471d 100644
--- a/fusion_plating/fusion_plating_portal/views/fp_portal_templates.xml
+++ b/fusion_plating/fusion_plating_portal/views/fp_portal_templates.xml
@@ -27,8 +27,8 @@
             </ul>
 
             <div class="d-flex justify-content-end mb-3">
-                <a href="/my/quote_requests/new" class="btn btn-primary">
-                    <i class="fa fa-plus me-1"/>New Quote Request
+                <a href="/my/quote_requests/new" class="o_fp_btn_primary">
+                    <i class="fa fa-plus"/> New Quote Request
                 </a>
             </div>
 
@@ -69,14 +69,10 @@
                             <span t-else="" class="text-muted">--</span>
                         </td>
                         <td class="text-end">
-                            <span t-attf-class="badge #{
-                                'text-bg-secondary' if qr.state == 'new' else
-                                'text-bg-info' if qr.state == 'under_review' else
-                                'text-bg-primary' if qr.state == 'quoted' else
-                                'text-bg-success' if qr.state == 'accepted' else
-                                'text-bg-danger' if qr.state == 'declined' else
-                                'text-bg-warning'}"
-                                  t-out="dict(qr._fields['state']._description_selection(qr.env)).get(qr.state)"/>
+                            <t t-call="fusion_plating_portal.fp_portal_status_badge">
+                                <t t-set="state" t-value="qr.state"/>
+                                <t t-set="label" t-value="dict(qr._fields['state']._description_selection(qr.env)).get(qr.state)"/>
+                            </t>
                         </td>
                     </tr>
                 </tbody>
@@ -113,14 +109,10 @@
                     <div class="row">
                         <div class="col-md-6">
                             <h6 class="text-muted small text-uppercase">Status</h6>
-                            <span t-attf-class="badge #{
-                                'text-bg-secondary' if quote_request.state == 'new' else
-                                'text-bg-info' if quote_request.state == 'under_review' else
-                                'text-bg-primary' if quote_request.state == 'quoted' else
-                                'text-bg-success' if quote_request.state == 'accepted' else
-                                'text-bg-danger' if quote_request.state == 'declined' else
-                                'text-bg-warning'} fs-6"
-                                  t-out="dict(quote_request._fields['state']._description_selection(quote_request.env)).get(quote_request.state)"/>
+                            <t t-call="fusion_plating_portal.fp_portal_status_badge">
+                                <t t-set="state" t-value="quote_request.state"/>
+                                <t t-set="label" t-value="dict(quote_request._fields['state']._description_selection(quote_request.env)).get(quote_request.state)"/>
+                            </t>
                         </div>
                         <div class="col-md-6 text-md-end">
                             <t t-if="quote_request.state == 'quoted' and quote_request.quoted_price">
@@ -213,7 +205,7 @@
             <div class="mb-4" t-if="quote_request.process_type_ids">
                 <h6 class="text-muted small text-uppercase">Requested Processes</h6>
                 <span t-foreach="quote_request.process_type_ids" t-as="pt"
-                      class="badge text-bg-light border me-1" t-out="pt.name"/>
+                      class="o_fp_doc_chip me-1" t-out="pt.name"/>
             </div>
 
             <div class="mb-4" t-if="quote_request.part_description">
@@ -356,7 +348,7 @@
                 <div id="fp_parts_container">
                     <!-- Part rows will be added by JS -->
                 </div>
-                <button type="button" class="btn btn-outline-secondary mb-3" id="fp_add_part_btn">
+                <button type="button" class="o_fp_btn_secondary mb-3" id="fp_add_part_btn">
                     <i class="fa fa-plus me-1"/> ADD ANOTHER PART
                 </button>
 
@@ -416,9 +408,9 @@
                 </div>
 
                 <div class="d-flex justify-content-between mt-4">
-                    <a href="/my/quote_requests" class="btn btn-link">Cancel</a>
-                    <button type="submit" class="btn btn-primary btn-lg" id="fp_submit_rfq">
-                        <i class="fa fa-paper-plane me-1"/>SUBMIT RFQ
+                    <a href="/my/quote_requests" class="o_fp_btn_ghost">Cancel</a>
+                    <button type="submit" class="o_fp_btn_primary o_fp_btn_lg" id="fp_submit_rfq">
+                        <i class="fa fa-paper-plane"/> SUBMIT RFQ
                     </button>
                 </div>
             </form>
@@ -706,7 +698,9 @@
                                   t-options='{"widget": "date"}'/>
                         </td>
                         <td class="text-end">
-                            <span class="badge text-bg-success">Delivered</span>
+                            <span class="o_fp_badge o_fp_badge_shipped">
+                                <span class="o_fp_badge_dot"/>Delivered
+                            </span>
                         </td>
                     </tr>
                 </tbody>
@@ -751,12 +745,12 @@
                         </td>
                         <td>
                             <span t-foreach="cj.process_type_ids" t-as="pt"
-                                  class="badge text-bg-light border me-1" t-out="pt.name"/>
+                                  class="o_fp_doc_chip me-1" t-out="pt.name"/>
                         </td>
                         <td class="text-end">
                             <a t-att-href="'/my/jobs/%s/coc' % cj.id"
-                               class="btn btn-sm btn-outline-success">
-                                <i class="fa fa-download me-1"/>CoC
+                               class="o_fp_btn_secondary o_fp_btn_sm">
+                                <i class="fa fa-download"/> CoC
                             </a>
                         </td>
                     </tr>