diff --git a/packages/component-manuscript/src/components/ReviewerReportForm.js b/packages/component-manuscript/src/components/ReviewerReportForm.js
index 366f86896edb1a0a7f18c6e92500ba562e8fd45f..946bdb61278e7c2f535cb63a450b158beff505c8 100644
--- a/packages/component-manuscript/src/components/ReviewerReportForm.js
+++ b/packages/component-manuscript/src/components/ReviewerReportForm.js
@@ -35,7 +35,7 @@ import {
 } from 'pubsweet-components-faraday/src/components/Files'
 
 import {
-  withModal2,
+  withModal,
   ConfirmationModal,
 } from 'pubsweet-component-modal/src/components'
 import {
@@ -231,7 +231,7 @@ export default compose(
   withProps(({ review = {}, formValues = {} }) => ({
     initialValues: merge(parseReviewResponseToForm(review), formValues),
   })),
-  withModal2(props => ({
+  withModal(props => ({
     modalComponent: ModalWrapper,
   })),
   withHandlers({
@@ -354,10 +354,10 @@ const ActionButton = styled(Button)`
   align-items: center;
   background-color: ${th('colorPrimary')};
   color: ${th('colorTextReverse')};
+  height: calc(${th('subGridUnit')} * 5);
   display: flex;
   padding: calc(${th('subGridUnit')} / 2) calc(${th('subGridUnit')});
   text-align: center;
-  height: calc(${th('subGridUnit')} * 5);
   text-transform: uppercase;
 `
 // #endregion
diff --git a/packages/component-modal/src/components/index.js b/packages/component-modal/src/components/index.js
index 6ff437ff222422f7218b9872f3ebc7662483caf2..724e8d8878f79f7754077b39dda7a1105632eebb 100644
--- a/packages/component-modal/src/components/index.js
+++ b/packages/component-modal/src/components/index.js
@@ -1,4 +1,3 @@
 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 9bd24e9007db25f6ac73965aa6a99655df672827..18f16ebcb917ffc7242b4242c6676fb8a127c771 100644
--- a/packages/component-modal/src/components/withModal.js
+++ b/packages/component-modal/src/components/withModal.js
@@ -12,21 +12,15 @@ const mapState = state => ({
   modalError: state.modal.error,
 })
 
-const mapDispatch = modalKey => (dispatch, propss) => ({
-  hideModal: () => dispatch(hideModal()),
-  showModal: (modalProps = {}) => dispatch(showModal(modalKey, modalProps)),
-  setModalError: errorMessage => dispatch(setModalError(errorMessage)),
-})
-
-const mapDispatch2 = (dispatch, props) => ({
+const mapDispatch = (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 withModal = mapperFn => BaseComponent =>
+  compose(connect(mapState, mapDispatch))(baseProps => {
     const { modalComponent: Component, overlayColor } = mapperFn(baseProps)
     const {
       hideModal,
@@ -60,42 +54,4 @@ export const withModal2 = mapperFn => BaseComponent =>
     )
   })
 
-const withModal = ({
-  modalKey,
-  modalComponent: Component,
-  overlayColor,
-  ...rest
-}) => WrappedComponent =>
-  connect(mapState, mapDispatch(modalKey))(
-    ({
-      modalsVisibility,
-      modalProps,
-      modalError,
-      hideModal,
-      showModal,
-      setModalError,
-      ...rest
-    }) => (
-      <React.Fragment>
-        {modalsVisibility[modalKey] && (
-          <Modal
-            {...modalProps}
-            component={Component}
-            hideModal={hideModal}
-            modalError={modalError}
-            overlayColor={overlayColor}
-            setModalError={setModalError}
-            showModal={showModal}
-          />
-        )}
-        <WrappedComponent
-          hideModal={hideModal}
-          setModalError={setModalError}
-          showModal={showModal}
-          {...rest}
-        />
-      </React.Fragment>
-    ),
-  )
-
 export default withModal
diff --git a/packages/components-faraday/src/components/Dashboard/DashboardCard.js b/packages/components-faraday/src/components/Dashboard/DashboardCard.js
index 847dc15b5631bc8bc9be6e8847d6839b426b69a7..5b7fa5a43bd670979268afedf48de276dce39c3a 100644
--- a/packages/components-faraday/src/components/Dashboard/DashboardCard.js
+++ b/packages/components-faraday/src/components/Dashboard/DashboardCard.js
@@ -4,11 +4,7 @@ import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
 import { Button, Icon, th } from '@pubsweet/ui'
 import styled, { css, withTheme } from 'styled-components'
-import { compose, getContext, withHandlers } from 'recompose'
-import {
-  withModal,
-  ConfirmationModal,
-} from 'pubsweet-component-modal/src/components'
+import { compose, getContext, setDisplayName } from 'recompose'
 import { DateParser } from 'pubsweet-components-faraday/src/components'
 import { AuthorsWithTooltip } from 'pubsweet-component-manuscript/src/molecules'
 
@@ -16,7 +12,7 @@ import ZipFiles from '../Files/ZipFiles'
 import { Decision, Recommendation } from '../'
 import { InviteReviewers } from '../Reviewers/'
 import { selectInvitation } from '../../redux/reviewers'
-import { ReviewerDecision, HandlingEditorSection } from './'
+import { ReviewerDecision, HandlingEditorSection, DeleteManuscript } from './'
 import { parseVersion, parseJournalIssue, mapStatusToLabel } from './../utils'
 import {
   currentUserIs,
@@ -40,7 +36,6 @@ const DashboardCard = ({
   canMakeDecision,
   showAbstractModal,
   canInviteReviewers,
-  showConfirmationModal,
   canMakeRecommendation,
   ...rest
 }) => {
@@ -132,12 +127,10 @@ const DashboardCard = ({
                 <Icon primary>chevron-right</Icon>
               </Details>
             ) : (
-              <Details
-                data-test="button-cancel-submission"
-                onClick={showConfirmationModal}
-              >
-                Delete
-              </Details>
+              <DeleteManuscript
+                deleteProject={() => deleteProject(project)}
+                modalKey={`delete-${version.id}`}
+              />
             )}
           </RightDetails>
         </Bottom>
@@ -186,12 +179,9 @@ const DashboardCard = ({
 }
 
 export default compose(
+  setDisplayName('DashboardCard'),
   getContext({ journal: PropTypes.object, currentUser: PropTypes.object }),
   withTheme,
-  withModal({
-    modalKey: 'cancelManuscript',
-    modalComponent: ConfirmationModal,
-  }),
   connect((state, { project }) => ({
     isHE: currentUserIs(state, 'handlingEditor'),
     invitation: selectInvitation(state, project.id),
@@ -199,28 +189,6 @@ export default compose(
     canInviteReviewers: canInviteReviewers(state, project),
     canMakeRecommendation: canMakeRecommendation(state, project),
   })),
-  withHandlers({
-    showConfirmationModal: ({
-      project,
-      showModal,
-      hideModal,
-      deleteProject,
-      setModalError,
-    }) => () => {
-      showModal({
-        confirmText: 'Delete',
-        title: 'Are you sure you want to delete this submission?',
-        onConfirm: () => {
-          deleteProject(project).then(hideModal, e => {
-            setModalError(
-              get(JSON.parse(e.response), 'error') ||
-                'Oops! Something went wrong!',
-            )
-          })
-        },
-      })
-    },
-  }),
 )(DashboardCard)
 
 // #region styled-components
diff --git a/packages/components-faraday/src/components/Dashboard/DeleteManuscript.js b/packages/components-faraday/src/components/Dashboard/DeleteManuscript.js
new file mode 100644
index 0000000000000000000000000000000000000000..bb401928e2d87a71b9fa62c8532077634b8a8dab
--- /dev/null
+++ b/packages/components-faraday/src/components/Dashboard/DeleteManuscript.js
@@ -0,0 +1,57 @@
+import React from 'react'
+import { get } from 'lodash'
+import { th } from '@pubsweet/ui'
+import styled from 'styled-components'
+import { compose, withHandlers, setDisplayName } from 'recompose'
+import {
+  withModal,
+  ConfirmationModal,
+} from 'pubsweet-component-modal/src/components'
+
+const DeleteManuscript = ({ confirmDelete }) => (
+  <Details onClick={confirmDelete}>Delete</Details>
+)
+
+export default compose(
+  setDisplayName('DeleteManuscript'),
+  withModal(() => ({
+    modalComponent: ConfirmationModal,
+  })),
+  withHandlers({
+    confirmDelete: ({
+      showModal,
+      deleteProject,
+      setModalError,
+      hideModal,
+    }) => () => {
+      showModal({
+        confirmText: 'Delete',
+        title: 'Are you sure you want to delete this submission?',
+        onConfirm: () => {
+          deleteProject().then(hideModal, e => {
+            setModalError(
+              get(JSON.parse(e.response), 'error') ||
+                'Oops! Something went wrong!',
+            )
+          })
+        },
+      })
+    },
+  }),
+)(DeleteManuscript)
+
+// #region styled-components
+const Details = styled.div`
+  align-items: center;
+  cursor: pointer;
+  color: ${th('colorText')};
+  display: flex;
+  font-family: ${th('fontReading')};
+  font-size: ${th('fontSizeBaseSmall')};
+  margin-left: calc(${th('subGridUnit')} * 2);
+  text-decoration: underline;
+  text-align: center;
+  text-transform: uppercase;
+  white-space: nowrap;
+`
+// #endregion
diff --git a/packages/components-faraday/src/components/Dashboard/EditorInChiefActions.js b/packages/components-faraday/src/components/Dashboard/EditorInChiefActions.js
index e627c51b520b07e66e5a09f9246197a192fbfc82..342f530f148193ab803f78ec8898578c08f3f878 100644
--- a/packages/components-faraday/src/components/Dashboard/EditorInChiefActions.js
+++ b/packages/components-faraday/src/components/Dashboard/EditorInChiefActions.js
@@ -72,10 +72,9 @@ export default compose(
     assignHandlingEditor,
     getCollections: actions.getCollections,
   }),
-  withModal({
-    modalKey: 'confirmHE',
+  withModal(() => ({
     modalComponent: CardModal,
-  }),
+  })),
   withHandlers({
     getHandlingEditor: ({ project }) => () => get(project, 'handlingEditor'),
   }),
diff --git a/packages/components-faraday/src/components/Dashboard/HandlingEditorActions.js b/packages/components-faraday/src/components/Dashboard/HandlingEditorActions.js
index f7f60384a886ac30cbb6b31a6381570f070c97db..82907e31d9d00c1fa355324265aaa4bf4b110b61 100644
--- a/packages/components-faraday/src/components/Dashboard/HandlingEditorActions.js
+++ b/packages/components-faraday/src/components/Dashboard/HandlingEditorActions.js
@@ -56,10 +56,9 @@ export default compose(
   connect(null, {
     getCollections: actions.getCollections,
   }),
-  withModal({
-    modalKey: 'he-action',
+  withModal(() => ({
     modalComponent: ModalComponent,
-  }),
+  })),
   withHandlers({
     showHEModal: ({
       project,
diff --git a/packages/components-faraday/src/components/Dashboard/HandlingEditorSection.js b/packages/components-faraday/src/components/Dashboard/HandlingEditorSection.js
index be460ccffd69b74e38a366f693783c9ab529bec8..b48d96eb07e3fecd249ab622ef560a4e4bce97a5 100644
--- a/packages/components-faraday/src/components/Dashboard/HandlingEditorSection.js
+++ b/packages/components-faraday/src/components/Dashboard/HandlingEditorSection.js
@@ -14,11 +14,22 @@ const renderHE = (currentUser, project) => {
   const heActionsStatuses = ['heInvited']
 
   if ((isAdmin || isEic) && eicActionsStatuses.includes(status)) {
-    return <EditorInChiefActions project={project} />
+    return (
+      <EditorInChiefActions
+        modalKey={`eicActions-${project.id}`}
+        project={project}
+      />
+    )
   }
 
   if (isHe && heActionsStatuses.includes(status)) {
-    return <HandlingEditorActions currentUser={currentUser} project={project} />
+    return (
+      <HandlingEditorActions
+        currentUser={currentUser}
+        modalKey={`heActions-${project.id}`}
+        project={project}
+      />
+    )
   }
 
   return <AssignedHE>{get(handlingEditor, 'name') || 'N/A'}</AssignedHE>
diff --git a/packages/components-faraday/src/components/Dashboard/ReviewerDecision.js b/packages/components-faraday/src/components/Dashboard/ReviewerDecision.js
index d42dfb765671a735d4ec98cb272e6fa6bb650446..2636b09b5574ef28ea98431c46522a421510ce5c 100644
--- a/packages/components-faraday/src/components/Dashboard/ReviewerDecision.js
+++ b/packages/components-faraday/src/components/Dashboard/ReviewerDecision.js
@@ -5,7 +5,7 @@ import { actions } from 'pubsweet-client'
 import styled, { css } from 'styled-components'
 import { compose, withHandlers } from 'recompose'
 import {
-  withModal2,
+  withModal,
   ConfirmationModal,
 } from 'pubsweet-component-modal/src/components'
 import { selectFetchingDecision, reviewerDecision } from '../../redux/reviewers'
@@ -30,7 +30,7 @@ export default compose(
     reviewerDecision,
     getCollections: actions.getCollections,
   }),
-  withModal2(props => ({
+  withModal(props => ({
     modalComponent: ModalComponent,
   })),
   withHandlers({
diff --git a/packages/components-faraday/src/components/Dashboard/index.js b/packages/components-faraday/src/components/Dashboard/index.js
index 77a53a8362209ad42f79e74e02f94c2561478427..365a49a2cc8ad66ac09003bcc4d199fa3961b736 100644
--- a/packages/components-faraday/src/components/Dashboard/index.js
+++ b/packages/components-faraday/src/components/Dashboard/index.js
@@ -5,6 +5,7 @@ export { default as AbstractModal } from './AbstractModal'
 export { default as AuthorTooltip } from './AuthorTooltip'
 export { default as DashboardCard } from './DashboardCard'
 export { default as DashboardItems } from './DashboardItems'
+export { default as DeleteManuscript } from './DeleteManuscript'
 export { default as ReviewerDecision } from './ReviewerDecision'
 export { default as DashboardFilters } from './DashboardFilters'
 export { default as EditorInChiefActions } from './EditorInChiefActions'
diff --git a/packages/components-faraday/src/components/MakeDecision/Decision.js b/packages/components-faraday/src/components/MakeDecision/Decision.js
index e860d569686fdcba3b82b2266251e7658ce03901..a3a3b3b57f7b96f5cd33ab59990cd148fff55152 100644
--- a/packages/components-faraday/src/components/MakeDecision/Decision.js
+++ b/packages/components-faraday/src/components/MakeDecision/Decision.js
@@ -5,7 +5,7 @@ import { compose, withHandlers, setDisplayName } from 'recompose'
 
 import {
   ConfirmationModal,
-  withModal2,
+  withModal,
 } from 'pubsweet-component-modal/src/components'
 
 import { DecisionForm } from './'
@@ -25,7 +25,7 @@ const ModalComponent = ({ type, ...rest }) => {
 
 export default compose(
   setDisplayName('EICDecisionRoot'),
-  withModal2(() => ({
+  withModal(() => ({
     modalComponent: ModalComponent,
   })),
   withHandlers({
diff --git a/packages/components-faraday/src/components/MakeRecommendation/Recommendation.js b/packages/components-faraday/src/components/MakeRecommendation/Recommendation.js
index dd47f928dbdb054d46386617d829e88708ba5772..22fd9321be9b047bfef9283f7a11f13e2510f5c8 100644
--- a/packages/components-faraday/src/components/MakeRecommendation/Recommendation.js
+++ b/packages/components-faraday/src/components/MakeRecommendation/Recommendation.js
@@ -5,7 +5,7 @@ import { compose, withHandlers } from 'recompose'
 
 import {
   ConfirmationModal,
-  withModal2,
+  withModal,
 } from 'pubsweet-component-modal/src/components'
 import { RecommendWizard } from './'
 
@@ -25,7 +25,7 @@ const ModalComponent = ({ type, ...rest }) => {
 }
 
 export default compose(
-  withModal2(props => ({
+  withModal(props => ({
     modalComponent: ModalComponent,
   })),
   withHandlers({
diff --git a/packages/components-faraday/src/components/Reviewers/InviteReviewers.js b/packages/components-faraday/src/components/Reviewers/InviteReviewers.js
index 8084902686583fa5f2a830cd8c2b0bc0abfab2c7..bee6e98b5d26856b85a9192f7b27375419abc06e 100644
--- a/packages/components-faraday/src/components/Reviewers/InviteReviewers.js
+++ b/packages/components-faraday/src/components/Reviewers/InviteReviewers.js
@@ -5,7 +5,7 @@ import { Icon, Button, th, Spinner } from '@pubsweet/ui'
 import { compose, withHandlers, lifecycle } from 'recompose'
 import {
   ConfirmationModal,
-  withModal2,
+  withModal,
 } from 'pubsweet-component-modal/src/components'
 
 import { ReviewerForm, ReviewersList } from './'
@@ -115,7 +115,7 @@ const ModalSwitcher = compose(
 
 export default compose(
   connect(null, { clearReviewersError }),
-  withModal2(props => ({
+  withModal(props => ({
     modalComponent: ModalSwitcher,
   })),
   withHandlers({
diff --git a/packages/components-faraday/src/components/Reviewers/ReviewersDetailsList.js b/packages/components-faraday/src/components/Reviewers/ReviewersDetailsList.js
index f8aa95193d404f97af140ab230234cd0508ab7bc..8dfad00eeb82e02604cbb60fb805c42b87fd5e54 100644
--- a/packages/components-faraday/src/components/Reviewers/ReviewersDetailsList.js
+++ b/packages/components-faraday/src/components/Reviewers/ReviewersDetailsList.js
@@ -6,7 +6,7 @@ import styled, { css } from 'styled-components'
 import { compose, withHandlers, withProps } from 'recompose'
 import { DateParser } from 'pubsweet-components-faraday/src/components'
 import {
-  withModal2,
+  withModal,
   ConfirmationModal,
 } from 'pubsweet-component-modal/src/components'
 
@@ -122,7 +122,7 @@ const ModalWrapper = compose(
 
 export default compose(
   connect(null, { inviteReviewer, revokeReviewer, getCollectionReviewers }),
-  withModal2(props => ({
+  withModal(props => ({
     modalComponent: ModalWrapper,
   })),
   withProps(({ reviewers = [] }) => ({