diff --git a/client/routes/router.js b/client/routes/router.js
index f70a5ff6eba..a310a0b7ad4 100644
--- a/client/routes/router.js
+++ b/client/routes/router.js
@@ -85,7 +85,11 @@ FlowRouter.route('/account/:group?', {
 		}
 		params.group = _.capitalize(params.group, true);
 		BlazeLayout.render('main', { center: `account${ params.group }` });
-	}
+		$('.main-content').removeClass('rc-old');
+	},
+	triggersExit: [function() {
+		$('.main-content').addClass('rc-old');
+	}]
 });
 
 FlowRouter.route('/history/private', {
diff --git a/packages/rocketchat-theme/client/imports/components/flex-nav.css b/packages/rocketchat-theme/client/imports/components/flex-nav.css
index a4b3241e0e1..e63dfd42664 100644
--- a/packages/rocketchat-theme/client/imports/components/flex-nav.css
+++ b/packages/rocketchat-theme/client/imports/components/flex-nav.css
@@ -1,12 +1,14 @@
 .flex-nav {
-	position: fixed;
+	position: absolute;
 	top: 0;
 	left: 0;
 	height: 100%;
 	z-index: 3;
 	overflow-y: auto;
 	overflow-x: hidden;
-	width: var(--rooms-box-width);
+
+	/* width: var(--rooms-box-width); */
+	width: 100%;
 	transition: transform 0.15s cubic-bezier(0.5, 0, 0.1, 1);
 	will-change: transform;
 
diff --git a/packages/rocketchat-theme/client/imports/general/forms.css b/packages/rocketchat-theme/client/imports/general/forms.css
index 1cbe3538e7a..81e8c22ac46 100644
--- a/packages/rocketchat-theme/client/imports/general/forms.css
+++ b/packages/rocketchat-theme/client/imports/general/forms.css
@@ -108,6 +108,9 @@
 	--button-padding: 0.782rem;
 	--button-padding-small: 0.5rem;
 	--input-font-size: 0.875rem;
+	--border: 2px;
+	--gap-between-elements: 2.5rem;
+	--label-margin-bottom: 1rem;
 }
 
 .rc-button {
@@ -117,6 +120,7 @@
 	border-width: 1px;
 	border-style: solid;
 	background-color: transparent;
+	transition: background-color 0.3s;
 	cursor: pointer;
 
 	&:disabled {
@@ -143,6 +147,28 @@
 		padding: 0;
 		flex: 0 0 var(--button-square-size);
 	}
+
+	&.loading {
+		position: relative;
+		padding-right: calc(3 * 0.782rem);
+		transition: padding-right 0.3s;
+	}
+}
+
+.loading {
+	&::before {
+		content: "";
+		border-radius: 50%;
+		width: 20px;
+		height: 20px;
+		display: block;
+		border: 0.15rem solid rgba(255, 255, 255, 0.5);
+		border-top-color: white;
+		animation: spin 1s infinite cubic-bezier(0.14, 0.48, 0.45, 0.63);
+		position: absolute;
+		right: 0.782rem;
+		top: 25%;
+	}
 }
 
 .rc-input {
@@ -221,7 +247,7 @@
 	&__element {
 		width: 100%;
 		background-color: transparent;
-		border-width: 1px;
+		border-width: 2px;
 		border-radius: 2px;
 		border-color: #e1e5e8;
 		padding: 0.75rem 1rem;
@@ -409,9 +435,11 @@
 		padding: 0.5rem;
 		border-radius: 2px;
 		cursor: pointer;
+
 		&.selected {
 			background-color: #f2f3f5;
 		}
+
 		&:hover {
 			background-color: #f2f3f5;
 		}
@@ -428,3 +456,100 @@
 		}
 	}
 }
+
+.rc-select-avatar {
+	display: flex;
+	align-items: center;
+	cursor: pointer;
+
+	&__preview {
+		width: 150px;
+		height: 150px;
+		flex: 0 0 150px;
+		margin-right: 1rem;
+	}
+
+	&__type {
+		max-width: 150px;
+		border-bottom-left-radius: 0;
+		border-bottom-right-radius: 0;
+		margin-right: -var(--border);
+	}
+
+	&__type,
+	&__value {
+		height: 45px;
+		background-color: transparent;
+		border-width: var(--border);
+		border-radius: var(--border);
+		border-color: #e1e5e8;
+		padding: 0.75rem 1rem;
+		font-size: var(--input-font-size);
+		flex: 1;
+		-webkit-appearance: none;
+	}
+}
+
+.rc-form-group {
+	margin-bottom: var(--gap-between-elements);
+	/*display: flex;*/
+}
+
+.rc-form-label {
+	display: block;
+	cursor: pointer;
+	font-size: var(--input-font-size);
+	color: #2d343d;
+	margin-bottom: var(--label-margin-bottom);
+}
+
+.rc-form-legend {
+	color: #2d343d;
+	font-size: 1rem;
+}
+
+.rc-w-50 {
+	display: inline-block;
+	width: 50%;
+	vertical-align: top;
+
+	/* TODO: find a better place */
+
+	&.rc-input {
+		&:nth-child(odd) {
+			padding-right: 15px;
+		}
+
+		&:nth-child(even) {
+			padding-left: 15px;
+		}
+	}
+}
+
+.preferences-page {
+	&__header {
+		height: 77px;
+		display: flex;
+		align-items: center;
+		padding: 25px;
+		box-shadow: 0 0 1px 1px #e6e4e4;
+		color: #2f343d;
+		font-size: 16px;
+		font-weight: 600;
+	}
+
+	&__content {
+		padding: 10px;
+		max-width: 649px;
+		margin: 25px auto;
+	}
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/packages/rocketchat-ui-account/client/accountProfile.html b/packages/rocketchat-ui-account/client/accountProfile.html
index 32198b18db4..fd2aa02a0ea 100644
--- a/packages/rocketchat-ui-account/client/accountProfile.html
+++ b/packages/rocketchat-ui-account/client/accountProfile.html
@@ -1,13 +1,95 @@
 <template name="accountProfile">
-	<section class="page-container page-home page-static">
-		<header class="fixed-title border-component-color">
+	<section class="preferences-page">
+		<header class="preferences-page__header">
 			{{> burger}}
-			<h2>
-				<span class="room-title">{{_ "Profile"}}</span>
-			</h2>
+			<h2 style="flex: 1 1; white-space: nowrap;">{{_ "My Profile"}}</h2>
+			<div class="content" style="text-align: end; max-width: 649px;  flex: 1 1 100%">
+
+
+				<button class="rc-button rc-button--blue" type="submit" data-button="create" {{canSave 'disabled'}}>Save Changes</button>
+			</div>
+			<div style="flex: 1 1;"></div>
 		</header>
-		<div class="content">
-			<div class="rocket-form">
+		<div class="preferences-page__content">
+
+		<form>
+  		<fieldset class="rc-form-legend">
+    		<legend style="margin-bottom: 2.5rem;">Profile Details</legend>
+				<div>
+					<div class="rc-form-group">
+						<label class="rc-form-label">{{_ "Profile Picture"}}</label>
+						<div class="rc-select-avatar">
+								<div class="rc-select-avatar__preview">
+									{{> avatar username=username}}
+								</div>
+								<select class="rc-select-avatar__type">
+									<option value="gravatar">gravatar</option>
+								</select>
+								<div class="rc-select-avatar__value">
+									aeo
+								</div>
+						</div>
+					</div>
+					<div class="rc-form-group">
+						<div class="rc-input rc-w-50">
+							<label class="rc-input__label">
+								<div class="rc-input__title">{{_ "Name"}}</div>
+								<div class="rc-input__wrapper">
+									<input type="text" class="rc-input__element" name="realname" id="realname" value="{{realname}}" >
+								</div>
+							</label>
+						</div><div class="rc-input rc-w-50">
+							{{# with canChange=allowUsernameChange}}
+							<label class="rc-input__label">
+								<div class="rc-input__title">{{_ "Username"}}</div>
+								<div class="rc-input__wrapper">
+									<div class="rc-input__icon">
+										<svg class="rc-input__icon-svg rc-input__icon-svg--at">
+											<use href="#icon-at"></use>
+										</svg>
+									</div>
+									<input type="text" class="rc-input__element" name="username" id="username" value="{{username}}" {{ifThenElse canChange '' 'disabled'}}>
+								</div>
+							</label>
+							{{# unless canChange}}<div class="rc-input__description">{{_ 'Username_Change_Disabled'}}</div>{{/unless}}
+						{{/with}}
+						</div>
+					</div>
+					<div class="rc-form-group">
+						<div class="rc-input rc-w-50">
+							{{#with canChange=allowEmailChange}}
+							<label class="rc-input__label">
+								<div class="rc-input__title">{{_ "Email"}}</div>
+								<div class="rc-input__wrapper">
+									<input name="name" type="text" class="rc-input__element" placeholder="Type channel name" value="{{email}}" {{ifThenElse canChange '' 'disabled'}}>
+								</div>
+							</label>
+							{{# unless canChange}}<div class="rc-input__description">{{_ 'Email_Change_Disabled'}}</div>{{/unless}}
+							{{/with}}
+						</div><div class="rc-input rc-w-50">
+							{{#with canChange=allowPasswordChange}}
+							<label class="rc-input__label">
+								<div class="rc-input__title">{{_ "New_password"}}</div>
+								<div class="rc-input__wrapper">
+									<input name="name" type="text" class="rc-input__element" placeholder="Type channel name" {{ifThenElse canChange '' 'disabled'}}>
+								</div>
+							</label>
+							{{# unless canChange}}<div class="rc-input__description">{{_ 'Password_Change_Disabled'}}</div>{{/unless}}
+							{{/with}}
+						</div>
+					</div>
+				</div>
+			</fieldset>
+		</form>
+
+
+
+
+
+
+
+
+			<!-- <div class="rocket-form">
 				<fieldset>
 					<div class="input-line">
 						<label for="realname">{{_ "Name"}}</label>
@@ -70,7 +152,7 @@
 					<button class="button danger delete"><i class="icon-trash"></i><span>{{_ "Delete_my_account"}}</span></button>
 				</div>
 				{{/if}}
-			</div>
+			</div> -->
 		</div>
 	</section>
 </template>
diff --git a/packages/rocketchat-ui-account/client/accountProfile.js b/packages/rocketchat-ui-account/client/accountProfile.js
index 2038b340d2d..444ddfe9670 100644
--- a/packages/rocketchat-ui-account/client/accountProfile.js
+++ b/packages/rocketchat-ui-account/client/accountProfile.js
@@ -1,5 +1,11 @@
 import toastr from 'toastr';
 Template.accountProfile.helpers({
+	ifThenElse(condition, val, not = '') {
+		return condition ? val : not;
+	},
+	canSave(ret) {
+		return ret;
+	},
 	allowDeleteOwnAccount() {
 		return RocketChat.settings.get('Accounts_AllowDeleteOwnAccount');
 	},
@@ -23,15 +29,9 @@ Template.accountProfile.helpers({
 	allowEmailChange() {
 		return RocketChat.settings.get('Accounts_AllowEmailChange');
 	},
-	usernameChangeDisabled() {
-		return t('Username_Change_Disabled');
-	},
 	allowPasswordChange() {
 		return RocketChat.settings.get('Accounts_AllowPasswordChange');
 	},
-	passwordChangeDisabled() {
-		return t('Password_Change_Disabled');
-	},
 	customFields() {
 		return Meteor.user().customFields;
 	}