diff --git a/js/src/components/Comment/EventComment.vue b/js/src/components/Comment/EventComment.vue
index 48e7fcf3..90e1e01a 100644
--- a/js/src/components/Comment/EventComment.vue
+++ b/js/src/components/Comment/EventComment.vue
@@ -1,12 +1,12 @@
 <template>
   <li
+    class="bg-white dark:bg-zinc-800 rounded p-2"
     :class="{
       reply: comment.inReplyToComment,
-      'bg-purple-2': comment.isAnnouncement,
-      'bg-violet-1': commentSelected,
+      'bg-mbz-purple-50 dark:bg-mbz-purple-500': comment.isAnnouncement,
+      'bg-mbz-bluegreen-50 dark:bg-mbz-bluegreen-600': commentSelected,
       'shadow-none': !rootComment,
     }"
-    class="bg-white dark:bg-zinc-900 rounded p-2"
   >
     <article :id="commentId" dir="auto" class="mbz-comment">
       <div>
@@ -53,6 +53,7 @@
           v-html="comment.text"
           dir="auto"
           :lang="comment.language"
+          class="prose dark:prose-invert xl:prose-lg !max-w-full" :class="{ 'text-black dark:text-white': comment.isAnnouncement}"
         />
         <div v-else>{{ t("[This comment has been deleted]") }}</div>
         <nav class="flex gap-1 mt-1" v-if="!comment.deletedAt">
diff --git a/js/tailwind.config.js b/js/tailwind.config.js
index a5486fac..3c21e8e5 100644
--- a/js/tailwind.config.js
+++ b/js/tailwind.config.js
@@ -38,16 +38,16 @@ module.exports = {
         },
         "mbz-purple": {
           DEFAULT: "#424056",
-          50: "#9C9AB4",
-          100: "#918EAB",
-          200: "#7A779A",
-          300: "#666385",
-          400: "#54516D",
-          500: "#424056",
-          600: "#292836",
-          700: "#111016",
-          800: "#000000",
-          900: "#000000",
+          50: "#CAC9D7",
+          100: "#BEBDCE",
+          200: "#A8A6BC",
+          300: "#918EAB",
+          400: "#7A779A",
+          500: "#666385",
+          600: "#54516D",
+          700: "#424056",
+          800: "#292836",
+          900: "#111016",
         },
         "mbz-bluegreen": {
           DEFAULT: "#1E7D97",