diff --git a/frontend/components/Collaborators/Collaborators.js b/frontend/components/Collaborators/Collaborators.js
index 487921fd..ae62fd1b 100644
--- a/frontend/components/Collaborators/Collaborators.js
+++ b/frontend/components/Collaborators/Collaborators.js
@@ -36,7 +36,6 @@ const Collaborators = function({ document }: { document: Document }) {
 
 const Avatars = styled(Flex)`
   flex-direction: row-reverse;
-  margin-right: 10px;
   height: 26px;
 `;
 
diff --git a/frontend/components/Layout/components/HeaderAction/HeaderAction.js b/frontend/components/Layout/components/HeaderAction/HeaderAction.js
deleted file mode 100644
index c49806c4..00000000
--- a/frontend/components/Layout/components/HeaderAction/HeaderAction.js
+++ /dev/null
@@ -1,16 +0,0 @@
-// @flow
-import React from 'react';
-
-import styles from './HeaderAction.scss';
-
-type Props = { onClick?: ?Function, children?: ?React.Element<any> };
-
-const HeaderAction = (props: Props) => {
-  return (
-    <div onClick={props.onClick} className={styles.container}>
-      {props.children}
-    </div>
-  );
-};
-
-export default HeaderAction;
diff --git a/frontend/components/Layout/components/HeaderAction/HeaderAction.scss b/frontend/components/Layout/components/HeaderAction/HeaderAction.scss
deleted file mode 100644
index cc501390..00000000
--- a/frontend/components/Layout/components/HeaderAction/HeaderAction.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 43px;
-  padding: 0 0.5rem;
-
-  a {
-    color: #171B35;
-  }
-}
diff --git a/frontend/components/Layout/components/HeaderAction/index.js b/frontend/components/Layout/components/HeaderAction/index.js
deleted file mode 100644
index e231db11..00000000
--- a/frontend/components/Layout/components/HeaderAction/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// @flow
-import HeaderAction from './HeaderAction';
-export default HeaderAction;
diff --git a/frontend/components/Layout/index.js b/frontend/components/Layout/index.js
index 38c7a426..fb7b105d 100644
--- a/frontend/components/Layout/index.js
+++ b/frontend/components/Layout/index.js
@@ -1,8 +1,7 @@
 // @flow
 import Layout from './Layout';
 import Title from './components/Title';
-import HeaderAction from './components/HeaderAction';
 
 export default Layout;
 
-export { Title, HeaderAction };
+export { Title };
diff --git a/frontend/scenes/Document/Document.js b/frontend/scenes/Document/Document.js
index 531d289f..dd7d78e0 100644
--- a/frontend/scenes/Document/Document.js
+++ b/frontend/scenes/Document/Document.js
@@ -5,7 +5,7 @@ import styled from 'styled-components';
 import { observer, inject } from 'mobx-react';
 import { withRouter, Prompt } from 'react-router';
 import Flex from 'components/Flex';
-import { layout } from 'styles/constants';
+import { color, layout } from 'styles/constants';
 
 import Document from 'models/Document';
 import UiStore from 'stores/UiStore';
@@ -13,9 +13,10 @@ import DocumentsStore from 'stores/DocumentsStore';
 import Menu from './components/Menu';
 import SaveAction from './components/SaveAction';
 import LoadingPlaceholder from 'components/LoadingPlaceholder';
+import Button from 'components/Button';
 import Editor from 'components/Editor';
+import Icon from 'components/Icon';
 import DropToImport from 'components/DropToImport';
-import { HeaderAction } from 'components/Layout';
 import LoadingIndicator from 'components/LoadingIndicator';
 import Collaborators from 'components/Collaborators';
 import CenteredContent from 'components/CenteredContent';
@@ -215,13 +216,22 @@ type Props = {
                           }
                           isNew={!!isNew}
                         />
-                      : <a onClick={this.onClickEdit}>Edit</a>}
+                      : <a onClick={this.onClickEdit}>
+                          <Icon type="Edit2" /> Edit
+                        </a>}
+                  </HeaderAction>
+                  <HeaderAction>
+                    {isEditing
+                      ? undefined
+                      : <a onClick={this.onClickEdit}>
+                          <Icon type="Plus" /> New
+                        </a>}
+                  </HeaderAction>
+                  <HeaderAction>
+                    {isEditing
+                      ? <a onClick={this.onCancel}>Cancel</a>
+                      : <Menu document={document} />}
                   </HeaderAction>
-                  {isEditing &&
-                    <HeaderAction>
-                      <a onClick={this.onCancel}>Cancel</a>
-                    </HeaderAction>}
-                  {!isEditing && <Menu document={document} />}
                 </Flex>
               </Meta>
             </Flex>
@@ -231,6 +241,18 @@ type Props = {
   }
 }
 
+const HeaderAction = styled(Flex)`
+  justify-content: center;
+  align-items: center;
+  min-height: 43px;
+  color: ${color.text};
+  padding: 0 0 0 16px;
+
+  a {
+    color: ${color.text};
+  }
+`;
+
 const DropHere = styled(Flex)`
   pointer-events: none;
   position: fixed;