diff --git a/public/css/Room.css b/public/css/Room.css
index e893c883..b9803272 100644
--- a/public/css/Room.css
+++ b/public/css/Room.css
@@ -595,17 +595,23 @@ th {
 }
 
 /*--------------------------------------------------------------
-# Transcription room left side
+# Transcription room left side msg
 --------------------------------------------------------------*/
 
-.left-msg .msg-transcription-bubble {
+.msg-transcription {
+    display: flex;
+    align-items: flex-end;
+    margin-bottom: 10px;
+}
+
+.left-msg-transcription .msg-transcription-bubble {
     background: var(--left-msg-bg);
     border-bottom-left-radius: 0;
     color: #fff;
     width: var(--msger-bubble-width);
 }
 
-.left-msg .msg-transcription-img {
+.left-msg-transcription .msg-transcription-img {
     margin: 0px 5px 5px 0px;
 }
 
diff --git a/public/js/Transcription.js b/public/js/Transcription.js
index 3348f6fc..19e3532b 100644
--- a/public/js/Transcription.js
+++ b/public/js/Transcription.js
@@ -169,7 +169,7 @@ class Transcription {
         if (this.isHidden()) this.toggle();
 
         const msgHTML = `
-        <div class="msg left-msg">
+        <div class="msg-transcription left-msg-transcription">
             <img class="msg-transcription-img" src="${avatar_image}" />
             <div class="msg-transcription-bubble">
                 <div class="msg-transcription-info">