diff --git a/gui/app/components/folder/settings-category.js b/gui/app/components/folder/settings-category.js
index 4154ee6b..f60f5c4c 100644
--- a/gui/app/components/folder/settings-category.js
+++ b/gui/app/components/folder/settings-category.js
@@ -22,6 +22,8 @@ export default Component.extend(ModalMixin, Notifer, {
 	categorySvc: service('category'),
 	appMeta: service(),
 	store: service(),
+	editId: '',
+	editName: '',
 	deleteId: '',
 	newCategory: '',
 
@@ -122,6 +124,14 @@ export default Component.extend(ModalMixin, Notifer, {
 			});
 		},
 
+		onShowEdit(id) {
+			let cat = this.get('category').findBy('id', id);
+			this.set('editId', cat.get('id'));
+			this.set('editName', cat.get('category'));
+
+			this.modalOpen('#category-edit-modal', {show: true}, "#edit-category-id");
+		},
+
 		onShowDelete(id) {
 			let cat = this.get('category').findBy('id', id);
 			this.set('deleteId', cat.get('id'));
@@ -137,24 +147,18 @@ export default Component.extend(ModalMixin, Notifer, {
 			});
 		},
 
-		onEdit(id) {
-			this.setEdit(id, true);
-		},
-
-		onEditCancel(id) {
-			this.setEdit(id, false);
-			this.load();
-		},
-
-		onSave(id) {
-			let cat = this.setEdit(id, true);
-			if (cat.get('category') === '') {
-				$('#edit-category-' + cat.get('id')).addClass('is-invalid').focus();
+		onSave() {
+			let name = this.get('editName');
+			if (name === '') {
+				$('#edit-category-name').addClass('is-invalid').focus();
 				return false;
 			}
 
-			cat = this.setEdit(id, false);
-			$('#edit-category-' + cat.get('id')).removeClass('is-invalid');
+			let cat = this.get('category').findBy('id', this.get('editId'));
+			cat.set('category', name);
+
+			this.modalClose('#category-edit-modal');
+			$('#edit-category-name').removeClass('is-invalid');
 
 			this.get('categorySvc').save(cat).then(() => {
 				this.load();
diff --git a/gui/app/styles/core/view/space.scss b/gui/app/styles/core/view/space.scss
index f736cf9a..bb016638 100644
--- a/gui/app/styles/core/view/space.scss
+++ b/gui/app/styles/core/view/space.scss
@@ -195,37 +195,48 @@
 		}
 	}
 
+	.add-users {
+		text-align: center;
+
+		> .item {
+			margin: 7px;
+			display: inline-block;
+		}
+	}
+
 	> .categories {
         padding: 0;
         margin: 0;
 
-		> .item {
-			margin: 15px 0;
-			padding: 15px;
+		> .category {
 			@include card();
-			@include ease-in();
+			list-style-type: none;
+			margin: 0 0 2rem 0;
+			padding: 15px 20px;
+			width: 100%;
+			position: relative;
 
-			> .category {
-				display: inline-block;
+			> .info {
+				padding: 0;
+				align-self: self-start;
+				justify-self: self-start;
 
 				> .name {
-					font-size: 1.2rem;
-					color: $theme-500;
+					font-size: 1.3rem;
+					font-weight: 700;
+					color: map-get($gray-shades, 800);
 				}
 
-				> .info {
-					font-size: 0.9rem;
-					margin-top: 8px;
-					color: map-get($gray-shades, 600);
+				> .desc {
+					font-size: 1.1rem;
+					font-weight: 400;
+					margin-top: 0.4rem;
+					color: $color-black-light-3;
 				}
 			}
 
-			> .buttons {
-				margin-top: 5px;
-			}
-
-			> .action {
-				display: inline-block;
+			> .actions {
+				margin-top: 20px;
 			}
 		}
 	}
diff --git a/gui/app/templates/components/folder/documents-list.hbs b/gui/app/templates/components/folder/documents-list.hbs
index 032ea82a..d49f0411 100644
--- a/gui/app/templates/components/folder/documents-list.hbs
+++ b/gui/app/templates/components/folder/documents-list.hbs
@@ -8,9 +8,9 @@
 				{{/link-to}}
 				<div class="meta">
 					<div class="lifecycle">
-						<div class="{{if (eq document.lifecycle constants.Lifecycle.Draft) 'draft'}}
-						{{if (eq document.lifecycle constants.Lifecycle.Live) 'live'}}
-						{{if (eq document.lifecycle constants.Lifecycle.Archived) 'archived'}}">
+						<div class="{{if (eq document.lifecycle constants.Lifecycle.Draft) "draft"}}
+						{{if (eq document.lifecycle constants.Lifecycle.Live) "live"}}
+						{{if (eq document.lifecycle constants.Lifecycle.Archived) "archived"}}">
 							{{document.lifecycleLabel}}
 						</div>
 					</div>
diff --git a/gui/app/templates/components/folder/settings-category.hbs b/gui/app/templates/components/folder/settings-category.hbs
index 58dd70e3..4eb91733 100644
--- a/gui/app/templates/components/folder/settings-category.hbs
+++ b/gui/app/templates/components/folder/settings-category.hbs
@@ -1,108 +1,118 @@
-<div class="content-zone">
+{{layout/logo-heading
+	title="Categories"
+	desc="Assign categories to documents and decide who can view them"
+	icon=constants.Icon.Category}}
 
-	<div class="explainer-header explainer-gap">Categories</div>
-	<form class="form-inline" onsubmit={{action "onAdd"}}>
-		<div class="form-group mr-3">
-			{{focus-input id="new-category-name" type="text" class="form-control mousetrap" placeholder="Category name" value=newCategory}}
-		</div>
-		<button type="button" class="btn btn-success bold-700" onclick={{action "onAdd"}}>Add</button>
-	</form>
-
-	<div class="space-admin">
-		<div class="categories">
-			{{#each category as |cat|}}
-				<div class="item row">
-					{{#if cat.editMode}}
-						<form onsubmit={{action "onSave" cat.id bubbles=false}} class="col-8">
-							{{focus-input id=(concat "edit-category-" cat.id) type="text" value=cat.category class="form-control"}}
-						</form>
-					{{else}}
-						<div class="category col-8">
-							<div class="name">{{cat.category}}</div>
-							<div class="info">
-								{{cat.documents}} {{if (eq cat.documents 1) "document" "documents" }} &middot; {{cat.users}} users/groups
-								{{#unless cat.access}}<span class="text-danger">(you have no view permission)</span>{{/unless}}
-							</div>
-						</div>
-					{{/if}}
-					<div class="col-4 buttons text-right">
-						{{#if cat.editMode}}
-							<button type="button" class="btn btn-outline-secondary" {{action "onEditCancel" cat.id}}>Cancel</button>
-							<button type="button" class="btn btn-success"  {{action "onSave" cat.id}}>Save</button>
-						{{else}}
-							<div id="category-access-button-{{cat.id}}" class="button-icon-gray align-middle" {{action "onShowAccessPicker" cat.id}}>
-								{{#attach-tooltip showDelay=1000}}Category view permission{{/attach-tooltip}}
-								<i class="material-icons">security</i>
-							</div>
-							<div class="button-icon-gap" />
-							<div class="button-icon-gray align-middle" {{action "onEdit" cat.id}} >
-								{{#attach-tooltip showDelay=1000}}Rename{{/attach-tooltip}}
-								<i class="material-icons">edit</i>
-							</div>
-							<div class="button-icon-gap" />
-							<div id={{concat "delete-category-" cat.id}} class="button-icon-danger align-middle" {{action "onShowDelete" cat.id}}>
-								{{#attach-tooltip showDelay=1000}}Delete{{/attach-tooltip}}
-								<i class="material-icons">delete</i>
-							</div>
-						{{/if}}
-					</div>
-				</div>
-			{{else}}
-				<div class="margin-top-30"><i>No categories</i></div>
-			{{/each}}
-		</div>
+<div class="space-admin">
+	<div class="categories">
+		<form class="form" onsubmit={{action "onAdd"}}>
+			<div class="form-group">
+				{{focus-input id="new-category-name" type="text" class="form-control mousetrap" placeholder="Category name" value=newCategory}}
+			</div>
+			{{ui/ui-button color=constants.Color.Green light=true
+				label=constants.Label.Add icon=constants.Icon.Category
+				onClick=(action "onAdd")}}
+		</form>
 	</div>
+</div>
 
-	<div id="category-delete-modal" class="modal" tabindex="-1" role="dialog">
-		<div class="modal-dialog" role="document">
-			<div class="modal-content">
-				<div class="modal-header">Category Deletion</div>
-				<div class="modal-body">
-					<p>Are you sure you want to delete this category?</p>
+{{ui/ui-spacer size=400}}
+
+<div class="space-admin">
+	<div class="categories">
+		{{#each category as |cat|}}
+			<div class="category">
+				<div class="info">
+					<div class="name">{{cat.category}}</div>
+					<div class="desc">
+						Assigned to {{cat.documents}} {{if (eq cat.documents 1) "document" "documents" }}
+						and viewable by {{cat.users}} users/groups
+					</div>
+					{{#unless cat.access}}
+						<p class="color-red-600 bold-500">You have no view permission for this category</p>
+					{{/unless}}
 				</div>
-				<div class="modal-footer">
-					<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
-					<button type="button" class="btn btn-danger" onclick={{action "onDelete"}}>Delete</button>
+				<div class="actions">
+					{{#ui/ui-toolbar dark=false light=true raised=true large=false bordered=true}}
+						{{ui/ui-toolbar-icon icon=constants.Icon.Locked color=constants.Color.Gray
+							tooltip="Set view permissions" onClick=(action "onShowAccessPicker" cat.id)}}
+						{{ui/ui-toolbar-icon icon=constants.Icon.Edit color=constants.Color.Gray
+							tooltip="Edit category" onClick=(action "onShowEdit" cat.id)}}
+						{{ui/ui-toolbar-icon icon=constants.Icon.Delete color=constants.Color.Red
+							tooltip="Delete category" onClick=(action "onShowDelete" cat.id)}}
+					{{/ui/ui-toolbar}}
 				</div>
 			</div>
+		{{/each}}
+	</div>
+</div>
+
+<div id="category-edit-modal" class="modal" tabindex="-1" role="dialog">
+	<div class="modal-dialog" role="document">
+		<div class="modal-content">
+			<div class="modal-header">Edit Category</div>
+			<div class="modal-body">
+				<div class="form-group">
+					{{focus-input id="edit-category-name" type="text" class="form-control mousetrap" placeholder="Category name" value=editName}}
+				</div>
+			</div>
+			<div class="modal-footer">
+				{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Close dismiss=true}}
+				{{ui/ui-button-gap}}
+				{{ui/ui-button color=constants.Color.Green light=true label=constants.Label.Save onClick=(action "onSave")}}
+			</div>
 		</div>
 	</div>
+</div>
 
-	{{#ui/ui-dialog title="Set Category Access" confirmCaption="Save" buttonColor=constants.Color.Green show=showCategoryAccess onAction=(action "onGrantAccess")}}
-		<p>Select who can view documents within category</p>
+<div id="category-delete-modal" class="modal" tabindex="-1" role="dialog">
+	<div class="modal-dialog" role="document">
+		<div class="modal-content">
+			<div class="modal-header">Delete Category</div>
+			<div class="modal-body">
+				<p>Are you sure you want to delete this category?</p>
+			</div>
+			<div class="modal-footer">
+				{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Close dismiss=true}}
+				{{ui/ui-button-gap}}
+				{{ui/ui-button color=constants.Color.Red light=true label=constants.Label.Delete onClick=(action "onDelete")}}
+			</div>
+		</div>
+	</div>
+</div>
 
-		<div class="widget-list-picker">
-			<ul class="options">
-				{{#each categoryPermissions as |permission|}}
-					<li class="option {{if permission.selected "selected"}}" {{action "onToggle" permission}}>
-						<div class="text text-truncate">
-							{{#if (eq permission.who "role")}}
+{{#ui/ui-dialog title="Set Category Access" confirmCaption="Save" buttonColor=constants.Color.Green show=showCategoryAccess onAction=(action "onGrantAccess")}}
+	<p>Select who can view documents within category</p>
+	<div class="widget-list-picker">
+		<ul class="options">
+			{{#each categoryPermissions as |permission|}}
+				<li class="option {{if permission.selected "selected"}}" {{action "onToggle" permission}}>
+					<div class="text text-truncate">
+						{{#if (eq permission.who "role")}}
+							<span class="button-icon-gray button-icon-small align-middle">
+								<i class="material-icons">people</i>
+							</span>
+						{{else}}
+							{{#if (eq permission.whoId constants.EveryoneUserId)}}
 								<span class="button-icon-gray button-icon-small align-middle">
-									<i class="material-icons">people</i>
+									<i class="material-icons">language</i>
 								</span>
 							{{else}}
-								{{#if (eq permission.whoId constants.EveryoneUserId)}}
-									<span class="button-icon-gray button-icon-small align-middle">
-										<i class="material-icons">language</i>
-									</span>
-								{{else}}
-									<span class="button-icon-gray button-icon-small align-middle">
-										<i class="material-icons">person</i>
-									</span>
-								{{/if}}
+								<span class="button-icon-gray button-icon-small align-middle">
+									<i class="material-icons">person</i>
+								</span>
 							{{/if}}
-							&nbsp;{{permission.name}}
-							{{#if (eq permission.whoId session.user.id)}}
-								<small class="form-text text-muted d-inline-block">(you)</small>
-							{{/if}}
-						</div>
-						{{#if permission.selected}}
-							<i class="material-icons">check</i>
 						{{/if}}
-					</li>
-				{{/each}}
-			</ul>
-		</div>
-	{{/ui/ui-dialog}}
-
-</div>
\ No newline at end of file
+						&nbsp;{{permission.name}}
+						{{#if (eq permission.whoId session.user.id)}}
+							<small class="form-text text-muted d-inline-block">(you)</small>
+						{{/if}}
+					</div>
+					{{#if permission.selected}}
+						<i class="material-icons">check</i>
+					{{/if}}
+				</li>
+			{{/each}}
+		</ul>
+	</div>
+{{/ui/ui-dialog}}
\ No newline at end of file
diff --git a/gui/app/templates/components/folder/settings-delete.hbs b/gui/app/templates/components/folder/settings-delete.hbs
index c70fd6cc..07f6e23a 100644
--- a/gui/app/templates/components/folder/settings-delete.hbs
+++ b/gui/app/templates/components/folder/settings-delete.hbs
@@ -16,4 +16,4 @@
 	icon=constants.Icon.Delete
 	label=constants.Label.Delete
 	light=true
-	onClick=(action 'onDelete')}}
+	onClick=(action "onDelete")}}
diff --git a/gui/app/templates/components/folder/settings-general.hbs b/gui/app/templates/components/folder/settings-general.hbs
index 10670903..f353c31c 100644
--- a/gui/app/templates/components/folder/settings-general.hbs
+++ b/gui/app/templates/components/folder/settings-general.hbs
@@ -33,4 +33,4 @@
 	icon=constants.Icon.Settings
 	label=constants.Label.Save
 	light=true
-	onClick=(action 'onSave')}}
+	onClick=(action "onSave")}}
diff --git a/gui/app/templates/components/folder/settings-permissions.hbs b/gui/app/templates/components/folder/settings-permissions.hbs
index 92205755..b1f73f7c 100644
--- a/gui/app/templates/components/folder/settings-permissions.hbs
+++ b/gui/app/templates/components/folder/settings-permissions.hbs
@@ -151,19 +151,31 @@
 	label=constants.Label.Save onClick=(action "onSave")}}
 
 <div id="space-add-user-modal" class="modal" tabindex="-1" role="dialog">
-	<div class="modal-dialog" role="document">
+	<div class="modal-dialog modal-lg" role="document">
 		<div class="modal-content">
-			<div class="modal-header">Add User To Space</div>
+			<div class="modal-header">Add users to this space</div>
 			<div class="modal-body">
 				{{input id="user-search" type="text" class="form-control mousetrap" placeholder="Search for users by firstname, lastname, email" value=searchText key-up=(action "onSearch")}}
-				{{#each filteredUsers as |user|}}
-					<div class="row my-3">
-						<div class="col-10">{{user.fullname}}</div>
-						<div class="col-2 text-right">
-							<button class="btn btn-success" {{action "onAdd" user}}>Add</button>
-						</div>
+				{{ui/ui-spacer size=200}}
+				<div class="space-admin">
+					<div class="add-users">
+						{{#each filteredUsers as |user|}}
+							<div class="item">
+								{{#ui/ui-toolbar dark=false light=true raised=true large=false bordered=true}}
+									{{ui/ui-toolbar-icon
+										icon=constants.Icon.AddUser
+										color=constants.Color.Green
+										tooltip="Remove member"
+										onClick=(action "onAdd" user)}}
+									{{ui/ui-toolbar-label
+										color=constants.Color.Gray
+										label=user.fullname
+										onClick=(action "onAdd" user)}}
+								{{/ui/ui-toolbar}}
+							</div>
+						{{/each}}
 					</div>
-				{{/each}}
+				</div>
 			</div>
 			<div class="modal-footer">
 	 			{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Close dismiss=true}}
@@ -173,9 +185,9 @@
 </div>
 
 <div id="space-invite-user-modal" class="modal" tabindex="-1" role="dialog">
-	<div class="modal-dialog" role="document">
+	<div class="modal-dialog modal-lg" role="document">
 		<div class="modal-content">
-			<div class="modal-header">Invite Users to Space</div>
+			<div class="modal-header">Invite users to this space</div>
 			<div class="modal-body">
 				<p>Email invite leads to a smooth onboarding process</p>
 				<form onsubmit={{action "onSpaceInvite"}}>