diff --git a/packages/component-faraday-ui/src/ReviewersTable.md b/packages/component-faraday-ui/src/ReviewersTable.md
index dbab1725a9cb9c5744460e1f95dcd814a378b7fa..a6646bf04b38919a484dff9281bd372600c8722c 100644
--- a/packages/component-faraday-ui/src/ReviewersTable.md
+++ b/packages/component-faraday-ui/src/ReviewersTable.md
@@ -1,5 +1,18 @@
 A list of reviewers.
 
 ```js
-<ReviewersTable />
+const invitations = [
+  {
+    "id": "0078cc96-6daf-4171-8e57-dc84d85600ee",
+    "role": "reviewer",
+    "type": "invitation",
+    "userId": "9ac5b5b5-252c-4933-9e66-72ec7c644a5c",
+    "hasAnswer": true,
+    "invitedOn": 1538461178587,
+    "isAccepted": true,
+    "respondedOn": 1538461646415
+  }
+];
+
+<ReviewersTable invitations={invitations} />
 ```
diff --git a/packages/component-faraday-ui/src/contextualBoxes/ReviewerDetails.js b/packages/component-faraday-ui/src/contextualBoxes/ReviewerDetails.js
index a8d9cb78c62816e917d57682d0ec6c687ade5a83..153dbfa0108685f4d864da15558aa52b36652347 100644
--- a/packages/component-faraday-ui/src/contextualBoxes/ReviewerDetails.js
+++ b/packages/component-faraday-ui/src/contextualBoxes/ReviewerDetails.js
@@ -7,6 +7,7 @@ import { withProps, compose } from 'recompose'
 
 import {
   Tag,
+  Text,
   Tabs,
   marginHelper,
   ContextualBox,
@@ -22,11 +23,11 @@ const ReviewerDetails = ({
   journal,
   reports,
   fragment,
-  hasReports,
   invitations,
   previewFile,
   currentUser,
   downloadFile,
+  canSeeReports,
   onInviteReviewer,
   onResendReviewerInvite,
   onRevokeReviewerInvite,
@@ -48,7 +49,7 @@ const ReviewerDetails = ({
             >
               <H4>Reviewer Details</H4>
             </TabButton>
-            {hasReports && (
+            {canSeeReports && (
               <TabButton
                 ml={1}
                 mr={1}
@@ -74,9 +75,12 @@ const ReviewerDetails = ({
                 />
               </Fragment>
             )}
-            {hasReports &&
+            {canSeeReports &&
               selectedTab === 1 && (
                 <Fragment>
+                  {reports.length === 0 && (
+                    <Text align="center">No reports submitted yet.</Text>
+                  )}
                   {reports.map((report, index) => (
                     <ReviewerReport
                       journal={journal}
@@ -100,7 +104,7 @@ const ReviewerDetails = ({
 export default compose(
   withFilePreview,
   withFileDownload,
-  withProps(({ invitations, reviewerReports = [], currentUser }) => ({
+  withProps(({ invitations = [], reviewerReports = [], currentUser }) => ({
     token: get(currentUser, 'token', ''),
     invitations: invitations.map(i => ({
       ...i,
@@ -108,10 +112,9 @@ export default compose(
     })),
     reports: reviewerReports.filter(r => r.submittedOn),
   })),
-  withProps(({ reports, currentUser }) => ({
-    hasReports:
-      reports.length !== 0 &&
-      (get(currentUser, 'isEIC', false) || get(currentUser, 'isHE', false)),
+  withProps(({ currentUser }) => ({
+    canSeeReports:
+      get(currentUser, 'isEIC', false) || get(currentUser, 'isHE', false),
   })),
 )(ReviewerDetails)
 
@@ -147,6 +150,11 @@ const TabsHeader = styled.div`
 `
 
 const TabContent = styled.div`
+  align-items: stretch;
   background-color: ${th('colorBackgroundHue2')};
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  min-height: calc(${th('gridUnit')} * 10);
 `
 // #endregion