diff --git a/packages/component-faraday-ui/src/Label.js b/packages/component-faraday-ui/src/Label.js
index ad71e206b56da8bdefde5d3cf6515d7c197b797b..7b7a63c2b9287ca571be59a072b1277b7fe67395 100644
--- a/packages/component-faraday-ui/src/Label.js
+++ b/packages/component-faraday-ui/src/Label.js
@@ -21,5 +21,9 @@ const Required = styled.span`
 const Root = styled.div`
   align-items: center;
   display: flex;
+
+  ${H4} {
+    margin: 0;
+  }
 `
 // #endregion
diff --git a/packages/component-faraday-ui/src/PersonInfo.js b/packages/component-faraday-ui/src/PersonInfo.js
index 5b1585c2001c3894e5d7b1c310772d26ff4654ef..c3fb7835d565d63f6904d329f5b1f5c26e840e7c 100644
--- a/packages/component-faraday-ui/src/PersonInfo.js
+++ b/packages/component-faraday-ui/src/PersonInfo.js
@@ -1,18 +1,50 @@
 import React from 'react'
-import styled from 'styled-components'
-import { th } from '@pubsweet/ui-toolkit'
-import { Box } from 'grid-styled'
+import PropTypes from 'prop-types'
 
 import Text from './Text'
 import Label from './Label'
+import Row from './gridItems/Row'
+import Item from './gridItems/Item'
 
-const PersonInfo = () => (
-  <Box>
-    <Label>Email</Label>
-    <Text>alexandru.munt@gmail.com</Text>
-  </Box>
+const defaultPerson = {
+  email: '',
+  firstName: '',
+  lastName: '',
+  affiliation: '',
+}
+
+const PersonInfo = ({
+  person: { email, firstName, lastName, affiliation } = defaultPerson,
+}) => (
+  <Row>
+    <Item vertical withRightMargin>
+      <Label>Email</Label>
+      <Text>{email}</Text>
+    </Item>
+    <Item vertical withRightMargin>
+      <Label>First name</Label>
+      <Text>{firstName}</Text>
+    </Item>
+    <Item vertical withRightMargin>
+      <Label>Last name</Label>
+      <Text>{lastName}</Text>
+    </Item>
+    <Item vertical>
+      <Label>Affiliation</Label>
+      <Text>{affiliation}</Text>
+    </Item>
+  </Row>
 )
 
+PersonInfo.proTypes = {
+  person: PropTypes.shape({
+    email: PropTypes.string,
+    firstName: PropTypes.string,
+    lastName: PropTypes.string,
+    affiliation: PropTypes.string,
+  }),
+}
+
 export default PersonInfo
 
 // #region styles
diff --git a/packages/component-faraday-ui/src/PersonInfo.md b/packages/component-faraday-ui/src/PersonInfo.md
index 891b4445a2c0098a8657c37adc913b370fbe5dde..acc1a2c4b9166a29e75d5073b1c77b223aab40ab 100644
--- a/packages/component-faraday-ui/src/PersonInfo.md
+++ b/packages/component-faraday-ui/src/PersonInfo.md
@@ -1,5 +1,11 @@
 Details of a person.
 
 ```js
-<PersonInfo />
+const anAuthor = {
+  email: 'author.manuscriptovici@gmail.com',
+  firstName: 'Author',
+  lastName: 'Manuscriptovici',
+  affiliation: 'PSD',
+};
+<PersonInfo person={anAuthor} />
 ```
diff --git a/packages/component-faraday-ui/src/gridItems/Item.js b/packages/component-faraday-ui/src/gridItems/Item.js
index 6c3e74574f38cdaf97c3bd0dbbd0ef6da29cc649..e978c8c14ee90bf5d0be53b16ef771af489fa778 100644
--- a/packages/component-faraday-ui/src/gridItems/Item.js
+++ b/packages/component-faraday-ui/src/gridItems/Item.js
@@ -1,5 +1,13 @@
 import styled from 'styled-components'
+import { th } from '@pubsweet/ui-toolkit'
 
-export default styled.div`
-  background-color: red;
+export default styled.div.attrs({
+  'data-test-id': props => props['data-test-id'] || 'item',
+})`
+  display: flex;
+  flex: ${({ flex }) => flex || 1};
+  flex-direction: ${({ vertical }) => (vertical ? 'column' : 'row')};
+  justify-content: ${({ centered }) => (centered ? 'center' : 'initial')};
+  margin-right: ${({ withRightMargin }) =>
+    withRightMargin ? th('gridUnit') : 0};
 `
diff --git a/packages/component-faraday-ui/src/gridItems/Item.md b/packages/component-faraday-ui/src/gridItems/Item.md
index bc3a2f4c6abbfdfa7d8d89ddac3cf063d1fe7d69..f6f91b4d33f93f53be7c1257d2786a38dadc315b 100644
--- a/packages/component-faraday-ui/src/gridItems/Item.md
+++ b/packages/component-faraday-ui/src/gridItems/Item.md
@@ -1,5 +1,17 @@
-An item.
+An item. By default the content is displayed in a row.
 
 ```js
-<Item>wai nebun</Item>
+<Item>
+  <span>I am on the left side</span>
+  <span>I am on the right side</span>
+</Item>
+```
+
+Displayed in a column.
+
+```js
+<Item vertical>
+  <span>I am on top</span>
+  <span>I am at the bottom</span>
+</Item>
 ```
diff --git a/packages/component-faraday-ui/src/gridItems/Row.js b/packages/component-faraday-ui/src/gridItems/Row.js
new file mode 100644
index 0000000000000000000000000000000000000000..3df71dbf7877b0433258efb124f6bb167d3f9c34
--- /dev/null
+++ b/packages/component-faraday-ui/src/gridItems/Row.js
@@ -0,0 +1,15 @@
+import { get } from 'lodash'
+import styled, { css } from 'styled-components'
+import { th } from '@pubsweet/ui-toolkit'
+
+export default styled.div.attrs({
+  'data-test-id': props => props['data-test-id'] || 'row',
+})`
+  align-items: ${props => get(props, 'alignItems', 'flex-start')};
+  display: flex;
+  flex-direction: row;
+  justify-content: ${({ justify }) => justify || 'space-evenly'};
+  margin: ${({ noMargin }) =>
+    noMargin ? 0 : css`calc(${th('subGridUnit')} * 2) 0`};
+  width: 100%;
+`
diff --git a/packages/component-faraday-ui/src/gridItems/Row.md b/packages/component-faraday-ui/src/gridItems/Row.md
new file mode 100644
index 0000000000000000000000000000000000000000..77bcd1717adfaab12885fe3178df888070346276
--- /dev/null
+++ b/packages/component-faraday-ui/src/gridItems/Row.md
@@ -0,0 +1,9 @@
+A row of items.
+
+```js
+<Row>
+ <Item>Item 1</Item>
+ <Item>Item 2</Item>
+ <div>Item 3</div>
+</Row>
+```
\ No newline at end of file