diff --git a/packages/react/src/views/Message/Message.styles.js b/packages/react/src/views/Message/Message.styles.js
index 7b2fc9c84..8eb39af73 100644
--- a/packages/react/src/views/Message/Message.styles.js
+++ b/packages/react/src/views/Message/Message.styles.js
@@ -185,6 +185,7 @@ export const getMessageHeaderStyles = (theme) => {
     header: css`
       display: flex;
       flex-direction: row;
+      flex-wrap: wrap;
       flex-grow: 0;
       flex-shrink: 1;
       min-width: 1px;
@@ -192,6 +193,10 @@ export const getMessageHeaderStyles = (theme) => {
       margin-bottom: 0.125rem;
       gap: 0.125rem;
       align-items: center;
+
+      @media (max-width: 480px) {
+        align-items: flex-start;
+      }
     `,
 
     name: css`
@@ -249,6 +254,11 @@ export const getMessageHeaderStyles = (theme) => {
       line-height: 1rem;
       flex-shrink: 0;
       margin-left: 0.25rem;
+
+      @media (max-width: 480px) {
+        flex-basis: 100%;
+        margin-left: 0;
+      }
     `,
     messageStatus: css`
       display: flex;