diff --git a/packages/components-faraday/src/components/SignUp/SignUpInvitationForm.js b/packages/components-faraday/src/components/SignUp/SignUpInvitationForm.js
index ac7399aa0c49b8127f5cd160bb5137b0242bec91..6337b777a46e2fc6c42d694799bdee42972ce38c 100644
--- a/packages/components-faraday/src/components/SignUp/SignUpInvitationForm.js
+++ b/packages/components-faraday/src/components/SignUp/SignUpInvitationForm.js
@@ -32,6 +32,7 @@ const SignUpInvitation = ({
     )}
     {step === 1 && (
       <Step1
+        error={error}
         initialValues={initialValues}
         journal={journal}
         onSubmit={submitConfirmation}
diff --git a/packages/components-faraday/src/components/SignUp/SignUpStep1.js b/packages/components-faraday/src/components/SignUp/SignUpStep1.js
index 7109f6c581422a6499788836fa9b40df01988acd..260aa47d1854ca5ceb793cceb0d3e2ba43a648e8 100644
--- a/packages/components-faraday/src/components/SignUp/SignUpStep1.js
+++ b/packages/components-faraday/src/components/SignUp/SignUpStep1.js
@@ -2,9 +2,9 @@ import React from 'react'
 import styled from 'styled-components'
 import { reduxForm } from 'redux-form'
 import { required } from 'xpub-validators'
-import { Button, ValidatedField, TextField } from '@pubsweet/ui'
+import { Button, ValidatedField, TextField, th } from '@pubsweet/ui'
 
-const Step1 = ({ journal, handleSubmit }) => (
+const Step1 = ({ journal, handleSubmit, error }) => (
   <FormContainer onSubmit={handleSubmit}>
     <Row>
       <RowItem>
@@ -16,6 +16,13 @@ const Step1 = ({ journal, handleSubmit }) => (
         />
       </RowItem>
     </Row>
+    {error && (
+      <Row>
+        <RowItem>
+          <Err>{error}</Err>
+        </RowItem>
+      </Row>
+    )}
     <Row>
       <Button primary type="submit">
         CONFIRM
@@ -35,18 +42,23 @@ const FormContainer = styled.form``
 const Row = styled.div`
   display: flex;
   flex-direction: row;
-  margin: 20px 0;
+  margin: ${th('gridUnit')} 0;
   align-items: center;
   justify-content: space-evenly;
 `
 
 const RowItem = styled.div`
   flex: 1;
-  margin-right: 20px;
+  margin-right: ${th('gridUnit')};
 `
 
 const Label = styled.div`
-  font-size: ${({ theme }) => theme.fontSizeBaseSmall};
-  font-family: ${({ theme }) => theme.fontReading};
+  font-size: ${th('fontSizeBaseSmall')};
+  font-family: ${th('fontReading')};
   text-transform: uppercase;
 `
+const Err = styled.div`
+  color: ${th('colorError')};
+  text-align: left;
+  margin-top: calc(${th('gridUnit')}*-1);
+`