diff --git a/.eslintignore b/.eslintignore
index 4aaa092258b..a557dee6c2f 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -10,7 +10,6 @@ packages/rocketchat-livechat/.app/.meteor
 packages/rocketchat-livechat/assets/rocketchat-livechat.min.js
 packages/rocketchat-livechat/assets/rocket-livechat.js
 packages/rocketchat_theme/client/minicolors/jquery.minicolors.js
-packages/rocketchat_theme/client/minicolors/jquery.minicolors.js
 packages/rocketchat_theme/client/vendor/
 packages/rocketchat-ui/client/lib/customEventPolyfill.js
 packages/rocketchat-ui/client/lib/Modernizr.js
diff --git a/imports/personal-access-tokens/client/personalAccessTokens.html b/imports/personal-access-tokens/client/personalAccessTokens.html
index 31a0e7e3ada..a707a270cf9 100644
--- a/imports/personal-access-tokens/client/personalAccessTokens.html
+++ b/imports/personal-access-tokens/client/personalAccessTokens.html
@@ -1,30 +1,22 @@
 <template name="accountTokens">
-	<section class="preferences-page preferences-page--new">
+	<section class="preferences-page preferences-page--new page-container page-home page-static page-settings">
 		{{> header sectionName="Personal_Access_Tokens" hideHelp=true fullpage=true}}
-		<div class="preferences-page__content">
-			{{# if isAllowed}}
-			<h2>{{_ "API_Personal_Access_Tokens_To_REST_API"}}</h2>
-			<br>
-			<form id="form-tokens" class="">
 
-				<div class="rc-form-group rc-form-group--inline">
-					<!-- <input id="input-token-name"
-					type="text"
-					name="tokenName"
-					placeholder={{_ "Enter_a_name"}}
-					value="{{tokenName}}"> -->
-					<div class="rc-input rc-input--small rc-directory-search rc-form-item-inline">
-						<label class="rc-input__label">
-							<div class="rc-input__wrapper">
-								<input type="text" class="rc-input__element rc-input__element--small js-search" name="tokenName" id="tokenName"
-								 placeholder={{_ "API_Add_Personal_Access_Token"}} autocomplete="off">
-							</div>
-						</label>
+		<div class="content">
+			{{# if isAllowed}}
+			<form id="form-tokens">
+				<div class="section-content border-component-color">
+					<div class="input-line double-col">
+						<label for="tokenName" class="setting-label">{{_ "API_Personal_Access_Tokens_To_REST_API"}}</label>
+						<div class="setting-field">
+							<input type="text" class="rc-input__element js-search" name="tokenName" id="tokenName"
+								placeholder={{_ "API_Add_Personal_Access_Token"}} autocomplete="off" />
+						</div>
+						<button name="add" class="rc-button rc-button--primary setting-action save-token">{{_ "Add"}}</button>
 					</div>
-					<button name="add" class="rc-button rc-button--primary rc-form-item-inline save-token">{{_ "Add"}}</button>
 				</div>
 			</form>
-			<br>
+
 			<div class="rc-table-content">
 				{{#table}}
 				<thead>
diff --git a/packages/rocketchat-2fa/client/accountSecurity.html b/packages/rocketchat-2fa/client/accountSecurity.html
index 935a10b007c..c6d20854f8e 100644
--- a/packages/rocketchat-2fa/client/accountSecurity.html
+++ b/packages/rocketchat-2fa/client/accountSecurity.html
@@ -1,47 +1,44 @@
 <template name="accountSecurity">
-	<section class="preferences-page preferences-page--new">
+	<section class="preferences-page preferences-page--new page-settings">
 		{{> header sectionName="Security" fullpage=true}}
 		<div class="preferences-page__content">
 			<form id="security" autocomplete="off" class="container">
 				{{# if isAllowed}}
-				<fieldset>
-					<div class="section">
-						<h1>{{_ "Two-factor_authentication"}}</h1>
-						<div class="section-content border-component-color">
-							{{#if isEnabled}}
-							<button class="rc-button rc-button--cancel disable-2fa">{{_ "Disable_two-factor_authentication"}}</button>
-							{{else}}
-							{{#unless isRegistering}}
-							<p>{{_ "Two-factor_authentication_is_currently_disabled"}}</p>
+				<div class="section">
+					<h1>{{_ "Two-factor_authentication"}}</h1>
+					<div class="section-content border-component-color">
+						{{#if isEnabled}}
+						<button class="rc-button rc-button--cancel disable-2fa">{{_ "Disable_two-factor_authentication"}}</button>
+						{{else}}
+						{{#unless isRegistering}}
+						<p>{{_ "Two-factor_authentication_is_currently_disabled"}}</p>
 
-							<button class="rc-button rc-button--primary enable-2fa">{{_ "Enable_two-factor_authentication"}}</button>
-							{{else}}
-							<p>{{_ "Scan_QR_code"}}</p>
-							<p>{{_ "Scan_QR_code_alternative_s" code=imageSecret}}</p>
+						<button class="rc-button rc-button--primary enable-2fa">{{_ "Enable_two-factor_authentication"}}</button>
+						{{else}}
+						<p>{{_ "Scan_QR_code"}}</p>
+						<p>{{_ "Scan_QR_code_alternative_s" code=imageSecret}}</p>
 
-							<img src="{{imageData}}">
+						<img src="{{imageData}}">
 
-							<form class="inline">
+						<form>
+							<div class="input-line double-col">
 								<input type="text" class="rc-input__element" id="testCode" placeholder="{{_ "Enter_authentication_code"}}">
-								<button class="rc-button rc-button--primary verify-code">{{_ "Verify"}}</button>
-							</form>
-							{{/unless}}
-							{{/if}}
-						</div>
+								<button class="rc-button rc-button--primary setting-action verify-code">{{_ "Verify"}}</button>
+							</div>
+						</form>
+						{{/unless}}
+						{{/if}}
 					</div>
-				</fieldset>
-
+				</div>
 
 				{{#if isEnabled}}
-				<fieldset>
-					<div class="section">
-						<h1>{{_ "Backup_codes"}}</h1>
-						<div class="section-content border-component-color">
-							<p>{{codesRemaining}}</p>
-							<button class="rc-button rc-button--secondary regenerate-codes">{{_ "Regenerate_codes"}}</button>
-						</div>
+				<div class="section">
+					<h1>{{_ "Backup_codes"}}</h1>
+					<div class="section-content border-component-color">
+						<p>{{codesRemaining}}</p>
+						<button class="rc-button rc-button--secondary regenerate-codes">{{_ "Regenerate_codes"}}</button>
 					</div>
-				</fieldset>
+				</div>
 				{{/if}}
 				{{/if}}
 			</form>
diff --git a/packages/rocketchat-i18n/i18n/en.i18n.json b/packages/rocketchat-i18n/i18n/en.i18n.json
index 65d8fc9cf7a..f060964ceb5 100644
--- a/packages/rocketchat-i18n/i18n/en.i18n.json
+++ b/packages/rocketchat-i18n/i18n/en.i18n.json
@@ -1924,6 +1924,7 @@
   "Mute_user": "Mute user",
   "Muted": "Muted",
   "My_Account": "My Account",
+  "My Data": "My Data",
   "My_location": "My location",
   "n_messages": "%s messages",
   "N_new_messages": "%s new messages",
@@ -3014,4 +3015,4 @@
   "Your_push_was_sent_to_s_devices": "Your push was sent to %s devices",
   "Your_server_link": "Your server link",
   "Your_workspace_is_ready": "Your workspace is ready to use 🎉"
-}
\ No newline at end of file
+}
diff --git a/packages/rocketchat-ui-account/client/accountIntegrations.html b/packages/rocketchat-ui-account/client/accountIntegrations.html
index 9448566c99d..ef894978795 100644
--- a/packages/rocketchat-ui-account/client/accountIntegrations.html
+++ b/packages/rocketchat-ui-account/client/accountIntegrations.html
@@ -1,27 +1,25 @@
 <template name="accountIntegrations">
-	<section class="page-container page-home page-static">
-		{{> header sectionName="Integrations"}}
+	<section class="preferences-page preferences-page--new page-static page-settings">
+		{{> header sectionName="Integrations" fullpage=true}}
 
 		<div class="content">
 			<form id="integrations" autocomplete="off">
-				<fieldset class="rc-form-legend">
-					<div class="section">
-						<h1>{{_ "WebDAV"}}</h1>
-						<div class="section-content border-component-color">
-							<div class="input-line double-col">
-								<label for="webdav-accounts">{{_ "WebDAV_Accounts"}}</label>
-								<div class="rc-select">
-									<select id="webdav-accounts" class="rc-select__element" style="text-transform: none" multiple>
-										{{#each webdavAccounts}}
-											<option value="{{this._id}}">{{getOptionValue this}}</option>
-										{{/each}}
-									</select>
-								</div>
-								<button class="rc-button rc-button--cancel webdav-account-remove"><span>{{_ "Remove"}}</span></button>
+				<div class="section">
+					<h1>{{_ "WebDAV"}}</h1>
+					<div class="section-content border-component-color">
+						<div class="input-line double-col">
+							<label for="webdav-accounts" class="setting-label">{{_ "WebDAV_Accounts"}}</label>
+							<div class="rc-select setting-field">
+								<select id="webdav-accounts" class="rc-select__element" style="text-transform: none" multiple>
+									{{#each webdavAccounts}}
+										<option value="{{this._id}}">{{getOptionValue this}}</option>
+									{{/each}}
+								</select>
 							</div>
+							<button class="rc-button rc-button--cancel setting-action webdav-account-remove"><span>{{_ "Remove"}}</span></button>
 						</div>
 					</div>
-				</fieldset>
+				</div>
 			</form>
 		</div>
 	</section>
diff --git a/packages/rocketchat-ui-account/client/accountPreferences.html b/packages/rocketchat-ui-account/client/accountPreferences.html
index 8d4b6a32789..231a4134ceb 100644
--- a/packages/rocketchat-ui-account/client/accountPreferences.html
+++ b/packages/rocketchat-ui-account/client/accountPreferences.html
@@ -1,5 +1,5 @@
 <template name="accountPreferences">
-	<section class="preferences-page preferences-page--new page-container page-home page-static">
+	<section class="preferences-page preferences-page--new page-container page-home page-static page-settings">
 		{{#header sectionName="Preferences" buttons=true fullpage=true}}
 		<div class="rc-header__section-button">
 			<button class="rc-button rc-button--primary save"><span>{{_ "Save_changes"}}</span></button>
@@ -8,332 +8,329 @@
 
 		<div class="content">
 			<form id="preferences" autocomplete="off">
-				<fieldset class="rc-form-legend">
-					<div class="section">
-						<h1>{{_ "Localization"}}</h1>
-						<div class="section-content border-component-color">
-							<div class="input-line double-col">
-								<label for="language">{{_ "Language"}}</label>
-								<div class="rc-select">
-									<select id="language" class="required rc-select__element">
-										{{#each languages}}
-											<option value="{{key}}" selected="{{isUserLanguage key}}" dir="auto">{{name}}</option>
-										{{/each}}
-									</select>
-									{{> icon block="rc-select__arrow" icon="arrow-down"}}
-								</div>
+				<div class="section">
+					<h1>{{_ "Localization"}}</h1>
+					<div class="section-content border-component-color">
+						<div class="input-line double-col">
+							<label for="language" class="setting-label">{{_ "Language"}}</label>
+							<div class="rc-select setting-field">
+								<select id="language" class="required rc-select__element">
+									{{#each languages}}
+										<option value="{{key}}" selected="{{isUserLanguage key}}" dir="auto">{{name}}</option>
+									{{/each}}
+								</select>
+								{{> icon block="rc-select__arrow" icon="arrow-down"}}
 							</div>
 						</div>
 					</div>
-					<div class="section">
-						<h1>{{_ "Global"}}</h1>
-						<div class="section-content border-component-color">
-							<div class="input-line double-col">
-								<label for="language">{{_ "Dont_ask_me_again_list"}}</label>
-								<div class="rc-select">
-									<select id="dont-ask" class="rc-select__element" multiple>
-										{{#each dontAskAgainList}}
-											<option value="{{action}}">{{label}}</option>
-										{{/each}}
-									</select>
-								</div>
-								<button class="rc-button rc-button--cancel js-dont-ask-remove"><span>{{_ "Remove"}}</span></button>
+				</div>
+				<div class="section">
+					<h1>{{_ "Global"}}</h1>
+					<div class="section-content border-component-color">
+						<div class="input-line double-col">
+							<label for="dont-ask" class="setting-label">{{_ "Dont_ask_me_again_list"}}</label>
+							<div class="rc-select setting-field">
+								<select id="dont-ask" class="rc-select__element" multiple>
+									{{#each dontAskAgainList}}
+										<option value="{{action}}">{{label}}</option>
+									{{/each}}
+								</select>
 							</div>
+							<button class="rc-button rc-button--cancel setting-action js-dont-ask-remove">{{_ "Remove"}}</button>
 						</div>
 					</div>
-					<div class="section">
-						<h1>{{_ "User_Presence"}}</h1>
-						<div class="section-content border-component-color">
-							<div class="input-line double-col" id="enableAutoAway">
-								<label>{{_ "Enable_Auto_Away"}}</label>
-								<div>
-									<label><input type="radio" name="enableAutoAway" value="true" checked="{{ checked 'enableAutoAway' true }}"/> {{_ "True"}}</label>
-									<label><input type="radio" name="enableAutoAway" value="false" checked="{{ checked 'enableAutoAway' false }}"/> {{_ "False"}}</label>
-								</div>
+				</div>
+				<div class="section">
+					<h1>{{_ "User_Presence"}}</h1>
+					<div class="section-content border-component-color">
+						<div class="input-line double-col" id="enableAutoAway">
+							<label class="setting-label">{{_ "Enable_Auto_Away"}}</label>
+							<div class="setting-field">
+								<label><input type="radio" name="enableAutoAway" value="true" checked="{{ checked 'enableAutoAway' true }}"/> {{_ "True"}}</label>
+								<label><input type="radio" name="enableAutoAway" value="false" checked="{{ checked 'enableAutoAway' false }}"/> {{_ "False"}}</label>
 							</div>
+						</div>
 
-							<div class="input-line double-col" id="idleTimeLimit">
-								<label>{{_ "Idle_Time_Limit"}}</label>
-								<div>
-									{{#if idleTimeLimit}}
-										<input type="number" class="rc-input__element" name="idleTimeLimit" min="0" value="{{idleTimeLimit}}">
-									{{else}}
-										<input type="number" class="rc-input__element" name="idleTimeLimit" min="0" value="" placeholder="{{_ "Use_Global_Settings"}} ({{defaultIdleTimeLimit}})">
-									{{/if}}
-									<div class="info">{{_ "Idle_Time_Limit_Description"}}</div>
-								</div>
+						<div class="input-line double-col" id="idleTimeLimit">
+							<label class="setting-label">{{_ "Idle_Time_Limit"}}</label>
+							<div class="setting-field">
+								{{#if idleTimeLimit}}
+									<input type="number" class="rc-input__element" name="idleTimeLimit" min="0" value="{{idleTimeLimit}}">
+								{{else}}
+									<input type="number" class="rc-input__element" name="idleTimeLimit" min="0" value="" placeholder="{{_ "Use_Global_Settings"}} ({{defaultIdleTimeLimit}})">
+								{{/if}}
+								<div class="settings-description secondary-font-color">{{_ "Idle_Time_Limit_Description"}}</div>
 							</div>
 						</div>
-
 					</div>
-					<div class="section">
-						<h1>{{_ "Notifications"}}</h1>
-						<div class="section-content border-component-color">
-							<div class="input-line double-col">
-								<label>{{_ "Desktop_Notifications"}}</label>
-								<div>
-									{{#if desktopNotificationEnabled}}
-										<label>{{_ "Desktop_Notifications_Enabled"}}</label>
-										<label><button class="button test-notifications"><i class="icon-comment-empty secondary-font-color"></i> <span>{{_ "Test_Desktop_Notifications"}}</span></button></label>
+
+				</div>
+				<div class="section">
+					<h1>{{_ "Notifications"}}</h1>
+					<div class="section-content border-component-color">
+						<div class="input-line double-col">
+							<label class="setting-label">{{_ "Desktop_Notifications"}}</label>
+							<div class="setting-field">
+								{{#if desktopNotificationEnabled}}
+									<label>{{_ "Desktop_Notifications_Enabled"}}</label>
+									<button class="button test-notifications"><i class="icon-comment-empty secondary-font-color"></i> <span>{{_ "Test_Desktop_Notifications"}}</span></button>
+								{{else}}
+									{{#if desktopNotificationDisabled}}
+										<label>{{_ "Desktop_Notifications_Disabled"}}</label>
 									{{else}}
-										{{#if desktopNotificationDisabled}}
-											<label>{{_ "Desktop_Notifications_Disabled"}}</label>
-										{{else}}
-											<label><button class="button enable-notifications"><i class="icon-comment-empty secondary-font-color"></i> <span>{{_ "Enable_Desktop_Notifications"}}</span></button></label>
-										{{/if}}
+										<button class="button enable-notifications"><i class="icon-comment-empty secondary-font-color"></i> <span>{{_ "Enable_Desktop_Notifications"}}</span></button>
 									{{/if}}
-								</div>
+								{{/if}}
 							</div>
-							<div class="input-line double-col">
-								<label>{{_ "Notification_Duration"}}</label>
-								<div>
-									{{#if desktopNotificationDuration}}
-										<input type="number" class="rc-input__element" name="desktopNotificationDuration" min="0" value="{{desktopNotificationDuration}}">
-									{{else}}
-										<input type="number" class="rc-input__element" name="desktopNotificationDuration" min="0" value="" placeholder="{{_ "Use_Global_Settings"}} ({{defaultDesktopNotificationDuration}})">
-									{{/if}}
-								</div>
+						</div>
+						<div class="input-line double-col">
+							<label class="setting-label">{{_ "Notification_Duration"}}</label>
+							<div class="setting-field">
+								{{#if desktopNotificationDuration}}
+									<input type="number" class="rc-input__element" name="desktopNotificationDuration" min="0" value="{{desktopNotificationDuration}}">
+								{{else}}
+									<input type="number" class="rc-input__element" name="desktopNotificationDuration" min="0" value="" placeholder="{{_ "Use_Global_Settings"}} ({{defaultDesktopNotificationDuration}})">
+								{{/if}}
 							</div>
-							<div class="input-line double-col" id="desktopNotifications">
-								<label>{{_ "Notification_Desktop_Default_For"}}</label>
+						</div>
+						<div class="input-line double-col" id="desktopNotifications">
+							<label class="setting-label">{{_ "Notification_Desktop_Default_For"}}</label>
+							<div class="rc-select setting-field">
+								<select class="input-monitor rc-select__element" name="desktopNotifications">
+									<option value="default" selected="{{selected 'desktopNotifications' 'default' 'default'}}">{{_ "Default"}} ({{_ defaultDesktopNotification}})</option>
+									<option value="all" selected="{{selected 'desktopNotifications' 'all' 'default'}}">{{_ "All_messages"}}</option>
+									<option value="mentions" selected="{{selected 'desktopNotifications' 'mentions' 'default'}}">{{_ "Mentions"}}</option>
+									<option value="nothing" selected="{{selected 'desktopNotifications' 'nothing' 'default'}}">{{_ "Nothing"}}</option>
+								</select>
+								{{> icon block="rc-select__arrow" icon="arrow-down" }}
+							</div>
+						</div>
+						<div class="input-line double-col" id="mobileNotifications">
+							<label class="setting-label">{{_ "Notification_Mobile_Default_For"}}</label>
+							<div class="rc-select setting-field">
+								<select class="input-monitor rc-select__element" name="mobileNotifications">
+									<option value="default" selected="{{selected 'mobileNotifications' 'default' 'default'}}">{{_ "Default"}} ({{_ defaultMobileNotification}})</option>
+									<option value="all" selected="{{selected 'mobileNotifications' 'all' 'default'}}">{{_ "All_messages"}}</option>
+									<option value="mentions" selected="{{selected 'mobileNotifications' 'mentions' 'default'}}">{{_ "Mentions"}}</option>
+									<option value="nothing" selected="{{selected 'mobileNotifications' 'nothing' 'default'}}">{{_ "Nothing"}}</option>
+								</select>
+								{{> icon block="rc-select__arrow" icon="arrow-down" }}
+							</div>
+						</div>
+						<div class="input-line double-col" id="emailNotificationMode">
+							<label class="setting-label">{{_ "Email_Notification_Mode"}}</label>
+							<div class="setting-field">
 								<div class="rc-select">
-									<select class="input-monitor rc-select__element" name="desktopNotifications">
-										<option value="default" selected="{{selected 'desktopNotifications' 'default' 'default'}}">{{_ "Default"}} ({{_ defaultDesktopNotification}})</option>
-										<option value="all" selected="{{selected 'desktopNotifications' 'all' 'default'}}">{{_ "All_messages"}}</option>
-										<option value="mentions" selected="{{selected 'desktopNotifications' 'mentions' 'default'}}">{{_ "Mentions"}}</option>
-										<option value="nothing" selected="{{selected 'desktopNotifications' 'nothing' 'default'}}">{{_ "Nothing"}}</option>
+									<select class="input-monitor rc-select__element" name="emailNotificationMode">
+										<option value="default" selected="{{selected 'emailNotificationMode' 'default' 'default'}}">{{_ "Default"}} ({{_ defaultEmailNotification}})</option>
+										<option value="nothing" selected="{{selected 'emailNotificationMode' 'nothing'}}">{{_ "Email_Notification_Mode_Disabled"}}</option>
+										<option value="mentions" selected="{{selected 'emailNotificationMode' 'mentions'}}">{{_ "Email_Notification_Mode_All"}}</option>
 									</select>
 									{{> icon block="rc-select__arrow" icon="arrow-down" }}
 								</div>
+								<div class="settings-description secondary-font-color">{{_ "You_need_to_verifiy_your_email_address_to_get_notications"}}</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="section">
+					<h1>{{_ "Messages"}}</h1>
+					<div class="section-content border-component-color">
+						<div class="input-line double-col" id="unreadAlert">
+							<label class="setting-label">{{_ "Unread_Tray_Icon_Alert"}}</label>
+							<div class="setting-field">
+								<label><input type="radio" name="unreadAlert" value="true" checked="{{checked 'unreadAlert' true}}"/> {{_ "On"}}</label>
+								<label><input type="radio" name="unreadAlert" value="false" checked="{{checked 'unreadAlert' false}}"/> {{_ "Off"}}</label>
 							</div>
-							<div class="input-line double-col" id="mobileNotifications">
-								<label>{{_ "Notification_Mobile_Default_For"}}</label>
+						</div>
+						<div class="input-line double-col" id="clockMode">
+							<label class="setting-label">{{_ "Message_TimeFormat"}}</label>
+							<div class="setting-field">
 								<div class="rc-select">
-									<select class="input-monitor rc-select__element" name="mobileNotifications">
-										<option value="default" selected="{{selected 'mobileNotifications' 'default' 'default'}}">{{_ "Default"}} ({{_ defaultMobileNotification}})</option>
-										<option value="all" selected="{{selected 'mobileNotifications' 'all' 'default'}}">{{_ "All_messages"}}</option>
-										<option value="mentions" selected="{{selected 'mobileNotifications' 'mentions' 'default'}}">{{_ "Mentions"}}</option>
-										<option value="nothing" selected="{{selected 'mobileNotifications' 'nothing' 'default'}}">{{_ "Nothing"}}</option>
+									<select class="input-monitor rc-select__element" name="clockMode">
+										<option value="0" selected="{{selected 'clockMode' 0}}">{{_ "Default"}}</option>
+										<option value="1" selected="{{selected 'clockMode' 1}}">{{_ "12_Hour"}}</option>
+										<option value="2" selected="{{selected 'clockMode' 2}}">{{_ "24_Hour"}}</option>
 									</select>
 									{{> icon block="rc-select__arrow" icon="arrow-down" }}
 								</div>
 							</div>
-							<div class="input-line double-col" id="emailNotificationMode">
-								<label>{{_ "Email_Notification_Mode"}}</label>
-								<div>
-									<div class="rc-select">
-										<select class="input-monitor rc-select__element" name="emailNotificationMode">
-											<option value="default" selected="{{selected 'emailNotificationMode' 'default' 'default'}}">{{_ "Default"}} ({{_ defaultEmailNotification}})</option>
-											<option value="nothing" selected="{{selected 'emailNotificationMode' 'nothing'}}">{{_ "Email_Notification_Mode_Disabled"}}</option>
-											<option value="mentions" selected="{{selected 'emailNotificationMode' 'mentions'}}">{{_ "Email_Notification_Mode_All"}}</option>
-										</select>
-										{{> icon block="rc-select__arrow" icon="arrow-down" }}
-									</div>
-									<div class="info">{{_ "You_need_to_verifiy_your_email_address_to_get_notications"}}</div>
-								</div>
-							</div>
 						</div>
-					</div>
-					<div class="section">
-						<h1>{{_ "Messages"}}</h1>
-						<div class="section-content border-component-color">
-							<div class="input-line double-col" id="unreadAlert">
-								<label>{{_ "Unread_Tray_Icon_Alert"}}</label>
-								<div>
-									<label><input type="radio" name="unreadAlert" value="true" checked="{{checked 'unreadAlert' true}}"/> {{_ "On"}}</label>
-									<label><input type="radio" name="unreadAlert" value="false" checked="{{checked 'unreadAlert' false}}"/> {{_ "Off"}}</label>
-								</div>
+						<div class="input-line double-col">
+							<label class="setting-label">{{_ "Use_Emojis"}}</label>
+							<div class="setting-field">
+								<label><input type="radio" name="useEmojis" value="true" checked="{{checked 'useEmojis' true}}" /> {{_ "True"}}</label>
+								<label><input type="radio" name="useEmojis" value="false" checked="{{checked 'useEmojis' false}}" /> {{_ "False"}}</label>
 							</div>
-							<div class="input-line double-col" id="clockMode">
-								<label>{{_ "Message_TimeFormat"}}</label>
-								<div>
-									<div class="rc-select">
-										<select class="input-monitor rc-select__element" name="clockMode">
-											<option value="0" selected="{{selected 'clockMode' 0}}">{{_ "Default"}}</option>
-											<option value="1" selected="{{selected 'clockMode' 1}}">{{_ "12_Hour"}}</option>
-											<option value="2" selected="{{selected 'clockMode' 2}}">{{_ "24_Hour"}}</option>
-										</select>
-										{{> icon block="rc-select__arrow" icon="arrow-down" }}
-									</div>
-								</div>
-							</div>
-							<div class="input-line double-col">
-								<label>{{_ "Use_Emojis"}}</label>
-								<div>
-									<label><input type="radio" name="useEmojis" value="true" checked="{{checked 'useEmojis' true}}" /> {{_ "True"}}</label>
-									<label><input type="radio" name="useEmojis" value="false" checked="{{checked 'useEmojis' false}}" /> {{_ "False"}}</label>
-								</div>
+						</div>
+						<div class="input-line double-col" id="convertAsciiEmoji">
+							<label class="setting-label">{{_ "Convert_Ascii_Emojis"}}</label>
+							<div class="setting-field">
+								<label><input type="radio" name="convertAsciiEmoji" value="true" checked="{{checked 'convertAsciiEmoji' true}}" /> {{_ "True"}}</label>
+								<label><input type="radio" name="convertAsciiEmoji" value="false" checked="{{checked 'convertAsciiEmoji' false}}" /> {{_ "False"}}</label>
 							</div>
-							<div class="input-line double-col" id="convertAsciiEmoji">
-								<label>{{_ "Convert_Ascii_Emojis"}}</label>
-								<div>
-									<label><input type="radio" name="convertAsciiEmoji" value="true" checked="{{checked 'convertAsciiEmoji' true}}" /> {{_ "True"}}</label>
-									<label><input type="radio" name="convertAsciiEmoji" value="false" checked="{{checked 'convertAsciiEmoji' false}}" /> {{_ "False"}}</label>
-								</div>
+						</div>
+						<div class="input-line double-col" id="autoImageLoad">
+							<label class="setting-label">{{_ "Auto_Load_Images"}}</label>
+							<div class="setting-field">
+								<label><input type="radio" name="autoImageLoad" value="true" checked="{{checked 'autoImageLoad' true}}" /> {{_ "True"}}</label>
+								<label><input type="radio" name="autoImageLoad" value="false" checked="{{checked 'autoImageLoad' false}}" /> {{_ "False"}}</label>
 							</div>
-							<div class="input-line double-col" id="autoImageLoad">
-								<label>{{_ "Auto_Load_Images"}}</label>
-								<div>
-									<label><input type="radio" name="autoImageLoad" value="true" checked="{{checked 'autoImageLoad' true}}" /> {{_ "True"}}</label>
-									<label><input type="radio" name="autoImageLoad" value="false" checked="{{checked 'autoImageLoad' false}}" /> {{_ "False"}}</label>
-								</div>
+						</div>
+						<div class="input-line double-col" id="saveMobileBandwidth">
+							<label class="setting-label">{{_ "Save_Mobile_Bandwidth"}}</label>
+							<div class="setting-field">
+								<label><input type="radio" name="saveMobileBandwidth" value="true" checked="{{checked 'saveMobileBandwidth' true}}" /> {{_ "True"}}</label>
+								<label><input type="radio" name="saveMobileBandwidth" value="false" checked="{{checked 'saveMobileBandwidth' false}}" /> {{_ "False"}}</label>
 							</div>
-							<div class="input-line double-col" id="saveMobileBandwidth">
-								<label>{{_ "Save_Mobile_Bandwidth"}}</label>
-								<div>
-									<label><input type="radio" name="saveMobileBandwidth" value="true" checked="{{checked 'saveMobileBandwidth' true}}" /> {{_ "True"}}</label>
-									<label><input type="radio" name="saveMobileBandwidth" value="false" checked="{{checked 'saveMobileBandwidth' false}}" /> {{_ "False"}}</label>
-								</div>
+						</div>
+						<div class="input-line double-col" id="collapseMediaByDefault">
+							<label class="setting-label">{{_ "Collapse_Embedded_Media_By_Default"}}</label>
+							<div class="setting-field">
+								<label><input type="radio" name="collapseMediaByDefault" value="true" checked="{{checked 'collapseMediaByDefault' true}}" /> {{_ "True"}}</label>
+								<label><input type="radio" name="collapseMediaByDefault" value="false" checked="{{checked 'collapseMediaByDefault' false}}" /> {{_ "False"}}</label>
 							</div>
-							<div class="input-line double-col" id="collapseMediaByDefault">
-								<label>{{_ "Collapse_Embedded_Media_By_Default"}}</label>
-								<div>
-									<label><input type="radio" name="collapseMediaByDefault" value="true" checked="{{checked 'collapseMediaByDefault' true}}" /> {{_ "True"}}</label>
-									<label><input type="radio" name="collapseMediaByDefault" value="false" checked="{{checked 'collapseMediaByDefault' false}}" /> {{_ "False"}}</label>
-								</div>
+						</div>
+						<div class="input-line double-col" id="hideUsernames">
+							<label class="setting-label">{{_ "Hide_usernames"}}</label>
+							<div class="setting-field">
+								<label><input type="radio" name="hideUsernames" value="true" checked="{{checked 'hideUsernames' true}}" /> {{_ "True"}}</label>
+								<label><input type="radio" name="hideUsernames" value="false" checked="{{checked 'hideUsernames' false}}" /> {{_ "False"}}</label>
 							</div>
-							<div class="input-line double-col" id="hideUsernames">
-								<label>{{_ "Hide_usernames"}}</label>
-								<div>
-									<label><input type="radio" name="hideUsernames" value="true" checked="{{checked 'hideUsernames' true}}" /> {{_ "True"}}</label>
-									<label><input type="radio" name="hideUsernames" value="false" checked="{{checked 'hideUsernames' false}}" /> {{_ "False"}}</label>
+						</div>
+						{{#if showRoles}}
+							<div class="input-line double-col" id="hideRoles">
+								<label class="setting-label">{{_ "Hide_roles"}}</label>
+								<div class="setting-field">
+									<label><input type="radio" name="hideRoles" value="true" checked="{{checked 'hideRoles' true}}" /> {{_ "True"}}</label>
+									<label><input type="radio" name="hideRoles" value="false" checked="{{checked 'hideRoles' false}}" /> {{_ "False"}}</label>
 								</div>
 							</div>
-							{{#if showRoles}}
-								<div class="input-line double-col" id="hideRoles">
-									<label>{{_ "Hide_roles"}}</label>
-									<div>
-										<label><input type="radio" name="hideRoles" value="true" checked="{{checked 'hideRoles' true}}" /> {{_ "True"}}</label>
-										<label><input type="radio" name="hideRoles" value="false" checked="{{checked 'hideRoles' false}}" /> {{_ "False"}}</label>
-									</div>
-								</div>
-							{{/if}}
-							<div class="input-line double-col" id="hideFlexTab">
-								<label>{{_ "Hide_flextab"}}</label>
-								<div>
-									<label><input type="radio" name="hideFlexTab" value="true" checked="{{checked 'hideFlexTab' true}}" /> {{_ "True"}}</label>
-									<label><input type="radio" name="hideFlexTab" value="false" checked="{{checked 'hideFlexTab' false}}" /> {{_ "False"}}</label>
-								</div>
+						{{/if}}
+						<div class="input-line double-col" id="hideFlexTab">
+							<label class="setting-label">{{_ "Hide_flextab"}}</label>
+							<div class="setting-field">
+								<label><input type="radio" name="hideFlexTab" value="true" checked="{{checked 'hideFlexTab' true}}" /> {{_ "True"}}</label>
+								<label><input type="radio" name="hideFlexTab" value="false" checked="{{checked 'hideFlexTab' false}}" /> {{_ "False"}}</label>
 							</div>
-							<div class="input-line double-col" id="hideAvatars">
-								<label>{{_ "Hide_Avatars"}}</label>
-								<div>
-									<label><input type="radio" name="hideAvatars" value="true" checked="{{checked 'hideAvatars' true}}"/> {{_ "True"}}</label>
-									<label><input type="radio" name="hideAvatars" value="false" checked="{{checked 'hideAvatars' false}}"/> {{_ "False"}}</label>
-								</div>
+						</div>
+						<div class="input-line double-col" id="hideAvatars">
+							<label class="setting-label">{{_ "Hide_Avatars"}}</label>
+							<div class="setting-field">
+								<label><input type="radio" name="hideAvatars" value="true" checked="{{checked 'hideAvatars' true}}"/> {{_ "True"}}</label>
+								<label><input type="radio" name="hideAvatars" value="false" checked="{{checked 'hideAvatars' false}}"/> {{_ "False"}}</label>
 							</div>
-							<div class="input-line double-col" id="messageViewMode">
-								<label>{{_ "View_mode"}}</label>
-								<div>
-									<div class="rc-select">
-										<select class="input-monitor rc-select__element" name="messageViewMode">
-											<option value="0" selected="{{selected 'messageViewMode' 0}}">{{_ "Normal"}}</option>
-											<option value="1" selected="{{selected 'messageViewMode' 1}}">{{_ "Cozy"}}</option>
-											<option value="2" selected="{{selected 'messageViewMode' 2}}">{{_ "Compact"}}</option>
-										</select>
-										{{> icon block="rc-select__arrow" icon="arrow-down" }}
-									</div>
-									<div class="info">{{_ "Message_view_mode_info"}}</div>
+						</div>
+						<div class="input-line double-col" id="messageViewMode">
+							<label class="setting-label">{{_ "View_mode"}}</label>
+							<div class="setting-field">
+								<div class="rc-select">
+									<select class="input-monitor rc-select__element" name="messageViewMode">
+										<option value="0" selected="{{selected 'messageViewMode' 0}}">{{_ "Normal"}}</option>
+										<option value="1" selected="{{selected 'messageViewMode' 1}}">{{_ "Cozy"}}</option>
+										<option value="2" selected="{{selected 'messageViewMode' 2}}">{{_ "Compact"}}</option>
+									</select>
+									{{> icon block="rc-select__arrow" icon="arrow-down" }}
 								</div>
+								<div class="settings-description secondary-font-color">{{_ "Message_view_mode_info"}}</div>
 							</div>
-							<div class="input-line double-col" id="sendOnEnter">
-								<label>{{_ "Enter_Behaviour"}}</label>
-								<div>
-									<div class="rc-select">
-										<select class="input-monitor rc-select__element" name="sendOnEnter">
-											<option value="normal" selected="{{selected 'sendOnEnter' 'normal'}}">{{_ "Enter_Normal"}}</option>
-											<option value="alternative" selected="{{selected 'sendOnEnter' 'alternative'}}">{{_ "Enter_Alternative"}}</option>
-											<option value="desktop" selected="{{selected 'sendOnEnter' 'desktop'}}">{{_ "Only_On_Desktop"}}</option>
-										</select>
-										{{> icon block="rc-select__arrow" icon="arrow-down" }}
-									</div>
-									<div class="info">{{_ "Enter_Behaviour_Description"}}</div>
+						</div>
+						<div class="input-line double-col" id="sendOnEnter">
+							<label class="setting-label">{{_ "Enter_Behaviour"}}</label>
+							<div class="setting-field">
+								<div class="rc-select">
+									<select class="input-monitor rc-select__element" name="sendOnEnter">
+										<option value="normal" selected="{{selected 'sendOnEnter' 'normal'}}">{{_ "Enter_Normal"}}</option>
+										<option value="alternative" selected="{{selected 'sendOnEnter' 'alternative'}}">{{_ "Enter_Alternative"}}</option>
+										<option value="desktop" selected="{{selected 'sendOnEnter' 'desktop'}}">{{_ "Only_On_Desktop"}}</option>
+									</select>
+									{{> icon block="rc-select__arrow" icon="arrow-down" }}
 								</div>
+								<div class="settings-description secondary-font-color">{{_ "Enter_Behaviour_Description"}}</div>
 							</div>
 						</div>
 					</div>
-					<div class="section">
-						<h1>{{_ "Sidebar"}}</h1>
-						<div class="section-content border-component-color">
-							<div class="input-line double-col" id="roomCounterSidebar">
-								<label>{{_ "Show_room_counter_on_sidebar"}}</label>
-								<div>
-									<label><input type="radio" name="roomCounterSidebar" value="true" checked="{{checked 'roomCounterSidebar' true}}"/> {{_ "True"}}</label>
-									<label><input type="radio" name="roomCounterSidebar" value="false" checked="{{checked 'roomCounterSidebar' false}}"/> {{_ "False"}}</label>
-								</div>
+				</div>
+				<div class="section">
+					<h1>{{_ "Sidebar"}}</h1>
+					<div class="section-content border-component-color">
+						<div class="input-line double-col" id="roomCounterSidebar">
+							<label class="setting-label">{{_ "Show_room_counter_on_sidebar"}}</label>
+							<div class="setting-field">
+								<label><input type="radio" name="roomCounterSidebar" value="true" checked="{{checked 'roomCounterSidebar' true}}"/> {{_ "True"}}</label>
+								<label><input type="radio" name="roomCounterSidebar" value="false" checked="{{checked 'roomCounterSidebar' false}}"/> {{_ "False"}}</label>
 							</div>
 						</div>
 					</div>
-					<div class="section">
-						<h1>{{_ "Highlights"}}</h1>
-						<div class="section-content border-component-color">
-							<div class="input-line double-col">
-								<label>{{_ "Highlights_List"}}</label>
-								<div>
-									<label>{{_ "Highlights_How_To"}}</label>
-									<textarea class="rc-input__element" name="highlights" id="highlights" cols="30" rows="10">{{highlights}}</textarea>
-								</div>
+				</div>
+				<div class="section">
+					<h1>{{_ "Highlights"}}</h1>
+					<div class="section-content border-component-color">
+						<div class="input-line double-col">
+							<label class="setting-label">{{_ "Highlights_List"}}</label>
+							<div class="setting-field">
+								<textarea class="rc-input__element" name="highlights" id="highlights" cols="30" rows="10">{{highlights}}</textarea>
+								<div class="settings-description secondary-font-color">{{_ "Highlights_How_To"}}</div>
 							</div>
 						</div>
 					</div>
-					<div class="section">
-						<h1>{{_ "Sound"}}</h1>
-						<div class="section-content border-component-color">
-							<div class="input-line double-col">
-								<label>{{_ "New_Room_Notification"}}</label>
-								<div class="rc-select">
-									<select name="newRoomNotification" class="audio rc-select__element">
-										<option value="none" selected="{{$eq newRoomNotification 'none'}}">{{_ "None"}}</option>
-										<option value="door" selected="{{$eq newRoomNotification 'door'}}">Door ({{_ "Default"}})</option>
-										{{#each audioAssets}}
-											<option value="{{_id}}" selected="{{$eq newRoomNotification _id}}">{{name}}</option>
-										{{/each}}
-									</select>
-									{{> icon block="rc-select__arrow" icon="arrow-down" }}
-								</div>
+				</div>
+				<div class="section">
+					<h1>{{_ "Sound"}}</h1>
+					<div class="section-content border-component-color">
+						<div class="input-line double-col">
+							<label class="setting-label">{{_ "New_Room_Notification"}}</label>
+							<div class="rc-select setting-field">
+								<select name="newRoomNotification" class="audio rc-select__element">
+									<option value="none" selected="{{$eq newRoomNotification 'none'}}">{{_ "None"}}</option>
+									<option value="door" selected="{{$eq newRoomNotification 'door'}}">Door ({{_ "Default"}})</option>
+									{{#each audioAssets}}
+										<option value="{{_id}}" selected="{{$eq newRoomNotification _id}}">{{name}}</option>
+									{{/each}}
+								</select>
+								{{> icon block="rc-select__arrow" icon="arrow-down" }}
 							</div>
-							<div class="input-line double-col">
-								<label>{{_ "New_Message_Notification"}}</label>
-								<div class="rc-select">
-									<select name="newMessageNotification" class="audio rc-select__element">
-										<option value="none" selected="{{$eq newMessageNotification 'none'}}">{{_ "None"}}</option>
-										<option value="chime" selected="{{$eq newMessageNotification 'chime'}}">Chime ({{_ "Default"}})</option>
-										{{#each audioAssets}}
-											<option value="{{_id}}" selected="{{$eq newMessageNotification _id}}">{{name}}</option>
-										{{/each}}
-									</select>
-									{{> icon block="rc-select__arrow" icon="arrow-down" }}
-								</div>
+						</div>
+						<div class="input-line double-col">
+							<label class="setting-label">{{_ "New_Message_Notification"}}</label>
+							<div class="rc-select setting-field">
+								<select name="newMessageNotification" class="audio rc-select__element">
+									<option value="none" selected="{{$eq newMessageNotification 'none'}}">{{_ "None"}}</option>
+									<option value="chime" selected="{{$eq newMessageNotification 'chime'}}">Chime ({{_ "Default"}})</option>
+									{{#each audioAssets}}
+										<option value="{{_id}}" selected="{{$eq newMessageNotification _id}}">{{name}}</option>
+									{{/each}}
+								</select>
+								{{> icon block="rc-select__arrow" icon="arrow-down" }}
 							</div>
-							<div class="input-line double-col" id="muteFocusedConversations">
-								<label>{{_ "Mute_Focused_Conversations"}}</label>
-								<div>
-									<label><input type="radio" name="muteFocusedConversations" value="true" checked="{{checked 'muteFocusedConversations' true}}"/> {{_ "True"}}</label>
-									<label><input type="radio" name="muteFocusedConversations" value="false" checked="{{checked 'muteFocusedConversations' false}}"/> {{_ "False"}}</label>
-								</div>
+						</div>
+						<div class="input-line double-col" id="muteFocusedConversations">
+							<label class="setting-label">{{_ "Mute_Focused_Conversations"}}</label>
+							<div class="setting-field">
+								<label><input type="radio" name="muteFocusedConversations" value="true" checked="{{checked 'muteFocusedConversations' true}}"/> {{_ "True"}}</label>
+								<label><input type="radio" name="muteFocusedConversations" value="false" checked="{{checked 'muteFocusedConversations' false}}"/> {{_ "False"}}</label>
 							</div>
-							<div class="input-line double-col">
-								<label>{{_ "Notifications_Sound_Volume"}}</label>
-								<div>
-									{{> slider id="notificationsSoundVolume" min="0" max="100" value=notificationsSoundVolume}}
-								</div>
+						</div>
+						<div class="input-line double-col">
+							<label class="setting-label">{{_ "Notifications_Sound_Volume"}}</label>
+							<div class="setting-field">
+								{{> slider id="notificationsSoundVolume" min="0" max="100" value=notificationsSoundVolume}}
 							</div>
 						</div>
 					</div>
+				</div>
 
-					{{#if userDataDownloadEnabled}}
-						<div class="section">
-							<h1>{{_ "My Data"}}</h1>
-							<div class="section-content border-component-color">
-								<div class="input-line">
-									<label><button class="button download-my-data"><i class="icon-download secondary-font-color"></i> <span>{{_ "Download_My_Data"}}</span></button></label>
-									<label><button class="button export-my-data"><i class="icon-download secondary-font-color"></i> <span>{{_ "Export_My_Data"}}</span></button></label>
-								</div>
-
+				{{#if userDataDownloadEnabled}}
+					<div class="section">
+						<h1>{{_ "My Data"}}</h1>
+						<div class="section-content border-component-color">
+							<div class="input-line double-col">
+								<button class="rc-button setting-action download-my-data"><i class="icon-download secondary-font-color"></i> <span>{{_ "Download_My_Data"}}</span></button>
+								<button class="rc-button setting-action export-my-data"><i class="icon-download secondary-font-color"></i> <span>{{_ "Export_My_Data"}}</span></button>
 							</div>
 						</div>
-					{{/if}}
-				</fieldset>
+					</div>
+				{{/if}}
 			</form>
 		</div>
 	</section>
diff --git a/packages/rocketchat_theme/client/imports/general/base_old.css b/packages/rocketchat_theme/client/imports/general/base_old.css
index c89f0d2115c..e2be47c1257 100644
--- a/packages/rocketchat_theme/client/imports/general/base_old.css
+++ b/packages/rocketchat_theme/client/imports/general/base_old.css
@@ -375,8 +375,9 @@
 				display: inline-block;
 
 				margin-right: 4px;
+				padding: 10px 20px 10px 0;
 
-				line-height: 2.5rem;
+				line-height: 15px;
 
 				&:nth-last-child(1) {
 					margin-right: 0;
@@ -1817,6 +1818,10 @@ rc-old select,
 		border: none !important;
 		border-radius: 0 !important;
 
+		p {
+			margin-bottom: 0.75rem;
+		}
+
 		& .input-line {
 			display: flex;
 
@@ -1856,6 +1861,10 @@ rc-old select,
 			line-height: 16px;
 		}
 
+		.setting-action {
+			margin: 0 4px;
+		}
+
 		& .settings-description {
 
 			padding-top: 2px;