diff --git a/packages/component-modal/src/components/index.js b/packages/component-modal/src/components/index.js
index 724e8d8878f79f7754077b39dda7a1105632eebb..6ff437ff222422f7218b9872f3ebc7662483caf2 100644
--- a/packages/component-modal/src/components/index.js
+++ b/packages/component-modal/src/components/index.js
@@ -1,3 +1,4 @@
 export { default as withModal } from './withModal'
 export { default as SuccessModal } from './SuccessModal'
 export { default as ConfirmationModal } from './ConfirmationModal'
+export { withModal2 } from './withModal'
diff --git a/packages/component-modal/src/components/withModal.js b/packages/component-modal/src/components/withModal.js
index 59f223682beb21dd050dffc597bfb9f8e33bede3..60eaf034fac97351d7326340bb1384c908fde3ac 100644
--- a/packages/component-modal/src/components/withModal.js
+++ b/packages/component-modal/src/components/withModal.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import { omit } from 'lodash'
 import { connect } from 'react-redux'
+import { compose } from 'recompose'
 
 import Modal from './Modal'
 import { showModal, hideModal, setModalError } from '../redux/modal'
@@ -17,6 +18,47 @@ const mapDispatch = modalKey => (dispatch, propss) => ({
   setModalError: errorMessage => dispatch(setModalError(errorMessage)),
 })
 
+const mapDispatch2 = (dispatch, props) => ({
+  hideModal: () => dispatch(hideModal()),
+  showModal: (modalProps = {}) =>
+    dispatch(showModal(props.modalKey, modalProps)),
+  setModalError: errorMessage => dispatch(setModalError(errorMessage)),
+})
+
+export const withModal2 = mapperFn => BaseComponent =>
+  compose(connect(mapState, mapDispatch2))(baseProps => {
+    const { modalComponent: Component, overlayColor } = mapperFn(baseProps)
+    const {
+      hideModal,
+      modalProps,
+      modalError,
+      modalsVisibility,
+      modalKey,
+      ...rest
+    } = baseProps
+    return (
+      <React.Fragment>
+        {modalsVisibility[modalKey] && (
+          <Modal
+            {...modalProps}
+            component={Component}
+            hideModal={hideModal}
+            modalError={modalError}
+            overlayColor={overlayColor}
+            setModalError={setModalError}
+            showModal={showModal}
+          />
+        )}
+        <BaseComponent
+          hideModal={hideModal}
+          setModalError={setModalError}
+          showModal={showModal}
+          {...rest}
+        />
+      </React.Fragment>
+    )
+  })
+
 const withModal = ({
   modalKey,
   modalComponent: Component,
diff --git a/packages/components-faraday/src/components/Dashboard/DashboardCard.js b/packages/components-faraday/src/components/Dashboard/DashboardCard.js
index 620eff5a3247918d251e468cb38f8d67356fc813..17a97a943b9a19c70491cc1c0fb5aefbf1a666ed 100644
--- a/packages/components-faraday/src/components/Dashboard/DashboardCard.js
+++ b/packages/components-faraday/src/components/Dashboard/DashboardCard.js
@@ -140,7 +140,10 @@ const DashboardCard = ({
               {renderHandlingEditorRow()}
             </LeftDetails>
           </Bottom>
-          <InviteReviewers project={project} />
+          <InviteReviewers
+            modalKey={`invite-reviewers-${project.id}`}
+            project={project}
+          />
         </DetailsView>
       )}
     </Card>
diff --git a/packages/components-faraday/src/components/Reviewers/InviteReviewers.js b/packages/components-faraday/src/components/Reviewers/InviteReviewers.js
index a23d2bca2584eae4cf4d8b6e1f7a32d6ecdece2d..c4238c7f7cb81023019a9035793f85000a56ae23 100644
--- a/packages/components-faraday/src/components/Reviewers/InviteReviewers.js
+++ b/packages/components-faraday/src/components/Reviewers/InviteReviewers.js
@@ -3,8 +3,8 @@ import { Icon, Button, th } from '@pubsweet/ui'
 import styled, { css, withTheme } from 'styled-components'
 import { compose, withHandlers, lifecycle, withState } from 'recompose'
 import {
-  withModal,
   ConfirmationModal,
+  withModal2,
 } from 'pubsweet-component-modal/src/components'
 
 import { ReviewerForm, ReviewersList } from './'
@@ -69,10 +69,9 @@ const ModalSwitcher = ({ type, ...rest }) => {
 }
 
 export default compose(
-  withModal({
-    modalKey: 'invite-reviewers',
+  withModal2(props => ({
     modalComponent: ModalSwitcher,
-  }),
+  })),
   withHandlers({
     showInviteModal: ({ showModal, hideModal, project, reviewers }) => () => {
       showModal({