diff --git a/library/ui-styles/src/main/res/values/colors_message_bubble.xml b/library/ui-styles/src/main/res/values/colors_message_bubble.xml
new file mode 100644
index 0000000000..7ac68574b6
--- /dev/null
+++ b/library/ui-styles/src/main/res/values/colors_message_bubble.xml
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <!-- Timeline bubble background colors -->
+    <attr name="vctr_message_bubble_inbound" format="color" />
+    <color name="vctr_message_bubble_inbound_light">#E8EDF4</color>
+    <color name="vctr_message_bubble_inbound_dark">#21262C</color>
+    <attr name="vctr_message_bubble_outbound" format="color" />
+    <color name="vctr_message_bubble_outbound_light">#E7F8F3</color>
+    <color name="vctr_message_bubble_outbound_dark">#133A34</color>
+</resources>
\ No newline at end of file
diff --git a/library/ui-styles/src/main/res/values/theme_dark.xml b/library/ui-styles/src/main/res/values/theme_dark.xml
index b828855721..542b2d4bbc 100644
--- a/library/ui-styles/src/main/res/values/theme_dark.xml
+++ b/library/ui-styles/src/main/res/values/theme_dark.xml
@@ -31,6 +31,8 @@
         <item name="vctr_waiting_background_color">@color/vctr_waiting_background_color_dark</item>
         <item name="vctr_chat_effect_snow_background">@color/vctr_chat_effect_snow_background_dark</item>
         <item name="vctr_toolbar_background">@color/element_system_dark</item>
+        <item name="vctr_message_bubble_inbound">@color/vctr_message_bubble_inbound_dark</item>
+        <item name="vctr_message_bubble_outbound">@color/vctr_message_bubble_outbound_dark</item>
 
         <!-- room message colors -->
         <item name="vctr_notice_secondary">#61708B</item>
diff --git a/library/ui-styles/src/main/res/values/theme_light.xml b/library/ui-styles/src/main/res/values/theme_light.xml
index 790a0bfc7c..5f032481d5 100644
--- a/library/ui-styles/src/main/res/values/theme_light.xml
+++ b/library/ui-styles/src/main/res/values/theme_light.xml
@@ -31,6 +31,8 @@
         <item name="vctr_waiting_background_color">@color/vctr_waiting_background_color_light</item>
         <item name="vctr_chat_effect_snow_background">@color/vctr_chat_effect_snow_background_light</item>
         <item name="vctr_toolbar_background">@color/element_background_light</item>
+        <item name="vctr_message_bubble_inbound">@color/vctr_message_bubble_inbound_light</item>
+        <item name="vctr_message_bubble_outbound">@color/vctr_message_bubble_outbound_light</item>
 
         <!-- room message colors -->
         <item name="vctr_notice_secondary">#61708B</item>
diff --git a/vector/src/main/java/im/vector/app/features/home/room/detail/timeline/view/MessageBubbleView.kt b/vector/src/main/java/im/vector/app/features/home/room/detail/timeline/view/MessageBubbleView.kt
index d36e3068b7..f1250f7efe 100644
--- a/vector/src/main/java/im/vector/app/features/home/room/detail/timeline/view/MessageBubbleView.kt
+++ b/vector/src/main/java/im/vector/app/features/home/room/detail/timeline/view/MessageBubbleView.kt
@@ -139,16 +139,16 @@ class MessageBubbleView @JvmOverloads constructor(context: Context, attrs: Attri
         val shapeAppearanceModelBuilder = ShapeAppearanceModel().toBuilder()
         val backgroundColor: Int
         if (isIncoming) {
-            backgroundColor = ThemeUtils.getColor(context, R.attr.vctr_system)
+            backgroundColor = ThemeUtils.getColor(context, R.attr.vctr_message_bubble_inbound)
             shapeAppearanceModelBuilder
                     .setTopRightCorner(CornerFamily.ROUNDED, cornerRadius)
                     .setBottomRightCorner(CornerFamily.ROUNDED, cornerRadius)
                     .setTopLeftCorner(topCornerFamily, topRadius)
                     .setBottomLeftCorner(bottomCornerFamily, bottomRadius)
         } else {
-            val resolvedColor = ContextCompat.getColor(context, R.color.palette_element_green)
-            val alpha = if (ThemeUtils.isLightTheme(context)) 0x0E else 0x26
-            backgroundColor = ColorUtils.setAlphaComponent(resolvedColor, alpha)
+            backgroundColor = ThemeUtils.getColor(context, R.attr.vctr_message_bubble_outbound)
+            //val alpha = if (ThemeUtils.isLightTheme(context)) 0x0E else 0x26
+            //backgroundColor = ColorUtils.setAlphaComponent(resolvedColor, alpha)
             shapeAppearanceModelBuilder
                     .setTopLeftCorner(CornerFamily.ROUNDED, cornerRadius)
                     .setBottomLeftCorner(CornerFamily.ROUNDED, cornerRadius)