diff --git a/packages/component-invite/src/helpers/helpers.js b/packages/component-invite/src/helpers/helpers.js
index 3be4674565565f5f29588f90cfb27f3f6172aa28..0628217ee67a8b0d6697869a7cf7beb491dfc8af 100644
--- a/packages/component-invite/src/helpers/helpers.js
+++ b/packages/component-invite/src/helpers/helpers.js
@@ -84,7 +84,7 @@ const createNewUser = async (
   UserModel,
   role,
 ) => {
-  const username = uuid.v4().slice(0, 8)
+  const username = email
   const password = uuid.v4()
   const userBody = {
     username,
diff --git a/packages/components-faraday/src/components/Dashboard/DashboardCard.js b/packages/components-faraday/src/components/Dashboard/DashboardCard.js
index 548e2283d785ad31860aa4f96d8d7f98d3968ee6..02a1c5618e237282ec1bdbb44f6190b0e98da06c 100644
--- a/packages/components-faraday/src/components/Dashboard/DashboardCard.js
+++ b/packages/components-faraday/src/components/Dashboard/DashboardCard.js
@@ -2,13 +2,13 @@ import React from 'react'
 import { get } from 'lodash'
 import PropTypes from 'prop-types'
 import { Button, Icon, th } from '@pubsweet/ui'
-import styled, { css } from 'styled-components'
+import styled, { css, withTheme } from 'styled-components'
 import { compose, getContext } from 'recompose'
 
 import { parseVersion, parseJournalIssue } from './utils'
 
 import ZipFiles from './ZipFiles'
-import AssignEditor from './AssignEditor'
+import HandlingEditorActions from './HandlingEditorActions'
 
 const DashboardCard = ({
   deleteProject,
@@ -18,6 +18,7 @@ const DashboardCard = ({
   showAbstractModal,
   journal,
   cancelSubmission,
+  theme,
   ...rest
 }) => {
   const { submitted, title, type } = parseVersion(version)
@@ -84,7 +85,7 @@ const DashboardCard = ({
                 }
               >
                 Details
-                <Icon color="#667080">chevron-right</Icon>
+                <Icon color={theme.colorPrimary}>chevron-right</Icon>
               </Details>
             ) : (
               <Details
@@ -115,53 +116,33 @@ const DashboardCard = ({
                   arr,
                 ) => (
                   <Author key={email}>
-                    {isSubmitting && <AuthorStatus>SA</AuthorStatus>}
-                    {isCorresponding &&
-                      !isSubmitting && <AuthorStatus>CA</AuthorStatus>}
                     <AuthorName>
                       {firstName} {middleName} {lastName}
                     </AuthorName>
+                    {isSubmitting && <AuthorStatus>SA</AuthorStatus>}
+                    {isCorresponding &&
+                      !isSubmitting && <AuthorStatus>CA</AuthorStatus>}
                     {arr.length - 1 === index ? '' : ','}
                   </Author>
                 ),
               )}
             </AuthorList>
           </Top>
-          <div>
-            Handling editor
-            <AssignEditor collectionId={project.id} />
-          </div>
+          <Bottom>
+            <LeftDetails flex="5">
+              <HEText>Handling Editor</HEText>
+              <HandlingEditorActions project={project} />
+            </LeftDetails>
+          </Bottom>
         </DetailsView>
       )}
     </Card>
   ) : null
 }
 
-export default compose(
-  getContext({ journal: PropTypes.object }),
-  // withModal({
-  //   modalComponent: ConfirmationModal,
-  // }),
-  // withHandlers({
-  //   cancelSubmission: ({
-  //     showModal,
-  //     deleteProject,
-  //     project,
-  //     hideModal,
-  //   }) => () => {
-  //     const modalConfig = {
-  //       onConfirm: () => {
-  //         deleteProject(project)
-  //         hideModal()
-  //       },
-  //       dismissable: false,
-  //       title: 'Are you sure you want to delete the manuscript?',
-  //       subtitle: 'This operation cannot be undone!',
-  //     }
-  //     showModal(modalConfig)
-  //   },
-  // }),
-)(DashboardCard)
+export default compose(getContext({ journal: PropTypes.object }), withTheme)(
+  DashboardCard,
+)
 
 // #region styled-components
 const defaultText = css`
@@ -192,6 +173,7 @@ const AuthorStatus = styled.span`
   text-align: center;
   text-transform: uppercase;
   padding: 0 2px;
+  margin-left: 4px;
 `
 
 const ActionButtons = styled(Button)`
@@ -227,7 +209,7 @@ const DetailsView = styled.div`
   align-items: center;
   border-top: ${th('borderDefault')};
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   justify-content: space-between;
   width: 100%;
 `
@@ -323,9 +305,11 @@ const Status = styled.div`
   border: ${th('borderDefault')};
   ${defaultText};
   font-weight: bold;
-  padding: 0.2em 0.5em;
+  padding: 0 0.5em;
   text-align: left;
-  text-transform: uppercase;
+  text-transform: capitalize;
+  line-height: 1.5;
+  color: ${th('colorPrimary')};
 `
 
 const DateField = styled.span`
@@ -333,4 +317,10 @@ const DateField = styled.span`
   margin: 0 ${th('subGridUnit')};
   text-align: left;
 `
+
+const HEText = styled.div`
+  ${defaultText};
+  text-transform: uppercase;
+`
+
 // #endregion
diff --git a/packages/components-faraday/src/components/Dashboard/HandlingEditorActions.js b/packages/components-faraday/src/components/Dashboard/HandlingEditorActions.js
new file mode 100644
index 0000000000000000000000000000000000000000..c0af68ece3a0843c1faab318e5c40f7ecf061db7
--- /dev/null
+++ b/packages/components-faraday/src/components/Dashboard/HandlingEditorActions.js
@@ -0,0 +1,45 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Icon, th } from '@pubsweet/ui'
+import styled, { css, withTheme } from 'styled-components'
+import { compose, getContext } from 'recompose'
+import AssignEditor from './AssignEditor'
+
+const HandlingEditorActions = ({ project, theme }) => (
+  <Root>
+    <HEActions>
+      <Icon color={theme.colorPrimary}>refresh-cw</Icon>
+      <Icon color={theme.colorPrimary}>x-circle</Icon>
+      <AssignEditor collectionId={project.id} />
+    </HEActions>
+  </Root>
+)
+
+export default compose(getContext({ journal: PropTypes.object }), withTheme)(
+  HandlingEditorActions,
+)
+
+// #region styled-components
+const defaultText = css`
+  color: ${th('colorText')};
+  font-family: ${th('fontReading')};
+  font-size: ${th('fontSizeBaseSmall')};
+`
+
+const Root = styled.div``
+
+const HEActions = styled.div`
+  ${defaultText};
+  text-transform: uppercase;
+  cursor: pointer;
+  margin-left: ${th('subGridUnit')};
+  span {
+    margin-left: ${th('subGridUnit')};
+    &:hover {
+      svg {
+        opacity: 0.8;
+      }
+    }
+  }
+`
+// #endregion