diff --git a/app/javascript/widget/assets/scss/views/_conversation.scss b/app/javascript/widget/assets/scss/views/_conversation.scss
index dbf7f716f..7de312eac 100644
--- a/app/javascript/widget/assets/scss/views/_conversation.scss
+++ b/app/javascript/widget/assets/scss/views/_conversation.scss
@@ -51,7 +51,10 @@
 
   .has-attachment {
     overflow: hidden;
-    padding: 0;
+
+    :not([audio]) {
+      padding: 0;
+    }
 
     &.has-text {
       margin-top: $space-smaller;
@@ -213,11 +216,14 @@
   display: inline-block;
   font-size: $font-size-default;
   line-height: 1.5;
-  max-width: 100%;
   padding: $space-slab $space-normal;
   text-align: left;
   word-break: break-word;
 
+  :not([audio]) {
+    max-width: 100%;
+  }
+
   >a {
     color: $color-primary;
     word-break: break-all;
diff --git a/app/javascript/widget/components/AgentMessage.vue b/app/javascript/widget/components/AgentMessage.vue
index def769bc3..f3d499126 100755
--- a/app/javascript/widget/components/AgentMessage.vue
+++ b/app/javascript/widget/components/AgentMessage.vue
@@ -34,6 +34,9 @@
               :readable-time="readableTime"
               @error="onImageLoadError"
             />
+            <audio v-else-if="attachment.file_type === 'audio'" controls>
+              <source :src="attachment.data_url" />
+            </audio>
             <file-bubble v-else :url="attachment.data_url" />
           </div>
         </div>