diff --git a/packages/react/src/views/AttachmentHandler/AudioAttachment.js b/packages/react/src/views/AttachmentHandler/AudioAttachment.js
index 867792b4f..8489b3d5e 100644
--- a/packages/react/src/views/AttachmentHandler/AudioAttachment.js
+++ b/packages/react/src/views/AttachmentHandler/AudioAttachment.js
@@ -39,7 +39,8 @@ const AudioAttachment = ({
           (type ? variantStyles.pinnedContainer : '') ||
             css`
               ${type === 'file'
-                ? `border: 3px solid ${theme.colors.border};`
+                ? `border-inline-start: 2px solid ${theme.colors.border};
+                   background: ${theme.colors.primaryForeground};`
                 : ''}
             `,
         ]}
@@ -61,7 +62,7 @@ const AudioAttachment = ({
                 alt="avatar"
                 size="1.2em"
               />
-              <Box>@{authorName}</Box>
+              <Box>{authorName}</Box>
             </Box>
           </>
         ) : (
@@ -106,7 +107,8 @@ const AudioAttachment = ({
                     : variantStyles.quoteContainer) ||
                     css`
                       ${nestedAttachment.type === 'file'
-                        ? `border: 3px solid ${theme.colors.border};`
+                        ? `border-inline-start: 2px solid ${theme.colors.border};
+                           background: ${theme.colors.primaryForeground};`
                         : ''}
                     `,
                 ]}
@@ -128,7 +130,7 @@ const AudioAttachment = ({
                         alt="avatar"
                         size="1.2em"
                       />
-                      <Box>@{nestedAttachment.author_name}</Box>
+                      <Box>{nestedAttachment.author_name}</Box>
                     </Box>
                   </>
                 ) : (
diff --git a/packages/react/src/views/AttachmentHandler/ImageAttachment.js b/packages/react/src/views/AttachmentHandler/ImageAttachment.js
index 84516ce65..231cdde53 100644
--- a/packages/react/src/views/AttachmentHandler/ImageAttachment.js
+++ b/packages/react/src/views/AttachmentHandler/ImageAttachment.js
@@ -48,7 +48,8 @@ const ImageAttachment = ({
           (type ? variantStyles.pinnedContainer : '') ||
             css`
               ${type === 'file'
-                ? `border: 2px solid ${theme.colors.border};`
+                ? `border-inline-start: 2px solid ${theme.colors.border};
+                 background: ${theme.colors.primaryForeground};`
                 : ''}
             `,
         ]}
@@ -70,7 +71,7 @@ const ImageAttachment = ({
                 alt="avatar"
                 size="1.2em"
               />
-              <Box>@{authorName}</Box>
+              <Box>{authorName}</Box>
             </Box>
           </>
         ) : (
@@ -123,7 +124,8 @@ const ImageAttachment = ({
                     : variantStyles.quoteContainer) ||
                     css`
                       ${nestedAttachment.attachments[0].type === 'file'
-                        ? `border: 2px solid ${theme.colors.border};`
+                        ? `border-inline-start: 2px solid ${theme.colors.border};
+                         background: ${theme.colors.primaryForeground};`
                         : ''}
                     `,
                 ]}
@@ -145,7 +147,7 @@ const ImageAttachment = ({
                         alt="avatar"
                         size="1.2em"
                       />
-                      <Box>@{nestedAttachment.author_name}</Box>
+                      <Box>{nestedAttachment.author_name}</Box>
                     </Box>
                   </>
                 ) : (
diff --git a/packages/react/src/views/AttachmentHandler/TextAttachment.js b/packages/react/src/views/AttachmentHandler/TextAttachment.js
index 73387c741..af57ed90e 100644
--- a/packages/react/src/views/AttachmentHandler/TextAttachment.js
+++ b/packages/react/src/views/AttachmentHandler/TextAttachment.js
@@ -57,12 +57,13 @@ const FileAttachment = ({
             border-radius: 4px;
             line-height: 0;
             padding: 0.5rem;
-            background: ${theme.colors.background};
+            background: ${theme.colors.primaryForeground};
+            border-inline-start: 2px solid ${theme.colors.border};
           `,
           (type ? variantStyles.pinnedContainer : '') ||
             css`
               ${type === 'file'
-                ? `border: 2px solid ${theme.colors.border};`
+                ? `border-inline-start: 3px solid ${theme.colors.border};`
                 : ''}
             `,
         ]}
@@ -83,89 +84,7 @@ const FileAttachment = ({
               alt="avatar"
               size="1.2em"
             />
-            <Box>@{attachment?.author_name}</Box>
-          </Box>
-        )}
-
-        {!attachment?.text && !attachment?.attachments && (
-          <AttachmentMetadata
-            attachment={attachment}
-            url={host + attachment.title_link}
-            variantStyles={variantStyles}
-            msg={msg}
-            onExpandCollapseClick={toggleExpanded}
-            isExpanded={isExpanded}
-          />
-        )}
-        {isExpanded && (attachment?.title_link || attachment?.text) && (
-          <Box
-            css={css`
-              margin-top: 0.5rem;
-              white-space: pre-line;
-              background: ${theme.colors.background};
-              padding: 8px 12px;
-              border-radius: 4px;
-              border: 1px solid ${theme.colors.border};
-              line-height: normal;
-            `}
-          >
-            {attachment?.text ? (
-              attachment.text[0] === '[' ? (
-                attachment.text.match(/\n(.*)/)?.[1] || ''
-              ) : (
-                <Markdown
-                  body={attachment.text}
-                  md={parse(attachment?.text)}
-                  isReaction={false}
-                />
-              )
-            ) : !attachment.attachments ? (
-              <Box
-                css={css`
-                  display: flex;
-                  align-items: center;
-                  margin-top: 0.5rem;
-                  background: ${theme.colors.background};
-                  padding: 8px 12px;
-                  border-radius: 4px;
-                  gap: 8px;
-                  border: 1px solid ${theme.colors.border};
-                `}
-              >
-                <Icon name="file" size="40px" />
-                <Box
-                  css={css`
-                    display: flex;
-                    flex-direction: column;
-                    gap: 2px;
-                    line-height: normal;
-                  `}
-                >
-                  <a
-                    href={host + attachment.title_link}
-                    download={attachment.title_link_download}
-                    css={css`
-                      text-decoration: none;
-                      font-size: 0.875rem;
-                      &:hover {
-                        text-decoration: underline;
-                      }
-                    `}
-                  >
-                    {attachment.title}
-                  </a>
-                  <Box
-                    css={css`
-                      font-size: 0.75rem;
-                    `}
-                  >
-                    {getFileSizeWithFormat(attachment.size, attachment.format)}
-                  </Box>
-                </Box>
-              </Box>
-            ) : (
-              ''
-            )}
+            <Box>{attachment?.author_name}</Box>
           </Box>
         )}
         {attachment?.attachments &&
@@ -180,14 +99,16 @@ const FileAttachment = ({
                   font-size: 0.875rem;
                   font-weight: 400;
                   word-break: break-word;
-                  border-inline-start: 3px solid ${theme.colors.border};
+                  background: ${theme.colors.primaryForeground};
+                  border-inline-start: 2px solid ${theme.colors.border};
                   margin-top: 0.75rem;
+                  margin-inline-start: 1rem;
                   padding: 0.5rem;
                 `,
                 (nestedAttachment?.type ? variantStyles.pinnedContainer : '') ||
                   css`
                     ${!attachment?.type
-                      ? `border: 2px solid ${theme.colors.border};`
+                      ? `border-inline-start: 2px solid ${theme.colors.border};`
                       : ''}
                   `,
                 css`
@@ -216,7 +137,7 @@ const FileAttachment = ({
                       alt="avatar"
                       size="1.2em"
                     />
-                    <Box>@{nestedAttachment?.author_name}</Box>
+                    <Box>{nestedAttachment?.author_name}</Box>
                   </>
                 )}
               </Box>
@@ -252,7 +173,7 @@ const FileAttachment = ({
                         display: flex;
                         align-items: center;
                         margin-top: 0.5rem;
-                        background: ${theme.colors.background};
+                        background: ${theme.colors.primaryForeground};
                         padding: 8px 12px;
                         border-radius: 4px;
                         gap: 8px;
@@ -298,6 +219,86 @@ const FileAttachment = ({
               )}
             </Box>
           ))}
+
+        {!attachment?.text && !attachment?.attachments && (
+          <AttachmentMetadata
+            attachment={attachment}
+            url={host + attachment.title_link}
+            variantStyles={variantStyles}
+            msg={msg}
+            onExpandCollapseClick={toggleExpanded}
+            isExpanded={isExpanded}
+          />
+        )}
+        {isExpanded && (attachment?.title_link || attachment?.text) && (
+          <Box
+            css={css`
+              margin-top: 0.5rem;
+              white-space: pre-line;
+              background: ${theme.colors.primaryForeground};
+              padding: 8px 12px;
+              line-height: normal;
+            `}
+          >
+            {attachment?.text ? (
+              attachment.text[0] === '[' ? (
+                attachment.text.match(/\n(.*)/)?.[1] || ''
+              ) : (
+                <Markdown
+                  body={attachment.text}
+                  md={parse(attachment?.text)}
+                  isReaction={false}
+                />
+              )
+            ) : !attachment.attachments ? (
+              <Box
+                css={css`
+                  display: flex;
+                  align-items: center;
+                  margin-top: 0.5rem;
+                  background: ${theme.colors.primaryForeground};
+                  padding: 8px 12px;
+                  border-radius: 4px;
+                  gap: 8px;
+                  border: 1px solid ${theme.colors.border};
+                `}
+              >
+                <Icon name="file" size="40px" />
+                <Box
+                  css={css`
+                    display: flex;
+                    flex-direction: column;
+                    gap: 2px;
+                    line-height: normal;
+                  `}
+                >
+                  <a
+                    href={host + attachment.title_link}
+                    download={attachment.title_link_download}
+                    css={css`
+                      text-decoration: none;
+                      font-size: 0.875rem;
+                      &:hover {
+                        text-decoration: underline;
+                      }
+                    `}
+                  >
+                    {attachment.title}
+                  </a>
+                  <Box
+                    css={css`
+                      font-size: 0.75rem;
+                    `}
+                  >
+                    {getFileSizeWithFormat(attachment.size, attachment.format)}
+                  </Box>
+                </Box>
+              </Box>
+            ) : (
+              ''
+            )}
+          </Box>
+        )}
       </Box>
     </Box>
   );
diff --git a/packages/react/src/views/AttachmentHandler/VideoAttachment.js b/packages/react/src/views/AttachmentHandler/VideoAttachment.js
index 7bad3a90c..c8493a32f 100644
--- a/packages/react/src/views/AttachmentHandler/VideoAttachment.js
+++ b/packages/react/src/views/AttachmentHandler/VideoAttachment.js
@@ -52,7 +52,8 @@ const VideoAttachment = ({
           (type ? variantStyles.pinnedContainer : '') ||
             css`
               ${type === 'file'
-                ? `border: 3px solid ${theme.colors.border};`
+                ? `border-inline-start: 2px solid ${theme.colors.border};
+                 background: ${theme.colors.primaryForeground};`
                 : ''}
             `,
         ]}
@@ -84,7 +85,7 @@ const VideoAttachment = ({
                   }
                 `}
               >
-                @{authorName}
+                {authorName}
               </Box>
             </Box>
           </>
@@ -141,7 +142,8 @@ const VideoAttachment = ({
                     : variantStyles.quoteContainer) ||
                     css`
                       ${type === 'file'
-                        ? `border: 3px solid ${theme.colors.border};`
+                        ? `border-inline-start: 2px solid ${theme.colors.border};
+                           background: ${theme.colors.primaryForeground};`
                         : ''}
                     `,
                 ]}
@@ -167,7 +169,7 @@ const VideoAttachment = ({
                         alt="avatar"
                         size="1.2em"
                       />
-                      <Box>@{authorName}</Box>
+                      <Box>{authorName}</Box>
                     </Box>
                   </>
                 ) : (
diff --git a/packages/react/src/views/Message/Message.js b/packages/react/src/views/Message/Message.js
index 355cde9b4..b1e5b5c71 100644
--- a/packages/react/src/views/Message/Message.js
+++ b/packages/react/src/views/Message/Message.js
@@ -273,16 +273,16 @@ const Message = ({
               >
                 {message.attachments && message.attachments.length > 0 ? (
                   <>
-                    <Markdown
-                      body={message}
-                      md={message.md}
-                      isReaction={false}
-                    />
                     <Attachments
                       attachments={message.attachments}
                       variantStyles={variantStyles}
                       msg={message}
                     />
+                    <Markdown
+                      body={message}
+                      md={message.md}
+                      isReaction={false}
+                    />
                   </>
                 ) : (
                   <Markdown body={message} md={message.md} isReaction={false} />
diff --git a/packages/react/src/views/QuoteMessage/QuoteMessage.js b/packages/react/src/views/QuoteMessage/QuoteMessage.js
index 989c4887a..9bdb988c0 100644
--- a/packages/react/src/views/QuoteMessage/QuoteMessage.js
+++ b/packages/react/src/views/QuoteMessage/QuoteMessage.js
@@ -59,6 +59,18 @@ const QuoteMessage = ({ className = '', style = {}, message }) => {
         <Box>{format(new Date(message.ts), 'h:mm a')}</Box>
       </Box>
       <Box css={styles.message}>
+        {message.attachments &&
+          message.attachments.length > 0 &&
+          message.msg &&
+          message.msg[0] === '[' &&
+          message.attachments.map((attachment, index) => (
+            <Attachment
+              key={index}
+              attachment={attachment}
+              type={attachment.type}
+              host={instanceHost}
+            />
+          ))}
         {message.file ? (
           message.file.type.startsWith('image/') ? (
             <div>
@@ -112,18 +124,6 @@ const QuoteMessage = ({ className = '', style = {}, message }) => {
         ) : (
           <Markdown body={message} md={message.md} isReaction={false} />
         )}
-        {message.attachments &&
-          message.attachments.length > 0 &&
-          message.msg &&
-          message.msg[0] === '[' &&
-          message.attachments.map((attachment, index) => (
-            <Attachment
-              key={index}
-              attachment={attachment}
-              type={attachment.type}
-              host={instanceHost}
-            />
-          ))}
       </Box>
     </Box>
   );
diff --git a/packages/react/src/views/QuoteMessage/QuoteMessage.styles.js b/packages/react/src/views/QuoteMessage/QuoteMessage.styles.js
index 61c5c8d05..e752b8989 100644
--- a/packages/react/src/views/QuoteMessage/QuoteMessage.styles.js
+++ b/packages/react/src/views/QuoteMessage/QuoteMessage.styles.js
@@ -10,7 +10,6 @@ const getQuoteMessageStyles = (theme) => {
       color: ${theme.colors.foreground};
       padding: 0.5rem;
       z-index: 1200;
-      border: 1px solid ${theme.colors.border};
       border-radius: ${theme.radius};
       max-width: 100%;
       box-sizing: border-box;