diff --git a/apps/edr-freight-web/backoffice/src/pages/operations/FirstMilePage.tsx b/apps/edr-freight-web/backoffice/src/pages/operations/FirstMilePage.tsx
index 182ff7cac..68dcf62f7 100644
--- a/apps/edr-freight-web/backoffice/src/pages/operations/FirstMilePage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/operations/FirstMilePage.tsx
@@ -64,6 +64,19 @@ const STATUS_META: Record<FirstMileApiStatus, { label: string; color: string }>
   RECEIVED_TO_PORT: { label: "Received to Port", color: "green" },
 };
 
+// Invoice payment state → badge color, keyed by upper-cased status.
+const INVOICE_STATUS_META: Record<string, { label: string; color: string }> = {
+  PAID: { label: "Paid", color: "green" },
+  PARTIALLY_PAID: { label: "Partially Paid", color: "teal" },
+  PENDING: { label: "Pending", color: "yellow" },
+  UNPAID: { label: "Unpaid", color: "yellow" },
+  OPEN: { label: "Open", color: "yellow" },
+  ISSUED: { label: "Issued", color: "blue" },
+  OVERDUE: { label: "Overdue", color: "red" },
+  CANCELLED: { label: "Cancelled", color: "gray" },
+  VOID: { label: "Void", color: "gray" },
+};
+
 const NEXT_STATUS: Partial<Record<FirstMileApiStatus, FirstMileApiStatus>> = {
   PAYMENT_PENDING: "READY_TO_TRANSIT",
   READY_TO_TRANSIT: "IN_TRANSIT",
@@ -757,7 +770,8 @@ const FirstMilePage = () => {
           if (!invoice) {
             return <Text c="dimmed">—</Text>;
           }
-          const isPaid = (row.original as any).paid || invoice.status === "Paid";
+          const status = String((row.original as any).paid ? "PAID" : invoice.status || "").toUpperCase();
+          const badge = INVOICE_STATUS_META[status] ?? { color: "gray", label: status || "—" };
           return (
             <Group gap="xs" wrap="nowrap">
               <UnstyledButton
@@ -772,7 +786,7 @@ const FirstMilePage = () => {
               >
                 {invoice.number}
               </UnstyledButton>
-              {isPaid && <Badge color="green" variant="light" size="sm">Paid</Badge>}
+              {status && <Badge color={badge.color} variant="filled" size="sm">{badge.label}</Badge>}
             </Group>
           );
         },
diff --git a/apps/edr-freight-web/backoffice/src/pages/operations/LastMilePage.tsx b/apps/edr-freight-web/backoffice/src/pages/operations/LastMilePage.tsx
index 0267bd1ce..ace94f85d 100644
--- a/apps/edr-freight-web/backoffice/src/pages/operations/LastMilePage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/operations/LastMilePage.tsx
@@ -71,6 +71,19 @@ const STATUS_META: Record<LastMileApiStatus, { label: string; color: string }> =
   DELIVERED: { label: "Delivered", color: "green" },
 };
 
+// Invoice payment state → badge color, keyed by upper-cased status.
+const INVOICE_STATUS_META: Record<string, { label: string; color: string }> = {
+  PAID: { label: "Paid", color: "green" },
+  PARTIALLY_PAID: { label: "Partially Paid", color: "teal" },
+  PENDING: { label: "Pending", color: "yellow" },
+  UNPAID: { label: "Unpaid", color: "yellow" },
+  OPEN: { label: "Open", color: "yellow" },
+  ISSUED: { label: "Issued", color: "blue" },
+  OVERDUE: { label: "Overdue", color: "red" },
+  CANCELLED: { label: "Cancelled", color: "gray" },
+  VOID: { label: "Void", color: "gray" },
+};
+
 const NEXT_STATUS: Partial<Record<LastMileApiStatus, LastMileApiStatus>> = {
   PAYMENT_PENDING: "READY_TO_TRANSIT",
   READY_TO_TRANSIT: "IN_TRANSIT",
@@ -1128,7 +1141,8 @@ const LastMilePage = () => {
           if (!invoice) {
             return <Text c="dimmed">—</Text>;
           }
-          const isPaid = (row.original as any).paid || invoice.status === "Paid";
+          const status = String((row.original as any).paid ? "PAID" : invoice.status || "").toUpperCase();
+          const badge = INVOICE_STATUS_META[status] ?? { color: "gray", label: status || "—" };
           return (
             <Group gap="xs" wrap="nowrap">
               <UnstyledButton
@@ -1143,7 +1157,7 @@ const LastMilePage = () => {
               >
                 {invoice.number}
               </UnstyledButton>
-              {isPaid && <Badge color="green" variant="light" size="sm">Paid</Badge>}
+              {status && <Badge color={badge.color} variant="filled" size="sm">{badge.label}</Badge>}
             </Group>
           );
         },