diff --git a/frontend/src/components/LazyMedia.jsx b/frontend/src/components/LazyMedia.jsx
index 29db039..06a440e 100644
--- a/frontend/src/components/LazyMedia.jsx
+++ b/frontend/src/components/LazyMedia.jsx
@@ -299,6 +299,7 @@ function LazyMedia({ messageId, mediaType, className, alt = "MMS attachment" })
                 controls
                 src={src}
                 className="audio-player"
+                style={{ width: '100%' }}
               />
             </div>
           )}
diff --git a/frontend/src/components/MessageThread.jsx b/frontend/src/components/MessageThread.jsx
index 396f4d3..262f907 100644
--- a/frontend/src/components/MessageThread.jsx
+++ b/frontend/src/components/MessageThread.jsx
@@ -581,7 +581,7 @@ function MessageThread({ conversation, startDate, endDate }) {
                   key={message.id}
                   className={`d-flex ${isSent ? 'justify-content-end' : 'justify-content-start'}`}
                 >
-                  <div style={{ maxWidth: '70%' }}>
+                  <div style={message.media_type?.startsWith('audio/') ? { width: '90%' } : { maxWidth: '70%' }}>
                     {/* Sender label for received messages in group conversations */}
                     {showSenderLabel && (
                       <div className="small text-muted mb-1 ms-2" style={{ fontSize: '0.7rem' }}>