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 93e3e51b0..198fe50a3 100644
--- a/apps/edr-freight-web/backoffice/src/pages/operations/FirstMilePage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/operations/FirstMilePage.tsx
@@ -7,6 +7,7 @@ import {
   Printer,
   RefreshCw,
   Ruler,
+  Trash,
   Truck,
 } from "lucide-react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
@@ -420,6 +421,17 @@ const FirstMilePage = () => {
     },
   });
 
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => firstMileService.remove(id),
+    onSuccess: () => {
+      void qc.invalidateQueries({ queryKey: QUERY_KEYS.FIRST_MILE.list() });
+      toast({ title: "Record deleted", description: "First-mile record removed successfully." });
+    },
+    onError: () => {
+      toast({ title: "Delete failed", variant: "destructive" });
+    },
+  });
+
   const acceptMutation = useMutation({
     mutationFn: async ({ reference, vehicleId }: { reference: string; vehicleId: string | null }) => {
       const res = await firstMileService.accept(reference);
@@ -837,6 +849,7 @@ const FirstMilePage = () => {
           const assigned = isAssigned(row.original);
           const nextStatus = NEXT_STATUS[row.original.status];
           const canPrint = row.original.status !== "PAYMENT_PENDING";
+          const isPaid = (row.original as any).paid;
           return (
             <Group gap={4} justify="flex-end" wrap="nowrap">
               <Menu position="bottom-end" width={200} withinPortal>
@@ -889,6 +902,22 @@ const FirstMilePage = () => {
                       Print trip slip
                     </Menu.Item>
                   )}
+                  {!isPaid && (
+                    <>
+                      <Menu.Divider />
+                      <Menu.Item
+                        leftSection={<Trash size={15} />}
+                        color="red"
+                        onClick={() => {
+                          if (confirm(`Delete first-mile record ${bookingRef(row.original)}?`)) {
+                            deleteMutation.mutate(row.original.id);
+                          }
+                        }}
+                      >
+                        Delete
+                      </Menu.Item>
+                    </>
+                  )}
                 </Menu.Dropdown>
               </Menu>
             </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 9d54326e1..eb00c0904 100644
--- a/apps/edr-freight-web/backoffice/src/pages/operations/LastMilePage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/operations/LastMilePage.tsx
@@ -6,6 +6,7 @@ import {
   Printer,
   RefreshCw,
   Ruler,
+  Trash,
   Truck,
 } from "lucide-react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
@@ -397,6 +398,17 @@ const LastMilePage = () => {
     },
   });
 
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => lastMileService.remove(id),
+    onSuccess: () => {
+      void qc.invalidateQueries({ queryKey: QUERY_KEYS.LAST_MILE.list() });
+      toast({ title: "Record deleted", description: "Last-mile record removed successfully." });
+    },
+    onError: () => {
+      toast({ title: "Delete failed", variant: "destructive" });
+    },
+  });
+
   const allocateMutation = useMutation({
     mutationFn: (data: Array<{ containerId: string; vehicleId: string }>) =>
       api.post(`/last-mile/${activeId}/allocate-containers`, data),
@@ -817,6 +829,7 @@ const LastMilePage = () => {
           const assigned = isAssigned(row.original);
           const nextStatus = NEXT_STATUS[row.original.status];
           const canPrint = row.original.status !== "PAYMENT_PENDING";
+          const isPaid = (row.original as any).paid;
           return (
             <Group gap={4} justify="flex-end" wrap="nowrap">
               <Menu position="bottom-end" width={200} withinPortal>
@@ -869,6 +882,22 @@ const LastMilePage = () => {
                       Print trip slip
                     </Menu.Item>
                   )}
+                  {!isPaid && (
+                    <>
+                      <Menu.Divider />
+                      <Menu.Item
+                        leftSection={<Trash size={15} />}
+                        color="red"
+                        onClick={() => {
+                          if (confirm(`Delete last-mile record ${bookingRef(row.original)}?`)) {
+                            deleteMutation.mutate(row.original.id);
+                          }
+                        }}
+                      >
+                        Delete
+                      </Menu.Item>
+                    </>
+                  )}
                 </Menu.Dropdown>
               </Menu>
             </Group>