diff --git a/packages/rocketchat-apps/client/admin/appInstall.html b/packages/rocketchat-apps/client/admin/appInstall.html
index 0444b82f1fb4b..15564eac7a432 100644
--- a/packages/rocketchat-apps/client/admin/appInstall.html
+++ b/packages/rocketchat-apps/client/admin/appInstall.html
@@ -1,33 +1,56 @@
 <template name="appInstall">
 	<section class="preferences-page">
-		<header class="preferences-page__header">
-			{{> burger}}
-			<a href="{{pathFor "apps"}}" title="{{_ "Back_to_Manage_Apps"}}">
-				<i class="icon-left-open"></i>
-			</a> &nbsp;
-
-			<h2>{{_ "App_Installation"}}</h2>
-		</header>
+		{{> header sectionName="App_Installation" hideHelp=true  fixedHeight=true}}
 		<div class="preferences-page__content">
 			{{#if isInstalling}}
 				{{> loading}}
 			{{else}}
 				<div class="rc-form-group rc-grid">
 					<div class="rc-input rc-w50 padded">
-						<div class="rc-select-avatar__list-item rc-tooltip js-select-app-upload" aria-label="{{_ "Upload_file" }}">
-							<label class="rc-select-avatar__upload-label app" for="upload-app">
-								{{> icon block="rc-select-avatar__upload-icon" icon="upload"}}
-							</label>
-							<input type="file" name="" value="" id="upload-app" style="display:none;">
-						</div>
 						<label class="rc-input__label">
-							<div class="rc-input__title">{{_ "App_Url_to_Install_From"}}</div>
+							<div class="rc-input__title">{{>icon icon='clip'}}{{_ "App_Url_to_Install_From"}}</div>
 							<div class="rc-input__wrapper">
 								<input type="text" class="rc-input__element" name="appPackageUrl" id="appPackage" placeholder="https://rocket.chat/apps/package.zip" value="{{appUrl}}" >
 							</div>
 						</label>
-						<button class="rc-button install">{{ _ "Install" }}</button>
 					</div>
+					<div class="rc-input-file rc-w50 padded">
+						<label class="rc-input-file__label">
+							<div class="rc-input-file__title">{{>icon icon='clip'}}{{_ "App_Url_to_Install_From_File"}}</div>
+							<div class="rc-input-file__wrapper">
+								<div class="rc-input-file__name">
+									{{appFile}}
+								</div>
+								<input type="file" accept=".zip" class="rc-input-file__element" name="appPackageUrl" id="upload-app" placeholder="https://rocket.chat/apps/package.zip">
+								<label for='upload-app' class="rc-button rc-button-secondary install">{{_ "Browse_Files"}}</label>
+							</div>
+						</label>
+						  <!-- <input type="file" id="file" class="inputfile" onchange='uploadFile(this)'>
+						  <label for="file">
+						    <span id="file-name" class="file-box"></span>
+						    <span class="file-button">
+						      <i class="fa fa-upload" aria-hidden="true"></i>
+						      Select File
+						    </span>
+						  </label>
+
+
+						<label class="rc-input__label">
+							<div class="rc-input__title">{{>icon icon='clip'}}{{_ "App_Url_to_Install_From_File"}}</div>
+							<div class="rc-input__wrapper">
+							</div>
+						</label> -->
+						<!-- <div class="rc-select-avatar__list-item rc-tooltip js-select-app-upload" aria-label="{{_ "Upload_file" }}">
+							<label class="rc-select-avatar__upload-label app" for="upload-app">
+								{{> icon block="rc-select-avatar__upload-icon" icon="upload"}}
+							</label>
+							<input type="file" name="" value="" id="upload-app" style="display:none;">
+						</div> -->
+					</div>
+				</div>
+				<div class="rc-button-group">
+					<button class="rc-button rc-button--secondary js-cancel">{{ _ "Cancel" }}</button>
+					<button class="rc-button rc-button--primary js-install" disabled='{{disabled}}'>{{ _ "Install" }}</button>
 				</div>
 			{{/if}}
 		</div>
diff --git a/packages/rocketchat-apps/client/admin/appInstall.js b/packages/rocketchat-apps/client/admin/appInstall.js
index e32ec62a694c6..fc0caa695f376 100644
--- a/packages/rocketchat-apps/client/admin/appInstall.js
+++ b/packages/rocketchat-apps/client/admin/appInstall.js
@@ -9,16 +9,24 @@
 // over the passed in body, so if both are found it will only use the url.
 
 Template.appInstall.helpers({
+	appFile() {
+		return Template.instance().file.get();
+	},
 	isInstalling() {
 		return Template.instance().isInstalling.get();
 	},
 	appUrl() {
 		return Template.instance().appUrl.get();
+	},
+	disabled() {
+		const instance = Template.instance();
+		return !(instance.appUrl.get() || instance.file.get());
 	}
 });
 
 Template.appInstall.onCreated(function() {
 	const instance = this;
+	instance.file = new ReactiveVar('');
 	instance.isInstalling = new ReactiveVar(false);
 	instance.appUrl = new ReactiveVar('');
 
@@ -30,19 +38,30 @@ Template.appInstall.onCreated(function() {
 });
 
 Template.appInstall.events({
-	'click .install'(e, t) {
+	'input #appPackage'(e, i) {
+		i.appUrl.set(e.currentTarget.value);
+	},
+	'change #upload-app'(e, i) {
+		const file = e.currentTarget.files[0];
+		i.file.set(file.name);
+	},
+	'click .js-cancel'() {
+		FlowRouter.go('/admin/apps');
+	},
+	async 'click .js-install'(e, t) {
 		const url = $('#appPackage').val().trim();
 
 		// Handle url installations
 		if (url) {
-			t.isInstalling.set(true);
-			RocketChat.API.post('apps', { url }).then((result) => {
+			try {
+				t.isInstalling.set(true);
+				const result = await RocketChat.API.post('apps', { url });
 				FlowRouter.go(`/admin/apps/${ result.app.id }`);
-			}).catch((err) => {
+			} catch (err) {
 				console.warn('err', err);
+			} finally {
 				t.isInstalling.set(false);
-			});
-
+			}
 			return;
 		}
 
@@ -65,11 +84,13 @@ Template.appInstall.events({
 		}
 
 		t.isInstalling.set(true);
-		RocketChat.API.upload('apps', data).then((result) => {
+		try {
+			const result = await RocketChat.API.upload('apps', data);
 			FlowRouter.go(`/admin/apps/${ result.app.id }`);
-		}).catch((err) => {
+		} catch (err) {
 			console.warn('err', err);
+		} finally {
 			t.isInstalling.set(false);
-		});
+		}
 	}
 });
diff --git a/packages/rocketchat-apps/client/admin/appManage.html b/packages/rocketchat-apps/client/admin/appManage.html
index 8bc9c6ea98eb6..e9003525e4e87 100644
--- a/packages/rocketchat-apps/client/admin/appManage.html
+++ b/packages/rocketchat-apps/client/admin/appManage.html
@@ -1,261 +1,252 @@
 <!-- This page allows for settings to be changed but not all of them are implemented yet -->
 <template name="appManage">
 	{{#with app}}
-		<section class="page-container page-list page-settings flex-tab-main-content">
-			<header class="fixed-title">
-				{{> burger}}
-				<a href="{{pathFor "apps"}}" title="{{_ "Back_to_Manage_Apps"}}">
-					<i class="icon-left-open"></i>
-				</a> &nbsp;
 
-				{{#if isReady}}
-					<h2>
-						<span class="room-title">{{_ "Manage_the_App"}}: "{{name}}"</span>
-					</h2>
+		{{# header sectionName='Manage_the_App' fixedHeight=true hideHelp=true}}
+		<div class="rc-header__block rc-header__block-action">
+			<div class="rc-switch rc-switch--blue">
+				<label class="rc-switch__label">
+					<input type="checkbox" class="rc-switch__input js-input-check" id="enabled" name="enabledToggle" checked="{{isEnabled}}">
+					<span class="rc-switch__button">
+						<span class="rc-switch__button-inside"></span>
+					</span>
+				</label>
+			</div>
 
-					<div class="submit">
-						<button class="button logs">{{_ "Logs"}}</button>
-						<button class="button danger uninstall">{{_ "Uninstall"}}</button>
-					</div>
-				{{/if}}
-				{{#if hasError}}
-					<h2>
-						<span class="room-title">{{ theError }}</span>
-					</h2>
-				{{/if}}
-			</header>
-			<div class="content background-transparent-dark">
-				{{#requiresPermission 'manage-apps'}}
-					{{#if isReady}}
-						<div class="rocket-form">
-							<div class="section">
-								<div class="section-title">
-									<div class="section-title-text">
-										{{_ "App_Information"}}
-									</div>
-									<div class="section-title-right">
-										<button class="button primary collapse">
-											<span>{{_ "Collapse"}}</span>
-										</button>
-									</div>
+		</div>
+		{{/header}}
+		<section class="page-settings flex-tab-main-content">
+			{{#requiresPermission 'manage-apps'}}
+				{{#if isReady}}
+					<div class="rc-apps-details">
+						<div class="rc-apps-container">
+							<div class="rc-apps-details__photo" style="background-image:url({{iconFileContent}})"></div>
+							<div class="rc-apps-details__content">
+								<div class="rc-apps-details__row">
+									<div class="rc-apps-details__name">{{name}}</div>
+									<div class="rc-apps-details__version">v {{version}}</div>
 								</div>
-								<div class="section-content">
-									<div class="input-line double-col">
-										<label>{{_ "Enabled"}}</label>
-										<div class="input checkbox toggle" style="margin: 10px 0 0;">
-											<input type="checkbox" id="enabled" name="enabledToggle" checked="{{isEnabled}}" />
-											<label for="enabled"></label>
-											{{#if isProcessingEnabled}}
-												<div class="app-enable-loading">
-													{{> loading}}
-												</div>
-											{{/if}}
-										</div>
-									</div>
-									<div class="input-line double-col">
-										<label>{{_ "Name"}}</label>
-										<div>
-											<input class="input-monitor" type="text" disabled value="{{name}}">
-										</div>
-									</div>
-									<div class="input-line double-col">
-										<label>{{_ "Description"}}</label>
-										<div>
-											<input class="input-monitor" type="text" disabled value="{{description}}">
-										</div>
-									</div>
-									<div class="input-line double-col">
-										<label>{{_ "Version"}}</label>
-										<div>
-											<input class="input-monitor" type="text" disabled value="{{version}}">
-										</div>
-									</div>
-									<div class="input-line double-col">
-										<label>{{_ "Author_Information"}}</label>
-										<div>
-											<input class="input-monitor app-author-name" type="text" disabled value="{{author.name}}">
-											{{#if author.homepage}}<a class="button" target="_blank" href="{{author.homepage}}">{{_ "Website"}}</a>{{/if}}
-											{{#if author.support}}<a class="button" target="_blank" href="{{author.support}}">{{_ "Support"}}</a>{{/if}}
-										</div>
+								<div class="rc-apps-details__row">{{description}}</div>
+								<div class="rc-apps-details__row">
+									{{#if author.name}}
+									<div class="rc-apps-details__item">
+										{{> icon icon='user'}}
+										{{author.name}}
 									</div>
+									{{/if}}
+									{{#if author.homepage}}
+									<a href="{{author.homepage}}" class="rc-apps-details__item">
+										{{> icon icon='permalink'}}
+										author homepage
+									</a>
+									{{/if}}
+									{{#if author.support}}
+									<a href="{{author.support}}" class="rc-apps-details__item">
+										{{> icon icon='at'}}
+										support url
+									</a>
+									{{/if}}
 								</div>
 							</div>
-							<div class="section section-collapsed">
-								<div class="section-title">
-									<div class="section-title-text">
-										{{_ "Apps_Settings"}}
+						</div>
+					</div>
+					<div class="rc-apps-container rc-apps-settings">
+					{{#each settings}}
+						<div class="rc-apps-settings__item">
+							{{#if $eq type 'string'}}
+
+							<div class="rc-input">
+								<label class="rc-input__label">
+									<div class="rc-input__title">{{_ i18nLabel}}</div>
+									<div class="rc-input__wrapper">
+										{{#if multiline}}
+										<textarea class="rc-input__element" name="{{id}}" rows="4" style="height: auto">{{value}}</textarea>
+										{{else}}
+										<input class="rc-input__element" type="text" name="{{id}}" value="{{value}}" placeholder="{{_ i18nPlaceholder}}" />
+										{{/if}}
 									</div>
-									<div class="section-title-right">
-										<button class="button save">{{_ "Save"}}</button>
-										<button class="button primary expand">
-											<span>{{_ "Expand"}}</span>
-										</button>
+								</label>
+								{{# if i18nDescription}}
+								<div class="rc-input__description">{{{parseDescription i18nDescription}}}</div>
+								{{/if}}
+								{{# if i18nAlert}}
+								<div class="rc-input__error">
+									<div class="rc-input__error-icon">
+										{{> icon block="rc-input__error-icon" icon="warning" classes="rc-input__error-icon-svg"}}
 									</div>
+									<div class="rc-input__error-message">{{_ "i18nAlert"}}</div>
 								</div>
-								<div class="section-content">
-									{{#each settings}}
-										<div class="input-line double-col">
-											<label class="setting-label">{{_ i18nLabel}}</label>
-											<div class="setting-field">
-												{{#if $eq type 'string'}}
-													{{#if multiline}}
-														<textarea class="input-monitor" name="{{id}}" rows="4" style="height: auto">{{value}}</textarea>
-													{{else}}
-														<input class="input-monitor" type="text" name="{{id}}" value="{{value}}" placeholder="{{_ i18nPlaceholder}}" />
-													{{/if}}
-												{{/if}}
-
-												{{#if $eq type 'relativeUrl'}}
-													<input class="input-monitor" type="text" name="{{id}}" value="{{relativeUrl value}}" placeholder="{{_ i18nPlaceholder}}" {{isReadonly}}/>
-												{{/if}}
-
-												{{#if $eq type 'password'}}
-													<input class="input-monitor" type="password" name="{{id}}" value="{{value}}" placeholder="{{_ i18nPlaceholder}}" />
-												{{/if}}
-
-												{{#if $eq type 'int'}}
-													<input class="input-monitor" type="number" name="{{id}}" value="{{value}}" placeholder="{{_ i18nPlaceholder}}" />
-												{{/if}}
-
-												{{#if $eq type 'boolean'}}
-													<div class="input checkbox toggle">
-														<input type="checkbox" name="{{id}}" checked="{{$eq value true}}" />
-														<label for="{{id}}"></label>
-													</div>
-												{{/if}}
+								{{/if}}
+							</div>
+							{{else if $eq type 'boolean'}}
+							<div class="rc-switch rc-switch--blue">
+								<label class="rc-switch__label" tabindex="-1" for="{{id}}">
+									<input type="checkbox" class="rc-switch__input" name="{{id}}" id="{{id}}" checked="{{$eq value true}}">
+									<span class="rc-switch__button">
+										<span class="rc-switch__button-inside"></span>
+									</span>
+									<span class="rc-switch__text">
+										{{_ i18nLabel}}
+									</span>
+								</label>
+								<span class="rc-switch__description">{{{parseDescription i18nDescription}}}</span>
+							</div>
+							{{else}}
+							<div class="input-line double-col">
+								<label class="setting-label">{{_ i18nLabel}}</label>
+								<div class="setting-field">
+									{{#if $eq type 'relativeUrl'}}
+									<input class="input-monitor" type="text" name="{{id}}" value="{{relativeUrl value}}" placeholder="{{_ i18nPlaceholder}}" {{isReadonly}}/>
+									{{/if}}
 
-												{{#if $eq type 'select'}}
-													<div class="select-arrow">
-														<i class="icon-down-open secondary-font-color"></i>
-													</div>
-													<select class="input-monitor" name="{{id}}">
-														{{#each values}}
-															<option value="{{key}}" selected="{{selectedOption ../id key}}">{{_ i18nLabel}}</option>
-														{{/each}}
-													</select>
-												{{/if}}
+									{{#if $eq type 'password'}}
+									<input class="input-monitor" type="password" name="{{id}}" value="{{value}}" placeholder="{{_ i18nPlaceholder}}" />
+									{{/if}}
 
-												{{#if $eq type 'language'}}
-													<div class="select-arrow">
-														<i class="icon-down-open secondary-font-color"></i>
-													</div>
-													<select class="input-monitor" name="{{id}}">
-														{{#each languages}}
-														<option value="{{key}}" selected="{{appLanguage key}}" dir="auto">{{name}}</option>
-														{{/each}}
-													</select>
-												{{/if}}
+									{{#if $eq type 'int'}}
+									<input class="input-monitor" type="number" name="{{id}}" value="{{value}}" placeholder="{{_ i18nPlaceholder}}" />
+									{{/if}}
 
-												{{#if $eq type 'color'}}
-													<div class="horizontal">
-														{{#if $eq editor 'color'}}
-															<div class="flex-grow-1">
-																<input class="input-monitor colorpicker-input" type="text" name="{{id}}" value="{{value}}" autocomplete="off"/>
-																<span class="colorpicker-swatch border-component-color" style="background-color: {{value}}"></span>
-															</div>
-														{{/if}}
-														{{#if $eq editor 'expression'}}
-															<div class="flex-grow-1">
-																<input class="input-monitor" type="text" name="{{id}}" value="{{value}}"/>
-															</div>
-														{{/if}}
-														<div class="color-editor">
-															<div class="select-arrow">
-																<i class="icon-down-open secondary-font-color"></i>
-															</div>
-															<select name="color-editor">
-																{{#each allowedTypes}}
-																	<option value="{{.}}" selected="{{$eq ../editor .}}">{{_ .}}</option>
-																{{/each}}
-															</select>
-														</div>
-													</div>
-													<div class="settings-description">Variable name: {{getColorVariable id}}</div>
-												{{/if}}
+									{{#if $eq type 'select'}}
+									<div class="select-arrow">
+										<i class="icon-down-open secondary-font-color"></i>
+									</div>
+									<select class="input-monitor" name="{{id}}">
+										{{#each values}}
+										<option value="{{key}}" selected="{{selectedOption ../id key}}">{{_ i18nLabel}}</option>
+										{{/each}}
+									</select>
+									{{/if}}
 
-												{{#if $eq type 'font'}}
-													<input class="input-monitor" type="text" name="{{id}}" value="{{value}}"/>
-												{{/if}}
+									{{#if $eq type 'language'}}
+									<div class="select-arrow">
+										<i class="icon-down-open secondary-font-color"></i>
+									</div>
+									<select class="input-monitor" name="{{id}}">
+										{{#each languages}}
+										<option value="{{key}}" selected="{{appLanguage key}}" dir="auto">{{name}}</option>
+										{{/each}}
+									</select>
+									{{/if}}
 
-												{{#if $eq type 'code'}}
-													{{#if isDisabled.disabled}}
-														{{> CodeMirror name=id options=(getEditorOptions true) code=(i18nDefaultValue) }}
-													{{else}}
-														<div class="code-mirror-box" data-editor-id="{{id}}">
-															<div class="title">
-																{{label}}
-															</div>
-															{{> CodeMirror name=id options=getEditorOptions code=value }}
-															{{setEditorOnBlur id}}
-															<div class="buttons">
-																<button class="button primary button-fullscreen">Full Screen</button>
-																<button class="button primary button-restore">Exit Full Screen</button>
-															</div>
-														</div>
-													{{/if}}
-												{{/if}}
+									{{#if $eq type 'color'}}
+									<div class="horizontal">
+										{{#if $eq editor 'color'}}
+										<div class="flex-grow-1">
+											<input class="input-monitor colorpicker-input" type="text" name="{{id}}" value="{{value}}" autocomplete="off"/>
+											<span class="colorpicker-swatch border-component-color" style="background-color: {{value}}"></span>
+										</div>
+										{{/if}}
+										{{#if $eq editor 'expression'}}
+										<div class="flex-grow-1">
+											<input class="input-monitor" type="text" name="{{id}}" value="{{value}}"/>
+										</div>
+										{{/if}}
+										<div class="color-editor">
+											<div class="select-arrow">
+												<i class="icon-down-open secondary-font-color"></i>
+											</div>
+											<select name="color-editor">
+												{{#each allowedTypes}}
+												<option value="{{.}}" selected="{{$eq ../editor .}}">{{_ .}}</option>
+												{{/each}}
+											</select>
+										</div>
+									</div>
+									<div class="settings-description">Variable name: {{getColorVariable id}}</div>
+									{{/if}}
 
-												{{#if $eq type 'action'}}
-													{{#if hasChanges section}}
-														<span style="line-height: 40px" class="secondary-font-color">{{_ "Save_to_enable_this_action"}}</span>
-													{{else}}
-														<button type="button" class="button primary action" data-setting="{{id}}" data-action="{{value}}">{{_ actionText}}</button>
-													{{/if}}
-												{{/if}}
+									{{#if $eq type 'font'}}
+									<input class="input-monitor" type="text" name="{{id}}" value="{{value}}"/>
+									{{/if}}
 
-												{{#if $eq type 'asset'}}
-													{{#if value.url}}
-														<div class="settings-file-preview">
-															<div class="preview" style="background-image:url({{value.url}}?_dc={{random}});"></div>
-															<div class="action">
-																<button type="button" class="button danger delete-asset"><i class="icon-trash secondary-font-color"></i>{{_ 'Delete'}}</button>
-															</div>
-														</div>
-													{{else}}
-														<div class="settings-file-preview">
-															<div class="preview no-file background-transparent-light secondary-font-color"><i class="icon-upload secondary-font-color"></i></div>
-															<div class="action">
-																<div class="button primary">{{_ 'Select_file'}}
-																	<input type="file" accept="{{assetAccept fileConstraints}}" />
-																</div>
-															</div>
-														</div>
-													{{/if}}
-												{{/if}}
+									{{#if $eq type 'code'}}
+									{{#if isDisabled.disabled}}
+									{{> CodeMirror name=id options=(getEditorOptions true) code=(i18nDefaultValue) }}
+									{{else}}
+									<div class="code-mirror-box" data-editor-id="{{id}}">
+										<div class="title">
+											{{label}}
+										</div>
+										{{> CodeMirror name=id options=getEditorOptions code=value }}
+										{{setEditorOnBlur id}}
+										<div class="buttons">
+											<button class="button primary button-fullscreen">Full Screen</button>
+											<button class="button primary button-restore">Exit Full Screen</button>
+										</div>
+									</div>
+									{{/if}}
+									{{/if}}
 
-												{{#if $eq type 'roomPick'}}
-													<div>
-														{{> inputAutocomplete settings=autocompleteRoom id=id name=id class="search autocomplete" autocomplete="off" disabled=isDisabled.disabled}}
-														<ul class="selected-rooms">
-															{{#each selectedRooms}}
-																<li class="remove-room" data-setting={{../id}}>{{name}} <i class="icon-cancel secondary-font-color"></i></li>
-															{{/each}}
-														</ul>
-													</div>
-												{{/if}}
+									{{#if $eq type 'action'}}
+									{{#if hasChanges section}}
+									<span style="line-height: 40px" class="secondary-font-color">{{_ "Save_to_enable_this_action"}}</span>
+									{{else}}
+									<button type="button" class="button primary action" data-setting="{{id}}" data-action="{{value}}">{{_ actionText}}</button>
+									{{/if}}
+									{{/if}}
 
-												{{#if i18nDescription}}
-													<div class="settings-description">{{{parseDescription i18nDescription}}}</div>
-												{{/if}}
-												{{#if i18nAlert}}
-													<div class="settings-alert pending-color pending-background pending-border"><i class="icon-attention secondary-font-color"></i>{{{_ i18nAlert}}}</div>
-												{{/if}}
+									{{#if $eq type 'asset'}}
+									{{#if value.url}}
+									<div class="settings-file-preview">
+										<div class="preview" style="background-image:url({{value.url}}?_dc={{random}});"></div>
+										<div class="action">
+											<button type="button" class="button danger delete-asset"><i class="icon-trash secondary-font-color"></i>{{_ 'Delete'}}</button>
+										</div>
+									</div>
+									{{else}}
+									<div class="settings-file-preview">
+										<div class="preview no-file background-transparent-light secondary-font-color"><i class="icon-upload secondary-font-color"></i></div>
+										<div class="action">
+											<div class="button primary">{{_ 'Select_file'}}
+												<input type="file" accept="{{assetAccept fileConstraints}}" />
 											</div>
 										</div>
-									{{/each}}
+									</div>
+									{{/if}}
+									{{/if}}
+
+									{{#if $eq type 'roomPick'}}
+									<div>
+										{{> inputAutocomplete settings=autocompleteRoom id=id name=id class="search autocomplete" autocomplete="off" disabled=isDisabled.disabled}}
+										<ul class="selected-rooms">
+											{{#each selectedRooms}}
+											<li class="remove-room" data-setting={{../id}}>{{name}} <i class="icon-cancel secondary-font-color"></i></li>
+											{{/each}}
+										</ul>
+									</div>
+									{{/if}}
+
+									{{#if i18nDescription}}
+									<div class="settings-description">{{{parseDescription i18nDescription}}}</div>
+									{{/if}}
+									{{#if i18nAlert}}
+									<div class="settings-alert pending-color pending-background pending-border"><i class="icon-attention secondary-font-color"></i>{{{_ i18nAlert}}}</div>
+									{{/if}}
 								</div>
 							</div>
+							{{/if}}
+
 						</div>
-					{{else if hasError}}
-						<div class="apps-error error-color">
-							<i class="icon-attention"></i>
-							<p>Sadly, an error has occured while loading this page.</p>
+
+					{{/each}}
+					</div>
+					<div class="rc-apps-container">
+						<div class="rc-button-group">
+							<button class="rc-button rc-button--secondary js-cancel">{{ _ "Cancel" }}</button>
+							<button class="rc-button rc-button--primary js-save" disabled='{{disabled}}'>{{ _ "Save" }}</button>
+							<button class="rc-button rc-button--cancel js-uninstall">{{ _ "Uninstall" }}</button>
 						</div>
-					{{else}}
-						{{> loading}}
-					{{/if}}
-				{{/requiresPermission}}
-			</div>
+					</div>
+				{{else if hasError}}
+					<div class="apps-error error-color">
+						<i class="icon-attention"></i>
+						<p>Sadly, an error has occured while loading this page.</p>
+					</div>
+				{{else}}
+					{{> loading}}
+				{{/if}}
+			{{/requiresPermission}}
 		</section>
 	{{/with}}
 </template>
diff --git a/packages/rocketchat-apps/client/admin/appManage.js b/packages/rocketchat-apps/client/admin/appManage.js
index 8341928043b9b..9014c3cea822e 100644
--- a/packages/rocketchat-apps/client/admin/appManage.js
+++ b/packages/rocketchat-apps/client/admin/appManage.js
@@ -30,6 +30,7 @@ Template.appManage.onCreated(function() {
 		RocketChat.API.get(`apps/${ id }/settings`)
 	]).then((results) => {
 		instance.app.set(results[0].app);
+		console.log(instance.app.get());
 		_morphSettings(results[1].settings);
 
 		this.ready.set(true);
@@ -70,6 +71,20 @@ Template.apps.onDestroyed(function() {
 });
 
 Template.appManage.helpers({
+	disabled() {
+		const t = Template.instance();
+
+		const toSave = Object.keys(t.settings.get()).filter((k) => {
+			const setting = t.settings.get()[k];
+			if (setting.hasChanged) {
+				return true;
+			}
+		});
+
+		if (toSave.length === 0) {
+			return true;
+		}
+	},
 	isReady() {
 		if (Template.instance().ready) {
 			return Template.instance().ready.get();
@@ -133,7 +148,9 @@ Template.appManage.events({
 		$(e.currentTarget).closest('.section').addClass('section-collapsed');
 		$(e.currentTarget).closest('button').addClass('expand').removeClass('collapse').find('span').text(TAPi18n.__('Expand'));
 	},
-
+	'click .js-cancel'() {
+		FlowRouter.go('/admin/apps');
+	},
 	'change #enabled': (e, t) => {
 		t.processingEnabled.set(true);
 		$('#enabled').prop('disabled', true);
@@ -155,7 +172,7 @@ Template.appManage.events({
 		});
 	},
 
-	'click .uninstall': (e, t) => {
+	'click .js-uninstall': (e, t) => {
 		t.ready.set(false);
 
 		RocketChat.API.delete(`apps/${ t.id.get() }`).then(() => {
@@ -170,7 +187,7 @@ Template.appManage.events({
 		FlowRouter.go(`/admin/apps/${ t.id.get() }/logs`);
 	},
 
-	'click .save': (e, t) => {
+	'click .js-save': (e, t) => {
 		const toSave = [];
 
 		Object.keys(t.settings.get()).forEach((k) => {
@@ -193,17 +210,18 @@ Template.appManage.events({
 		});
 	},
 
-	'click .input.checkbox label': (e, t) => {
-		const labelFor = $(e.currentTarget).attr('for');
-		const isChecked = $(`input[name="${ labelFor }"]`).prop('checked');
+	'change input[type="checkbox"]': (e, t) => {
+		const labelFor = $(e.currentTarget).attr('name');
+		const isChecked = $(e.currentTarget).prop('checked');
 
-		$(`input[name="${ labelFor }"]`).prop('checked', !isChecked);
+		// $(`input[name="${ labelFor }"]`).prop('checked', !isChecked);
 
 		const setting = t.settings.get()[labelFor];
 
 		if (setting) {
-			setting.value = !isChecked;
+			setting.value = isChecked;
 			t.settings.get()[labelFor].hasChanged = setting.oldValue !== setting.value;
+			t.settings.set(t.settings.get());
 		}
 	},
 
diff --git a/packages/rocketchat-apps/client/admin/apps.html b/packages/rocketchat-apps/client/admin/apps.html
index 977c0243a8905..31022e02d3197 100644
--- a/packages/rocketchat-apps/client/admin/apps.html
+++ b/packages/rocketchat-apps/client/admin/apps.html
@@ -1,32 +1,55 @@
 <template name="apps">
+	<!-- TODO: fix this class -->
 	<section class="preferences-page preferences-page--apps">
-		<header class="preferences-page__header">
-			{{> burger}}
-			<h2>{{_ "Manage_Apps"}}</h2>
-			<button class="rc-button rc-button--primary" data-button="install">{{_ "Install_package"}}</button>
-		</header>
-		<div class="preferences-page__content">
+		{{#header sectionName="Manage_Apps" hideHelp=true fixedHeight=true}}
+			<button class="rc-button rc-button--small rc-button--primary rc-directory-plus rc-tooltip rc-tooltip--down" data-button="install" aria-label="{{_ 'Install_package'}}">{{> icon icon="plus"}}</button>
+		{{/header}}
+		<div class="rc-directory-content">
 			{{#requiresPermission 'manage-apps'}}
-				<div class="rc-discovery">
-					<div class="rc-discovery-wrap">
+				<table class="rc-table">
+					<thead class="rc-table-head">
+						<tr class="rc-table-tr">
+							<td class="rc-table-td">Name</td>
+							<td class="rc-table-td">Version</td>
+							<td class="rc-table-td">Status</td>
+							<td class="rc-table-td"></td>
+						</tr>
+					</thead>
+					<tbody class="rc-table-body">
 						{{#each apps}}
-							<div class="rc-discovery__item">
-								<div class="rc-discovery__item-image-wrap">
-									<div class="rc-discovery__item-image" style="background-image: url({{ iconFileContent }})"></div>
-								</div>
-								<div class="rc-discovery__item-footer">
-									<div class="rc-discovery__container">
-										<div class="discovery__item-footer-title">{{name}}</div>
-										<div class="rc-discovery__item-footer-description">{{description}}</div>
+							<tr class="rc-table-tr" data-name="{{name}}">
+								<td class="rc-table-td rc-table-td--name">
+									<div class="rc-directory-channel-wrapper">
+										<div class="rc-directory-channel-avatar" style="background-image:url({{iconFileContent}})"></div>
+										<div class="rc-directory-channel-info">
+											<span class="rc-directory-channel-name">
+												{{name}}
+											</span>
+											{{#if description}}
+												<span class="rc-directory-channel-description">{{description}}</span>
+											{{/if}}
 									</div>
-									<button class="rc-button rc-button--square rc-tooltip manage" aria-label="{{_ "Manage_the_App"}}">
+									</div>
+								</td>
+								<td class="rc-table-td rc-table-td--users">{{version}}</td>
+								<td class="rc-table-td">
+									{{status}}
+								</td>
+								<td class="rc-table-td">
+									<button class="rc-button rc-button--nude rc-tooltip manage" aria-label="{{_ "Manage_the_App"}}">
 										{{> icon icon="cog"}}
 									</button>
-								</div>
-							</div>
+								</td>
+							</tr>
+						{{else}}
+						<tr class="rc-table-tr" data-name="{{name}}">
+							<td class="rc-table-td rc-table-td--name">
+								you dont have any app installed :/
+							</td>
+						</tr>
 						{{/each}}
-					</div>
-				</div>
+					</tbody>
+				</table>
 			{{/requiresPermission}}
 		</div>
 	</section>
diff --git a/packages/rocketchat-apps/client/orchestrator.js b/packages/rocketchat-apps/client/orchestrator.js
index fc75039fff329..f9ddfe4391d45 100644
--- a/packages/rocketchat-apps/client/orchestrator.js
+++ b/packages/rocketchat-apps/client/orchestrator.js
@@ -15,6 +15,7 @@ class AppClientOrchestrator {
 
 	_addAdminMenuOption() {
 		RocketChat.AdminBox.addOption({
+			icon: 'cube',
 			href: 'apps',
 			i18nLabel: 'Apps',
 			permissionGranted() {
diff --git a/packages/rocketchat-theme/client/imports/components/header.css b/packages/rocketchat-theme/client/imports/components/header.css
index ad19e063c8d4f..afc16f2ccfca5 100644
--- a/packages/rocketchat-theme/client/imports/components/header.css
+++ b/packages/rocketchat-theme/client/imports/components/header.css
@@ -1,10 +1,17 @@
 .rc-header {
+
+	&--height-fixed {
+		height: 78px;
+	}
+
 	&__block {
 		display: flex;
 
 		margin: 0 0.5rem;
 		align-items: center;
 	}
+
+	align-items: center;
 	z-index: 2;
 
 	display: flex;
diff --git a/packages/rocketchat-theme/client/imports/components/main-content.css b/packages/rocketchat-theme/client/imports/components/main-content.css
index ede6f5a121f33..8ae6f96903c6d 100644
--- a/packages/rocketchat-theme/client/imports/components/main-content.css
+++ b/packages/rocketchat-theme/client/imports/components/main-content.css
@@ -6,6 +6,11 @@
 	height: 100%;
 
 	position: relative;
+
+	display: flex;
+	flex-direction: column;
+
+	margin-bottom: 25px;
 }
 
 .messages-container .room-icon {
diff --git a/packages/rocketchat-theme/client/imports/components/modal/directory.css b/packages/rocketchat-theme/client/imports/components/modal/directory.css
index 7c1960aa951af..436c6b315100c 100644
--- a/packages/rocketchat-theme/client/imports/components/modal/directory.css
+++ b/packages/rocketchat-theme/client/imports/components/modal/directory.css
@@ -40,6 +40,10 @@
 		width: 60px;
 		height: 60px;
 		margin: 0 9px;
+
+		background-size: contain;
+		background-repeat: no-repeat;
+		background-position: center center;
 	}
 
 	&-info {
diff --git a/packages/rocketchat-theme/client/imports/forms/input.css b/packages/rocketchat-theme/client/imports/forms/input.css
index a7092e5192cd5..311df58cad28a 100644
--- a/packages/rocketchat-theme/client/imports/forms/input.css
+++ b/packages/rocketchat-theme/client/imports/forms/input.css
@@ -116,6 +116,72 @@
 	}
 }
 
+
+.rc-input-file {
+	position: relative;
+
+	width: 100%;
+
+	&__label {
+		cursor: pointer;
+	}
+
+	&__title {
+		font-size: var(--input-font-size);
+	}
+
+
+	&__wrapper {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: flex-end;
+
+		width: 100%;
+		padding: 0.3rem;
+		margin: .5rem 0;
+
+		color: var(--input-text-color);
+
+		border-width: var(--input-border-width);
+		border-color: var(--input-border-color);
+		border-radius: var(--input-border-radius);
+		background-color: transparent;
+
+		font-size: var(--input-font-size);
+
+		&::placeholder {
+			color: var(--input-placeholder-color);
+		}
+
+		& > .rc-button {
+			height: 10px;
+			flex: 0 0 auto;
+			min-height: 31px;
+			border-color: #E1E5E8;
+			background: #F1F1F1;
+			border-radius: 2px;
+			margin: 0;
+			padding: 8px;
+		}
+	}
+
+	&__name {
+		white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 0 1 auto;
+    padding: 0 5px;
+		width: 100%;
+		line-height: 16px;
+	}
+
+	&__element {
+		display: none;
+	}
+
+}
+
 select.rc-input {
 	padding: 0.782rem;
 	margin: 0.5rem 0;
diff --git a/packages/rocketchat-theme/client/imports/general/apps.css b/packages/rocketchat-theme/client/imports/general/apps.css
new file mode 100644
index 0000000000000..6e8241884933f
--- /dev/null
+++ b/packages/rocketchat-theme/client/imports/general/apps.css
@@ -0,0 +1,91 @@
+.rc-apps {
+	&-settings {
+		padding: 25px;
+		flex-direction: column;
+
+		&__item {
+			padding: 10px 0;
+			    width: 100%;
+		}
+	}
+
+	&-container {
+		max-width: 705px;
+		margin: auto;
+    width: 100%;
+		display: flex;
+		padding-bottom: 25px;
+	}
+
+	&-details {
+		display: flex;
+		padding: 25px;
+		border-bottom: 1px solid #E1E1E1;
+
+		&__photo {
+			width: 141px;
+			height: 141px;
+			flex: 0 0 auto;
+			background-size: contain;
+	    background-repeat: no-repeat;
+	    background-position: center center;
+			border: 1px solid #f7f7f7;
+		}
+
+		&__content {
+			flex: 1 1 auto;
+	    justify-content: space-between;
+	    padding: 0 28px;
+	    display: flex;
+	    flex-direction: column;
+	    overflow: hidden;
+		}
+
+		&__row {
+			display: flex;
+			align-items: flex-end;
+		}
+
+		&__row + &__row {
+			padding-top: 15px
+		}
+
+		&__name {
+			font-size: 24px;
+			font-weight: bold;
+		}
+
+		&__version {
+			font-size: 17px;
+			padding: 0 14px;
+		}
+
+		&__item {
+			white-space: nowrap;
+	    flex: 1 1 1px;
+	    overflow: hidden;
+	    text-overflow: ellipsis;
+		}
+
+	}
+}
+
+@media (width <= 500px) {
+	.rc-apps {
+		&-container {
+			flex-direction: column;
+			align-items: center;
+		}
+		&-details {
+
+			&__item {
+				text-align: center;
+			}
+
+			&__row {
+		    justify-content: center;
+			}
+		}
+
+	}
+}
diff --git a/packages/rocketchat-theme/client/imports/general/base_old.css b/packages/rocketchat-theme/client/imports/general/base_old.css
index 4f9a6eddd63ec..638e7da8c6fb7 100644
--- a/packages/rocketchat-theme/client/imports/general/base_old.css
+++ b/packages/rocketchat-theme/client/imports/general/base_old.css
@@ -2241,6 +2241,7 @@
 	position: relative;
 	z-index: 1;
 	flex-grow: 1;
+	overflow: auto;
 }
 
 .rc-old .room-container {
diff --git a/packages/rocketchat-theme/client/imports/general/forms.css b/packages/rocketchat-theme/client/imports/general/forms.css
index 6e81e21c9a607..a95a4d60b0863 100644
--- a/packages/rocketchat-theme/client/imports/general/forms.css
+++ b/packages/rocketchat-theme/client/imports/general/forms.css
@@ -189,6 +189,15 @@
 	font-weight: 500;
 }
 
+.rc-button-group {
+	display: flex;
+	margin: 0 calc(-var(--default-small-padding) / 2);
+
+	& .rc-button {
+		margin: 0 calc(var(--default-small-padding) / 2);
+	}
+}
+
 .rc-grid {
 	display: flex;
 	align-items: flex-start;
diff --git a/packages/rocketchat-theme/client/main.css b/packages/rocketchat-theme/client/main.css
index 95577ddd1e4ba..7217194f40ce5 100644
--- a/packages/rocketchat-theme/client/main.css
+++ b/packages/rocketchat-theme/client/main.css
@@ -4,6 +4,7 @@
 @import 'imports/general/base_old.css';
 @import 'imports/general/base.css';
 @import 'imports/general/animations.css';
+@import 'imports/general/apps.css';
 
 /* Forms */
 @import 'imports/general/forms.css';
@@ -44,6 +45,9 @@
 @import 'imports/components/table.css';
 @import 'imports/components/file-list.css';
 
+
+
+
 /* Modal */
 @import 'imports/components/modal/full-modal.css';
 @import 'imports/components/modal/create-channel.css';
diff --git a/packages/rocketchat-ui-master/public/icons.svg b/packages/rocketchat-ui-master/public/icons.svg
index 4fc045f1768f5..432d6d6d4bee1 100644
--- a/packages/rocketchat-ui-master/public/icons.svg
+++ b/packages/rocketchat-ui-master/public/icons.svg
@@ -99,4 +99,5 @@
     <symbol viewBox="0 0 512 512" id="icon-clock"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm216 248c0 118.7-96.1 216-216 216-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216zm-148.9 88.3l-81.2-59c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h14c6.6 0 12 5.4 12 12v146.3l70.5 51.3c5.4 3.9 6.5 11.4 2.6 16.8l-8.2 11.3c-3.9 5.3-11.4 6.5-16.8 2.6z"/></symbol>
     <symbol viewBox="0 0 512 512" id="icon-sort-amount-down"><path d="M204.485 392l-84 84.485c-4.686 4.686-12.284 4.686-16.971 0l-84-84.485c-4.686-4.686-4.686-12.284 0-16.97l7.07-7.071c4.686-4.686 12.284-4.686 16.971 0L95 419.887V44c0-6.627 5.373-12 12-12h10c6.627 0 12 5.373 12 12v375.887l51.444-51.928c4.686-4.686 12.284-4.686 16.971 0l7.07 7.071c4.687 4.686 4.687 12.284 0 16.97zM384 308v-8c0-6.627-5.373-12-12-12H268c-6.627 0-12 5.373-12 12v8c0 6.627 5.373 12 12 12h104c6.627 0 12-5.373 12-12zm64-96v-8c0-6.627-5.373-12-12-12H268c-6.627 0-12 5.373-12 12v8c0 6.627 5.373 12 12 12h168c6.627 0 12-5.373 12-12zm64-96v-8c0-6.627-5.373-12-12-12H268c-6.627 0-12 5.373-12 12v8c0 6.627 5.373 12 12 12h232c6.627 0 12-5.373 12-12zM320 404v-8c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v8c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12z"/></symbol>
     <symbol viewBox="0 0 576 512" id="icon-edit-rounded"><path d="M417.8 315.5l20-20c3.8-3.8 10.2-1.1 10.2 4.2V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h292.3c5.3 0 8 6.5 4.2 10.2l-20 20c-1.1 1.1-2.7 1.8-4.2 1.8H48c-8.8 0-16 7.2-16 16v352c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16V319.7c0-1.6.6-3.1 1.8-4.2zm145.9-191.2L251.2 436.8l-99.9 11.1c-13.4 1.5-24.7-9.8-23.2-23.2l11.1-99.9L451.7 12.3c16.4-16.4 43-16.4 59.4 0l52.6 52.6c16.4 16.4 16.4 43 0 59.4zm-93.6 48.4L403.4 106 169.8 339.5l-8.3 75.1 75.1-8.3 233.5-233.6zm71-85.2l-52.6-52.6c-3.8-3.8-10.2-4-14.1 0L426 83.3l66.7 66.7 48.4-48.4c3.9-3.8 3.9-10.2 0-14.1z"/></symbol>
+    <symbol id="icon-cube" viewBox="0 0 512 512"><path d="M239.1 6.3l-208 78c-18.7 7-31.1 25-31.1 45v225.1c0 18.2 10.3 34.8 26.5 42.9l208 104c13.5 6.8 29.4 6.8 42.9 0l208-104c16.3-8.1 26.5-24.8 26.5-42.9V129.3c0-20-12.4-37.9-31.1-44.9l-208-78C262 2.2 250 2.2 239.1 6.3zM256 34.2l224 84v.3l-224 97.1-224-97.1v-.3l224-84zM32 153.4l208 90.1v224.7l-208-104V153.4zm240 314.8V243.5l208-90.1v210.9L272 468.2z"/></symbol>
 </svg>
diff --git a/packages/rocketchat-ui/client/components/header/header.html b/packages/rocketchat-ui/client/components/header/header.html
index 8458011ee5012..1679dbef87d90 100644
--- a/packages/rocketchat-ui/client/components/header/header.html
+++ b/packages/rocketchat-ui/client/components/header/header.html
@@ -1,5 +1,5 @@
 <template name="header">
-	<header class="rc-header">
+	<header class="rc-header{{#if fixedHeight}} rc-header--height-fixed{{/if}}" >
 		<div class="rc-header__block rc-header--burger">
 			{{> burger}}
 		</div>
diff --git a/packages/rocketchat-ui/client/components/header/header.js b/packages/rocketchat-ui/client/components/header/header.js
index 8f3a42d6dbd64..3dd548f8ccd70 100644
--- a/packages/rocketchat-ui/client/components/header/header.js
+++ b/packages/rocketchat-ui/client/components/header/header.js
@@ -5,6 +5,9 @@ const isSubscribed = _id => ChatSubscription.find({ rid: _id }).count() > 0;
 const favoritesEnabled = () => RocketChat.settings.get('Favorite_Rooms');
 
 Template.header.helpers({
+	back() {
+		return Template.instance().data.back;
+	},
 	avatarBackground() {
 		const roomData = Session.get(`roomData${ this._id }`);
 		if (!roomData) { return ''; }
@@ -87,6 +90,10 @@ Template.header.helpers({
 		if (isSubscribed(this._id) && favoritesEnabled()) { return true; }
 	},
 
+	fixedHeight() {
+		return Template.instance().data.fixedHeight;
+	},
+
 	isChannel() {
 		return Template.instance().currentChannel != null;
 	},
@@ -120,5 +127,5 @@ Template.header.events({
 });
 
 Template.header.onCreated(function() {
-	this.currentChannel = RocketChat.models.Rooms.findOne(this.data._id) || undefined;
+	this.currentChannel = this.data && this.data._id && RocketChat.models.Rooms.findOne(this.data._id) || undefined;
 });