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 68dcf62f7..2da6e5bb8 100644
--- a/apps/edr-freight-web/backoffice/src/pages/operations/FirstMilePage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/operations/FirstMilePage.tsx
@@ -33,6 +33,7 @@ import {
   Stack,
   Text,
   TextInput,
+  Tooltip,
   UnstyledButton,
 } from "@mantine/core";
 
@@ -64,6 +65,11 @@ const STATUS_META: Record<FirstMileApiStatus, { label: string; color: string }>
   RECEIVED_TO_PORT: { label: "Received to Port", color: "green" },
 };
 
+// Middle-truncate a long invoice number for the table (full value on hover).
+// "INV-20260704-00002" → "INV-2…02"
+const shortInvoiceNo = (n: string) =>
+  n && n.length > 9 ? `${n.slice(0, 5)}…${n.slice(-2)}` : n;
+
 // 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" },
@@ -784,7 +790,9 @@ const FirstMilePage = () => {
                 fw={500}
                 style={{ textDecoration: "underline", cursor: "pointer" }}
               >
-                {invoice.number}
+                <Tooltip label={invoice.number} withArrow>
+                  <span>{shortInvoiceNo(invoice.number)}</span>
+                </Tooltip>
               </UnstyledButton>
               {status && <Badge color={badge.color} variant="filled" size="sm">{badge.label}</Badge>}
             </Group>
@@ -812,7 +820,12 @@ const FirstMilePage = () => {
           const canReceiveToWarehouse = row.original.status === "RECEIVED_TO_PORT";
           return (
             <Group gap={4} justify="flex-end" wrap="nowrap">
-              <Menu position="bottom-end" width={200} withinPortal>
+              <Menu
+                position="bottom-end"
+                width={200}
+                withinPortal
+                styles={{ dropdown: { maxHeight: 320, overflowY: "auto" } }}
+              >
                 <Menu.Target>
                   <ActionIcon variant="subtle" color="gray" aria-label="Pickup actions">
                     <MoreHorizontal size={16} />
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 ace94f85d..31b4a6cff 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,11 @@ const STATUS_META: Record<LastMileApiStatus, { label: string; color: string }> =
   DELIVERED: { label: "Delivered", color: "green" },
 };
 
+// Middle-truncate a long invoice number for the table (full value on hover).
+// "INV-20260704-00002" → "INV-2…02"
+const shortInvoiceNo = (n: string) =>
+  n && n.length > 9 ? `${n.slice(0, 5)}…${n.slice(-2)}` : n;
+
 // 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" },
@@ -1155,7 +1160,9 @@ const LastMilePage = () => {
                 fw={500}
                 style={{ textDecoration: "underline", cursor: "pointer" }}
               >
-                {invoice.number}
+                <Tooltip label={invoice.number} withArrow>
+                  <span>{shortInvoiceNo(invoice.number)}</span>
+                </Tooltip>
               </UnstyledButton>
               {status && <Badge color={badge.color} variant="filled" size="sm">{badge.label}</Badge>}
             </Group>