diff --git a/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js b/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js
index 390cab7b71..17e25c03db 100644
--- a/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js
+++ b/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { css } from '@emotion/react';
-import { ActionButton, Box } from '@embeddedchat/ui-elements';
+import { ActionButton, Box, Tooltip } from '@embeddedchat/ui-elements';
 import { Markdown } from '../Markdown';
 
 const AttachmentMetadata = ({
@@ -16,7 +16,6 @@ const AttachmentMetadata = ({
       const response = await fetch(url);
       const data = await response.blob();
       const downloadUrl = URL.createObjectURL(data);
-
       const anchor = document.createElement('a');
       anchor.href = downloadUrl;
       anchor.download = attachment.title || 'download';
@@ -36,6 +35,10 @@ const AttachmentMetadata = ({
         css`
           display: flex;
           flex-direction: column;
+          @media (max-width: 420px) {
+            flex-direction: column;
+            align-items: flex-start;
+          }
         `,
         variantStyles.attachmentMetaContainer,
       ]}
@@ -46,10 +49,16 @@ const AttachmentMetadata = ({
             ? [
                 css`
                   margin: 10px 0px;
+                  @media (max-width: 420px) {
+                    margin: 5px 0px;
+                  }
                 `,
               ]
             : css`
                 margin: -7px 0px;
+                @media (max-width: 420px) {
+                  margin: -5px 0px;
+                }
               `
         }
       >
@@ -64,47 +73,137 @@ const AttachmentMetadata = ({
           display: flex;
           flex-direction: row;
           align-items: center;
+          @media (max-width: 420px) {
+            flex-direction: column;
+            align-items: flex-start;
+          }
         `}
       >
-        <p
-          css={
-            attachment.description
-              ? [
-                  css`
-                    margin: 0px;
-                    font-size: 14px;
-                    opacity: 0.7;
-                  `,
-                ]
-              : css`
-                  margin: 22px 0 15px 0;
-                  font-size: 14px;
-                  opacity: 0.7;
-                `
-          }
-        >
-          {attachment.title}
-        </p>
-        <ActionButton
-          ghost
-          icon={isExpanded ? 'chevron-down' : 'chevron-left'}
-          size="small"
-          onClick={onExpandCollapseClick}
+        <Box
           css={css`
-            margin-left: 10px;
-            margin-top: ${attachment.description ? '3px' : '13px'};
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            @media (max-width: 420px) {
+              flex-direction: column;
+              align-items: flex-start;
+            }
           `}
-        />
-        <ActionButton
-          ghost
-          icon="download"
-          size="small"
-          onClick={handleDownload}
+        >
+          <Tooltip text={attachment.title} position="down">
+            <p
+              css={
+                attachment.description
+                  ? [
+                      css`
+                        margin: 3px 0 0 0;
+                        font-size: 12px;
+                        opacity: 0.7;
+                        @media (max-width: 420px) {
+                          margin: 8px 0 0 0;
+                        }
+                      `,
+                    ]
+                  : css`
+                      margin: 22px 0 15px 0;
+                      font-size: 12px;
+                      opacity: 0.7;
+                      @media (max-width: 420px) {
+                        margin: 10px 0 10px 0;
+                      }
+                    `
+              }
+            >
+              {attachment.title.length > 22
+                ? `${attachment.title.substring(0, 22)}...`
+                : attachment.title}
+            </p>
+          </Tooltip>
+          <Box
+            css={
+              attachment.description
+                ? [
+                    css`
+                      font-size: 12px;
+                      opacity: 0.7;
+                      margin-left: 3px;
+                      margin-top: 2px;
+                      @media (max-width: 420px) {
+                        display: none;
+                      }
+                    `,
+                  ]
+                : css`
+                    font-size: 12px;
+                    opacity: 0.7;
+                    margin-left: 3px;
+                    margin-top: 7px;
+                    @media (max-width: 420px) {
+                      margin-left: 0;
+                      margin-top: 5px;
+                    }
+                  `
+            }
+          >
+            (
+            {attachment.image_size
+              ? (attachment.image_size / 1024).toFixed(2)
+              : 0}{' '}
+            kB)
+          </Box>
+        </Box>
+        <Box
           css={css`
-            margin-left: 10px;
-            margin-top: 5px;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            @media (max-width: 420px) {
+              flex-direction: row;
+              align-items: flex-start;
+            }
           `}
-        />
+        >
+          <Box
+            css={css`
+              margin-left: 10px;
+              margin-top: ${attachment.description ? '3px' : '10px'};
+              @media (max-width: 420px) {
+                margin-left: 0;
+                margin-top: 5px;
+              }
+            `}
+          >
+            <Tooltip text={isExpanded ? 'Collapse' : 'Expand'} position="top">
+              <ActionButton
+                ghost
+                icon={isExpanded ? 'chevron-down' : 'chevron-left'}
+                size="small"
+                onClick={() => {
+                  onExpandCollapseClick();
+                }}
+              />
+            </Tooltip>
+          </Box>
+          <Box
+            css={css`
+              margin-left: 10px;
+              margin-top: 5px;
+              @media (max-width: 420px) {
+                margin-left: 0;
+                margin-top: 5px;
+              }
+            `}
+          >
+            <Tooltip text="Download" position="top">
+              <ActionButton
+                ghost
+                icon="download"
+                size="small"
+                onClick={handleDownload}
+              />
+            </Tooltip>
+          </Box>
+        </Box>
       </Box>
     </Box>
   );
diff --git a/packages/react/src/views/AttachmentHandler/AudioAttachment.js b/packages/react/src/views/AttachmentHandler/AudioAttachment.js
index 5caf16e760..867792b4f7 100644
--- a/packages/react/src/views/AttachmentHandler/AudioAttachment.js
+++ b/packages/react/src/views/AttachmentHandler/AudioAttachment.js
@@ -67,14 +67,22 @@ const AudioAttachment = ({
         ) : (
           ''
         )}
-        <AttachmentMetadata
-          attachment={attachment}
-          url={host + (attachment.title_url || attachment.audio_url)}
-          variantStyles={variantStyles}
-          msg={msg}
-          onExpandCollapseClick={toggleExpanded}
-          isExpanded={isExpanded}
-        />
+        <Box
+          css={css`
+            @media (max-width: 450px) {
+              margin-top: 0.4rem;
+            }
+          `}
+        >
+          <AttachmentMetadata
+            attachment={attachment}
+            url={host + (attachment.title_url || attachment.audio_url)}
+            variantStyles={variantStyles}
+            msg={msg}
+            onExpandCollapseClick={toggleExpanded}
+            isExpanded={isExpanded}
+          />
+        </Box>
         {isExpanded && (
           <audio
             src={host + attachment.audio_url}
diff --git a/packages/react/src/views/AttachmentHandler/ImageAttachment.js b/packages/react/src/views/AttachmentHandler/ImageAttachment.js
index 5f95829df0..84516ce65a 100644
--- a/packages/react/src/views/AttachmentHandler/ImageAttachment.js
+++ b/packages/react/src/views/AttachmentHandler/ImageAttachment.js
@@ -76,14 +76,23 @@ const ImageAttachment = ({
         ) : (
           ''
         )}
-        <AttachmentMetadata
-          attachment={attachment}
-          url={host + (attachment.title_link || attachment.image_url)}
-          variantStyles={variantStyles}
-          msg={msg}
-          onExpandCollapseClick={toggleExpanded}
-          isExpanded={isExpanded}
-        />
+        <Box
+          css={css`
+            align-items: center;
+            @media (max-width: 450px) {
+              margin-top: 0.4rem;
+            }
+          `}
+        >
+          <AttachmentMetadata
+            attachment={attachment}
+            url={host + (attachment.title_link || attachment.image_url)}
+            variantStyles={variantStyles}
+            msg={msg}
+            onExpandCollapseClick={toggleExpanded}
+            isExpanded={isExpanded}
+          />
+        </Box>
         {isExpanded && (
           <Box onClick={() => setShowGallery(true)}>
             <img
diff --git a/packages/react/src/views/AttachmentHandler/VideoAttachment.js b/packages/react/src/views/AttachmentHandler/VideoAttachment.js
index 5c29bc507b..7bad3a90c6 100644
--- a/packages/react/src/views/AttachmentHandler/VideoAttachment.js
+++ b/packages/react/src/views/AttachmentHandler/VideoAttachment.js
@@ -45,6 +45,9 @@ const VideoAttachment = ({
             line-height: 0;
             border-radius: inherit;
             padding: 0.5rem;
+            @media (max-width: 450px) {
+              padding: 0.3rem;
+            }
           `,
           (type ? variantStyles.pinnedContainer : '') ||
             css`
@@ -62,6 +65,9 @@ const VideoAttachment = ({
                   display: flex;
                   gap: 0.3rem;
                   align-items: center;
+                  @media (max-width: 450px) {
+                    align-items: flex-start;
+                  }
                 `,
                 variantStyles.textUserInfo,
               ]}
@@ -71,20 +77,36 @@ const VideoAttachment = ({
                 alt="avatar"
                 size="1.2em"
               />
-              <Box>@{authorName}</Box>
+              <Box
+                css={css`
+                  @media (max-width: 450px) {
+                    margin-top: 0.5rem;
+                  }
+                `}
+              >
+                @{authorName}
+              </Box>
             </Box>
           </>
         ) : (
           ''
         )}
-        <AttachmentMetadata
-          attachment={attachment}
-          url={host + (attachment.title_url || attachment.video_url)}
-          variantStyles={variantStyles}
-          msg={msg}
-          onExpandCollapseClick={toggleExpanded}
-          isExpanded={isExpanded}
-        />
+        <Box
+          css={css`
+            @media (max-width: 450px) {
+              margin-top: 0.4rem;
+            }
+          `}
+        >
+          <AttachmentMetadata
+            attachment={attachment}
+            url={host + (attachment.title_url || attachment.video_url)}
+            variantStyles={variantStyles}
+            msg={msg}
+            onExpandCollapseClick={toggleExpanded}
+            isExpanded={isExpanded}
+          />
+        </Box>
         {isExpanded && (
           <video
             controls
@@ -110,6 +132,9 @@ const VideoAttachment = ({
                     line-height: 0;
                     border-radius: inherit;
                     padding: 0.5rem;
+                    @media (max-width: 450px) {
+                      padding: 0.3rem;
+                    }
                   `,
                   (nestedAttachment.type
                     ? variantStyles.pinnedContainer
@@ -129,6 +154,10 @@ const VideoAttachment = ({
                           display: flex;
                           gap: 0.3rem;
                           align-items: center;
+                          @media (max-width: 450px) {
+                            flex-direction: column;
+                            align-items: flex-start;
+                          }
                         `,
                         variantStyles.textUserInfo,
                       ]}
@@ -153,11 +182,12 @@ const VideoAttachment = ({
                   variantStyles={variantStyles}
                 />
                 <video
-                  width={300}
+                  width="100%"
                   controls
                   style={{
                     borderBottomLeftRadius: 'inherit',
                     borderBottomRightRadius: 'inherit',
+                    maxWidth: '300px',
                   }}
                 >
                   <source