diff --git a/src/assets/lexicon_icon.js b/src/assets/lexicon_icon.js
index 69833f84f9b59c886cdb7dece3627b8633610786..ab5eb63e4e57018d4a7668e3e0bce1f3ddff32b3 100644
--- a/src/assets/lexicon_icon.js
+++ b/src/assets/lexicon_icon.js
@@ -147,6 +147,19 @@ async function getColorForLexicon(lexiconId) {
   const { lexiconColors } = await browser.storage.local.get("lexiconColors");
   return (lexiconColors && lexiconColors[String(lexiconId)]) || "#cccccc";
 }
+/**
+ * Convertit une couleur hexadécimale en une couleur RGBA.
+ * @param {string} hex - La couleur en hexadécimal.
+ * @param {number} opacity - La transparence (0-1).
+ * @returns {string} La couleur RGBA.
+ */
+function hexToRgba(hex, opacity) {
+  const bigint = parseInt(hex.replace('#', ''), 16);
+  const r = (bigint >> 16) & 255;
+  const g = (bigint >> 8) & 255;
+  const b = bigint & 255;
+  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+}
 
 window.updateLexiconColors = updateLexiconColors;
 window.getColorForLexicon = getColorForLexicon;
@@ -155,4 +168,4 @@ window.convertColor = convertColor;
 window.getOrCreateLexiconColor = getOrCreateLexiconColor;
 window.createColorCircle = createColorCircle;
 window.getLexiconsColors = getLexiconsColors;
-
+window.hexToRgba = hexToRgba;
diff --git a/src/background/background.js b/src/background/background.js
index ddfb4d0f7cdc17a8a1e7bf2caeb118dc94772145..dd5ac3dc12c3ec6826639a7cffed4237cad14330 100644
--- a/src/background/background.js
+++ b/src/background/background.js
@@ -68,7 +68,11 @@ async function isUserConnected() {
 
 async function refreshAllUI() {
   log("🔄 Rafraîchissement global de l'UI...");
-  browser.runtime.sendMessage({ action: "refreshUI" });
+  try {
+    await browser.runtime.sendMessage({ action: "refreshUI" });
+  } catch (error) {
+    console.warn("Aucun récepteur pour 'refreshUI' :", error);
+  }
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
diff --git a/src/sidebar/sidebar.html b/src/sidebar/sidebar.html
index 96de998b0c0aa38204efaf34153aa885dd55c84d..6c776708d7f458031d54a3599df5bd903be3884f 100644
--- a/src/sidebar/sidebar.html
+++ b/src/sidebar/sidebar.html
@@ -296,13 +296,12 @@
     }
 
     .lexicon-highlight {
-      background-color: rgba(255, 255, 0, 0.3);
+      background-color: var(--highlight-color, rgba(255, 255, 0, 0.3));
       border-bottom: 1px dashed #666;
       transition: background-color 0.3s;
     }
-
     .lexicon-highlight:hover {
-      background-color: rgba(255, 255, 0, 0.5);
+      background-color: var(--highlight-color-hover, rgba(255, 255, 0, 0.5));
     }
 
     .lexicon-section {
diff --git a/src/sidebar/sidebar.js b/src/sidebar/sidebar.js
index c51f264b8bcb7950aff6267a462837d8bd66f859..a6d9a6a7ce236a1eb66048b11ca76ad420573816 100644
--- a/src/sidebar/sidebar.js
+++ b/src/sidebar/sidebar.js
@@ -503,28 +503,11 @@ async function handleAddWordClick() {
 browser.runtime.onMessage.addListener(async (message) => {
   log("📩 Message reçu dans sidebar.js :", message);
   
-  if (message.action === "refreshUI") {
-    log("🔄 Demande de rafraîchissement de la barre latérale.");
-    await refreshSidebarState();
-    return;
-  }
-
-  if (message.command) {
-    switch (message.command) {
-      case "activate-highlighting":
-        const highlightButton = document.querySelector(`button[data-lexicon-id="${message.lexiconId}"]`);
-        if (highlightButton) {
-          highlightButton.dataset.active = "true";
-          highlightButton.classList.add("active");
-        }
-        break;
-        
-      case "deactivate-highlighting":
-        const highlightButtonOff = document.querySelector(`button[data-lexicon-id="${message.lexiconId}"]`);
-        if (highlightButtonOff) {
-          highlightButtonOff.dataset.active = "false";
-          highlightButtonOff.classList.remove("active");
-        }
+  if (message.action)
+    switch (message.action) {
+      case "refreshUI":
+        log("🔄 Demande de rafraîchissement de la barre latérale.");
+        await refreshSidebarState();
         break;
 
       case "mot_selectionne":
@@ -607,6 +590,25 @@ browser.runtime.onMessage.addListener(async (message) => {
         closeBlock("etatContent");
         closeBlock("definitionContent")
         break;
+    }
+
+  if (message.command) {
+    switch (message.command) {
+      case "activate-highlighting":
+        const highlightButton = document.querySelector(`button[data-lexicon-id="${message.lexiconId}"]`);
+        if (highlightButton) {
+          highlightButton.dataset.active = "true";
+          highlightButton.classList.add("active");
+        }
+        break;
+        
+      case "deactivate-highlighting":
+        const highlightButtonOff = document.querySelector(`button[data-lexicon-id="${message.lexiconId}"]`);
+        if (highlightButtonOff) {
+          highlightButtonOff.dataset.active = "false";
+          highlightButtonOff.classList.remove("active");
+        }
+        break;
 
       case "register-stats-script":
         break;
diff --git a/src/utils/highlighting.js b/src/utils/highlighting.js
index e65a253cedea89dffdee8648572e5ad78404f08e..ac318cda93d9d57480bbf05ff0d9d63a2d148c4f 100644
--- a/src/utils/highlighting.js
+++ b/src/utils/highlighting.js
@@ -388,10 +388,29 @@ browser.runtime.onMessage.addListener((message) => {
                 const span = document.createElement("span");
                 span.textContent = match[0];
                 span.className = "lexicon-highlight";
-                span.style.backgroundColor = "rgba(255, 255, 0, 0.3)";
-                span.style.borderBottom = "1px dashed #666";
-                fragments.push(span);
 
+                let currentLexiconId = null;
+                for (const [id, words] of lexiconWordsCache.entries()) {
+                    if (activeLexiconIds.has(Number(id)) && words.has(match[0])) {
+                        currentLexiconId = id;
+                        break;
+                    }
+                }
+
+                if (currentLexiconId) {
+                    getColorForLexicon(currentLexiconId).then(hexColor => {
+                        const rgbaColor = hexToRgba(hexColor, 0.3);
+                        const rgbaHoverColor = hexToRgba(hexColor, 0.5);
+                        span.style.setProperty('--highlight-color', rgbaColor);
+                        span.style.setProperty('--highlight-color-hover', rgbaHoverColor);
+                        span.style.backgroundColor = rgbaColor;
+                    });
+                } else {
+                    // Optionnel : couleur par défaut
+                    span.style.backgroundColor = "rgba(255, 255, 0, 0.3)";
+                }
+
+                fragments.push(span);
                 lastIndex = regex.lastIndex;
             }