diff --git a/packages/react/src/components/Attachments/AttachmentMetadata.js b/packages/react/src/components/Attachments/AttachmentMetadata.js
new file mode 100644
index 000000000..3e8aee462
--- /dev/null
+++ b/packages/react/src/components/Attachments/AttachmentMetadata.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import { ActionButton } from '../ActionButton';
+import { Box } from '../Box';
+
+const AttachmentMetadata = ({ attachment, url }) => {
+  const handleDownload = () => {
+    const anchor = document.createElement('a');
+    anchor.href = url;
+    anchor.download = attachment.title;
+
+    document.body.appendChild(anchor);
+    anchor.click();
+    document.body.removeChild(anchor);
+  };
+
+  return (
+    <>
+      <p style={{ margin: 0 }}>{attachment.description}</p>
+      <Box
+        style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}
+      >
+        <p style={{ margin: 0, color: 'grey' }}>{attachment.title}</p>
+        <ActionButton
+          ghost
+          icon="download"
+          size="small"
+          onClick={handleDownload}
+          style={{
+            marginLeft: '10px',
+            marginTop: '5px',
+            color: 'grey',
+          }}
+        />
+      </Box>
+    </>
+  );
+};
+
+export default AttachmentMetadata;
diff --git a/packages/react/src/components/Attachments/AudioAttachment.js b/packages/react/src/components/Attachments/AudioAttachment.js
index f2349ce39..fe1da9406 100644
--- a/packages/react/src/components/Attachments/AudioAttachment.js
+++ b/packages/react/src/components/Attachments/AudioAttachment.js
@@ -1,10 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Box } from '../Box';
+import AttachmentMetadata from './AttachmentMetadata';
 
 const AudioAttachment = ({ attachment, host }) => (
   <Box>
-    <p>{attachment?.description}</p>
+    <AttachmentMetadata
+      attachment={attachment}
+      url={host + attachment.audio_url}
+    />
     <audio src={host + attachment.audio_url} width="100%" controls />
   </Box>
 );
diff --git a/packages/react/src/components/Attachments/ImageAttachment.js b/packages/react/src/components/Attachments/ImageAttachment.js
index e3a650be8..7d356ba92 100644
--- a/packages/react/src/components/Attachments/ImageAttachment.js
+++ b/packages/react/src/components/Attachments/ImageAttachment.js
@@ -1,10 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Box } from '../Box';
+import AttachmentMetadata from './AttachmentMetadata';
 
 const ImageAttachment = ({ attachment, host }) => (
   <Box>
-    <p>{attachment?.description}</p>
+    <AttachmentMetadata
+      attachment={attachment}
+      url={host + attachment.image_url}
+    />
     <img
       src={host + attachment.image_url}
       style={{ maxWidth: '100%', objectFit: 'contain' }}
diff --git a/packages/react/src/components/Attachments/VideoAttachment.js b/packages/react/src/components/Attachments/VideoAttachment.js
index 304a3a4da..a98894fca 100644
--- a/packages/react/src/components/Attachments/VideoAttachment.js
+++ b/packages/react/src/components/Attachments/VideoAttachment.js
@@ -1,10 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Box } from '../Box';
+import AttachmentMetadata from './AttachmentMetadata';
 
 const VideoAttachment = ({ attachment, host }) => (
   <Box>
-    <p>{attachment?.description}</p>
+    <AttachmentMetadata
+      attachment={attachment}
+      url={host + attachment.video_url}
+    />
     <video width={300} controls>
       <source src={host + attachment.video_url} type={attachment.video_type} />
     </video>
diff --git a/packages/react/src/components/Icon/icons/Download.js b/packages/react/src/components/Icon/icons/Download.js
new file mode 100644
index 000000000..7127ed3e3
--- /dev/null
+++ b/packages/react/src/components/Icon/icons/Download.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const Download = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    {...props}
+  >
+    <path d="M13.0661854,13.8691048 L13.0661854,13.8691048 C13.3204823,14.1197896 13.3234104,14.5291581 13.0727256,14.783455 C13.0705612,14.7856506 13.0683811,14.7878308 13.0661854,14.7899952 L10.6543517,17.1675709 C10.2650167,17.5513757 9.63962467,17.5513757 9.25028971,17.1675709 L6.83845596,14.7899952 C6.58415908,14.5393104 6.58123091,14.1299419 6.83191572,13.875645 C6.83408017,13.8734494 6.83626031,13.8712692 6.83845596,13.8691048 L6.83845596,13.8691048 C7.09749077,13.6137493 7.51358056,13.6137493 7.77261537,13.8691048 L9.25137581,15.3268606 L9.25137581,10.0339893 C9.25137581,9.66917735 9.54711432,9.37343883 9.91192627,9.37343883 L9.91192627,9.37343883 C10.2767382,9.37343883 10.5724767,9.66917735 10.5724767,10.0339893 L10.5724767,15.4065019 L12.132026,13.8691048 C12.3910608,13.6137493 12.8071506,13.6137493 13.0661854,13.8691048 Z M14.9987456,5.44238699 C16.7017593,5.72193582 18,7.18117469 18,8.93932691 C18,10.897313 16.3898681,12.4845743 14.4036697,12.4845743 L12.8484335,12.4845743 C12.4888034,12.4845743 12.1972656,12.1930365 12.1972656,11.8334064 L12.1972656,11.8334064 C12.1972656,11.4737763 12.4888034,11.1822385 12.8484335,11.1822385 L14.4036697,11.1822385 C15.6602442,11.1822385 16.6788991,10.1780528 16.6788991,8.93932691 C16.6788991,7.70060103 15.6602442,6.69641529 14.4036697,6.69641529 L13.7431193,6.69641529 L13.7431193,6.0452474 C13.7431193,5.20611051 13.0530627,4.52585566 12.2018349,4.52585566 C11.8271022,4.52585566 11.4747517,4.6573116 11.1968202,4.89324889 L10.6727099,5.33816841 L10.2459585,4.80158937 C9.74752164,4.17487601 8.98815837,3.80233578 8.16513761,3.80233578 C6.70588984,3.80233578 5.52293578,4.96848696 5.52293578,6.40700734 C5.52293578,6.70702583 5.574134,6.99923245 5.67311153,7.27528801 L5.98438594,8.14345504 L4.86238532,8.14345504 C4.01115745,8.14345504 3.32110092,8.8237099 3.32110092,9.66284679 C3.32110092,10.5019837 4.01115745,11.1822385 4.86238532,11.1822385 L6.77545553,11.1822385 C7.13508563,11.1822385 7.42662342,11.4737763 7.42662342,11.8334064 L7.42662342,11.8334064 C7.42662342,12.1930365 7.13508563,12.4845743 6.77545553,12.4845743 L4.86238532,12.4845743 C3.28153356,12.4845743 2,11.2212439 2,9.66284679 C2,8.31713817 2.95559925,7.19145146 4.23434884,6.90925214 C4.21276266,6.74369761 4.20183486,6.57602338 4.20183486,6.40700734 C4.20183486,4.24922677 5.97626595,2.5 8.16513761,2.5 C9.18633879,2.5 10.1442246,2.88377985 10.8671476,3.5484842 C11.2727861,3.3374289 11.7287839,3.22351988 12.2018349,3.22351988 C13.5727949,3.22351988 14.718642,4.17365257 14.9987456,5.44238699 Z" />
+  </svg>
+);
+
+export default Download;
diff --git a/packages/react/src/components/Icon/icons/index.js b/packages/react/src/components/Icon/icons/index.js
index b66ac20cc..13cf98f97 100644
--- a/packages/react/src/components/Icon/icons/index.js
+++ b/packages/react/src/components/Icon/icons/index.js
@@ -39,6 +39,7 @@ import PinFilled from './PinFilled';
 import VideoRecorder from './VideoRecoder';
 import DisabledRecorder from './DisableRecorder';
 import Clipboard from './Clipboard';
+import Download from './Download';
 import At from './At';
 
 const icons = {
@@ -83,6 +84,7 @@ const icons = {
   'arrow-down': ArrowDown,
   'pin-filled': PinFilled,
   clipboard: Clipboard,
+  download: Download,
   at: At,
 };