diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5790566d..6907a812 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -24,6 +24,7 @@ It also requires NodeJS 16 or superior (same as Peertube 5.2.0.)
 * Fix race condition in bot/ctl.
 * Various type improvements.
 * Update dependencies.
+* Fix emoji picker colors and size.
 
 ## 11.0.1
 
diff --git a/conversejs/custom/shared/styles/_peertubetheme.scss b/conversejs/custom/shared/styles/_peertubetheme.scss
index ff1018b7..7b936587 100644
--- a/conversejs/custom/shared/styles/_peertubetheme.scss
+++ b/conversejs/custom/shared/styles/_peertubetheme.scss
@@ -51,6 +51,10 @@
 
     // Fixing emoji colors for some emoji like «motorcycle»
     converse-emoji-picker {
+      // Must set display block. Without this, Converse defined max-width will not apply.
+      // Don't really know why it is working in pure ConverseJs and not in livechat.
+      display: block;
+
       .emoji-picker {
         .insert-emoji {
           a {
@@ -60,13 +64,17 @@
       }
 
       .emoji-picker__header {
-        color: var(--peertube-main-background);
-        background-color: var(--peertube-main-foreground);
+        background-color: var(--peertube-main-background);
+        color: var(--peertube-main-foreground);
+
+        .emoji-search {
+          color: currentcolor;
+        }
 
         ul {
           .emoji-category {
-            color: var(--peertube-main-background);
-            background-color: var(--peertube-main-foreground);
+            background-color: var(--peertube-main-background);
+            color: var(--peertube-main-foreground);
 
             a {
               color: currentcolor;
diff --git a/conversejs/custom/shared/styles/livechat.scss b/conversejs/custom/shared/styles/livechat.scss
index 1ae46aaf..bd398c4e 100644
--- a/conversejs/custom/shared/styles/livechat.scss
+++ b/conversejs/custom/shared/styles/livechat.scss
@@ -229,3 +229,27 @@ body.converse-embedded {
     }
   }
 }
+
+// When livechat has not many height, must reduce the emoji picker height.
+/* stylelint-disable-next-line no-duplicate-selectors */
+#conversejs {
+  &[livechat-converse-root-height="small"] {
+    converse-emoji-picker {
+      converse-emoji-picker-content {
+        .emoji-picker__lists {
+          height: 2em;
+        }
+      }
+    }
+  }
+
+  &[livechat-converse-root-height="medium"] {
+    converse-emoji-picker {
+      converse-emoji-picker-content {
+        .emoji-picker__lists {
+          height: 4em;
+        }
+      }
+    }
+  }
+}