diff --git a/packages/component-faraday-ui/src/ManuscriptDetailsTop.js b/packages/component-faraday-ui/src/ManuscriptDetailsTop.js
index b8409fd1d38455ba1a356e5d715d3d002c8666e7..beb249fab4ffb295d9d9cf8c7530c255981a1897 100644
--- a/packages/component-faraday-ui/src/ManuscriptDetailsTop.js
+++ b/packages/component-faraday-ui/src/ManuscriptDetailsTop.js
@@ -1,29 +1,40 @@
 import React from 'react'
+import { get } from 'lodash'
 import {
   Row,
   Item,
+  Text,
   ActionLink,
   IconButton,
   DownloadZipFiles,
+  PreviewFile,
   ManuscriptVersion,
-  Text,
 } from 'pubsweet-component-faraday-ui'
 import { DateParser } from '@pubsweet/ui'
 
-const ManuscriptDetailsTop = ({ history, collection = {}, fragment = {} }) => (
+const ManuscriptDetailsTop = ({
+  history,
+  getSignedUrl,
+  collection = {},
+  fragment = {},
+}) => (
   <Row alignItems="center" mb={1}>
-    <Item alignItems="center" justify="flex-start">
+    <Item justify="flex-start">
       <ActionLink icon="arrow-left" onClick={() => history.push('/')}>
         Dashboard
       </ActionLink>
     </Item>
-    <Item alignItems="center" justify="flex-end">
+    <Item justify="flex-end">
+      <PreviewFile
+        file={get(fragment, 'files.manuscripts[0]', {})}
+        getSignedUrl={getSignedUrl}
+      />
       <DownloadZipFiles
         archiveName={`ID-${collection.customId}`}
         collectionId={collection.id}
         fragmentId={fragment.id}
       >
-        <IconButton icon="download" />
+        <IconButton icon="download" iconSize={2} mr={3} secondary />
       </DownloadZipFiles>
       <DateParser durationThreshold={0} timestamp={fragment.submitted || ''}>
         {timestamp => <Text mr={1}>Updated on {timestamp}</Text>}
diff --git a/packages/component-faraday-ui/src/PreviewFile.js b/packages/component-faraday-ui/src/PreviewFile.js
new file mode 100644
index 0000000000000000000000000000000000000000..0160f399096481ec2e82e4f810d7586c6e6358ca
--- /dev/null
+++ b/packages/component-faraday-ui/src/PreviewFile.js
@@ -0,0 +1,38 @@
+import React, { Fragment } from 'react'
+import { last } from 'lodash'
+import { withProps, withHandlers, compose } from 'recompose'
+
+import { IconButton } from './'
+import { withFilePreview } from './helpers'
+
+const hasPreview = (name = '') => {
+  const extension = last(name.split('.')).toLocaleLowerCase()
+  return ['pdf', 'png', 'jpg'].includes(extension)
+}
+
+const PreviewFile = ({ onPreview, hasPreview }) => (
+  <Fragment>
+    {hasPreview && (
+      <IconButton
+        icon="eye"
+        iconSize={2}
+        ml={1}
+        mr={1}
+        onClick={onPreview}
+        secondary
+      />
+    )}
+  </Fragment>
+)
+
+export default compose(
+  withFilePreview,
+  withProps(({ file: { name } }) => ({
+    hasPreview: hasPreview(name),
+  })),
+  withHandlers({
+    onPreview: ({ previewFile, file }) => () => {
+      typeof previewFile === 'function' && previewFile(file)
+    },
+  }),
+)(PreviewFile)
diff --git a/packages/component-faraday-ui/src/PreviewFile.md b/packages/component-faraday-ui/src/PreviewFile.md
new file mode 100644
index 0000000000000000000000000000000000000000..4bf363a9d882001409a5a754f456c43fcf0f622c
--- /dev/null
+++ b/packages/component-faraday-ui/src/PreviewFile.md
@@ -0,0 +1,7 @@
+Preview file in browser if possible
+
+```js
+const file = {};
+
+<PreviewFile file={file} />
+```
diff --git a/packages/component-faraday-ui/src/gridItems/Item.js b/packages/component-faraday-ui/src/gridItems/Item.js
index ff1e97565e920f624c7891ee064867cf61cc7425..282ec34e78496dc3e5296fb1039c4a8bf9792ff6 100644
--- a/packages/component-faraday-ui/src/gridItems/Item.js
+++ b/packages/component-faraday-ui/src/gridItems/Item.js
@@ -11,6 +11,7 @@ export default styled.div.attrs({
   flex: ${({ flex }) => (isNumber(flex) ? flex : 1)};
   flex-direction: ${({ vertical }) => (vertical ? 'column' : 'row')};
   justify-content: ${({ justify }) => justify || 'initial'};
-  align-items: ${({ alignItems }) => alignItems || 'flex-start'};
+  align-items: ${({ alignItems }) => alignItems || 'center'};
+
   ${marginHelper};
 `
diff --git a/packages/component-faraday-ui/src/index.js b/packages/component-faraday-ui/src/index.js
index 118583283e1f10934ff3fb596c01f9e3d60837c3..a8aafac48494030749f72d2e58619cf3108deb46 100644
--- a/packages/component-faraday-ui/src/index.js
+++ b/packages/component-faraday-ui/src/index.js
@@ -21,6 +21,7 @@ export { default as Tag } from './Tag'
 export { default as Text } from './Text'
 export { default as WizardAuthors } from './WizardAuthors'
 export { default as WizardFiles } from './WizardFiles'
+export { default as PreviewFile } from './PreviewFile'
 export { default as DownloadZipFiles } from './DownloadZipFiles'
 
 // Manuscript Details
diff --git a/packages/component-manuscript/src/components/ManuscriptLayout.js b/packages/component-manuscript/src/components/ManuscriptLayout.js
index f9a91d8c5239cdc03c6f55d7215f66c7611b0e5f..b35e7a4a187840f55b9a8102e9753d182266fbc7 100644
--- a/packages/component-manuscript/src/components/ManuscriptLayout.js
+++ b/packages/component-manuscript/src/components/ManuscriptLayout.js
@@ -6,6 +6,7 @@ import { Text, ManuscriptDetailsTop, Row } from 'pubsweet-component-faraday-ui'
 const ManuscriptLayout = ({
   journal,
   history,
+  getSignedUrl,
   currentUser,
   editorInChief,
   canMakeRevision,
@@ -20,6 +21,7 @@ const ManuscriptLayout = ({
         <ManuscriptDetailsTop
           collection={project}
           fragment={version}
+          getSignedUrl={getSignedUrl}
           history={history}
         />
         <Row justify="flex-start">Aici header</Row>
diff --git a/packages/components-faraday/src/components/Dashboard/DashboardFilters.js b/packages/components-faraday/src/components/Dashboard/DashboardFilters.js
index e6270636c733b30f9096973d68a63f7a354385eb..11218a836f82539b6ef3a973ece900618c67edd3 100644
--- a/packages/components-faraday/src/components/Dashboard/DashboardFilters.js
+++ b/packages/components-faraday/src/components/Dashboard/DashboardFilters.js
@@ -12,7 +12,7 @@ const DashboardFilters = ({
     <Text mr={1} pb={1} secondary>
       Filters
     </Text>
-    <Item flex={0} mr={1} vertical>
+    <Item alignItems="flex-start" flex={0} mr={1} vertical>
       <Label>Priority</Label>
       <Menu
         inline
@@ -21,7 +21,7 @@ const DashboardFilters = ({
         value={getDefaultFilterValue('priority')}
       />
     </Item>
-    <Item flex={0} vertical>
+    <Item alignItems="flex-start" flex={0} vertical>
       <Label>Order</Label>
       <Menu
         inline