diff --git a/client/src/components/bill-form/bill-form.component.jsx b/client/src/components/bill-form/bill-form.component.jsx
index e754aa129..73c5d4f3b 100644
--- a/client/src/components/bill-form/bill-form.component.jsx
+++ b/client/src/components/bill-form/bill-form.component.jsx
@@ -413,8 +413,10 @@ export function BillFormComponent({
                     />
                     <Statistic
                       title={t("bills.labels.discrepancy")}
-                      valueStyle={{
-                        color: totals.discrepancy.getAmount() === 0 ? "green" : "red"
+                      styles={{
+                        value: {
+                          color: totals.discrepancy.getAmount() === 0 ? "green" : "red"
+                        }
                       }}
                       value={totals.discrepancy.toFormat()}
                       precision={2}
diff --git a/client/src/components/dashboard-components/total-production-hours/total-production-hours.component.jsx b/client/src/components/dashboard-components/total-production-hours/total-production-hours.component.jsx
index 228e04c23..5c29a1962 100644
--- a/client/src/components/dashboard-components/total-production-hours/total-production-hours.component.jsx
+++ b/client/src/components/dashboard-components/total-production-hours/total-production-hours.component.jsx
@@ -36,7 +36,7 @@ export function DashboardTotalProductionHours({ bodyshop, data, ...cardProps })
         <Statistic
           title={t("dashboard.labels.prodhrs")}
           value={hours.total.toFixed(1)}
-          valueStyle={{ color: aboveTargetHours ? "green" : "red" }}
+          styles={{ value: { color: aboveTargetHours ? "green" : "red" } }}
         />
       </Space>
     </Card>
diff --git a/client/src/components/data-label/data-label.component.jsx b/client/src/components/data-label/data-label.component.jsx
index bcb6fb638..c574600a6 100644
--- a/client/src/components/data-label/data-label.component.jsx
+++ b/client/src/components/data-label/data-label.component.jsx
@@ -5,7 +5,7 @@ export default function DataLabel({
   hideIfNull,
   children,
   open = true,
-  valueStyle = {},
+  styles,
   valueClassName,
   onValueClick,
   ...props
@@ -33,7 +33,11 @@ export default function DataLabel({
         className={valueClassName}
         onClick={onValueClick}
       >
-        {typeof children === "string" ? <Typography.Text style={valueStyle}>{children}</Typography.Text> : children}
+        {typeof children === "string" ? (
+          <Typography.Text style={styles?.value}>{children}</Typography.Text>
+        ) : (
+          children
+        )}
       </div>
     </div>
   );
diff --git a/client/src/components/dms-post-form/cdklike-dms-post-form.jsx b/client/src/components/dms-post-form/cdklike-dms-post-form.jsx
index 0132eaf9a..d2d130892 100644
--- a/client/src/components/dms-post-form/cdklike-dms-post-form.jsx
+++ b/client/src/components/dms-post-form/cdklike-dms-post-form.jsx
@@ -404,7 +404,7 @@ export default function CdkLikePostForm({ bodyshop, socket, job, logsRef, mode,
                 <Typography.Title>=</Typography.Title>
                 <Statistic
                   title={t("jobs.labels.dms.notallocated")}
-                  valueStyle={{ color: discrep.getAmount() === 0 ? "green" : "red" }}
+                  styles={{ value: { color: discrep.getAmount() === 0 ? "green" : "red" } }}
                   value={discrep.toFormat()}
                 />
                 <Button disabled={disablePost} htmlType="submit">
diff --git a/client/src/components/job-at-change/schedule-event.component.jsx b/client/src/components/job-at-change/schedule-event.component.jsx
index 91fec5ce6..1023e5f71 100644
--- a/client/src/components/job-at-change/schedule-event.component.jsx
+++ b/client/src/components/job-at-change/schedule-event.component.jsx
@@ -232,7 +232,10 @@ export function ScheduleEventComponent({
             {(event.job && event.job.alt_transport) || ""}
             <ScheduleAtChange job={event && event.job} />
           </DataLabel>
-          <DataLabel label={t("jobs.fields.comment")} valueStyle={{ overflow: "hidden", textOverflow: "ellipsis" }}>
+          <DataLabel
+            label={t("jobs.fields.comment")}
+            styles={{ value: { overflow: "hidden", textOverflow: "ellipsis" } }}
+          >
             <ProductionListColumnComment record={event && event.job} />
           </DataLabel>
           <ScheduleEventNote event={event} />
diff --git a/client/src/components/job-close-ro-guard/job-close-ro-guard.ar.jsx b/client/src/components/job-close-ro-guard/job-close-ro-guard.ar.jsx
index be6034d11..13f0b1481 100644
--- a/client/src/components/job-close-ro-guard/job-close-ro-guard.ar.jsx
+++ b/client/src/components/job-close-ro-guard/job-close-ro-guard.ar.jsx
@@ -43,7 +43,7 @@ export function JobCloseRoGuardProfit({ job, warningCallback }) {
     <Card title={t("jobs.labels.accountsreceivable")} style={{ height: "100%" }}>
       <DataLabel label={t("payments.labels.totalpayments")}>{total.toFormat()}</DataLabel>
       <DataLabel
-        valueStyle={{ color: balance.getAmount() !== 0 ? "red" : "green" }}
+        styles={{ value: { color: balance.getAmount() !== 0 ? "red" : "green" } }}
         label={t("payments.labels.balance")}
       >
         {balance.toFormat()}
diff --git a/client/src/components/job-payments/job-payments.component.jsx b/client/src/components/job-payments/job-payments.component.jsx
index 9536761bd..6afcb9ea7 100644
--- a/client/src/components/job-payments/job-payments.component.jsx
+++ b/client/src/components/job-payments/job-payments.component.jsx
@@ -179,7 +179,7 @@ export function JobPayments({ job, bodyshop, setPaymentContext, setCardPaymentCo
           </Button>
 
           <DataLabel
-            valueStyle={{ color: balance.getAmount() !== 0 ? "red" : "green" }}
+            styles={{ value: { color: balance.getAmount() !== 0 ? "red" : "green" } }}
             label={t("payments.labels.balance")}
           >
             {balance.toFormat()}
diff --git a/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx b/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx
index e728b4377..d5802f2d7 100644
--- a/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx
+++ b/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx
@@ -139,7 +139,7 @@ export function JobsDetailHeader({ job, bodyshop, disabled, insertAuditTrail, is
                   ) : null}
                 </Space>
               </DataLabel>
-              <DataLabel label={t("jobs.fields.comment")} valueStyle={{ overflow: "hidden", textOverflow: "ellipsis" }}>
+              <DataLabel label={t("jobs.fields.comment")} styles={{ value: { overflow: "hidden", textOverflow: "ellipsis" } }}>
                 <ProductionListColumnComment record={job} />
               </DataLabel>
               {!isPartsEntry && <DataLabel label={t("jobs.fields.ins_co_nm_short")}>{job.ins_co_nm}</DataLabel>}
@@ -281,7 +281,7 @@ export function JobsDetailHeader({ job, bodyshop, disabled, insertAuditTrail, is
                   {job.owner?.tax_number || ""}
                 </DataLabel>
               )}
-              <DataLabel label={t("owners.fields.note")} valueStyle={{ overflow: "hidden", textOverflow: "ellipsis" }}>
+              <DataLabel label={t("owners.fields.note")} styles={{ value: { overflow: "hidden", textOverflow: "ellipsis" } }}>
                 {job.owner?.note || ""}
               </DataLabel>
             </div>
@@ -323,7 +323,7 @@ export function JobsDetailHeader({ job, bodyshop, disabled, insertAuditTrail, is
               {job.vehicle?.notes && (
                 <DataLabel
                   label={t("vehicles.fields.notes")}
-                  valueStyle={{ whiteSpace: "pre-wrap" }}
+                  styles={{ value: { whiteSpace: "pre-wrap" } }}
                   valueClassName={notesClamped ? "clamp" : ""}
                   onValueClick={() => setNotesClamped(!notesClamped)}
                 >
diff --git a/client/src/components/payment-form/payment-form.totalpayments.component.jsx b/client/src/components/payment-form/payment-form.totalpayments.component.jsx
index 2ec381f93..156c454b5 100644
--- a/client/src/components/payment-form/payment-form.totalpayments.component.jsx
+++ b/client/src/components/payment-form/payment-form.totalpayments.component.jsx
@@ -33,7 +33,7 @@ export default function PaymentFormTotalPayments({ jobid }) {
       {balance && (
         <Statistic
           title={t("payments.labels.balance")}
-          valueStyle={{ color: balance.getAmount() !== 0 ? "red" : "green" }}
+          styles={{ value: { color: balance.getAmount() !== 0 ? "red" : "green" } }}
           value={(balance && balance.toFormat()) || ""}
         />
       )}
diff --git a/client/src/pages/jobs-close/jobs-close.component.jsx b/client/src/pages/jobs-close/jobs-close.component.jsx
index 225fdcc68..60ddce5bf 100644
--- a/client/src/pages/jobs-close/jobs-close.component.jsx
+++ b/client/src/pages/jobs-close/jobs-close.component.jsx
@@ -496,8 +496,10 @@ export function JobsCloseComponent({ job, bodyshop, jobRO, insertAuditTrail, set
                         <Typography.Title>=</Typography.Title>
                         <Statistic
                           title={t("jobs.labels.pimraryamountpayable")}
-                          valueStyle={{
-                            color: discrep.getAmount() >= 0 ? "green" : "red"
+                          styles={{
+                            value: {
+                              color: discrep.getAmount() >= 0 ? "green" : "red"
+                            }
                           }}
                           value={discrep.toFormat()}
                         />