diff --git a/app/src/main/java/com/vitorpamplona/amethyst/ui/note/ChatroomMessageCompose.kt b/app/src/main/java/com/vitorpamplona/amethyst/ui/note/ChatroomMessageCompose.kt
index 3469afd09..8563e147a 100644
--- a/app/src/main/java/com/vitorpamplona/amethyst/ui/note/ChatroomMessageCompose.kt
+++ b/app/src/main/java/com/vitorpamplona/amethyst/ui/note/ChatroomMessageCompose.kt
@@ -71,6 +71,7 @@ import com.vitorpamplona.amethyst.ui.screen.loggedIn.AccountViewModel
 import com.vitorpamplona.amethyst.ui.theme.ChatBubbleShapeMe
 import com.vitorpamplona.amethyst.ui.theme.ChatBubbleShapeThem
 import com.vitorpamplona.amethyst.ui.theme.RelayIconFilter
+import com.vitorpamplona.amethyst.ui.theme.StdHorzSpacer
 import com.vitorpamplona.amethyst.ui.theme.mediumImportanceLink
 import com.vitorpamplona.amethyst.ui.theme.placeholderText
 import com.vitorpamplona.amethyst.ui.theme.subtleBorder
@@ -498,15 +499,22 @@ private fun DrawAuthorInfo(
             }
         )
 
-        CreateClickableTextWithEmoji(
-            clickablePart = remember { "  $userDisplayName" },
-            suffix = "",
-            tags = userTags,
-            fontWeight = FontWeight.Bold,
-            overrideColor = MaterialTheme.colors.onBackground,
-            route = route,
-            nav = nav
-        )
+        userDisplayName?.let {
+            Spacer(modifier = StdHorzSpacer)
+
+            CreateClickableTextWithEmoji(
+                clickablePart = it,
+                suffix = "",
+                tags = userTags,
+                fontWeight = FontWeight.Bold,
+                overrideColor = MaterialTheme.colors.onBackground,
+                route = route,
+                nav = nav
+            )
+
+            Spacer(modifier = StdHorzSpacer)
+            DrawPlayName(it)
+        }
     }
 }
 
diff --git a/app/src/main/java/com/vitorpamplona/amethyst/ui/note/UsernameDisplay.kt b/app/src/main/java/com/vitorpamplona/amethyst/ui/note/UsernameDisplay.kt
index 775b5dff3..5b81ee018 100644
--- a/app/src/main/java/com/vitorpamplona/amethyst/ui/note/UsernameDisplay.kt
+++ b/app/src/main/java/com/vitorpamplona/amethyst/ui/note/UsernameDisplay.kt
@@ -2,7 +2,6 @@ package com.vitorpamplona.amethyst.ui.note
 
 import android.content.Context
 import android.util.Log
-import androidx.compose.foundation.layout.size
 import androidx.compose.material.Icon
 import androidx.compose.material.IconButton
 import androidx.compose.material.MaterialTheme
@@ -18,7 +17,6 @@ import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalLifecycleOwner
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextOverflow
-import androidx.compose.ui.unit.dp
 import androidx.lifecycle.LifecycleOwner
 import com.vitorpamplona.amethyst.model.Note
 import com.vitorpamplona.amethyst.model.User
@@ -26,6 +24,7 @@ import com.vitorpamplona.amethyst.service.tts.TextToSpeechHelper
 import com.vitorpamplona.amethyst.ui.actions.ImmutableListOfLists
 import com.vitorpamplona.amethyst.ui.actions.toImmutableListOfLists
 import com.vitorpamplona.amethyst.ui.components.CreateTextWithEmoji
+import com.vitorpamplona.amethyst.ui.theme.StdButtonSizeModifier
 import com.vitorpamplona.amethyst.ui.theme.placeholderText
 
 @Composable
@@ -57,9 +56,6 @@ private fun UserNameDisplay(
     tags: ImmutableListOfLists<String>?,
     modifier: Modifier
 ) {
-    val context = LocalContext.current
-    val lifecycleOwner = LocalLifecycleOwner.current
-
     if (bestUserName != null && bestDisplayName != null) {
         CreateTextWithEmoji(
             text = bestDisplayName,
@@ -74,17 +70,7 @@ private fun UserNameDisplay(
             overflow = TextOverflow.Ellipsis,
             modifier = modifier
         )
-        IconButton(
-            onClick = { speak(bestDisplayName, context, lifecycleOwner) },
-            modifier = Modifier.size(20.dp)
-        ) {
-            Icon(
-                imageVector = Icons.Outlined.PlayCircle,
-                contentDescription = null,
-                modifier = Modifier.size(20.dp),
-                tint = MaterialTheme.colors.placeholderText
-            )
-        }
+        DrawPlayName(bestDisplayName)
     } else if (bestDisplayName != null) {
         CreateTextWithEmoji(
             text = bestDisplayName,
@@ -94,17 +80,7 @@ private fun UserNameDisplay(
             overflow = TextOverflow.Ellipsis,
             modifier = modifier
         )
-        IconButton(
-            onClick = { speak(bestDisplayName, context, lifecycleOwner) },
-            modifier = Modifier.size(20.dp)
-        ) {
-            Icon(
-                imageVector = Icons.Outlined.PlayCircle,
-                contentDescription = null,
-                modifier = Modifier.size(20.dp),
-                tint = MaterialTheme.colors.placeholderText
-            )
-        }
+        DrawPlayName(bestDisplayName)
     } else if (bestUserName != null) {
         CreateTextWithEmoji(
             text = remember { "@$bestUserName" },
@@ -114,17 +90,7 @@ private fun UserNameDisplay(
             overflow = TextOverflow.Ellipsis,
             modifier = modifier
         )
-        IconButton(
-            onClick = { speak(bestUserName, context, lifecycleOwner) },
-            modifier = Modifier.size(20.dp)
-        ) {
-            Icon(
-                imageVector = Icons.Outlined.PlayCircle,
-                contentDescription = null,
-                modifier = Modifier.size(20.dp),
-                tint = MaterialTheme.colors.placeholderText
-            )
-        }
+        DrawPlayName(bestUserName)
     } else {
         Text(
             npubDisplay,
@@ -136,6 +102,24 @@ private fun UserNameDisplay(
     }
 }
 
+@Composable
+fun DrawPlayName(name: String) {
+    val context = LocalContext.current
+    val lifecycleOwner = LocalLifecycleOwner.current
+
+    IconButton(
+        onClick = { speak(name, context, lifecycleOwner) },
+        modifier = StdButtonSizeModifier
+    ) {
+        Icon(
+            imageVector = Icons.Outlined.PlayCircle,
+            contentDescription = null,
+            modifier = StdButtonSizeModifier,
+            tint = MaterialTheme.colors.placeholderText
+        )
+    }
+}
+
 private fun speak(
     message: String,
     context: Context,
diff --git a/app/src/main/java/com/vitorpamplona/amethyst/ui/theme/Shape.kt b/app/src/main/java/com/vitorpamplona/amethyst/ui/theme/Shape.kt
index ff1c80d11..574ed5da0 100644
--- a/app/src/main/java/com/vitorpamplona/amethyst/ui/theme/Shape.kt
+++ b/app/src/main/java/com/vitorpamplona/amethyst/ui/theme/Shape.kt
@@ -1,7 +1,10 @@
 package com.vitorpamplona.amethyst.ui.theme
 
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.Shapes
+import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 
 val Shapes = Shapes(
@@ -15,3 +18,6 @@ val ButtonBorder = RoundedCornerShape(20.dp)
 
 val ChatBubbleShapeMe = RoundedCornerShape(15.dp, 15.dp, 3.dp, 15.dp)
 val ChatBubbleShapeThem = RoundedCornerShape(3.dp, 15.dp, 15.dp, 15.dp)
+
+val StdButtonSizeModifier = Modifier.size(20.dp)
+val StdHorzSpacer = Modifier.width(5.dp)