diff --git a/packages/component-faraday-ui/src/PublonsTable.js b/packages/component-faraday-ui/src/PublonsTable.js
index 13b395298181a88c645ebd7d27df94c3dfd30991..b3026109d7f1b5a809d236a4730d81f5f16240a1 100644
--- a/packages/component-faraday-ui/src/PublonsTable.js
+++ b/packages/component-faraday-ui/src/PublonsTable.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { Fragment } from 'react'
 import styled from 'styled-components'
 import { th } from '@pubsweet/ui-toolkit'
 import { Button, Spinner } from '@pubsweet/ui'
@@ -7,15 +7,10 @@ import { compose, withHandlers, withProps } from 'recompose'
 
 import { Label, OpenModal, Text, withFetching } from '../'
 
-const PublonsTable = ({
-  reviewers,
-  onInviteReviewer,
-  setFetching,
-  isFetching,
-  isPublonsFetching,
-}) =>
-  (isPublonsFetching && <Spinner />) ||
-  (reviewers.length > 0 && (
+const TableView = ({ reviewers, onInviteReviewer, setFetching, isFetching }) =>
+  reviewers.length === 0 ? (
+    <Text align="center">No suggestions yet.</Text>
+  ) : (
     <Table>
       <thead>
         <tr>
@@ -62,7 +57,11 @@ const PublonsTable = ({
         ))}
       </tbody>
     </Table>
-  ))
+  )
+
+const PublonsTable = ({ publonsFetching, ...rest }) => (
+  <Fragment>{publonsFetching ? <Spinner /> : <TableView {...rest} />}</Fragment>
+)
 
 export default compose(
   withFetching,
@@ -70,8 +69,14 @@ export default compose(
     reviewers,
   })),
   withHandlers({
-    onInviteReviewer: ({ onInviteReviwer }) => (reviewer, modalProps) => {
-      onInviteReviwer(reviewer, modalProps)
+    onInviteReviewer: ({ onInvite }) => (reviewer, modalProps) => {
+      const newReviewer = {
+        email: reviewer.email,
+        role: 'reviewer',
+        firstName: reviewer.name,
+        lastName: '',
+      }
+      onInvite(newReviewer, modalProps)
     },
   }),
 )(PublonsTable)
diff --git a/packages/component-faraday-ui/src/contextualBoxes/ReviewerDetails.js b/packages/component-faraday-ui/src/contextualBoxes/ReviewerDetails.js
index 27658fcfcc4f852e281b2043612eda0dd5efa1b1..ddb7ff15a773c53000bb554cc82323bcebf9ed95 100644
--- a/packages/component-faraday-ui/src/contextualBoxes/ReviewerDetails.js
+++ b/packages/component-faraday-ui/src/contextualBoxes/ReviewerDetails.js
@@ -26,11 +26,12 @@ const ReviewerDetails = ({
   fragment,
   invitations,
   publons,
-  isPublonsFetching,
+  isFetching,
   previewFile,
   downloadFile,
   canInviteReviewers,
   onInviteReviewer,
+  onInvitePublonReviewer,
   onResendReviewerInvite,
   onRevokeReviewerInvite,
   canViewReviewersDetails,
@@ -90,15 +91,11 @@ const ReviewerDetails = ({
                 </Fragment>
               )}
               {selectedTab === 1 && (
-                <Fragment>
-                  {publons.length === 0 && (
-                    <Text align="center">No suggestions yet.</Text>
-                  )}
-                  <PublonsTable
-                    isPublonsFetching={isPublonsFetching}
-                    reviewers={publons}
-                  />
-                </Fragment>
+                <PublonsTable
+                  onInvite={onInvitePublonReviewer}
+                  publonsFetching={isFetching}
+                  reviewers={publons}
+                />
               )}
               {selectedTab === 2 && (
                 <Fragment>
diff --git a/packages/component-manuscript/src/components/ManuscriptLayout.js b/packages/component-manuscript/src/components/ManuscriptLayout.js
index 4eca664f9b5ae203a5d247fd1d01a584ba0dc5e3..dfddb60c0cb449890f932338c0846b13ccfa44d8 100644
--- a/packages/component-manuscript/src/components/ManuscriptLayout.js
+++ b/packages/component-manuscript/src/components/ManuscriptLayout.js
@@ -57,7 +57,6 @@ const ManuscriptLayout = ({
   toggleReviewerResponse,
   invitationsWithReviewers,
   publonReviewers,
-  isPublonsFetching,
   reviewerResponseExpanded,
   pendingOwnRecommendation,
   toggleReviewerRecommendations,
@@ -179,7 +178,7 @@ const ManuscriptLayout = ({
             fragment={fragment}
             getSignedUrl={getSignedUrl}
             invitations={invitationsWithReviewers}
-            isPublonsFetching={isPublonsFetching}
+            isFetching={isFetching.publonsFetching}
             journal={journal}
             onInvitePublonReviewer={onInvitePublonReviewer}
             onInviteReviewer={onInviteReviewer}
diff --git a/packages/component-manuscript/src/components/ManuscriptPage.js b/packages/component-manuscript/src/components/ManuscriptPage.js
index 1d28fc98bfb3c890629463f578c33bc3c5e3b65d..92b574e7b45b117680a6397bca4fc3ac3bb6f4ab 100644
--- a/packages/component-manuscript/src/components/ManuscriptPage.js
+++ b/packages/component-manuscript/src/components/ManuscriptPage.js
@@ -61,7 +61,12 @@ import {
 } from 'pubsweet-component-faraday-ui'
 
 import ManuscriptLayout from './ManuscriptLayout'
-import { parseEicDecision, parseSearchParams, redirectToError } from './utils'
+import {
+  parseEicDecision,
+  parseSearchParams,
+  redirectToError,
+  handlePublons,
+} from './utils'
 import {
   canAssignHE,
   selectFetching,
@@ -139,6 +144,7 @@ export default compose(
         pendingHEInvitation,
         pendingOwnRecommendation,
         pendingReviewerInvitation,
+        isFetching,
       },
     ) => ({
       currentUser: {
@@ -163,6 +169,7 @@ export default compose(
       },
       isFetching: {
         editorsFetching: selectFetching(state),
+        publonsFetching: isFetching,
       },
       formValues: {
         eicDecision: getFormValues('eic-decision')(state),
@@ -336,17 +343,19 @@ export default compose(
           handleError(setModalError)(err)
         })
     },
-    onInvitePublonReviewer: ({
-      collection,
+    onResendReviewerInvite: ({
       fragment,
+      collection,
       fetchUpdatedCollection,
-    }) => (values, { hideModal, setModalError, setFetching }) => {
+    }) => (email, { hideModal, setFetching, setModalError }) => {
       setFetching(true)
       inviteReviewer({
-        reviewerData: values,
+        reviewerData: {
+          email,
+          role: 'reviewer',
+        },
         fragmentId: fragment.id,
         collectionId: collection.id,
-        isPublon: true,
       })
         .then(() => {
           setFetching(false)
@@ -358,17 +367,14 @@ export default compose(
           handleError(setModalError)(err)
         })
     },
-    onResendReviewerInvite: ({
+    onRevokeReviewerInvite: ({
       fragment,
       collection,
       fetchUpdatedCollection,
-    }) => (email, { hideModal, setFetching, setModalError }) => {
+    }) => (invitationId, { hideModal, setFetching, setModalError }) => {
       setFetching(true)
-      inviteReviewer({
-        reviewerData: {
-          email,
-          role: 'reviewer',
-        },
+      revokeReviewer({
+        invitationId,
         fragmentId: fragment.id,
         collectionId: collection.id,
       })
@@ -382,21 +388,31 @@ export default compose(
           handleError(setModalError)(err)
         })
     },
-    onRevokeReviewerInvite: ({
-      fragment,
+  }),
+  withHandlers({
+    onInvitePublonReviewer: ({
       collection,
+      fragment,
       fetchUpdatedCollection,
-    }) => (invitationId, { hideModal, setFetching, setModalError }) => {
+      setPublons,
+      setFetching: setListFetching,
+    }) => (values, { hideModal, setModalError, setFetching }) => {
       setFetching(true)
-      revokeReviewer({
-        invitationId,
+      inviteReviewer({
+        reviewerData: values,
         fragmentId: fragment.id,
         collectionId: collection.id,
+        isPublon: true,
       })
         .then(() => {
           setFetching(false)
           hideModal()
           fetchUpdatedCollection()
+          handlePublons({
+            fragmentId: fragment.id,
+            setPublons,
+            setFetching: setListFetching,
+          })
         })
         .catch(err => {
           setFetching(false)
@@ -420,12 +436,11 @@ export default compose(
     toggleReviewerRecommendations: toggle,
     reviewerRecommendationExpanded: expanded,
   })),
-  withProps(({ currentUser, submittedOwnRecommendation, isFetching }) => ({
+  withProps(({ currentUser, submittedOwnRecommendation }) => ({
     getSignedUrl,
     shouldReview:
       get(currentUser, 'isReviewer', false) &&
       isUndefined(submittedOwnRecommendation),
-    isPublonFetching: isFetching,
   })),
   lifecycle({
     componentDidMount() {
@@ -445,7 +460,6 @@ export default compose(
           permissions: { canInviteReviewers },
         },
         setFetching,
-        isFetching,
       } = this.props
 
       if (hasManuscriptFailure) {
@@ -468,12 +482,7 @@ export default compose(
       )
 
       if (canInviteReviewers) {
-        setFetching({ isFetching: true })
-        console.log(isFetching)
-        apiGet(`/fragments/${fragmentId}/publons`).then(res => {
-          setFetching({ isFetching: false })
-          setPublons(res)
-        })
+        handlePublons({ fragmentId, setPublons, setFetching })
       }
 
       if (isInvitedHE) {
diff --git a/packages/component-manuscript/src/components/utils.js b/packages/component-manuscript/src/components/utils.js
index 4a3a4edef0f9f15156c27517ca4c0577ffd6b608..4f3b76680cb4eff0714bee57a96fef7f5a1d9649 100644
--- a/packages/component-manuscript/src/components/utils.js
+++ b/packages/component-manuscript/src/components/utils.js
@@ -13,6 +13,7 @@ import { change as changeForm } from 'redux-form'
 
 import { actions } from 'pubsweet-client/src'
 import { handleError } from 'pubsweet-component-faraday-ui'
+import { get as apiGet } from 'pubsweet-client/src/helpers/api'
 
 import {
   autosaveRequest,
@@ -303,3 +304,15 @@ export const parseEicDecision = ({ decision, message }) => ({
     },
   ],
 })
+
+// handle publons
+export const getPublons = fragmentId =>
+  apiGet(`/fragments/${fragmentId}/publons`)
+
+export const handlePublons = ({ fragmentId, setPublons, setFetching }) => {
+  setFetching(true)
+  getPublons(fragmentId).then(res => {
+    setPublons(res)
+    setFetching(false)
+  })
+}