diff --git a/svelte/lib/mesure/commentaire/ListeSuggestionsMention.svelte b/svelte/lib/mesure/commentaire/ListeSuggestionsMention.svelte
index 9016030fb..2bfab5f00 100644
--- a/svelte/lib/mesure/commentaire/ListeSuggestionsMention.svelte
+++ b/svelte/lib/mesure/commentaire/ListeSuggestionsMention.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
   import type { Contributeur } from '../../tableauDesMesures/tableauDesMesures.d';
+  import Initiales from '../../ui/Initiales.svelte';
+  import { storeAutorisations } from '../../gestionContributeurs/stores/autorisations.store';
 
   export let items: Contributeur[];
   export let callback: (c: Contributeur) => void;
@@ -28,11 +30,55 @@
 </script>
 
 <ul>
-  {#each items as item, i}
-    <li>
-      <span class:active={i === activeIdx}>
-        {item.prenomNom}
-      </span>
+  {#each items as contributeur, i}
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <li on:click={() => callback(contributeur)}>
+      <div class:active={i === activeIdx} class="contenu-nom-prenom">
+        <Initiales
+          valeur={contributeur.initiales}
+          resumeNiveauDroit={$storeAutorisations.autorisations[contributeur.id]
+            ?.resumeNiveauDroit}
+        />
+        <span class="prenom-nom">{@html contributeur.prenomNom}</span>
+      </div>
     </li>
   {/each}
 </ul>
+
+<style>
+  ul {
+    background: white;
+    margin: 0;
+    list-style: none;
+    border-radius: 6px;
+    border: 1px solid var(--liseres-fonce);
+    padding: 0;
+  }
+
+  li {
+    cursor: pointer;
+  }
+
+  .contenu-nom-prenom {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-weight: 500;
+    overflow: hidden;
+    padding: 9px 16px;
+  }
+
+  .contenu-nom-prenom.active {
+    background: #eff6ff;
+  }
+
+  .prenom-nom {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  .contenu-nom-prenom.active .prenom-nom {
+    color: var(--bleu-mise-en-avant);
+  }
+</style>