diff --git a/apps/edr-freight-web/backoffice/src/App.tsx b/apps/edr-freight-web/backoffice/src/App.tsx
index c99d39294..277e8e2ab 100644
--- a/apps/edr-freight-web/backoffice/src/App.tsx
+++ b/apps/edr-freight-web/backoffice/src/App.tsx
@@ -13,6 +13,7 @@ import {
   Truck,
   Container,
   Package,
+  PackageOpen,
   //TrainTrack,
 } from "lucide-react";
 
@@ -143,6 +144,11 @@ const buildSidebarSections = (demoItems: SidebarItem[]): SidebarSection[] => [
         href: "/dashboard/warehouse-inventory",
         icon: <Package />,
       },
+      {
+        label: "Arrival Queue",
+        href: "/dashboard/arrival-queue",
+        icon: <PackageOpen />,
+      },
       {
         label: "Loading Queue",
         href: "/dashboard/loading-queue",
diff --git a/apps/edr-freight-web/backoffice/src/hooks/useWarehouses.ts b/apps/edr-freight-web/backoffice/src/hooks/useWarehouses.ts
index af30c4935..bc9b54888 100644
--- a/apps/edr-freight-web/backoffice/src/hooks/useWarehouses.ts
+++ b/apps/edr-freight-web/backoffice/src/hooks/useWarehouses.ts
@@ -233,24 +233,32 @@ export function useArrivalQueue() {
   });
 }
 
-function useArrivalMutation<TArgs>(fn: (args: TArgs) => Promise<unknown>) {
+function useArrivalInvalidation() {
   const qc = useQueryClient();
-  return useMutation({
-    mutationFn: fn,
-    onSuccess: () => {
-      qc.invalidateQueries({ queryKey: ['warehouse-inventory'] });
-      qc.invalidateQueries({ queryKey: warehouseKeys.all });
-    },
-  });
+  return () => {
+    qc.invalidateQueries({ queryKey: ['warehouse-inventory'] });
+    qc.invalidateQueries({ queryKey: warehouseKeys.all });
+  };
 }
 
-export const useAutoUnloadArrived = () =>
-  useArrivalMutation(() => warehouseService.autoUnloadArrived());
-export const useAutoLoadReady = () => useArrivalMutation(() => warehouseService.autoLoadReady());
-export const useUnloadBooking = () =>
-  useArrivalMutation((args: { bookingId: string; payload?: Record<string, unknown> }) =>
-    warehouseService.unloadBooking(args.bookingId, args.payload),
-  );
+export function useAutoUnloadArrived() {
+  const onSuccess = useArrivalInvalidation();
+  return useMutation({ mutationFn: () => warehouseService.autoUnloadArrived(), onSuccess });
+}
+
+export function useAutoLoadReady() {
+  const onSuccess = useArrivalInvalidation();
+  return useMutation({ mutationFn: () => warehouseService.autoLoadReady(), onSuccess });
+}
+
+export function useUnloadBooking() {
+  const onSuccess = useArrivalInvalidation();
+  return useMutation({
+    mutationFn: (args: { bookingId: string; payload?: Record<string, unknown> }) =>
+      warehouseService.unloadBooking(args.bookingId, args.payload),
+    onSuccess,
+  });
+}
 
 export function useInspectionReports(inventoryId?: string) {
   return useQuery({
diff --git a/apps/edr-freight-web/backoffice/src/pages/warehouses/LoadingQueuePage.tsx b/apps/edr-freight-web/backoffice/src/pages/warehouses/LoadingQueuePage.tsx
index ab7509db6..7bc363c09 100644
--- a/apps/edr-freight-web/backoffice/src/pages/warehouses/LoadingQueuePage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/warehouses/LoadingQueuePage.tsx
@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Badge, Button, Card, Container, Group, Stack, Table, Tabs, Text } from '@mantine/core';
-import { CreditCard, Eye } from 'lucide-react';
+import { CreditCard, Eye, Truck } from 'lucide-react';
 
 import Breadcrumbs from '@/components/ui/Breadcrumbs';
 import {
@@ -10,7 +10,8 @@ import {
   WarehouseHero,
   formatNumber,
 } from '@/components/warehouses';
-import { useWarehouseInventory } from '@/hooks/useWarehouses';
+import { useAutoLoadReady, useWarehouseInventory } from '@/hooks/useWarehouses';
+import { useToast } from '@/hooks/use-toast';
 import type { WarehouseInventoryItem } from '@/types/warehouse';
 
 const isPaid = (item: WarehouseInventoryItem) => item.booking?.status === 'PAID';
@@ -25,11 +26,26 @@ const isPaid = (item: WarehouseInventoryItem) => item.booking?.status === 'PAID'
  */
 export default function LoadingQueuePage() {
   const navigate = useNavigate();
+  const { toast } = useToast();
+  const autoLoad = useAutoLoadReady();
   const { data: readyData, isLoading: readyLoading } = useWarehouseInventory({
     status: 'READY_FOR_LOADING',
   });
   const { data: loadedData, isLoading: loadedLoading } = useWarehouseInventory({ status: 'LOADED' });
 
+  const handleAutoLoad = async () => {
+    try {
+      const res = await autoLoad.mutateAsync();
+      const r = res.data;
+      toast({
+        title: 'Auto-load complete',
+        description: `Loaded ${r.loadedCount} PAID item(s); skipped ${r.skippedCount} (unpaid stay pending).`,
+      });
+    } catch {
+      toast({ variant: 'destructive', title: 'Auto-load failed' });
+    }
+  };
+
   const readyItems = readyData ?? [];
   const loadedItems = loadedData ?? [];
 
@@ -48,6 +64,17 @@ export default function LoadingQueuePage() {
           subtitle="Manage bookings and inventory through the loading workflow."
         />
 
+        <Group justify="flex-end">
+          <Button
+            color="green"
+            leftSection={<Truck size={16} />}
+            loading={autoLoad.isPending}
+            onClick={handleAutoLoad}
+          >
+            Auto Load Ready Items
+          </Button>
+        </Group>
+
         <Card withBorder radius="md" padding="lg">
           <Tabs defaultValue="ready">
             <Tabs.List>