diff --git a/gui/app/components/user-profile.js b/gui/app/components/user-profile.js
index 80260f69..a793842a 100644
--- a/gui/app/components/user-profile.js
+++ b/gui/app/components/user-profile.js
@@ -20,7 +20,10 @@ export default Component.extend(AuthProvider, {
 	password: { password: "", confirmation: "" },
 	hasFirstnameError: empty('model.firstname'),
 	hasLastnameError: empty('model.lastname'),
-	hasEmailError: empty('model.email'),
+	hasEmailError: computed('model.email', function() {
+		let email = this.get('model.email');
+		return isEmpty(email) || is.not.email(email);
+	}),
 	hasPasswordError: computed('passwordError', 'password.password', {
 		get() {
 			if (isPresent(this.get('passwordError'))) {
@@ -35,10 +38,10 @@ export default Component.extend(AuthProvider, {
 	hasConfirmPasswordError: computed('confirmPasswordError', {
 		get() {
 			if (isPresent(this.get("confirmPasswordError"))) {
-				return `error`;
+				return `is-invalid`;
 			}
 
-			return;
+			return '';
 		}
 	}),
 
diff --git a/gui/app/pods/profile/template.hbs b/gui/app/pods/profile/template.hbs
index 60033775..c7de1b3a 100644
--- a/gui/app/pods/profile/template.hbs
+++ b/gui/app/pods/profile/template.hbs
@@ -1,15 +1,5 @@
-{{#layout/zone-container}}
-	{{#layout/zone-sidebar}}
-		<div class="sidebar-common">
-			{{layout/sidebar-intro title="Profile" message="Your user profile"}}
-		</div>
-		<div class="sidebar-wrapper">
-			<div class="sidebar-menu">
-				<div class="avatar-large">{{session.user.initials}}</div>
-			</div>
-		</div>
-	{{/layout/zone-sidebar}}
-	{{#layout/zone-content}}
-		{{user-profile model=model save=(action 'save')}}
-	{{/layout/zone-content}}
-{{/layout/zone-container}}
+{{layout/nav-bar}}
+
+<div class="container">
+	{{user-profile model=model save=(action 'save')}}
+</div>
diff --git a/gui/app/styles/app.scss b/gui/app/styles/app.scss
index 40c7c6dc..b4570509 100644
--- a/gui/app/styles/app.scss
+++ b/gui/app/styles/app.scss
@@ -17,7 +17,6 @@
 @import "widget/widget.scss";
 @import "view/layout.scss"; // junk?
 @import "view/page-search.scss";
-@import "view/page-profile.scss";
 @import "view/page-customize.scss";
 @import "view/page-auth.scss";
 @import "view/page-onboard.scss";
diff --git a/gui/app/styles/view/page-auth.scss b/gui/app/styles/view/page-auth.scss
index 41659049..6e97dbce 100644
--- a/gui/app/styles/view/page-auth.scss
+++ b/gui/app/styles/view/page-auth.scss
@@ -1,7 +1,7 @@
 .auth-box {
     display: inline-block;
 	height: 500px;
-	width: 500px;
+	max-width: 500px;
 	padding: 20px 50px;
 	background-color: $color-white;
 	color: $color-off-black;
diff --git a/gui/app/styles/view/page-profile.scss b/gui/app/styles/view/page-profile.scss
deleted file mode 100644
index 06b1e965..00000000
--- a/gui/app/styles/view/page-profile.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.page-profile {
-    @include content-container();
-}
\ No newline at end of file
diff --git a/gui/app/templates/components/folder/category-admin.hbs b/gui/app/templates/components/folder/category-admin.hbs
index f9e4e83d..fab23a12 100644
--- a/gui/app/templates/components/folder/category-admin.hbs
+++ b/gui/app/templates/components/folder/category-admin.hbs
@@ -42,7 +42,7 @@
 									<i class="material-icons">edit</i>
 								</div>
 								<div class="button-icon-gap" />
-								<div id="{{concat 'delete-category-' cat.id}}" class="button-icon-red align-middle" data-toggle="tooltip" data-placement="top" title="Delete" {{action 'onShowDelete' cat.id}}>
+								<div id="{{concat 'delete-category-' cat.id}}" class="button-icon-danger align-middle" data-toggle="tooltip" data-placement="top" title="Delete" {{action 'onShowDelete' cat.id}}>
 									<i class="material-icons">delete</i>
 								</div>
 							{{/if}}
diff --git a/gui/app/templates/components/user-profile.hbs b/gui/app/templates/components/user-profile.hbs
index 79bddbcf..58330512 100644
--- a/gui/app/templates/components/user-profile.hbs
+++ b/gui/app/templates/components/user-profile.hbs
@@ -1,31 +1,27 @@
-<div class="page-profile">
-	<div class="form-header">
-		<div class="title">About You</div>
-		<div class="tip"></div>
-	</div>
-    <div class="input-control">
-        <label>Firstname</label>
-        {{focus-input id="firstname" type="text" value=model.firstname class=(if hasFirstnameError 'error')}}
+<div class="view-profile my-5">
+	<div class="avatar-large">{{session.user.initials}}</div>
+
+    <div class="form-group">
+        <label for="firstname">Firstname</label>
+        {{focus-input id="firstname" type="text" value=model.firstname class=(if hasFirstnameError 'form-control is-invalid' 'form-control')}}
     </div>
-    <div class="input-control">
-        <label>Lastname</label>
-        {{input id="lastname" type="text" value=model.lastname class=(if hasLastnameError 'error')}}
+    <div class="form-group">
+        <label for="lastname">Lastname</label>
+        {{input id="lastname" type="text" value=model.lastname class=(if hasLastnameError 'form-control is-invalid' 'form-control')}}
     </div>
-    <div class="input-control">
-        <label>Email</label>
-        {{input id="email" type="text" value=model.email class=(if hasEmailError 'error')}}
+    <div class="form-group">
+        <label for="email">Email</label>
+        {{input id="email" type="email" value=model.email class=(if hasEmailError 'form-control is-invalid' 'form-control')}}
     </div>
     {{#if isAuthProviderDocumize}}
-        <div class="input-control">
-            <label>Password</label>
-            <div class="tip">New password</div>
-            {{input id="password" type="password" value=password.password class=hasPasswordError}}
+        <div class="form-group">
+            <label for="password">Password</label>
+            {{input id="password" type="password" value=password.password class=(if hasPasswordError 'form-control is-invalid' 'form-control')}}
         </div>
-        <div class="input-control">
-            <label>Confirm Password</label>
-            <div class="tip">Confirm your new password</div>
-            {{input id="confirmPassword" type="password" value=password.confirmation class=hasConfirmPasswordError}}
+        <div class="form-group">
+            <label for="confirmPassword">Confirm Password</label>
+            {{input id="confirmPassword" type="password" value=password.confirmation class=(if hasConfirmPasswordError 'form-control is-invalid' 'form-control')}}
         </div>
     {{/if}}
-    <div class="regular-button button-blue" {{ action 'save' }}>save</div>
+    <div class="btn btn-success" {{ action 'save' }}>save</div>
 </div>