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 358bf35c1..69b43c51d 100644
--- a/apps/edr-freight-web/backoffice/src/pages/operations/FirstMilePage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/operations/FirstMilePage.tsx
@@ -332,6 +332,8 @@ const FirstMilePage = () => {
 
   const [distanceOpen, setDistanceOpen] = useState(false);
   const [distanceValue, setDistanceValue] = useState("");
+  const [invoiceOpen, setInvoiceOpen] = useState(false);
+  const [invoiceRecord, setInvoiceRecord] = useState<FirstMileRecord | null>(null);
 
   const { data: listData, isLoading } = useQuery({
     queryKey: QUERY_KEYS.FIRST_MILE.list(),
@@ -495,6 +497,16 @@ const FirstMilePage = () => {
     setDistanceValue("");
   };
 
+  const openInvoice = (record: FirstMileRecord) => {
+    setInvoiceRecord(record);
+    setInvoiceOpen(true);
+  };
+
+  const closeInvoice = () => {
+    setInvoiceOpen(false);
+    setInvoiceRecord(null);
+  };
+
   const handleSaveDistance = () => {
     const distance = parseFloat(distanceValue);
     if (!activeId || isNaN(distance) || distance < 0) {
@@ -727,7 +739,22 @@ const FirstMilePage = () => {
         id: "invoice",
         header: "Invoice",
         meta: { headerClassName, cellClassName },
-        cell: () => "#345",
+        cell: ({ row }) => {
+          const hasDistance = row.original.exactKm != null && row.original.exactKm > 0;
+          if (!hasDistance) {
+            return <Text c="dimmed">—</Text>;
+          }
+          return (
+            <UnstyledButton
+              onClick={() => openInvoice(row.original)}
+              c="blue"
+              fw={500}
+              style={{ textDecoration: "underline", cursor: "pointer" }}
+            >
+              #345
+            </UnstyledButton>
+          );
+        },
       },
       {
         id: "status",
@@ -1151,6 +1178,52 @@ const FirstMilePage = () => {
           </Group>
         </Stack>
       </Modal>
+
+      {/* Invoice modal */}
+      <Modal
+        opened={invoiceOpen}
+        onClose={closeInvoice}
+        title={<Text fw={600}>Invoice #345</Text>}
+        size="lg"
+        radius="lg"
+        centered
+      >
+        <Stack gap="md">
+          {invoiceRecord && (
+            <>
+              <Card withBorder padding="md" radius="md" bg="var(--mantine-color-gray-0)">
+                <Stack gap="sm">
+                  <Group justify="space-between">
+                    <Text fw={700}>EDR Freight</Text>
+                    <Text fw={600} size="sm">Invoice #345</Text>
+                  </Group>
+                  <Divider />
+                  <SimpleGrid cols={2} spacing="sm">
+                    <InfoRow label="Booking" value={bookingRef(invoiceRecord)} />
+                    <InfoRow label="Customer" value={customerName(invoiceRecord)} />
+                    <InfoRow label="Pickup" value={pickupLocation(invoiceRecord)} />
+                    <InfoRow label="Destination" value={destinationYardName(invoiceRecord)} />
+                    <InfoRow label="Est. Distance" value={invoiceRecord.estimatedKm ? `${invoiceRecord.estimatedKm} km` : "—"} />
+                    <InfoRow label="Actual Distance" value={invoiceRecord.exactKm ? `${invoiceRecord.exactKm} km` : "—"} />
+                    <InfoRow label="Advanced Payment" value={formatPrice(invoiceRecord.advancedPayment)} />
+                    <InfoRow label="Post Payment" value={formatPrice(invoiceRecord.remainingPayment)} />
+                  </SimpleGrid>
+                  <Divider />
+                  <Group justify="flex-end">
+                    <Stack gap={0} align="flex-end">
+                      <Text size="sm" c="dimmed">Total Amount</Text>
+                      <Text fw={700} size="lg">{formatPrice(invoiceRecord.advancedPayment + invoiceRecord.remainingPayment)}</Text>
+                    </Stack>
+                  </Group>
+                </Stack>
+              </Card>
+            </>
+          )}
+          <Group justify="flex-end" gap="sm">
+            <Button variant="default" onClick={closeInvoice}>Close</Button>
+          </Group>
+        </Stack>
+      </Modal>
     </Stack>
   );
 };