diff --git a/gui/app/components/document/document-heading.js b/gui/app/components/document/document-heading.js
index 8ee4389e..3e224c8b 100644
--- a/gui/app/components/document/document-heading.js
+++ b/gui/app/components/document/document-heading.js
@@ -10,14 +10,11 @@
 // https://documize.com
 
 import { empty } from '@ember/object/computed';
-
 import { schedule } from '@ember/runloop';
 import { inject as service } from '@ember/service';
 import Component from '@ember/component';
-import NotifierMixin from '../../mixins/notifier';
-import TooltipMixin from '../../mixins/tooltip';
 
-export default Component.extend(NotifierMixin, TooltipMixin, {
+export default Component.extend({
 	documentService: service('document'),
 	editMode: false,
 	docName: '',
@@ -49,14 +46,9 @@ export default Component.extend(NotifierMixin, TooltipMixin, {
 
 			this.set('document.name', this.get('docName'));
 			this.set('document.excerpt', this.get('docExcerpt'));
-
-			this.showNotification('Saved');
-			this.get('browser').setTitle(this.get('document.name'));
-			this.get('browser').setMetaDescription(this.get('document.excerpt'));
-			
-			this.get('documentService').save(this.get('document'));
-
 			this.set('editMode', false);
+
+			this.attrs.onSaveDocument(this.get('document'));
 		},
 
 		onCancel() {
diff --git a/gui/app/components/document/space-category.js b/gui/app/components/document/space-category.js
index 07ac71ed..e1923e5c 100644
--- a/gui/app/components/document/space-category.js
+++ b/gui/app/components/document/space-category.js
@@ -13,6 +13,7 @@ import { computed } from '@ember/object';
 
 import { inject as service } from '@ember/service';
 import Component from '@ember/component';
+import { A } from "@ember/array"
 import TooltipMixin from '../../mixins/tooltip';
 import NotifierMixin from '../../mixins/notifier';
 
@@ -21,7 +22,7 @@ export default Component.extend(TooltipMixin, NotifierMixin, {
 	categoryService: service('category'),
 	sessionService: service('session'),
 	newCategory: '',
-	categories: [],
+	categories: A([]),
 	hasCategories: computed('categories', function() {
 		return this.get('categories').length > 0;
 	}),
@@ -32,10 +33,6 @@ export default Component.extend(TooltipMixin, NotifierMixin, {
 		return this.get('permissions.spaceOwner') || this.get('permissions.spaceManage');
 	}),
 
-	init() {
-		this._super(...arguments);
-	},
-
 	didReceiveAttrs() {
 		this._super(...arguments);
 		this.load();
@@ -43,12 +40,12 @@ export default Component.extend(TooltipMixin, NotifierMixin, {
 
 	load() {
 		this.get('categoryService').getUserVisible(this.get('folder.id')).then((categories) => {
-			this.set('categories', categories);
+			let cats = A(categories);
+			this.set('categories', cats);
 			this.get('categoryService').getDocumentCategories(this.get('document.id')).then((selected) => {
 				this.set('selectedCategories', selected);
 				selected.forEach((s) => {
-					let cats = this.set('categories', categories);
-					let cat = categories.findBy('id', s.id);
+					let cat = cats.findBy('id', s.id);
 					if (is.not.undefined(cat)) {
 						cat.set('selected', true);
 						this.set('categories', cats);
diff --git a/gui/app/components/folder/space-heading.js b/gui/app/components/folder/space-heading.js
index af9f4076..f7b382c6 100644
--- a/gui/app/components/folder/space-heading.js
+++ b/gui/app/components/folder/space-heading.js
@@ -10,14 +10,11 @@
 // https://documize.com
 
 import { empty } from '@ember/object/computed';
-
 import { schedule } from '@ember/runloop';
 import { inject as service } from '@ember/service';
 import Component from '@ember/component';
-import NotifierMixin from '../../mixins/notifier';
-import TooltipMixin from '../../mixins/tooltip';
 
-export default Component.extend(NotifierMixin, TooltipMixin, {
+export default Component.extend({
 	folderService: service('folder'),
 	spaceName: '',
 	hasNameError: empty('spaceName'),
diff --git a/gui/app/pods/document/index/controller.js b/gui/app/pods/document/index/controller.js
index d8ab2fe5..1cade833 100644
--- a/gui/app/pods/document/index/controller.js
+++ b/gui/app/pods/document/index/controller.js
@@ -31,7 +31,9 @@ export default Controller.extend(NotifierMixin, TooltipMixin, {
 	actions: {
 		onSaveDocument(doc) {
 			this.get('documentService').save(doc);
-			this.showNotification('Saved');
+
+			this.get('browser').setTitle(doc.get('name'));
+			this.get('browser').setMetaDescription(doc.get('excerpt'));
 		},
 
 		onCopyPage(pageId, targetDocumentId) {
diff --git a/gui/app/pods/document/index/template.hbs b/gui/app/pods/document/index/template.hbs
index ca0eced9..24121090 100644
--- a/gui/app/pods/document/index/template.hbs
+++ b/gui/app/pods/document/index/template.hbs
@@ -1,46 +1,49 @@
-{{#layout/zone-container}}
+{{layout/nav-bar}}
 
-	{{#layout/zone-sidebar}}
-		{{document/document-sidebar tab=tab
-			document=model.document folder=model.folder pages=model.pages page=model.page permissions=model.permissions
-			onPageSequenceChange=(action 'onPageSequenceChange') onPageLevelChange=(action 'onPageLevelChange')
-			onGotoPage=(action 'onGotoPage')}}
-	{{/layout/zone-sidebar}}
+<div class="container">
+	{{#toolbar/t-toolbar}}
+		{{#toolbar/t-links}}
+			{{#link-to "folders" class="link" tagName="li"}}Spaces{{/link-to}}
+			{{#link-to "folder" model.folder.id model.folder.slug class="link" tagName="li"}}{{model.folder.name}}{{/link-to}}
+		{{/toolbar/t-links}}
+	{{/toolbar/t-toolbar}}
 
-	{{#layout/zone-content}}
+	{{document/document-heading document=model.document permissions=model.permissions onSaveDocument=(action 'onSaveDocument')}}
 
-		<div id="zone-document-content" class="zone-document-content">
-			<div class="document-header-zone">
-				<div class="pull-left">
-					{{document/space-category document=model.document folder=model.folder folders=model.folders permissions=model.permissions}}
-				</div>
-
-				<div class="pull-right">
-					{{document/document-toolbar
-						document=model.document folder=model.folder folders=model.folders permissions=model.permissions
-						onDocumentDelete=(action 'onDocumentDelete') onSaveTemplate=(action 'onSaveTemplate')
-						onPageSequenceChange=(action 'onPageSequenceChange') onPageLevelChange=(action 'onPageLevelChange')
-						onGotoPage=(action 'onGotoPage')}}
-				</div>
-				<div class="clearfix"/>
-
-				{{document/tag-editor documentTags=model.document.tags permissions=model.permissions onChange=(action 'onTagChange')}}
+	<div id="zone-document-content" class="zone-document-content">
+		<div class="document-header-zone">
+			<div class="pull-left">
+				{{document/space-category document=model.document folder=model.folder folders=model.folders permissions=model.permissions}}
 			</div>
 
-			{{document/document-heading document=model.document permissions=model.permissions onSaveDocument=(action 'onSaveDocument')}}
+			<div class="pull-right">
+				{{document/document-toolbar
+					document=model.document folder=model.folder folders=model.folders permissions=model.permissions
+					onDocumentDelete=(action 'onDocumentDelete') onSaveTemplate=(action 'onSaveTemplate')
+					onPageSequenceChange=(action 'onPageSequenceChange') onPageLevelChange=(action 'onPageLevelChange')
+					onGotoPage=(action 'onGotoPage')}}
+			</div>
+			<div class="clearfix"/>
 
-			{{#if model.document.template}}
-				<div class="document-template-header">Template</div>
-			{{/if}}
-
-			{{document/document-view
-				document=model.document links=model.links pages=model.pages
-				folder=model.folder folders=model.folders sections=model.sections permissions=model.permissions pageId=pageId
-				onSavePage=(action 'onSavePage') onInsertSection=(action 'onInsertSection')
-				onSavePageAsBlock=(action 'onSavePageAsBlock') onDeleteBlock=(action 'onDeleteBlock') onGotoPage=(action 'onGotoPage')
-				onCopyPage=(action 'onCopyPage') onMovePage=(action 'onMovePage') onDeletePage=(action 'onPageDeleted')}}
+			{{document/tag-editor documentTags=model.document.tags permissions=model.permissions onChange=(action 'onTagChange')}}
 		</div>
 
-	{{/layout/zone-content}}
 
-{{/layout/zone-container}}
+	{{document/document-sidebar tab=tab
+		document=model.document folder=model.folder pages=model.pages page=model.page permissions=model.permissions
+		onPageSequenceChange=(action 'onPageSequenceChange') onPageLevelChange=(action 'onPageLevelChange')
+		onGotoPage=(action 'onGotoPage')}}
+
+
+		{{#if model.document.template}}
+			<div class="document-template-header">Template</div>
+		{{/if}}
+
+		{{document/document-view
+			document=model.document links=model.links pages=model.pages
+			folder=model.folder folders=model.folders sections=model.sections permissions=model.permissions pageId=pageId
+			onSavePage=(action 'onSavePage') onInsertSection=(action 'onInsertSection')
+			onSavePageAsBlock=(action 'onSavePageAsBlock') onDeleteBlock=(action 'onDeleteBlock') onGotoPage=(action 'onGotoPage')
+			onCopyPage=(action 'onCopyPage') onMovePage=(action 'onMovePage') onDeletePage=(action 'onPageDeleted')}}
+	</div>
+</div>
diff --git a/gui/app/styles/view/document/all.scss b/gui/app/styles/view/document/all.scss
index 23943d1f..81367013 100644
--- a/gui/app/styles/view/document/all.scss
+++ b/gui/app/styles/view/document/all.scss
@@ -7,4 +7,3 @@
 @import "toc.scss";
 @import "view.scss";
 @import "wysiwyg.scss";
-@import "space-category-tag.scss";
diff --git a/gui/app/styles/view/document/space-category-tag.scss b/gui/app/styles/view/document/doc-meta.scss
similarity index 53%
rename from gui/app/styles/view/document/space-category-tag.scss
rename to gui/app/styles/view/document/doc-meta.scss
index 583adca9..a449b9b8 100644
--- a/gui/app/styles/view/document/space-category-tag.scss
+++ b/gui/app/styles/view/document/doc-meta.scss
@@ -1,12 +1,41 @@
-.document-space {
-	display: inline-block;
+.view-document {
+	> .document-heading {
+		margin-top: 3rem;
 
-	> .caption {
-		text-transform: uppercase;
-		color: $color-gray;
-		font-weight: bold;
-		font-size: 1.0rem;
-		margin: 0 0 10px 0;
+		.doc-title {
+			font-size: 2rem;
+			margin: 50px 0 10px;
+			font-weight: normal;
+		}
+
+		.doc-excerpt {
+			font-size: 1.2rem;
+			color: $color-gray;
+			margin: 0 0 45px;
+		}
+	}
+
+	> .document-heading-edit {
+		margin-top: 5.5rem;
+		margin-bottom: 3rem;
+	}
+
+	> .document-customfields {
+		margin-bottom: 4rem;
+
+		.heading {
+			font-size: 1.1rem;
+			font-weight: bold;
+			color: $color-gray;
+			text-align: left;
+		}
+
+		.value {
+			font-size: 1.1rem;
+			font-weight: normal;
+			color: $color-black;
+			text-align: left;
+		}
 	}
 }
 
@@ -32,15 +61,6 @@
 	overflow-y: auto;
 	margin: 0;
 	padding: 0;
-
-	// // Medium devices (tablets, 768px and up)
-	// @media (min-width: 768px) { height: 300px; }
-
-	// // Large devices (desktops, 992px and up)
-	// @media (min-width: 992px) { height: 400px; }
-
-	// // Extra large devices (large desktops, 1200px and up)
-	// @media (min-width: 1200px) { height: 500px; }
 }
 
 .document-tags {
diff --git a/gui/app/styles/view/document/document.scss b/gui/app/styles/view/document/document.scss
new file mode 100644
index 00000000..0c80e785
--- /dev/null
+++ b/gui/app/styles/view/document/document.scss
@@ -0,0 +1 @@
+@import "doc-meta.scss";
diff --git a/gui/app/styles/view/views.scss b/gui/app/styles/view/views.scss
index 1ad27469..e45b372b 100644
--- a/gui/app/styles/view/views.scss
+++ b/gui/app/styles/view/views.scss
@@ -6,3 +6,4 @@
 @import "customize.scss";
 @import "search.scss";
 @import "auth.scss";
+@import "document/document.scss"
diff --git a/gui/app/templates/components/document/document-heading.hbs b/gui/app/templates/components/document/document-heading.hbs
index 52f8b62b..1070fe95 100644
--- a/gui/app/templates/components/document/document-heading.hbs
+++ b/gui/app/templates/components/document/document-heading.hbs
@@ -1,25 +1,21 @@
 {{#unless editMode}}
-	<div class="document-heading {{if permissions.documentEdit 'cursor-pointer'}}" onclick={{if permissions.documentEdit (action 'toggleEdit')}}>
-		<h1 class="doc-title">{{document.name}}</h1>
-		<div class="doc-excerpt">{{document.excerpt}}</div>
+	<div class="view-document">
+		<div class="document-heading {{if permissions.documentEdit 'cursor-pointer'}}" onclick={{if permissions.documentEdit (action 'toggleEdit')}}>
+			<h1 class="doc-title">{{document.name}}</h1>
+			<div class="doc-excerpt">{{document.excerpt}}</div>
+		</div>
 	</div>
 {{else}}
-	<form {{action "onSave" on="submit"}}>
-		<div class="edit-document-heading">
-			<div class="input-inline input-transparent edit-doc-title">
-				{{focus-input id="document-name" type="text" value=docName class=(if hasNameError 'error-inline') placeholder="Name" autocomplete="off"}}
+	<form class="view-document" {{action "onSave" on="submit"}}>
+		<div class="document-heading-edit">
+			<div class="form-group">
+				{{focus-input id="document-name" type="text" value=docName class=(if hasNameError 'form-control mousetrap is-invalid' 'form-control mousetrap') placeholder="Title" autocomplete="off"}}
 			</div>
-			<div class="input-inline input-transparent edit-doc-excerpt">
-				{{input id="document-excerpt" type="text" value=docExcerpt class=(if hasExcerptError 'error-inline') placeholder="Excerpt" autocomplete="off"}}
-			</div>
-			<div>
-				<button type="submit" class="round-button-mono" {{action 'onSave'}}>
-					<i class="material-icons color-green">check</i>
-				</button>
-				<div class="round-button-mono" {{action 'onCancel'}}>
-					<i class="material-icons color-gray">close</i>
-				</div>
+			<div class="form-group">
+				{{input id="document-excerpt" type="text" value=docExcerpt class=(if hasExcerptError 'form-control mousetrap is-invalid' 'form-control mousetrap') placeholder="Excerpt" autocomplete="off"}}
 			</div>
+			<button type="submit" class="btn btn-outline-secondary" {{action "onCancel"}}>Cancel</button>
+			<button type="submit" class="btn btn-success" {{action "onSave"}}>Save</button>
 		</div>
 	</form>
 {{/unless}}
diff --git a/gui/app/templates/components/document/space-category.hbs b/gui/app/templates/components/document/space-category.hbs
index 386bc864..cad20614 100644
--- a/gui/app/templates/components/document/space-category.hbs
+++ b/gui/app/templates/components/document/space-category.hbs
@@ -1,40 +1,37 @@
-<div class="back-to-space document-space">
-	<div class="caption">Space</div>
-	{{#link-to 'folder' folder.id folder.slug}}
-		<div class="regular-button button-nav">
-			<i class="material-icons">arrow_back</i>
-			<div class="name">{{folder.name}}</div>
-		</div>
-	{{/link-to}}
-</div>
-
-<div class="document-category">
-	<div class="caption">Category</div>
-
-	{{#each selectedCategories as |cat|}}
-		<div class="regular-button button-blue">{{cat.category}}</div>
-	{{else}}
-		{{#if canAddCategory}}
-			{{#unless canSelectCategory}}
-				{{#link-to 'folder.settings.category' folder.id folder.slug class='non-printable'}}Manage{{/link-to}}
-			{{/unless}}
-		{{else}}
-			<p>&nbsp;</p>
-		{{/if}}
-	{{/each}}
-
-	{{#if canSelectCategory}}
-		<div class="regular-button button-white" id="document-category-button">
-			<i class="material-icons">add</i>
-		</div>
-		{{#dropdown-dialog target="document-category-button" position="bottom right" button="set" color="flat-green" onAction=(action 'onSave')}}
-			<p class="heading">Set document categories</p>
-			<div class="document-category-dialog">
-				{{ui/ui-list-picker items=categories nameField='category'}}
-				{{#if canAddCategory}}
-					{{#link-to 'folder.settings.category' folder.id folder.slug}}Manage{{/link-to}}
-				{{/if}}
+<div class="view-document">
+	<div class="document-customfields">
+		<div class="row">
+			<div class="col-2 heading">
+				Categories
 			</div>
-		{{/dropdown-dialog}}
-	{{/if}}
+			<div class="col-10 value">
+				{{#each selectedCategories as |cat|}}
+					{{cat.category}}{{#unless cat.lastObject}}, {{/unless}}
+				{{/each}}
+			</div>
+		</div>
+	</div>
 </div>
+
+{{#if canAddCategory}}
+	{{#unless canSelectCategory}}
+		{{#link-to 'folder.category' folder.id folder.slug class='non-printable'}}Manage{{/link-to}}
+	{{/unless}}
+{{else}}
+	<p>&nbsp;</p>
+{{/if}}
+
+{{#if canSelectCategory}}
+	<div class="regular-button button-white" id="document-category-button">
+		<i class="material-icons">add</i>
+	</div>
+	{{#dropdown-dialog target="document-category-button" position="bottom right" button="set" color="flat-green" onAction=(action 'onSave')}}
+		<p class="heading">Set document categories</p>
+		<div class="document-category-dialog">
+			{{ui/ui-list-picker items=categories nameField='category'}}
+			{{#if canAddCategory}}
+				{{#link-to 'folder.category' folder.id folder.slug}}Manage{{/link-to}}
+			{{/if}}
+		</div>
+	{{/dropdown-dialog}}
+{{/if}}