diff --git a/frontend/components/Layout/Layout.js b/frontend/components/Layout/Layout.js
index b30c2b63..302dbbb6 100644
--- a/frontend/components/Layout/Layout.js
+++ b/frontend/components/Layout/Layout.js
@@ -80,7 +80,7 @@ type Props = {
         <Flex auto>
           {auth.authenticated &&
             user &&
-            <Sidebar column>
+            <Sidebar column editMode={ui.editMode}>
               <Header justify="space-between">
                 <Flex align="center">
                   <LogoLink to="/">Atlas</LogoLink>
@@ -119,7 +119,7 @@ type Props = {
               </Flex>
             </Sidebar>}
 
-          <Content auto justify="center">
+          <Content auto justify="center" editMode={ui.editMode}>
             {this.props.children}
           </Content>
         </Flex>
@@ -159,14 +159,17 @@ const Content = styled(Flex)`
   top: 0;
   bottom: 0;
   right: 0;
-  left: 250px;
+  left: ${props => (props.editMode ? 0 : '250px')};
+  transition: left 200ms ease-in-out;
 `;
 
 const Sidebar = styled(Flex)`
   width: 250px;
+  margin-left: ${props => (props.editMode ? '-250px' : 0)};
   padding: 10px 20px;
   background: rgba(250, 251, 252, 0.71);
   border-right: 1px solid #eceff3;
+  transition: margin-left 200ms ease-in-out;
 `;
 
 const Header = styled(Flex)`
diff --git a/frontend/scenes/Document/Document.js b/frontend/scenes/Document/Document.js
index 1b1bddbd..d32e9448 100644
--- a/frontend/scenes/Document/Document.js
+++ b/frontend/scenes/Document/Document.js
@@ -9,9 +9,9 @@ import { Flex } from 'reflexbox';
 import UiStore from 'stores/UiStore';
 
 import DocumentStore from './DocumentStore';
-// import Menu from './components/Menu';
+import Menu from './components/Menu';
 import Editor from 'components/Editor';
-// import { HeaderAction, SaveAction } from 'components/Layout';
+import { HeaderAction, SaveAction } from 'components/Layout';
 import PublishingInfo from 'components/PublishingInfo';
 import PreviewLoading from 'components/PreviewLoading';
 import CenteredContent from 'components/CenteredContent';
@@ -46,11 +46,9 @@ type Props = {
     if (this.props.newDocument) {
       this.store.collectionId = this.props.match.params.id;
       this.store.newDocument = true;
-      this.props.ui.enableEditMode();
     } else if (this.props.match.params.edit) {
       this.store.documentId = this.props.match.params.id;
       this.store.fetchDocument();
-      this.props.ui.enableEditMode();
     } else if (this.props.newChildDocument) {
       this.store.documentId = this.props.match.params.id;
       this.store.newChildDocument = true;
@@ -69,13 +67,14 @@ type Props = {
   onEdit = () => {
     const url = `${this.store.document.url}/edit`;
     this.props.history.push(url);
+    this.props.ui.enableEditMode();
   };
 
-  onSave = (options: { redirect?: boolean } = {}) => {
+  onSave = async (options: { redirect?: boolean } = {}) => {
     if (this.store.newDocument || this.store.newChildDocument) {
-      this.store.saveDocument(options);
+      await this.store.saveDocument(options);
     } else {
-      this.store.updateDocument(options);
+      await this.store.updateDocument(options);
     }
     this.props.ui.disableEditMode();
   };
@@ -93,7 +92,7 @@ type Props = {
   };
 
   render() {
-    // const isNew = this.props.newDocument || this.props.newChildDocument;
+    const isNew = this.props.newDocument || this.props.newChildDocument;
     const isEditing = this.props.match.params.edit;
     /*const title = (
       <Breadcrumbs
@@ -104,7 +103,7 @@ type Props = {
 
     const titleText = this.store.document && get(this.store, 'document.title');
 
-    /*const actions = (
+    const actions = (
       <Flex>
         <HeaderAction>
           {isEditing
@@ -115,54 +114,66 @@ type Props = {
               />
             : <a onClick={this.onEdit}>Edit</a>}
         </HeaderAction>
-        <Menu store={this.store} document={this.store.document} />
+        {!isEditing &&
+          <Menu store={this.store} document={this.store.document} />}
       </Flex>
-    );*/
-
-    // actions={actions}
-    // title={title}
-    // loading={this.store.isSaving || this.store.isUploading}
-    // search={false}
-    // fixed
+    );
 
     return (
-      <PagePadding>
-        <PageTitle title={titleText} />
-        <Prompt when={this.store.hasPendingChanges} message={DISCARD_CHANGES} />
-        {this.store.isFetching &&
-          <CenteredContent>
-            <PreviewLoading />
-          </CenteredContent>}
-        {this.store.document &&
-          <Container>
-            {!isEditing &&
-              <PublishingInfo
-                collaborators={this.store.document.collaborators}
-                createdAt={this.store.document.createdAt}
-                createdBy={this.store.document.createdBy}
-                updatedAt={this.store.document.updatedAt}
-                updatedBy={this.store.document.updatedBy}
-              />}
-            <Editor
-              text={this.store.document.text}
-              onImageUploadStart={this.onImageUploadStart}
-              onImageUploadStop={this.onImageUploadStop}
-              onChange={this.store.updateText}
-              onSave={this.onSave}
-              onCancel={this.onCancel}
-              readOnly={!isEditing}
-            />
-          </Container>}
-      </PagePadding>
+      <Container>
+        <Actions>{actions}</Actions>
+        <PagePadding auto justify="center">
+          <PageTitle title={titleText} />
+          <Prompt
+            when={this.store.hasPendingChanges}
+            message={DISCARD_CHANGES}
+          />
+          {this.store.isFetching &&
+            <CenteredContent>
+              <PreviewLoading />
+            </CenteredContent>}
+          {this.store.document &&
+            <DocumentContainer>
+              {!isEditing &&
+                <PublishingInfo
+                  collaborators={this.store.document.collaborators}
+                  createdAt={this.store.document.createdAt}
+                  createdBy={this.store.document.createdBy}
+                  updatedAt={this.store.document.updatedAt}
+                  updatedBy={this.store.document.updatedBy}
+                />}
+              <Editor
+                text={this.store.document.text}
+                onImageUploadStart={this.onImageUploadStart}
+                onImageUploadStop={this.onImageUploadStop}
+                onChange={this.store.updateText}
+                onSave={this.onSave}
+                onCancel={this.onCancel}
+                readOnly={!isEditing}
+              />
+            </DocumentContainer>}
+        </PagePadding>
+      </Container>
     );
   }
 }
 
-const PagePadding = styled(Flex)`
-  margin: 80px; 0
+const Container = styled(Flex)`
+  position: relative;
+  width: 100%;
 `;
 
-const Container = styled.div`
+const PagePadding = styled(Flex)`
+  padding: 80px 20px;
+`;
+
+const Actions = styled(Flex)`
+  position: absolute;
+  top: 0;
+  right: 20px;
+`;
+
+const DocumentContainer = styled.div`
   font-weight: 400;
   font-size: 1em;
   line-height: 1.5em;