diff --git a/packages/rocketchat-channel-settings/client/views/channelSettings.html b/packages/rocketchat-channel-settings/client/views/channelSettings.html
index 09ff62ff45bb..f90ecd10dc4a 100644
--- a/packages/rocketchat-channel-settings/client/views/channelSettings.html
+++ b/packages/rocketchat-channel-settings/client/views/channelSettings.html
@@ -65,10 +65,10 @@
 		{{#with settings.t}}
 			<div class="rc-user-info__row rc-user-info__row--separator">
 				<div class="rc-switch-double">
-					<div class="rc-switch-double__label  {{equal true value 'disabled'}}">
-						{{_ "Private"}}
+					<div class="rc-switch-double__label {{equal true value 'disabled'}}">
+						{{_ "Public"}}{{equal default value '*'}}
 						<div class="rc-switch-double__description">
-							{{_ "Just_invited_people_can_access_this_channel"}}
+							{{_ "Everyone_can_access_this_channel"}}
 						</div>
 					</div>
 					<div class="rc-switch rc-switch--blue">
@@ -79,13 +79,13 @@
 							</span>
 						</label>
 					</div>
-					<div class="rc-switch-double__label {{equal false value 'disabled'}}">
-						{{_ "Public"}}{{equal default value '*'}}
+					<div class="rc-switch-double__label  {{equal false value 'disabled'}}">
+						{{_ "Private"}}
 						<div class="rc-switch-double__description">
-							{{_ "Everyone_can_access_this_channel"}}
+							{{_ "Just_invited_people_can_access_this_channel"}}
 						</div>
 					</div>
-
+				
 				</div>
 			</div>
 		{{/with}}
diff --git a/packages/rocketchat-i18n/i18n/en.i18n.json b/packages/rocketchat-i18n/i18n/en.i18n.json
index e816aa715c8f..e9db704bad10 100644
--- a/packages/rocketchat-i18n/i18n/en.i18n.json
+++ b/packages/rocketchat-i18n/i18n/en.i18n.json
@@ -175,6 +175,7 @@
   "Agent": "Agent",
   "Agent_added": "Agent added",
   "Agent_removed": "Agent removed",
+  "Alerts": "Alerts",
   "Alias": "Alias",
   "Alias_Format": "Alias Format",
   "Alias_Format_Description": "Import messages from Slack with an alias; %s is replaced by the username of the user. If empty, no alias will be used.",
@@ -259,6 +260,7 @@
   "AtlassianCrowd": "Atlassian Crowd",
   "Attachment_File_Uploaded": "File Uploaded",
   "Attribute_handling": "Attribute handling",
+  "Audio": "Audio",
   "Audio_message": "Audio message",
   "Audio_Notification_Value_Description": "Can be any custom sound or the default ones: beep, chelle, ding, droplet, highbell, seasons",
   "Audio_Notifications_Default_Alert": "Audio Notifications Default Alert",
@@ -1346,6 +1348,7 @@
   "Notifications": "Notifications",
   "Notifications_Always_Notify_Mobile" : "Always notify mobile",
   "Notifications_Always_Notify_Mobile_Description" : "Choose to always notify mobile device regardless of presence status.",
+  "Notifications_Duration": "Notifications_Duration",
   "Notifications_Max_Room_Members": "Max Room Members Before Disabling All Message Notifications",
   "Notifications_Max_Room_Members_Description": "Max number of members in room when notifications for all messages gets disabled. Users can still change per room setting to receive all notifications on an individual basis. (0 to disable)",
   "Notifications_Muted_Description": "If you choose to mute everything, you won't see the room highlight in the list when there are new messages, except for mentions. Muting notifications will override notifications settings.",
diff --git a/packages/rocketchat-push-notifications/client/views/pushNotificationsFlexTab.html b/packages/rocketchat-push-notifications/client/views/pushNotificationsFlexTab.html
index 6ba3364ac0b3..59cff0f76060 100644
--- a/packages/rocketchat-push-notifications/client/views/pushNotificationsFlexTab.html
+++ b/packages/rocketchat-push-notifications/client/views/pushNotificationsFlexTab.html
@@ -2,7 +2,7 @@
 	<main class="rc-user-info__scroll">
 		<div class="rc-user-info__row rc-user-info__row--separator">
 			<div class="rc-switch-double">
-				<div class="rc-switch-double__label">
+				<div class="rc-switch-double__label {{#if notificationIsEnabled}}disabled{{/if}}">
 					{{_ "Turn_OFF"}}
 					<div class="rc-switch-double__description">
 						{{_ "Mute_all_notifications"}}
@@ -10,13 +10,13 @@
 				</div>
 				<div class="rc-switch rc-switch--blue">
 					<label class="rc-switch__label">
-						<input type="checkbox" class="rc-switch__input js-input-check" value="0" id="disableNotifications" name="disableNotifications" checked="{{$eq disableNotifications false}}">
-						<span class="rc-switch__button">
-							<span class="rc-switch__button-inside"></span>
-						</span>
+							<input type="checkbox" class="rc-switch__input js-input-check" value="0" id="disableNotifications" name="disableNotifications" checked="{{$eq notificationIsEnabled true}}">
+							<span class="rc-switch__button">
+								<span class="rc-switch__button-inside"></span>
+							</span>
 					</label>
 				</div>
-				<div class="rc-switch-double__label">
+				<div class="rc-switch-double__label {{#unless notificationIsEnabled}}disabled{{/unless}}">
 					{{_ "Turn_ON"}}
 					<div class="rc-switch-double__description">
 						{{_ "Receive_alerts"}}
@@ -26,7 +26,7 @@
 		</div>
 		<div class="rc-user-info__row rc-user-info__row--separator">
 			<div class="rc-switch-double">
-				<div class="rc-switch-double__label">
+				<div class="rc-switch-double__label {{#if showUnreadStatus}}disabled{{/if}}">
 					{{_ "Hide_counter"}}
 					<div class="rc-switch-double__description">
 						{{_ "Do_not_display_unread_counter"}}
@@ -34,13 +34,13 @@
 				</div>
 				<div class="rc-switch rc-switch--blue">
 					<label class="rc-switch__label">
-						<input type="checkbox" class="rc-switch__input js-input-check" id="hideUnreadStatus" name="hideUnreadStatus" value="1" checked="{{$eq hideUnreadStatus true}}">
+						<input type="checkbox" class="rc-switch__input js-input-check" id="hideUnreadStatus" name="hideUnreadStatus" value="1" checked="{{$eq showUnreadStatus true}}">
 						<span class="rc-switch__button">
 							<span class="rc-switch__button-inside"></span>
 						</span>
 					</label>
 				</div>
-				<div class="rc-switch-double__label">
+				<div class="rc-switch-double__label {{#unless showUnreadStatus}}disabled{{/unless}}">
 					{{_ "Show_counter"}}
 					<div class="rc-switch-double__description">
 						{{_ "Display_unread_counter"}}
@@ -48,63 +48,54 @@
 				</div>
 			</div>
 		</div>
-		<div class="rc-user-info__row rc-user-info__row--separator">
-			<div class="rc-switch-double">
-				<div class="rc-switch-double__label">
-					{{_ "User_default"}}
-					<div class="rc-switch-double__description">
-						{{_ "Keep_default_user_settings"}}
-					</div>
-				</div>
-				<div class="rc-switch rc-switch--blue">
-					<label class="rc-switch__label">
-						<input type="checkbox" class="rc-switch__input js-input-check" id="customize" name="customize" value="1" checked="{{$eq customize true}}">
-						<span class="rc-switch__button">
-							<span class="rc-switch__button-inside"></span>
-						</span>
-					</label>
-				</div>
-				<div class="rc-switch-double__label">
-					{{_ "Customize"}}
-					<div class="rc-switch-double__description">
-						{{_ "Create_unique_rules_for_this_channel"}}
-					</div>
-				</div>
-			</div>
-		</div>
-		{{#if $eq disableNotifications false}}
+		{{#if notificationIsEnabled}}
 			<div class="rc-user-info__row rc-user-info__row--separator">
 				<div class="rc-user-info__config">
 					<div class="rc-user-info__config-header">
 						{{> icon block="rc-user-info__config-icon" icon="computer"}}
-						<span class="rc-user-info__config-label">Desktop</span>
+						<span class="rc-user-info__config-label">{{_ "Desktop"}}</span>
 					</div>
 					<div class="rc-user-info__config-content">
-							<div class="rc-user-info__config-name">Alerts:</div>
+						<div class="rc-user-info__config-name">{{_ "Alerts"}}:</div>
+						{{# with "desktopNotifications"}}
 							<div class="rc-user-info__config-value">
-								{{# with desktopNotifications}}
 								{{subValue 'desktopNotifications'}}
 								{{> icon block="rc-user-info__config-content-icon" icon="arrow-down"}}
-								{{/with}}
 							</div>
+						{{/with}}
 					</div>
 					<div class="rc-user-info__config-content">
-							<div class="rc-user-info__config-name">Audio:</div>
+						<div class="rc-user-info__config-name">{{_ "Audio"}}:</div>
+						{{# with "audioNotifications"}}
+							<div class="rc-user-info__config-value">
+								{{subValue 'audioNotifications'}}
+								{{> icon block="rc-user-info__config-content-icon" icon="arrow-down"}}
+							</div>
+						{{/with}}
+					</div>
+					<div class="rc-user-info__config-content">
+						<div class="rc-user-info__config-name">{{_ "Sound"}}:</div>
+						{{# with "audioNotificationValue"}}
 							<div class="rc-user-info__config-value">
 								{{audioNotificationValue}}
 								{{> icon block="rc-user-info__config-content-icon" icon="arrow-down"}}
 							</div>
+							<i class="icon-play-circled" data-play="{{audioNotificationValue}}"></i>
+						{{/with}}
 					</div>
 					<div class="rc-user-info__config-content">
-							<div class="rc-user-info__config-name">Notifications Duration:</div>
+						<div class="rc-user-info__config-name">{{_ "Notifications Duration"}}:</div>
+						{{# with "desktopNotificationDuration"}}
 							<div class="rc-user-info__config-value">
-								{{#if desktopNotificationDuration}}
+								{{#if desktopNotificationDuration }}
 									{{_ "Duration"}} {{desktopNotificationDuration}} {{_ "seconds"}}
 								{{else}}
 									{{_ "Use_User_Preferences_or_Global_Settings"}}
 								{{/if}}
+
 								{{> icon block="rc-user-info__config-content-icon" icon="arrow-down"}}
 							</div>
+						{{/with}}
 					</div>
 				</div>
 			</div>
@@ -112,14 +103,16 @@
 				<div class="rc-user-info__config">
 					<div class="rc-user-info__config-header">
 						{{> icon block="rc-user-info__config-icon" icon="mobile"}}
-						<span class="rc-user-info__config-label">Mobile</span>
+						<span class="rc-user-info__config-label">{{_ "Mobile"}}</span>
 					</div>
 					<div class="rc-user-info__config-content">
-							<div class="rc-user-info__config-name">Alerts:</div>
-							<div class="rc-user-info__config-value">
-								{{defaultMobileNotification}}
-								{{> icon block="rc-user-info__config-content-icon" icon="arrow-down"}}
-							</div>
+							<div class="rc-user-info__config-name">{{_ "Alerts"}}:</div>
+							{{# with "mobilePushNotifications"}}
+								<div class="rc-user-info__config-value">
+									{{subValue "mobilePushNotifications"}}
+									{{> icon block="rc-user-info__config-content-icon" icon="arrow-down"}}
+								</div>
+							{{/with}}
 					</div>
 				</div>
 			</div>
@@ -127,14 +120,16 @@
 				<div class="rc-user-info__config">
 					<div class="rc-user-info__config-header">
 						{{> icon block="rc-user-info__config-icon" icon="mail"}}
-						<span class="rc-user-info__config-label">E-mail</span>
+						<span class="rc-user-info__config-label">{{_ "Email"}}</span>
 					</div>
 					<div class="rc-user-info__config-content">
-							<div class="rc-user-info__config-name">Alerts:</div>
+							<div class="rc-user-info__config-name">{{_ "Alerts"}}:</div>
+							{{# with "emailNotifications"}}
 							<div class="rc-user-info__config-value">
 								{{subValue 'emailNotifications'}}
 								{{> icon block="rc-user-info__config-content-icon" icon="arrow-down"}}
 							</div>
+							{{/with}}
 					</div>
 				</div>
 			</div>
@@ -142,141 +137,33 @@
 	</main>
 	<div class="rc-user-info__flex rc-user-info__row">
 		<button class="rc-button js-cancel rc-button--outline" title="{{_ 'Cancel'}}">{{_ 'Cancel'}}</button>
-		<button class="rc-button rc-button--primary js-save" title="{{_ 'Save'}}">{{_ 'Save'}}</button>
+		<button class="rc-button rc-button--primary js-save" title="{{_ 'Save'}}" disabled={{disabled}}>{{_ 'Save'}}</button>
 	</div>
-	{{#if false}}
-	<form>
-		<ul class="list clearfix">
-			{{#if $eq disableNotifications false}}
-				<li class="audio-notifications">
-					<label>{{_ "Audio"}}</label>
-					<div>
-						{{#if editing 'audioNotifications'}}
-							<label><input type="radio" name="audioNotifications" value="default" checked="{{$eq audioNotifications 'default'}}" /> {{_ "Default"}} ({{_ defaultAudioNotification}})</label>
-							<label><input type="radio" name="audioNotifications" value="all" checked="{{$eq audioNotifications 'all'}}" /> {{_ "All_messages"}}</label>
-							<label><input type="radio" name="audioNotifications" value="mentions" checked="{{$eq audioNotifications 'mentions'}}" /> {{_ "Mentions"}}</label>
-							<br />
-
-							<label>
-								<select name="audioNotificationValue" class="rc-input rc-input--small audio">
-									<option value="none" selected="{{$eq audioNotificationValue 'none'}}">{{_ "None"}}</option>
-									<option value="" selected="{{$eq audioNotificationValue subValue 'audioNotifications'}}">{{_ "Use_account_preference"}} ({{_ "Default"}})</option>
-									<option value="chime" selected="{{$eq audioNotificationValue 'chime'}}">Chime</option>
-									{{#each audioAssets}}
-										<option value="{{_id}}" selected="{{$eq audioNotificationValue _id}}">{{name}}</option>
-									{{/each}}
-								</select>
-							</label>
-							<button type="button" class="rc-button rc-button--secondary cancel">{{_ "Cancel"}}</button>
-							<button type="button" class="rc-button rc-button--primary save">{{_ "Save"}}</button>
-						{{else}}
-							<span class="current-setting">{{subValue 'audioNotifications'}} : {{audioNotificationValue}}<i class="icon-play-circled" data-play="{{audioNotificationValue}}"></i> <i class="icon-pencil" data-edit="audioNotifications"></i></span>
-						{{/if}}
-					</div>
-				</li>
-				<li class="desktop-notifications">
-					<label>{{_ "Desktop"}}</label>
-					<div>
-						{{#if editing 'desktopNotifications'}}
-							<label><input type="radio" name="desktopNotifications" value="default" checked="{{$eq desktopNotifications 'default'}}" /> {{_ "Default"}} ({{_ defaultDesktopNotification}})</label>
-							<label><input type="radio" name="desktopNotifications" value="all" checked="{{$eq desktopNotifications 'all'}}" /> {{_ "All_messages"}}</label>
-							<label><input type="radio" name="desktopNotifications" value="mentions" checked="{{$eq desktopNotifications 'mentions'}}" /> {{_ "Mentions"}}</label>
-							<label><input type="radio" name="desktopNotifications" value="nothing" checked="{{$eq desktopNotifications 'nothing'}}" /> {{_ "Nothing"}}</label>
-							<br />
-
-							{{#if desktopNotificationDuration}}
-								<div class="rc-input">
-									<label class="rc-input__label">
-											{{_ "Duration"}} ({{_ "seconds"}})
-										<div class="rc-input__wrapper">
-											<input type="number" class="rc-input__element" name="duration" min="0" value="{{desktopNotificationDuration}}">
-										</div>
-									</label>
-								</div>
-							{{else}}
-								<div class="rc-input">
-									<label class="rc-input__label">
-											{{_ "Duration"}} ({{_ "seconds"}})
-										<div class="rc-input__wrapper">
-											<input type="number" class="rc-input__element" name="duration" min="0" value="" placeholder="{{_ "Use_User_Preferences_or_Global_Settings"}}">
-										</div>
-									</label>
-								</div>
-							{{/if}}
-
-							<button type="button" class="rc-button rc-button--secondary cancel">{{_ "Cancel"}}</button>
-							<button type="button" class="rc-button rc-button--primary save">{{_ "Save"}}</button>
-						{{else}}
-							<span class="current-setting">{{subValue 'desktopNotifications'}} <i class="icon-pencil" data-edit="desktopNotifications"></i></span>
-						{{/if}}
-					</div>
-				</li>
-				{{#unless editing 'desktopNotifications'}}
-				<li class="desktop-notifications-duration">
-					<label>{{_ "Desktop_Notifications_Duration"}}</label>
-					<div>
-						<span class="current-setting">{{#if desktopNotificationDuration}}{{desktopNotificationDuration}} {{_"seconds"}}{{else}}{{_ "Use_User_Preferences_or_Global_Settings"}}{{/if}}</span>
-					</div>
-				</li>
-				{{/unless}}
-				<li class="mobile-notifications">
-					<label>{{_ "Mobile"}}</label>
-					<div>
-						{{#if editing 'mobilePushNotifications'}}
-							<label><input type="radio" name="mobilePushNotifications" value="default" checked="{{$eq mobilePushNotifications 'default'}}" /> {{_ "Default"}} ({{_ defaultMobileNotification}})</label>
-							<label><input type="radio" name="mobilePushNotifications" value="all" checked="{{$eq mobilePushNotifications 'all'}}" /> {{_ "All_messages"}}</label>
-							<label><input type="radio" name="mobilePushNotifications" value="mentions" checked="{{$eq mobilePushNotifications 'mentions'}}" /> {{_ "Mentions"}}</label>
-							<label><input type="radio" name="mobilePushNotifications" value="nothing" checked="{{$eq mobilePushNotifications 'nothing'}}" /> {{_ "Nothing"}}</label>
-							<button type="button" class="rc-button rc-button--secondary cancel">{{_ "Cancel"}}</button>
-							<button type="button" class="rc-button rc-button--primary save">{{_ "Save"}}</button>
-						{{else}}
-							<span class="current-setting">{{subValue 'mobilePushNotifications'}} <i class="icon-pencil" data-edit="mobilePushNotifications"></i></span>
-						{{/if}}
-					</div>
-				</li>
-				<li class="email-notifications">
-					<label>{{_ "Email"}}</label>
-					<div>
-						{{#if editing 'emailNotifications'}}
-							<label><input type="radio" name="emailNotifications" value="all" checked="{{$eq emailNotifications 'all'}}" /> {{_ "All_messages"}}</label>
-							{{#if showEmailMentions}}
-								<label><input type="radio" name="emailNotifications" value="mentions" checked="{{$eq emailNotifications 'mentions'}}" /> {{_ "Mentions"}}</label>
-							{{/if}}
-							<label><input type="radio" name="emailNotifications" value="nothing" checked="{{$eq emailNotifications 'nothing'}}" /> {{_ "Nothing"}}</label>
-							<label><input type="radio" name="emailNotifications" value="default" checked="{{$eq emailNotifications 'default'}}" /> {{_ "Use_account_preference"}}</label>
-							<button type="button" class="rc-button rc-button--secondary cancel">{{_ "Cancel"}}</button>
-							<button type="button" class="rc-button rc-button--primary save">{{_ "Save"}}</button>
-						{{else}}
-							<span class="current-setting">{{subValue 'emailNotifications'}} <i class="icon-pencil" data-edit="emailNotifications"></i></span>
-						{{/if}}
+</template>
+<!-- <div class="rc-user-info__row rc-user-info__row--separator">
+			<div class="rc-switch-double">
+				<div class="rc-switch-double__label">
+					{{_ "User_default"}}
+					<div class="rc-switch-double__description">
+						{{_ "Keep_default_user_settings"}}
 					</div>
-				</li>
-				{{#unless emailVerified}}
-				<li class="email-alerts">
-					<div class="alert alert-warning pending-background pending-border">
-						{{_ "You_wont_receive_email_notifications_because_you_have_not_verified_your_email"}}
+				</div>
+				<div class="rc-switch rc-switch--blue">
+					<label class="rc-switch__label">
+						<input type="checkbox" class="rc-switch__input js-input-check" id="customize" name="customize" value="1" checked="{{$eq customize true}}">
+						<span class="rc-switch__button">
+							<span class="rc-switch__button-inside"></span>
+						</span>
+					</label>
+				</div>
+				<div class="rc-switch-double__label">
+					{{_ "Customize"}}
+					<div class="rc-switch-double__description">
+						{{_ "Create_unique_rules_for_this_channel"}}
 					</div>
-				</li>
-				{{/unless}}
-			{{/if}}
-			<li class="unread-alerts">
-				<label>{{_ "Unread_Tray_Icon_Alert"}}</label>
-				<div>
-					{{#if editing 'unreadAlert'}}
-						<label><input type="radio" name="unreadAlert" value="all" checked="{{$eq unreadAlert 'all'}}" /> {{_ "On"}}</label>
-						<label><input type="radio" name="unreadAlert" value="nothing" checked="{{$eq unreadAlert 'nothing'}}" /> {{_ "Off"}}</label>
-						<label><input type="radio" name="unreadAlert" value="default" checked="{{$eq unreadAlert 'default'}}" /> {{_ "Use_account_preference"}}</label>
-						<button type="button" class="rc-button rc-button--secondary cancel">{{_ "Cancel"}}</button>
-						<button type="button" class="rc-button rc-button--primary save">{{_ "Save"}}</button>
-					{{else}}
-						<span class="current-setting">{{unreadAlertText}} <i class="icon-pencil" data-edit="unreadAlert"></i></span>
-					{{/if}}
 				</div>
-			</li>
-		</ul>
-	</form>
-	{{/if}}
-</template>
+			</div>
+		</div> -->
 
 <template name="pushNotificationsPopover">
 	{{#each options}}
@@ -285,20 +172,4 @@
 		<label for="{{id}}" class="rc-popover__item-radio-label">{{_ label}}</label>
 	</div>
 	{{/each}}
-	<!-- <div class="rc-popover__item">
-		<input type="radio" class="rc-popover__item-radio" id="desktopNotificationsDefault" name="desktopNotifications" value="default" />
-		<label for="desktopNotificationsDefault" class="rc-popover__item-radio-label">{{_ "Default"}} ({{_ defaultDesktopNotification}})</label>
-	</div>
-	<div class="rc-popover__item">
-		<input type="radio" class="rc-popover__item-radio" id="desktopNotificationsAll" name="desktopNotifications" value="all" />
-		<label for="desktopNotificationsAll" class="rc-popover__item-radio-label">{{_ "All_messages"}}</label>
-	</div>
-	<div class="rc-popover__item">
-		<input type="radio" class="rc-popover__item-radio" id="desktopNotificationsMentions" name="desktopNotifications" value="mentions" />
-		<label for="desktopNotificationsMentions" class="rc-popover__item-radio-label">{{_ "Mentions"}}</label>
-	</div>
-	<div class="rc-popover__item">
-		<input type="radio" class="rc-popover__item-radio" id="desktopNotificationsNothing" name="desktopNotifications" value="nothing" />
-		<label for="desktopNotificationsNothing" class="rc-popover__item-radio-label">{{_ "Nothing"}}</label>
-	</div> -->
 </template>
diff --git a/packages/rocketchat-push-notifications/client/views/pushNotificationsFlexTab.js b/packages/rocketchat-push-notifications/client/views/pushNotificationsFlexTab.js
index 05094d62cd7e..70f65e81ef12 100644
--- a/packages/rocketchat-push-notifications/client/views/pushNotificationsFlexTab.js
+++ b/packages/rocketchat-push-notifications/client/views/pushNotificationsFlexTab.js
@@ -1,4 +1,3 @@
-import toastr from 'toastr';
 /* globals ChatSubscription popover */
 
 const notificationLabels = {
@@ -7,119 +6,58 @@ const notificationLabels = {
 	nothing: 'Nothing'
 };
 
+const call = (method, ...params) => {
+	return new Promise((resolve, reject) => {
+		Meteor.call(method, ...params, (err, result)=> {
+			if (err) {
+				handleError(err);
+				return reject(err);
+			}
+			return resolve(result);
+		});
+	});
+};
+
 Template.pushNotificationsFlexTab.helpers({
-	audioAssets() {
-		return RocketChat.CustomSounds && RocketChat.CustomSounds.getList && RocketChat.CustomSounds.getList() || [];
+	notificationIsEnabled() {
+		return !Template.instance().form.disableNotifications.get();
 	},
 	disableNotifications() {
-		const sub = ChatSubscription.findOne({
-			rid: Session.get('openedRoom')
-		}, {
-			fields: {
-				disableNotifications: 1
-			}
-		});
-		return sub && sub.disableNotifications;
+		return Template.instance().form.disableNotifications.get();
+	},
+	showUnreadStatus() {
+		return !Template.instance().form.hideUnreadStatus.get();
 	},
 	hideUnreadStatus() {
-		const sub = ChatSubscription.findOne({
-			rid: Session.get('openedRoom')
-		}, {
-			fields: {
-				hideUnreadStatus: 1
-			}
-		});
-		return sub ? sub.hideUnreadStatus || false : false;
+		return Template.instance().form.hideUnreadStatus.get();
 	},
 	audioNotifications() {
-		const sub = ChatSubscription.findOne({
-			rid: Session.get('openedRoom')
-		}, {
-			fields: {
-				audioNotifications: 1
-			}
-		});
-		return sub ? sub.audioNotifications || 'default' : 'default';
+		return Template.instance().form.audioNotifications.get();
+	},
+	audioNotificationValue() {
+		const value = Template.instance().form.audioNotificationValue.get();
+		if (value === '0') {
+			return t('Use_account_preference');
+		}
+
+		return value;
 	},
 	desktopNotifications() {
-		const sub = ChatSubscription.findOne({
-			rid: Session.get('openedRoom')
-		}, {
-			fields: {
-				desktopNotifications: 1
-			}
-		});
-		return sub ? sub.desktopNotifications || 'default' : 'default';
+		return Template.instance().form.desktopNotifications.get();
 	},
 	mobilePushNotifications() {
-		const sub = ChatSubscription.findOne({
-			rid: Session.get('openedRoom')
-		}, {
-			fields: {
-				mobilePushNotifications: 1
-			}
-		});
-		return sub ? sub.mobilePushNotifications || 'default' : 'default';
+		return Template.instance().form.mobilePushNotifications.get();
 	},
 	emailNotifications() {
-		const sub = ChatSubscription.findOne({
-			rid: Session.get('openedRoom')
-		}, {
-			fields: {
-				emailNotifications: 1
-			}
-		});
-		return sub ? sub.emailNotifications : '';
+		return Template.instance().form.emailNotifications.get();
 	},
-	showEmailMentions() {
-		const sub = ChatSubscription.findOne({
-			rid: Session.get('openedRoom')
-		}, {
-			fields: {
-				t: 1
-			}
-		});
-		return sub && sub.t !== 'd';
-	},
-	unreadAlert() {
-		const sub = ChatSubscription.findOne({
-			rid: Session.get('openedRoom')
-		}, {
-			fields: {
-				unreadAlert: 1
-			}
-		});
-		return sub ? sub.unreadAlert : 'default';
-	},
-	unreadAlertText() {
-		const sub = ChatSubscription.findOne({
-			rid: Session.get('openedRoom')
-		}, {
-			fields: {
-				unreadAlert: 1
-			}
-		});
-		if (sub) {
-			switch (sub.unreadAlert) {
-				case 'all':
-					return t('On');
-				case 'nothing':
-					return t('Off');
-			}
-		}
-		return t('Use_account_preference');
+	desktopNotificationDuration() {
+		return Template.instance().form.desktopNotificationDuration.get();
 	},
 	subValue(field) {
-		const sub = ChatSubscription.findOne({
-			rid: Session.get('openedRoom')
-		}, {
-			fields: {
-				t: 1,
-				[field]: 1
-			}
-		});
-		if (sub) {
-			switch (sub[field]) {
+		const { form } = Template.instance();
+		if (form[field]) {
+			switch (form[field].get()) {
 				case 'all':
 					return t('All_messages');
 				case 'nothing':
@@ -133,40 +71,6 @@ Template.pushNotificationsFlexTab.helpers({
 			}
 		}
 	},
-	audioNotificationValue() {
-		const sub = ChatSubscription.findOne({
-			rid: Session.get('openedRoom')
-		}, {
-			fields: {
-				audioNotificationValue: 1
-			}
-		});
-		const audio = sub ? sub.audioNotificationValue || 'default' : 'default';
-		if (audio === 'default') {
-			return t('Use_account_preference');
-		}
-		return audio;
-	},
-	desktopNotificationDuration() {
-		const sub = ChatSubscription.findOne({
-			rid: Session.get('openedRoom')
-		}, {
-			fields: {
-				desktopNotificationDuration: 1
-			}
-		});
-		if (!sub) {
-			return false;
-		}
-		// Convert to Number
-		return sub.desktopNotificationDuration - 0;
-	},
-	editing(field) {
-		return Template.instance().editing.get() === field;
-	},
-	emailVerified() {
-		return Meteor.user().emails && Meteor.user().emails[0] && Meteor.user().emails[0].verified;
-	},
 	defaultAudioNotification() {
 		let preference = RocketChat.getUserPreference(Meteor.user(), 'audioNotifications');
 		if (preference === 'default') {
@@ -187,123 +91,108 @@ Template.pushNotificationsFlexTab.helpers({
 			preference = RocketChat.settings.get('Accounts_Default_User_Preferences_mobileNotifications');
 		}
 		return notificationLabels[preference];
+	},
+	disabled() {
+		const { original, form } = Template.instance();
+		return Object.keys(original).every(key => original[key].get() === form[key].get());
 	}
 });
 
 Template.pushNotificationsFlexTab.onCreated(function() {
-	this.editing = new ReactiveVar();
-
-	this.validateSetting = (field) => {
-		switch (field) {
-			case 'audioNotificationValue':
-				return true;
-			case 'hideUnreadStatus':
-			case 'disableNotifications':
-				return true;
-			default:
-				const value = this.$(`input[name=${ field }]:checked`).val();
-				if (['all', 'mentions', 'nothing', 'default'].indexOf(value) === -1) {
-					toastr.error(t('Invalid_notification_setting_s', value || ''));
-					return false;
-				}
-				return true;
+	const rid = Session.get('openedRoom');
+	const sub = ChatSubscription.findOne({rid}, {
+		fields: {
+			disableNotifications: 1,
+			hideUnreadStatus: 1,
+			audioNotifications: 1,
+			desktopNotifications: 1,
+			mobilePushNotifications: 1,
+			emailNotifications: 1,
+			desktopNotificationDuration: 1,
+			audioNotificationValue: 1
 		}
+	}) || {};
+
+	const {
+		disableNotifications = false,
+		hideUnreadStatus = false,
+		audioNotifications = 'default',
+		desktopNotifications = 'default',
+		mobilePushNotifications = 'default',
+		emailNotifications = 'default',
+		desktopNotificationDuration = 0,
+		audioNotificationValue = null
+	} = sub;
+
+	this.original = {
+		disableNotifications: new ReactiveVar(disableNotifications),
+		hideUnreadStatus: new ReactiveVar(hideUnreadStatus),
+		audioNotifications: new ReactiveVar(audioNotifications),
+		desktopNotifications: new ReactiveVar(desktopNotifications),
+		mobilePushNotifications: new ReactiveVar(mobilePushNotifications),
+		emailNotifications: new ReactiveVar(emailNotifications),
+		desktopNotificationDuration: new ReactiveVar(desktopNotificationDuration),
+		audioNotificationValue: new ReactiveVar(audioNotificationValue)
 	};
 
-	this.saveSetting = (field) => {
-		field = field || this.editing.get();
-		let value;
-		switch (field) {
-			case 'hideUnreadStatus':
-			case 'disableNotifications':
-				value = this.$(`input[name=${ field }]`)[0].checked ? '1' : '0';
-				break;
-			default:
-				value = this.$(`input[name=${ field }]:checked`).val();
-				break;
-		}
-		const soundVal = $('select').val();
-		const duration = $('input[name=duration]').val();
-		if (this.validateSetting(field)) {
-			Meteor.call('saveNotificationSettings', Session.get('openedRoom'), field, value, (err/*, result*/) => {
-				if (err) {
-					return handleError(err);
-				} else if (duration !== undefined) {
-					Meteor.call('saveDesktopNotificationDuration', Session.get('openedRoom'), duration, (err) => {
-						if (err) {
-							return handleError(err);
-						}
-					});
-				} else if (soundVal!==undefined) {
-					Meteor.call('saveAudioNotificationValue', Session.get('openedRoom'), soundVal, (err) => {
-						if (err) {
-							return handleError(err);
-						}
-					});
-				}
-				this.editing.set();
-			});
-		}
+	this.form = {
+		disableNotifications: new ReactiveVar(disableNotifications),
+		hideUnreadStatus: new ReactiveVar(hideUnreadStatus),
+		audioNotifications: new ReactiveVar(audioNotifications),
+		desktopNotifications: new ReactiveVar(desktopNotifications),
+		mobilePushNotifications: new ReactiveVar(mobilePushNotifications),
+		emailNotifications: new ReactiveVar(emailNotifications),
+		desktopNotificationDuration: new ReactiveVar(desktopNotificationDuration),
+		audioNotificationValue: new ReactiveVar(audioNotificationValue)
 	};
-});
 
-Template.pushNotificationsFlexTab.events({
-	'keydown input[type=text]'(e, instance) {
-		if (e.keyCode === 13) {
-			e.preventDefault();
-			instance.saveSetting();
-		}
-	},
+	this.saveSetting = async() => {
+		Object.keys(this.original).forEach(async field => {
+			if (this.original[field].get() === this.form[field].get()) {
+				return;
+			}
+			let value = this.form[field].get();
 
-	'click [data-edit]'(e, instance) {
-		e.preventDefault();
-		instance.editing.set($(e.currentTarget).data('edit'));
-		setTimeout(function() { instance.$('input.editing').focus().select(); }, 100);
-	},
+			value = typeof value === 'boolean' ? value ? '1' : '0' : value;
+			const rid = Session.get('openedRoom');
+			switch (field) {
+				case 'desktopNotificationDuration':
+					await call('saveDesktopNotificationDuration', rid, value);
+					break;
+				case 'audioNotificationValue':
+					await call('saveAudioNotificationValue', rid, value);
+					break;
+				default:
+					await call('saveNotificationSettings', rid, field, value);
+			}
+			this.original[field].set(this.form[field].get());
 
-	'click .cancel'(e, instance) {
-		e.preventDefault();
-		instance.editing.set();
+		});
+	};
+});
+
+Template.pushNotificationsFlexTab.events({
+	'click .js-cancel'(e, instance) {
+		instance.data.tabBar.close();
 	},
 
-	'click .save'(e, instance) {
+	'click .js-save'(e, instance) {
 		e.preventDefault();
 		instance.saveSetting();
 	},
 
 	'click [data-play]'(e) {
 		e.preventDefault();
-
-		let audio = $(e.currentTarget).data('play');
 		const user = Meteor.user();
 
-		if (audio === 'Use account preference' || audio === 'none') {
-			audio = RocketChat.getUserPreference(user, 'newMessageNotification');
+		let value = Template.instance().form.audioNotificationValue.get();
+		if (value === '0') {
+			value = RocketChat.getUserPreference(user, 'newMessageNotification');
 		}
 
-		if (audio && audio !== 'none') {
+		if (value && value !== 'none') {
 			const audioVolume = RocketChat.getUserPreference(user, 'notificationsSoundVolume');
-			const $audio = $(`audio#${ audio }`);
-
-			if ($audio && $audio[0] && $audio[0].play) {
-				$audio[0].volume = Number((audioVolume/100).toPrecision(2));
-				$audio[0].play();
-			}
-		}
-	},
-
-	'change select[name=audioNotificationValue]'(e) {
-		e.preventDefault();
-
-		let audio = $(e.currentTarget).val();
-		const user = Meteor.user();
-
-		if (audio==='') {
-			audio = RocketChat.getUserPreference(user, 'newMessageNotification');
-		}
-		if (audio && audio !== 'none') {
-			const audioVolume = RocketChat.getUserPreference(user, 'notificationsSoundVolume');
-			const $audio = $(`audio#${ audio }`);
+			const $audio = $(`audio#${ value }`);
 
 			if ($audio && $audio[0] && $audio[0].play) {
 				$audio[0].volume = Number((audioVolume/100).toPrecision(2));
@@ -314,25 +203,84 @@ Template.pushNotificationsFlexTab.events({
 
 	'change input[type=checkbox]'(e, instance) {
 		e.preventDefault();
-		instance.editing.set($(e.currentTarget).attr('name'));
-		instance.saveSetting($(e.currentTarget).attr('name'));
+		const name = $(e.currentTarget).attr('name');
+		const checked = ['disableNotifications', 'hideUnreadStatus'].includes(name) ? !e.currentTarget.checked : e.currentTarget.checked;
+		instance.form[name].set(checked);
 	},
 
 	'click .rc-user-info__config-value'(e) {
-		const config = {
-			popoverClass: 'notifications-preferences',
-			template: 'pushNotificationsPopover',
-			mousePosition: () => ({
-				x: e.currentTarget.getBoundingClientRect().left,
-				y: e.currentTarget.getBoundingClientRect().bottom + 50
-			}),
-			customCSSProperties: () => ({
-				top:  `${ e.currentTarget.getBoundingClientRect().bottom + 10 }px`,
-				left: `${ e.currentTarget.getBoundingClientRect().left - 10 }px`
-			}),
-			data: {
-				value: 'default',
-				options : [{
+		const instance = Template.instance();
+		const key = this.valueOf();
+
+		let options;
+
+		switch (key) {
+			case 'audioNotificationValue':
+				const audioAssets = RocketChat.CustomSounds && RocketChat.CustomSounds.getList && RocketChat.CustomSounds.getList() || [];
+				const audioAssetsArray = audioAssets.map(audio => {
+					return {
+						id: `audioNotificationValue${ audio.name }`,
+						name: 'audioNotificationValue',
+						label: audio.name,
+						value: audio._id
+					};
+				});
+				options = [
+					{
+						id: 'audioNotificationValueNone',
+						name: 'audioNotificationValue',
+						label: 'None',
+						value: 'none'
+					},
+					{
+						id: 'audioNotificationValueDefault',
+						name: 'audioNotificationValue',
+						label: 'Default',
+						value: 0
+					},
+					...audioAssetsArray
+				];
+				break;
+			case 'desktopNotificationDuration':
+				options = [{
+					id: 'desktopNotificationDuration',
+					name: 'desktopNotificationDuration',
+					label: 'Default',
+					value: 0
+				},
+				{
+					id: 'desktopNotificationDuration1s',
+					name: 'desktopNotificationDuration',
+					label: `1 ${ t('seconds') }`,
+					value: 1
+				},
+				{
+					id: 'desktopNotificationDuration2s',
+					name: 'desktopNotificationDuration',
+					label: `2 ${ t('seconds') }`,
+					value: 2
+				},
+				{
+					id: 'desktopNotificationDuration3s',
+					name: 'desktopNotificationDuration',
+					label: `3 ${ t('seconds') }`,
+					value: 3
+				},
+				{
+					id: 'desktopNotificationDuration4s',
+					name: 'desktopNotificationDuration',
+					label: `4 ${ t('seconds') }`,
+					value: 4
+				},
+				{
+					id: 'desktopNotificationDuration5s',
+					name: 'desktopNotificationDuration',
+					label: `5 ${ t('seconds') }`,
+					value: 5
+				}];
+				break;
+			default:
+				options = [{
 					id: 'desktopNotificationsDefault',
 					name: 'desktopNotifications',
 					label: 'Default',
@@ -355,7 +303,26 @@ Template.pushNotificationsFlexTab.events({
 					name: 'desktopNotifications',
 					label: 'Nothing',
 					value: 'nothing'
-				}]
+				}];
+		}
+
+		const config = {
+			popoverClass: 'notifications-preferences',
+			template: 'pushNotificationsPopover',
+			mousePosition: () => ({
+				x: e.currentTarget.getBoundingClientRect().left,
+				y: e.currentTarget.getBoundingClientRect().bottom + 50
+			}),
+			customCSSProperties: () => ({
+				top:  `${ e.currentTarget.getBoundingClientRect().bottom + 10 }px`,
+				left: `${ e.currentTarget.getBoundingClientRect().left - 10 }px`
+			}),
+			data: {
+				change : (value) => {
+					return instance.form[key].set(key === 'desktopNotificationDuration' ? parseInt(value) : value);
+				},
+				value: instance.form[key].get(),
+				options
 			}
 		};
 		popover.open(config);
@@ -363,6 +330,11 @@ Template.pushNotificationsFlexTab.events({
 });
 
 
+
+Template.pushNotificationsPopover.onCreated(function() {
+	this.change = this.data.change;
+});
+
 Template.pushNotificationsPopover.onRendered(function() {
 	this.find(`[value=${ this.data.value }]`).checked = true;
 });
diff --git a/packages/rocketchat-push-notifications/server/models/Subscriptions.js b/packages/rocketchat-push-notifications/server/models/Subscriptions.js
index e793d751adb2..a60402ef5509 100644
--- a/packages/rocketchat-push-notifications/server/models/Subscriptions.js
+++ b/packages/rocketchat-push-notifications/server/models/Subscriptions.js
@@ -51,7 +51,7 @@ RocketChat.models.Subscriptions.updateDesktopNotificationDurationById = function
 
 	const update = {
 		$set: {
-			desktopNotificationDuration: value - 0
+			desktopNotificationDuration: parseInt(value)
 		}
 	};
 
diff --git a/packages/rocketchat-theme/client/imports/components/modal/create-channel.css b/packages/rocketchat-theme/client/imports/components/modal/create-channel.css
index c311719344ca..b976b4e931f1 100644
--- a/packages/rocketchat-theme/client/imports/components/modal/create-channel.css
+++ b/packages/rocketchat-theme/client/imports/components/modal/create-channel.css
@@ -10,6 +10,8 @@
 	&__wrapper {
 		overflow-x: hidden;
 		overflow-y: auto;
+
+		height: 100%;
 	}
 
 	&__header,
diff --git a/packages/rocketchat-theme/client/imports/components/userInfo.css b/packages/rocketchat-theme/client/imports/components/userInfo.css
index b5560cca4f81..914dc819acff 100644
--- a/packages/rocketchat-theme/client/imports/components/userInfo.css
+++ b/packages/rocketchat-theme/client/imports/components/userInfo.css
@@ -253,6 +253,10 @@
 
 				font-size: 1.25rem;
 			}
+
+			& .icon-play-circled {
+				cursor: pointer;
+			}
 		}
 
 		&-name,
@@ -275,6 +279,7 @@
 
 			color: #1d73f3;
 			align-items: flex-end;
+			text-transform: capitalize;
 		}
 	}
 }
@@ -284,7 +289,7 @@
 
 	width: 100%;
 
-	word-break: break-all;
+	word-break: break-word;
 
 	&__description {
 		margin: 5px 2px;