diff --git a/packages/component-faraday-ui/src/manuscriptDetails/ManuscriptFileList.js b/packages/component-faraday-ui/src/manuscriptDetails/ManuscriptFileList.js
index 3d139b5c248697eef3af4f9e47aa167485d8b7df..1e2661c510f0245c54c264b2471cd5c163276120 100644
--- a/packages/component-faraday-ui/src/manuscriptDetails/ManuscriptFileList.js
+++ b/packages/component-faraday-ui/src/manuscriptDetails/ManuscriptFileList.js
@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react'
-import { Text, FileItem, Item, Row } from 'pubsweet-component-faraday-ui'
+import { ManuscriptFileSection } from 'pubsweet-component-faraday-ui'
 
 import { withFilePreview, withFileDownload } from '../helpers'
 
@@ -10,84 +10,27 @@ const ManuscriptFileList = ({
   ...rest
 }) => (
   <Fragment>
-    {!!manuscripts.length && (
-      <Fragment>
-        <Text labelLine mb={1} mt={1}>
-          MAIN MANUSCRIPT
-        </Text>
-        <Row justify="flex-start" mb={1}>
-          {manuscripts.map(file => (
-            <Item
-              alignItems="flex-start"
-              flex={0}
-              key={file.id}
-              mr={1}
-              vertical
-            >
-              <FileItem
-                item={file}
-                onDownload={downloadFile}
-                onPreview={previewFile}
-                {...rest}
-                mb={1}
-              />
-            </Item>
-          ))}
-        </Row>
-      </Fragment>
-    )}
-    {!!supplementary.length && (
-      <Fragment>
-        <Text labelLine mb={1} mt={2}>
-          SUPPLEMENTARY FILES
-        </Text>
-        <Row justify="flex-start" mb={1}>
-          {supplementary.map(file => (
-            <Item
-              alignItems="flex-start"
-              flex={0}
-              key={file.id}
-              mr={1}
-              vertical
-            >
-              <FileItem
-                item={file}
-                onDownload={downloadFile}
-                onPreview={previewFile}
-                {...rest}
-                mb={1}
-              />
-            </Item>
-          ))}
-        </Row>
-      </Fragment>
-    )}
-    {!!coverLetter.length && (
-      <Fragment>
-        <Text labelLine mb={1} mt={2}>
-          COVER LETTER
-        </Text>
-        <Row justify="flex-start" mb={1}>
-          {coverLetter.map(file => (
-            <Item
-              alignItems="flex-start"
-              flex={0}
-              key={file.id}
-              mr={1}
-              vertical
-            >
-              <FileItem
-                item={file}
-                onDownload={downloadFile}
-                onPreview={previewFile}
-                {...rest}
-                mb={1}
-              />
-            </Item>
-          ))}
-        </Row>
-      </Fragment>
-    )}
+    <ManuscriptFileSection
+      label="MAIN MANUSCRIPT"
+      list={manuscripts}
+      onDownload={downloadFile}
+      onPreview={previewFile}
+      {...rest}
+    />
+    <ManuscriptFileSection
+      label="SUPPLEMENTARY FILES"
+      list={supplementary}
+      onDownload={downloadFile}
+      onPreview={previewFile}
+      {...rest}
+    />
+    <ManuscriptFileSection
+      label="COVER LETTER"
+      list={coverLetter}
+      onDownload={downloadFile}
+      onPreview={previewFile}
+      {...rest}
+    />
   </Fragment>
 )
 
diff --git a/packages/component-faraday-ui/src/manuscriptDetails/ManuscriptFileSection.js b/packages/component-faraday-ui/src/manuscriptDetails/ManuscriptFileSection.js
new file mode 100644
index 0000000000000000000000000000000000000000..8b0976d54a175c262de3880e92097ee97306adb1
--- /dev/null
+++ b/packages/component-faraday-ui/src/manuscriptDetails/ManuscriptFileSection.js
@@ -0,0 +1,29 @@
+import React, { Fragment } from 'react'
+import { Text, FileItem, Item, Row } from 'pubsweet-component-faraday-ui'
+
+const ManuscriptFileSection = ({ list = [], label = '', ...rest }) => (
+  <Fragment>
+    {!!list.length && (
+      <Fragment>
+        <Text labelLine mb={1} mt={1}>
+          {label}
+        </Text>
+        <Row justify="flex-start" mb={1}>
+          {list.map(file => (
+            <Item
+              alignItems="flex-start"
+              flex={0}
+              key={file.id}
+              mr={1}
+              vertical
+            >
+              <FileItem item={file} {...rest} mb={1} />
+            </Item>
+          ))}
+        </Row>
+      </Fragment>
+    )}
+  </Fragment>
+)
+
+export default ManuscriptFileSection
diff --git a/packages/component-faraday-ui/src/manuscriptDetails/ManuscriptFileSection.md b/packages/component-faraday-ui/src/manuscriptDetails/ManuscriptFileSection.md
new file mode 100644
index 0000000000000000000000000000000000000000..5435a77649f0bc8ef5210ef6f16e6f398d2a5324
--- /dev/null
+++ b/packages/component-faraday-ui/src/manuscriptDetails/ManuscriptFileSection.md
@@ -0,0 +1,28 @@
+Manuscript file section that appears in ManuscriptFilesList
+
+```js
+const files = {
+  supplementary: [
+    {
+      id:
+        '8dca903a-05b9-45ab-89b9-9cb99a9a29c6/02db6c5e-2938-45ac-a5ee-67ae63919bb2',
+      name: 'Supplementary File 1.jpg',
+      size: 59621,
+      originalName: 'Supplementary File 1.jpg',
+    },
+    {
+      id:
+        '8dca903a-05b9-45ab-89b9-9cb99a9a29c6/5e69e3d9-7f9d-4e8d-b649-6e6a45658d75',
+      name: 'Supplementary File 2.docx',
+      size: 476862,
+      originalName: 'Supplementary File 2.docx',
+    },
+  ]
+}
+;<ManuscriptFileSection
+  list={files.supplementary}
+  label="Supplementary files"
+  onDownload={() => alert('downloading')}
+  onPreview={() => alert('No preview')}
+/>
+```
diff --git a/packages/component-faraday-ui/src/manuscriptDetails/index.js b/packages/component-faraday-ui/src/manuscriptDetails/index.js
index ec99d00ceb081f970da76a66fc4c210aa693a3a6..1f43bd9bb59cc32c19b99e28f8dde8a56d3c6ff4 100644
--- a/packages/component-faraday-ui/src/manuscriptDetails/index.js
+++ b/packages/component-faraday-ui/src/manuscriptDetails/index.js
@@ -3,4 +3,5 @@ export { default as ManuscriptVersion } from './ManuscriptVersion'
 export { default as ManuscriptHeader } from './ManuscriptHeader'
 export { default as ManuscriptMetadata } from './ManuscriptMetadata'
 export { default as ManuscriptFileList } from './ManuscriptFileList'
+export { default as ManuscriptFileSection } from './ManuscriptFileSection'
 export { default as ManuscriptAssignHE } from './ManuscriptAssignHE'