diff --git a/assets/src/components/conversations/ChatMessageBox.tsx b/assets/src/components/conversations/ChatMessageBox.tsx
index 1c785a88f..32a747fc6 100644
--- a/assets/src/components/conversations/ChatMessageBox.tsx
+++ b/assets/src/components/conversations/ChatMessageBox.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {Box, Flex} from 'theme-ui';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
-import {MarkdownRenderer, Text} from '../common';
+import {colors, MarkdownRenderer, Text} from '../common';
 import {Attachment, Message, MessageSource} from '../../types';
 import {PaperClipOutlined} from '../icons';
 
@@ -36,20 +36,42 @@ const ChatMessageAttachment = ({
   color?: string;
 }) => {
   const {id, filename, file_url: fileUrl} = attachment;
+  const isImage =
+    filename.includes('.png') ||
+    filename.includes('jpeg') ||
+    filename.includes('.jpg');
 
   return (
-    <Box key={id}>
-      <PaperClipOutlined />{' '}
-      <a
-        href={fileUrl}
-        style={{
-          color,
-          textDecoration: 'underline',
-        }}
-      >
-        {filename}
-      </a>
-    </Box>
+    <Flex
+      sx={{
+        flexDirection: 'column',
+        backgroundColor: '#F5F5F5',
+        borderRadius: 3,
+      }}
+    >
+      {isImage && (
+        <img
+          src={fileUrl}
+          alt="display image"
+          style={{height: '100%', borderRadius: 3}}
+        />
+      )}
+      <Box>
+        <Flex pb={2} pt={2} pr={3}>
+          <a
+            href={fileUrl}
+            style={{
+              textDecoration: 'underline',
+              color: colors.primary,
+              backgroundColor: '#F5F5F5',
+              border: 'none',
+            }}
+          >
+            <PaperClipOutlined style={{color: '#7E7E7E'}} /> {filename}
+          </a>
+        </Flex>
+      </Box>
+    </Flex>
   );
 };
 
@@ -87,17 +109,60 @@ const ChatMessageBox = ({
   });
 
   return (
-    <Box sx={parsedSx}>
-      {subject && (
-        <Box pb={1} mb={2} sx={{borderBottom: '1px solid rgba(0,0,0,.06)'}}>
-          <Text className={className} type="secondary" style={{fontSize: 12}}>
-            {subject}
-          </Text>
-        </Box>
-      )}
+    <Box>
+      {body && (
+        <Box sx={parsedSx}>
+          {subject && (
+            <Box pb={1} mb={2} sx={{borderBottom: '1px solid rgba(0,0,0,.06)'}}>
+              <Text
+                className={className}
+                type="secondary"
+                style={{fontSize: 12}}
+              >
+                {subject}
+              </Text>
+            </Box>
+          )}
+          <MarkdownRenderer className={className} source={body} />
 
-      <MarkdownRenderer className={className} source={body} />
+          {formattedSource && (
+            <Flex
+              pt={1}
+              mt={2}
+              sx={{
+                borderTop: '1px solid rgba(0,0,0,.06)',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+              }}
+            >
+              <Text
+                className={className}
+                type="secondary"
+                style={{fontSize: 12, marginRight: 32}}
+              >
+                {createdAt}
+              </Text>
 
+              <Flex sx={{alignItems: 'center'}}>
+                {sourceIcon && (
+                  <img
+                    src={sourceIcon}
+                    alt={source}
+                    style={{height: 12, marginRight: 4}}
+                  />
+                )}
+                <Text
+                  className={className}
+                  type="secondary"
+                  style={{fontSize: 12}}
+                >
+                  Sent via {formattedSource}
+                </Text>
+              </Flex>
+            </Flex>
+          )}
+        </Box>
+      )}
       {attachments && attachments.length > 0 && (
         <Box mt={2} className={className}>
           {attachments.map((attachment) => {
@@ -111,39 +176,6 @@ const ChatMessageBox = ({
           })}
         </Box>
       )}
-
-      {formattedSource && (
-        <Flex
-          pt={1}
-          mt={2}
-          sx={{
-            borderTop: '1px solid rgba(0,0,0,.06)',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-          }}
-        >
-          <Text
-            className={className}
-            type="secondary"
-            style={{fontSize: 12, marginRight: 32}}
-          >
-            {createdAt}
-          </Text>
-
-          <Flex sx={{alignItems: 'center'}}>
-            {sourceIcon && (
-              <img
-                src={sourceIcon}
-                alt={source}
-                style={{height: 12, marginRight: 4}}
-              />
-            )}
-            <Text className={className} type="secondary" style={{fontSize: 12}}>
-              Sent via {formattedSource}
-            </Text>
-          </Flex>
-        </Flex>
-      )}
     </Box>
   );
 };