From 9a93a4364247e8df490a12585d574de59d4fc4de Mon Sep 17 00:00:00 2001
From: Dave <Dave>
Date: Fri, 23 Jan 2026 20:37:16 -0500
Subject: [PATCH] feature/IO-3499-React-19 - The great button refactor of 2026

---
 .../bill-delete-button.component.jsx          |  8 +-----
 ...form-lines.extended.formitem.component.jsx | 10 +++-----
 .../bill-form/bill-form.lines.component.jsx   |  5 ++--
 .../billline-add-inventory.component.jsx      |  2 +-
 .../bills-list-table.component.jsx            | 11 +++-----
 .../ca-bc-pvrt-calculator.component.jsx       |  4 +--
 .../contracts-list.component.jsx              |  5 ++--
 .../courtesy-cars-list.component.jsx          |  5 ++--
 .../csi-response-list-paginated.component.jsx |  8 +-----
 .../dashboard-grid.component.jsx              |  4 +--
 .../dms-allocations-summary-ap.component.jsx  |  7 +++---
 .../dms-allocations-summary.component.jsx     |  8 ++----
 .../rr-dms-allocations-summary.component.jsx  |  8 ++----
 .../inventory-line-delete.component.jsx       |  4 +--
 .../inventory-list.component.jsx              | 17 ++++++-------
 .../schedule-event.note.component.jsx         |  4 +--
 .../job-audit-trail.component.jsx             |  5 ++--
 .../job-checklist-template-list.component.jsx |  9 ++++---
 .../job-detail-lines/job-lines.component.jsx  | 25 ++++++++-----------
 .../job-line-convert-to-labor.component.jsx   |  5 ++--
 .../job-payments/job-payments.component.jsx   |  5 ++--
 .../job-sync-button.component.jsx             |  3 +--
 .../jobs-admin-change.status.component.jsx    |  4 +--
 .../jobs-available-scan.component.jsx         | 11 +++-----
 .../jobs-available-table.component.jsx        | 22 ++++++++--------
 .../jobs-change-status.component.jsx          |  4 +--
 ...eate-vehicle-info.predefined.component.jsx |  5 ++--
 .../jobs-detail-header-actions.component.jsx  |  3 +--
 .../jobs-documents-gallery.component.jsx      |  4 +--
 ...s-documents-imgproxy-gallery.component.jsx |  5 ++--
 ...jobs-documents-local-gallery.container.jsx |  5 ++--
 .../jobs-find-modal.component.jsx             |  5 ++--
 .../jobs-list-paginated.component.jsx         |  4 +--
 .../jobs-list/jobs-list.component.jsx         |  4 +--
 .../jobs-notes/jobs.notes.component.jsx       | 14 ++++++-----
 .../jobs-ready-list.component.jsx             |  4 +--
 ...or-allocations-table.payroll.component.jsx |  5 ++--
 .../owners-list/owners-list.component.jsx     |  4 +--
 .../parts-dispatch-table.component.jsx        |  5 +---
 .../parts-order-delete-line.component.jsx     |  4 +--
 ...arts-order-list-table-drawer.component.jsx |  9 +++----
 .../payment-list-paginated.component.jsx      |  9 +++----
 .../print-wrapper/print-wrapper.component.jsx | 12 +++++----
 .../production-board-kanban.component.jsx     |  4 +--
 .../production-list-table.component.jsx       |  5 ++--
 .../production-sublets-manage.component.jsx   | 10 +++-----
 .../schedule-production-list.component.jsx    |  3 +--
 .../scoreboard-jobs-list.component.jsx        |  5 ++--
 .../scorebard-remove-button.component.jsx     |  6 +----
 .../shop-employees-form.component.jsx         |  5 ++--
 .../simplified-parts-jobs-list.component.jsx  |  5 ++--
 .../task-list/task-list.component.jsx         |  8 +++---
 .../tech-lookup-jobs-drawer.component.jsx     |  2 +-
 .../tech-lookup-jobs-list.component.jsx       |  4 +--
 .../time-ticket-calculator.component.jsx      | 20 ++++++++++-----
 .../time-ticket-list.component.jsx            |  5 ++--
 .../tt-approvals-list.component.jsx           |  4 +--
 .../vehicles-list/vehicles-list.component.jsx |  4 +--
 .../vendors-list/vendors-list.component.jsx   |  4 +--
 .../src/pages/bills/bills.page.component.jsx  |  8 ++----
 .../export-logs.page.component.jsx            |  4 +--
 .../jobs-detail.page.component.jsx            |  4 +--
 .../phonebook/phonebook.page.component.jsx    |  4 +--
 ...simplified-parts-jobs-detail.component.jsx |  4 +--
 .../tech-assigned-prod-jobs.component.jsx     |  4 +--
 .../tech-dispatched-parts.page.jsx            |  4 +--
 66 files changed, 163 insertions(+), 267 deletions(-)

diff --git a/client/src/components/bill-delete-button/bill-delete-button.component.jsx b/client/src/components/bill-delete-button/bill-delete-button.component.jsx
index 9c591fd5a..a9741d088 100644
--- a/client/src/components/bill-delete-button/bill-delete-button.component.jsx
+++ b/client/src/components/bill-delete-button/bill-delete-button.component.jsx
@@ -77,13 +77,7 @@ export function BillDeleteButton({ bill, jobid, callback, insertAuditTrail }) {
   return (
     <RbacWrapper action="bills:delete" noauth={<></>}>
       <Popconfirm disabled={bill.exported} onConfirm={handleDelete} title={t("bills.labels.deleteconfirm")}>
-        <Button
-          disabled={bill.exported}
-          // onClick={handleDelete}
-          loading={loading}
-        >
-          <DeleteFilled />
-        </Button>
+        <Button icon={<DeleteFilled />} disabled={bill.exported} loading={loading} />
       </Popconfirm>
     </RbacWrapper>
   );
diff --git a/client/src/components/bill-form-lines-extended/bill-form-lines.extended.formitem.component.jsx b/client/src/components/bill-form-lines-extended/bill-form-lines.extended.formitem.component.jsx
index 7b7bf1990..cf8104606 100644
--- a/client/src/components/bill-form-lines-extended/bill-form-lines.extended.formitem.component.jsx
+++ b/client/src/components/bill-form-lines-extended/bill-form-lines.extended.formitem.component.jsx
@@ -32,6 +32,7 @@ export function BillFormItemsExtendedFormItem({
   if (!value)
     return (
       <Button
+        icon={<PlusCircleFilled />}
         onClick={() => {
           const values = form.getFieldsValue("billlineskeys");
 
@@ -53,9 +54,7 @@ export function BillFormItemsExtendedFormItem({
             }
           });
         }}
-      >
-        <PlusCircleFilled />
-      </Button>
+      />
     );
 
   return (
@@ -196,6 +195,7 @@ export function BillFormItemsExtendedFormItem({
       </Form.Item>
 
       <Button
+        icon={<MinusCircleFilled />}
         onClick={() => {
           const values = form.getFieldsValue("billlineskeys");
 
@@ -207,9 +207,7 @@ export function BillFormItemsExtendedFormItem({
             }
           });
         }}
-      >
-        <MinusCircleFilled />
-      </Button>
+      />
     </Space>
   );
 }
diff --git a/client/src/components/bill-form/bill-form.lines.component.jsx b/client/src/components/bill-form/bill-form.lines.component.jsx
index 5b4a5ca8c..ad81b683e 100644
--- a/client/src/components/bill-form/bill-form.lines.component.jsx
+++ b/client/src/components/bill-form/bill-form.lines.component.jsx
@@ -564,11 +564,10 @@ export function BillEnterModalLinesComponent({
             {() => (
               <Space wrap>
                 <Button
+                  icon={<DeleteFilled />}
                   disabled={disabled || getFieldValue("billlines")[record.fieldKey]?.inventories?.length > 0}
                   onClick={() => remove(record.name)}
-                >
-                  <DeleteFilled />
-                </Button>
+                />
 
                 {Simple_Inventory.treatment === "on" && (
                   <BilllineAddInventory
diff --git a/client/src/components/billline-add-inventory/billline-add-inventory.component.jsx b/client/src/components/billline-add-inventory/billline-add-inventory.component.jsx
index 1b8d56156..315d94534 100644
--- a/client/src/components/billline-add-inventory/billline-add-inventory.component.jsx
+++ b/client/src/components/billline-add-inventory/billline-add-inventory.component.jsx
@@ -124,11 +124,11 @@ export function BilllineAddInventory({ currentUser, bodyshop, billline, disabled
   return (
     <Tooltip title={t("inventory.actions.addtoinventory")}>
       <Button
+        icon={<FileAddFilled />}
         loading={loading}
         disabled={disabled || billline?.inventories?.length >= billline.quantity}
         onClick={addToInventory}
       >
-        <FileAddFilled />
         {billline?.inventories?.length > 0 && <div>({billline?.inventories?.length} in inv)</div>}
       </Button>
     </Tooltip>
diff --git a/client/src/components/bills-list-table/bills-list-table.component.jsx b/client/src/components/bills-list-table/bills-list-table.component.jsx
index 166cd0b5b..9de0b7b1c 100644
--- a/client/src/components/bills-list-table/bills-list-table.component.jsx
+++ b/client/src/components/bills-list-table/bills-list-table.component.jsx
@@ -84,15 +84,14 @@ export function BillsListTableComponent({
             }
           });
         }}
-      >
-        <FaTasks />
-      </Button>
+        icon={<FaTasks />}
+      />
+
       <BillDeleteButton bill={record} jobid={job.id} />
       <BillDetailEditReturnComponent
         data={{ bills_by_pk: { ...record, jobid: job.id, job: job } }}
         disabled={record.is_credit_memo || record.vendorid === bodyshop.inhousevendorid || jobRO}
       />
-
       {record.isinhouse && (
         <PrintWrapperComponent
           templateObject={{
@@ -190,9 +189,7 @@ export function BillsListTableComponent({
       title={t("bills.labels.bills")}
       extra={
         <Space wrap>
-          <Button onClick={() => refetch()}>
-            <SyncOutlined />
-          </Button>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
           {job && job.converted ? (
             <>
               <Button
diff --git a/client/src/components/ca-bc-pvrt-calculator/ca-bc-pvrt-calculator.component.jsx b/client/src/components/ca-bc-pvrt-calculator/ca-bc-pvrt-calculator.component.jsx
index ee99c1c8b..8d22e5d2e 100644
--- a/client/src/components/ca-bc-pvrt-calculator/ca-bc-pvrt-calculator.component.jsx
+++ b/client/src/components/ca-bc-pvrt-calculator/ca-bc-pvrt-calculator.component.jsx
@@ -41,9 +41,7 @@ export default function CABCpvrtCalculator({ disabled, form }) {
 
   return (
     <Popover destroyOnHidden content={popContent} open={visibility} disabled={disabled}>
-      <Button disabled={disabled} onClick={() => setVisibility(true)}>
-        <CalculatorFilled />
-      </Button>
+      <Button disabled={disabled} onClick={() => setVisibility(true)} icon={<CalculatorFilled />} />
     </Popover>
   );
 }
diff --git a/client/src/components/contracts-list/contracts-list.component.jsx b/client/src/components/contracts-list/contracts-list.component.jsx
index 2a76d8630..6b7e69dd7 100644
--- a/client/src/components/contracts-list/contracts-list.component.jsx
+++ b/client/src/components/contracts-list/contracts-list.component.jsx
@@ -156,9 +156,8 @@ export function ContractsList({ bodyshop, loading, contracts, refetch, total, se
             </>
           )}
           <Button onClick={() => setContractFinderContext()}>{t("contracts.actions.find")}</Button>
-          <Button onClick={() => refetch()}>
-            <SyncOutlined />
-          </Button>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
+
           <Input.Search
             placeholder={search.searh || t("general.labels.search")}
             onSearch={(value) => {
diff --git a/client/src/components/courtesy-cars-list/courtesy-cars-list.component.jsx b/client/src/components/courtesy-cars-list/courtesy-cars-list.component.jsx
index 4ef5d22ed..9b43ed83d 100644
--- a/client/src/components/courtesy-cars-list/courtesy-cars-list.component.jsx
+++ b/client/src/components/courtesy-cars-list/courtesy-cars-list.component.jsx
@@ -255,9 +255,8 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
       title={t("menus.header.courtesycars")}
       extra={
         <Space wrap>
-          <Button onClick={() => refetch()}>
-            <SyncOutlined />
-          </Button>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
+
           <Dropdown trigger="click" menu={menu}>
             <Button>{t("general.labels.print")}</Button>
           </Dropdown>
diff --git a/client/src/components/csi-response-list-paginated/csi-response-list-paginated.component.jsx b/client/src/components/csi-response-list-paginated/csi-response-list-paginated.component.jsx
index fc47e3df6..5638b7a84 100644
--- a/client/src/components/csi-response-list-paginated/csi-response-list-paginated.component.jsx
+++ b/client/src/components/csi-response-list-paginated/csi-response-list-paginated.component.jsx
@@ -85,13 +85,7 @@ export default function CsiResponseListPaginated({ refetch, loading, responses,
   };
 
   return (
-    <Card
-      extra={
-        <Button onClick={() => refetch()}>
-          <SyncOutlined />
-        </Button>
-      }
-    >
+    <Card extra={<Button onClick={() => refetch()} icon={<SyncOutlined />} />}>
       <Table
         loading={loading}
         pagination={{ placement: "top", pageSize: pageLimit, current: parseInt(state.page || 1), total: total }}
diff --git a/client/src/components/dashboard-grid/dashboard-grid.component.jsx b/client/src/components/dashboard-grid/dashboard-grid.component.jsx
index fac7ebb00..0befe7c16 100644
--- a/client/src/components/dashboard-grid/dashboard-grid.component.jsx
+++ b/client/src/components/dashboard-grid/dashboard-grid.component.jsx
@@ -196,9 +196,7 @@ export function DashboardGridComponent({ currentUser }) {
       <PageHeader
         extra={
           <Space>
-            <Button onClick={() => refetch()}>
-              <SyncOutlined />
-            </Button>
+            <Button onClick={() => refetch()} icon={<SyncOutlined />} />
             <Dropdown menu={menu} trigger={["click"]}>
               <Button>{t("dashboard.actions.addcomponent")}</Button>
             </Dropdown>
diff --git a/client/src/components/dms-allocations-summary-ap/dms-allocations-summary-ap.component.jsx b/client/src/components/dms-allocations-summary-ap/dms-allocations-summary-ap.component.jsx
index 2ca64d997..77e887d07 100644
--- a/client/src/components/dms-allocations-summary-ap/dms-allocations-summary-ap.component.jsx
+++ b/client/src/components/dms-allocations-summary-ap/dms-allocations-summary-ap.component.jsx
@@ -1,6 +1,6 @@
 import { SyncOutlined } from "@ant-design/icons";
 import { Button, Card, Form, Input, Table } from "antd";
-import { useEffect, useState, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -111,9 +111,8 @@ export function DmsAllocationsSummaryAp({ socket, bodyshop, billids, title }) {
           onClick={() => {
             socket.emit("pbs-calculate-allocations-ap", billids, (ack) => setAllocationsSummary(ack));
           }}
-        >
-          <SyncOutlined />
-        </Button>
+          icon={<SyncOutlined />}
+        />
       }
     >
       <Table
diff --git a/client/src/components/dms-allocations-summary/dms-allocations-summary.component.jsx b/client/src/components/dms-allocations-summary/dms-allocations-summary.component.jsx
index f32c41185..75d15aa02 100644
--- a/client/src/components/dms-allocations-summary/dms-allocations-summary.component.jsx
+++ b/client/src/components/dms-allocations-summary/dms-allocations-summary.component.jsx
@@ -1,6 +1,6 @@
 import { Alert, Button, Card, Table, Typography } from "antd";
 import { SyncOutlined } from "@ant-design/icons";
-import { useCallback, useEffect, useState, useRef } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -110,11 +110,7 @@ export function DmsAllocationsSummary({ mode, socket, bodyshop, jobId, title, on
   return (
     <Card
       title={title}
-      extra={
-        <Button onClick={fetchAllocations} aria-label={t("general.actions.refresh")}>
-          <SyncOutlined />
-        </Button>
-      }
+      extra={<Button onClick={fetchAllocations} aria-label={t("general.actions.refresh")} icon={<SyncOutlined />} />}
     >
       {bodyshop.pbs_configuration?.disablebillwip && (
         <Alert type="warning" title={t("jobs.labels.dms.disablebillwip")} />
diff --git a/client/src/components/dms-allocations-summary/rr-dms-allocations-summary.component.jsx b/client/src/components/dms-allocations-summary/rr-dms-allocations-summary.component.jsx
index 0539ae989..abd2137af 100644
--- a/client/src/components/dms-allocations-summary/rr-dms-allocations-summary.component.jsx
+++ b/client/src/components/dms-allocations-summary/rr-dms-allocations-summary.component.jsx
@@ -1,6 +1,6 @@
 import { Alert, Button, Card, Table, Tabs, Typography } from "antd";
 import { SyncOutlined } from "@ant-design/icons";
-import { useCallback, useEffect, useMemo, useState, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -329,11 +329,7 @@ export function RrAllocationsSummary({ socket, bodyshop, jobId, title, onAllocat
   return (
     <Card
       title={title}
-      extra={
-        <Button onClick={fetchAllocations} aria-label={t("general.actions.refresh")}>
-          <SyncOutlined />
-        </Button>
-      }
+      extra={<Button onClick={fetchAllocations} aria-label={t("general.actions.refresh")} icon={<SyncOutlined />} />}
     >
       {bodyshop.pbs_configuration?.disablebillwip && (
         <Alert type="warning" title={t("jobs.labels.dms.disablebillwip")} />
diff --git a/client/src/components/inventory-line-delete/inventory-line-delete.component.jsx b/client/src/components/inventory-line-delete/inventory-line-delete.component.jsx
index 1a1439f1b..2afe57f83 100644
--- a/client/src/components/inventory-line-delete/inventory-line-delete.component.jsx
+++ b/client/src/components/inventory-line-delete/inventory-line-delete.component.jsx
@@ -53,9 +53,7 @@ export default function InventoryLineDelete({ inventoryline, disabled, refetch }
         onConfirm={handleDelete}
         title={t("inventory.labels.deleteconfirm")}
       >
-        <Button disabled={disabled || inventoryline.consumedbybillid} loading={loading}>
-          <DeleteFilled />
-        </Button>
+        <Button disabled={disabled || inventoryline.consumedbybillid} loading={loading} icon={<DeleteFilled />} />
       </Popconfirm>
     </RbacWrapper>
   );
diff --git a/client/src/components/inventory-list/inventory-list.component.jsx b/client/src/components/inventory-list/inventory-list.component.jsx
index 3d0d6e1e8..16e69a232 100644
--- a/client/src/components/inventory-list/inventory-list.component.jsx
+++ b/client/src/components/inventory-list/inventory-list.component.jsx
@@ -110,9 +110,9 @@ export function JobsList({ refetch, loading, jobs, total, setInventoryUpsertCont
                 }
               });
             }}
-          >
-            <EditFilled />
-          </Button>
+            icon={<EditFilled />}
+          />
+
           <InventoryLineDelete inventoryline={record} refetch={refetch} />
         </Space>
       )
@@ -155,9 +155,9 @@ export function JobsList({ refetch, loading, jobs, total, setInventoryUpsertCont
                 context: {}
               });
             }}
-          >
-            <FileAddFilled />
-          </Button>
+            icon={<FileAddFilled />}
+          />
+
           <Button
             onClick={() => {
               const updatedSearch = { ...search };
@@ -172,9 +172,8 @@ export function JobsList({ refetch, loading, jobs, total, setInventoryUpsertCont
             {search.showall ? t("inventory.labels.showavailable") : t("inventory.labels.showall")}
           </Button>
 
-          <Button onClick={() => refetch()}>
-            <SyncOutlined />
-          </Button>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
+
           <Input.Search
             placeholder={search.search || t("general.labels.search")}
             onSearch={(value) => {
diff --git a/client/src/components/job-at-change/schedule-event.note.component.jsx b/client/src/components/job-at-change/schedule-event.note.component.jsx
index 1cc52a6a9..de73f127a 100644
--- a/client/src/components/job-at-change/schedule-event.note.component.jsx
+++ b/client/src/components/job-at-change/schedule-event.note.component.jsx
@@ -61,9 +61,7 @@ export function ScheduleEventNote({ event }) {
         ) : (
           <Input.TextArea rows={3} value={note} onChange={(e) => setNote(e.target.value)} style={{ maxWidth: "8vw" }} />
         )}
-        <Button onClick={toggleEdit} loading={loading}>
-          {editing ? <SaveFilled /> : <EditFilled />}
-        </Button>
+        <Button onClick={toggleEdit} loading={loading} icon={editing ? <SaveFilled /> : <EditFilled />} />
       </Space>
     </DataLabel>
   );
diff --git a/client/src/components/job-audit-trail/job-audit-trail.component.jsx b/client/src/components/job-audit-trail/job-audit-trail.component.jsx
index 9ad6a6b3c..b11911d8a 100644
--- a/client/src/components/job-audit-trail/job-audit-trail.component.jsx
+++ b/client/src/components/job-audit-trail/job-audit-trail.component.jsx
@@ -159,9 +159,8 @@ export function JobAuditTrail({ bodyshop, jobId }) {
               onClick={() => {
                 refetch();
               }}
-            >
-              <SyncOutlined />
-            </Button>
+              icon={<SyncOutlined />}
+            />
           }
         >
           <Table loading={loading} columns={columns} rowKey="id" dataSource={data ? data.audit_trail : []} />
diff --git a/client/src/components/job-checklist/components/job-checklist-template-list/job-checklist-template-list.component.jsx b/client/src/components/job-checklist/components/job-checklist-template-list/job-checklist-template-list.component.jsx
index d84b8f526..907fe17d2 100644
--- a/client/src/components/job-checklist/components/job-checklist-template-list/job-checklist-template-list.component.jsx
+++ b/client/src/components/job-checklist/components/job-checklist-template-list/job-checklist-template-list.component.jsx
@@ -61,9 +61,12 @@ export default function JobIntakeTemplateList({ templates }) {
         renderItem={(template) => (
           <List.Item
             actions={[
-              <Button key="checkListTemplateButton" loading={loading} onClick={() => renderTemplate(template)}>
-                <PrinterFilled />
-              </Button>
+              <Button
+                key="checkListTemplateButton"
+                loading={loading}
+                onClick={() => renderTemplate(template)}
+                icon={<PrinterFilled />}
+              />
             ]}
           >
             <List.Item.Meta
diff --git a/client/src/components/job-detail-lines/job-lines.component.jsx b/client/src/components/job-detail-lines/job-lines.component.jsx
index cd73306e4..2675f30cf 100644
--- a/client/src/components/job-detail-lines/job-lines.component.jsx
+++ b/client/src/components/job-detail-lines/job-lines.component.jsx
@@ -395,9 +395,8 @@ export function JobLinesComponent({
                         context: { ...record, jobid: job.id }
                       });
                     }}
-                  >
-                    <EditFilled />
-                  </Button>
+                    icon={<EditFilled />}
+                  />
                 )}
                 <Button
                   title={t("tasks.buttons.create")}
@@ -409,9 +408,9 @@ export function JobLinesComponent({
                       }
                     });
                   }}
-                >
-                  <FaTasks />
-                </Button>
+                  icon={<FaTasks />}
+                />
+
                 {(record.manual_line || jobIsPrivate) && !technician && (
                   <Button
                     disabled={jobRO}
@@ -431,9 +430,8 @@ export function JobLinesComponent({
                       await axios.post("/job/totalsssu", { id: job.id });
                       if (refetch) refetch();
                     }}
-                  >
-                    <DeleteFilled />
-                  </Button>
+                    icon={<DeleteFilled />}
+                  />
                 )}
               </Space>
             )
@@ -542,9 +540,7 @@ export function JobLinesComponent({
         title={t("jobs.labels.estimatelines")}
         extra={
           <Space wrap>
-            <Button onClick={() => refetch()}>
-              <SyncOutlined />
-            </Button>
+            <Button onClick={() => refetch()} icon={<SyncOutlined />} />
 
             {/* Bulk Update Location */}
             <Button
@@ -609,8 +605,8 @@ export function JobLinesComponent({
 
                   setSelectedLines([]);
                 }}
+                icon={<HomeOutlined />}
               >
-                <HomeOutlined />
                 {t("parts.actions.orderinhouse")}
                 {selectedLines.length > 0 && ` (${selectedLines.length})`}
               </Button>
@@ -641,6 +637,7 @@ export function JobLinesComponent({
 
             {!isPartsEntry && (
               <Button
+                icon={<FilterFilled />}
                 id="job-lines-filter-parts-only-button"
                 onClick={() => {
                   setState((state) => ({
@@ -652,7 +649,7 @@ export function JobLinesComponent({
                   }));
                 }}
               >
-                <FilterFilled /> {t("jobs.actions.filterpartsonly")}
+                {t("jobs.actions.filterpartsonly")}
               </Button>
             )}
 
diff --git a/client/src/components/job-line-convert-to-labor/job-line-convert-to-labor.component.jsx b/client/src/components/job-line-convert-to-labor/job-line-convert-to-labor.component.jsx
index d3807b615..4f088697d 100644
--- a/client/src/components/job-line-convert-to-labor/job-line-convert-to-labor.component.jsx
+++ b/client/src/components/job-line-convert-to-labor/job-line-convert-to-labor.component.jsx
@@ -187,9 +187,8 @@ export function JobLineConvertToLabor({
               loading={loading}
               onClick={handleClick}
               {...otherBtnProps}
-            >
-              <ClockCircleOutlined />
-            </Button>
+              icon={<ClockCircleOutlined />}
+            />
           </Tooltip>
         </Popover>
       )}
diff --git a/client/src/components/job-payments/job-payments.component.jsx b/client/src/components/job-payments/job-payments.component.jsx
index 6afcb9ea7..37342aa83 100644
--- a/client/src/components/job-payments/job-payments.component.jsx
+++ b/client/src/components/job-payments/job-payments.component.jsx
@@ -107,9 +107,8 @@ export function JobPayments({ job, bodyshop, setPaymentContext, setCardPaymentCo
                 context: record
               });
             }}
-          >
-            <EditFilled />
-          </Button>
+            icon={<EditFilled />}
+          />
           <PrintWrapperComponent
             templateObject={{
               name: TemplateList("payment").payment_receipt.key,
diff --git a/client/src/components/job-sync-button/job-sync-button.component.jsx b/client/src/components/job-sync-button/job-sync-button.component.jsx
index 7c4039cd9..0704f6765 100644
--- a/client/src/components/job-sync-button/job-sync-button.component.jsx
+++ b/client/src/components/job-sync-button/job-sync-button.component.jsx
@@ -11,8 +11,7 @@ export default function JobSyncButton({ job }) {
   };
   if (job?.available_jobs && job?.available_jobs?.length > 0)
     return (
-      <Button onClick={handleClick}>
-        <SyncOutlined />
+      <Button onClick={handleClick} icon={<SyncOutlined />}>
         {t("jobs.actions.sync")}
       </Button>
     );
diff --git a/client/src/components/jobs-admin-change-status/jobs-admin-change.status.component.jsx b/client/src/components/jobs-admin-change-status/jobs-admin-change.status.component.jsx
index ce5c45ece..aa4c74d79 100644
--- a/client/src/components/jobs-admin-change-status/jobs-admin-change.status.component.jsx
+++ b/client/src/components/jobs-admin-change-status/jobs-admin-change.status.component.jsx
@@ -53,10 +53,8 @@ export function JobsAdminStatus({ insertAuditTrail, bodyshop, job }) {
 
   return (
     <Dropdown menu={statusMenu} trigger={["click"]} key="changestatus">
-      <Button shape="round">
+      <Button icon={<DownCircleFilled />} iconPlacement="end" shape="round">
         <span>{job.status}</span>
-
-        <DownCircleFilled />
       </Button>
     </Dropdown>
   );
diff --git a/client/src/components/jobs-available-scan/jobs-available-scan.component.jsx b/client/src/components/jobs-available-scan/jobs-available-scan.component.jsx
index c8dbd1065..23aa15168 100644
--- a/client/src/components/jobs-available-scan/jobs-available-scan.component.jsx
+++ b/client/src/components/jobs-available-scan/jobs-available-scan.component.jsx
@@ -94,11 +94,7 @@ export function JobsAvailableScan({ partnerVersion, refetch }) {
     {
       title: t("general.labels.actions"),
       key: "actions",
-      render: (text, record) => (
-        <Button onClick={() => handleImport(record.filepath)}>
-          <DownloadOutlined />
-        </Button>
-      )
+      render: (text, record) => <Button icon={<DownloadOutlined />} onClick={() => handleImport(record.filepath)} />
     }
   ];
 
@@ -126,15 +122,14 @@ export function JobsAvailableScan({ partnerVersion, refetch }) {
       extra={
         <Space wrap>
           <Button
+            icon={<SyncOutlined />}
             loading={loading}
             disabled={!partnerVersion}
             onClick={() => {
               scanEstimates();
             }}
             id="scan-estimates-button"
-          >
-            <SyncOutlined />
-          </Button>
+          />
 
           <Input.Search
             placeholder={t("general.labels.search")}
diff --git a/client/src/components/jobs-available-table/jobs-available-table.component.jsx b/client/src/components/jobs-available-table/jobs-available-table.component.jsx
index 2d48f7062..55e8c9152 100644
--- a/client/src/components/jobs-available-table/jobs-available-table.component.jsx
+++ b/client/src/components/jobs-available-table/jobs-available-table.component.jsx
@@ -135,17 +135,16 @@ export function JobsAvailableComponent({ bodyshop, loading, data, refetch, addJo
                   refetch();
                 });
               }}
-            >
-              <DeleteFilled />
-            </Button>
+              icon={<DeleteFilled />}
+            />
             {!isClosed && (
               <>
-                <Button onClick={() => addJobAsNew(record)} disabled={record.issupplement}>
-                  <PlusCircleFilled />
-                </Button>
-                <Button onClick={() => addJobAsSupp(record)}>
-                  <DownloadOutlined />
-                </Button>
+                <Button
+                  onClick={() => addJobAsNew(record)}
+                  disabled={record.issupplement}
+                  icon={<PlusCircleFilled />}
+                />
+                <Button onClick={() => addJobAsSupp(record)} icon={<DownloadOutlined />} />
               </>
             )}
             {isClosed && <Alert type="error" title={t("jobs.labels.alreadyclosed")}></Alert>}
@@ -175,9 +174,8 @@ export function JobsAvailableComponent({ bodyshop, loading, data, refetch, addJo
             onClick={() => {
               refetch();
             }}
-          >
-            <SyncOutlined />
-          </Button>
+            icon={<SyncOutlined />}
+          />
           <Button
             onClick={() => {
               deleteAllAvailableJobs()
diff --git a/client/src/components/jobs-change-status/jobs-change-status.component.jsx b/client/src/components/jobs-change-status/jobs-change-status.component.jsx
index 22c65e459..8d4ce36c7 100644
--- a/client/src/components/jobs-change-status/jobs-change-status.component.jsx
+++ b/client/src/components/jobs-change-status/jobs-change-status.component.jsx
@@ -96,10 +96,8 @@ export function JobsChangeStatus({ job, bodyshop, jobRO, insertAuditTrail, isPar
 
   return (
     <Dropdown menu={statusMenu} trigger={["click"]} key="changestatus" disabled={jobRO || !job.converted}>
-      <Button shape="round">
+      <Button shape="round" icon={<DownCircleFilled />} iconPlacement="end">
         <span>{job.status}</span>
-
-        <DownCircleFilled />
       </Button>
     </Dropdown>
   );
diff --git a/client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.predefined.component.jsx b/client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.predefined.component.jsx
index 2cdd24a06..90efce131 100644
--- a/client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.predefined.component.jsx
+++ b/client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.predefined.component.jsx
@@ -56,9 +56,8 @@ export default function JobsCreateVehicleInfoPredefined({ disabled, form }) {
                   setOpen(false);
                   setSearch("");
                 }}
-              >
-                <PlusOutlined />
-              </Button>
+                icon={<PlusOutlined />}
+              />
             )
           }
         ]}
diff --git a/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx b/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx
index 8e62c5988..6855fdfe9 100644
--- a/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx
+++ b/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx
@@ -1286,9 +1286,8 @@ export function JobsDetailHeaderActions({
         open={dropdownOpen}
         onOpenChange={handleDropdownOpenChange}
       >
-        <Button>
+        <Button icon={<DownCircleFilled />} iconPlacement="end">
           <span>{t("general.labels.actions")}</span>
-          <DownCircleFilled />
         </Button>
       </Dropdown>
 
diff --git a/client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx b/client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx
index a6cd07770..969b49ea1 100644
--- a/client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx
+++ b/client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx
@@ -128,9 +128,7 @@ function JobsDocumentsComponent({
       <Row gutter={[16, 16]}>
         <Col span={24}>
           <Space wrap>
-            <Button onClick={() => refetch && refetch()}>
-              <SyncOutlined />
-            </Button>
+            <Button onClick={() => refetch && refetch()} icon={<SyncOutlined />} />
             <JobsDocumentsGallerySelectAllComponent galleryImages={galleryImages} setGalleryImages={setgalleryImages} />
             <JobsDocumentsDownloadButton galleryImages={galleryImages} identifier={downloadIdentifier} />
             <JobsDocumentsDeleteButton galleryImages={galleryImages} deletionCallback={billsCallback || refetch} />
diff --git a/client/src/components/jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.component.jsx b/client/src/components/jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.component.jsx
index f2f5fbfd5..8f78cf675 100644
--- a/client/src/components/jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.component.jsx
+++ b/client/src/components/jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.component.jsx
@@ -65,9 +65,8 @@ function JobsDocumentsImgproxyComponent({
                 //Do the imgproxy refresh too
                 fetchThumbnails();
               }}
-            >
-              <SyncOutlined />
-            </Button>
+              icon={<SyncOutlined />}
+            />
             <JobsDocumentsGallerySelectAllComponent galleryImages={galleryImages} setGalleryImages={setGalleryImages} />
             {!billId && (
               <JobsDocumentsGalleryReassign galleryImages={galleryImages} callback={fetchThumbnails || refetch} />
diff --git a/client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.container.jsx b/client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.container.jsx
index f4c40fee8..ff4c8dda8 100644
--- a/client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.container.jsx
+++ b/client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.container.jsx
@@ -102,9 +102,8 @@ export function JobsDocumentsLocalGallery({
                   }
                 }
               }}
-            >
-              <SyncOutlined />
-            </Button>
+              icon={<SyncOutlined />}
+            />
             <a href={CreateExplorerLinkForJob({ jobid: job.id })}>
               <Button>{t("documents.labels.openinexplorer")}</Button>
             </a>
diff --git a/client/src/components/jobs-find-modal/jobs-find-modal.component.jsx b/client/src/components/jobs-find-modal/jobs-find-modal.component.jsx
index 0048ecdb2..47c8ffd5f 100644
--- a/client/src/components/jobs-find-modal/jobs-find-modal.component.jsx
+++ b/client/src/components/jobs-find-modal/jobs-find-modal.component.jsx
@@ -179,9 +179,8 @@ export default function JobsFindModalComponent({
               onClick={() => {
                 jobsListRefetch();
               }}
-            >
-              <SyncOutlined />
-            </Button>
+              icon={<SyncOutlined />}
+            />
             <Input
               value={modalSearch}
               onChange={(e) => {
diff --git a/client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx b/client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx
index 70a2f27ef..ec9b77b59 100644
--- a/client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx
+++ b/client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx
@@ -224,9 +224,7 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
               </Button>
             </>
           )}
-          <Button onClick={() => refetch()}>
-            <SyncOutlined />
-          </Button>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
           <Input.Search
             placeholder={search.search || t("general.labels.search")}
             onSearch={(value) => {
diff --git a/client/src/components/jobs-list/jobs-list.component.jsx b/client/src/components/jobs-list/jobs-list.component.jsx
index e53fae10c..063fabbd6 100644
--- a/client/src/components/jobs-list/jobs-list.component.jsx
+++ b/client/src/components/jobs-list/jobs-list.component.jsx
@@ -313,9 +313,7 @@ export function JobsList({ bodyshop }) {
       title={t("titles.bc.jobs-active")}
       extra={
         <Space wrap>
-          <Button onClick={() => refetch()}>
-            <SyncOutlined />
-          </Button>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
           <Input.Search
             placeholder={t("general.labels.search")}
             onChange={(e) => {
diff --git a/client/src/components/jobs-notes/jobs.notes.component.jsx b/client/src/components/jobs-notes/jobs.notes.component.jsx
index d307be7e8..d325176e3 100644
--- a/client/src/components/jobs-notes/jobs.notes.component.jsx
+++ b/client/src/components/jobs-notes/jobs.notes.component.jsx
@@ -121,9 +121,12 @@ export function JobNotesComponent({
       width: 200,
       render: (text, record) => (
         <Space wrap>
-          <Button loading={deleteLoading} disabled={record.audit || jobRO} onClick={() => handleNoteDelete(record.id)}>
-            <DeleteFilled />
-          </Button>
+          <Button
+            loading={deleteLoading}
+            disabled={record.audit || jobRO}
+            onClick={() => handleNoteDelete(record.id)}
+            icon={<DeleteFilled />}
+          />
           <Button
             disabled={record.audit || jobRO}
             onClick={() => {
@@ -135,9 +138,8 @@ export function JobNotesComponent({
                 }
               });
             }}
-          >
-            <EditFilled />
-          </Button>
+            icon={<EditFilled />}
+          />
           <PrintWrapperComponent
             templateObject={{
               name: Templates.individual_job_note.key,
diff --git a/client/src/components/jobs-ready-list/jobs-ready-list.component.jsx b/client/src/components/jobs-ready-list/jobs-ready-list.component.jsx
index fa0ab18d5..4aba84804 100644
--- a/client/src/components/jobs-ready-list/jobs-ready-list.component.jsx
+++ b/client/src/components/jobs-ready-list/jobs-ready-list.component.jsx
@@ -297,9 +297,7 @@ export function JobsReadyList({ bodyshop }) {
       extra={
         <Space wrap>
           <span>({readyStatuses && readyStatuses.join(", ")})</span>
-          <Button onClick={() => refetch()}>
-            <SyncOutlined />
-          </Button>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
           <Input.Search
             placeholder={t("general.labels.search")}
             onChange={(e) => {
diff --git a/client/src/components/labor-allocations-table/labor-allocations-table.payroll.component.jsx b/client/src/components/labor-allocations-table/labor-allocations-table.payroll.component.jsx
index dbb9fcf33..dec9d4c5f 100644
--- a/client/src/components/labor-allocations-table/labor-allocations-table.payroll.component.jsx
+++ b/client/src/components/labor-allocations-table/labor-allocations-table.payroll.component.jsx
@@ -246,9 +246,8 @@ export function PayrollLaborAllocationsTable({
                   setTotals(data);
                   refetch();
                 }}
-              >
-                <SyncOutlined />
-              </Button>
+                icon={<SyncOutlined />}
+              />
             </Space>
           }
         >
diff --git a/client/src/components/owners-list/owners-list.component.jsx b/client/src/components/owners-list/owners-list.component.jsx
index 9959af213..f495a04a4 100644
--- a/client/src/components/owners-list/owners-list.component.jsx
+++ b/client/src/components/owners-list/owners-list.component.jsx
@@ -99,9 +99,7 @@ export default function OwnersListComponent({ loading, owners, total, refetch })
               </Button>
             </>
           )}
-          <Button onClick={() => refetch()}>
-            <SyncOutlined />
-          </Button>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
           <Input.Search
             placeholder={search.search || t("general.labels.search")}
             onSearch={(value) => {
diff --git a/client/src/components/parts-dispatch-table/parts-dispatch-table.component.jsx b/client/src/components/parts-dispatch-table/parts-dispatch-table.component.jsx
index cb478429d..df32c0705 100644
--- a/client/src/components/parts-dispatch-table/parts-dispatch-table.component.jsx
+++ b/client/src/components/parts-dispatch-table/parts-dispatch-table.component.jsx
@@ -93,10 +93,7 @@ export function PartDispatchTableComponent({ bodyshop, job, billsQuery }) {
       title={t("parts_dispatch.labels.parts_dispatch")}
       extra={
         <Space wrap>
-          <Button onClick={() => refetch()}>
-            <SyncOutlined />
-          </Button>
-
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
           <Input.Search
             placeholder={t("general.labels.search")}
             value={searchText}
diff --git a/client/src/components/parts-order-delete-line/parts-order-delete-line.component.jsx b/client/src/components/parts-order-delete-line/parts-order-delete-line.component.jsx
index fe5070782..87661df73 100644
--- a/client/src/components/parts-order-delete-line/parts-order-delete-line.component.jsx
+++ b/client/src/components/parts-order-delete-line/parts-order-delete-line.component.jsx
@@ -34,9 +34,7 @@ export default function PartsOrderDeleteLine({ disabled, partsLineId, partsOrder
         });
       }}
     >
-      <Button disabled={disabled}>
-        <DeleteFilled />
-      </Button>
+      <Button disabled={disabled} icon={<DeleteFilled />} />
     </Popconfirm>
   );
 }
diff --git a/client/src/components/parts-order-list-table/parts-order-list-table-drawer.component.jsx b/client/src/components/parts-order-list-table/parts-order-list-table-drawer.component.jsx
index e86897710..ad61287b9 100644
--- a/client/src/components/parts-order-list-table/parts-order-list-table-drawer.component.jsx
+++ b/client/src/components/parts-order-list-table/parts-order-list-table-drawer.component.jsx
@@ -150,9 +150,8 @@ export function PartsOrderListTableDrawerComponent({
               }
             });
           }}
-        >
-          <FaTasks />
-        </Button>
+          icon={<FaTasks />}
+        />
       )}
       <Popconfirm
         title={t("parts_orders.labels.confirmdelete")}
@@ -173,9 +172,7 @@ export function PartsOrderListTableDrawerComponent({
           });
         }}
       >
-        <Button disabled={jobRO}>
-          <DeleteFilled />
-        </Button>
+        <Button disabled={jobRO} icon={<DeleteFilled />} />
       </Popconfirm>
       {!isPartsEntry && (
         <Button
diff --git a/client/src/components/payments-list-paginated/payment-list-paginated.component.jsx b/client/src/components/payments-list-paginated/payment-list-paginated.component.jsx
index f5f1642f0..58259dcfb 100644
--- a/client/src/components/payments-list-paginated/payment-list-paginated.component.jsx
+++ b/client/src/components/payments-list-paginated/payment-list-paginated.component.jsx
@@ -144,6 +144,7 @@ export function PaymentsListPaginated({
       render: (text, record) => (
         <Space>
           <Button
+            icon={<EditFilled />}
             // disabled={record.exportedat}
             onClick={async () => {
               let apolloResults;
@@ -174,9 +175,7 @@ export function PaymentsListPaginated({
                 context: { ...(apolloResults ? apolloResults : record), refetchRequiresContext: true }
               });
             }}
-          >
-            <EditFilled />
-          </Button>
+          />
           <PrintWrapperComponent
             templateObject={{
               name: Templates.payment_receipt.key,
@@ -245,9 +244,7 @@ export function PaymentsListPaginated({
               <Button onClick={() => setCaBcEtfTableContext()}>{t("payments.labels.ca_bc_etf_table")}</Button>
             </>
           )}
-          <Button onClick={() => refetch()}>
-            <SyncOutlined />
-          </Button>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
           <Input.Search
             placeholder={search.search || t("general.labels.search")}
             onSearch={(value) => {
diff --git a/client/src/components/print-wrapper/print-wrapper.component.jsx b/client/src/components/print-wrapper/print-wrapper.component.jsx
index e5cde9b10..5f20c61a2 100644
--- a/client/src/components/print-wrapper/print-wrapper.component.jsx
+++ b/client/src/components/print-wrapper/print-wrapper.component.jsx
@@ -1,5 +1,5 @@
 import { MailFilled, PrinterFilled } from "@ant-design/icons";
-import { Space, Spin } from "antd";
+import { Button, Space, Spin } from "antd";
 import { useState } from "react";
 import { GenerateDocument } from "../../utils/RenderTemplate";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
@@ -26,16 +26,18 @@ export default function PrintWrapperComponent({
     <Space>
       {children || null}
       {!emailOnly && (
-        <PrinterFilled
+        <Button
+          style={{ cursor: disabled ? "not-allowed" : null }}
+          icon={<PrinterFilled />}
           disabled={disabled}
           onClick={() => handlePrint("p")}
-          style={{ cursor: disabled ? "not-allowed" : null }}
         />
       )}
-      <MailFilled
+      <Button
+        style={{ cursor: disabled ? "not-allowed" : null }}
+        icon={<MailFilled />}
         disabled={disabled}
         onClick={() => handlePrint("e")}
-        style={{ cursor: disabled ? "not-allowed" : null }}
       />
       {loading && <Spin />}
     </Space>
diff --git a/client/src/components/production-board-kanban/production-board-kanban.component.jsx b/client/src/components/production-board-kanban/production-board-kanban.component.jsx
index 19a3b13bd..dfdb69fa1 100644
--- a/client/src/components/production-board-kanban/production-board-kanban.component.jsx
+++ b/client/src/components/production-board-kanban/production-board-kanban.component.jsx
@@ -191,9 +191,7 @@ function ProductionBoardKanbanComponent({ data, bodyshop, refetch, insertAuditTr
         style={{ paddingInline: 0, paddingBlock: 0 }}
         extra={
           <Space wrap>
-            <Button onClick={() => refetch && refetch()}>
-              <SyncOutlined />
-            </Button>
+            <Button onClick={() => refetch && refetch()} icon={<SyncOutlined />} />
             <ProductionBoardFilters filter={filter} setFilter={setFilter} loading={isMoving} />
             <ProductionBoardKanbanSettings
               parentLoading={setLoading}
diff --git a/client/src/components/production-list-table/production-list-table.component.jsx b/client/src/components/production-list-table/production-list-table.component.jsx
index 9910db5aa..584aac402 100644
--- a/client/src/components/production-list-table/production-list-table.component.jsx
+++ b/client/src/components/production-list-table/production-list-table.component.jsx
@@ -251,9 +251,8 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
               onClick={() => {
                 refetch && refetch();
               }}
-            >
-              <SyncOutlined />
-            </Button>
+              icon={<SyncOutlined />}
+            />
             <ProductionListColumnsAdd
               columnState={[columns, setColumns]}
               tableState={state}
diff --git a/client/src/components/production-sublets-manage/production-sublets-manage.component.jsx b/client/src/components/production-sublets-manage/production-sublets-manage.component.jsx
index 6de389017..ea35321e1 100644
--- a/client/src/components/production-sublets-manage/production-sublets-manage.component.jsx
+++ b/client/src/components/production-sublets-manage/production-sublets-manage.component.jsx
@@ -69,9 +69,8 @@ export default function ProductionSubletsManageComponent({ subletJobLines }) {
                     handleSubletMark(s, "complete");
                   }}
                   type={s.sublet_completed ? "primary" : "ghost"}
-                >
-                  <CheckCircleFilled style={{ color: s.sublet_completed ? "green" : undefined }} />
-                </Button>,
+                  icon={<CheckCircleFilled style={{ color: s.sublet_completed ? "green" : undefined }} />}
+                />,
                 <Button
                   key="sublet"
                   loading={loading}
@@ -80,9 +79,8 @@ export default function ProductionSubletsManageComponent({ subletJobLines }) {
                     handleSubletMark(s, "ignore");
                   }}
                   type={s.sublet_ignored ? "primary" : "ghost"}
-                >
-                  <EyeInvisibleFilled style={{ color: s.sublet_ignored ? "tomato" : undefined }} />
-                </Button>
+                  icon={<EyeInvisibleFilled style={{ color: s.sublet_ignored ? "tomato" : undefined }} />}
+                />
               ]}
             >
               <List.Item.Meta title={s.line_desc} />
diff --git a/client/src/components/schedule-production-list/schedule-production-list.component.jsx b/client/src/components/schedule-production-list/schedule-production-list.component.jsx
index a0873754a..01f362e7b 100644
--- a/client/src/components/schedule-production-list/schedule-production-list.component.jsx
+++ b/client/src/components/schedule-production-list/schedule-production-list.component.jsx
@@ -61,9 +61,8 @@ export default function ScheduleProductionList() {
 
   return (
     <Popover content={content} trigger="click" placement="bottomRight">
-      <Button onClick={() => callQuery({ variables: {} })}>
+      <Button onClick={() => callQuery({ variables: {} })} icon={<DownOutlined />} iconPlacement="end">
         {t("appointments.labels.inproduction")}
-        <DownOutlined />
       </Button>
     </Popover>
   );
diff --git a/client/src/components/scoreboard-jobs-list/scoreboard-jobs-list.component.jsx b/client/src/components/scoreboard-jobs-list/scoreboard-jobs-list.component.jsx
index d946bac22..3f06584d2 100644
--- a/client/src/components/scoreboard-jobs-list/scoreboard-jobs-list.component.jsx
+++ b/client/src/components/scoreboard-jobs-list/scoreboard-jobs-list.component.jsx
@@ -123,9 +123,8 @@ export default function ScoreboardJobsList() {
         <Card
           extra={
             <Space align="middle" wrap>
-              <Button onClick={() => refetch()}>
-                <SyncOutlined />
-              </Button>
+              <Button onClick={() => refetch()} icon={<SyncOutlined />} />
+
               <Typography.Title level={4}>
                 {t("general.labels.searchresults", { search: state.search })}
               </Typography.Title>
diff --git a/client/src/components/scoreboard-remove-button/scorebard-remove-button.component.jsx b/client/src/components/scoreboard-remove-button/scorebard-remove-button.component.jsx
index a4e9fc046..220554947 100644
--- a/client/src/components/scoreboard-remove-button/scorebard-remove-button.component.jsx
+++ b/client/src/components/scoreboard-remove-button/scorebard-remove-button.component.jsx
@@ -37,9 +37,5 @@ export default function ScoreboardRemoveButton({ scoreboardId }) {
     }
     setLoading(false);
   };
-  return (
-    <Button onClick={handleDelete} loading={loading}>
-      <DeleteFilled />
-    </Button>
-  );
+  return <Button onClick={handleDelete} loading={loading} icon={<DeleteFilled />} />;
 }
diff --git a/client/src/components/shop-employees/shop-employees-form.component.jsx b/client/src/components/shop-employees/shop-employees-form.component.jsx
index c67a83813..804081071 100644
--- a/client/src/components/shop-employees/shop-employees-form.component.jsx
+++ b/client/src/components/shop-employees/shop-employees-form.component.jsx
@@ -159,9 +159,8 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
               }
             });
           }}
-        >
-          <DeleteFilled />
-        </Button>
+          icon={<DeleteFilled />}
+        />
       )
     }
   ];
diff --git a/client/src/components/simplified-parts-jobs-list/simplified-parts-jobs-list.component.jsx b/client/src/components/simplified-parts-jobs-list/simplified-parts-jobs-list.component.jsx
index 6c92ed2ef..f37edddf8 100644
--- a/client/src/components/simplified-parts-jobs-list/simplified-parts-jobs-list.component.jsx
+++ b/client/src/components/simplified-parts-jobs-list/simplified-parts-jobs-list.component.jsx
@@ -228,9 +228,8 @@ export function SimplifiedPartsJobsListComponent({
               </Button>
             </>
           )}
-          <Button onClick={() => refetch()}>
-            <SyncOutlined />
-          </Button>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
+
           <Input.Search
             placeholder={search.search || t("general.labels.search")}
             onSearch={(value) => {
diff --git a/client/src/components/task-list/task-list.component.jsx b/client/src/components/task-list/task-list.component.jsx
index 1bb350ca4..7aa0447e7 100644
--- a/client/src/components/task-list/task-list.component.jsx
+++ b/client/src/components/task-list/task-list.component.jsx
@@ -334,11 +334,9 @@ function TaskListComponent({
           checked={deleted === "true"}
           onChange={(value) => handleSwitchChange("deleted", value)}
         />
-        <Button title={t("tasks.buttons.refresh")} onClick={() => refetch()}>
-          <SyncOutlined />
-        </Button>
-        <Button title={t("tasks.buttons.create")} onClick={handleCreateTask}>
-          <PlusCircleFilled />
+        <Button title={t("tasks.buttons.refresh")} onClick={() => refetch()} icon={<SyncOutlined />} />
+
+        <Button title={t("tasks.buttons.create")} onClick={handleCreateTask} icon={<PlusCircleFilled />}>
           {t("tasks.buttons.create")}
         </Button>
       </Space>
diff --git a/client/src/components/tech-lookup-jobs-drawer/tech-lookup-jobs-drawer.component.jsx b/client/src/components/tech-lookup-jobs-drawer/tech-lookup-jobs-drawer.component.jsx
index 529a5ffcb..de15aa46c 100644
--- a/client/src/components/tech-lookup-jobs-drawer/tech-lookup-jobs-drawer.component.jsx
+++ b/client/src/components/tech-lookup-jobs-drawer/tech-lookup-jobs-drawer.component.jsx
@@ -76,6 +76,7 @@ export function TechLookupJobsDrawer({ bodyshop, setPrintCenterContext }) {
           title={data.jobs_by_pk.ro_number || t("general.labels.na")}
           extra={
             <Button
+              icon={<PrinterFilled />}
               onClick={() => {
                 setPrintCenterContext({
                   actions: { refetch: refetch },
@@ -87,7 +88,6 @@ export function TechLookupJobsDrawer({ bodyshop, setPrintCenterContext }) {
                 });
               }}
             >
-              <PrinterFilled />
               {t("jobs.actions.printCenter")}
             </Button>
           }
diff --git a/client/src/components/tech-lookup-jobs-list/tech-lookup-jobs-list.component.jsx b/client/src/components/tech-lookup-jobs-list/tech-lookup-jobs-list.component.jsx
index b4c4785b5..ab5f73bed 100644
--- a/client/src/components/tech-lookup-jobs-list/tech-lookup-jobs-list.component.jsx
+++ b/client/src/components/tech-lookup-jobs-list/tech-lookup-jobs-list.component.jsx
@@ -158,9 +158,7 @@ export function TechLookupJobsList({ bodyshop }) {
     <Card
       extra={
         <Space wrap>
-          <Button onClick={() => refetch()}>
-            <SyncOutlined />
-          </Button>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
           <Input.Search
             placeholder={t("general.labels.search")}
             onChange={(e) => {
diff --git a/client/src/components/time-ticket-calculator/time-ticket-calculator.component.jsx b/client/src/components/time-ticket-calculator/time-ticket-calculator.component.jsx
index 71546f91b..da73d07a0 100644
--- a/client/src/components/time-ticket-calculator/time-ticket-calculator.component.jsx
+++ b/client/src/components/time-ticket-calculator/time-ticket-calculator.component.jsx
@@ -95,7 +95,18 @@ export default function TimeTicketCalculatorComponent({
         <Form.Item name="percent">
           <Space.Compact>
             <InputNumber min={0} max={100} precision={1} />
-            <span style={{ padding: "0 11px", backgroundColor: "#fafafa", border: "1px solid #d9d9d9", borderLeft: 0, display: "flex", alignItems: "center" }}>%</span>
+            <span
+              style={{
+                padding: "0 11px",
+                backgroundColor: "#fafafa",
+                border: "1px solid #d9d9d9",
+                borderLeft: 0,
+                display: "flex",
+                alignItems: "center"
+              }}
+            >
+              %
+            </span>
           </Space.Compact>
         </Form.Item>
         <Button htmlType="submit">Calculate</Button>
@@ -112,11 +123,8 @@ export default function TimeTicketCalculatorComponent({
       placement="right"
       destroyOnHidden
     >
-      <Button onClick={(e) => e.preventDefault()}>
-        <Space>
-          Draw Calculator
-          <DownOutlined />
-        </Space>
+      <Button onClick={(e) => e.preventDefault()} icon={<DownOutlined />} iconPlacement="end">
+        Draw Calculator
       </Button>
     </Popover>
   );
diff --git a/client/src/components/time-ticket-list/time-ticket-list.component.jsx b/client/src/components/time-ticket-list/time-ticket-list.component.jsx
index d166eeb68..43c222eee 100644
--- a/client/src/components/time-ticket-list/time-ticket-list.component.jsx
+++ b/client/src/components/time-ticket-list/time-ticket-list.component.jsx
@@ -322,9 +322,8 @@ export function TimeTicketList({
             onClick={async () => {
               refetch();
             }}
-          >
-            <SyncOutlined />
-          </Button>
+            icon={<SyncOutlined />}
+          />
         </Space>
       }
     >
diff --git a/client/src/components/tt-approvals-list/tt-approvals-list.component.jsx b/client/src/components/tt-approvals-list/tt-approvals-list.component.jsx
index 1a3c844e6..13f900bb8 100644
--- a/client/src/components/tt-approvals-list/tt-approvals-list.component.jsx
+++ b/client/src/components/tt-approvals-list/tt-approvals-list.component.jsx
@@ -176,9 +176,7 @@ export function TtApprovalsListComponent({
             completedCallback={setSelectedTickets}
             refetch={refetch}
           />
-          <Button onClick={() => refetch()}>
-            <SyncOutlined />
-          </Button>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
         </Space>
       }
     >
diff --git a/client/src/components/vehicles-list/vehicles-list.component.jsx b/client/src/components/vehicles-list/vehicles-list.component.jsx
index 484a70ab5..d901cfb13 100644
--- a/client/src/components/vehicles-list/vehicles-list.component.jsx
+++ b/client/src/components/vehicles-list/vehicles-list.component.jsx
@@ -91,9 +91,7 @@ export default function VehiclesListComponent({ loading, vehicles, total, refetc
               </Button>
             </>
           )}
-          <Button onClick={() => refetch()}>
-            <SyncOutlined />
-          </Button>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
           <Input.Search
             placeholder={search.search || t("general.labels.search")}
             onSearch={(value) => {
diff --git a/client/src/components/vendors-list/vendors-list.component.jsx b/client/src/components/vendors-list/vendors-list.component.jsx
index 97b00be93..64eba3d6a 100644
--- a/client/src/components/vendors-list/vendors-list.component.jsx
+++ b/client/src/components/vendors-list/vendors-list.component.jsx
@@ -73,9 +73,7 @@ export default function VendorsListComponent({ handleNewVendor, loading, handleO
       extra={
         <Space wrap>
           <Button onClick={handleNewVendor}>{t("vendors.actions.new")}</Button>
-          <Button onClick={() => refetch()}>
-            <SyncOutlined />
-          </Button>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
           <Input.Search
             placeholder={t("general.labels.search")}
             onChange={(e) => {
diff --git a/client/src/pages/bills/bills.page.component.jsx b/client/src/pages/bills/bills.page.component.jsx
index d10c891b7..383f1df1c 100644
--- a/client/src/pages/bills/bills.page.component.jsx
+++ b/client/src/pages/bills/bills.page.component.jsx
@@ -105,9 +105,7 @@ export function BillsListPage({ loading, data, refetch, total, setBillEnterConte
       render: (text, record) => (
         <Space wrap>
           <Link to={`/manage/bills?billid=${record.id}`}>
-            <Button>
-              <EditFilled />
-            </Button>
+            <Button icon={<EditFilled />} />
           </Link>
           {
             //  <Button
@@ -204,9 +202,7 @@ export function BillsListPage({ loading, data, refetch, total, setBillEnterConte
               </Button>
             </Space>
           )}
-          <Button onClick={() => refetch()}>
-            <SyncOutlined />
-          </Button>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
           <Button
             onClick={() => {
               setBillEnterContext({
diff --git a/client/src/pages/export-logs/export-logs.page.component.jsx b/client/src/pages/export-logs/export-logs.page.component.jsx
index 7dc283d36..8f163f859 100644
--- a/client/src/pages/export-logs/export-logs.page.component.jsx
+++ b/client/src/pages/export-logs/export-logs.page.component.jsx
@@ -174,9 +174,7 @@ export function ExportLogsPageComponent() {
               </Button>
             </>
           )}
-          <Button onClick={() => refetch()}>
-            <SyncOutlined />
-          </Button>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
           <Input.Search
             placeholder={searchParams.search || t("general.labels.search")}
             onSearch={(value) => {
diff --git a/client/src/pages/jobs-detail/jobs-detail.page.component.jsx b/client/src/pages/jobs-detail/jobs-detail.page.component.jsx
index 0d84b7401..d8ec210ec 100644
--- a/client/src/pages/jobs-detail/jobs-detail.page.component.jsx
+++ b/client/src/pages/jobs-detail/jobs-detail.page.component.jsx
@@ -271,17 +271,18 @@ export function JobsDetailPage({
   const menuExtra = (
     <Space wrap>
       <Button
+        icon={<SyncOutlined />}
         onClick={() => {
           refetch();
         }}
         key="refresh"
       >
-        <SyncOutlined />
         {t("general.labels.refresh")}
       </Button>
       <JobsChangeStatus job={job} />
       <JobSyncButton job={job} />
       <Button
+        icon={<PrinterFilled />}
         onClick={() => {
           setPrintCenterContext({
             actions: { refetch: refetch },
@@ -294,7 +295,6 @@ export function JobsDetailPage({
         }}
         key="printing"
       >
-        <PrinterFilled />
         {t("jobs.actions.printCenter")}
       </Button>
       <JobsConvertButton job={job} refetch={refetch} parentFormIsFieldsTouched={form.isFieldsTouched} />
diff --git a/client/src/pages/phonebook/phonebook.page.component.jsx b/client/src/pages/phonebook/phonebook.page.component.jsx
index 035324c80..98268f8b3 100644
--- a/client/src/pages/phonebook/phonebook.page.component.jsx
+++ b/client/src/pages/phonebook/phonebook.page.component.jsx
@@ -159,9 +159,7 @@ export function PhonebookPageComponent({ bodyshop, authLevel }) {
           <Button disabled={hasNoAccess} onClick={handleNewPhonebook}>
             {t("phonebook.actions.new")}
           </Button>
-          <Button onClick={() => refetch()}>
-            <SyncOutlined />
-          </Button>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
           <Input.Search
             placeholder={searchParams.search || t("general.labels.search")}
             onSearch={(value) => {
diff --git a/client/src/pages/simplified-parts-jobs-detail/simplified-parts-jobs-detail.component.jsx b/client/src/pages/simplified-parts-jobs-detail/simplified-parts-jobs-detail.component.jsx
index 71ae84947..0b0138450 100644
--- a/client/src/pages/simplified-parts-jobs-detail/simplified-parts-jobs-detail.component.jsx
+++ b/client/src/pages/simplified-parts-jobs-detail/simplified-parts-jobs-detail.component.jsx
@@ -94,18 +94,19 @@ export function SimplifiedPartsJobDetailComponent({ setPrintCenterContext, jobRO
   const menuExtra = (
     <Space wrap>
       <Button
+        icon={<SyncOutlined />}
         onClick={() => {
           refetch();
         }}
         key="refresh"
       >
-        <SyncOutlined />
         {t("general.labels.refresh")}
       </Button>
 
       <JobsChangeStatus job={job} />
 
       <Button
+        icon={<PrinterFilled />}
         onClick={() => {
           setPrintCenterContext({
             actions: { refetch: refetch },
@@ -118,7 +119,6 @@ export function SimplifiedPartsJobDetailComponent({ setPrintCenterContext, jobRO
         }}
         key="printing"
       >
-        <PrinterFilled />
         {t("jobs.actions.printCenter")}
       </Button>
 
diff --git a/client/src/pages/tech-assigned-prod-jobs/tech-assigned-prod-jobs.component.jsx b/client/src/pages/tech-assigned-prod-jobs/tech-assigned-prod-jobs.component.jsx
index 2aa8db204..6fad4f6bc 100644
--- a/client/src/pages/tech-assigned-prod-jobs/tech-assigned-prod-jobs.component.jsx
+++ b/client/src/pages/tech-assigned-prod-jobs/tech-assigned-prod-jobs.component.jsx
@@ -176,9 +176,7 @@ export function TechAssignedProdJobs({ setTimeTicketTaskContext, technician, bod
     <Card
       extra={
         <Space wrap>
-          <Button onClick={() => refetch()}>
-            <SyncOutlined />
-          </Button>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
           <Input.Search
             placeholder={t("general.labels.search")}
             onChange={(e) => {
diff --git a/client/src/pages/tech-dispatched-parts/tech-dispatched-parts.page.jsx b/client/src/pages/tech-dispatched-parts/tech-dispatched-parts.page.jsx
index 9dd795a35..2578ba665 100644
--- a/client/src/pages/tech-dispatched-parts/tech-dispatched-parts.page.jsx
+++ b/client/src/pages/tech-dispatched-parts/tech-dispatched-parts.page.jsx
@@ -104,9 +104,7 @@ export function TechDispatchedParts({ technician, bodyshop }) {
     <Card
       extra={
         <Space wrap>
-          <Button onClick={() => refetch()}>
-            <SyncOutlined />
-          </Button>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
         </Space>
       }
     >