diff --git a/gui/app/constants/constants.js b/gui/app/constants/constants.js
index 288e1375..03705691 100644
--- a/gui/app/constants/constants.js
+++ b/gui/app/constants/constants.js
@@ -260,6 +260,7 @@ let constants = EmberObject.extend({
 		Reset: 'Reset',
 		Restore: 'Restore',
 		Save: 'Save',
+		Search: 'Search',
 		SignIn: 'Sign In',
 		Update: 'Update',
 	}
diff --git a/gui/app/pods/profile/controller.js b/gui/app/pods/profile/controller.js
index 2e0fb90b..42c817bf 100644
--- a/gui/app/pods/profile/controller.js
+++ b/gui/app/pods/profile/controller.js
@@ -10,9 +10,8 @@
 // https://documize.com
 
 import { inject as service } from '@ember/service';
-
-import Controller from '@ember/controller';
 import { isPresent } from '@ember/utils';
+import Controller from '@ember/controller';
 
 export default Controller.extend({
 	userService: service('user'),
diff --git a/gui/app/pods/profile/template.hbs b/gui/app/pods/profile/template.hbs
index 0777d6dd..bc2986d5 100644
--- a/gui/app/pods/profile/template.hbs
+++ b/gui/app/pods/profile/template.hbs
@@ -1,18 +1,11 @@
-{{#layout/top-bar}}
-{{/layout/top-bar}}
+{{#layout/master-sidebar}}
+{{/layout/master-sidebar}}
 
-{{#layout/middle-zone}}
-	{{#layout/middle-zone-content}}
-		{{user/user-profile model=model save=(action "save")}}
-	{{/layout/middle-zone-content}}
+{{#layout/master-content}}
+	{{layout/logo-heading
+		title=session.user.fullname
+		desc="Manage you profile and password"
+		icon=constants.Icon.Person}}
 
-	{{#layout/middle-zone-sidebar}}
-		<div id="sidebar" class="sidebar sidebar-center">
-			<h1>{{session.user.fullname}}</h1>
-			<div class="avatar-large my-3">{{session.user.initials}}</div>
-		</div>
-	{{/layout/middle-zone-sidebar}}
-{{/layout/middle-zone}}
-
-{{#layout/bottom-bar}}
-{{/layout/bottom-bar}}
+	{{user/user-profile model=model save=(action "save")}}
+{{/layout/master-content}}
diff --git a/gui/app/pods/search/template.hbs b/gui/app/pods/search/template.hbs
index f0c96321..791c321a 100644
--- a/gui/app/pods/search/template.hbs
+++ b/gui/app/pods/search/template.hbs
@@ -1,49 +1,77 @@
-{{#layout/top-bar}}
-{{/layout/top-bar}}
+{{#layout/master-sidebar selectedItem="search"}}
+	{{ui/ui-spacer size=300}}
 
-{{#layout/middle-zone}}
-	{{#layout/middle-zone-content}}
-		{{search/search-view filter=filter matchDoc=matchDoc matchContent=matchContent matchTag=matchTag matchFile=matchFile slog=slog}}
-	{{/layout/middle-zone-content}}
-
-	{{#layout/middle-zone-sidebar scrollable=true}}
-		<div id="sidebar" class="sidebar">
-			<h1>Search</h1>
-			<div class="view-search">
-				{{#if (eq appMeta.storageProvider constants.StoreProvider.MySQL)}}
-					<div class="syntax">
-						<div class="example">apple banana</div>
-						<div class="explain">Show results that contain at least one of the two words</div>
-						<div class="example">+apple +banana</div>
-						<div class="explain">Show results that contain both words</div>
-						<div class="example">+apple macintosh</div>
-						<div class="explain">Show results that contain the word "apple", but rank rows higher if they also contain "macintosh"</div>
-						<div class="example">+apple -macintosh</div>
-						<div class="explain">Show results that contain the word "apple" but not "macintosh"</div>
-						<div class="example">+apple +(&gt;turnover &lt;strudel)</div>
-						<div class="explain">Show results that contain the words "apple" and "turnover", or "apple" and "strudel" (in any order), but rank "apple turnover" higher than "apple strudel"</div>
-						<div class="example">apple*</div>
-						<div class="explain">Show results that contain words such as "apple", "apples", "applesauce", or "applet"</div>
-						<div class="example">"some words"</div>
-						<div class="explain">Show results that contain the exact phrase "some words" (for example, rows that contain "some words of wisdom" but not "some noise words")</div>
-					</div>
-				{{/if}}
-				{{#if (eq appMeta.storageProvider constants.StoreProvider.PostgreSQL)}}
-					<div class="syntax">
-						<div class="example">apple | banana</div>
-						<div class="explain">Show results that contain at either word</div>
-						<div class="example">apple & banana</div>
-						<div class="explain">Show results that contain both words</div>
-						<div class="example">apple !macintosh</div>
-						<div class="explain">Show results that contain the word "apple" but not "macintosh"</div>
-						<div class="example">google & (apple | microsoft) & !ibm</div>
-						<div class="explain">Show results that have "google", either "apple" or "microsoft" but not "ibm"</div>
-					</div>
-				{{/if}}
+	<div class="section">
+		<div class="title">Match Filter</div>
+		<div class="list">
+			<div class="item">
+				{{input id="search-1" type="checkbox" checked=matchDoc}}
+				<label for="search-1" class="name">Document name</label>
+			</div>
+			<div class="item">
+				{{input id="search-2" type="checkbox" checked=matchContent}}
+				<label for="search-2" class="name">Document content</label>
+			</div>
+			<div class="item">
+				{{input id="search-3" type="checkbox" checked=matchTag}}
+				<label for="search-3" class="name">Tag name</label>
+			</div>
+			<div class="item">
+				{{input id="search-4" type="checkbox" checked=matchFile}}
+				<label for="search-4" class="name">Attachment name</label>
 			</div>
 		</div>
-	{{/layout/middle-zone-sidebar}}
-{{/layout/middle-zone}}
+	</div>
+	{{ui/ui-spacer size=200}}
 
-{{#layout/bottom-bar}}
-{{/layout/bottom-bar}}
\ No newline at end of file
+	<div class="section">
+		<div class="title">query examples</div>
+		<div class="view-search">
+			{{#if (eq appMeta.storageProvider constants.StoreProvider.MySQL)}}
+				<div class="syntax">
+					<div class="example">apple banana</div>
+					<div class="explain">Show results that contain at least one of the two words</div>
+					<div class="example">+apple +banana</div>
+					<div class="explain">Show results that contain both words</div>
+					<div class="example">+apple macintosh</div>
+					<div class="explain">Show results that contain the word "apple", but rank rows higher if they also contain "macintosh"</div>
+					<div class="example">+apple -macintosh</div>
+					<div class="explain">Show results that contain the word "apple" but not "macintosh"</div>
+					<div class="example">+apple +(&gt;turnover &lt;strudel)</div>
+					<div class="explain">Show results that contain the words "apple" and "turnover", or "apple" and "strudel" (in any order), but rank "apple turnover" higher than "apple strudel"</div>
+					<div class="example">apple*</div>
+					<div class="explain">Show results that contain words such as "apple", "apples", "applesauce", or "applet"</div>
+					<div class="example">"some words"</div>
+					<div class="explain">Show results that contain the exact phrase "some words" (for example, rows that contain "some words of wisdom" but not "some noise words")</div>
+				</div>
+			{{/if}}
+			{{#if (eq appMeta.storageProvider constants.StoreProvider.PostgreSQL)}}
+				<div class="syntax">
+					<div class="example">apple | banana</div>
+					<div class="explain">Show results that contain at either word</div>
+					<div class="example">apple & banana</div>
+					<div class="explain">Show results that contain both words</div>
+					<div class="example">apple !macintosh</div>
+					<div class="explain">Show results that contain the word "apple" but not "macintosh"</div>
+					<div class="example">google & (apple | microsoft) & !ibm</div>
+					<div class="explain">Show results that have "google", either "apple" or "microsoft" but not "ibm"</div>
+				</div>
+			{{/if}}
+		</div>
+	</div>
+{{/layout/master-sidebar}}
+
+{{#layout/master-content}}
+	{{layout/logo-heading
+		title="Search"
+		desc="Basic and advanced search queries"
+		icon=constants.Icon.Search}}
+
+	{{search/search-view
+		filter=filter
+		matchDoc=matchDoc
+		matchContent=matchContent
+		matchTag=matchTag
+		matchFile=matchFile
+		slog=slog}}
+{{/layout/master-content}}
diff --git a/gui/app/styles/core/layout/master-internal.scss b/gui/app/styles/core/layout/master-internal.scss
index 580c96bb..13b94734 100644
--- a/gui/app/styles/core/layout/master-internal.scss
+++ b/gui/app/styles/core/layout/master-internal.scss
@@ -40,8 +40,9 @@
 			> .nav-options {
 				> .option {
 					cursor: pointer;
+					display: block;
 
-					>.dicon {
+					> .dicon {
 						display: inline-block;
 						color: $color-white;
 						font-size: 20px;
@@ -52,6 +53,10 @@
 						display: none;
 					}
 				}
+
+				> .selected {
+					// background-color: $theme-400;
+				}
 			}
 
 			> .meta {
diff --git a/gui/app/styles/core/layout/sidebar.scss b/gui/app/styles/core/layout/sidebar.scss
index cfa59888..950002a2 100644
--- a/gui/app/styles/core/layout/sidebar.scss
+++ b/gui/app/styles/core/layout/sidebar.scss
@@ -37,6 +37,11 @@
 					color: $color-black-light-3;
 				}
 
+				> input[type=checkbox] {
+					margin: -6px 0 0 0;
+					padding: 0;
+				}
+
 				&:hover {
 					> .dicon {
 						color: map-get($gray-shades, 600);
diff --git a/gui/app/styles/core/view/search.scss b/gui/app/styles/core/view/search.scss
index e416214d..4f4f463c 100644
--- a/gui/app/styles/core/view/search.scss
+++ b/gui/app/styles/core/view/search.scss
@@ -1,16 +1,8 @@
 .view-search {
-	margin-top: 30px;
-
-	> .heading {
-		font-size: 1.5rem;
-		font-weight: bold;
-		color: map-get($gray-shades, 800);
-		margin-top: 30px;
-	}
-
 	.search-box {
 		width: 300px;
 	}
+
 	@media (min-width: 900px) {
 		.search-box {
 			width: 400px;
@@ -105,22 +97,27 @@
 		}
 	}
 
-
 	> .syntax {
-		margin: 20px 0;
+		margin: 10px 0;
 
 		> .example {
 			margin-top: 10px;
-			font-weight: 600;
-			font-size: 1.1rem;
+			font-weight: 500;
+			font-size: 1rem;
 			font-style: italic;
-			color: map-get($gray-shades, 800);
+			color: map-get($gray-shades, 700);
 		}
 
 		> .explain {
-			margin: 10px 0 20px 0px;
-			font-size: 1.2rem;
+			margin: 5px 0 15px 0px;
+			font-size: 0.9rem;
 			color: map-get($gray-shades, 600);
 		}
 	}
+
+	> .result-summary {
+		font-size: 1.2rem;
+		font-weight: 600;
+		color: map-get($gray-shades, 800);
+	}
 }
diff --git a/gui/app/templates/components/layout/master-sidebar.hbs b/gui/app/templates/components/layout/master-sidebar.hbs
index 707c7ca1..49e1cceb 100644
--- a/gui/app/templates/components/layout/master-sidebar.hbs
+++ b/gui/app/templates/components/layout/master-sidebar.hbs
@@ -23,7 +23,7 @@
 					{{/link-to}}
 				{{/if}}
 			{{/if}}
-			{{#link-to "search" class=(if (eq selectedItem "spaces") "option selected" "option")}}
+			{{#link-to "search" class=(if (eq selectedItem "search") "option selected" "option")}}
 				<i class={{concat "dicon " constants.Icon.Search}}></i>
 				<div class="name">search</div>
 			{{/link-to}}
diff --git a/gui/app/templates/components/search/search-results.hbs b/gui/app/templates/components/search/search-results.hbs
index 411850de..d62d6298 100644
--- a/gui/app/templates/components/search/search-results.hbs
+++ b/gui/app/templates/components/search/search-results.hbs
@@ -1,5 +1,5 @@
 <div class="view-search">
-	<div class="heading">{{resultPhrase}}</div>
+	<div class="result-summary">{{resultPhrase}}</div>
 	<ul class="documents">
 		{{#each documents key="id" as |result|}}
 			<li class="document">
diff --git a/gui/app/templates/components/search/search-view.hbs b/gui/app/templates/components/search/search-view.hbs
index 48f41241..cd6a1330 100644
--- a/gui/app/templates/components/search/search-view.hbs
+++ b/gui/app/templates/components/search/search-view.hbs
@@ -4,31 +4,13 @@
 			{{focus-input type="text" value=filter class="form-control mr-3 search-box" placeholder="keywords, tags"}}
 		</div>
 		<div class="form-group">
-			<button class="btn btn-success" {{action "onSearch"}}>Search</button>
+			{{ui/ui-button color=constants.Color.Green light=true label=constants.Label.Search onClick=(action "onSearch")}}
 		</div>
 	</form>
-	<div class="form-group mt-2">
-		<div class="form-check form-check-inline">
-			{{input type="checkbox" id="search-1" class="form-check-input" checked=matchDoc}}
-			<label class="form-check-label" for="search-1">&nbsp;document title</label>
-		</div>
-		<div class="form-check form-check-inline">
-			{{input type="checkbox" id="search-2" class="form-check-input" checked=matchContent}}
-			<label class="form-check-label" for="search-2">&nbsp;content</label>
-		</div>
-		<div class="form-check form-check-inline">
-			{{input type="checkbox" id="search-3" class="form-check-input" checked=matchTag}}
-			<label class="form-check-label" for="search-3">&nbsp;tag name</label>
-		</div>
-		<div class="form-check form-check-inline">
-			{{input type="checkbox" id="search-4" class="form-check-input" checked=matchFile}}
-			<label class="form-check-label" for="search-4">&nbsp;attachment name</label>
-		</div>
-	</div>
-
 	{{#if validSearch}}
 		{{search/search-results results=results keywords=filter}}
 	{{else}}
-		<p class="text-danger my-5">Your search term is too short</p>
+		{{ui/ui-spacer size=300}}
+		<p class="color-red-700">Your search query is too short</p>
 	{{/if}}
 </div>