diff --git a/packages/component-faraday-ui/src/ManuscriptCard.js b/packages/component-faraday-ui/src/ManuscriptCard.js
index c66b0458956787a52f6002ae661eb10e726a6bee..97688bbcbd4cec6dccb0717cc5614106f222a0dc 100644
--- a/packages/component-faraday-ui/src/ManuscriptCard.js
+++ b/packages/component-faraday-ui/src/ManuscriptCard.js
@@ -10,27 +10,27 @@ import {
   Tag,
   Text,
   Row,
-  // Item,
+  Item,
   IconButton,
-  // ActionLink,
+  ActionLink,
   AuthorTagList,
   ReviewerBreakdown,
 } from './'
 
-// import { OpenModal } from './modals'
+import { OpenModal } from './modals'
 
 const ManuscriptCard = ({
-  onCardClick,
   onDelete,
   canDelete,
+  onCardClick,
   fragment = {},
   manuscriptType = {},
   collection: { visibleStatus = 'Draft', handlingEditor, customId },
 }) => {
   const {
     authors = [],
-    id: fragmentId,
     metadata = {},
+    id: fragmentId,
     submitted = null,
   } = fragment
   const { title = 'No title', journal = '', type = '' } = metadata
@@ -72,7 +72,7 @@ const ManuscriptCard = ({
           {handlingEditor && (
             <ReviewerBreakdown fragment={fragment} label="Reviewer Reports" />
           )}
-          {/* {canDelete && (
+          {canDelete && (
             <Item justify="flex-end" onClick={e => e.stopPropagation()}>
               <OpenModal
                 confirmAction={onDelete}
@@ -87,7 +87,7 @@ const ManuscriptCard = ({
                 )}
               </OpenModal>
             </Item>
-          )} */}
+          )}
         </Row>
       </MainContainer>
       <SideNavigation>
diff --git a/packages/component-faraday-ui/src/ManuscriptCard.md b/packages/component-faraday-ui/src/ManuscriptCard.md
index e78f3422c44d759f3863865e859d8b255750452d..aea9f0e6cf26bc6bab8d474c0ae54b8ce88828ed 100644
--- a/packages/component-faraday-ui/src/ManuscriptCard.md
+++ b/packages/component-faraday-ui/src/ManuscriptCard.md
@@ -93,16 +93,16 @@ const collection = {
 
 const fragment = {
   authors,
-  created: new Date(),
-  submitted: new Date(),
+  created: Date.now(),
+  submitted: Date.now(),
   metadata: {
     journal: 'Awesomeness',
     title: 'A very ok title with many authors',
     type: 'Research article',
   },
-}
+};
 
-;<ManuscriptCard
+<ManuscriptCard
   collection={collection}
   fragment={fragment}
   onDelete={() => alert('Deleted')}
diff --git a/packages/component-faraday-ui/src/modals/OpenModal.js b/packages/component-faraday-ui/src/modals/OpenModal.js
index a030bbd2937cae957870dab713333ab01405fa03..dbe53b0eee4bdd030ed01547775381bd35e6ca51 100644
--- a/packages/component-faraday-ui/src/modals/OpenModal.js
+++ b/packages/component-faraday-ui/src/modals/OpenModal.js
@@ -4,7 +4,7 @@ import { withModal } from 'pubsweet-component-modal/src/components'
 
 import { MultiAction } from './'
 
-const OpenModal = ({ onClickEvent, children }) => children(onClickEvent)
+const OpenModal = ({ showModal, children }) => children(showModal)
 
 export default compose(
   withModal(() => ({
@@ -21,11 +21,11 @@ export default compose(
     },
   }),
   withHandlers({
-    onClickEvent: ({
+    showModal: ({
       showModal,
       hideModal,
-      setModalError,
       handleError,
+      setModalError,
       confirmAction,
       ...rest
     }) => e => {
diff --git a/packages/component-faraday-ui/src/modals/OpenModal.md b/packages/component-faraday-ui/src/modals/OpenModal.md
index 3c31caf774568a898f703d55c9aecd36cd00e510..e74bf89557588e289248f13a51bdb1457378bd97 100644
--- a/packages/component-faraday-ui/src/modals/OpenModal.md
+++ b/packages/component-faraday-ui/src/modals/OpenModal.md
@@ -5,12 +5,30 @@ Open a confirmation modal by clicking on an element
   confirmAction={() => alert('Confirm')}
   title="Are you sure?"
   confirmText="Delete"
-  modalKey="1"
+  modalKey="123"
 >
-  {onClickEvent => (
-    <ActionLink icon="trash" onClick={onClickEvent}>
+  {showModal => (
+    <ActionLink icon="trash" onClick={showModal}>
       Delete
     </ActionLink>
   )}
 </OpenModal>
 ```
+
+Pass a custon component as the modal content.
+
+```js
+const Custom = () => <div>inside the modal</div>;
+
+<OpenModal
+  confirmAction={() => alert('Confirm')}
+  title="Are you sure?"
+  confirmText="Delete"
+  content={Custom}
+  modalKey="123"
+>
+  {showModal => (
+    <Tag onClick={showModal}>CUSTOM</Tag>
+  )}
+</OpenModal>
+```
diff --git a/packages/component-modal/src/components/withModal.js b/packages/component-modal/src/components/withModal.js
index 685cc748a2b10cbb55dd7ebdfaa4496ec8f3442b..51afbdc6b7e731a3ec6d1aa139b06d793f6052d8 100644
--- a/packages/component-modal/src/components/withModal.js
+++ b/packages/component-modal/src/components/withModal.js
@@ -7,7 +7,7 @@ import Modal from './Modal'
 import { showModal, hideModal, setModalError } from '../redux/modal'
 
 const mapState = state => ({
-  modalsVisibility: omit(state.modal, 'props'),
+  modalVisibility: omit(state.modal, ['props', 'error']),
   modalProps: state.modal.props,
   modalError: state.modal.error,
 })
@@ -30,12 +30,12 @@ const withModal = mapperFn => BaseComponent =>
       modalError,
       isFetching,
       setModalError,
-      modalsVisibility,
+      modalVisibility,
       ...rest
     } = baseProps
     return (
       <React.Fragment>
-        {modalsVisibility[modalKey] && (
+        {modalVisibility[modalKey] && (
           <Modal
             {...modalProps}
             component={Component}
diff --git a/packages/styleguide/src/Wrapper.js b/packages/styleguide/src/Wrapper.js
index 6c599e66021b72d1e2b73c32fda85ce6a78745bf..467e2f5c80cdf9509efa625e430e043a56658957 100644
--- a/packages/styleguide/src/Wrapper.js
+++ b/packages/styleguide/src/Wrapper.js
@@ -3,24 +3,20 @@ import React, { Component } from 'react'
 import { reducer } from 'redux-form'
 import { Provider } from 'react-redux'
 import hindawiTheme from 'hindawi-theme'
+import { createLogger } from 'redux-logger'
 import { ThemeProvider } from 'styled-components'
-import { createStore, combineReducers } from 'redux'
+import { client } from 'pubsweet-component-modal'
+import { createStore, combineReducers, applyMiddleware } from 'redux'
 
 import withDragDropContext from './withDragDropContext'
 
-const modalReducer = (
-  state = {
-    error: null,
-    props: {},
-  },
-  action,
-) => state
-
+const logger = createLogger()
 const store = createStore(
   combineReducers({
     form: reducer,
-    modal: modalReducer,
+    modal: client.reducers.modal(),
   }),
+  applyMiddleware(logger),
 )
 
 class Wrapper extends Component {