diff --git a/packages/component-modal/src/components/Modal.js b/packages/component-modal/src/components/Modal.js
index 09987d71b5d31b528b23937126b89c1c54c59a14..b16774202a19629f580e8fe050200b9c1fa2ba8c 100644
--- a/packages/component-modal/src/components/Modal.js
+++ b/packages/component-modal/src/components/Modal.js
@@ -30,14 +30,15 @@ class Modal extends React.Component {
 export default Modal
 
 const ModalRoot = styled.div`
-  position: fixed;
+  align-items: center;
+  display: flex;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
-  display: flex;
+  position: fixed;
   justify-content: center;
-  align-items: center;
   background-color: ${({ overlayColor }) =>
     overlayColor || 'rgba(0, 0, 0, 0.8)'};
+  z-index: ${({ theme }) => theme.modalIndex};
 `
diff --git a/packages/component-wizard/src/components/AutosaveIndicator.js b/packages/component-wizard/src/components/AutosaveIndicator.js
index da53bd8beef27b530b6021b7ded6ebf9cfb83303..a82955ca123d3f18bcd7ed556e60647a2db1c622 100644
--- a/packages/component-wizard/src/components/AutosaveIndicator.js
+++ b/packages/component-wizard/src/components/AutosaveIndicator.js
@@ -4,7 +4,7 @@ import { connect } from 'react-redux'
 import { compose, withProps } from 'recompose'
 // import { Icon, Spinner } from '@pubsweet/ui'
 import { Icon } from '@pubsweet/ui'
-import styled from 'styled-components'
+import styled, { withTheme } from 'styled-components'
 import { getFormValues } from 'redux-form'
 
 import Spinner from 'pubsweet-components-faraday/src/components/UIComponents/Spinner'
@@ -23,6 +23,7 @@ const Indicator = ({
   errorText = 'Changes not saved',
   successText,
   autosave: { isFetching, error, lastUpdate },
+  theme,
 }) =>
   isVisibile ? (
     <Root>
@@ -46,11 +47,11 @@ const Indicator = ({
         error && (
           <AutoSaveContainer>
             <IconContainer>
-              <Icon color="var(--color-danger)" size={16}>
+              <Icon color={theme.colorError} size={16}>
                 alert-triangle
               </Icon>
             </IconContainer>
-            <Info error="var(--color-danger)" title={error}>
+            <Info error={theme.colorError} title={error}>
               {errorText}
             </Info>
           </AutoSaveContainer>
@@ -66,8 +67,10 @@ export default compose(
   withProps(({ autosave: { isFetching, error, lastUpdate }, form }) => ({
     isVisibile: form && Boolean(isFetching || lastUpdate || error),
   })),
+  withTheme,
 )(Indicator)
 
+// #region styles
 const Root = styled.div`
   align-items: center;
   display: flex;
@@ -88,3 +91,4 @@ const Info = styled.span`
   margin-left: 5px;
   color: ${({ error }) => error || ''};
 `
+// #endregion
diff --git a/packages/component-wizard/src/components/WizardStep.js b/packages/component-wizard/src/components/WizardStep.js
index 02baab3128538093680bcf22164b75c9227a67bf..5f278fd1b22b41a7df7757a26a7aea03b42e8306 100644
--- a/packages/component-wizard/src/components/WizardStep.js
+++ b/packages/component-wizard/src/components/WizardStep.js
@@ -24,7 +24,7 @@ export default ({
   wizard: { confirmationModal: ConfirmationModal },
   ...rest
 }) => (
-  <Root width="700px">
+  <Root width="800px">
     <FormContainer onSubmit={handleSubmit}>
       <Title>{title}</Title>
       {subtitle && (
@@ -84,28 +84,32 @@ export default ({
     <AutosaveIndicator />
   </Root>
 )
-
+// #region styles
 const Root = styled.div`
   align-items: stretch;
-  border: 1px solid var(--color-pending);
+  border: ${({ theme }) => theme.borderDefault};
+  border-radius: ${({ theme }) => theme.borderRadius};
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
-  padding: 0 20px;
-  width: ${({ width }) => width || '700px'};
+  width: ${({ width }) => width || '800px'};
+  background-color: ${({ theme }) => theme.colorTextReverse};
 `
 
 const FormContainer = styled.form`
   display: flex;
   flex-direction: column;
+  padding: 20px 40px;
 `
-const Title = styled.h3`
+const Title = styled.h5`
   align-self: center;
+  font-size: ${({ theme }) => theme.fontSizeHeading5};
+  margin-bottom: 10px;
 `
 
 const Subtitle = styled.div`
   align-self: center;
-  margin-bottom: 25px;
+  margin-bottom: 30px;
 `
 
 const ButtonContainer = styled.div`
@@ -113,7 +117,7 @@ const ButtonContainer = styled.div`
   align-self: center;
   display: flex;
   justify-content: space-around;
-  margin: 15px 0;
+  margin: 40px 0 20px;
   width: ${({ width }) => width || '400px'};
 `
 
@@ -128,3 +132,4 @@ const ModalContainer = styled.div`
   right: 0;
   top: 0;
 `
+// #endregion
diff --git a/packages/components-faraday/src/components/Admin/AddEditUser.js b/packages/components-faraday/src/components/Admin/AddEditUser.js
index b0ba223d6781fb31845e13bc89e476b8c911909e..fa5a61a9b74dcd7775b08038897a0cb894f07227 100644
--- a/packages/components-faraday/src/components/Admin/AddEditUser.js
+++ b/packages/components-faraday/src/components/Admin/AddEditUser.js
@@ -93,6 +93,8 @@ export default compose(
   }),
 )(AddEditUser)
 
+// #region styles
+
 const Root = styled.div`
   display: flex;
   flex-direction: column;
@@ -101,10 +103,11 @@ const Root = styled.div`
 `
 
 const FormContainer = styled.form`
-  border: 1px solid var(--color-pending);
+  border: ${({ theme }) => theme.borderDefault};
+  background-color: ${({ theme }) => theme.backgroundColorReverse};
   margin: 0 auto;
   min-width: 300px;
-  padding: 20px;
+  padding: 20px 40px;
 `
 
 const Row = styled.div`
@@ -114,3 +117,4 @@ const Row = styled.div`
   align-items: center;
   justify-content: space-evenly;
 `
+// #endregion
diff --git a/packages/components-faraday/src/components/Admin/AddUserForm.js b/packages/components-faraday/src/components/Admin/AddUserForm.js
index 3edc3f9e500465e37401e0da299398894686b55b..4317c2c4fbd0d4444bc9be8d203c86726670a388 100644
--- a/packages/components-faraday/src/components/Admin/AddUserForm.js
+++ b/packages/components-faraday/src/components/Admin/AddUserForm.js
@@ -10,7 +10,7 @@ const AddUserForm = ({ roles, journal }) => {
   )
   return (
     <div>
-      <h3>Add user</h3>
+      <Title>Add user</Title>
       <Row>
         <RowItem>
           <Label> Email*</Label>
@@ -58,6 +58,8 @@ const AddUserForm = ({ roles, journal }) => {
 
 export default AddUserForm
 
+// #region styles
+
 const Row = styled.div`
   display: flex;
   flex-direction: row;
@@ -69,7 +71,14 @@ const RowItem = styled.div`
   margin-right: 20px;
 `
 
+const Title = styled.h4`
+  font-size: ${({ theme }) => theme.fontSizeHeading4};
+  color: ${({ theme }) => theme.colorPrimary};
+  margin: 10px 0;
+`
+
 const Label = styled.div`
-  font-size: 14px;
+  font-size: ${({ theme }) => theme.fontSizeBase};
   text-transform: uppercase;
 `
+// #endregion
diff --git a/packages/components-faraday/src/components/Admin/AdminDashboard.js b/packages/components-faraday/src/components/Admin/AdminDashboard.js
index bac4c83fcd2538137ecb5d3c88ef579b22025b6a..3b5fe553ffcc5299dd00bbef9ab37706dcbb362b 100644
--- a/packages/components-faraday/src/components/Admin/AdminDashboard.js
+++ b/packages/components-faraday/src/components/Admin/AdminDashboard.js
@@ -1,25 +1,25 @@
 import React from 'react'
 import { Icon } from '@pubsweet/ui'
-import styled from 'styled-components'
+import styled, { withTheme } from 'styled-components'
 
-const AdminDashboard = ({ history }) => (
+const AdminDashboard = ({ history, theme }) => (
   <Root>
     <Title>Admin Dashboard</Title>
     <CardContainer>
       <Card>
-        <Icon color="#667080" size={32}>
+        <Icon color={theme.colorPrimary} size={32}>
           edit
         </Icon>
         <span>Journal configuration</span>
       </Card>
       <Card onClick={() => history.push('/admin/users')}>
-        <Icon color="#667080" size={32}>
+        <Icon color={theme.colorPrimary} size={32}>
           users
         </Icon>
         <span>Users</span>
       </Card>
       <Card>
-        <Icon color="#667080" size={32}>
+        <Icon color={theme.colorPrimary} size={32}>
           settings
         </Icon>
         <span>Roles</span>
@@ -28,7 +28,7 @@ const AdminDashboard = ({ history }) => (
   </Root>
 )
 
-export default AdminDashboard
+export default withTheme(AdminDashboard)
 
 // #region Styled components
 const Root = styled.div`
@@ -38,9 +38,9 @@ const Root = styled.div`
 `
 
 const Title = styled.span`
-  color: #667080;
-  font-family: Helvetica;
-  font-size: 24px;
+  color: ${({ theme }) => theme.colorPrimary};
+  font-family: ${({ theme }) => theme.fontInterface};
+  font-size: ${({ theme }) => theme.fontSizeHeading5};
   font-weight: bold;
   text-align: left;
 `
@@ -53,7 +53,8 @@ const CardContainer = styled.div`
 
 const Card = styled.div`
   align-items: center;
-  border: 1px solid #979797;
+  border: ${({ theme }) => theme.borderDefault};
+  background-color: ${({ theme }) => theme.backgroundColorReverse};
   cursor: pointer;
   display: flex;
   flex-direction: column;
@@ -63,12 +64,12 @@ const Card = styled.div`
   width: 210px;
 
   &:hover {
-    background-color: #ddd;
+    background-color: ${({ theme }) => theme.backgroundColor};
   }
 
   > span {
-    color: #667080;
-    font-family: Helvetica;
+    color: ${({ theme }) => theme.colorPrimary};
+    font-family: ${({ theme }) => theme.fontInterface};
     font-size: 18px;
     margin-top: 10px;
     text-align: center;
diff --git a/packages/components-faraday/src/components/Admin/AdminUsers.js b/packages/components-faraday/src/components/Admin/AdminUsers.js
index 8a2a25d98605b2faa6dff7fd165908be19afc829..db9501af114f4c9c006fdeabed6743a2ca138db3 100644
--- a/packages/components-faraday/src/components/Admin/AdminUsers.js
+++ b/packages/components-faraday/src/components/Admin/AdminUsers.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { get } from 'lodash'
 import { connect } from 'react-redux'
-import styled from 'styled-components'
+import styled, { withTheme } from 'styled-components'
 import { Icon, Menu } from '@pubsweet/ui'
 import { actions } from 'pubsweet-client'
 import { ConnectPage } from 'xpub-connect'
@@ -59,6 +59,7 @@ const Users = ({
   itemsPerPage,
   history,
   journal,
+  theme,
 }) => {
   const slicedUsers = users.slice(
     page * itemsPerPage,
@@ -72,7 +73,7 @@ const Users = ({
           <span>Users</span>
         </BreadCrumbs>
         <AddButton onClick={() => history.push('/admin/users/add')}>
-          <Icon color="#667080">plus-circle</Icon>
+          <Icon color={theme.colorPrimary}>plus-circle</Icon>
           &nbsp; Add User
         </AddButton>
       </Header>
@@ -97,7 +98,7 @@ const Users = ({
             value="sort"
           />
 
-          <Icon color="#667080" size={24}>
+          <Icon color={theme.colorPrimary} size={24}>
             search
           </Icon>
         </div>
@@ -148,6 +149,7 @@ export default compose(
   ConnectPage(() => [actions.getUsers()]),
   withRouter,
   withJournal,
+  withTheme,
   connect(state => ({ currentUsers: get(state, 'users.users') })),
   withState('users', 'setUsers', props =>
     props.currentUsers.map(u => ({ ...u, selected: false })),
@@ -180,15 +182,19 @@ const AddButton = styled.button`
   border: none;
   cursor: pointer;
   display: flex;
-  font-family: Helvetica;
-  font-size: 12px;
+  font-family: ${({ theme }) => theme.fontInterface};
+  font-size: ${({ theme }) => theme.fontSizeBaseSmall};
   text-align: left;
-  color: #667080;
+  color: ${({ theme }) => theme.colorPrimary};
+  background-color: ${({ theme }) => theme.backgroundColor};
 
   &:active,
   &:focus {
     outline: none;
   }
+  &:hover {
+    opacity: 0.7;
+  }
 `
 
 const Header = styled.div`
@@ -201,7 +207,7 @@ const BreadCrumbs = styled.div`
   & span {
     font-size: 17px;
     text-align: left;
-    color: #667080;
+    color: ${({ theme }) => theme.colorPrimary};
 
     &:after {
       content: '>';
@@ -218,7 +224,7 @@ const BreadCrumbs = styled.div`
 
 const SubHeader = styled.div`
   align-items: center;
-  border-bottom: 1px solid #667080;
+  border-bottom: ${({ theme }) => theme.borderDefault};
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -231,10 +237,10 @@ const SubHeader = styled.div`
   }
 
   span {
-    font-family: Helvetica;
-    font-size: 14px;
+    font-family: ${({ theme }) => theme.fontReading};
+    font-size: ${({ theme }) => theme.fontSizeBaseSmall};
     text-align: left;
-    color: #667080;
+    color: ${({ theme }) => theme.colorPrimary};
   }
 `
 
@@ -246,24 +252,24 @@ const Table = styled.table`
 
   & thead tr {
     height: 40px;
-    border-bottom: 1px solid #667080;
-    font-family: Helvetica;
-    font-size: 14px;
+    border-bottom: ${({ theme }) => theme.borderDefault};
+    font-family: ${({ theme }) => theme.fontReading};
+    font-size: ${({ theme }) => theme.fontSizeBaseSmall};
     font-weight: bold;
     text-align: left;
-    color: #667080;
+    color: ${({ theme }) => theme.colorPrimary};
   }
 `
 
 const Row = styled.tr`
-  border-bottom: 1px solid #667080;
-  color: #667080;
-  font-family: Helvetica;
-  font-size: 14px;
+  border-bottom: ${({ theme }) => theme.borderDefault};
+  color: ${({ theme }) => theme.colorPrimary};
+  font-family: ${({ theme }) => theme.fontReading};
+  font-size: ${({ theme }) => theme.fontSizeBaseSmall};
   height: 40px;
   text-align: left;
   &:hover {
-    background-color: #e6e7e9;
+    background-color: ${({ theme }) => theme.backgroundColorReverse};
     a {
       display: block;
     }
@@ -273,25 +279,25 @@ const Row = styled.tr`
 const Tag = styled.span`
   border: solid 1px #667080;
   text-transform: uppercase;
-  font-family: Helvetica;
+  font-family: ${({ theme }) => theme.fontReading};
   font-size: 12px;
   font-weight: bold;
   text-align: left;
-  color: #667080;
+  color: ${({ theme }) => theme.colorPrimary};
   padding: 2px 10px;
   margin-right: 5px;
 `
 
 const Role = styled.span`
   height: 17px;
-  font-size: 14px;
+  font-size: ${({ theme }) => theme.fontSizeBaseSmall};
   text-align: left;
-  color: #667080;
+  color: ${({ theme }) => theme.colorPrimary};
   text-transform: uppercase;
 `
 
 const Action = styled.a`
-  color: #667080;
+  color: ${({ theme }) => theme.colorPrimary};
   display: none;
 `
 
diff --git a/packages/components-faraday/src/components/Admin/EditUserForm.js b/packages/components-faraday/src/components/Admin/EditUserForm.js
index d6608c363c3838ed17d4732051bed3bd2de627f6..1f908b0a589e2c1b32d9d7e36a107511355a84c0 100644
--- a/packages/components-faraday/src/components/Admin/EditUserForm.js
+++ b/packages/components-faraday/src/components/Admin/EditUserForm.js
@@ -10,8 +10,8 @@ const EditUserForm = ({ roles, journal, user }) => {
   )
   return (
     <div>
-      <h3>Edit user</h3>
-      <h5>{user.email}</h5>
+      <Title>Edit user</Title>
+      <Subtitle>{user.email}</Subtitle>
       <Row>
         <RowItem>
           <Label> First name* </Label>
@@ -64,10 +64,13 @@ const EditUserForm = ({ roles, journal, user }) => {
 
 export default EditUserForm
 
+// #region styles
+
 const Row = styled.div`
   display: flex;
   flex-direction: row;
   margin: 20px 0;
+  background-color: ${({ theme }) => theme.backgroundColorReverse};
 `
 
 const RowItem = styled.div`
@@ -75,7 +78,20 @@ const RowItem = styled.div`
   margin-right: 20px;
 `
 
+const Title = styled.h4`
+  font-size: ${({ theme }) => theme.fontSizeHeading4};
+  color: ${({ theme }) => theme.colorPrimary};
+  margin: 10px 0;
+`
+
+const Subtitle = styled.div`
+  font-size: ${({ theme }) => theme.fontSizeBase};
+  color: ${({ theme }) => theme.colorPrimary};
+  margin: 0;
+`
+
 const Label = styled.div`
-  font-size: 14px;
+  font-size: ${({ theme }) => theme.fontSizeBase};
   text-transform: uppercase;
 `
+// #endregion
diff --git a/packages/components-faraday/src/components/Admin/Pagination.js b/packages/components-faraday/src/components/Admin/Pagination.js
index 72df9dc2e9bd6cc1d17ac6a43ef042cdbb4463d3..78e9c4f0fe45fc4b288660ceb2996af9aaf5336b 100644
--- a/packages/components-faraday/src/components/Admin/Pagination.js
+++ b/packages/components-faraday/src/components/Admin/Pagination.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Icon } from '@pubsweet/ui'
-import styled from 'styled-components'
+import styled, { withTheme } from 'styled-components'
 
 const Pagination = ({
   page,
@@ -9,6 +9,7 @@ const Pagination = ({
   decrementPage,
   hasMore,
   maxLength,
+  theme,
 }) => (
   <Root>
     <Showing>
@@ -17,7 +18,7 @@ const Pagination = ({
     </Showing>
     <Chevrons>
       <IconButton hide={page === 0} onClick={decrementPage}>
-        <Icon color="#667080" size={18}>
+        <Icon color={theme.colorPrimary} size={18}>
           chevron-left
         </Icon>
       </IconButton>
@@ -27,7 +28,7 @@ const Pagination = ({
         }`}
       </span>
       <IconButton hide={!hasMore} onClick={incrementPage}>
-        <Icon color="#667080" size={18}>
+        <Icon color={theme.colorPrimary} size={18}>
           chevron-right
         </Icon>
       </IconButton>
@@ -35,7 +36,7 @@ const Pagination = ({
   </Root>
 )
 
-export default Pagination
+export default withTheme(Pagination)
 
 const Root = styled.div`
   display: flex;
@@ -52,16 +53,20 @@ const IconButton = styled.button`
   border: none;
   cursor: ${({ hide }) => (hide ? 'auto' : 'pointer')};
   display: flex;
-  font-family: Helvetica;
-  font-size: 12px;
+  font-family: ${({ theme }) => theme.fontInterface};
+  font-size: ${({ theme }) => theme.fontSizeBaseSmall};
   text-align: left;
-  color: #667080;
+  color: ${({ theme }) => theme.colorPrimary};
+  background-color: ${({ theme }) => theme.backgroundColor};
   opacity: ${({ hide }) => (hide ? 0 : 1)};
 
   &:active,
   &:focus {
     outline: none;
   }
+  &:hover {
+    opacity: 0.7;
+  }
 `
 
 const Showing = styled.div`
@@ -69,14 +74,14 @@ const Showing = styled.div`
   align-items: center;
 
   span:first-child {
-    font-family: Helvetica;
-    font-size: 14px;
+    font-family: ${({ theme }) => theme.fontInterface};
+    font-size: ${({ theme }) => theme.fontSizeBaseSmall};
     text-align: left;
-    color: #667080;
+    color: ${({ theme }) => theme.colorPrimary};
     margin-right: 10px;
   }
   span:last-child {
-    border: solid 1px #667080;
+    border: ${({ theme }) => theme.borderDefault};
     padding: 2px 10px;
   }
 `
diff --git a/packages/components-faraday/src/components/AppBar/AppBar.js b/packages/components-faraday/src/components/AppBar/AppBar.js
index a8161513b9a708c9c157fbd7d47f22077dadbc40..d44fe4e4daef4ceec8afa4352f2c2bb8ac41755d 100644
--- a/packages/components-faraday/src/components/AppBar/AppBar.js
+++ b/packages/components-faraday/src/components/AppBar/AppBar.js
@@ -17,17 +17,19 @@ const AppBar = ({
   theme,
 }) => (
   <Root>
-    {React.cloneElement(brand, {
-      onClick: goTo('/'),
-    })}
+    <Brand>
+      {React.cloneElement(brand, {
+        onClick: goTo('/'),
+      })}
+    </Brand>
     {user && (
       <User>
         <div onClick={toggleMenu}>
-          <Icon color={theme.colorPrimary}>user</Icon>
+          <Icon color={theme.colorText}>user</Icon>
           <span>
             {get(user, 'firstName') || get(user, 'username') || 'User'}
           </span>
-          <Icon color={theme.colorPrimary}>chevron-down</Icon>
+          <Icon color={theme.colorText}>chevron-down</Icon>
         </div>
         {expanded && (
           <Dropdown>
@@ -53,16 +55,26 @@ const Root = styled.div`
   font-family: ${props => props.theme.fontInterface};
   display: flex;
   justify-content: space-between;
-  height: 40px;
+  height: 60px;
+  flex-grow: 1;
+  position: fixed;
+  width: 100%;
+  z-index: 10;
+  background-color: #ffffff;
+`
+
+const Brand = styled.div`
   padding: 10px 20px;
+  cursor: pointer;
 `
 
 const User = styled.div`
   align-items: center;
   display: flex;
   justify-content: space-between;
-  height: 40px;
+  height: 60px;
   position: relative;
+  padding: 10px 20px;
 
   > div:first-child {
     align-items: center;
@@ -71,7 +83,7 @@ const User = styled.div`
   }
 
   & span {
-    color: ${props => props.theme.colorPrimary};
+    color: ${props => props.theme.colorText};
     font-family: ${props => props.theme.fontHeading};
     font-size: ${props => props.theme.fontSizeBase};
     margin-left: 10px;
@@ -84,14 +96,14 @@ const Dropdown = styled.div`
     `${theme.borderWidth} ${theme.borderStyle} ${theme.colorFurniture}`};
   position: absolute;
   min-width: 150px;
-  right: 0;
-  top: 50px;
+  right: 20px;
+  top: 70px;
   z-index: 10;
 `
 
 const DropdownOption = styled.div`
   align-items: center;
-  color: ${props => props.theme.colorPrimary};
+  color: ${props => props.theme.colorText};
   cursor: pointer;
   display: flex;
   justify-content: flex-start;
diff --git a/packages/components-faraday/src/components/AuthorList/Author.js b/packages/components-faraday/src/components/AuthorList/Author.js
index 0bc1540af854eef4bb0a351e10258c5dbb243610..e7609082e8b4d840523004bc1874a8796a7a0dd7 100644
--- a/packages/components-faraday/src/components/AuthorList/Author.js
+++ b/packages/components-faraday/src/components/AuthorList/Author.js
@@ -63,8 +63,8 @@ const Header = styled.div`
 `
 
 const Title = styled.span`
-  font-family: Helvetica;
-  font-size: 14px;
+  font-family: ${({ theme }) => theme.fontHeading};
+  font-size: ${({ theme }) => theme.fontSizeBaseSmall};
   font-weight: 600;
 `
 
@@ -100,11 +100,10 @@ const AuthorContainer = styled.div`
 `
 
 const Root = styled.div`
-  border: 1px solid #444;
   display: flex;
   flex-direction: row;
   margin-bottom: 10px;
-  border: ${({ isOver }) =>
-    isOver ? '1px dashed #444 !important' : '1px solid #444'};
+  border: ${({ isOver, theme }) =>
+    isOver ? '1px dashed #444 !important' : theme.borderDefault};
 `
 // #endregion
diff --git a/packages/components-faraday/src/components/AuthorList/AuthorAdder.js b/packages/components-faraday/src/components/AuthorList/AuthorAdder.js
index 2973fd02cc6cb0fa431febb534e80f3de78900cd..299fba90c66b52e6d4e5098d380f5afbe9ed3223 100644
--- a/packages/components-faraday/src/components/AuthorList/AuthorAdder.js
+++ b/packages/components-faraday/src/components/AuthorList/AuthorAdder.js
@@ -1,15 +1,14 @@
 import React from 'react'
 import { get } from 'lodash'
-import classnames from 'classnames'
 import { connect } from 'react-redux'
 import { Button } from '@pubsweet/ui'
 import { reduxForm } from 'redux-form'
+import styled from 'styled-components'
 import { compose, withProps } from 'recompose'
 import { selectCurrentUser } from 'xpub-selectors'
 
 import countries from './countries'
 import { Spinner } from '../UIComponents/'
-import classes from './AuthorList.local.scss'
 import { getAuthorFetching } from '../../redux/authors'
 import { MenuItem, ValidatedTextField } from './FormItems'
 
@@ -27,22 +26,20 @@ const AuthorAdder = ({
   handleSubmit,
   isFetching,
 }) => (
-  <div className={classnames(classes.adder)}>
+  <Root>
     <Button onClick={setEditMode(true)} primary>
       {authors.length === 0 ? '+ Add submitting author' : '+ Add author'}
     </Button>
     {editMode && (
-      <div className={classnames(classes['form-body'])}>
-        <span className={classnames(classes.title)}>
-          {authors.length === 0 ? 'Submitting author' : 'Author'}
-        </span>
-        <div className={classnames(classes.row)}>
+      <FormBody>
+        <Title>{authors.length === 0 ? 'Submitting author' : 'Author'}</Title>
+        <Row>
           <ValidatedTextField isRequired label="First name" name="firstName" />
           <ValidatedTextField label="Middle name" name="middleName" />
           <ValidatedTextField isRequired label="Last name" name="lastName" />
-        </div>
+        </Row>
 
-        <div className={classnames(classes.row)}>
+        <Row>
           <ValidatedTextField
             isRequired
             label="Email"
@@ -55,8 +52,8 @@ const AuthorAdder = ({
             name="affiliation"
           />
           <MenuItem label="Country" name="country" options={countries} />
-        </div>
-        <div className={classnames(classes['form-buttons'])}>
+        </Row>
+        <ButtonsContainer>
           <Button onClick={setEditMode(false)}>Cancel</Button>
           {!isFetching ? (
             <Button onClick={handleSubmit} primary>
@@ -65,10 +62,10 @@ const AuthorAdder = ({
           ) : (
             <Spinner />
           )}
-        </div>
-      </div>
+        </ButtonsContainer>
+      </FormBody>
     )}
-  </div>
+  </Root>
 )
 
 export default compose(
@@ -114,3 +111,36 @@ export default compose(
     },
   }),
 )(AuthorAdder)
+
+// #region styled-components
+const ButtonsContainer = styled.div`
+  display: flex;
+  justify-content: space-around;
+  margin: 15px 0 0 0;
+`
+
+const Row = styled.div`
+  display: flex;
+  flex-direction: row;
+  margin: 10px 0;
+`
+
+const Title = styled.span`
+  font-size: ${({ theme }) => theme.fontSizeBase};
+  font-weight: 500;
+  margin: 10px 0;
+  text-transform: uppercase;
+`
+
+const FormBody = styled.div`
+  border: ${({ theme }) => theme.borderDefault};
+  margin-top: 10px;
+  padding: 10px;
+`
+
+const Root = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin: 10px 0;
+`
+// #endregion
diff --git a/packages/components-faraday/src/components/AuthorList/AuthorEditor.js b/packages/components-faraday/src/components/AuthorList/AuthorEditor.js
index 2c96b13ca6dadb09192d6e2d3826d54ccb0c99ad..ee3394026767dddd2d4cbd5ce7ea473d31a2ac19 100644
--- a/packages/components-faraday/src/components/AuthorList/AuthorEditor.js
+++ b/packages/components-faraday/src/components/AuthorList/AuthorEditor.js
@@ -1,8 +1,8 @@
 import React, { Fragment } from 'react'
 import { pick } from 'lodash'
-import { Icon } from '@pubsweet/ui'
+import { Icon, Checkbox } from '@pubsweet/ui'
 import { connect } from 'react-redux'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 import { compose, withHandlers, withProps } from 'recompose'
 import { reduxForm, Field, change as changeForm } from 'redux-form'
 
@@ -19,7 +19,7 @@ const emailValidator = value =>
   emailRegex.test(value) ? undefined : 'Invalid email'
 
 const renderCheckbox = ({ input }) => (
-  <input checked={input.value} type="checkbox" {...input} />
+  <Checkbox checked={input.value} type="checkbox" {...input} />
 )
 
 const AuthorEdit = ({
@@ -134,6 +134,12 @@ export default compose(
 )(AuthorEdit)
 
 // #region styled-components
+const defaultText = css`
+  color: ${({ theme }) => theme.colorText};
+  font-size: ${({ theme }) => theme.fontSizeBaseSmall};
+  font-family: ${({ theme }) => theme.fontReading};
+`
+
 const Row = styled.div`
   display: flex;
   flex-direction: row;
@@ -146,15 +152,15 @@ const TitleContainer = styled.div`
   flex-direction: row;
 
   > span {
-    font-family: Helvetica;
-    font-size: 14px;
+    ${defaultText};
+    font-size: ${({ theme }) => theme.fontSizeHeading6};
+    margin-right: 10px;
     font-weight: 600;
     text-align: left;
   }
 
   label {
-    font-family: Helvetica;
-    font-size: 12px;
+    ${defaultText};
     text-align: left;
   }
 `
@@ -184,7 +190,7 @@ const Header = styled.div`
 `
 
 const Root = styled.div`
-  border: 1px solid #444;
+  border: ${({ theme }) => theme.borderDefault};
   margin: 10px 0;
   padding: 10px;
   display: flex;
diff --git a/packages/components-faraday/src/components/AuthorList/AuthorList.js b/packages/components-faraday/src/components/AuthorList/AuthorList.js
index 76d504e8422ae749f454ab140913c01c3d15c4b5..abd88798d25e3783d5d7800ff15ef2e35666face 100644
--- a/packages/components-faraday/src/components/AuthorList/AuthorList.js
+++ b/packages/components-faraday/src/components/AuthorList/AuthorList.js
@@ -146,7 +146,7 @@ export default compose(
 
 // #region styled-components
 const Root = styled.div`
-  border: 1px solid #667080;
+  border: ${({ theme }) => theme.borderDefault};
   padding: 0 10px;
 `
 // #endregion
diff --git a/packages/components-faraday/src/components/AuthorList/AuthorList.local.scss b/packages/components-faraday/src/components/AuthorList/AuthorList.local.scss
deleted file mode 100644
index e9316340c2fbe91ce0d01bc180ddd0f617d364bd..0000000000000000000000000000000000000000
--- a/packages/components-faraday/src/components/AuthorList/AuthorList.local.scss
+++ /dev/null
@@ -1,134 +0,0 @@
-.row {
-  display: flex;
-  flex-direction: row;
-  margin: 10px 0;
-}
-
-.hide {
-  opacity: 0;
-}
-
-.dashed {
-  border: 1px dashed #444 !important;
-}
-
-.label {
-  font-size: 14px;
-  font-weight: 300;
-  text-transform: uppercase;
-}
-
-.author {
-  border: 1px solid #444;
-  display: flex;
-  flex-direction: row;
-  margin-bottom: 10px;
-
-  .container {
-    flex: 1;
-    padding: 10px;
-  }
-
-  .title {
-    font-size: 16px;
-    font-weight: 600;
-    margin: 5px;
-  }
-
-  .label-container {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    margin: 5px;
-
-    .value {
-      font-size: 16px;
-      font-weight: 600;
-    }
-  }
-}
-
-.editor-body {
-  border: 1px solid #444;
-  margin: 10px 0;
-  padding: 10px;
-
-  .form-buttons {
-    display: flex;
-    justify-content: space-around;
-    margin: 15px 0 0 0;
-  }
-}
-
-.adder {
-  display: flex;
-  flex-direction: column;
-  margin: 10px 0;
-
-  .form-body {
-    border: 1px solid #444;
-    margin-top: 10px;
-    padding: 10px;
-  }
-
-  .form-buttons {
-    display: flex;
-    justify-content: space-around;
-    margin: 15px 0 0 0;
-  }
-
-  .button {
-    background-color: #444;
-    border: none;
-    color: #eee;
-    cursor: pointer;
-    font-size: 14px;
-    font-weight: 500;
-    height: 24px;
-    text-transform: uppercase;
-
-    &:hover {
-      background-color: #666;
-    }
-
-    &:focus,
-    &:active {
-      outline: none;
-    }
-  }
-
-  .title {
-    font-size: 18px;
-    font-weight: 500;
-    margin: 10px 0;
-    text-transform: uppercase;
-  }
-}
-
-.validated-text {
-  flex: 1;
-  margin-right: 20px;
-}
-
-.button-container {
-  display: flex;
-  flex-direction: column;
-  padding: 0 10px;
-}
-
-.delete-button {
-  align-items: center;
-  cursor: pointer;
-  display: flex;
-  flex: 1;
-  justify-content: center;
-}
-
-.corresponding {
-  align-items: center;
-  cursor: pointer;
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  justify-content: center;
-}
diff --git a/packages/components-faraday/src/components/AuthorList/FormItems.js b/packages/components-faraday/src/components/AuthorList/FormItems.js
index 440860bad801b3898b51cc715b9952ac4e3ac107..7a8a37a59f6c3b6073d92627b64cefe9eef74fc9 100644
--- a/packages/components-faraday/src/components/AuthorList/FormItems.js
+++ b/packages/components-faraday/src/components/AuthorList/FormItems.js
@@ -1,11 +1,8 @@
 import React from 'react'
-import classnames from 'classnames'
-import styled from 'styled-components'
 import { required } from 'xpub-validators'
+import styled, { withTheme, css } from 'styled-components'
 import { TextField, Menu, ValidatedField, Icon } from '@pubsweet/ui'
 
-import classes from './FormItems.local.scss'
-
 export const ValidatedTextField = ({
   label,
   name,
@@ -14,48 +11,81 @@ export const ValidatedTextField = ({
 }) => {
   const v = [isRequired && required, ...validators].filter(Boolean)
   return (
-    <div className={classnames(classes['validated-text'])}>
-      <span className={classnames(classes.label)}>{label}</span>
+    <ValidatedTextFieldRoot>
+      <StyledLabel>{label}</StyledLabel>
       <ValidatedField component={TextField} name={name} validate={v} />
-    </div>
+    </ValidatedTextFieldRoot>
   )
 }
 
 export const MenuItem = ({ label, name, options }) => (
-  <div className={classnames(classes['validated-text'], classes['fix-height'])}>
-    <span className={classnames(classes.label)}>{label}</span>
+  <MenuItemRoot>
+    <StyledLabel>{label}</StyledLabel>
     <ValidatedField
       component={input => <Menu {...input} options={options} />}
       name={name}
       validate={[required]}
     />
-  </div>
+  </MenuItemRoot>
 )
 
 export const Label = ({ label, value }) => (
-  <LabelContainer>
+  <LabelRoot>
     <span>{label}</span>
     <span>{value}</span>
-  </LabelContainer>
+  </LabelRoot>
 )
 
-export const DragHandle = () => (
-  <div className={classnames(classes['drag-handle'])}>
-    <Icon>chevron_up</Icon>
-    <Icon size={16}>menu</Icon>
-    <Icon>chevron_down</Icon>
-  </div>
-)
+export const DragHandle = withTheme(({ theme }) => (
+  <DragHandleRoot>
+    <Icon color={theme.colorFurniture}>chevron_up</Icon>
+    <Icon color={theme.colorFurniture} size={16}>
+      menu
+    </Icon>
+    <Icon color={theme.colorFurniture}>chevron_down</Icon>
+  </DragHandleRoot>
+))
 
 // #region styled-components
-const LabelContainer = styled.div`
+const defaultText = css`
+  color: ${({ theme }) => theme.colorText};
+  font-size: ${({ theme }) => theme.fontSizeBaseSmall};
+  font-family: ${({ theme }) => theme.fontReading};
+`
+
+const ValidatedTextFieldRoot = styled.div`
+  flex: 1;
+  margin-right: 5px;
+`
+
+const MenuItemRoot = styled.div`
+  flex: 1;
+`
+
+const StyledLabel = styled.span`
+  ${defaultText};
+  font-weight: 300;
+  text-transform: uppercase;
+`
+
+const DragHandleRoot = styled.div`
+  align-items: center;
+  border-right: ${({ theme }) => theme.borderDefault};
+  cursor: move;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+`
+
+const LabelRoot = styled.div`
   display: flex;
+  flex: 1;
   flex-direction: column;
   margin: 5px;
-  width: ${({ width }) => `${width || 175}px`};
+  width: ${({ width }) => `${width || 150}px`};
 
   span:first-child {
-    font-size: 14px;
+    ${defaultText};
     font-weight: 300;
     overflow: hidden;
     text-transform: uppercase;
@@ -64,7 +94,7 @@ const LabelContainer = styled.div`
   }
 
   span:last-child {
-    font-size: 16px;
+    ${defaultText};
     font-weight: 600;
     overflow: hidden;
     text-overflow: ellipsis;
diff --git a/packages/components-faraday/src/components/AuthorList/FormItems.local.scss b/packages/components-faraday/src/components/AuthorList/FormItems.local.scss
deleted file mode 100644
index 32f8b5a088539b63a97c02402affc2fac1e8d073..0000000000000000000000000000000000000000
--- a/packages/components-faraday/src/components/AuthorList/FormItems.local.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-.validated-text {
-  flex: 1;
-}
-
-.label {
-  font-size: 14px;
-  font-weight: 300;
-  text-transform: uppercase;
-}
-
-.label-container {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  margin: 5px;
-
-  .value {
-    font-size: 16px;
-    font-weight: 600;
-  }
-}
-
-.fix-height {
-  div[class^='Menu-local_options-'] {
-    height: 250px;
-    overflow-y: scroll;
-  }
-}
-
-.drag-handle {
-  align-items: center;
-  border-right: 1px solid #444;
-  cursor: move;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
diff --git a/packages/components-faraday/src/components/Dashboard/AbstractModal.js b/packages/components-faraday/src/components/Dashboard/AbstractModal.js
index 108c02b4eea6232d45ea91c90fd074ae70777f15..4ae9f2774ddfaf59e9f940fc25903bd20fbcd0a6 100644
--- a/packages/components-faraday/src/components/Dashboard/AbstractModal.js
+++ b/packages/components-faraday/src/components/Dashboard/AbstractModal.js
@@ -1,12 +1,12 @@
 import React from 'react'
 import { get } from 'lodash'
 import { Icon } from '@pubsweet/ui'
-import styled from 'styled-components'
+import styled, { css, withTheme } from 'styled-components'
 
-const AbstractModal = ({ metadata, hideModal }) => (
+const AbstractModal = ({ metadata, hideModal, theme }) => (
   <Root>
     <CloseIcon onClick={hideModal}>
-      <Icon color="#667080">x</Icon>
+      <Icon color={theme.colorPrimary}>x</Icon>
     </CloseIcon>
     <Title dangerouslySetInnerHTML={{ __html: get(metadata, 'title') }} />
     <Subtitle>Abstract</Subtitle>
@@ -14,29 +14,33 @@ const AbstractModal = ({ metadata, hideModal }) => (
   </Root>
 )
 
-export default AbstractModal
+export default withTheme(AbstractModal)
 
 // #region styled-components
+const defaultText = css`
+  color: ${({ theme }) => theme.colorText};
+  font-family: ${({ theme }) => theme.fontReading};
+  font-size: ${({ theme }) => theme.fontSizeBaseSmall};
+`
+
 const Root = styled.div`
-  background-color: #fff;
+  background-color: ${({ theme }) => theme.backgroundColor};
   padding: 50px 32px 32px 32px;
-  border: 1px solid #667080;
+  border: ${({ theme }) => theme.borderDefault};
   position: relative;
   width: 600px;
   max-height: 500px;
+  overflow-y: scroll;
 `
 
 const Title = styled.div`
-  font-family: Helvetica;
-  font-size: 18px;
+  ${defaultText};
+  font-size: ${({ theme }) => theme.fontSizeBase};
   text-align: left;
-  color: #667080;
 `
 
 const Subtitle = styled.div`
-  color: #667080;
-  font-family: Helvetica;
-  font-size: 14px;
+  ${defaultText};
   font-weight: bold;
   line-height: 1.57;
   margin-bottom: 8px;
@@ -44,9 +48,7 @@ const Subtitle = styled.div`
 `
 
 const Content = styled.div`
-  color: #667080;
-  font-family: Helvetica;
-  font-size: 14px;
+  ${defaultText};
   line-height: 1.57;
   margin-top: 10px;
   text-align: left;
diff --git a/packages/components-faraday/src/components/Dashboard/Dashboard.js b/packages/components-faraday/src/components/Dashboard/Dashboard.js
index 6fb0797f1e44e513604adfb3cc14886fd4738687..b2e9a80b984e317a71f6417d2151cc3b26efcbe3 100644
--- a/packages/components-faraday/src/components/Dashboard/Dashboard.js
+++ b/packages/components-faraday/src/components/Dashboard/Dashboard.js
@@ -1,10 +1,10 @@
 import React from 'react'
 import { get } from 'lodash'
 import { Button } from '@pubsweet/ui'
+import styled from 'styled-components'
 import { compose, withHandlers } from 'recompose'
 import { withModal } from 'pubsweet-component-modal/src/components'
 
-import classes from './Dashboard.local.scss'
 import AbstractModal from './AbstractModal'
 import DashboardItems from './DashboardItems'
 import DashboardFilters from './DashboardFilters'
@@ -23,15 +23,15 @@ const Dashboard = ({
   showAbstractModal,
   ...rest
 }) => (
-  <div className={classes.root}>
-    <div className={classes.header}>
-      <div className={classes.heading}>Manuscripts</div>
-      <div className={classes.headerButtons}>
+  <Root>
+    <Header>
+      <Heading>Manuscripts</Heading>
+      <HeaderButtons>
         <Button onClick={createDraftSubmission} primary>
           New
         </Button>
-      </div>
-    </div>
+      </HeaderButtons>
+    </Header>
     <DashboardFilters
       changeFilterValue={changeFilterValue}
       getFilterOptions={getFilterOptions}
@@ -41,7 +41,7 @@ const Dashboard = ({
       list={getItems()}
       showAbstractModal={showAbstractModal}
     />
-  </div>
+  </Root>
 )
 
 export default compose(
@@ -73,3 +73,29 @@ export default compose(
     },
   }),
 )(Dashboard)
+
+// #region styles
+
+const Root = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin: auto;
+  max-width: 60em;
+`
+
+const Header = styled.div`
+  display: flex;
+  justify-content: space-between;
+`
+
+const Heading = styled.div`
+  color: ${({ theme }) => theme.colorPrimary};
+  font-size: 1.6em;
+  text-transform: uppercase;
+`
+
+const HeaderButtons = styled.div`
+  display: flex;
+`
+
+// #endregion
diff --git a/packages/components-faraday/src/components/Dashboard/Dashboard.local.scss b/packages/components-faraday/src/components/Dashboard/Dashboard.local.scss
deleted file mode 100644
index b4fb082487cd95ba901f0c2dcfb120d20b300312..0000000000000000000000000000000000000000
--- a/packages/components-faraday/src/components/Dashboard/Dashboard.local.scss
+++ /dev/null
@@ -1,193 +0,0 @@
-.root {
-  display: flex;
-  flex-direction: column;
-  margin: auto;
-  max-width: 60em;
-}
-
-.filtersContainer {
-  border-bottom: 1px solid var(--color-primary);
-  color: var(--color-primary);
-  display: flex;
-  justify-content: space-between;
-  margin: 1em 0;
-  padding-bottom: 1em;
-}
-
-.filters {
-  align-items: flex-end;
-  display: flex;
-
-  > span {
-    border: 1px solid gray;
-    margin: 0 0.5em;
-    padding: 0 5px;
-  }
-
-  .filter-group {
-    align-items: flex-start;
-    display: flex;
-    flex-direction: column;
-
-    > span {
-      margin-left: 10px;
-    }
-  }
-}
-
-.disabled {
-  cursor: not-allowed;
-
-  svg {
-    stroke: gray;
-  }
-}
-
-.viewMode {
-  align-items: center;
-  cursor: pointer;
-  display: flex;
-
-  .icon {
-    display: flex;
-    margin: 0 0.3em;
-
-    svg {
-      stroke: var(--color-primary);
-    }
-  }
-}
-
-.section {
-  margin: 0.5em 0;
-}
-
-.header {
-  display: flex;
-  justify-content: space-between;
-}
-
-.headerButtons {
-  display: flex;
-
-  .admin-button {
-    margin-right: 15px;
-  }
-}
-
-.heading {
-  color: var(--color-primary);
-  font-size: 1.6em;
-  text-transform: uppercase;
-}
-
-.empty {
-  display: flex;
-  justify-content: center;
-}
-
-.card {
-  align-items: center;
-  border: 1px solid var(--color-primary);
-  display: flex;
-  flex-wrap: wrap;
-  margin: 0.5em 0;
-  padding: 0.5em;
-
-  .leftSide {
-    flex: 1 0 80%;
-    flex-direction: column;
-
-    .quickInfo {
-      align-items: center;
-      display: flex;
-      flex-direction: row;
-    }
-  }
-
-  .rightSide {
-    align-items: center;
-    border-left: 1px solid var(--color-primary);
-    display: flex;
-    flex: 1 0 15%;
-    justify-content: space-around;
-    padding: 0 0.5em;
-  }
-}
-
-.expandedView {
-  border-top: 1px solid var(--color-primary);
-  display: flex;
-  flex: 0 1 100%;
-  padding: 0.5em 0;
-}
-
-.column3 {
-  display: flex;
-  flex: 1 0 30%;
-  flex-direction: row;
-}
-
-.column2 {
-  display: flex;
-  flex-direction: column;
-  margin: 0.5em;
-
-  > div,
-  > a {
-    margin: 0.5em 0;
-  }
-}
-
-.status {
-  border: 1px solid var(--color-primary);
-  margin: 0.5em 0;
-  padding: 0.2em 0.5em;
-  text-transform: uppercase;
-}
-
-.button {
-  margin: 0.3em 0.5em;
-  padding: 0 0.5em;
-}
-
-.pointer {
-  cursor: pointer;
-}
-
-.version {
-  margin-left: 1em;
-}
-
-.modal {
-  align-items: center;
-  background: rgba(255, 255, 255, 0.95);
-  bottom: 0;
-  display: flex;
-  justify-content: center;
-  left: 0;
-  position: fixed;
-  right: 0;
-  top: 0;
-}
-
-.modalContent {
-  border: 1px solid var(--color-primary);
-  height: 50vw;
-  margin: 0 auto;
-  padding: 20px;
-  position: relative;
-  width: 50vw;
-
-  .modalText {
-    height: calc(100% - 60px);
-    overflow-y: scroll;
-    padding-right: 10px;
-  }
-
-  button {
-    bottom: 20px;
-    position: absolute;
-    right: 20px;
-  }
-}
diff --git a/packages/components-faraday/src/components/Dashboard/DashboardCard.js b/packages/components-faraday/src/components/Dashboard/DashboardCard.js
index a3fcd76c5fa64844b93750e3b8a422112fb8bba9..06dba138b991aa68954de0401e12df0286b9babc 100644
--- a/packages/components-faraday/src/components/Dashboard/DashboardCard.js
+++ b/packages/components-faraday/src/components/Dashboard/DashboardCard.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { get, isEmpty } from 'lodash'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 import { Button, Icon } from '@pubsweet/ui'
 import { compose, getContext } from 'recompose'
 
@@ -118,15 +118,19 @@ const DashboardCard = ({
 export default compose(getContext({ journal: PropTypes.object }))(DashboardCard)
 
 // #region styled-components
+const defaultText = css`
+  color: ${({ theme }) => theme.colorText};
+  font-family: ${({ theme }) => theme.fontReading};
+  font-size: ${({ theme }) => theme.fontSizeBaseSmall};
+`
+
 const PreviewContainer = styled.div`
   display: flex;
   margin-top: 18px;
 `
 
 const AuthorList = styled.span`
-  color: #667080;
-  font-family: Helvetica;
-  font-size: 14px;
+  ${defaultText};
   overflow: hidden;
   text-overflow: ellipsis;
   text-align: left;
@@ -143,9 +147,7 @@ const Authors = styled.div`
   margin-top: 15px;
 
   span:first-child {
-    color: #667080;
-    font-family: Helvetica;
-    font-size: 12px;
+    ${defaultText};
     margin-right: 8px;
     text-align: left;
     text-transform: uppercase;
@@ -153,15 +155,13 @@ const Authors = styled.div`
 `
 
 const ActionButtons = styled(Button)`
+  ${defaultText};
   align-items: center;
-  background-color: #667080;
+  background-color: ${({ theme }) => theme.colorPrimary};
+  color: ${({ theme }) => theme.colorTextReverse};
   display: flex;
-  height: 20px;
   padding: 4px 8px;
-  font-family: Helvetica;
-  font-size: 12px;
   text-align: center;
-  color: #ffffff;
 `
 
 const LeftDetails = styled.div`
@@ -186,26 +186,21 @@ const RightDetails = styled.div`
 `
 
 const Label = styled.span`
-  color: #667080;
-  font-family: Helvetica;
-  font-size: 12px;
+  ${defaultText};
   text-align: left;
   text-transform: uppercase;
   width: 150px;
 `
 
 const JournalTitle = styled.span`
-  color: #667080;
-  font-family: Helvetica;
-  font-size: 14px;
+  ${defaultText};
+  font-size: ${({ theme }) => theme.fontSizeHeading6};
   font-weight: bold;
   text-align: left;
 `
 
 const Issue = styled.span`
-  color: #667080;
-  font-family: Helvetica;
-  font-size: 14px;
+  ${defaultText};
   text-align: left;
 `
 
@@ -227,9 +222,7 @@ const ListView = styled.div`
 `
 
 const ManuscriptId = styled.span`
-  color: #667080;
-  font-family: Helvetica;
-  font-size: 12px;
+  ${defaultText};
   margin-left: 8px;
   text-align: left;
   text-decoration: underline;
@@ -237,18 +230,14 @@ const ManuscriptId = styled.span`
 `
 
 const Version = styled.span`
-  color: #667080;
-  font-family: Helvetica;
-  font-size: 13px;
+  ${defaultText};
   text-align: left;
 `
 const Details = styled.div`
   align-items: center;
-  color: #667080;
   cursor: pointer;
   display: flex;
-  font-family: Helvetica;
-  font-size: 14px;
+  ${defaultText};
   margin-left: 8px;
   text-decoration: underline;
   text-align: center;
@@ -259,17 +248,19 @@ const ClickableIcon = styled.div`
   margin: 0 7px;
 
   svg {
-    stroke: ${({ disabled }) => (disabled ? '#eee' : '#667080')};
+    stroke: ${({ disabled, theme }) =>
+      disabled ? theme.colorBackgroundHue : theme.colorPrimary};
   }
 `
 
 const Card = styled.div`
   align-items: center;
-  border: 1px solid #667080;
+  border: ${({ theme }) => theme.borderDefault};
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   margin-bottom: 10px;
+  background-color: ${({ theme }) => theme.backgroundColorReverse};
 `
 
 const Right = styled.div`
@@ -282,7 +273,7 @@ const Right = styled.div`
 `
 
 const Left = styled.div`
-  border-right: 1px solid #667080;
+  border-right: ${({ theme }) => theme.borderDefault};
   display: flex;
   flex-direction: column;
   flex: 5;
@@ -304,10 +295,8 @@ const ManuscriptInfo = styled.div`
 `
 
 const ManuscriptType = styled.div`
-  border: 1px solid #667080;
-  color: #667080;
-  font-family: Helvetica;
-  font-size: 12px;
+  border: ${({ theme }) => theme.borderDefault};
+  ${defaultText};
   font-weight: bold;
   padding: 6px 4px;
   margin-left: 10px;
@@ -316,28 +305,23 @@ const ManuscriptType = styled.div`
 `
 
 const Title = styled.span`
-  color: #667080;
-  font-family: Helvetica;
-  font-size: 18px;
+  ${defaultText};
+  font-size: ${({ theme }) => theme.fontSizeHeading5};
   text-align: left;
 `
 
 const Status = styled.div`
-  border: 1px solid #667080;
-  color: #667080;
-  font-family: Helvetica;
-  font-size: 12px;
+  border: ${({ theme }) => theme.borderDefault};
+  ${defaultText};
   font-weight: bold;
-  text-align: left;
   margin: 0.5em 0;
   padding: 0.2em 0.5em;
+  text-align: left;
   text-transform: uppercase;
 `
 
 const DateField = styled.span`
-  color: #667080;
-  font-family: Helvetica;
-  font-size: 13px;
+  ${defaultText};
   margin: 0 8px;
   text-align: left;
 `
@@ -349,9 +333,7 @@ const ClickableIconContainer = styled.div`
   margin-right: 8px;
 
   span:last-child {
-    color: #667080;
-    font-family: Helvetica;
-    font-size: 14px;
+    ${defaultText};
     margin-left: 8px;
     text-align: left;
     text-decoration: underline;
diff --git a/packages/components-faraday/src/components/Dashboard/DashboardFilters.js b/packages/components-faraday/src/components/Dashboard/DashboardFilters.js
index b7ca2b2afd595966fbbc1eb96f26ab3313ac3e73..f51cf55e63db4a5fe8ca487ce4d9754c68152705 100644
--- a/packages/components-faraday/src/components/Dashboard/DashboardFilters.js
+++ b/packages/components-faraday/src/components/Dashboard/DashboardFilters.js
@@ -1,8 +1,7 @@
 import React from 'react'
 import { Menu } from '@pubsweet/ui'
 import { compose, withHandlers } from 'recompose'
-
-import classes from './Dashboard.local.scss'
+import styled from 'styled-components'
 
 const sortOptions = [
   { label: 'Newest first', value: 'newest' },
@@ -19,29 +18,29 @@ const DashboardFilters = ({
   getFilterOptions,
   changeFilterValue,
 }) => (
-  <div className={classes.filtersContainer}>
-    <div className={classes.filters}>
+  <Root>
+    <FiltersContainer>
       Filter view:
-      <div className={classes['filter-group']}>
+      <FilterGroup>
         <span>Owner</span>
         <Menu
           onChange={changeFilterValue('owner')}
           options={getFilterOptions('owner')}
         />
-      </div>
-      <div className={classes['filter-group']}>
+      </FilterGroup>
+      <FilterGroup>
         <span>Status</span>
         <Menu
           onChange={changeFilterValue('status')}
           options={getFilterOptions('status')}
         />
-      </div>
-      <div className={classes['filter-group']}>
+      </FilterGroup>
+      <FilterGroup>
         <span>Sort</span>
         <Menu onChange={changeSort} options={sortOptions} />
-      </div>
-    </div>
-  </div>
+      </FilterGroup>
+    </FiltersContainer>
+  </Root>
 )
 
 export default compose(
@@ -51,3 +50,37 @@ export default compose(
     },
   }),
 )(DashboardFilters)
+
+// #region styles
+
+const Root = styled.div`
+  border-bottom: ${({ theme }) => theme.borderDefault};
+  color: ${({ theme }) => theme.colorPrimary};
+  display: flex;
+  justify-content: space-between;
+  margin: 1em 0;
+  padding-bottom: 1em;
+`
+
+const FiltersContainer = styled.div`
+  align-items: flex-end;
+  display: flex;
+
+  > span {
+    border: ${({ theme }) => theme.borderDefault};
+    margin: 0 0.5em;
+    padding: 0 5px;
+  }
+`
+
+const FilterGroup = styled.div`
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+
+  > span {
+    margin-left: 10px;
+  }
+`
+
+// #endregion
diff --git a/packages/components-faraday/src/components/Dashboard/DashboardItems.js b/packages/components-faraday/src/components/Dashboard/DashboardItems.js
index fa17033984d99c24b932117ba9bf84ad025d3ca2..2fe1261999f12aa4bf14026015cfd8307cd091a1 100644
--- a/packages/components-faraday/src/components/Dashboard/DashboardItems.js
+++ b/packages/components-faraday/src/components/Dashboard/DashboardItems.js
@@ -1,8 +1,8 @@
 import React from 'react'
+import styled from 'styled-components'
 
 import Item from './DashboardCard'
 import withVersion from './withVersion'
-import classes from './Dashboard.local.scss'
 
 const DashboardItem = withVersion(Item)
 
@@ -14,13 +14,11 @@ const DashboardItems = ({
 }) => (
   <div>
     {!list.length && (
-      <div className={classes.empty}>
-        Nothing to do at the moment. Please upload a manuscript.
-      </div>
+      <Empty>Nothing to do at the moment. Please upload a manuscript.</Empty>
     )}
 
     {!!list.length && (
-      <div className={classes.section}>
+      <Section>
         {list.map(p => (
           <DashboardItem
             deleteProject={deleteProject}
@@ -30,9 +28,22 @@ const DashboardItems = ({
             showAbstractModal={showAbstractModal}
           />
         ))}
-      </div>
+      </Section>
     )}
   </div>
 )
 
 export default DashboardItems
+
+// #region styles
+
+const Empty = styled.div`
+  display: flex;
+  justify-content: center;
+`
+
+const Section = styled.div`
+  margin: 0.5em 0;
+`
+
+// #endregion
diff --git a/packages/components-faraday/src/components/Files/FileItem.js b/packages/components-faraday/src/components/Files/FileItem.js
index 0d70a47081d14940fdffd72db1e0669239b84a46..da8af74567377e54d6c21edcbd7549fb8000f2d5 100644
--- a/packages/components-faraday/src/components/Files/FileItem.js
+++ b/packages/components-faraday/src/components/Files/FileItem.js
@@ -1,8 +1,6 @@
 import React from 'react'
-import classnames from 'classnames'
 import { Icon } from '@pubsweet/ui'
-
-import classes from './FileItem.local.scss'
+import styled from 'styled-components'
 
 const parseFileSize = size => {
   const kbSize = size / 1000
@@ -28,21 +26,61 @@ const FileItem = ({
   previewFile,
   ...rest
 }) => (
-  <div className={classnames(classes['file-item'])}>
+  <Root>
     {dragHandle}
-    <div className={classnames(classes.info)}>
+    <Info>
       <span>{name}</span>
       <span>{parseFileSize(size)}</span>
-    </div>
-    <div className={classnames(classes.buttons)}>
+    </Info>
+    <Buttons>
       <button onClick={previewFile(id)}>
         <Icon color="#666">eye</Icon>
       </button>
       <button onClick={removeFile(id)} title="Delete">
         <Icon color="#666">trash-2</Icon>
       </button>
-    </div>
-  </div>
+    </Buttons>
+  </Root>
 )
 
 export default FileItem
+
+// #region styles
+const Root = styled.div`
+  align-items: center;
+  border: ${({ theme }) => theme.borderDefault};
+  display: flex;
+  margin: 5px;
+`
+
+const Info = styled.div`
+  border-right: ${({ theme }) => theme.borderDefault};
+  display: flex;
+  flex: 1;
+  justify-content: space-between;
+  padding: 2px 10px 2px 0;
+`
+
+const Buttons = styled.div`
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  margin: 0 10px;
+
+  a {
+    align-items: center;
+    display: flex;
+  }
+
+  button {
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+
+    &:active,
+    &:focus {
+      outline: none;
+    }
+  }
+`
+// #endregion
diff --git a/packages/components-faraday/src/components/Files/FileItem.local.scss b/packages/components-faraday/src/components/Files/FileItem.local.scss
deleted file mode 100644
index 1b38d085bd39d8db7f5b2b346a70dd2c54a71fe6..0000000000000000000000000000000000000000
--- a/packages/components-faraday/src/components/Files/FileItem.local.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-.file-item {
-  align-items: center;
-  border: 1px solid black;
-  display: flex;
-  margin: 5px;
-
-  .info {
-    border-right: 1px solid black;
-    display: flex;
-    flex: 1;
-    justify-content: space-between;
-    padding: 2px 10px 2px 0;
-  }
-
-  .buttons {
-    align-items: center;
-    display: flex;
-    justify-content: center;
-    margin: 0 10px;
-
-    a {
-      align-items: center;
-      display: flex;
-    }
-
-    button {
-      background-color: transparent;
-      border: none;
-      cursor: pointer;
-
-      &:active,
-      &:focus {
-        outline: none;
-      }
-    }
-  }
-}
diff --git a/packages/components-faraday/src/components/Files/FileSection.js b/packages/components-faraday/src/components/Files/FileSection.js
index 0e112c42aa858dfebd5b746ccb19f10f1dc2d7cf..675c920989e9e229bd53a2379cdfb0b12ee1a4b0 100644
--- a/packages/components-faraday/src/components/Files/FileSection.js
+++ b/packages/components-faraday/src/components/Files/FileSection.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import classnames from 'classnames'
 import { Icon } from '@pubsweet/ui'
+import styled, { withTheme } from 'styled-components'
 import { DropTarget } from 'react-dnd'
 import { NativeTypes } from 'react-dnd-html5-backend'
 import { compose, getContext, withHandlers, withState } from 'recompose'
@@ -12,15 +12,20 @@ import {
 
 import FileItem from './FileItem'
 import FilePicker from './FilePicker'
-import classes from './FileSection.local.scss'
-
-const DragHandle = () => (
-  <div className={classnames(classes['drag-handle'])}>
-    <Icon size={14}>chevron_up</Icon>
-    <Icon size={10}>menu</Icon>
-    <Icon size={14}>chevron_down</Icon>
-  </div>
-)
+
+const DragHandle = withTheme(({ theme }) => (
+  <Handle>
+    <Icon color={theme.colorBorder} size={14}>
+      chevron_up
+    </Icon>
+    <Icon color={theme.colorBorder} size={10}>
+      menu
+    </Icon>
+    <Icon color={theme.colorBorder} size={14}>
+      chevron_down
+    </Icon>
+  </Handle>
+))
 
 const FileSection = ({
   error,
@@ -33,6 +38,7 @@ const FileSection = ({
   addFile,
   canDrop,
   moveItem,
+  theme,
   isFileOver,
   removeFile,
   connectFileDrop,
@@ -43,62 +49,59 @@ const FileSection = ({
   disabledFilepicker,
   dropSortableFile,
   previewFile,
-}) =>
-  connectFileDrop(
-    connectDropTarget(
-      <div
-        className={classnames({
-          [classes['drop-section']]: true,
-          [classes['no-border-top']]: !isFirst,
-          [classes['dashed-border']]: !isLast,
-          [classes['is-over']]: isFileOver || (isOver && canDrop),
-        })}
-      >
-        <div className={classnames(classes.header)}>
-          <div className={classnames(classes['picker-container'])}>
-            <span className={classnames(classes.title)}>{title}</span>
-            {!isFetching[listId] ? (
-              <FilePicker
-                allowedFileExtensions={allowedFileExtensions}
-                disabled={disabledFilepicker()}
-                onUpload={addFile}
+}) => (
+  <DropSection
+    innerRef={instance => connectFileDrop(connectDropTarget(instance))}
+    isFirst={isFirst}
+    isLast={isLast}
+    over={isFileOver || (isOver && canDrop)}
+  >
+    <Header>
+      <PickerContainer>
+        <Title>{title}</Title>
+        {!isFetching[listId] ? (
+          <FilePicker
+            allowedFileExtensions={allowedFileExtensions}
+            disabled={disabledFilepicker()}
+            onUpload={addFile}
+          >
+            <UploadButton disabled={disabledFilepicker()}>
+              <Icon
+                color={
+                  disabledFilepicker()
+                    ? theme.colorSecondary
+                    : theme.colorPrimary
+                }
               >
-                <div
-                  className={classnames({
-                    [classes['upload-button']]: true,
-                    [classes['disabled-picker']]: disabledFilepicker(),
-                  })}
-                >
-                  <Icon color={disabledFilepicker() ? '#999' : '#333'}>
-                    file-plus
-                  </Icon>
-                </div>
-              </FilePicker>
-            ) : (
-              <Spinner />
-            )}
-          </div>
-          <span className={classnames(classes.error)}>{error}</span>
-        </div>
-        <SortableList
-          beginDragProps={['id', 'index', 'name', 'listId']}
-          dragHandle={DragHandle}
-          dropItem={dropSortableFile}
-          items={files}
-          listId={listId}
-          listItem={FileItem}
-          moveItem={moveItem}
-          previewFile={previewFile}
-          removeFile={removeFile}
-        />
-        <div className={classnames(classes.dropzone)}>
-          <span>Drag files here or use the add button.</span>
-        </div>
-      </div>,
-    ),
-  )
+                file-plus
+              </Icon>
+            </UploadButton>
+          </FilePicker>
+        ) : (
+          <Spinner />
+        )}
+      </PickerContainer>
+      <Error>{error}</Error>
+    </Header>
+    <SortableList
+      beginDragProps={['id', 'index', 'name', 'listId']}
+      dragHandle={DragHandle}
+      dropItem={dropSortableFile}
+      items={files}
+      listId={listId}
+      listItem={FileItem}
+      moveItem={moveItem}
+      previewFile={previewFile}
+      removeFile={removeFile}
+    />
+    <InfoContainer>
+      <span>Drag files here or use the add button.</span>
+    </InfoContainer>
+  </DropSection>
+)
 
 export default compose(
+  withTheme,
   getContext({
     isFetching: PropTypes.object,
   }),
@@ -189,3 +192,71 @@ export default compose(
     }),
   ),
 )(FileSection)
+
+// #region styles
+const Error = styled.span`
+  color: ${({ theme }) => theme.colorError};
+  font-size: ${({ theme }) => theme.fontSizeBaseSmall};
+  margin-right: 5px;
+`
+
+const UploadButton = styled.div`
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  display: flex;
+  margin-left: 5px;
+`
+
+const PickerContainer = styled.div`
+  align-items: center;
+  display: flex;
+  flex: 1;
+`
+
+const Title = styled.span`
+  margin: 5px;
+  text-transform: uppercase;
+`
+
+const Header = styled.div`
+  align-items: center;
+  display: flex;
+  justify-content: flex-start;
+`
+
+const DropSection = styled.div`
+  border: ${({ theme }) => theme.borderDefault};
+  border-top: ${({ isFirst, theme }) =>
+    isFirst ? theme.borderDefault : 'none'};
+  border-bottom: ${({ isLast, theme }) =>
+    isLast ? theme.borderDefault : `1px dashed ${theme.colorBorder}`};
+  background-color: ${({ theme, over }) =>
+    over ? theme.colorSecondary : theme.backgroundColorReverse};
+  display: flex;
+  flex-direction: column;
+  padding: 5px;
+`
+
+const Handle = styled.div`
+  align-items: center;
+  border-right: ${({ theme }) => theme.borderDefault};
+  cursor: move;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-right: 10px;
+  padding: 3px;
+`
+
+const InfoContainer = styled.div`
+  align-items: center;
+  display: flex;
+  height: 60px;
+  justify-content: center;
+  margin: 10px 0;
+
+  span {
+    color: ${({ theme }) => theme.colorTextPlaceholder};
+    font-size: ${({ theme }) => theme.themefontSizeBaseSmall};
+  }
+`
+// #endregion
diff --git a/packages/components-faraday/src/components/Files/FileSection.local.scss b/packages/components-faraday/src/components/Files/FileSection.local.scss
deleted file mode 100644
index fc117bfe4ca24af391116fa7e7bc2e0a8deb6b07..0000000000000000000000000000000000000000
--- a/packages/components-faraday/src/components/Files/FileSection.local.scss
+++ /dev/null
@@ -1,75 +0,0 @@
-.drop-section {
-  border: 1px solid black;
-  display: flex;
-  flex-direction: column;
-  padding: 5px;
-
-  .header {
-    align-items: center;
-    display: flex;
-    justify-content: flex-start;
-
-    .picker-container {
-      align-items: center;
-      display: flex;
-      flex: 1;
-    }
-
-    .error {
-      color: firebrick;
-      font-size: 14px;
-      margin-right: 5px;
-    }
-
-    .upload-button {
-      cursor: pointer;
-      display: flex;
-      margin-left: 5px;
-    }
-
-    .disabled-picker {
-      cursor: default;
-    }
-
-    .title {
-      margin: 5px;
-      text-transform: uppercase;
-    }
-  }
-}
-
-.no-border-top {
-  border-top: none;
-}
-
-.dashed-border {
-  border-bottom: 1px dashed black;
-}
-
-.drag-handle {
-  align-items: center;
-  border-right: 1px solid black;
-  cursor: move;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  margin-right: 10px;
-  padding: 3px;
-}
-
-.is-over {
-  background-color: #ddd;
-}
-
-.dropzone {
-  align-items: center;
-  display: flex;
-  height: 60px;
-  justify-content: center;
-  margin: 10px 0;
-
-  span {
-    color: #888;
-    font-size: 14px;
-  }
-}
diff --git a/packages/components-faraday/src/components/Files/Files.js b/packages/components-faraday/src/components/Files/Files.js
index 85b4f6417376aafa30ea57614df48624e95668a4..74f2a1b6fc05594dc2bf4da7c190d405f346e311 100644
--- a/packages/components-faraday/src/components/Files/Files.js
+++ b/packages/components-faraday/src/components/Files/Files.js
@@ -1,8 +1,8 @@
 import React from 'react'
 import { get } from 'lodash'
 import PropTypes from 'prop-types'
-import classnames from 'classnames'
 import { connect } from 'react-redux'
+import styled from 'styled-components'
 import { withRouter } from 'react-router-dom'
 import { change as changeForm } from 'redux-form'
 import {
@@ -16,8 +16,6 @@ import {
 import { SortableList } from 'pubsweet-components-faraday/src/components'
 
 import FileSection from './FileSection'
-import classes from './Files.local.scss'
-
 import {
   uploadFile,
   deleteFile,
@@ -38,16 +36,7 @@ const Files = ({
   ...rest
 }) => (
   <div>
-    {error && (
-      <div
-        className={classnames({
-          [classes['error-container']]: true,
-          [classes.hidden]: !error,
-        })}
-      >
-        Error uploading file, please try again.
-      </div>
-    )}
+    <Error show={error}>Error uploading file, please try again.</Error>
     <FileSection
       addFile={addFile('manuscripts')}
       allowedFileExtensions={['pdf', 'doc', 'docx']}
@@ -213,3 +202,13 @@ export default compose(
     }),
   ),
 )(Files)
+
+// #region styles
+const Error = styled.div`
+  color: firebrick;
+  display: flex;
+  justify-content: flex-end;
+  margin: 5px 0;
+  opacity: ${({ show }) => (show ? 1 : 0)};
+`
+// #endregion
diff --git a/packages/components-faraday/src/components/Files/Files.local.scss b/packages/components-faraday/src/components/Files/Files.local.scss
deleted file mode 100644
index a51a8ec0d659977a609fc3018b52fc636f5640d8..0000000000000000000000000000000000000000
--- a/packages/components-faraday/src/components/Files/Files.local.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.error-container {
-  color: firebrick;
-  display: flex;
-  justify-content: flex-end;
-  margin: 5px 0;
-}
-
-.hidden {
-  opacity: 0;
-}
diff --git a/packages/components-faraday/src/components/SignUp/SignUpInvitationForm.js b/packages/components-faraday/src/components/SignUp/SignUpInvitationForm.js
index 9a484e45366bfa6409a895a3b242931768de9d51..83eca23445e8db1f2750408de5c5115f7cccfe27 100644
--- a/packages/components-faraday/src/components/SignUp/SignUpInvitationForm.js
+++ b/packages/components-faraday/src/components/SignUp/SignUpInvitationForm.js
@@ -41,36 +41,43 @@ const SignUpInvitation = ({
 
 export default SignUpInvitation
 
+// #region styles
 const Root = styled.div`
   max-width: 500px;
   min-width: 300px;
   margin: 0 auto;
   display: flex;
-  border: 1px solid var(--color-pending);
+  border: ${({ theme }) => theme.borderDefault};
+  background-color: ${({ theme }) => theme.backgroundColorReverse};
   padding: 20px;
   flex-direction: column;
 `
 
 const Title = styled.div`
-  font-size: 24px;
+  font-size: ${({ theme }) => theme.fontSizeHeading5};
+  font-family: ${({ theme }) => theme.fontHeading};
+  color: ${({ theme }) => theme.colorPrimary};
   font-weight: bold;
   text-align: center;
   margin: 10px auto;
 `
 const Subtitle = styled.div`
-  font-size: 13px;
+  font-size: ${({ theme }) => theme.fontSizeBaseSmall};
+  font-family: ${({ theme }) => theme.fontReading};
   font-weight: normal;
   text-align: center;
   margin: 10px auto;
 `
 
 const Email = styled.div`
-  font-size: 16px;
+  font-size: ${({ theme }) => theme.fontSizeBase};
+  font-family: ${({ theme }) => theme.fontReading};
   font-weight: normal;
   text-align: center;
   margin: 10px auto;
 `
 const Err = styled.div`
-  color: red;
+  color: ${({ theme }) => theme.colorError};
   text-align: center;
 `
+// #endregion
diff --git a/packages/components-faraday/src/components/SignUp/SignUpStep0.js b/packages/components-faraday/src/components/SignUp/SignUpStep0.js
index a984c1d894a2e06cbdd8f8b2c1759330ccf651b0..e14fd717c1e26caece81c55f4061bc8904e7061f 100644
--- a/packages/components-faraday/src/components/SignUp/SignUpStep0.js
+++ b/packages/components-faraday/src/components/SignUp/SignUpStep0.js
@@ -77,6 +77,7 @@ const RowItem = styled.div`
 `
 
 const Label = styled.div`
-  font-size: 14px;
+  font-size: ${({ theme }) => theme.fontSizeBaseSmall};
+  font-family: ${({ theme }) => theme.fontReading};
   text-transform: uppercase;
 `
diff --git a/packages/components-faraday/src/components/SignUp/SignUpStep1.js b/packages/components-faraday/src/components/SignUp/SignUpStep1.js
index 53da9b98ef2dba046e25d534b5a2c6e95f6dd550..7109f6c581422a6499788836fa9b40df01988acd 100644
--- a/packages/components-faraday/src/components/SignUp/SignUpStep1.js
+++ b/packages/components-faraday/src/components/SignUp/SignUpStep1.js
@@ -46,6 +46,7 @@ const RowItem = styled.div`
 `
 
 const Label = styled.div`
-  font-size: 14px;
+  font-size: ${({ theme }) => theme.fontSizeBaseSmall};
+  font-family: ${({ theme }) => theme.fontReading};
   text-transform: uppercase;
 `
diff --git a/packages/components-faraday/src/components/UIComponents/ConfirmationPage.js b/packages/components-faraday/src/components/UIComponents/ConfirmationPage.js
index 35cd479808558baf671252d8fa3227658c906add..759032ff1a777c1358b33a8c45ec2b8fefd72e41 100644
--- a/packages/components-faraday/src/components/UIComponents/ConfirmationPage.js
+++ b/packages/components-faraday/src/components/UIComponents/ConfirmationPage.js
@@ -1,14 +1,12 @@
 import React from 'react'
-import classnames from 'classnames'
 import { compose } from 'recompose'
 import { connect } from 'react-redux'
 import { Button } from '@pubsweet/ui'
 import { get, isEmpty } from 'lodash'
 import { withJournal } from 'xpub-journal'
+import styled from 'styled-components'
 import { getFragmentAuthors } from 'pubsweet-components-faraday/src/redux/authors'
 
-import classes from './UIComponents.local.scss'
-
 const ConfirmationPage = ({
   journal,
   authors = [],
@@ -17,12 +15,17 @@ const ConfirmationPage = ({
 }) => {
   const email = get(authors.find(a => a.isCorresponding), 'email')
   return (
-    <div className={classnames(classes.container)}>
+    <Root>
       {isEmpty(state) ? (
-        <h2>Thank you for you submission</h2>
+        <div>
+          <Title>Thank you for you submission</Title>
+          <Button onClick={() => history.push('/')} primary>
+            Go to Dashboard
+          </Button>
+        </div>
       ) : (
         <div>
-          <h2>Thank You for Submitting Your Manuscript</h2>
+          <Title>Thank You for Submitting Your Manuscript</Title>
           <p>
             Your manuscript has been successfully submitted to{' '}
             <b>{journal.metadata.nameText}</b> and assigned the manuscript ID{' '}
@@ -51,7 +54,7 @@ const ConfirmationPage = ({
           </Button>
         </div>
       )}
-    </div>
+    </Root>
   )
 }
 
@@ -61,3 +64,24 @@ export default compose(
     authors: getFragmentAuthors(state, get(locationState, 'version')),
   })),
 )(ConfirmationPage)
+
+// #region styles
+
+const Root = styled.div`
+  margin: 0 auto;
+  text-align: center;
+  width: 70vw;
+  color: ${({ theme }) => theme.colorText};
+
+  a {
+    color: ${({ theme }) => theme.colorText};
+  }
+`
+
+const Title = styled.div`
+  font-size: ${({ theme }) => theme.fontSizeHeading5};
+  font-family: ${({ theme }) => theme.fontHeading};
+  color: ${({ theme }) => theme.colorPrimary};
+  margin: 10px auto;
+`
+// #endregion
diff --git a/packages/xpub-faraday/app/FaradayApp.js b/packages/xpub-faraday/app/FaradayApp.js
index 3df9a1e4de7dbc6b0d40bceb51eec23587c49721..17bae212a28d7b223f3926945c39175a98a2dafb 100644
--- a/packages/xpub-faraday/app/FaradayApp.js
+++ b/packages/xpub-faraday/app/FaradayApp.js
@@ -1,5 +1,4 @@
 import React from 'react'
-import 'xpub-bootstrap'
 import { compose } from 'recompose'
 import { connect } from 'react-redux'
 import styled from 'styled-components'
@@ -18,15 +17,6 @@ const App = ({ children, currentUser, journal, logoutUser }) => (
   </Root>
 )
 
-const Root = styled.div`
-  font-family: 'Fira Sans', sans-serif;
-`
-
-const MainContainer = styled.div`
-  padding: 8px;
-  margin-top: 20px;
-`
-
 export default compose(
   connect(
     state => ({
@@ -36,3 +26,13 @@ export default compose(
   ),
   withJournal,
 )(App)
+
+const Root = styled.div`
+  font-family: ${props => props.theme.fontInterface};
+`
+
+const MainContainer = styled.div`
+  padding: 90px 10px 40px;
+  min-height: calc(100vh - 130px);
+  background-color: ${props => props.theme.backgroundColor || '#fff'};
+`
diff --git a/packages/xpub-faraday/app/config/journal/submit-wizard.js b/packages/xpub-faraday/app/config/journal/submit-wizard.js
index 3a63214bbc415175b315d8bcefd0a597ce6d0717..c0aaa8b4299fe203aadd3e8657f7b98388690d3f 100644
--- a/packages/xpub-faraday/app/config/journal/submit-wizard.js
+++ b/packages/xpub-faraday/app/config/journal/submit-wizard.js
@@ -1,7 +1,8 @@
 import React from 'react'
+import styled from 'styled-components'
+import uploadFileFn from 'xpub-upload'
 import { AbstractEditor, TitleEditor } from 'xpub-edit'
 import { Menu, CheckboxGroup, YesOrNo, TextField } from '@pubsweet/ui'
-import uploadFileFn from 'xpub-upload'
 import { required, minChars, minSize } from 'xpub-validators'
 import { AuthorList, Files } from 'pubsweet-components-faraday/src/components'
 
@@ -18,22 +19,29 @@ import {
 const min3Chars = minChars(3)
 const declarationsMinSize = minSize(declarations.options.length)
 
+// #region styles
+const StyledLabel = styled.label`
+  display: inline-block;
+  font-weight: bold;
+  margin-bottom: ${({ margin }) => margin || '5px'};
+  margin-top: ${({ margin }) => margin || '5px'};
+`
+
+const StyledSpacing = styled.div`
+  width: 100%;
+  height: 15px;
+`
+// #endregion
+
 const yesNoWithLabel = ({ label, ...rest }) => (
   <div>
-    <label style={{ display: 'inline-block', marginBottom: 5, marginTop: 5 }}>
-      {label}
-    </label>
+    <StyledLabel>{label}</StyledLabel>
     <YesOrNo {...rest} />
   </div>
 )
-const Spacing = () => <div style={{ width: '100%', height: '15px' }} />
-const Label = ({ label }) => (
-  <label
-    style={{ display: 'inline-block', marginTop: '15px', marginBottom: '5px' }}
-  >
-    <b>{label}</b>
-  </label>
-)
+const Spacing = () => <StyledSpacing />
+const Label = ({ label }) => <StyledLabel margin="15px">{label}</StyledLabel>
+
 const journal = {
   label: 'Hindawi Faraday',
   value: 'hindawi-faraday',
@@ -69,6 +77,10 @@ export default {
           value: journal.value,
           validate: [required],
         },
+        {
+          fieldId: 'spacing-journal',
+          renderComponent: Spacing,
+        },
         {
           fieldId: 'label-Issue',
           renderComponent: Label,
@@ -100,7 +112,7 @@ export default {
       label: 'Manuscript & Authors Details',
       title: '3. Manuscript & Authors Details',
       subtitle:
-        'Please provide the details of all the authors of this manuscript....',
+        'Please provide the details of all the authors of this manuscript, in the order that they appear on the manuscript. Your details are already pre-filled since, in order tu submit a manuscript you must be one of the authors',
       children: [
         {
           fieldId: 'metadata.title',
diff --git a/packages/xpub-faraday/app/theme.js b/packages/xpub-faraday/app/theme.js
index 3692e4300448b60bcf0da8976645121a53019285..720fbe162a9bb925421484e4bbb01240dd340763 100644
--- a/packages/xpub-faraday/app/theme.js
+++ b/packages/xpub-faraday/app/theme.js
@@ -2,7 +2,7 @@ const theme = {
   colorPrimary: '#667080', // Indicates a primary call to action
   colorSecondary: '#d8d8d8', // Default color for non-primary actions
   colorFurniture: '#cccccc', // Meant to be applied to elements that indicate content division
-  colorBorder: '#aaaaaa', // For borders around form elements
+  colorBorder: '#667080', // For borders around form elements
   colorBackgroundHue: '#f1f1f1', // Used to create a discrete contrast the default background color
   colorSuccess: '#005500', // Used to indicate a successful validation state
   colorError: '#b50000', // Used to indicate an error in validation
@@ -26,6 +26,7 @@ const theme = {
 
   gridUnit: '32px', // Base interface space measurement used by elements and typography
 
+  borderDefault: '1px solid #667080',
   borderRadius: '2px', // Radius value applied to borders throughout the user interface
   borderWidth: '1px', // Width value applied to borders
   borderStyle: 'solid', // Style applied to borders (eg. solid, dashed)
@@ -33,10 +34,14 @@ const theme = {
   dropShadow: '0 1px 0 0 #667080', // Default shadow that is applied to elements that float (eg. tooltips, modals)
 
   backgroundColor: '#f6f6f6',
+  backgroundColorReverse: '#ffffff',
 
   transitionDuration: '1.5s', // How long transitions should last
   transitionTimingFunction: 'linear', // Which function should be applied to transitions (eg. easein)
   transitionDelay: '0s', // How long transitions should be delayed before they begin
+
+  // z indexes
+  modalIndex: 10000,
 }
 
 export default theme
diff --git a/packages/xpub-theme/src/variables.css b/packages/xpub-theme/src/variables.css
index bda25b46931ef31ac565e0a4aefa205db73f6866..e8f7a9e379df3bbde2ab84f9c6b8baf07c1d927c 100644
--- a/packages/xpub-theme/src/variables.css
+++ b/packages/xpub-theme/src/variables.css
@@ -3,7 +3,7 @@
   --font-reviewer: 'Kocourier Prime Sans', monospace;
 
   /* brand colors */
-  --color-primary: #418b34;
+  --color-primary: #667080;
 
   /* colors for interactions */
   --color-danger: #ff2d1a;