diff --git a/Vue/Ajaxmessagerieliste/index.php b/Vue/Ajaxmessagerieliste/index.php
index 1f0931ee..ee02fe96 100755
--- a/Vue/Ajaxmessagerieliste/index.php
+++ b/Vue/Ajaxmessagerieliste/index.php
@@ -1,12 +1,27 @@
+<?php 
+    $nbligne = count($messagesnonlus); 
+?>
+
 <div id="div_messagerie" class="animate__animated animate__fadeIn">
+    
+    <div class="d-flex justify-content-between align-items-center mb-3 px-2">
+        <h6 class="mb-0 fw-bold text-muted text-uppercase small">
+            <i class="fas fa-envelope-open-text me-2 text-primary"></i><?= _("Nouveaux messages reçus") ?>
+        </h6>
+        <span class="badge bg-primary-ghost text-primary rounded-pill px-3 py-2 fw-bold" id="container-badge-msg">
+            <span id="txt-nbre-msg"><?= $nbligne ?></span> 
+            <span id="label-nbre-msg"><?= ($nbligne > 1) ? _("Messages") : _("Message") ?></span>
+        </span>
+    </div>
+
     <div class="table-responsive">
-        <table class="table table-hover align-middle mb-0" style="font-size: 8.5pt;">
+        <table class="table table-hover align-middle mb-0" id="table-messagerie" style="font-size: 8.5pt;">
             <thead class="bg-primary text-white">
                 <tr>
                     <th class="text-center py-3 border-0" width="8%">ID</th>
-                    <th class="text-center py-3 border-0" width="15%"><?= _("Date & Heure") ?></th>
+                    <th class="text-center py-3 border-0" width="18%"><?= _("Date & Heure") ?></th>
                     <th class="py-3 border-0" width="20%"><?= _("Origine") ?></th>
-                    <th class="py-3 border-0" width="42%"><?= _("Message") ?></th>
+                    <th class="py-3 border-0" width="39%"><?= _("Message") ?></th>
                     <th class="text-center py-3 border-0" width="15%"><?= _("Action") ?></th>
                 </tr>
             </thead>
@@ -14,16 +29,14 @@
                 <?php foreach ($messagesnonlus as $msg):
                     $idMessagerie = $this->nettoyer($msg['idMessagerie']);
                 ?>
-                <tr class="message-row">
-                    <td class="text-center fw-bold text-muted">
-                        #<?= $idMessagerie ?>
-                    </td>
+                <tr class="message-row" id="row-msg-<?= $idMessagerie ?>">
+                    <td class="text-center fw-bold text-muted">#<?= $idMessagerie ?></td>
                     <td class="text-center">
                         <div class="fw-bold text-nowrap"><?= dateheureLang($this->nettoyer($msg['dateSysteme'])) ?></div>
                     </td>
                     <td>
                         <div class="fw-bold text-primary text-uppercase"><?= $this->nettoyer($msg['prestataire']) ?></div>
-                        <div class="text-muted small"><i class="fas fa-user-edit me-1"></i><?= $this->nettoyer($msg['expediteur']) ?></div>
+                        <div class="text-muted small"><i class="fas fa-user-edit me-1 text-info"></i><?= $this->nettoyer($msg['expediteur']) ?></div>
                     </td>
                     <td>
                         <div class="message-content-box p-2 rounded border-start border-3 border-info bg-light">
@@ -39,20 +52,33 @@
                     </td>
                 </tr>
                 <?php endforeach; ?>
+                
+                <tr id="no-message-row" style="<?= ($nbligne > 0) ? 'display:none;' : '' ?>">
+                    <td colspan="5" class="text-center py-5 text-muted">
+                        <i class="fas fa-check-circle fa-3x mb-3 opacity-25"></i>
+                        <p class="fw-bold"><?= _("Aucun nouveau message non lu") ?></p>
+                    </td>
+                </tr>
             </tbody>
         </table>
     </div>
 </div>
 
 <style>
-    /* Design System Messagerie Neutral Pro */
+    /* Conteneur principal */
+    .bg-primary-ghost { 
+        background-color: rgba(33, 46, 83, 0.08) !important; 
+    }
+
     .message-row {
         transition: all 0.2s ease;
     }
+
     .message-row:hover {
         background-color: rgba(33, 46, 83, 0.03) !important;
     }
 
+    /* Boîte de contenu du message */
     .message-content-box {
         font-family: 'Inter', sans-serif;
         line-height: 1.5;
@@ -63,7 +89,7 @@
         white-space: pre-line;
     }
 
-    /* Personnalisation de la scrollbar interne du message */
+    /* Scrollbar minimaliste */
     .message-content-box::-webkit-scrollbar {
         width: 4px;
     }
@@ -72,9 +98,16 @@
         border-radius: 10px;
     }
 
-    /* Suppression des bordures inutiles pour un look épuré */
+    /* Bordures épurées */
     .table-hover tbody tr td {
         border-bottom: 1px solid #f1f4f6;
         padding: 12px 8px;
     }
+
+    /* État pendant le traitement AJAX */
+    .is-processing {
+        opacity: 0.6;
+        pointer-events: none;
+        background-color: #f8f9fa !important;
+    }
 </style>
\ No newline at end of file