diff --git a/apps/frontend/app/[locale]/dashboard/bookings/page.tsx b/apps/frontend/app/[locale]/dashboard/bookings/page.tsx
index 025f56a..c3ae296 100644
--- a/apps/frontend/app/[locale]/dashboard/bookings/page.tsx
+++ b/apps/frontend/app/[locale]/dashboard/bookings/page.tsx
@@ -4,7 +4,7 @@ import { useState, useEffect } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { listCsvBookings } from '@/lib/api';
 import { Link } from '@/i18n/navigation';
-import { Plus, Clock, Eye, X } from 'lucide-react';
+import { Plus, Clock, Eye, X, CreditCard } from 'lucide-react';
 import ExportButton from '@/components/ExportButton';
 import { useSearchParams } from 'next/navigation';
 import { PageHeader } from '@/components/ui/PageHeader';
@@ -350,13 +350,24 @@ export default function BookingsListPage() {
                           })
                         : t('mobile.booking', { number: booking.bookingNumber || '-' })}
                     </div>
-                    <button
-                      onClick={() => setSelectedBooking(booking)}
-                      className="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium text-blue-700 bg-blue-50 hover:bg-blue-100 rounded-lg transition-colors"
-                    >
-                      <Eye className="h-3.5 w-3.5" />
-                      {t('actions.view')}
-                    </button>
+                    <div className="flex items-center gap-2">
+                      {booking.status === 'PENDING_PAYMENT' && (
+                        <Link
+                          href={`/dashboard/booking/${booking.id}/pay`}
+                          className="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium text-white bg-orange-500 hover:bg-orange-600 rounded-lg transition-colors"
+                        >
+                          <CreditCard className="h-3.5 w-3.5" />
+                          {t('actions.pay')}
+                        </Link>
+                      )}
+                      <button
+                        onClick={() => setSelectedBooking(booking)}
+                        className="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium text-blue-700 bg-blue-50 hover:bg-blue-100 rounded-lg transition-colors"
+                      >
+                        <Eye className="h-3.5 w-3.5" />
+                        {t('actions.view')}
+                      </button>
+                    </div>
                   </div>
                 </div>
               ))}
@@ -465,13 +476,24 @@ export default function BookingsListPage() {
                         {booking.bookingNumber || '-'}
                       </td>
                       <td className="px-6 py-4 whitespace-nowrap text-center">
-                        <button
-                          onClick={() => setSelectedBooking(booking)}
-                          className="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium text-blue-700 bg-blue-50 hover:bg-blue-100 rounded-lg transition-colors"
-                        >
-                          <Eye className="h-3.5 w-3.5" />
-                          {t('actions.view')}
-                        </button>
+                        <div className="flex items-center justify-center gap-2">
+                          {booking.status === 'PENDING_PAYMENT' && (
+                            <Link
+                              href={`/dashboard/booking/${booking.id}/pay`}
+                              className="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium text-white bg-orange-500 hover:bg-orange-600 rounded-lg transition-colors"
+                            >
+                              <CreditCard className="h-3.5 w-3.5" />
+                              {t('actions.pay')}
+                            </Link>
+                          )}
+                          <button
+                            onClick={() => setSelectedBooking(booking)}
+                            className="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium text-blue-700 bg-blue-50 hover:bg-blue-100 rounded-lg transition-colors"
+                          >
+                            <Eye className="h-3.5 w-3.5" />
+                            {t('actions.view')}
+                          </button>
+                        </div>
                       </td>
                     </tr>
                   ))}
@@ -719,15 +741,16 @@ export default function BookingsListPage() {
                 </div>
                 {selectedBooking.status === 'PENDING_PAYMENT' && (
                   <div className="mt-4 pt-4 border-t border-gray-100">
-                    <p className="text-sm text-amber-700 bg-amber-50 rounded-lg px-3 py-2">
+                    <p className="text-sm text-orange-700 bg-orange-50 rounded-lg px-3 py-2">
                       {t('detail.pendingPaymentNotice')}
                     </p>
                     <Link
-                      href="/dashboard/search-advanced"
-                      className="mt-3 inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors"
+                      href={`/dashboard/booking/${selectedBooking.id}/pay`}
+                      onClick={() => setSelectedBooking(null)}
+                      className="mt-3 inline-flex items-center gap-2 px-4 py-2 bg-orange-500 text-white text-sm font-medium rounded-lg hover:bg-orange-600 transition-colors"
                     >
-                      <Plus className="h-4 w-4" />
-                      {t('detail.newBooking')}
+                      <CreditCard className="h-4 w-4" />
+                      {t('detail.payNow')}
                     </Link>
                   </div>
                 )}
diff --git a/apps/frontend/app/[locale]/dashboard/documents/page.tsx b/apps/frontend/app/[locale]/dashboard/documents/page.tsx
index bff453a..cf17ae5 100644
--- a/apps/frontend/app/[locale]/dashboard/documents/page.tsx
+++ b/apps/frontend/app/[locale]/dashboard/documents/page.tsx
@@ -46,12 +46,14 @@ export default function UserDocumentsPage() {
   const [selectedBookingId, setSelectedBookingId] = useState<string | null>(null);
   const [uploadingFiles, setUploadingFiles] = useState(false);
   const [isDraggingAdd, setIsDraggingAdd] = useState(false);
+  const [addFiles, setAddFiles] = useState<File[]>([]);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   const [showReplaceModal, setShowReplaceModal] = useState(false);
   const [documentToReplace, setDocumentToReplace] = useState<DocumentWithBooking | null>(null);
   const [replacingFile, setReplacingFile] = useState(false);
   const [isDraggingReplace, setIsDraggingReplace] = useState(false);
+  const [replaceFile, setReplaceFile] = useState<File | null>(null);
   const replaceFileInputRef = useRef<HTMLInputElement>(null);
 
   const [openDropdownId, setOpenDropdownId] = useState<string | null>(null);
@@ -189,6 +191,8 @@ export default function UserDocumentsPage() {
 
   const getStatusColor = (status: string) => {
     const colors: Record<string, string> = {
+      PENDING_PAYMENT: 'bg-orange-100 text-orange-800',
+      PENDING_BANK_TRANSFER: 'bg-blue-100 text-blue-800',
       PENDING: 'bg-yellow-100 text-yellow-800',
       ACCEPTED: 'bg-green-100 text-green-800',
       REJECTED: 'bg-red-100 text-red-800',
@@ -198,8 +202,15 @@ export default function UserDocumentsPage() {
   };
 
   const getStatusLabel = (status: string) => {
-    const key = status as 'PENDING' | 'ACCEPTED' | 'REJECTED' | 'CANCELLED';
-    return t(`statuses.${key}` as any) || status;
+    const labels: Record<string, string> = {
+      PENDING_PAYMENT: t('statuses.PENDING_PAYMENT' as any),
+      PENDING_BANK_TRANSFER: t('statuses.PENDING_BANK_TRANSFER' as any),
+      PENDING: t('statuses.PENDING' as any),
+      ACCEPTED: t('statuses.ACCEPTED' as any),
+      REJECTED: t('statuses.REJECTED' as any),
+      CANCELLED: t('statuses.CANCELLED' as any),
+    };
+    return labels[status] || status;
   };
 
   const handleDownload = async (url: string, fileName: string) => {
@@ -251,11 +262,12 @@ export default function UserDocumentsPage() {
   const handleCloseModal = () => {
     setShowAddModal(false);
     setSelectedBookingId(null);
+    setAddFiles([]);
     if (fileInputRef.current) fileInputRef.current.value = '';
   };
 
   const handleFileUpload = async () => {
-    if (!selectedBookingId || !fileInputRef.current?.files?.length) {
+    if (!selectedBookingId || addFiles.length === 0) {
       alert(t('addDocument.noBookingError'));
       return;
     }
@@ -263,10 +275,7 @@ export default function UserDocumentsPage() {
     setUploadingFiles(true);
     try {
       const formData = new FormData();
-      const files = fileInputRef.current.files;
-      for (let i = 0; i < files.length; i++) {
-        formData.append('documents', files[i]);
-      }
+      addFiles.forEach(file => formData.append('documents', file));
 
       const token = localStorage.getItem('access_token');
       const response = await fetch(
@@ -274,7 +283,10 @@ export default function UserDocumentsPage() {
         { method: 'POST', headers: { Authorization: `Bearer ${token}` }, body: formData }
       );
 
-      if (!response.ok) throw new Error(t('addDocument.errorMessage'));
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        throw new Error(errorData.message || t('addDocument.errorMessage'));
+      }
 
       alert(t('addDocument.successMessage'));
       handleCloseModal();
@@ -308,11 +320,12 @@ export default function UserDocumentsPage() {
   const handleCloseReplaceModal = () => {
     setShowReplaceModal(false);
     setDocumentToReplace(null);
+    setReplaceFile(null);
     if (replaceFileInputRef.current) replaceFileInputRef.current.value = '';
   };
 
   const handleReplaceDocument = async () => {
-    if (!documentToReplace || !replaceFileInputRef.current?.files?.length) {
+    if (!documentToReplace || !replaceFile) {
       alert(t('replaceDocument.noFileError'));
       return;
     }
@@ -320,7 +333,7 @@ export default function UserDocumentsPage() {
     setReplacingFile(true);
     try {
       const formData = new FormData();
-      formData.append('document', replaceFileInputRef.current.files[0]);
+      formData.append('document', replaceFile);
 
       const token = localStorage.getItem('access_token');
       const response = await fetch(
@@ -768,11 +781,7 @@ export default function UserDocumentsPage() {
                           <option value="">{t('addDocument.selectBookingPlaceholder')}</option>
                           {bookingsAvailableForDocuments.map(booking => (
                             <option key={booking.id} value={booking.id}>
-                              {getQuoteNumber(booking)} - {booking.origin} → {booking.destination} (
-                              {booking.status === 'PENDING'
-                                ? t('statuses.PENDING')
-                                : t('statuses.ACCEPTED')}
-                              )
+                              {getQuoteNumber(booking)} - {booking.origin} → {booking.destination} ({getStatusLabel(booking.status)})
                             </option>
                           ))}
                         </select>
@@ -795,11 +804,8 @@ export default function UserDocumentsPage() {
                           onDrop={e => {
                             e.preventDefault();
                             setIsDraggingAdd(false);
-                            if (fileInputRef.current && e.dataTransfer.files.length > 0) {
-                              const dt = new DataTransfer();
-                              Array.from(e.dataTransfer.files).forEach(f => dt.items.add(f));
-                              fileInputRef.current.files = dt.files;
-                            }
+                            const dropped = Array.from(e.dataTransfer.files);
+                            if (dropped.length > 0) setAddFiles(dropped);
                           }}
                           onClick={() => fileInputRef.current?.click()}
                         >
@@ -816,11 +822,19 @@ export default function UserDocumentsPage() {
                               d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
                             />
                           </svg>
-                          <p className="text-sm text-gray-600">
-                            {isDraggingAdd
-                              ? t('addDocument.dropHere')
-                              : t('addDocument.dragOrClick')}
-                          </p>
+                          {addFiles.length > 0 ? (
+                            <p className="text-sm font-medium text-blue-700">
+                              {addFiles.length === 1
+                                ? addFiles[0].name
+                                : `${addFiles.length} fichiers sélectionnés`}
+                            </p>
+                          ) : (
+                            <p className="text-sm text-gray-600">
+                              {isDraggingAdd
+                                ? t('addDocument.dropHere')
+                                : t('addDocument.dragOrClick')}
+                            </p>
+                          )}
                           <p className="text-xs text-gray-400 mt-1">{t('addDocument.acceptedFormats')}</p>
                           <input
                             ref={fileInputRef}
@@ -828,9 +842,9 @@ export default function UserDocumentsPage() {
                             multiple
                             accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif"
                             className="hidden"
-                            onChange={() => {
-                              // Force re-render to show selected file names
-                              setIsDraggingAdd(false);
+                            onChange={e => {
+                              const selected = Array.from(e.target.files || []);
+                              if (selected.length > 0) setAddFiles(selected);
                             }}
                           />
                         </div>
@@ -843,7 +857,7 @@ export default function UserDocumentsPage() {
                 <button
                   type="button"
                   onClick={handleFileUpload}
-                  disabled={uploadingFiles || !selectedBookingId}
+                  disabled={uploadingFiles || !selectedBookingId || addFiles.length === 0}
                   className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm disabled:opacity-50 disabled:cursor-not-allowed"
                 >
                   {uploadingFiles ? (
@@ -947,11 +961,8 @@ export default function UserDocumentsPage() {
                           onDrop={e => {
                             e.preventDefault();
                             setIsDraggingReplace(false);
-                            if (replaceFileInputRef.current && e.dataTransfer.files.length > 0) {
-                              const dt = new DataTransfer();
-                              dt.items.add(e.dataTransfer.files[0]);
-                              replaceFileInputRef.current.files = dt.files;
-                            }
+                            const dropped = e.dataTransfer.files[0];
+                            if (dropped) setReplaceFile(dropped);
                           }}
                           onClick={() => replaceFileInputRef.current?.click()}
                         >
@@ -968,18 +979,25 @@ export default function UserDocumentsPage() {
                               d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
                             />
                           </svg>
-                          <p className="text-sm text-gray-600">
-                            {isDraggingReplace
-                              ? t('replaceDocument.dropHere')
-                              : t('replaceDocument.dragOrClick')}
-                          </p>
+                          {replaceFile ? (
+                            <p className="text-sm font-medium text-blue-700">{replaceFile.name}</p>
+                          ) : (
+                            <p className="text-sm text-gray-600">
+                              {isDraggingReplace
+                                ? t('replaceDocument.dropHere')
+                                : t('replaceDocument.dragOrClick')}
+                            </p>
+                          )}
                           <p className="text-xs text-gray-400 mt-1">{t('replaceDocument.acceptedFormats')}</p>
                           <input
                             ref={replaceFileInputRef}
                             type="file"
                             accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif"
                             className="hidden"
-                            onChange={() => setIsDraggingReplace(false)}
+                            onChange={e => {
+                              const file = e.target.files?.[0];
+                              if (file) setReplaceFile(file);
+                            }}
                           />
                         </div>
                       </div>
diff --git a/apps/frontend/messages/en.json b/apps/frontend/messages/en.json
index e111a3d..d45183e 100644
--- a/apps/frontend/messages/en.json
+++ b/apps/frontend/messages/en.json
@@ -430,7 +430,8 @@
         "actions": "Actions"
       },
       "actions": {
-        "view": "View"
+        "view": "View",
+        "pay": "Pay"
       },
       "detail": {
         "title": "Booking",
@@ -440,7 +441,8 @@
         "weight": "Weight / Volume",
         "pickupDate": "Requested pickup date",
         "price": "Price",
-        "pendingPaymentNotice": "This booking is awaiting payment. Contact an administrator or create a new booking.",
+        "pendingPaymentNotice": "This booking is awaiting commission payment. Click below to complete the payment.",
+        "payNow": "Complete payment",
         "newBooking": "New booking",
         "close": "Close"
       },
@@ -1453,6 +1455,8 @@
         "actions": "Actions"
       },
       "statuses": {
+        "PENDING_PAYMENT": "Payment pending",
+        "PENDING_BANK_TRANSFER": "Bank transfer pending",
         "PENDING": "Pending",
         "ACCEPTED": "Accepted",
         "REJECTED": "Rejected",
diff --git a/apps/frontend/messages/fr.json b/apps/frontend/messages/fr.json
index df451e3..0220c2e 100644
--- a/apps/frontend/messages/fr.json
+++ b/apps/frontend/messages/fr.json
@@ -430,7 +430,8 @@
         "actions": "Actions"
       },
       "actions": {
-        "view": "Voir"
+        "view": "Voir",
+        "pay": "Payer"
       },
       "detail": {
         "title": "Réservation",
@@ -440,7 +441,8 @@
         "weight": "Poids / Volume",
         "pickupDate": "Date d'enlèvement souhaitée",
         "price": "Prix",
-        "pendingPaymentNotice": "Cette réservation est en attente de paiement. Contactez l'administrateur ou créez une nouvelle réservation.",
+        "pendingPaymentNotice": "Cette réservation est en attente du paiement de la commission. Cliquez ci-dessous pour finaliser le paiement.",
+        "payNow": "Finaliser le paiement",
         "newBooking": "Nouvelle réservation",
         "close": "Fermer"
       },
@@ -1453,6 +1455,8 @@
         "actions": "Actions"
       },
       "statuses": {
+        "PENDING_PAYMENT": "Paiement en attente",
+        "PENDING_BANK_TRANSFER": "Virement en attente",
         "PENDING": "En attente",
         "ACCEPTED": "Accepté",
         "REJECTED": "Refusé",