diff --git a/gui/app/styles/core/bootstrap.scss b/gui/app/styles/core/bootstrap.scss
index d70abc2a..2bffc1e9 100644
--- a/gui/app/styles/core/bootstrap.scss
+++ b/gui/app/styles/core/bootstrap.scss
@@ -93,9 +93,6 @@ $link-hover-decoration:     none;
 
 // Optional
 @import "node_modules/bootstrap/scss/reboot";
-// @import "node_modules/bootstrap/scss/grid";
-// @import "node_modules/bootstrap/scss/buttons";
-// @import "node_modules/bootstrap/scss/button-group";
 @import "node_modules/bootstrap/scss/forms";
 @import "node_modules/bootstrap/scss/custom-forms";
 @import "node_modules/bootstrap/scss/input-group";
@@ -107,6 +104,19 @@ $link-hover-decoration:     none;
 .modal-80 {
 	max-width: 80% !important;
 }
+.modal-70 {
+	max-width: 70% !important;
+}
+.modal-60 {
+	max-width: 60% !important;
+}
+.modal-50 {
+	max-width: 50% !important;
+}
+
+.modal-backdrop {
+	z-index: 1041;
+}
 
 body.modal-open {
 	padding-right: 0 !important;
@@ -130,15 +140,3 @@ body.modal-open {
 	}
 }
 
-.btn {
-	text-transform: uppercase;
-	font-weight: 600;
-}
-
-// Bootstrap override that removes gutter space on smaller screens
-// @media (max-width: 1200px) {
-//     .container {
-//         width: 100%;
-//         max-width: none;
-//     }
-// }
diff --git a/gui/app/styles/core/view/document/add-section.scss b/gui/app/styles/core/view/document/add-section.scss
index 448a8558..0677d83b 100644
--- a/gui/app/styles/core/view/document/add-section.scss
+++ b/gui/app/styles/core/view/document/add-section.scss
@@ -1,38 +1,23 @@
+// Mobile first design
 .new-section-wizard {
 	margin: 0;
 	padding: 0;
 
-	.new-section-caption {
-		margin: 20px 0 10px 0;
-		color: $theme-500;
-		font-size: 1.4rem;
-		font-weight: bold;
-	}
-
-	.new-section-empty {
-		font-size: 1.2rem;
-		color: map-get($gray-shades, 600);
-	}
-
-	 .preset-list {
-		margin: 0;
+	.options {
+		margin: 10px;
 		padding: 0;
 
-		> .item {
-			@include border-radius(3px);
-			list-style: none;
+		> .preset-option {
 			cursor: pointer;
 			display: block;
-			margin: 0 20px 20px 0;
-			padding: 12px 0 0 20px;
-			height: 60px;
-			border: 1px solid map-get($gray-shades, 300);
-			background-color: map-get($gray-shades, 100);
-
-			&:hover {
-				border-color: $theme-500;
-				background-color: $theme-100;
-			}
+			white-space: nowrap;
+			padding: 0.375rem 0.75rem;
+			margin: 10px;
+			background-color: map-get($yellow-shades, 300);
+			border: 1px solid map-get($yellow-shades, 400);
+			@extend .no-select;
+			@include border-radius(2px);
+			@include button-shadow-light();
 
 			.icon {
 				text-align: center;
@@ -48,56 +33,60 @@
 				}
 			}
 
-			> .title {
+			> .name {
 				display: inline-block;
 				font-size: 1.1rem;
 				font-weight: 500;
-				color: $color-black-light-1;
+				color: map-get($yellow-shades, 900);
 				letter-spacing: 0.5px;
 				margin-top: 6px;
 			}
+
+			&:hover {
+				background-color: map-get($yellow-shades, 400);
+			}
+		}
+
+		> .block-option {
+			cursor: pointer;
+			display: block;
+			white-space: nowrap;
+			padding: 0.375rem 0.75rem;
+			margin: 10px;
+			background-color: map-get($yellow-shades, 200);
+			border: 1px solid map-get($yellow-shades, 300);
+			@extend .no-select;
+			@include border-radius(2px);
+			@include button-shadow-light();
+
+			> .name {
+				font-size: 1.1rem;
+				font-weight: 500;
+				color: map-get($yellow-shades, 800);
+				letter-spacing: 0.5px;
+				@extend .text-truncate;
+			}
+
+			> .desc {
+				color: map-get($yellow-shades, 700);
+				font-size: 0.9rem;
+				font-weight: 300;
+				@extend .text-truncate;
+			}
+
+			&:hover {
+				background-color: map-get($yellow-shades, 300);
+			}
 		}
 	}
 
-	 .block-list {
-		margin: 0;
-		padding: 0;
-
-		> .item {
-			@include border-radius(3px);
-			list-style: none;
-			cursor: pointer;
-			display: block;
-			margin: 0 20px 20px 0;
-			padding: 12px 20px;
-			width: 100%;
-			position: relative;
-			border: 1px solid map-get($gray-shades, 300);
-			background-color: map-get($gray-shades, 100);
-
-			&:hover {
-				border-color: $theme-500;
-				background-color: $theme-100;
-			}
-
-			> .actions {
-					position: absolute;
-				top: 10px;
-				right: 8px;
-			}
-
-			> .details {
-				> .title {
-					font-size: 1.1rem;
-					font-weight: 500;
-					color: $color-black-light-1;
-					letter-spacing: 0.5px;
-				}
-
-				> .desc {
-					color: $color-black-light-1;
-					font-size: 1rem;
-				}
+	// Desktop sizing
+	@media (min-width: $display-break-2) {
+		.options {
+			> .preset-option,
+			> .block-option {
+				display: inline-block;
+				width: 300px;
 			}
 		}
 	}
diff --git a/gui/app/templates/components/document/add-section.hbs b/gui/app/templates/components/document/add-section.hbs
index 8d4e29d1..e324a238 100644
--- a/gui/app/templates/components/document/add-section.hbs
+++ b/gui/app/templates/components/document/add-section.hbs
@@ -1,46 +1,39 @@
 <div id="add-section-modal" class="modal" tabindex="-1" role="dialog">
-	<div class="modal-dialog modal-80" role="document">
+	<div class="modal-dialog modal-60" role="document">
 		<div class="modal-content">
 			<div class="modal-header">Insert Section</div>
 			<div class="modal-body">
-
 				<div id="new-section-wizard" class="new-section-wizard">
-					<div class="box">
-						<div class="form-group">
-							{{focus-input type="text" id="new-section-name" value=newSectionName
-								class=(if newSectionNameMissing "mousetrap form-control form-control-lg	is-invalid" "mousetrap form-control form-control-lg")
-								placeholder="Enter section name" autocomplete="off"}}
-						</div>
-						<div class="form-group">
-							<div class="new-section-caption">Select Section Type</div>
-							<ul class="preset-list">
-								{{#each sections as |section|}}
-								<li class="item" {{action "onInsertSection" section}}>
-									<div class="icon">
-										<img class="img" src="/sections/{{section.contentType}}.png" srcset="/sections/{{section.contentType}}@2x.png">
-									</div>
-									<div class="title">{{section.title}}</div>
-								</li>
-								{{/each}}
-							</ul>
-						</div>
-						<div class="new-section-caption">Select Re-usable Content</div>
-						{{#if hasBlocks}}
-							<ul class="block-list">
-								{{#each blocks as |block|}}
-									<li class="item">
-										{{#attach-tooltip showDelay=1000}}Published by {{block.firstname}} {{block.lastname}}, {{time-ago block.created}} &mdash; used {{ block.used }} times{{/attach-tooltip}}
-										<div class="details" {{action "onInsertBlock" block}}>
-											<div class="title text-truncate">{{block.title}}</div>
-											<div class="desc text-truncate">{{block.excerpt}}</div>
-										</div>
-									</li>
-								{{/each}}
-							</ul>
-						{{else}}
-							<div class="new-section-empty">You have no reusable content &mdash; publish any document section as a template for others to reuse</div>
-						{{/if}}
+					<div class="form-group">
+						{{focus-input type="text" id="new-section-name" value=newSectionName
+							class=(if newSectionNameMissing "mousetrap form-control form-control-lg	is-invalid" "mousetrap form-control form-control-lg")
+							placeholder="Enter section name" autocomplete="off"}}
 					</div>
+
+					<ul class="options">
+						{{#each sections as |section|}}
+							<li class="preset-option" {{action "onInsertSection" section}}>
+								<div class="icon">
+									<img class="img" src="/sections/{{section.contentType}}.png" srcset="/sections/{{section.contentType}}@2x.png">
+								</div>
+								<div class="name">{{section.title}}</div>
+							</li>
+						{{/each}}
+						{{#if hasBlocks}}
+							<br>
+							<br>
+						{{/if}}
+						{{#each blocks as |block|}}
+							<li class="block-option" {{action "onInsertBlock" block}}>
+								<div class="name">{{block.title}}</div>
+								<div class="desc">{{block.excerpt}}</div>
+								{{#attach-tooltip showDelay=1000}}
+									{{block.excerpt}}<br>
+									Published by {{block.firstname}} {{block.lastname}}, {{time-ago block.created}}
+								{{/attach-tooltip}}
+							</li>
+						{{/each}}
+					</ul>
 				</div>
 			</div>
 			<div class="modal-footer">
diff --git a/gui/app/templates/components/document/document-meta.hbs b/gui/app/templates/components/document/document-meta.hbs
index e7e27d63..ff55f854 100644
--- a/gui/app/templates/components/document/document-meta.hbs
+++ b/gui/app/templates/components/document/document-meta.hbs
@@ -1,5 +1,5 @@
 <div class="document-meta">
-	{{#link-to 'folder.index' space.id space.slug class="no-print"}}
+	{{#link-to "folder.index" space.id space.slug class="no-print"}}
 		{{ui/ui-button light=true color=constants.Color.Yellow uppercase=false
 			icon=constants.Icon.ArrowLeft label=space.name}}
 	{{/link-to}}
diff --git a/gui/app/templates/components/document/page-heading.hbs b/gui/app/templates/components/document/page-heading.hbs
index 1cd6db46..d8473b17 100644
--- a/gui/app/templates/components/document/page-heading.hbs
+++ b/gui/app/templates/components/document/page-heading.hbs
@@ -155,7 +155,7 @@
 				<div class="modal-footer">
 					{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Cancel dismiss=true}}
 					{{ui/ui-button-gap}}
-					{{ui/ui-button color=constants.Color.Delete light=true label=constants.Label.Delete onClick=(action "onDeletePage")}}
+					{{ui/ui-button color=constants.Color.Red light=true label=constants.Label.Delete onClick=(action "onDeletePage")}}
 				</div>
 			</div>
 		</div>