diff --git a/packages/react/src/views/AttachmentHandler/Attachment.js b/packages/react/src/views/AttachmentHandler/Attachment.js
index bc07a740c..9e4b21cee 100644
--- a/packages/react/src/views/AttachmentHandler/Attachment.js
+++ b/packages/react/src/views/AttachmentHandler/Attachment.js
@@ -8,12 +8,17 @@ import VideoAttachment from './VideoAttachment';
 import TextAttachment from './TextAttachment';
 
 const Attachment = ({ attachment, host, type, variantStyles = {} }) => {
+  const author = {
+    authorIcon: attachment?.author_icon,
+    authorName: attachment?.author_name,
+  };
   if (attachment && attachment.audio_url) {
     return (
       <AudioAttachment
         attachment={attachment}
         host={host}
         variantStyles={variantStyles}
+        author={author}
       />
     );
   }
@@ -23,6 +28,7 @@ const Attachment = ({ attachment, host, type, variantStyles = {} }) => {
         attachment={attachment}
         host={host}
         variantStyles={variantStyles}
+        author={author}
       />
     );
   }
@@ -30,8 +36,10 @@ const Attachment = ({ attachment, host, type, variantStyles = {} }) => {
     return (
       <ImageAttachment
         attachment={attachment}
+        type={type}
         host={host}
         variantStyles={variantStyles}
+        author={author}
       />
     );
   }
@@ -44,6 +52,39 @@ const Attachment = ({ attachment, host, type, variantStyles = {} }) => {
       />
     );
   }
+  if (attachment && attachment.attachments[0]?.image_url) {
+    return (
+      <ImageAttachment
+        attachment={attachment.attachments[0]}
+        host={host}
+        type={attachment.attachments[0].type}
+        variantStyles={variantStyles}
+        author={author}
+      />
+    );
+  }
+  if (attachment && attachment.attachments[0]?.audio_url) {
+    return (
+      <AudioAttachment
+        attachment={attachment.attachments[0]}
+        host={host}
+        type={attachment.attachments[0].type}
+        variantStyles={variantStyles}
+        author={author}
+      />
+    );
+  }
+  if (attachment && attachment.attachments[0]?.video_url) {
+    return (
+      <VideoAttachment
+        attachment={attachment.attachments[0]}
+        host={host}
+        type={attachment.attachments[0].type}
+        variantStyles={variantStyles}
+        author={author}
+      />
+    );
+  }
   return (
     <Box
       css={css`
diff --git a/packages/react/src/views/AttachmentHandler/AudioAttachment.js b/packages/react/src/views/AttachmentHandler/AudioAttachment.js
index ce8481582..ce3cec6d1 100644
--- a/packages/react/src/views/AttachmentHandler/AudioAttachment.js
+++ b/packages/react/src/views/AttachmentHandler/AudioAttachment.js
@@ -1,18 +1,129 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import { Box } from '@embeddedchat/ui-elements';
+import { css } from '@emotion/react';
+import { Box, Avatar, useTheme } from '@embeddedchat/ui-elements';
 import AttachmentMetadata from './AttachmentMetadata';
+import RCContext from '../../context/RCInstance';
 
-const AudioAttachment = ({ attachment, host, variantStyles }) => (
-  <Box>
-    <AttachmentMetadata
-      attachment={attachment}
-      url={host + (attachment.title_url || attachment.audio_url)}
-      variantStyles={variantStyles}
-    />
-    <audio src={host + attachment.audio_url} width="100%" controls />
-  </Box>
-);
+const AudioAttachment = ({ attachment, host, type, author, variantStyles }) => {
+  const { RCInstance } = useContext(RCContext);
+  const { colors } = useTheme();
+  const getUserAvatarUrl = (icon) => {
+    const instanceHost = RCInstance.getHost();
+    const URL = `${instanceHost}${icon}`;
+    return URL;
+  };
+  const { authorIcon, authorName } = author;
+  return (
+    <Box>
+      <Box
+        css={[
+          css`
+            line-height: 0;
+            border-radius: inherit;
+            padding: 0.5rem;
+          `,
+          (type ? variantStyles.pinnedContainer : '') ||
+            css`
+              ${type === 'file' ? `border: 3px solid ${colors.border};` : ''}
+            `,
+        ]}
+      >
+        {type === 'file' ? (
+          <>
+            <Box
+              css={[
+                css`
+                  display: flex;
+                  gap: 0.3rem;
+                  align-items: center;
+                `,
+                variantStyles.textUserInfo,
+              ]}
+            >
+              <Avatar
+                url={getUserAvatarUrl(authorIcon)}
+                alt="avatar"
+                size="1.2em"
+              />
+              <Box>@{authorName}</Box>
+            </Box>
+          </>
+        ) : (
+          ''
+        )}
+        <AttachmentMetadata
+          attachment={attachment}
+          url={host + (attachment.title_url || attachment.audio_url)}
+          variantStyles={variantStyles}
+        />
+        <audio src={host + attachment.audio_url} width="100%" controls />
+
+        {attachment.attachments ? (
+          <Box>
+            <Box
+              css={[
+                css`
+                  line-height: 0;
+                  border-radius: inherit;
+                  padding: 0.5rem;
+                `,
+                (attachment.attachments[0].type
+                  ? variantStyles.pinnedContainer
+                  : variantStyles.quoteContainer) ||
+                  css`
+                    ${attachment.attachments[0].type === 'file'
+                      ? `border: 3px solid ${colors.border};`
+                      : ''}
+                  `,
+              ]}
+            >
+              {attachment.attachments[0].type === 'file' ? (
+                <>
+                  <Box
+                    css={[
+                      css`
+                        display: flex;
+                        gap: 0.3rem;
+                        align-items: center;
+                      `,
+                      variantStyles.textUserInfo,
+                    ]}
+                  >
+                    <Avatar
+                      url={getUserAvatarUrl(attachment.author_icon)}
+                      alt="avatar"
+                      size="1.2em"
+                    />
+                    <Box>@{attachment.author_name}</Box>
+                  </Box>
+                </>
+              ) : (
+                ''
+              )}
+              <AttachmentMetadata
+                attachment={attachment.attachments[0]}
+                url={
+                  host +
+                  (attachment.attachments[0].title_url ||
+                    attachment.attachments[0].audio_url)
+                }
+                variantStyles={variantStyles}
+              />
+              <audio
+                src={host + attachment.attachments[0].audio_url}
+                width="100%"
+                controls
+              />
+            </Box>
+          </Box>
+        ) : (
+          <></>
+        )}
+      </Box>
+    </Box>
+  );
+};
 
 export default AudioAttachment;
 
diff --git a/packages/react/src/views/AttachmentHandler/ImageAttachment.js b/packages/react/src/views/AttachmentHandler/ImageAttachment.js
index 893778256..2da14885e 100644
--- a/packages/react/src/views/AttachmentHandler/ImageAttachment.js
+++ b/packages/react/src/views/AttachmentHandler/ImageAttachment.js
@@ -1,32 +1,81 @@
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
 import { css } from '@emotion/react';
 import PropTypes from 'prop-types';
-import { Box } from '@embeddedchat/ui-elements';
+import { Box, Avatar, useTheme } from '@embeddedchat/ui-elements';
 import AttachmentMetadata from './AttachmentMetadata';
 import ImageGallery from '../ImageGallery/ImageGallery';
+import RCContext from '../../context/RCInstance';
 
-const ImageAttachment = ({ attachment, host, variantStyles = {} }) => {
+const ImageAttachment = ({
+  attachment,
+  host,
+  type,
+  author,
+  variantStyles = {},
+}) => {
+  const { RCInstance } = useContext(RCContext);
   const [showGallery, setShowGallery] = useState(false);
+  const getUserAvatarUrl = (icon) => {
+    const instanceHost = RCInstance.getHost();
+    const URL = `${instanceHost}${icon}`;
+    return URL;
+  };
   const extractIdFromUrl = (url) => {
     const match = url.match(/\/file-upload\/(.*?)\//);
     return match ? match[1] : null;
   };
 
+  const { theme } = useTheme();
+
+  const { authorIcon, authorName } = author;
+
   return (
     <Box css={variantStyles.imageAttachmentContainer}>
-      <AttachmentMetadata
-        attachment={attachment}
-        url={host + (attachment.title_link || attachment.image_url)}
-        variantStyles={variantStyles}
-      />
       <Box
         onClick={() => setShowGallery(true)}
-        css={css`
-          cursor: pointer;
-          border-radius: inherit;
-          line-height: 0;
-        `}
+        css={[
+          css`
+            cursor: pointer;
+            border-radius: inherit;
+            line-height: 0;
+            padding: 0.5rem;
+          `,
+          (type ? variantStyles.pinnedContainer : '') ||
+            css`
+              ${type === 'file'
+                ? `border: 2px solid ${theme.colors.border};`
+                : ''}
+            `,
+        ]}
       >
+        {type === 'file' ? (
+          <>
+            <Box
+              css={[
+                css`
+                  display: flex;
+                  gap: 0.3rem;
+                  align-items: center;
+                `,
+                variantStyles.textUserInfo,
+              ]}
+            >
+              <Avatar
+                url={getUserAvatarUrl(authorIcon)}
+                alt="avatar"
+                size="1.2em"
+              />
+              <Box>@{authorName}</Box>
+            </Box>
+          </>
+        ) : (
+          ''
+        )}
+        <AttachmentMetadata
+          attachment={attachment}
+          url={host + (attachment.title_link || attachment.image_url)}
+          variantStyles={variantStyles}
+        />
         <img
           src={host + attachment.image_url}
           style={{
@@ -36,6 +85,81 @@ const ImageAttachment = ({ attachment, host, variantStyles = {} }) => {
             borderBottomRightRadius: 'inherit',
           }}
         />
+        {attachment.attachments ? (
+          <Box css={variantStyles.imageAttachmentContainer}>
+            <Box
+              onClick={() => setShowGallery(true)}
+              css={[
+                css`
+                  cursor: pointer;
+                  border-radius: inherit;
+                  line-height: 0;
+                  padding: 0.5rem;
+                `,
+                (attachment.attachments[0].type
+                  ? variantStyles.pinnedContainer
+                  : variantStyles.quoteContainer) ||
+                  css`
+                    ${attachment.attachments[0].type === 'file'
+                      ? `border: 2px solid ${theme.colors.border};`
+                      : ''}
+                  `,
+              ]}
+            >
+              {attachment.attachments[0].type === 'file' ? (
+                <>
+                  <Box
+                    css={[
+                      css`
+                        display: flex;
+                        gap: 0.3rem;
+                        align-items: center;
+                      `,
+                      variantStyles.textUserInfo,
+                    ]}
+                  >
+                    <Avatar
+                      url={getUserAvatarUrl(attachment.author_icon)}
+                      alt="avatar"
+                      size="1.2em"
+                    />
+                    <Box>@{attachment.author_name}</Box>
+                  </Box>
+                </>
+              ) : (
+                ''
+              )}
+              <AttachmentMetadata
+                attachment={attachment.attachments[0]}
+                url={
+                  host +
+                  (attachment.attachments[0].title_link ||
+                    attachment.attachments[0].image_url)
+                }
+                variantStyles={variantStyles}
+              />
+              <img
+                src={host + attachment.attachments[0].image_url}
+                style={{
+                  maxWidth: '100%',
+                  objectFit: 'contain',
+                  borderBottomLeftRadius: 'inherit',
+                  borderBottomRightRadius: 'inherit',
+                }}
+              />
+            </Box>
+            {showGallery && (
+              <ImageGallery
+                currentFileId={extractIdFromUrl(
+                  attachment.attachments[0].title_link
+                )}
+                setShowGallery={setShowGallery}
+              />
+            )}
+          </Box>
+        ) : (
+          <></>
+        )}
       </Box>
       {showGallery && (
         <ImageGallery
diff --git a/packages/react/src/views/AttachmentHandler/TextAttachment.js b/packages/react/src/views/AttachmentHandler/TextAttachment.js
index ac631dfa0..b91acaa5d 100644
--- a/packages/react/src/views/AttachmentHandler/TextAttachment.js
+++ b/packages/react/src/views/AttachmentHandler/TextAttachment.js
@@ -67,7 +67,81 @@ const TextAttachment = ({ attachment, type, variantStyles = {} }) => {
           white-space: pre-line;
         `}
       >
-        {attachmentText}
+        {attachment?.text
+          ? attachment.text[0] === '['
+            ? attachment.text.match(/\n(.*)/)[1]
+            : attachment.text
+          : ''}
+        {attachment?.attachments && attachment.attachments.length > 0 ? (
+          <Box
+            css={[
+              css`
+                display: flex;
+                flex-direction: column;
+                letter-spacing: 0rem;
+                font-size: 0.875rem;
+                font-weight: 400;
+                word-break: break-word;
+                border-inline-start: 3px solid ${theme.colors.border};
+                margin-top: 0.75rem;
+                padding: 0.5rem;
+              `,
+              (attachment.attachments[0]?.type
+                ? variantStyles.pinnedContainer
+                : '') ||
+                css`
+                  ${!attachment.attachments[0]?.type
+                    ? `border: 2px solid ${theme.colors.border};`
+                    : ''}
+                `,
+              css`
+                ${variantStyles.name !== undefined &&
+                variantStyles.name.includes('bubble')
+                  ? `border-bottom-left-radius: 0.75rem; border-bottom-right-radius: 0.75rem`
+                  : ''}
+              `,
+            ]}
+          >
+            <Box
+              css={[
+                css`
+                  display: flex;
+                  gap: 0.3rem;
+                  align-items: center;
+                `,
+
+                variantStyles.textUserInfo,
+              ]}
+            >
+              {attachment.attachments[0]?.author_name && (
+                <>
+                  <Avatar
+                    url={getUserAvatarUrl(
+                      attachment.attachments[0]?.author_icon
+                    )}
+                    alt="avatar"
+                    size="1.2em"
+                  />
+                  <Box>@{attachment.attachments[0]?.author_name}</Box>
+                </>
+              )}
+            </Box>
+            <Box
+              css={css`
+                margin-top: 0.5rem;
+                white-space: pre-line;
+              `}
+            >
+              {attachment.attachments[0]?.text
+                ? attachment.attachments[0].text[0] === '['
+                  ? attachment.attachments[0].text.match(/\n(.*)/)[1]
+                  : attachment.attachments[0].text
+                : ''}
+            </Box>
+          </Box>
+        ) : (
+          <></>
+        )}
       </Box>
     </Box>
   );
diff --git a/packages/react/src/views/AttachmentHandler/VideoAttachment.js b/packages/react/src/views/AttachmentHandler/VideoAttachment.js
index 0472d34c2..074b1fd8f 100644
--- a/packages/react/src/views/AttachmentHandler/VideoAttachment.js
+++ b/packages/react/src/views/AttachmentHandler/VideoAttachment.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
-import { Box } from '@embeddedchat/ui-elements';
+import { Box, Avatar, useTheme } from '@embeddedchat/ui-elements';
 import AttachmentMetadata from './AttachmentMetadata';
+import RCContext from '../../context/RCInstance';
 
 const userAgentMIMETypeFallback = (type) => {
   const userAgent = navigator.userAgent.toLocaleLowerCase();
@@ -14,35 +15,154 @@ const userAgentMIMETypeFallback = (type) => {
   return type;
 };
 
-const VideoAttachment = ({ attachment, host, variantStyles = {} }) => (
-  <Box css={variantStyles.videoAttachmentContainer}>
-    <AttachmentMetadata
-      attachment={attachment}
-      url={host + (attachment.title_url || attachment.video_url)}
-      variantStyles={variantStyles}
-    />
-    <Box
-      css={css`
-        line-height: 0;
-        border-radius: inherit;
-      `}
-    >
-      <video
-        width={300}
-        controls
-        style={{
-          borderBottomLeftRadius: 'inherit',
-          borderBottomRightRadius: 'inherit',
-        }}
+const VideoAttachment = ({
+  attachment,
+  host,
+  type,
+  author,
+  variantStyles = {},
+}) => {
+  const { RCInstance } = useContext(RCContext);
+  const { theme } = useTheme();
+  const getUserAvatarUrl = (icon) => {
+    const instanceHost = RCInstance.getHost();
+    const URL = `${instanceHost}${icon}`;
+    return URL;
+  };
+  const { authorIcon, authorName } = author;
+  return (
+    <Box css={variantStyles.videoAttachmentContainer}>
+      <Box
+        css={[
+          css`
+            line-height: 0;
+            border-radius: inherit;
+            padding: 0.5rem;
+          `,
+          (type ? variantStyles.pinnedContainer : '') ||
+            css`
+              ${type === 'file'
+                ? `border: 3px solid ${theme.colors.border};`
+                : ''}
+            `,
+        ]}
       >
-        <source
-          src={host + attachment.video_url}
-          type={userAgentMIMETypeFallback(attachment.video_type)}
+        {type === 'file' ? (
+          <>
+            <Box
+              css={[
+                css`
+                  display: flex;
+                  gap: 0.3rem;
+                  align-items: center;
+                `,
+                variantStyles.textUserInfo,
+              ]}
+            >
+              <Avatar
+                url={getUserAvatarUrl(authorIcon)}
+                alt="avatar"
+                size="1.2em"
+              />
+              <Box>@{authorName}</Box>
+            </Box>
+          </>
+        ) : (
+          ''
+        )}
+        <AttachmentMetadata
+          attachment={attachment}
+          url={host + (attachment.title_url || attachment.video_url)}
+          variantStyles={variantStyles}
         />
-      </video>
+        <video
+          width={300}
+          controls
+          style={{
+            borderBottomLeftRadius: 'inherit',
+            borderBottomRightRadius: 'inherit',
+          }}
+        >
+          <source
+            src={host + attachment.video_url}
+            type={userAgentMIMETypeFallback(attachment.video_type)}
+          />
+        </video>
+        {attachment.attachments ? (
+          <Box css={variantStyles.videoAttachmentContainer}>
+            <Box
+              css={[
+                css`
+                  line-height: 0;
+                  border-radius: inherit;
+                  padding: 0.5rem;
+                `,
+                (attachment.attachments[0].type
+                  ? variantStyles.pinnedContainer
+                  : variantStyles.quoteContainer) ||
+                  css`
+                    ${type === 'file'
+                      ? `border: 3px solid ${theme.colors.border};`
+                      : ''}
+                  `,
+              ]}
+            >
+              {attachment.attachments[0].type === 'file' ? (
+                <>
+                  <Box
+                    css={[
+                      css`
+                        display: flex;
+                        gap: 0.3rem;
+                        align-items: center;
+                      `,
+                      variantStyles.textUserInfo,
+                    ]}
+                  >
+                    <Avatar
+                      url={getUserAvatarUrl(authorIcon)}
+                      alt="avatar"
+                      size="1.2em"
+                    />
+                    <Box>@{authorName}</Box>
+                  </Box>
+                </>
+              ) : (
+                ''
+              )}
+              <AttachmentMetadata
+                attachment={attachment.attachments[0]}
+                url={
+                  host +
+                  (attachment.attachments[0].title_url ||
+                    attachment.attachments[0].video_url)
+                }
+                variantStyles={variantStyles}
+              />
+              <video
+                width={300}
+                controls
+                style={{
+                  borderBottomLeftRadius: 'inherit',
+                  borderBottomRightRadius: 'inherit',
+                }}
+              >
+                <source
+                  src={host + attachment.attachments[0].video_url}
+                  type={userAgentMIMETypeFallback(
+                    attachment.attachments[0].video_type
+                  )}
+                />
+              </video>
+            </Box>
+          </Box>
+        ) : (
+          <></>
+        )}
+      </Box>
     </Box>
-  </Box>
-);
+  );
+};
 
 export default VideoAttachment;
 
diff --git a/packages/react/src/views/Message/BubbleVariant/Bubble.styles.js b/packages/react/src/views/Message/BubbleVariant/Bubble.styles.js
index 42f978f9e..5f87c0b5e 100644
--- a/packages/react/src/views/Message/BubbleVariant/Bubble.styles.js
+++ b/packages/react/src/views/Message/BubbleVariant/Bubble.styles.js
@@ -94,7 +94,7 @@ export const getBubbleStyles = (theme) => {
       overflow: hidden;
     `,
     pinnedContainer: css`
-      max-width: 80%;
+      max-width: 100%;
     `,
 
     quoteContainer: css`
@@ -112,7 +112,7 @@ export const getBubbleStyles = (theme) => {
     `,
 
     attachmentMetaContainer: css`
-      padding: 2.5% 2.5% 0;
+      padding: 2.5% 0 0;
     `,
 
     emojiPickerStyles: css`
@@ -172,7 +172,7 @@ export const getBubbleStylesMe = (theme) => {
 
     pinnedContainerMe: css`
       border-inline-start: none;
-      border-inline-end: 3px solid ${theme.colors.border};
+      border-inline-end: none;
     `,
 
     textUserInfoMe: css`
diff --git a/packages/react/src/views/QuoteMessage/QuoteMessage.js b/packages/react/src/views/QuoteMessage/QuoteMessage.js
index fab425eba..f472b3405 100644
--- a/packages/react/src/views/QuoteMessage/QuoteMessage.js
+++ b/packages/react/src/views/QuoteMessage/QuoteMessage.js
@@ -11,12 +11,13 @@ import {
 import RCContext from '../../context/RCInstance';
 import { useMessageStore } from '../../store';
 import getQuoteMessageStyles from './QuoteMessage.styles';
+import Attachment from '../AttachmentHandler/Attachment';
 
 const QuoteMessage = ({ className = '', style = {}, message }) => {
   const { RCInstance } = useContext(RCContext);
+  const instanceHost = RCInstance.getHost();
   const getUserAvatarUrl = (username) => {
-    const host = RCInstance.getHost();
-    const URL = `${host}/avatar/${username}`;
+    const URL = `${instanceHost}/avatar/${username}`;
     return URL;
   };
   const { theme } = useTheme();
@@ -24,6 +25,7 @@ const QuoteMessage = ({ className = '', style = {}, message }) => {
   const setQuoteMessage = useMessageStore((state) => state.setQuoteMessage);
 
   const { classNames, styleOverrides } = useComponentOverrides('QuoteMessage');
+
   return (
     <Box
       className={`ec-quote-msg ${className} ${classNames}`}
@@ -45,11 +47,59 @@ const QuoteMessage = ({ className = '', style = {}, message }) => {
         <Box>{format(new Date(message.ts), 'h:mm a')}</Box>
       </Box>
       <Box css={styles.message}>
-        {message.msg
-          ? message.msg
-          : `${message.file?.name} (${
-              message.file?.size ? (message.file.size / 1024).toFixed(2) : 0
-            } kB)`}
+        {message.file ? (
+          message.file.type.startsWith('image/') ? (
+            <div>
+              <img
+                src={`${instanceHost}/file-upload/${message.file._id}/${message.file.name}`}
+                alt={message.file.name}
+                style={{ maxWidth: '100px', maxHeight: '100px' }}
+              />
+              <div>{`${message.file.name} (${(message.file.size / 1024).toFixed(
+                2
+              )} kB)`}</div>
+            </div>
+          ) : message.file.type.startsWith('video/') ? (
+            <video controls style={{ maxWidth: '100%', maxHeight: '200px' }}>
+              <source
+                src={`${instanceHost}/file-upload/${message.file._id}/${message.file.name}`}
+                type={message.file.type}
+              />
+              Your browser does not support the video tag.
+            </video>
+          ) : message.file.type.startsWith('audio/') ? (
+            <audio controls style={{ maxWidth: '100%' }}>
+              <source
+                src={`${instanceHost}/file-upload/${message.file._id}/${message.file.name}`}
+                type={message.file.type}
+              />
+              Your browser does not support the audio element.
+            </audio>
+          ) : (
+            <Box css={styles.message}>
+              {message.msg
+                ? message.msg
+                : `${message.file?.name} (${
+                    message.file?.size
+                      ? (message.file.size / 1024).toFixed(2)
+                      : 0
+                  } kB)`}
+            </Box>
+          )
+        ) : message?.msg[0] === '[' ? (
+          message?.msg.match(/\n(.*)/)[1]
+        ) : (
+          message?.msg
+        )}
+        {message.attachments &&
+        message.attachments.length > 0 &&
+        message.attachments[0].attachments ? (
+          <Attachment
+            attachment={message.attachments[0]}
+            type={message.attachments[0].type}
+            host={instanceHost}
+          />
+        ) : null}
       </Box>
     </Box>
   );