diff --git a/packages/component-faraday-ui/src/contextualBoxes/EditorialRecommendation.js b/packages/component-faraday-ui/src/contextualBoxes/EditorialRecommendation.js
new file mode 100644
index 0000000000000000000000000000000000000000..6796105024653af1343644ff78d24eddadc8506d
--- /dev/null
+++ b/packages/component-faraday-ui/src/contextualBoxes/EditorialRecommendation.js
@@ -0,0 +1,116 @@
+import React from 'react'
+import { get } from 'lodash'
+import { reduxForm } from 'redux-form'
+import styled from 'styled-components'
+import { th } from '@pubsweet/ui-toolkit'
+import { required } from 'xpub-validators'
+import { compose, withProps } from 'recompose'
+import { Button, Menu, ValidatedField } from '@pubsweet/ui'
+import { withModal } from 'pubsweet-component-modal/src/components'
+
+import {
+  Row,
+  Text,
+  Label,
+  Textarea,
+  MultiAction,
+  ContextualBox,
+  ItemOverrideAlert,
+  withFetching,
+} from '../'
+
+const options = [
+  { value: 'publish', label: 'Publish' },
+  { value: 'reject', label: 'Reject' },
+  { value: 'minor-revision', label: 'Request Minor Revision' },
+  { value: 'major-revision', label: 'Request Major Revision' },
+]
+
+const EditorialRecommendation = ({ formValues, handleSubmit }) => (
+  <ContextualBox highlight label="Your Editorial Recommendation" startExpanded>
+    <Root>
+      <Row justify="flex-start">
+        <ItemOverrideAlert flex={0} vertical>
+          <Label required>Recommendation</Label>
+          <ValidatedField
+            component={input => <Menu options={options} {...input} />}
+            name="recommendation"
+            validate={[required]}
+          />
+        </ItemOverrideAlert>
+      </Row>
+
+      {get(formValues, 'recommendation') === 'publish' ||
+      get(formValues, 'recommendation') === 'reject' ? (
+        <Row mt={2}>
+          <ItemOverrideAlert vertical>
+            <Label required>Message for Author</Label>
+            <ValidatedField
+              component={Textarea}
+              name="message"
+              validate={[required]}
+            />
+          </ItemOverrideAlert>
+        </Row>
+      ) : (
+        <Row mt={2}>
+          <ItemOverrideAlert mr={1} vertical>
+            <Label>
+              Message for Author <Text secondary>Optional</Text>
+            </Label>
+            <ValidatedField component={Textarea} name="author-message" />
+          </ItemOverrideAlert>
+
+          <ItemOverrideAlert ml={1} vertical>
+            <Label>
+              Message for Editor in Chief <Text secondary>Optional</Text>
+            </Label>
+            <ValidatedField component={Textarea} name="eic-message" />
+          </ItemOverrideAlert>
+        </Row>
+      )}
+
+      <Row justify="flex-end" mt={2}>
+        <Button onClick={handleSubmit} primary size="medium">
+          Submit recommendation
+        </Button>
+      </Row>
+    </Root>
+  </ContextualBox>
+)
+
+export default compose(
+  withFetching,
+  withModal(({ isFetching }) => ({
+    isFetching,
+    modalComponent: MultiAction,
+  })),
+  withProps(({ formValues }) => ({
+    modalTitle: options.find(
+      o => o.value === get(formValues, 'recommendation', 'publish'),
+    ).label,
+  })),
+  reduxForm({
+    form: 'editorialRecommendation',
+    onSubmit: (
+      values,
+      dispatch,
+      { onRecommendationSubmit, showModal, setFetching, modalTitle },
+    ) => {
+      showModal({
+        title: `${modalTitle}?`,
+        onConfirm: props => {
+          onRecommendationSubmit(values, { ...props, setFetching })
+        },
+      })
+    },
+  }),
+)(EditorialRecommendation)
+
+// #region styles
+const Root = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: ${th('gridUnit')};
+`
+// #endregion
diff --git a/packages/component-faraday-ui/src/contextualBoxes/EditorialRecommendation.md b/packages/component-faraday-ui/src/contextualBoxes/EditorialRecommendation.md
new file mode 100644
index 0000000000000000000000000000000000000000..0102ae84642b8727d2226d980aa861f99bfc414e
--- /dev/null
+++ b/packages/component-faraday-ui/src/contextualBoxes/EditorialRecommendation.md
@@ -0,0 +1,16 @@
+HE recommendation.
+
+```js
+const formValues = {
+  recommendation: 'minor-revision',
+}
+
+;<EditorialRecommendation
+  formValues={formValues}
+  modalKey="heRecommendation"
+  onRecommendationSubmit={(values, props) => {
+    console.log('se face surmit la', values)
+    props.setFetching(true)
+  }}
+/>
+```
diff --git a/packages/component-faraday-ui/src/contextualBoxes/index.js b/packages/component-faraday-ui/src/contextualBoxes/index.js
index 54a8bdd97d9e793d6924a90a81da41d0fd0020ba..a9311f90cd48a522811b51631bf492e040f4a3e2 100644
--- a/packages/component-faraday-ui/src/contextualBoxes/index.js
+++ b/packages/component-faraday-ui/src/contextualBoxes/index.js
@@ -1,3 +1,4 @@
 export { default as AssignHE } from './AssignHE'
 export { default as ReviewerDetails } from './ReviewerDetails'
 export { default as ReviewerReportForm } from './ReviewerReportForm'
+export { default as EditorialRecommendation } from './EditorialRecommendation'
diff --git a/packages/component-faraday-ui/src/helpers/withFetching.js b/packages/component-faraday-ui/src/helpers/withFetching.js
index 717a5f95b9257e38cae9bdad68d910192a896860..753c265e6b62deb9df24574fc9cab31572cd9386 100644
--- a/packages/component-faraday-ui/src/helpers/withFetching.js
+++ b/packages/component-faraday-ui/src/helpers/withFetching.js
@@ -2,12 +2,12 @@ import { withStateHandlers } from 'recompose'
 
 export default withStateHandlers(
   {
-    isFetchingg: false,
+    isFetching: false,
     fetchingError: '',
   },
   {
-    setFetching: ({ isFetchingg }) => value => ({
-      isFetchingg: value,
+    setFetching: ({ isFetching }) => value => ({
+      isFetching: value,
     }),
     toggleFetching: ({ isFetching }) => () => ({
       isFetching: !isFetching,
diff --git a/packages/component-manuscript/src/components/ManuscriptLayout.js b/packages/component-manuscript/src/components/ManuscriptLayout.js
index a13df8c3461d0c10f2571cb79d138772d45985c4..4e2471f1d491de06b65e99aad73c3f74dd885b40 100644
--- a/packages/component-manuscript/src/components/ManuscriptLayout.js
+++ b/packages/component-manuscript/src/components/ManuscriptLayout.js
@@ -8,8 +8,9 @@ import {
   ManuscriptAssignHE,
   ManuscriptMetadata,
   ManuscriptDetailsTop,
-  ManuscriptEicDecision,
   ResponseToInvitation,
+  ManuscriptEicDecision,
+  EditorialRecommendation,
   paddingHelper,
 } from 'pubsweet-component-faraday-ui'
 
@@ -87,6 +88,14 @@ const ManuscriptLayout = ({
           revokeInvitation={revokeHE}
         />
 
+        <EditorialRecommendation
+          formValues={get(formValues, 'editorialRecommendation', {})}
+          modalKey="heRecommendation"
+          onRecommendationSubmit={(values, props) => {
+            props.setFetching(true)
+          }}
+        />
+
         <ManuscriptMetadata
           currentUser={currentUser}
           fragment={fragment}
diff --git a/packages/component-manuscript/src/components/ManuscriptPage.js b/packages/component-manuscript/src/components/ManuscriptPage.js
index 7c2839e5966a45b40b6d210f8aef301e014403ea..ce588ddfe73fcfaa4ac22b884c446d2f3f1a8eed 100644
--- a/packages/component-manuscript/src/components/ManuscriptPage.js
+++ b/packages/component-manuscript/src/components/ManuscriptPage.js
@@ -160,6 +160,9 @@ export default compose(
         eicDecision: getFormValues('eic-decision')(state),
         reviewerReport: getFormValues('reviewerReport')(state),
         responseToInvitation: getFormValues('answer-invitation')(state),
+        editorialRecommendation: getFormValues('editorialRecommendation')(
+          state,
+        ),
       },
       invitationsWithReviewers: getInvitationsWithReviewersForFragment(
         state,