diff --git a/library/ui-styles/src/main/res/values/attrs_sc.xml b/library/ui-styles/src/main/res/values/attrs_sc.xml
index 4ccf77fa79..2b3cb892f1 100644
--- a/library/ui-styles/src/main/res/values/attrs_sc.xml
+++ b/library/ui-styles/src/main/res/values/attrs_sc.xml
@@ -18,6 +18,7 @@
         <attr name="message_highlight_bg_color" format="color" />
         <attr name="code_block_bg_color" format="color" />
         <attr name="quote_bar_color" format="color" />
+        <attr name="voice_message_playback_background_color" format="color" />
 
         <attr name="user_color_pl_100" format="color" />
         <attr name="user_color_pl_95" format="color" />
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 0a0a714e61..d634263c9a 100644
--- a/library/ui-styles/src/main/res/values/theme_dark.xml
+++ b/library/ui-styles/src/main/res/values/theme_dark.xml
@@ -133,6 +133,7 @@
         <item name="user_color_pl_51">@color/user_color_element_pl_51</item>
         <item name="user_color_pl_95">@color/user_color_element_pl_95</item>
         <item name="user_color_pl_100">@color/user_color_element_pl_100</item>
+        <item name="voice_message_playback_background_color">?vctr_content_quinary</item>
 
         <item name="android:statusBarColor">@color/android_status_bar_background_dark</item>
         <item name="android:navigationBarColor">@color/android_navigation_bar_background_dark</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 36ae2a1884..8c0a9d9ff6 100644
--- a/library/ui-styles/src/main/res/values/theme_light.xml
+++ b/library/ui-styles/src/main/res/values/theme_light.xml
@@ -133,6 +133,7 @@
         <item name="user_color_pl_51">@color/user_color_element_pl_51</item>
         <item name="user_color_pl_95">@color/user_color_element_pl_95</item>
         <item name="user_color_pl_100">@color/user_color_element_pl_100</item>
+        <item name="voice_message_playback_background_color">?vctr_content_quinary</item>
 
         <!-- Use dark color, to have enough contrast with icons color. windowLightStatusBar is only available in API 23+ -->
         <item name="android:statusBarColor">@color/android_status_bar_background_dark</item>
diff --git a/library/ui-styles/src/main/res/values/theme_sc.xml b/library/ui-styles/src/main/res/values/theme_sc.xml
index 4ae5942b2c..fc5bca2865 100644
--- a/library/ui-styles/src/main/res/values/theme_sc.xml
+++ b/library/ui-styles/src/main/res/values/theme_sc.xml
@@ -94,6 +94,7 @@
         <item name="user_color_pl_51">@color/user_color_sc_pl_51</item>
         <item name="user_color_pl_95">@color/user_color_sc_pl_95</item>
         <item name="user_color_pl_100">@color/user_color_sc_pl_100</item>
+        <item name="voice_message_playback_background_color">#1fffffff</item>
 
         <item name="android:statusBarColor">@color/background_black_sc</item>
         <item name="android:navigationBarColor">@color/background_black_sc</item>
diff --git a/library/ui-styles/src/main/res/values/theme_sc_light.xml b/library/ui-styles/src/main/res/values/theme_sc_light.xml
index 61a0da6bfe..a7a472537b 100644
--- a/library/ui-styles/src/main/res/values/theme_sc_light.xml
+++ b/library/ui-styles/src/main/res/values/theme_sc_light.xml
@@ -94,6 +94,7 @@
         <item name="user_color_pl_51">@color/user_color_sc_pl_51</item>
         <item name="user_color_pl_95">@color/user_color_sc_pl_95</item>
         <item name="user_color_pl_100">@color/user_color_sc_pl_100</item>
+        <item name="voice_message_playback_background_color">#1f000000</item>
 
         <item name="android:statusBarColor">@color/background_black_sc</item>
         <item name="android:navigationBarColor">@color/background_black_sc</item>
diff --git a/vector/src/main/java/im/vector/app/features/home/room/detail/timeline/item/MessageVoiceItem.kt b/vector/src/main/java/im/vector/app/features/home/room/detail/timeline/item/MessageVoiceItem.kt
index dc204da291..d733085e70 100644
--- a/vector/src/main/java/im/vector/app/features/home/room/detail/timeline/item/MessageVoiceItem.kt
+++ b/vector/src/main/java/im/vector/app/features/home/room/detail/timeline/item/MessageVoiceItem.kt
@@ -16,10 +16,12 @@
 
 package im.vector.app.features.home.room.detail.timeline.item
 
+import android.content.Context
 import android.text.format.DateUtils
 import android.view.ViewGroup
 import android.widget.ImageButton
 import android.widget.TextView
+import androidx.constraintlayout.widget.ConstraintLayout
 import androidx.core.view.isVisible
 import com.airbnb.epoxy.EpoxyAttribute
 import com.airbnb.epoxy.EpoxyModelClass
@@ -29,6 +31,7 @@ import im.vector.app.core.epoxy.ClickListener
 import im.vector.app.features.home.room.detail.timeline.helper.ContentDownloadStateTrackerBinder
 import im.vector.app.features.home.room.detail.timeline.helper.ContentUploadStateTrackerBinder
 import im.vector.app.features.home.room.detail.timeline.helper.VoiceMessagePlaybackTracker
+import im.vector.app.features.themes.BubbleThemeUtils
 
 @EpoxyModelClass(layout = R.layout.item_timeline_event_base)
 abstract class MessageVoiceItem : AbsMessageItem<MessageVoiceItem.Holder>() {
@@ -128,9 +131,24 @@ abstract class MessageVoiceItem : AbsMessageItem<MessageVoiceItem.Holder>() {
         val voicePlaybackTime by bind<TextView>(R.id.voicePlaybackTime)
         val voicePlaybackWaveform by bind<AudioRecordView>(R.id.voicePlaybackWaveform)
         val progressLayout by bind<ViewGroup>(R.id.messageFileUploadProgressLayout)
+        val voicePlaybackLayout by bind<ConstraintLayout>(R.id.voicePlaybackLayout)
     }
 
     companion object {
         private const val STUB_ID = R.id.messageContentVoiceStub
     }
+
+    override fun messageBubbleAllowed(context: Context): Boolean {
+        return true
+    }
+
+    override fun setBubbleLayout(holder: Holder, bubbleStyle: String, bubbleStyleSetting: String, reverseBubble: Boolean) {
+        super.setBubbleLayout(holder, bubbleStyle, bubbleStyleSetting, reverseBubble)
+
+        if (BubbleThemeUtils.drawsActualBubbles(bubbleStyle)) {
+            (holder.voiceLayout.layoutParams as ViewGroup.MarginLayoutParams).marginEnd = 0
+        } else {
+            (holder.voiceLayout.layoutParams as ViewGroup.MarginLayoutParams).marginEnd = holder.voiceLayout.resources.getDimensionPixelSize(R.dimen.no_bubble_margin_end)
+        }
+    }
 }
diff --git a/vector/src/main/res/layout/item_timeline_event_base.xml b/vector/src/main/res/layout/item_timeline_event_base.xml
index 24574990d7..d07bce48a2 100644
--- a/vector/src/main/res/layout/item_timeline_event_base.xml
+++ b/vector/src/main/res/layout/item_timeline_event_base.xml
@@ -189,9 +189,8 @@
                 <ViewStub
                     android:id="@+id/messageContentVoiceStub"
                     style="@style/TimelineContentStubBaseParams"
-                    android:layout_marginEnd="56dp"
                     android:layout="@layout/item_timeline_event_voice_stub"
-                    tools:visibility="visible" />
+                    tools:visibility="gone" />
 
             </FrameLayout>
 
diff --git a/vector/src/main/res/layout/item_timeline_event_voice_stub.xml b/vector/src/main/res/layout/item_timeline_event_voice_stub.xml
index 21705566e9..9512e198a7 100644
--- a/vector/src/main/res/layout/item_timeline_event_voice_stub.xml
+++ b/vector/src/main/res/layout/item_timeline_event_voice_stub.xml
@@ -4,6 +4,7 @@
     xmlns:tools="http://schemas.android.com/tools"
     android:id="@+id/voiceLayout"
     android:layout_width="match_parent"
+    android:minWidth="999999dp"
     android:layout_height="wrap_content">
 
     <androidx.constraintlayout.widget.ConstraintLayout
@@ -11,7 +12,7 @@
         android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:background="@drawable/bg_voice_playback"
-        android:backgroundTint="?vctr_content_quinary"
+        android:backgroundTint="?voice_message_playback_background_color"
         android:minHeight="48dp"
         android:paddingStart="8dp"
         android:paddingTop="6dp"
@@ -77,4 +78,4 @@
         app:layout_constraintTop_toBottomOf="@+id/voicePlaybackLayout"
         tools:visibility="visible" />
 
-</androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
+</androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/vector/src/main/res/values/dimens_sc.xml b/vector/src/main/res/values/dimens_sc.xml
index c4ba638b17..f4e9df2f7e 100644
--- a/vector/src/main/res/values/dimens_sc.xml
+++ b/vector/src/main/res/values/dimens_sc.xml
@@ -6,4 +6,7 @@
     <!-- messageAvatarImageView.marginStart -->
     <dimen name="dual_bubble_one_side_avatar_offset">8dp</dimen>
 
-</resources>
\ No newline at end of file
+    <!-- As found in various layout stubs in item_timeline_event_base.xml -->
+    <dimen name="no_bubble_margin_end">56dp</dimen>
+
+</resources>