diff --git a/Vue/Ajaxmessagerieliste/index.php b/Vue/Ajaxmessagerieliste/index.php
index 8909264c..49dc2a8c 100755
--- a/Vue/Ajaxmessagerieliste/index.php
+++ b/Vue/Ajaxmessagerieliste/index.php
@@ -1,32 +1,81 @@
-<div id="div_messagerie">	
-	
-	<table class="table table-striped table-bordered table-hover table-condensed table-responsive"  style='font-size:8pt;' >
-		<thead>
-		  <tr>
-				<th style="text-align:center"> Id </th>
-				<th style="text-align:center"> Date </th>
-				<th style="text-align:center"> <?= _("Prestataire") ?> </th>
-				<th style="text-align:center"> <?= _("Expéditeur") ?> </th>
-				<th width="40%" style="text-align:center"> Message </th>
-				<th style="text-align:center"> <?= _("Lu") ?> </th>
-		  </tr>
-		</thead>		
-		<tbody>
-			<?php foreach ($messagesnonlus as $messagesnonlu):
-				$idMessagerie	= $this->nettoyer($messagesnonlu['idMessagerie']);
-			?>
-			  <tr valign="top">
-				
-				<td align="center"> <?= $idMessagerie ?> </td>
-				<td align='center'><?= dateheureLang($this->nettoyer($messagesnonlu['dateSysteme'])) ?></td>
-				
-				<td> <?= $this->nettoyer($messagesnonlu['prestataire']) ?> </td>
-				<td> <?= $this->nettoyer($messagesnonlu['expediteur']) ?> </td>
-				<td> <textarea  rows="4" cols="60" readonly ><?= $this->nettoyer($messagesnonlu['textMessage']) ?></textarea> </td>
-				<td align="center"> <input type="button" style='font-size:8pt;' class = "form-control btn btn-primary" value="Read" onClick="javascript:marquer_message_comme_lu(<?=$idMessagerie?>, this);"> </td>
-				
-			  </tr>
-			<?php endforeach; ?>
-		</tbody>
-	</table>
+<div id="div_messagerie" class="animate__animated animate__fadeIn">
+    <div class="table-responsive">
+        <table class="table table-hover align-middle mb-0" 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="py-3 border-0" width="20%"><?= _("Origine") ?></th>
+                    <th class="py-3 border-0" width="42%"><?= _("Message") ?></th>
+                    <th class="text-center py-3 border-0" width="15%"><?= _("Action") ?></th>
+                </tr>
+            </thead>
+            <tbody>
+                <?php foreach ($messagesnonlus as $msg):
+                    $idMessagerie = $this->nettoyer($msg['idMessagerie']);
+                ?>
+                <tr class="message-row">
+                    <td class="text-center fw-bold text-muted">
+                        #<?= $idMessagerie ?>
+                    </td>
+                    <td class="text-center">
+                        <div class="fw-bold"><?= dateLang($this->nettoyer($msg['dateSysteme'])) ?></div>
+                        <div class="text-muted small"><?= dateHeure($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>
+                    </td>
+                    <td>
+                        <div class="message-content-box p-2 rounded border-start border-3 border-info bg-light">
+                            <?= nl2br($this->nettoyer($msg['textMessage'])) ?>
+                        </div>
+                    </td>
+                    <td class="text-center">
+                        <button type="button" 
+                                class="btn btn-primary btn-sm rounded-pill shadow-sm px-3 fw-bold" 
+                                onclick="marquer_message_comme_lu(<?= $idMessagerie ?>, this);">
+                            <i class="fas fa-check-double me-1"></i> <?= _("Lu") ?>
+                        </button>
+                    </td>
+                </tr>
+                <?php endforeach; ?>
+            </tbody>
+        </table>
+    </div>
 </div>
+
+<style>
+    /* Design System Messagerie Neutral Pro */
+    .message-row {
+        transition: all 0.2s ease;
+    }
+    .message-row:hover {
+        background-color: rgba(33, 46, 83, 0.03) !important;
+    }
+
+    .message-content-box {
+        font-family: 'Inter', sans-serif;
+        line-height: 1.5;
+        color: #444;
+        max-height: 120px;
+        overflow-y: auto;
+        word-wrap: break-word;
+        white-space: pre-line;
+    }
+
+    /* Personnalisation de la scrollbar interne du message */
+    .message-content-box::-webkit-scrollbar {
+        width: 4px;
+    }
+    .message-content-box::-webkit-scrollbar-thumb {
+        background: #ced4da;
+        border-radius: 10px;
+    }
+
+    /* Suppression des bordures inutiles pour un look épuré */
+    .table-hover tbody tr td {
+        border-bottom: 1px solid #f1f4f6;
+        padding: 12px 8px;
+    }
+</style>
\ No newline at end of file