diff --git a/packages/components-faraday/src/components/Admin/Admin.js b/packages/components-faraday/src/components/Admin/Admin.js
index 46855042685e85ab335062c240c35c46dcc0010d..4d32f9f9f52c789b2213b9fb7eef5c6eed29ab29 100644
--- a/packages/components-faraday/src/components/Admin/Admin.js
+++ b/packages/components-faraday/src/components/Admin/Admin.js
@@ -124,11 +124,12 @@ const Admin = ({
   decrementPage,
   page,
   itemsPerPage,
+  history,
 }) => (
   <div>
     <Header>
       <span>Users</span>
-      <AddButton>
+      <AddButton onClick={() => history.push('/')}>
         <Icon color="#667080">plus-circle</Icon>
         Add User
       </AddButton>
diff --git a/packages/components-faraday/src/components/AppBar/AppBar.js b/packages/components-faraday/src/components/AppBar/AppBar.js
new file mode 100644
index 0000000000000000000000000000000000000000..3ca92d4e133e27f84d3dd2c592248498b38d8d8c
--- /dev/null
+++ b/packages/components-faraday/src/components/AppBar/AppBar.js
@@ -0,0 +1,100 @@
+import React from 'react'
+import { Icon } from '@pubsweet/ui'
+import styled from 'styled-components'
+import { withRouter } from 'react-router-dom'
+import { withState, withHandlers, compose } from 'recompose'
+
+const AppBar = ({ expanded, toggleMenu, brand, user, goTo }) => (
+  <Root>
+    {brand}
+    {user && (
+      <User>
+        <div onClick={toggleMenu}>
+          <Icon color="#667080">user</Icon>
+          <span>{user.username}</span>
+          <Icon color="#667080">chevron-down</Icon>
+        </div>
+        {expanded && (
+          <Dropdown>
+            <DropdownOption>Settings</DropdownOption>
+            <DropdownOption onClick={goTo('admin')}>
+              Admin dashboard
+            </DropdownOption>
+            <DropdownOption>Logout</DropdownOption>
+          </Dropdown>
+        )}
+      </User>
+    )}
+  </Root>
+)
+
+const Root = styled.div`
+  align-items: center;
+  box-shadow: 0 1px 0 0 #667080;
+  display: flex;
+  justify-content: space-between;
+  height: 60px;
+  padding: 10px 20px;
+`
+
+const User = styled.div`
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  height: 80px;
+  position: relative;
+
+  > div:first-child {
+    align-items: center;
+    cursor: pointer;
+    display: flex;
+  }
+
+  & span {
+    color: #667080;
+    font-family: Helvetica;
+    font-size: 16px;
+    margin-left: 10px;
+  }
+`
+
+const Dropdown = styled.div`
+  background-color: #fff;
+  border: 1px solid #667080;
+  position: absolute;
+  min-width: 150px;
+  right: 0;
+  top: 80px;
+  z-index: 10;
+`
+
+const DropdownOption = styled.div`
+  align-items: center;
+  color: #667080;
+  cursor: pointer;
+  display: flex;
+  justify-content: flex-start;
+  height: 34px;
+  font-family: Helvetica;
+  font-size: 14px;
+  line-height: 2.43;
+  padding-left: 15px;
+
+  &:hover {
+    background-color: #d8d8d8;
+  }
+`
+
+export default compose(
+  withRouter,
+  withState('expanded', 'setExpanded', false),
+  withHandlers({
+    toggleMenu: ({ setExpanded }) => () => {
+      setExpanded(v => !v)
+    },
+    goTo: ({ setExpanded, history }) => path => () => {
+      history.push(path)
+      setExpanded(v => false)
+    },
+  }),
+)(AppBar)
diff --git a/packages/components-faraday/src/components/index.js b/packages/components-faraday/src/components/index.js
index 38c8a65a7e2b4bc4fa912c8ca393b862d59df71f..93791801a0d9b164825524d90a60699d4fc3d0d1 100644
--- a/packages/components-faraday/src/components/index.js
+++ b/packages/components-faraday/src/components/index.js
@@ -1,5 +1,6 @@
 export { default as Steps } from './Steps/Steps'
 export { default as Files } from './Files/Files'
+export { default as AppBar } from './AppBar/AppBar'
 export { default as AuthorList } from './AuthorList/AuthorList'
 export { default as SortableList } from './SortableList/SortableList'
 
diff --git a/packages/xpub-faraday/app/FaradayApp.js b/packages/xpub-faraday/app/FaradayApp.js
new file mode 100644
index 0000000000000000000000000000000000000000..b0d85d593e9c724617969260771a2fd07000812b
--- /dev/null
+++ b/packages/xpub-faraday/app/FaradayApp.js
@@ -0,0 +1,39 @@
+import React from 'react'
+import 'xpub-bootstrap'
+import { compose } from 'recompose'
+import { connect } from 'react-redux'
+import styled from 'styled-components'
+import { withJournal } from 'xpub-journal'
+import { AppBar } from 'pubsweet-components-faraday/src/components'
+
+const App = ({ children, currentUser, journal }) => (
+  <Root>
+    <AppBar brand={journal.metadata.name} user={currentUser} />
+    {/* <AppBar
+      brandLink="/"
+      brandName={journal.metadata.name}
+      loginLink="/login"
+      logo={journal.metadata.logo}
+      logoutLink="/logout"
+      userName={currentUser ? currentUser.username : null}
+    /> */}
+
+    <MainContainer>{children}</MainContainer>
+  </Root>
+)
+
+const Root = styled.div`
+  font-family: 'Fira Sans', sans-serif;
+`
+
+const MainContainer = styled.div`
+  padding: 8px;
+  margin-top: 50px;
+`
+
+export default compose(
+  connect(state => ({
+    currentUser: state.currentUser.user,
+  })),
+  withJournal,
+)(App)
diff --git a/packages/xpub-faraday/app/index.html b/packages/xpub-faraday/app/index.html
index ea72df9a2e41b3adb3ef07b67a3400e4bdff7e21..fe975b733e9074fe352d024bee816dc961bf195d 100644
--- a/packages/xpub-faraday/app/index.html
+++ b/packages/xpub-faraday/app/index.html
@@ -4,7 +4,7 @@
   <meta charset="utf-8">
   <title> Faraday </title>
 </head>
-<body>
+<body style="margin: 0;">
   <div id="root"></div>
   <script src="/assets/app.js"></script>
 </body>
diff --git a/packages/xpub-faraday/app/routes.js b/packages/xpub-faraday/app/routes.js
index 099b264019cc278b97344cfa9188817a593b1e64..05f92a9889f4a4f38ec15c69f492dd0a227dbdbf 100644
--- a/packages/xpub-faraday/app/routes.js
+++ b/packages/xpub-faraday/app/routes.js
@@ -1,8 +1,6 @@
 import React from 'react'
 import { Route, Switch } from 'react-router-dom'
 
-import App from 'pubsweet-component-xpub-app/src/components'
-
 import {
   PrivateRoute,
   SignupPage,
@@ -20,8 +18,10 @@ import AdminPage from 'pubsweet-components-faraday/src/components/Admin'
 import AddEditUser from 'pubsweet-components-faraday/src/components/Admin/AddEditUser'
 import SignUpInvitationPage from 'pubsweet-components-faraday/src/components/SignUp/SignUpInvitationPage'
 
+import FaradayApp from './FaradayApp'
+
 const Routes = () => (
-  <App>
+  <FaradayApp>
     <Switch>
       <Route component={LoginPage} exact path="/login" />
       <Route component={SignupPage} exact path="/signup" />
@@ -52,7 +52,7 @@ const Routes = () => (
       />
       <Route component={NotFound} />
     </Switch>
-  </App>
+  </FaradayApp>
 )
 
 export default Routes