diff --git a/.snapcraft/edge/snapcraft.yaml b/.snapcraft/edge/snapcraft.yaml
index e2b3c055dae..29895e7ca9e 100644
--- a/.snapcraft/edge/snapcraft.yaml
+++ b/.snapcraft/edge/snapcraft.yaml
@@ -23,7 +23,7 @@ apps:
 parts:
     node:
         plugin: nodejs
-        node-engine: 4.7.0
+        node-engine: 4.7.1
         node-packages:
             - promise
             - fibers
diff --git a/.snapcraft/stable/snapcraft.yaml b/.snapcraft/stable/snapcraft.yaml
index ad771974a14..296e52406cb 100644
--- a/.snapcraft/stable/snapcraft.yaml
+++ b/.snapcraft/stable/snapcraft.yaml
@@ -23,7 +23,7 @@ apps:
 parts:
     node:
         plugin: nodejs
-        node-engine: 4.7.0
+        node-engine: 4.7.1
         node-packages:
             - promise
             - fibers
diff --git a/packages/rocketchat-action-links/client/stylesheets/actionLinks.less b/packages/rocketchat-action-links/client/stylesheets/actionLinks.less
index c7f99d81043..4d6eea113a9 100644
--- a/packages/rocketchat-action-links/client/stylesheets/actionLinks.less
+++ b/packages/rocketchat-action-links/client/stylesheets/actionLinks.less
@@ -9,7 +9,6 @@
 			cursor: pointer;
 			position: relative;
 			padding-right: 2px;
-			color: @primary-action-color;
 			list-style: none;
 			display: inline;
 
diff --git a/packages/rocketchat-action-links/loadStylesheets.js b/packages/rocketchat-action-links/loadStylesheets.js
deleted file mode 100644
index e580080b6dc..00000000000
--- a/packages/rocketchat-action-links/loadStylesheets.js
+++ /dev/null
@@ -1,3 +0,0 @@
-RocketChat.theme.addPackageAsset(function() {
-	return Assets.getText('client/stylesheets/actionLinks.less');
-});
diff --git a/packages/rocketchat-action-links/package.js b/packages/rocketchat-action-links/package.js
index 3039842b48b..d8f12c9c181 100644
--- a/packages/rocketchat-action-links/package.js
+++ b/packages/rocketchat-action-links/package.js
@@ -11,10 +11,10 @@ Package.onUse(function(api) {
 	api.use('rocketchat:lib');
 	api.use('rocketchat:theme');
 	api.use('rocketchat:ui');
+	api.use('less');
 
 	api.addFiles('client/init.js', 'client');
-	api.addAssets('client/stylesheets/actionLinks.less', 'server');
-	api.addFiles('loadStylesheets.js', 'server');
+	api.addFiles('client/stylesheets/actionLinks.less', 'client');
 
 	api.addFiles('server/registerActionLinkFuncts.js', ['server', 'client']);
 	api.addFiles('server/actionLinkHandler.js', ['server', 'client']);
diff --git a/packages/rocketchat-authorization/client/stylesheets/load.coffee b/packages/rocketchat-authorization/client/stylesheets/load.coffee
deleted file mode 100644
index 1e284cb4903..00000000000
--- a/packages/rocketchat-authorization/client/stylesheets/load.coffee
+++ /dev/null
@@ -1 +0,0 @@
-RocketChat.theme.addPackageAsset -> Assets.getText 'client/stylesheets/permissions.less'
diff --git a/packages/rocketchat-authorization/client/stylesheets/permissions.less b/packages/rocketchat-authorization/client/stylesheets/permissions.less
index 34fb75429f8..c970dbf8d1f 100644
--- a/packages/rocketchat-authorization/client/stylesheets/permissions.less
+++ b/packages/rocketchat-authorization/client/stylesheets/permissions.less
@@ -4,7 +4,7 @@
 		font-size: 16px;
 		margin-top: 1em !important;
 		margin-bottom: 1em !important;
-		border-bottom: 1px solid @tertiary-background-color;
+		border-bottom-width: 1px;
 	}
 
 	.permission-grid {
diff --git a/packages/rocketchat-authorization/client/views/permissions.html b/packages/rocketchat-authorization/client/views/permissions.html
index e9162bb5897..3d53eb803e4 100644
--- a/packages/rocketchat-authorization/client/views/permissions.html
+++ b/packages/rocketchat-authorization/client/views/permissions.html
@@ -2,12 +2,12 @@
 	<div class="permissions-manager">
 		{{#if hasPermission}}
 			<a href="{{pathFor "admin-permissions-new"}}" class="button primary new-role">{{_ "New_role"}}</a>
-			<table border="1" class="permission-grid">
-				<thead>
+			<table border="1" class="permission-grid secondary-background-color">
+				<thead class="content-background-color">
 					<tr>
-						<th>&nbsp;</th>
+						<th class="border-component-color">&nbsp;</th>
 						{{#each role}}
-							<th title="{{description}}">
+							<th class="border-component-color" title="{{description}}">
 								<a href="{{pathFor "admin-permissions-edit" name=_id}}">
 									{{_id}}
 									<i class="icon-edit"></i>
@@ -18,10 +18,10 @@
 				</thead>
 				<tbody>
 					{{#each permission}}
-						<tr>
-							<td>{{_id}}</td>
+						<tr class="admin-table-row">
+							<td class="border-component-color">{{_id}}</td>
 							{{#each role}}
-								<td>
+								<td class="border-component-color">
 									<input type="checkbox" name="perm[{{_id}}][{{../_id}}]" class="role-permission" value="1" checked="{{granted ../roles}}" data-role="{{_id}}" data-permission="{{../_id}}">
 								</td>
 							{{/each}}
diff --git a/packages/rocketchat-authorization/client/views/permissionsRole.html b/packages/rocketchat-authorization/client/views/permissionsRole.html
index dd602f87941..4aaa9f69243 100644
--- a/packages/rocketchat-authorization/client/views/permissionsRole.html
+++ b/packages/rocketchat-authorization/client/views/permissionsRole.html
@@ -30,7 +30,7 @@
 				</form>
 			{{/with}}
 			{{#if editing}}
-				<h2>{{_ "Users_in_role"}}</h2>
+				<h2 class="border-tertiary-background-color">{{_ "Users_in_role"}}</h2>
 				{{#if $eq role.scope 'Subscriptions'}}
 					<form id="form-search-room" class="inline">
 						<label>{{_ "Choose_a_room"}}</label>
diff --git a/packages/rocketchat-authorization/package.js b/packages/rocketchat-authorization/package.js
index 48c129ed27e..6838b9aeed6 100644
--- a/packages/rocketchat-authorization/package.js
+++ b/packages/rocketchat-authorization/package.js
@@ -11,7 +11,8 @@ Package.onUse(function(api) {
 		'ecmascript',
 		'coffeescript',
 		'underscore',
-		'rocketchat:lib'
+		'rocketchat:lib',
+		'less'
 	]);
 
 	api.use('mongo', ['client', 'server']);
@@ -42,8 +43,7 @@ Package.onUse(function(api) {
 	api.addFiles('client/views/permissionsRole.coffee', ['client']);
 
 	// stylesheets
-	api.addAssets('client/stylesheets/permissions.less', 'server');
-	api.addFiles('client/stylesheets/load.coffee', 'server');
+	api.addFiles('client/stylesheets/permissions.less', 'client');
 
 	api.addFiles('server/models/Permissions.coffee', ['server']);
 	api.addFiles('server/models/Roles.coffee', ['server']);
diff --git a/packages/rocketchat-channel-settings-mail-messages/client/views/mailMessagesInstructions.html b/packages/rocketchat-channel-settings-mail-messages/client/views/mailMessagesInstructions.html
index f6cf39d656d..50c148705a4 100644
--- a/packages/rocketchat-channel-settings-mail-messages/client/views/mailMessagesInstructions.html
+++ b/packages/rocketchat-channel-settings-mail-messages/client/views/mailMessagesInstructions.html
@@ -37,13 +37,13 @@
 					</div>
 				</fieldset>
 			</form>
-			<div class="error error-missing-to alert alert-danger" style="display: none">
+			<div class="error error-missing-to alert error-color error-background error-border" style="display: none">
 				{{_ "Mail_Message_Missing_to"}}
 			</div>
-			<div class="error error-invalid-emails alert alert-danger" style="display: none">
+			<div class="error error-invalid-emails alert error-color error-background error-border" style="display: none">
 				{{_ "Mail_Message_Invalid_emails" erroredEmails}}
 			</div>
-			<div class="error error-select alert alert-danger" style="display: none">
+			<div class="error error-select alert error-color error-background error-border" style="display: none">
 				{{{_ "Mail_Message_No_messages_selected_select_all"}}}
 			</div>
 			<p style="margin-top: 30px">
diff --git a/packages/rocketchat-channel-settings/client/stylesheets/channel-settings.less b/packages/rocketchat-channel-settings/client/stylesheets/channel-settings.less
index f5385f0bb5e..5bfe3351fd9 100644
--- a/packages/rocketchat-channel-settings/client/stylesheets/channel-settings.less
+++ b/packages/rocketchat-channel-settings/client/stylesheets/channel-settings.less
@@ -3,15 +3,6 @@
 		ul {
 			li {
 				margin-bottom: 20px;
-
-				> div {
-					position: relative;
-					font-size: 0;
-
-					label {
-						font-weight: 300;
-					}
-				}
 			}
 		}
 
@@ -49,7 +40,6 @@
 			bottom: 0;
 			right: 10px;
 			border-radius: 0 4px 4px 0;
-			background: black;
 
 			.button {
 				padding: 8px;
@@ -87,6 +77,9 @@
 		}
 
 		.setting-block {
+			position: relative;
+			font-size: 0;
+
 			.loading-animation {
 				top: 30px;
 			}
diff --git a/packages/rocketchat-channel-settings/client/views/channelSettings.html b/packages/rocketchat-channel-settings/client/views/channelSettings.html
index 911b167f2a8..562590be0c7 100644
--- a/packages/rocketchat-channel-settings/client/views/channelSettings.html
+++ b/packages/rocketchat-channel-settings/client/views/channelSettings.html
@@ -17,7 +17,7 @@
 											{{#if $eq $value.type 'text'}}
 												{{#if editing $key}}
 													{{#if $value.canEdit room}}
-														<input type="text" name="{{$key}}" value="{{value}}" class="editing" />
+														<input type="text" name="{{$key}}" value="{{value}}" class="content-background-color editing" />
 													{{/if}}
 												{{else}}
 													<span class='current-setting' data-edit="{{#if $value.canEdit room}}{{$key}}{{else}}false{{/if}}">{{value}}</span>
@@ -27,7 +27,7 @@
 											{{#if $eq $value.type 'markdown'}}
 												{{#if editing $key}}
 													{{#if $value.canEdit room}}
-														<input type="text" name="{{$key}}" value="{{unscape value}}" class="editing" />
+														<input type="text" name="{{$key}}" value="{{unscape value}}" class="content-background-color editing" />
 													{{/if}}
 												{{else}}
 													<span class='current-setting' data-edit="{{#if $value.canEdit room}}{{$key}}{{else}}false{{/if}}">{{{RocketChatMarkdown value}}}</span>
@@ -58,12 +58,12 @@
 											{{#unless $value.isToggle}}
 												{{#if $value.canEdit room}}
 													{{#if editing $key}}
-														<div class="buttons">
+														<div class="buttons secondary-background-color">
 															<button type="button" class="button cancel">
 																<i class="icon-cancel"></i>
 															</button>
 															<button type="button" class="button primary save">
-																<i class="icon-ok"></i>
+																<i class="icon-ok success-color"></i>
 															</button>
 														</div>
 													{{else}}
diff --git a/packages/rocketchat-chatops/client/views/codemirror.html b/packages/rocketchat-chatops/client/views/codemirror.html
index e185ab09607..6333d841680 100644
--- a/packages/rocketchat-chatops/client/views/codemirror.html
+++ b/packages/rocketchat-chatops/client/views/codemirror.html
@@ -4,7 +4,7 @@
 		<form class="search-form" role="form">
 			<div class="input-line search">
 				<input type="text" id="room-search" class="search" placeholder="{{tQuickSearch}}" autocomplete="off" />
-				<i class="icon-search"></i>
+				<i class="icon-search secondary-font-color"></i>
 			</div>
 		</form>
 	</div>
diff --git a/packages/rocketchat-emoji-custom/admin/adminEmoji.html b/packages/rocketchat-emoji-custom/admin/adminEmoji.html
index 1af79f80f47..32c7844b6ba 100644
--- a/packages/rocketchat-emoji-custom/admin/adminEmoji.html
+++ b/packages/rocketchat-emoji-custom/admin/adminEmoji.html
@@ -1,6 +1,6 @@
 <template name="adminEmoji">
 	<section class="page-container page-list">
-		<header class="fixed-title">
+		<header class="fixed-title border-component-color">
 			{{> burger}}
 			<h2>
 				<span class="room-title">{{_ "Custom_Emoji"}}</span>
@@ -13,7 +13,7 @@
 				<form class="search-form" role="form">
 					<div class="input-line search">
 						<input type="text" id="emoji-filter" placeholder="{{_ "Search"}}" dir="auto">
-						<i class="icon-search"></i>
+						<i class="icon-search secondary-font-color"></i>
 						{{#unless isReady}}<i class="icon-spin"></i>{{/unless}}
 					</div>
 				</form>
@@ -21,24 +21,24 @@
 					{{{_ "Showing_results" customemoji.length}}}
 				</div>
 				<div class="list">
-					<table>
+					<table class="secondary-background-color">
 						<thead>
-							<tr>
-								<th>&nbsp;</th>
-								<th width="51%">{{_ "Name"}}</th>
-								<th width="49%">{{_ "Aliases"}}</th>
+							<tr class="admin-table-row">
+								<th class="content-background-color border-component-color">&nbsp;</th>
+								<th class="content-background-color border-component-color" width="51%">{{_ "Name"}}</th>
+								<th class="content-background-color border-component-color" width="49%">{{_ "Aliases"}}</th>
 							</tr>
 						</thead>
 						<tbody>
 							{{#each customemoji}}
-							<tr class="emoji-info row-link">
-								<td>
+							<tr class="emoji-info row-link admin-table-row">
+								<td class="border-component-color">
 									<div class="emojiAdminPreview-image">
 										{{> emojiPreview name=name extension=extension}}
 									</div>
 								</td>
-								<td>{{name}}</td>
-								<td>{{aliases}}</td>
+								<td class="border-component-color">{{name}}</td>
+								<td class="border-component-color">{{aliases}}</td>
 							</tr>
 							{{/each}}
 						</tbody>
@@ -50,7 +50,7 @@
 			{{/unless}}
 		</div>
 	</section>
-	<section class="flex-tab">
+	<section class="flex-tab secondary-background-color">
 		{{> Template.dynamic template=flexTemplate data=flexData}}
 	</section>
 </template>
diff --git a/packages/rocketchat-emoji-custom/admin/emojiEdit.html b/packages/rocketchat-emoji-custom/admin/emojiEdit.html
index b16d900d023..76b938cdf5b 100644
--- a/packages/rocketchat-emoji-custom/admin/emojiEdit.html
+++ b/packages/rocketchat-emoji-custom/admin/emojiEdit.html
@@ -11,11 +11,11 @@
 				{{/if}}
 				<div class="input-line">
 					<label for="name">{{_ "Name"}}</label>
-					<input type="text" id="name" autocomplete="off" value="{{emoji.name}}">
+					<input type="text" id="name" autocomplete="off" value="{{emoji.name}}" class="content-background-color">
 				</div>
 				<div class="input-line">
 					<label for="aliases">{{_ "Aliases"}}</label>
-					<input type="text" id="aliases" autocomplete="off" value="{{emoji.aliases}}">
+					<input type="text" id="aliases" autocomplete="off" value="{{emoji.aliases}}"  class="content-background-color">
 				</div>
 				<div class="input-line">
 					<label for="image">{{_ "Image"}}</label>
diff --git a/packages/rocketchat-emoji/emojiPicker.html b/packages/rocketchat-emoji/emojiPicker.html
index 8f4c4395660..8ac2e5e66b2 100644
--- a/packages/rocketchat-emoji/emojiPicker.html
+++ b/packages/rocketchat-emoji/emojiPicker.html
@@ -2,8 +2,8 @@
 	<div class="emoji-picker secondary-background-color">
 		<div class="emoji-top">
 			<form class="emoji-filter input-line search search-form">
-				<input type="text" class="search" autocomplete="off">
-				<i class="icon-search"></i>
+				<input type="text" class="search content-background-color" autocomplete="off">
+				<i class="icon-search secondary-font-color"></i>
 			</form>
 			<div class="change-tone">
 				<a href="#change-tone"><span class="current-tone {{currentTone}}"></span></a>
@@ -20,8 +20,8 @@
 		<div class="filter">
 			<ul class="filter-list">
 				{{#each category}}
-					<li class="filter-item {{activeCategory .}}" title="{{categoryName .}}">
-						<a href="#{{.}}" class="category-link info-font-color"><i class="category-icon icon-{{.}}"></i></a>
+					<li class="filter-item border-secondary-background-color {{activeCategory .}}" title="{{categoryName .}}">
+						<a href="#{{.}}" class="category-link color-info-font-color"><i class="category-icon icon-{{.}}"></i></a>
 					</li>
 				{{/each}}
 			</ul>
diff --git a/packages/rocketchat-emoji/emojiPicker.less b/packages/rocketchat-emoji/emojiPicker.less
index e175b3f092a..d4a06e93888 100644
--- a/packages/rocketchat-emoji/emojiPicker.less
+++ b/packages/rocketchat-emoji/emojiPicker.less
@@ -5,7 +5,7 @@
 	font-size: 18px;
 
 	&::before {
-		.transition(transform 0.2s ease);
+		transition: transform 0.2s ease;
 	}
 
 	&:hover {
@@ -24,7 +24,7 @@
 		0 2px 10px 0 rgba(0, 0, 0, 0.16);
 	position: absolute;
 	z-index: 200;
-	.transition(transform 0.2s ease, visibility 0.2s ease, opacity 0.2s ease);
+	transition: transform 0.2s ease, visibility 0.2s ease, opacity 0.2s ease;
 	.transform(translateY(30px));
 	opacity: 0;
 	visibility: hidden;
@@ -77,7 +77,7 @@
 				padding: 4px 2px 2px;
 				border-radius: 4px;
 				cursor: pointer;
-				.transition(transform 0.2s ease);
+				transition: transform 0.2s ease;
 
 				&:hover {
 					.transform(scale(1.2));
@@ -129,7 +129,7 @@
 			padding: 4px 2px;
 			top: 25px;
 			z-index: 1;
-			.transition(transform 0.2s ease, visibility 0.2s ease, opacity 0.2s ease);
+			transition: transform 0.2s ease, visibility 0.2s ease, opacity 0.2s ease;
 			.transform(translateY(-20px));
 			opacity: 0;
 			visibility: hidden;
@@ -151,7 +151,7 @@
 				width: 20px;
 				height: 20px;
 				border-radius: 10px;
-				.transition(transform 0.2s ease);
+				transition: transform 0.2s ease;
 			}
 		}
 
diff --git a/packages/rocketchat-emoji/lesshat.less b/packages/rocketchat-emoji/lesshat.less
index db6b6fe9493..7c9f0ae86a2 100644
--- a/packages/rocketchat-emoji/lesshat.less
+++ b/packages/rocketchat-emoji/lesshat.less
@@ -15,14 +15,3 @@
 	-o-transform: @process;
 	transform: @process;
 }
-
-.transition(...) {
-	@process_webkit: ~`(function(r){r=r||"all 0 ease 0";var e=["background-size","border-radius","border-bottom-left-radius","border-bottom-right-radius","border-top-left-radius","border-top-right-radius","box-shadow","column","transform","filter"],t="-webkit-",o=/(?:\d)(?:ms|s)/gi,a=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%)/gi;return/^[^, ]*,/.test(r)&&(r=r.replace(/(?:,)(?![^(]*\))/g,"")),e.forEach(function(e,o){r.indexOf(e)!==-1&&(r=r.replace(new RegExp(e,"g"),function(r){return t+r}))}),o.test(r)||"0"===r||(r=r.replace(a,function(r){return r+=parseFloat(r,10)>10?"ms":"s"})),r})((function(){var r="@{arguments}";return r=r.replace(/^\[|\]$/g,"")})())`;
-	@process_moz: ~`(function(e){e=e||"all 0 ease 0";var n=["background-size","box-shadow","column","transform","filter"],r="-moz-",t=/(?:\d)(?:ms|s)/gi,a=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%)/gi;return/^[^, ]*,/.test(e)&&(e=e.replace(/(?:,)(?![^(]*\))/g,"")),n.forEach(function(n,t){e.indexOf(n)!==-1&&(e=e.replace(new RegExp(n,"g"),function(e){return r+e}))}),t.test(e)||"0"===e||(e=e.replace(a,function(e){return e+=parseFloat(e,10)>10?"ms":"s"})),e})((function(){var r="@{arguments}";return r=r.replace(/^\[|\]$/g,"")})())`;
-	@process_opera: ~`(function(e){e=e||"all 0 ease 0";var n=["transform"],r="-o-",t=/(?:\d)(?:ms|s)/gi,a=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%)/gi;return/^[^, ]*,/.test(e)&&(e=e.replace(/(?:,)(?![^(]*\))/g,"")),n.forEach(function(n,t){e.indexOf(n)!==-1&&(e=e.replace(new RegExp(n,"g"),function(e){return r+e}))}),t.test(e)||"0"===e||(e=e.replace(a,function(e){return e+=parseFloat(e,10)>10?"ms":"s"})),e})((function(){var r="@{arguments}";return r=r.replace(/^\[|\]$/g,"")})())`;
-	@process: ~`(function(n){n=n||"all 0 ease 0";var e=["-webkit-","-moz-","-o-",""],t=["column","transform","filter"],r=/(?:\d)(?:ms|s)/gi,o=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%)/gi;/^[^, ]*,/.test(n)&&(n=n.replace(/(?:,)(?![^(]*\))/g,""));var i=n.split(/(?:,)(?![^(]*\))/g);return i.forEach(function(n,r){t.forEach(function(t){n.indexOf(t)!==-1&&(i[r]="",e.forEach(function(o,a){i[r]+=n.trim().replace(new RegExp(t,"g"),function(n){return o+n}),a<e.length-1&&(i[r]+=",")}))})}),n=i.join(","),r.test(n)||"0"===n||(n=n.replace(o,function(n){return n+=parseFloat(n,10)>10?"ms":"s"})),n})((function(){var r="@{arguments}";return r=r.replace(/^\[|\]$/g,"")})())`;
-	-webkit-transition: @process_webkit;
-	-moz-transition: @process_moz;
-	-o-transition: @process_opera;
-	transition: @process;
-}
diff --git a/packages/rocketchat-importer/client/admin/adminImport.html b/packages/rocketchat-importer/client/admin/adminImport.html
index 03a7a274faa..3e22cbcbc29 100644
--- a/packages/rocketchat-importer/client/admin/adminImport.html
+++ b/packages/rocketchat-importer/client/admin/adminImport.html
@@ -1,6 +1,6 @@
 <template name="adminImport">
 	<section class="page-container page-home page-static page-settings">
-		<header class="fixed-title">
+		<header class="fixed-title border-component-color">
 			{{> burger}}
 			<h2>
 				<span class="room-title">Import</span>
diff --git a/packages/rocketchat-importer/client/admin/adminImportPrepare.html b/packages/rocketchat-importer/client/admin/adminImportPrepare.html
index 99dee60fc49..cac461eb89e 100644
--- a/packages/rocketchat-importer/client/admin/adminImportPrepare.html
+++ b/packages/rocketchat-importer/client/admin/adminImportPrepare.html
@@ -1,7 +1,7 @@
 <template name="adminImportPrepare">
 	<section class="page-container page-home page-static page-settings">
 		{{#with importer}}
-			<header class="fixed-title">
+			<header class="fixed-title border-component-color">
 				{{> burger}}
 				<h2>
 					<span class="room-title">{{name}}</span>
diff --git a/packages/rocketchat-integrations/client/stylesheets/load.coffee b/packages/rocketchat-integrations/client/stylesheets/load.coffee
deleted file mode 100644
index 88d4bb35ad1..00000000000
--- a/packages/rocketchat-integrations/client/stylesheets/load.coffee
+++ /dev/null
@@ -1,2 +0,0 @@
-RocketChat.theme.addPackageAsset ->
-	return Assets.getText 'client/stylesheets/integrations.less'
diff --git a/packages/rocketchat-integrations/client/views/integrationsIncoming.coffee b/packages/rocketchat-integrations/client/views/integrationsIncoming.coffee
index 68f912fc07e..06655c65187 100644
--- a/packages/rocketchat-integrations/client/views/integrationsIncoming.coffee
+++ b/packages/rocketchat-integrations/client/views/integrationsIncoming.coffee
@@ -154,12 +154,12 @@ Template.integrationsIncoming.events
 
 	"click .button-fullscreen": ->
 		codeMirrorBox = $('.code-mirror-box')
-		codeMirrorBox.addClass('code-mirror-box-fullscreen')
+		codeMirrorBox.addClass('code-mirror-box-fullscreen content-background-color')
 		codeMirrorBox.find('.CodeMirror')[0].CodeMirror.refresh()
 
 	"click .button-restore": ->
 		codeMirrorBox = $('.code-mirror-box')
-		codeMirrorBox.removeClass('code-mirror-box-fullscreen')
+		codeMirrorBox.removeClass('code-mirror-box-fullscreen content-background-color')
 		codeMirrorBox.find('.CodeMirror')[0].CodeMirror.refresh()
 
 	"click .submit > .save": ->
diff --git a/packages/rocketchat-integrations/client/views/integrationsIncoming.html b/packages/rocketchat-integrations/client/views/integrationsIncoming.html
index 51f2ec9d52a..68955e653b5 100644
--- a/packages/rocketchat-integrations/client/views/integrationsIncoming.html
+++ b/packages/rocketchat-integrations/client/views/integrationsIncoming.html
@@ -16,15 +16,15 @@
 							<label>{{_ "Name"}} ({{_ "optional"}})</label>
 							<div>
 								<input type="text" name="name" value="{{data.name}}" placeholder="{{_ 'Optional'}}" />
-								<div class="settings-description">{{_ "You_should_name_it_to_easily_manage_your_integrations"}}</div>
+								<div class="settings-description secondary-font-color">{{_ "You_should_name_it_to_easily_manage_your_integrations"}}</div>
 							</div>
 						</div>
 						<div class="input-line double-col">
 							<label>{{_ "Post_to_Channel"}}</label>
 							<div>
 								<input type="text" name="channel" value="{{data.channel}}" placeholder="{{_ 'User_or_channel_name'}}" />
-								<div class="settings-description">{{_ "Messages_that_are_sent_to_the_Incoming_WebHook_will_be_posted_here"}}</div>
-								<div class="settings-description">{{{_ "Start_with_s_for_user_or_s_for_channel_Eg_s_or_s" "@" "#" "@john" "#general"}}}</div>
+								<div class="settings-description secondary-font-color">{{_ "Messages_that_are_sent_to_the_Incoming_WebHook_will_be_posted_here"}}</div>
+								<div class="settings-description secondary-font-color">{{{_ "Start_with_s_for_user_or_s_for_channel_Eg_s_or_s" "@" "#" "@john" "#general"}}}</div>
 							</div>
 						</div>
 						<div class="input-line double-col">
@@ -35,31 +35,31 @@
 								{{else}}
 									<input type="text" name="username" value="{{data.username}}" />
 								{{/if}}
-								<div class="settings-description">{{_ "Choose_the_username_that_this_integration_will_post_as"}}</div>
-								<div class="settings-description">{{_ "Should_exists_a_user_with_this_username"}}</div>
+								<div class="settings-description secondary-font-color">{{_ "Choose_the_username_that_this_integration_will_post_as"}}</div>
+								<div class="settings-description secondary-font-color">{{_ "Should_exists_a_user_with_this_username"}}</div>
 							</div>
 						</div>
 						<div class="input-line double-col">
 							<label>{{_ "Alias"}} ({{_ "optional"}})</label>
 							<div>
 								<input type="text" name="alias" value="{{data.alias}}" placeholder="{{_ 'Optional'}}" />
-								<div class="settings-description">{{_ "Choose_the_alias_that_will_appear_before_the_username_in_messages"}}</div>
+								<div class="settings-description secondary-font-color">{{_ "Choose_the_alias_that_will_appear_before_the_username_in_messages"}}</div>
 							</div>
 						</div>
 						<div class="input-line double-col">
 							<label>{{_ "Avatar_URL"}} ({{_ "optional"}})</label>
 							<div>
 								<input type="url" name="avatar" value="{{data.avatar}}" placeholder="{{_ 'Optional'}}" />
-								<div class="settings-description">{{_ "You_can_change_a_different_avatar_too"}}</div>
-								<div class="settings-description">{{_ "Should_be_a_URL_of_an_image"}}</div>
+								<div class="settings-description secondary-font-color">{{_ "You_can_change_a_different_avatar_too"}}</div>
+								<div class="settings-description secondary-font-color">{{_ "Should_be_a_URL_of_an_image"}}</div>
 							</div>
 						</div>
 						<div class="input-line double-col">
 							<label>{{_ "Emoji"}} ({{_ "optional"}})</label>
 							<div>
 								<input type="text" name="emoji" value="{{data.emoji}}" placeholder="{{_ 'Optional'}}" />
-								<div class="settings-description">{{_ "You_can_use_an_emoji_as_avatar"}}</div>
-								<div class="settings-description">{{{_ "Example_s" ":ghost:"}}}</div>
+								<div class="settings-description secondary-font-color">{{_ "You_can_use_an_emoji_as_avatar"}}</div>
+								<div class="settings-description secondary-font-color">{{{_ "Example_s" ":ghost:"}}}</div>
 							</div>
 						</div>
 						<div class="input-line double-col">
@@ -84,10 +84,10 @@
 								</div>
 								{{#if data.scriptError}}
 									<div class="code-error-box">
-										<div class="title">
+										<div class="title color-content-background-color background-error-color">
 											{{data.scriptError.name}}
 										</div>
-										<pre>{{data.scriptError.message}}</pre>
+										<pre class="script-error background-transparent-lightest error-color error-border">{{data.scriptError.message}}</pre>
 									</div>
 								{{/if}}
 							</div>
@@ -97,25 +97,25 @@
 								<label>Webhook URL</label>
 								<div>
 									<input type="text" name="webhookurl" value="{{data.url}}" readonly="readonly" />
-									<div class="settings-description">{{_ "Send_your_JSON_payloads_to_this_URL"}}</div>
-									<div class="settings-description"><button class="clipboard" data-clipboard-target="[name=webhookurl]">{{_ "COPY_TO_CLIPBOARD"}}</button></div>
+									<div class="settings-description secondary-font-color">{{_ "Send_your_JSON_payloads_to_this_URL"}}</div>
+									<div class="settings-description secondary-font-color"><button class="clipboard" data-clipboard-target="[name=webhookurl]">{{_ "COPY_TO_CLIPBOARD"}}</button></div>
 								</div>
 							</div>
 							<div class="input-line double-col">
 								<label>Token</label>
 								<div>
 									<input type="text" name="completeToken" value="{{data.completeToken}}" readonly="readonly" />
-									<div class="settings-description"><button class="clipboard" data-clipboard-target="[name=completeToken]">{{_ "COPY_TO_CLIPBOARD"}}</button></div>
+									<div class="settings-description secondary-font-color"><button class="clipboard" data-clipboard-target="[name=completeToken]">{{_ "COPY_TO_CLIPBOARD"}}</button></div>
 								</div>
 							</div>
 						{{/if}}
 						<div class="input-line double-col">
 							<label>{{_ "Example"}}</label>
 							<div>
-								<pre><code class="hljs json json-example">{{{exampleJson}}}</code></pre>
+								<pre><code class="code-colors hljs json json-example">{{{exampleJson}}}</code></pre>
 								{{#if curl}}
 									<input type="text" name="curl" value="{{curl}}" readonly="readonly" />
-									<div class="settings-description"><button class="clipboard" data-clipboard-target="[name=curl]">{{_ "COPY_TO_CLIPBOARD"}}</button></div>
+									<div class="settings-description secondary-font-color"><button class="clipboard" data-clipboard-target="[name=curl]">{{_ "COPY_TO_CLIPBOARD"}}</button></div>
 								{{/if}}
 							</div>
 						</div>
diff --git a/packages/rocketchat-integrations/client/views/integrationsOutgoing.coffee b/packages/rocketchat-integrations/client/views/integrationsOutgoing.coffee
index 7b78f0cc0e7..bb13783bfef 100644
--- a/packages/rocketchat-integrations/client/views/integrationsOutgoing.coffee
+++ b/packages/rocketchat-integrations/client/views/integrationsOutgoing.coffee
@@ -136,11 +136,11 @@ Template.integrationsOutgoing.events
 					FlowRouter.go "admin-integrations"
 
 	"click .button-fullscreen": ->
-		$('.code-mirror-box').addClass('code-mirror-box-fullscreen');
+		$('.code-mirror-box').addClass('code-mirror-box-fullscreen content-background-color');
 		$('.CodeMirror')[0].CodeMirror.refresh()
 
 	"click .button-restore": ->
-		$('.code-mirror-box').removeClass('code-mirror-box-fullscreen');
+		$('.code-mirror-box').removeClass('code-mirror-box-fullscreen content-background-color');
 		$('.CodeMirror')[0].CodeMirror.refresh()
 
 	"click .submit > .save": ->
diff --git a/packages/rocketchat-integrations/client/views/integrationsOutgoing.html b/packages/rocketchat-integrations/client/views/integrationsOutgoing.html
index ef06ec00ece..ed690600e5e 100644
--- a/packages/rocketchat-integrations/client/views/integrationsOutgoing.html
+++ b/packages/rocketchat-integrations/client/views/integrationsOutgoing.html
@@ -110,10 +110,10 @@
 								</div>
 								{{#if data.scriptError}}
 									<div class="code-error-box">
-										<div class="title">
+										<div class="title color-content-background-color background-error-color">
 											{{data.scriptError.name}}
 										</div>
-										<pre>{{data.scriptError.message}}</pre>
+										<pre class="script-error background-transparent-lightest error-color error-border">{{data.scriptError.message}}</pre>
 									</div>
 								{{/if}}
 							</div>
@@ -122,7 +122,7 @@
 							<label>{{_ "Responding"}}</label>
 							<div>
 								<div class="settings-description">{{{_ "If the handler wishes to post a response back into the channel, the following JSON should be returned as the body of the response:"}}}</div>
-								<pre><code class="hljs json json-example">{{{exampleJson}}}</code></pre>
+								<pre><code class="code-colors hljs json json-example">{{{exampleJson}}}</code></pre>
 								<div class="settings-description">{{{_ "Empty bodies or bodies with an empty text property will simply be ignored. Non-200 responses will be retried a reasonable number of times. A response will be posted using the alias and avatar specified above. You can override these informations as in the example above."}}}</div>
 							</div>
 						</div>
diff --git a/packages/rocketchat-integrations/package.js b/packages/rocketchat-integrations/package.js
index eee59622436..d339476abdc 100644
--- a/packages/rocketchat-integrations/package.js
+++ b/packages/rocketchat-integrations/package.js
@@ -17,6 +17,7 @@ Package.onUse(function(api) {
 	api.use('rocketchat:api');
 	api.use('rocketchat:theme');
 	api.use('rocketchat:logger');
+	api.use('less');
 
 	api.use('kadira:flow-router', 'client');
 	api.use('templating', 'client');
@@ -37,8 +38,7 @@ Package.onUse(function(api) {
 	api.addFiles('client/views/integrationsOutgoing.coffee', 'client');
 
 	// stylesheets
-	api.addAssets('client/stylesheets/integrations.less', 'server');
-	api.addFiles('client/stylesheets/load.coffee', 'server');
+	api.addFiles('client/stylesheets/integrations.less', 'client');
 
 	api.addFiles('server/logger.js', 'server');
 	api.addFiles('server/lib/validation.coffee', 'server');
diff --git a/packages/rocketchat-lib/server/startup/settings.coffee b/packages/rocketchat-lib/server/startup/settings.coffee
index d42659138e8..899c7c7530a 100644
--- a/packages/rocketchat-lib/server/startup/settings.coffee
+++ b/packages/rocketchat-lib/server/startup/settings.coffee
@@ -95,7 +95,7 @@ RocketChat.settings.addGroup 'General', ->
 	@add 'Language', '', { type: 'language', public: true }
 	@add 'Allow_Invalid_SelfSigned_Certs', false, { type: 'boolean' }
 	@add 'Favorite_Rooms', true, { type: 'boolean', public: true }
-	@add 'CDN_PREFIX', '', { type: 'string' }
+	@add 'CDN_PREFIX', '', { type: 'string', public: true }
 	@add 'Force_SSL', false, { type: 'boolean', public: true }
 	@add 'GoogleTagManager_id', '', { type: 'string', public: true }
 	@add 'Bugsnag_api_key', '', { type: 'string', public: false }
diff --git a/packages/rocketchat-livechat/app/client/stylesheets/main.less b/packages/rocketchat-livechat/app/client/stylesheets/main.less
index c289eba2e2f..a92b5a0a4e0 100644
--- a/packages/rocketchat-livechat/app/client/stylesheets/main.less
+++ b/packages/rocketchat-livechat/app/client/stylesheets/main.less
@@ -93,7 +93,7 @@ input:focus {
 		height: 100%;
 		opacity: 0;
 		z-index: 1;
-		.transition(opacity .1s ease-out);
+		transition: opacity 0.1s ease-out;
 	}
 
 	&:hover {
@@ -428,7 +428,7 @@ input:focus {
 
 				.body {
 					opacity: 1;
-					.transition(opacity 1s linear);
+					transition: opacity 1s linear;
 				}
 
 				&.temp .body {
@@ -470,7 +470,7 @@ input:focus {
 			bottom: 8px;
 			left: 50%;
 			z-index: 5;
-			.transition(transform 0.3s ease-out);
+			transition: transform 0.3s ease-out;
 			.transform(translateY(-40px));
 
 			&.not {
@@ -485,7 +485,7 @@ input:focus {
 			background-color: #f7d799;
 			padding: 5px;
 			z-index: 8;
-			.transition(transform 0.2s ease-out);
+			transition: transform 0.2s ease-out;
 			.transform(translateY(100%));
 
 			&.show {
@@ -541,7 +541,7 @@ input:focus {
 					height: 15px;
 					margin: 0 4px;
 					cursor: pointer;
-					.transition(fill .15s ease-out);
+					transition: fill 0.15s ease-out;
 
 					&:hover {
 						fill: @primary-font-color;
@@ -581,7 +581,7 @@ input:focus {
 				0 2px 10px 0 rgba(0, 0, 0, 0.16);
 			position: absolute;
 			z-index: 200;
-			.transition(transform 0.15s ease, visibility 0.15s ease, opacity 0.15s ease);
+			transition: transform 0.15s ease, visibility 0.15s ease, opacity 0.15s ease;
 			.transform(translateY(30px));
 			opacity: 0;
 			visibility: hidden;
@@ -769,7 +769,7 @@ input:focus {
 	padding: 0 1em;
 	opacity: 0.5;
 	align-self: flex-end;
-	.transition(opacity .15s ease-out);
+	transition: opacity 0.15s ease-out;
 
 	&:hover {
 		opacity: 1;
@@ -816,7 +816,7 @@ input:focus {
 			opacity: 0;
 			visibility: hidden;
 			.transform(translateY(50px));
-			.transition(opacity 0.175s ease-out, transform 0.175s ease-out, visibility 0.175s ease-out);
+			transition: opacity 0.175s ease-out, transform 0.175s ease-out, visibility 0.175s ease-out;
 
 			&.visible {
 				opacity: 1;
diff --git a/packages/rocketchat-livechat/app/client/stylesheets/utils/_lesshat.import.less b/packages/rocketchat-livechat/app/client/stylesheets/utils/_lesshat.import.less
index f114034c50c..0979dd5275e 100644
--- a/packages/rocketchat-livechat/app/client/stylesheets/utils/_lesshat.import.less
+++ b/packages/rocketchat-livechat/app/client/stylesheets/utils/_lesshat.import.less
@@ -49,17 +49,6 @@
 	transform-style: @process;
 }
 
-.transition(...) {
-	@process_webkit: ~`(function(r){r=r||"all 0 ease 0";var e=["background-size","border-radius","border-bottom-left-radius","border-bottom-right-radius","border-top-left-radius","border-top-right-radius","box-shadow","column","transform","filter"],t="-webkit-",o=/(?:\d)(?:ms|s)/gi,a=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%)/gi;return/^[^, ]*,/.test(r)&&(r=r.replace(/(?:,)(?![^(]*\))/g,"")),e.forEach(function(e,o){r.indexOf(e)!==-1&&(r=r.replace(new RegExp(e,"g"),function(r){return t+r}))}),o.test(r)||"0"===r||(r=r.replace(a,function(r){return r+=parseFloat(r,10)>10?"ms":"s"})),r})((function(){var r="@{arguments}";return r=r.replace(/^\[|\]$/g,"")})())`;
-	@process_moz: ~`(function(e){e=e||"all 0 ease 0";var n=["background-size","box-shadow","column","transform","filter"],r="-moz-",t=/(?:\d)(?:ms|s)/gi,a=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%)/gi;return/^[^, ]*,/.test(e)&&(e=e.replace(/(?:,)(?![^(]*\))/g,"")),n.forEach(function(n,t){e.indexOf(n)!==-1&&(e=e.replace(new RegExp(n,"g"),function(e){return r+e}))}),t.test(e)||"0"===e||(e=e.replace(a,function(e){return e+=parseFloat(e,10)>10?"ms":"s"})),e})((function(){var r="@{arguments}";return r=r.replace(/^\[|\]$/g,"")})())`;
-	@process_opera: ~`(function(e){e=e||"all 0 ease 0";var n=["transform"],r="-o-",t=/(?:\d)(?:ms|s)/gi,a=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%)/gi;return/^[^, ]*,/.test(e)&&(e=e.replace(/(?:,)(?![^(]*\))/g,"")),n.forEach(function(n,t){e.indexOf(n)!==-1&&(e=e.replace(new RegExp(n,"g"),function(e){return r+e}))}),t.test(e)||"0"===e||(e=e.replace(a,function(e){return e+=parseFloat(e,10)>10?"ms":"s"})),e})((function(){var r="@{arguments}";return r=r.replace(/^\[|\]$/g,"")})())`;
-	@process: ~`(function(n){n=n||"all 0 ease 0";var e=["-webkit-","-moz-","-o-",""],t=["column","transform","filter"],r=/(?:\d)(?:ms|s)/gi,o=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%)/gi;/^[^, ]*,/.test(n)&&(n=n.replace(/(?:,)(?![^(]*\))/g,""));var i=n.split(/(?:,)(?![^(]*\))/g);return i.forEach(function(n,r){t.forEach(function(t){n.indexOf(t)!==-1&&(i[r]="",e.forEach(function(o,a){i[r]+=n.trim().replace(new RegExp(t,"g"),function(n){return o+n}),a<e.length-1&&(i[r]+=",")}))})}),n=i.join(","),r.test(n)||"0"===n||(n=n.replace(o,function(n){return n+=parseFloat(n,10)>10?"ms":"s"})),n})((function(){var r="@{arguments}";return r=r.replace(/^\[|\]$/g,"")})())`;
-	-webkit-transition: @process_webkit;
-	-moz-transition: @process_moz;
-	-o-transition: @process_opera;
-	transition: @process;
-}
-
 .translate(...) {
 	@process: ~`(function(n){n=n||"0";var r=/\d/gi,t=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%|\.)/gi;return r.test(n)&&(n=n.replace(t,function(n){return 0==n&&n||n+"px"})),n})((function(){var r="@{arguments}";return r=r.replace(/^\[|\]$/g,"")})())`;
 	-webkit-transform: translate(@process);
diff --git a/packages/rocketchat-livechat/app/client/views/message.html b/packages/rocketchat-livechat/app/client/views/message.html
index 23bbd978e1a..7dc9aba0c82 100644
--- a/packages/rocketchat-livechat/app/client/views/message.html
+++ b/packages/rocketchat-livechat/app/client/views/message.html
@@ -1,5 +1,5 @@
 <template name="message">
-	<li id="{{_id}}" class="message sequential {{system}} {{t}} {{own}} {{isTemp}} {{error}}" data-username="{{u.username}}" data-date="{{date}}">
+	<li id="{{_id}}" class="message background-transparent-dark-hover sequential {{system}} {{t}} {{own}} {{isTemp}} {{error}}" data-username="{{u.username}}" data-date="{{date}}">
 		<div class="content">
 			<span class="thumb thumb-small" data-username="{{u.username}}" tabindex="1">{{> avatar username=u.username}}</span>
 			<span class="user" data-username="{{u.username}}" tabindex="1">
diff --git a/packages/rocketchat-livechat/app/client/views/messages.html b/packages/rocketchat-livechat/app/client/views/messages.html
index d3bdb94eb96..7698ca27f44 100644
--- a/packages/rocketchat-livechat/app/client/views/messages.html
+++ b/packages/rocketchat-livechat/app/client/views/messages.html
@@ -25,11 +25,11 @@
 				{{/each}}
 			</ul>
 		</div>
-		<div class="new-message not">
+		<div class="new-message background-primary-action-color color-primary-action-contrast not">
 			<span>{{_ "New_messages"}}</span>
 		</div>
 
-		<div class="error">
+		<div class="error error-color error-background">
 			<span></span>
 		</div>
 	</div>
@@ -71,7 +71,7 @@
 			{{/with}}
 		{{else}}
 			{{> options show=showOptions}}
-			<button class="toggle-options">{{optionsLink}}</button>
+			<button class="toggle-options secondary-font-color">{{optionsLink}}</button>
 		{{/if}}
 	</div>
 </template>
diff --git a/packages/rocketchat-livechat/app/client/views/offlineForm.html b/packages/rocketchat-livechat/app/client/views/offlineForm.html
index 50d44348552..655687876b9 100644
--- a/packages/rocketchat-livechat/app/client/views/offlineForm.html
+++ b/packages/rocketchat-livechat/app/client/views/offlineForm.html
@@ -6,7 +6,7 @@
 			<p class="offline-message">{{{offlineMessage}}}</p>
 
 			<form>
-				<div class="error">
+				<div class="error error-color error-background">
 					<span>{{{error}}}</span>
 				</div>
 
diff --git a/packages/rocketchat-livechat/app/client/views/options.html b/packages/rocketchat-livechat/app/client/views/options.html
index 8c57e9f6379..50bc5217f78 100644
--- a/packages/rocketchat-livechat/app/client/views/options.html
+++ b/packages/rocketchat-livechat/app/client/views/options.html
@@ -1,5 +1,5 @@
 <template name="options">
-	<div class="options-menu {{show}}">
+	<div class="options-menu content-background-color {{show}}">
 		<ul>
 			<li><button class="end-chat"><i class="icon-cancel"></i> {{_ "End_chat"}}</button></li>
 		</ul>
diff --git a/packages/rocketchat-livechat/app/client/views/register.html b/packages/rocketchat-livechat/app/client/views/register.html
index e6434be8e05..9538e7113b9 100644
--- a/packages/rocketchat-livechat/app/client/views/register.html
+++ b/packages/rocketchat-livechat/app/client/views/register.html
@@ -1,6 +1,6 @@
 <template name="register">
 	<div class="livechat-form">
-		<div class="error">
+		<div class="error error-color error-background">
 			<span>{{{error}}}</span>
 		</div>
 
diff --git a/packages/rocketchat-livechat/client/stylesheets/lesshat.less b/packages/rocketchat-livechat/client/stylesheets/lesshat.less
index db6b6fe9493..7c9f0ae86a2 100644
--- a/packages/rocketchat-livechat/client/stylesheets/lesshat.less
+++ b/packages/rocketchat-livechat/client/stylesheets/lesshat.less
@@ -15,14 +15,3 @@
 	-o-transform: @process;
 	transform: @process;
 }
-
-.transition(...) {
-	@process_webkit: ~`(function(r){r=r||"all 0 ease 0";var e=["background-size","border-radius","border-bottom-left-radius","border-bottom-right-radius","border-top-left-radius","border-top-right-radius","box-shadow","column","transform","filter"],t="-webkit-",o=/(?:\d)(?:ms|s)/gi,a=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%)/gi;return/^[^, ]*,/.test(r)&&(r=r.replace(/(?:,)(?![^(]*\))/g,"")),e.forEach(function(e,o){r.indexOf(e)!==-1&&(r=r.replace(new RegExp(e,"g"),function(r){return t+r}))}),o.test(r)||"0"===r||(r=r.replace(a,function(r){return r+=parseFloat(r,10)>10?"ms":"s"})),r})((function(){var r="@{arguments}";return r=r.replace(/^\[|\]$/g,"")})())`;
-	@process_moz: ~`(function(e){e=e||"all 0 ease 0";var n=["background-size","box-shadow","column","transform","filter"],r="-moz-",t=/(?:\d)(?:ms|s)/gi,a=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%)/gi;return/^[^, ]*,/.test(e)&&(e=e.replace(/(?:,)(?![^(]*\))/g,"")),n.forEach(function(n,t){e.indexOf(n)!==-1&&(e=e.replace(new RegExp(n,"g"),function(e){return r+e}))}),t.test(e)||"0"===e||(e=e.replace(a,function(e){return e+=parseFloat(e,10)>10?"ms":"s"})),e})((function(){var r="@{arguments}";return r=r.replace(/^\[|\]$/g,"")})())`;
-	@process_opera: ~`(function(e){e=e||"all 0 ease 0";var n=["transform"],r="-o-",t=/(?:\d)(?:ms|s)/gi,a=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%)/gi;return/^[^, ]*,/.test(e)&&(e=e.replace(/(?:,)(?![^(]*\))/g,"")),n.forEach(function(n,t){e.indexOf(n)!==-1&&(e=e.replace(new RegExp(n,"g"),function(e){return r+e}))}),t.test(e)||"0"===e||(e=e.replace(a,function(e){return e+=parseFloat(e,10)>10?"ms":"s"})),e})((function(){var r="@{arguments}";return r=r.replace(/^\[|\]$/g,"")})())`;
-	@process: ~`(function(n){n=n||"all 0 ease 0";var e=["-webkit-","-moz-","-o-",""],t=["column","transform","filter"],r=/(?:\d)(?:ms|s)/gi,o=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%)/gi;/^[^, ]*,/.test(n)&&(n=n.replace(/(?:,)(?![^(]*\))/g,""));var i=n.split(/(?:,)(?![^(]*\))/g);return i.forEach(function(n,r){t.forEach(function(t){n.indexOf(t)!==-1&&(i[r]="",e.forEach(function(o,a){i[r]+=n.trim().replace(new RegExp(t,"g"),function(n){return o+n}),a<e.length-1&&(i[r]+=",")}))})}),n=i.join(","),r.test(n)||"0"===n||(n=n.replace(o,function(n){return n+=parseFloat(n,10)>10?"ms":"s"})),n})((function(){var r="@{arguments}";return r=r.replace(/^\[|\]$/g,"")})())`;
-	-webkit-transition: @process_webkit;
-	-moz-transition: @process_moz;
-	-o-transition: @process_opera;
-	transition: @process;
-}
diff --git a/packages/rocketchat-livechat/client/stylesheets/livechat.less b/packages/rocketchat-livechat/client/stylesheets/livechat.less
index 1c2bc730c16..7e268decb3f 100644
--- a/packages/rocketchat-livechat/client/stylesheets/livechat.less
+++ b/packages/rocketchat-livechat/client/stylesheets/livechat.less
@@ -142,7 +142,7 @@
 				height: 100%;
 				opacity: 0;
 				z-index: 1;
-				.transition(opacity .1s ease-out);
+				transition: opacity 0.1s ease-out;
 			}
 
 			&:hover {
@@ -381,7 +381,7 @@
 
 						.body {
 							opacity: 1;
-							.transition(opacity 1s linear);
+							transition: opacity 1s linear;
 						}
 
 						&.temp .body {
@@ -423,7 +423,7 @@
 					bottom: 8px;
 					left: 50%;
 					z-index: 5;
-					.transition(transform 0.3s ease-out);
+					transition: transform 0.3s ease-out;
 					.transform(translateY(-40px));
 
 					&.not {
@@ -438,7 +438,7 @@
 					background-color: #f7d799;
 					padding: 5px;
 					z-index: 8;
-					.transition(transform 0.2s ease-out);
+					transition: transform 0.2s ease-out;
 					.transform(translateY(100%));
 
 					&.show {
@@ -486,7 +486,7 @@
 					top: -28px;
 					color: @secondary-font-color;
 					cursor: pointer;
-					.transition(color .15s ease-out);
+					transition: color 0.15s ease-out;
 
 					&:hover {
 						color: @primary-font-color;
@@ -625,7 +625,7 @@
 
 .livechat-section {
 	opacity: 0.5;
-	.transition(opacity .4s ease);
+	transition: opacity 0.4s ease;
 
 	&.available {
 		opacity: 1;
diff --git a/packages/rocketchat-livechat/client/views/app/tabbar/visitorInfo.html b/packages/rocketchat-livechat/client/views/app/tabbar/visitorInfo.html
index 2fde77254e5..21e6041d869 100644
--- a/packages/rocketchat-livechat/client/views/app/tabbar/visitorInfo.html
+++ b/packages/rocketchat-livechat/client/views/app/tabbar/visitorInfo.html
@@ -11,11 +11,11 @@
 				{{#with user}}
 					<div class="info">
 						<h3 title="{{username}}"><i class="status-{{status}}"></i> {{username}}</h3>
-						<p>{{name}}</p>
+						<p class="secondary-font-color">{{name}}</p>
 
 						<ul>
 							{{#if utc}}<li><i class="icon-clock"></i>{{userTime}} (UTC {{utc}})</li>{{/if}}
-							{{#each visitorEmails}} <li><i class="icon-mail"></i> {{address}}{{#if verified}}&nbsp;<i class="icon-ok"></i>{{/if}}</li> {{/each}}
+							{{#each visitorEmails}} <li><i class="icon-mail"></i> {{address}}{{#if verified}}&nbsp;<i class="icon-ok success-color"></i>{{/if}}</li> {{/each}}
 							{{#each phone}} <li><i class="icon-phone"></i> {{phoneNumber}}</li> {{/each}}
 							{{#if lastLogin}} <li><i class="icon-calendar"></i> {{_ "Created_at"}}: {{createdAt}}</li> {{/if}}
 							{{#if lastLogin}} <li><i class="icon-calendar"></i> {{_ "Last_login"}}: {{lastLogin}}</li> {{/if}}
diff --git a/packages/rocketchat-logger/client/views/viewLogs.coffee b/packages/rocketchat-logger/client/views/viewLogs.coffee
index cb86a98cce9..29a96bf9e15 100644
--- a/packages/rocketchat-logger/client/views/viewLogs.coffee
+++ b/packages/rocketchat-logger/client/views/viewLogs.coffee
@@ -14,7 +14,7 @@ Template.viewLogs.helpers
 
 	ansispan: (string) ->
 		string = ansispan(string.replace(/\s/g, '&nbsp;').replace(/(\\n|\n)/g, '<br>'))
-		string = string.replace(/(.\d{8}-\d\d:\d\d:\d\d\.\d\d\d\(?.{0,2}\)?)/, '<span class="time">$1</span>')
+		string = string.replace(/(.\d{8}-\d\d:\d\d:\d\d\.\d\d\d\(?.{0,2}\)?)/, '<span class="terminal-time">$1</span>')
 		return string
 
 	formatTS: (date) ->
diff --git a/packages/rocketchat-logger/client/views/viewLogs.html b/packages/rocketchat-logger/client/views/viewLogs.html
index 2c136da2059..88ab40c1914 100644
--- a/packages/rocketchat-logger/client/views/viewLogs.html
+++ b/packages/rocketchat-logger/client/views/viewLogs.html
@@ -2,13 +2,13 @@
 	{{#if hasPermission}}
 		<div class="section terminal">
 			{{#each logs}}
-				<div>
-					<!-- <span class="time">{{formatTS ts}}</span>  -->
+				<div class="terminal-line">
+					{{!-- <span class="terminal-time">{{formatTS ts}}</span> --}}
 					{{{ansispan string}}}
 				</div>
 			{{/each}}
 		</div>
-		<div class="new-logs not">
+		<div class="new-logs not color-primary-action-color">
 			<i class="icon-down-big"></i>
 			<span>{{_ "New_logs"}}</span>
 		</div>
diff --git a/packages/rocketchat-mailer/client/views/mailer.html b/packages/rocketchat-mailer/client/views/mailer.html
index 2b50819d6fe..93e13635621 100644
--- a/packages/rocketchat-mailer/client/views/mailer.html
+++ b/packages/rocketchat-mailer/client/views/mailer.html
@@ -1,6 +1,6 @@
 <template name="mailer">
 	<section class="page-container page-list">
-		<header class="fixed-title">
+		<header class="fixed-title border-component-color">
 			{{> burger}}
 			<h2>
 				<span class="room-title">{{_ "Mailer"}}</span>
@@ -19,7 +19,7 @@
 									<input type="text" name="from" value="" placeholder="{{fromEmail}}" />
 								</div>
 								<div>
-									<small class="settings-description">{{{_ "From_email_warning"}}}</small>
+									<small class="settings-description secondary-font-color">{{{_ "From_email_warning"}}}</small>
 								</div>
 							</div>
 							<div class="input-line">
@@ -28,7 +28,7 @@
 									<input type="checkbox" name="dryrun" value="1" />
 								</div>
 								<div>
-									<small class="settings-description">{{{_ "Dry_run_description"}}}</small>
+									<small class="settings-description secondary-font-color">{{{_ "Dry_run_description"}}}</small>
 								</div>
 							</div>
 							<div class="input-line">
@@ -37,7 +37,7 @@
 									<input type="text" name="query" value="" />
 								</div>
 								<div>
-									<small class="settings-description">{{{_ "Query_description"}}}</small>
+									<small class="settings-description secondary-font-color">{{{_ "Query_description"}}}</small>
 								</div>
 							</div>
 							<div class="input-line">
@@ -52,7 +52,7 @@
 									<textarea name="body" rows="10" style="height: auto"></textarea>
 								</div>
 								<div>
-									<small class="settings-description">{{{_ "Mailer_body_tags"}}}</small>
+									<small class="settings-description secondary-font-color">{{{_ "Mailer_body_tags"}}}</small>
 								</div>
 							</div>
 						</fieldset>
diff --git a/packages/rocketchat-mailer/client/views/mailerUnsubscribe.html b/packages/rocketchat-mailer/client/views/mailerUnsubscribe.html
index 1f2739055cd..e00707e7b5f 100644
--- a/packages/rocketchat-mailer/client/views/mailerUnsubscribe.html
+++ b/packages/rocketchat-mailer/client/views/mailerUnsubscribe.html
@@ -1,12 +1,12 @@
 <template name="mailerUnsubscribe">
-	<section class="full-page">
+	<section class="full-page color-tertiary-font-color">
 		<div class="wrapper">
 			<header>
 				<a class="logo" href="/">
 					<img src="images/logo/logo.svg?v=3" />
 				</a>
 			</header>
-			<div class="cms-page">
+			<div class="cms-page content-background-color">
 				{{_ "You_have_successfully_unsubscribed"}}
 			</div>
 		</div>
diff --git a/packages/rocketchat-markdown/markdown.coffee b/packages/rocketchat-markdown/markdown.coffee
index 61d11f0906a..2408f3a3621 100644
--- a/packages/rocketchat-markdown/markdown.coffee
+++ b/packages/rocketchat-markdown/markdown.coffee
@@ -56,17 +56,17 @@ class Markdown
 		# >>>
 		# Text
 		# <<<
-		msg = msg.replace(/(?:&gt;){3}\n+([\s\S]*?)\n+(?:&lt;){3}/g, '<blockquote><span class="copyonly">&gt;&gt;&gt;</span>$1<span class="copyonly">&lt;&lt;&lt;</span></blockquote>')
+		msg = msg.replace(/(?:&gt;){3}\n+([\s\S]*?)\n+(?:&lt;){3}/g, '<blockquote class="background-transparent-darker-before"><span class="copyonly">&gt;&gt;&gt;</span>$1<span class="copyonly">&lt;&lt;&lt;</span></blockquote>')
 
 		# Support >Text for quote
-		msg = msg.replace(/^&gt;(.*)$/gm, '<blockquote><span class="copyonly">&gt;</span>$1</blockquote>')
+		msg = msg.replace(/^&gt;(.*)$/gm, '<blockquote class="background-transparent-darker-before"><span class="copyonly">&gt;</span>$1</blockquote>')
 
 		# Remove white-space around blockquote (prevent <br>). Because blockquote is block element.
-		msg = msg.replace(/\s*<blockquote>/gm, '<blockquote>')
+		msg = msg.replace(/\s*<blockquote class="background-transparent-darker-before">/gm, '<blockquote class="background-transparent-darker-before">')
 		msg = msg.replace(/<\/blockquote>\s*/gm, '</blockquote>')
 
 		# Remove new-line between blockquotes.
-		msg = msg.replace(/<\/blockquote>\n<blockquote>/gm, '</blockquote><blockquote>')
+		msg = msg.replace(/<\/blockquote>\n<blockquote/gm, '</blockquote><blockquote')
 
 		if not _.isString message
 			message.html = msg
diff --git a/packages/rocketchat-markdown/markdowncode.coffee b/packages/rocketchat-markdown/markdowncode.coffee
index 0d0bfd0d15c..e74877286cc 100644
--- a/packages/rocketchat-markdown/markdowncode.coffee
+++ b/packages/rocketchat-markdown/markdowncode.coffee
@@ -23,7 +23,7 @@ class MarkdownCode
 
 			message.tokens.push
 				token: token
-				text: "#{p1}<span class=\"copyonly\">`</span><span><code class=\"inline\">#{p2}</code></span><span class=\"copyonly\">`</span>#{p3}"
+				text: "#{p1}<span class=\"copyonly\">`</span><span><code class=\"code-colors inline\">#{p2}</code></span><span class=\"copyonly\">`</span>#{p3}"
 
 			return token
 
@@ -70,7 +70,7 @@ class MarkdownCode
 					message.tokens.push
 						highlight: true
 						token: token
-						text: "<pre><code class='hljs " + result.language + "'><span class='copyonly'>```<br></span>" + result.value + "<span class='copyonly'><br>```</span></code></pre>"
+						text: "<pre><code class='code-colors hljs " + result.language + "'><span class='copyonly'>```<br></span>" + result.value + "<span class='copyonly'><br>```</span></code></pre>"
 
 					msgParts[index] = token
 				else
diff --git a/packages/rocketchat-mentions/client.coffee b/packages/rocketchat-mentions/client.coffee
index a511cc6ba6d..2132253a829 100644
--- a/packages/rocketchat-mentions/client.coffee
+++ b/packages/rocketchat-mentions/client.coffee
@@ -21,7 +21,7 @@ class MentionsClient
 				mentions = mentions.join('|')
 				msg = msg.replace new RegExp("(?:^|\\s|\\n)(@(#{mentions}):?)[:.,\s]?", 'g'), (match, mention, username) ->
 					if username is 'all' or username is 'here'
-						return match.replace mention, "<a class=\"mention-link mention-link-me mention-link-all\">#{mention}</a>"
+						return match.replace mention, "<a class=\"mention-link mention-link-me mention-link-all background-attention-color\">#{mention}</a>"
 
 					if not message.temp?
 						if not _.findWhere(message.mentions, {username: username})?
@@ -29,7 +29,7 @@ class MentionsClient
 
 					classes = 'mention-link'
 					if username is me
-						classes += ' mention-link-me'
+						classes += ' mention-link-me background-primary-action-color'
 
 					return match.replace mention, "<a class=\"#{classes}\" data-username=\"#{username}\">#{mention}</a>"
 
diff --git a/packages/rocketchat-message-attachments/client/messageAttachment.html b/packages/rocketchat-message-attachments/client/messageAttachment.html
index 7860efe8775..51a92296abf 100644
--- a/packages/rocketchat-message-attachments/client/messageAttachment.html
+++ b/packages/rocketchat-message-attachments/client/messageAttachment.html
@@ -3,7 +3,7 @@
 		<!-- <div>fallback: {{fallback}}</div> -->
 		{{pretext}}
 		<div class="attachment-block">
-			<div class="attachment-block-border" style="background-color: {{color}}"></div>
+			<div class="attachment-block-border background-info-font-color" style="background-color: {{color}}"></div>
 			{{#if author_name}}
 				{{#if author_link}}
 					<div class="attachment-author">
diff --git a/packages/rocketchat-message-attachments/client/stylesheets/loader.coffee b/packages/rocketchat-message-attachments/client/stylesheets/loader.coffee
deleted file mode 100644
index 767a5689253..00000000000
--- a/packages/rocketchat-message-attachments/client/stylesheets/loader.coffee
+++ /dev/null
@@ -1,2 +0,0 @@
-RocketChat.theme.addPackageAsset ->
-	return Assets.getText 'client/stylesheets/messageAttachments.less'
diff --git a/packages/rocketchat-message-attachments/package.js b/packages/rocketchat-message-attachments/package.js
index 0b43fed4b30..c6282012e22 100644
--- a/packages/rocketchat-message-attachments/package.js
+++ b/packages/rocketchat-message-attachments/package.js
@@ -11,13 +11,13 @@ Package.onUse(function(api) {
 		'ecmascript',
 		'coffeescript',
 		'underscore',
-		'rocketchat:lib'
+		'rocketchat:lib',
+		'less'
 	]);
 
 	api.addFiles('client/messageAttachment.html', 'client');
 	api.addFiles('client/messageAttachment.coffee', 'client');
 
 	// stylesheets
-	api.addAssets('client/stylesheets/messageAttachments.less', 'server');
-	api.addFiles('client/stylesheets/loader.coffee', 'server');
+	api.addFiles('client/stylesheets/messageAttachments.less', 'client');
 });
diff --git a/packages/rocketchat-message-snippet/client/tabBar/views/snippetMessage.html b/packages/rocketchat-message-snippet/client/tabBar/views/snippetMessage.html
index 858266510f3..9755eed5a7a 100644
--- a/packages/rocketchat-message-snippet/client/tabBar/views/snippetMessage.html
+++ b/packages/rocketchat-message-snippet/client/tabBar/views/snippetMessage.html
@@ -1,5 +1,5 @@
 <template name="snippetMessage">
-	<li id="{{_id}}" class="message {{isSequential}} {{system}} {{t}} {{own}} {{isTemp}} {{chatops}} {{customClass}}" data-username="{{u.username}}" data-groupable="{{isGroupable}}" data-date="{{date}}" data-timestamp="{{timestamp}}">
+	<li id="{{_id}}" class="message background-transparent-dark-hover {{isSequential}} {{system}} {{t}} {{own}} {{isTemp}} {{chatops}} {{customClass}}" data-username="{{u.username}}" data-groupable="{{isGroupable}}" data-date="{{date}}" data-timestamp="{{timestamp}}">
 		<div class="day-divider">
 			<span>{{date}}</span>
 		</div>
diff --git a/packages/rocketchat-oauth2-server-config/admin/client/views/oauthApp.html b/packages/rocketchat-oauth2-server-config/admin/client/views/oauthApp.html
index 51f3bb8c78c..6038e7035a1 100644
--- a/packages/rocketchat-oauth2-server-config/admin/client/views/oauthApp.html
+++ b/packages/rocketchat-oauth2-server-config/admin/client/views/oauthApp.html
@@ -16,14 +16,14 @@
 							<label>{{_ "Application_Name"}}</label>
 							<div>
 								<input type="text" name="name" value="{{data.name}}" />
-								<div class="settings-description">{{_ "Give_the_application_a_name_This_will_be_seen_by_your_users"}}</div>
+								<div class="settings-description secondary-font-color">{{_ "Give_the_application_a_name_This_will_be_seen_by_your_users"}}</div>
 							</div>
 						</div>
 						<div class="input-line double-col">
 							<label>{{_ "Redirect_URI"}}</label>
 							<div>
 								<input type="text" name="redirectUri" value="{{data.redirectUri}}" />
-								<div class="settings-description">{{_ "After_OAuth2_authentication_users_will_be_redirected_to_this_URL"}}</div>
+								<div class="settings-description secondary-font-color">{{_ "After_OAuth2_authentication_users_will_be_redirected_to_this_URL"}}</div>
 							</div>
 						</div>
 						{{#if data.clientId}}
@@ -31,28 +31,28 @@
 								<label>{{_ "Client_ID"}}</label>
 								<div>
 									<input type="text" name="clientId" value="{{data.clientId}}" readonly="readonly" />
-									<div class="settings-description"><button class="clipboard" data-clipboard-target="[name=clientId]">{{_ "COPY_TO_CLIPBOARD"}}</button></div>
+									<div class="settings-description secondary-font-color"><button class="clipboard" data-clipboard-target="[name=clientId]">{{_ "COPY_TO_CLIPBOARD"}}</button></div>
 								</div>
 							</div>
 							<div class="input-line double-col">
 								<label>{{_ "Client_Secret"}}</label>
 								<div>
 									<input type="text" name="clientSecret" value="{{data.clientSecret}}" readonly="readonly" />
-									<div class="settings-description"><button class="clipboard" data-clipboard-target="[name=clientSecret]">{{_ "COPY_TO_CLIPBOARD"}}</button></div>
+									<div class="settings-description secondary-font-color"><button class="clipboard" data-clipboard-target="[name=clientSecret]">{{_ "COPY_TO_CLIPBOARD"}}</button></div>
 								</div>
 							</div>
 							<div class="input-line double-col">
 								<label>{{_ "Authorization_URL"}}</label>
 								<div>
 									<input type="text" name="authorization_url" value="{{data.authorization_url}}" readonly="readonly" />
-									<div class="settings-description"><button class="clipboard" data-clipboard-target="[name=authorization_url]">{{_ "COPY_TO_CLIPBOARD"}}</button></div>
+									<div class="settings-description secondary-font-color"><button class="clipboard" data-clipboard-target="[name=authorization_url]">{{_ "COPY_TO_CLIPBOARD"}}</button></div>
 								</div>
 							</div>
 							<div class="input-line double-col">
 								<label>{{_ "Access_Token_URL"}}</label>
 								<div>
 									<input type="text" name="access_token_url" value="{{data.access_token_url}}" readonly="readonly" />
-									<div class="settings-description"><button class="clipboard" data-clipboard-target="[name=access_token_url]">{{_ "COPY_TO_CLIPBOARD"}}</button></div>
+									<div class="settings-description secondary-font-color"><button class="clipboard" data-clipboard-target="[name=access_token_url]">{{_ "COPY_TO_CLIPBOARD"}}</button></div>
 								</div>
 							</div>
 						{{/if}}
diff --git a/packages/rocketchat-oauth2-server-config/oauth/client/stylesheets/load.coffee b/packages/rocketchat-oauth2-server-config/oauth/client/stylesheets/load.coffee
deleted file mode 100644
index 631ef382a4e..00000000000
--- a/packages/rocketchat-oauth2-server-config/oauth/client/stylesheets/load.coffee
+++ /dev/null
@@ -1,2 +0,0 @@
-RocketChat.theme.addPackageAsset ->
-	return Assets.getText 'oauth/client/stylesheets/oauth2.less'
diff --git a/packages/rocketchat-oauth2-server-config/package.js b/packages/rocketchat-oauth2-server-config/package.js
index 6f7c70c0f40..4ad16fbca1c 100644
--- a/packages/rocketchat-oauth2-server-config/package.js
+++ b/packages/rocketchat-oauth2-server-config/package.js
@@ -12,6 +12,7 @@ Package.onUse(function(api) {
 	api.use('rocketchat:api');
 	api.use('rocketchat:theme');
 	api.use('rocketchat:oauth2-server');
+	api.use('less');
 
 	api.use('templating', 'client');
 	api.use('kadira:flow-router', 'client');
@@ -25,8 +26,7 @@ Package.onUse(function(api) {
 	api.addFiles('oauth/server/oauth2-server.coffee', 'server');
 	api.addFiles('oauth/server/default-services.coffee', 'server');
 
-	api.addAssets('oauth/client/stylesheets/oauth2.less', 'server');
-	api.addFiles('oauth/client/stylesheets/load.coffee', 'server');
+	api.addFiles('oauth/client/stylesheets/oauth2.less', 'client');
 
 	// Client
 	api.addFiles('oauth/client/oauth2-client.html', 'client');
diff --git a/packages/rocketchat-oembed/client/oembedAudioWidget.html b/packages/rocketchat-oembed/client/oembedAudioWidget.html
index 2cd1035c873..b4eea0aa8d1 100644
--- a/packages/rocketchat-oembed/client/oembedAudioWidget.html
+++ b/packages/rocketchat-oembed/client/oembedAudioWidget.html
@@ -5,7 +5,7 @@
 				<span class="collapse-switch icon-right-dir" data-index="{{index}}" data-collapsed="{{collapsed}}"></span>
 			{{else}}
 				<span class="collapse-switch icon-down-dir" data-index="{{index}}" data-collapsed="{{collapsed}}"></span>
-				<blockquote>
+				<blockquote class="background-transparent-darker-before">
 					<audio controls>
 						<source src="{{url}}" type="{{headers.contentType}}">
 						Your browser does not support the audio element.
diff --git a/packages/rocketchat-oembed/client/oembedFrameWidget.html b/packages/rocketchat-oembed/client/oembedFrameWidget.html
index 92f4297021a..04b58c3ed13 100644
--- a/packages/rocketchat-oembed/client/oembedFrameWidget.html
+++ b/packages/rocketchat-oembed/client/oembedFrameWidget.html
@@ -1,6 +1,6 @@
 <template name="oembedFrameWidget">
 {{#if parsedUrl}}
-	<blockquote>
+	<blockquote class="background-transparent-darker-before">
 		{{#if meta.oembedProviderName}}
 			{{#if meta.oembedProviderUrl}}
 				<a href="{{meta.oembedProviderUrl}}" style="color: #9e9ea6">{{meta.oembedProviderName}}</a>
diff --git a/packages/rocketchat-oembed/client/oembedSandstormGrain.html b/packages/rocketchat-oembed/client/oembedSandstormGrain.html
index 97157a6b0b7..b5a2ac272b2 100644
--- a/packages/rocketchat-oembed/client/oembedSandstormGrain.html
+++ b/packages/rocketchat-oembed/client/oembedSandstormGrain.html
@@ -1,5 +1,5 @@
 <template name="oembedSandstormGrain">
-	<blockquote class="sandstorm-grain">
+	<blockquote class="sandstorm-grain background-transparent-darker-before">
 		<label>
 			<button onclick="sandstormOembed(event)" data-token="{{token}}"
 							data-descriptor="{{descriptor}}">
diff --git a/packages/rocketchat-oembed/client/oembedUrlWidget.html b/packages/rocketchat-oembed/client/oembedUrlWidget.html
index 4ca23a82abc..b410473155b 100644
--- a/packages/rocketchat-oembed/client/oembedUrlWidget.html
+++ b/packages/rocketchat-oembed/client/oembedUrlWidget.html
@@ -1,6 +1,6 @@
 <template name="oembedUrlWidget">
 	{{#if show}}
-		<blockquote>
+		<blockquote class="background-transparent-darker-before">
 			<div style="{{#if image}}min-height: 80px;{{/if}} padding: 10px 3px;">
 				{{#if image}}
 					{{#if meta.ogImageUserGenerated}}
diff --git a/packages/rocketchat-oembed/client/oembedVideoWidget.html b/packages/rocketchat-oembed/client/oembedVideoWidget.html
index f29fa1f6119..1a913e2dfb0 100644
--- a/packages/rocketchat-oembed/client/oembedVideoWidget.html
+++ b/packages/rocketchat-oembed/client/oembedVideoWidget.html
@@ -1,6 +1,6 @@
 <template name="oembedVideoWidget">
 {{#if parsedUrl}}
-	<blockquote>
+	<blockquote class="background-transparent-darker-before">
 		<div><a href="{{url}}">{{parsedUrl.host}}</a></div>
 		<span>{{title}}</span>
 		{{#if collapsed}}
diff --git a/packages/rocketchat-oembed/client/oembedYoutubeWidget.html b/packages/rocketchat-oembed/client/oembedYoutubeWidget.html
index 614c11df2d4..7295e633e17 100644
--- a/packages/rocketchat-oembed/client/oembedYoutubeWidget.html
+++ b/packages/rocketchat-oembed/client/oembedYoutubeWidget.html
@@ -1,6 +1,6 @@
 <template name="oembedYoutubeWidget">
 	{{#if parsedUrl}}
-		<blockquote>
+		<blockquote class="background-transparent-darker-before">
 			<a href="{{url}}">{{parsedUrl.host}}</a>
 			{{#if collapsed}}
 				<span class="collapse-switch icon-right-dir" data-index="{{index}}" data-collapsed="{{collapsed}}"></span><br>
diff --git a/packages/rocketchat-otr/client/rocketchat.otr.room.js b/packages/rocketchat-otr/client/rocketchat.otr.room.js
index e5e7c591e4a..a6defaec91e 100644
--- a/packages/rocketchat-otr/client/rocketchat.otr.room.js
+++ b/packages/rocketchat-otr/client/rocketchat.otr.room.js
@@ -202,7 +202,7 @@ RocketChat.OTR.Room = class {
 					}
 
 					swal({
-						title: '<i class=\'icon-key alert-icon\'></i>' + TAPi18n.__('OTR'),
+						title: '<i class=\'icon-key alert-icon success-color\'></i>' + TAPi18n.__('OTR'),
 						text: TAPi18n.__('Username_wants_to_start_otr_Do_you_want_to_accept', { username: user.username }),
 						html: true,
 						showCancelButton: true,
@@ -237,7 +237,7 @@ RocketChat.OTR.Room = class {
 					this.reset();
 					const user = Meteor.users.findOne(this.peerId);
 					swal({
-						title: '<i class=\'icon-key alert-icon\'></i>' + TAPi18n.__('OTR'),
+						title: '<i class=\'icon-key alert-icon success-color\'></i>' + TAPi18n.__('OTR'),
 						text: TAPi18n.__('Username_denied_the_OTR_session', { username: user.username }),
 						html: true
 					});
@@ -249,7 +249,7 @@ RocketChat.OTR.Room = class {
 					this.reset();
 					const user = Meteor.users.findOne(this.peerId);
 					swal({
-						title: '<i class=\'icon-key alert-icon\'></i>' + TAPi18n.__('OTR'),
+						title: '<i class=\'icon-key alert-icon success-color\'></i>' + TAPi18n.__('OTR'),
 						text: TAPi18n.__('Username_ended_the_OTR_session', { username: user.username }),
 						html: true
 					});
diff --git a/packages/rocketchat-push-notifications/client/views/pushNotificationsFlexTab.html b/packages/rocketchat-push-notifications/client/views/pushNotificationsFlexTab.html
index 05becb953eb..edcc49c4c9f 100644
--- a/packages/rocketchat-push-notifications/client/views/pushNotificationsFlexTab.html
+++ b/packages/rocketchat-push-notifications/client/views/pushNotificationsFlexTab.html
@@ -15,9 +15,9 @@
 								<label><input type="radio" name="desktopNotifications" value="nothing" checked="{{$eq desktopNotifications 'nothing'}}" /> {{_ "Nothing"}}</label>
 								<br />
 								{{#if desktopNotificationDuration}}
-									<label>{{_ "Duration"}} ({{_ "seconds"}}) <input type="number" name="duration" min="0" value="{{desktopNotificationDuration}}"></label>
+									<label>{{_ "Duration"}} ({{_ "seconds"}}) <input type="number" name="duration" min="0" value="{{desktopNotificationDuration}}" class="content-background-color"></label>
 								{{else}}
-									<label>{{_ "Duration"}} ({{_ "seconds"}}) <input type="number" name="duration" min="0" value="" placeholder="{{_ "Use_User_Preferences_or_Global_Settings"}}"></label>
+									<label>{{_ "Duration"}} ({{_ "seconds"}}) <input type="number" name="duration" min="0" value="" placeholder="{{_ "Use_User_Preferences_or_Global_Settings"}}" class="content-background-color"></label>
 								{{/if}}
 
 								<button type="button" class="button cancel">{{_ "Cancel"}}</button>
@@ -68,7 +68,7 @@
 					</li>
 					{{#unless emailVerified}}
 					<li>
-						<div class="alert alert-warning">
+						<div class="alert alert-warning pending-background pending-border">
 							{{_ "You_wont_receive_email_notifications_because_you_have_not_verified_your_email"}}
 						</div>
 					</li>
diff --git a/packages/rocketchat-reactions/client/stylesheets/reaction.less b/packages/rocketchat-reactions/client/stylesheets/reaction.less
index 17a26351381..e16f4e2a9bb 100644
--- a/packages/rocketchat-reactions/client/stylesheets/reaction.less
+++ b/packages/rocketchat-reactions/client/stylesheets/reaction.less
@@ -48,7 +48,7 @@
 				color: #888888;
 				opacity: 0;
 				padding: 0 2px;
-				.transition(opacity 0.2s ease);
+				transition: opacity 0.2s ease;
 
 				html.rtl & {
 					margin-right: 10px;
diff --git a/packages/rocketchat-reactions/loadStylesheets.js b/packages/rocketchat-reactions/loadStylesheets.js
deleted file mode 100644
index 84dd4eef423..00000000000
--- a/packages/rocketchat-reactions/loadStylesheets.js
+++ /dev/null
@@ -1,3 +0,0 @@
-RocketChat.theme.addPackageAsset(function() {
-	return Assets.getText('client/stylesheets/reaction.less');
-});
diff --git a/packages/rocketchat-reactions/package.js b/packages/rocketchat-reactions/package.js
index 3134920987a..cc1b2ea8551 100644
--- a/packages/rocketchat-reactions/package.js
+++ b/packages/rocketchat-reactions/package.js
@@ -12,6 +12,7 @@ Package.onUse(function(api) {
 	api.use('rocketchat:lib');
 	api.use('rocketchat:theme');
 	api.use('rocketchat:ui');
+	api.use('less');
 
 	api.addFiles('client/init.js', 'client');
 
@@ -19,6 +20,5 @@ Package.onUse(function(api) {
 	api.addFiles('client/methods/setReaction.js', 'client');
 	api.addFiles('setReaction.js', 'server');
 
-	api.addAssets('client/stylesheets/reaction.less', 'server');
-	api.addFiles('loadStylesheets.js', 'server');
+	api.addFiles('client/stylesheets/reaction.less', 'client');
 });
diff --git a/packages/rocketchat-slackbridge/slackbridge.js b/packages/rocketchat-slackbridge/slackbridge.js
index 76c81933170..47e653f2f43 100644
--- a/packages/rocketchat-slackbridge/slackbridge.js
+++ b/packages/rocketchat-slackbridge/slackbridge.js
@@ -56,7 +56,12 @@ class SlackBridge {
 				}
 			});
 			Meteor.startup(() => {
-				this.populateSlackChannelMap(); // If run outside of Meteor.startup, HTTP is not defined
+				try {
+					this.populateSlackChannelMap(); // If run outside of Meteor.startup, HTTP is not defined
+				} catch (err) {
+					logger.class.error('Error attempting to connect to Slack', err);
+					this.disconnect();
+				}
 			});
 		}
 	}
diff --git a/packages/rocketchat-spotify/lib/client/oembedSpotifyWidget.html b/packages/rocketchat-spotify/lib/client/oembedSpotifyWidget.html
index afc14afc6f1..7ea5a42a827 100644
--- a/packages/rocketchat-spotify/lib/client/oembedSpotifyWidget.html
+++ b/packages/rocketchat-spotify/lib/client/oembedSpotifyWidget.html
@@ -1,6 +1,6 @@
 <template name="oembedSpotifyWidget">
 	{{#if parsedUrl}}
-		<blockquote>
+		<blockquote class="background-transparent-darker-before">
 			<a href="https://www.spotify.com" style="color: #9e9ea6">Spotify</a><br/>
 			{{#if match meta.ogAudio "spotify:artist:\\S+"}}
 				<a href="{{url}}">{{{meta.ogTitle}}}</a>
diff --git a/packages/rocketchat-theme/client/imports/base.less b/packages/rocketchat-theme/client/imports/base.less
index ef27d8c1237..8109efed66f 100644
--- a/packages/rocketchat-theme/client/imports/base.less
+++ b/packages/rocketchat-theme/client/imports/base.less
@@ -197,7 +197,7 @@ blockquote {
 			right: 0;
 			left: 0;
 			top: 0;
-			.transition(background-color, 0.5s, linear);
+			transition: background-color, 0.5s, linear;
 			height: 16px;
 		}
 
@@ -211,7 +211,7 @@ blockquote {
 			font-size: 12px;
 			line-height: 16px;
 			padding: 0 5px;
-			.transition(color, 0.5s, linear);
+			transition: color, 0.5s, linear;
 			left: 0;
 			text-align: center;
 		}
@@ -332,6 +332,24 @@ blockquote {
 			}
 		}
 	}
+
+	table {
+		overflow: hidden;
+		margin-bottom: 30px;
+		width: 100%;
+
+		th,
+		td {
+			vertical-align: middle;
+			padding: 0.6rem 0.7rem;
+			text-align: left;
+			border-width: 0 0 1px;
+		}
+
+		th {
+			white-space: nowrap;
+		}
+	}
 }
 
 .input-line {
@@ -555,7 +573,7 @@ input[type='password'] {
 input.input-forward {
 	width: 0;
 	visibility: hidden;
-	.transition(width 0.5s ease-in);
+	transition: width 0.5s ease-in;
 }
 
 input.input-forward.show {
@@ -670,6 +688,50 @@ label.required::after {
 		margin-bottom: 4px;
 		width: 100%;
 	}
+
+	&[disabled] {
+		cursor: initial;
+	}
+
+	&.external-login {
+		color: white;
+
+		&.facebook {
+			background-color: #325c99;
+		}
+
+		&.twitter {
+			background-color: #02acec;
+		}
+
+		&.google {
+			background-color: #dd4b39;
+		}
+
+		&.github {
+			background-color: #4c4c4c;
+		}
+
+		&.gitlab {
+			background-color: #373d47;
+		}
+
+		&.trello {
+			background-color: #026aa7;
+		}
+
+		&.meteor-developer {
+			background-color: #de4f4f;
+		}
+
+		&.wordpress {
+			background-color: #1e8cbe;
+		}
+
+		&.linkedin {
+			background-color: #1b86bc;
+		}
+	}
 }
 
 .buttons-group {
@@ -722,7 +784,7 @@ label.required::after {
 	top: 5px;
 	left: 0;
 	will-change: transform;
-	.transition(transform .2s ease-out .1s);
+	transition: transform 0.2s ease-out 0.1s;
 
 	i {
 		display: block;
@@ -730,7 +792,7 @@ label.required::after {
 		width: 20px;
 		margin: 5px 0;
 		opacity: 0.8;
-		.transition(transform .2s ease-out);
+		transition: transform 0.2s ease-out;
 	}
 
 	.unread-burger-alert {
@@ -787,12 +849,12 @@ label.required::after {
 
 	&::before {
 		.transform(rotate(135deg) translateX(-4px));
-		.transition(transform .185s ease-out, background .15s ease-out);
+		transition: transform 0.185s ease-out, background 0.15s ease-out;
 	}
 
 	&::after {
 		.transform(rotate(-135deg) translateX(-4px));
-		.transition(transform .185s ease-out, background .15s ease-out);
+		transition: transform 0.185s ease-out, background 0.15s ease-out;
 	}
 
 	&.left {
@@ -883,7 +945,7 @@ label.required::after {
 	height: auto;
 	opacity: 1;
 	visibility: visible;
-	.transition(opacity .2s ease-out);
+	transition: opacity 0.2s ease-out;
 
 	&.animated-hidden {
 		visibility: hidden;
@@ -954,7 +1016,7 @@ label.required::after {
 			position: relative;
 			width: 130px;
 			text-align: left;
-			.transition(color .15s ease-out);
+			transition: color 0.15s ease-out;
 		}
 	}
 
@@ -969,7 +1031,7 @@ label.required::after {
 		-webkit-overflow-scrolling: touch;
 		direction: rtl;
 		.calc(height, ~'100% - ' @header-min-height + @footer-min-height);
-		.transition(transform .3s cubic-bezier(.5, 0, .1, 1));
+		transition: transform 0.3s cubic-bezier(0.5, 0, 0.1, 1);
 		z-index: 99;
 
 		&.animated-hidden {
@@ -1052,7 +1114,7 @@ label.required::after {
 	overflow-y: auto;
 	overflow-x: hidden;
 	width: @rooms-box-width;
-	.transition(transform .15s cubic-bezier(.5, 0, .1, 1));
+	transition: transform 0.15s cubic-bezier(0.5, 0, 0.1, 1);
 
 	&.animated-hidden {
 		.transform(translateX(-100%));
@@ -1067,7 +1129,7 @@ label.required::after {
 	header,
 	footer,
 	.content {
-		.transition(transform .425s cubic-bezier(0, .8, .05, 1));
+		transition: transform 0.425s cubic-bezier(0, 0.8, 0.05, 1);
 	}
 
 	> section {
@@ -1419,7 +1481,7 @@ label.required::after {
 				top: 2px;
 				opacity: 0;
 				.transform(translateX(-10px));
-				.transition(opacity .15s ease .35s, transform .12s ease-out .35s);
+				transition: opacity 0.15s ease 0.35s, transform 0.12s ease-out 0.35s;
 			}
 
 			&:hover {
@@ -1474,7 +1536,7 @@ label.required::after {
 			opacity: 0;
 			display: block;
 			top: 7px;
-			.transition(opacity .12s ease);
+			transition: opacity 0.12s ease;
 
 			i {
 				margin: 0 1px;
@@ -1541,7 +1603,7 @@ label.required::after {
 		overflow: hidden;
 
 		&.has-unread {
-			.transition(max-height 1s ease-in, opacity .5s linear);
+			transition: max-height 1s ease-in, opacity 0.5s linear;
 			max-height: 5000px;
 			opacity: 1;
 		}
@@ -1721,34 +1783,6 @@ label.required::after {
 	}
 }
 
-.mobile-message-menu {
-	position: fixed;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	z-index: 1000;
-	justify-content: center;
-	padding: 0 40px;
-
-	> .buttons {
-		font-size: 24px;
-		position: absolute;
-		bottom: 0;
-		left: 10%;
-		right: 10%;
-
-		.button {
-			display: block;
-			text-align: center;
-		}
-	}
-
-	.mobile-menu-separator {
-		height: 10px;
-	}
-}
-
 // MAIN CONTENT + MAIN PAGES //
 
 .main-content {
@@ -1760,7 +1794,7 @@ label.required::after {
 	width: auto;
 	height: auto;
 	will-change: transform;
-	.transition(right .25s cubic-bezier(.5, 0, .1, 1));
+	transition: right 0.25s cubic-bezier(0.5, 0, 0.1, 1);
 
 	&.flex-opened {
 		right: @flex-tab-width + 40px;
@@ -2156,7 +2190,7 @@ label.required::after {
 	box-shadow:
 		0 1px 1px 0 rgba(0, 0, 0, 0.2),
 		0 2px 10px 0 rgba(0, 0, 0, 0.16);
-	.transition(transform 0.4s ease, visibility 0.3s ease, opacity 0.3s ease);
+	transition: transform 0.4s ease, visibility 0.3s ease, opacity 0.3s ease;
 	.transform(translateY(-10px));
 	opacity: 0;
 	visibility: hidden;
@@ -2182,7 +2216,7 @@ label.required::after {
 			height: 100%;
 			width: 0%;
 			z-index: 1;
-			.transition(width, 1s, ease-out);
+			transition: width, 1s, ease-out;
 		}
 
 		.upload-progress-text {
@@ -2311,7 +2345,7 @@ label.required::after {
 				align-items: center;
 				justify-content: center;
 				position: relative;
-				.transition(background-color 0.1s linear, color 0.1s linear);
+				transition: background-color 0.1s linear, color 0.1s linear;
 
 				i {
 					font-size: 18px;
@@ -2374,7 +2408,7 @@ label.required::after {
 			right: 20px;
 			opacity: 0.5;
 			white-space: nowrap;
-			.transition(opacity .2 linear);
+			transition: opacity 0.2 linear;
 
 			> * {
 				margin: 0 3px;
@@ -2567,7 +2601,7 @@ label.required::after {
 		bottom: 8px;
 		left: 50%;
 		z-index: 15;
-		.transition(transform 0.3s ease-out);
+		transition: transform 0.3s ease-out;
 		.transform(translateY(0));
 
 		&.not {
@@ -2588,18 +2622,17 @@ label.required::after {
 		right: 20px;
 		border-top-left-radius: 4px;
 		border-top-right-radius: 4px;
-
-		button {
-			.unselectable;
-			cursor: pointer;
-		}
-
-		.transition(transform 0.3s ease-out);
+		transition: transform 0.3s ease-out;
 		.transform(translateY(0));
 
 		&.not {
 			.transform(translateY(150%));
 		}
+
+		button {
+			.unselectable;
+			cursor: pointer;
+		}
 	}
 
 	.editing {
@@ -2919,7 +2952,7 @@ label.required::after {
 
 	.body {
 		opacity: 1;
-		.transition(opacity 1s linear);
+		transition: opacity 1s linear;
 		margin-top: 2px;
 
 		.inline-image {
@@ -3152,7 +3185,7 @@ body:not(.is-cordova) {
 	max-width: @flex-tab-width;
 	z-index: 110;
 	overflow-x: visible;
-	.transition(transform .25s cubic-bezier(.5, 0, .1, 1));
+	transition: transform 0.25s cubic-bezier(0.5, 0, 0.1, 1);
 
 	.control {
 		.header {
@@ -3181,11 +3214,11 @@ body:not(.is-cordova) {
 			border-width: 0 0 1px;
 			cursor: pointer;
 			.transform(translateX(-27px));
-			.transition(transform .25s ease-out .475s, background .075s ease-out .5s);
+			transition: transform 0.25s ease-out 0.475s, background 0.075s ease-out 0.5s;
 
 			i {
 				.transform-origin(50%, 50%, 0);
-				.transition(transform .3s ease-out);
+				transition: transform 0.3s ease-out;
 				height: 12.5px;
 				vertical-align: top;
 				margin-top: 1px;
@@ -3238,7 +3271,7 @@ body:not(.is-cordova) {
 		-webkit-overflow-scrolling: touch;
 
 		> div {
-			.transition(transform .45s cubic-bezier(.5, 0, 0, 1), opacity .125s ease-out .1s);
+			transition: transform 0.45s cubic-bezier(0.5, 0, 0, 1), opacity 0.125s ease-out 0.1s;
 		}
 
 		> .animated-hidden {
@@ -3518,7 +3551,7 @@ body:not(.is-cordova) {
 			padding: 0 5px;
 			line-height: 22px;
 			position: relative;
-			.transition(background .18s ease, colo .18s ease);
+			transition: background 0.18s ease, color 0.18s ease;
 
 			&::before {
 				content: attr(data-stats);
@@ -3572,7 +3605,7 @@ body:not(.is-cordova) {
 			padding: 0 5px;
 			line-height: 22px;
 			position: relative;
-			.transition(background .18s ease, colo .18s ease);
+			transition: background 0.18s ease, color 0.18s ease;
 
 			&::before {
 				content: attr(data-stats);
@@ -4237,8 +4270,8 @@ body:not(.is-cordova) {
 	flex-flow: row nowrap;
 	width: 100%;
 	padding: 12px;
-	border-width: 1px;
-	.transition(background-color .15s ease-out, border-color .15s ease-out);
+	border: 0;
+	transition: background-color 0.15s ease-out, border-color 0.15s ease-out;
 
 	&:first-child {
 		margin-top: 10px;
@@ -4300,23 +4333,6 @@ body:not(.is-cordova) {
 	}
 }
 
-.page-container table {
-	margin-bottom: 30px;
-	width: 100%;
-
-	th,
-	td {
-		vertical-align: middle;
-		padding: 0.6rem 0.7rem;
-		text-align: left;
-		border-width: 0 0 1px;
-	}
-
-	th {
-		white-space: nowrap;
-	}
-}
-
 .statistics-table {
 	margin-bottom: 30px;
 	width: 100%;
@@ -4399,10 +4415,10 @@ body:not(.is-cordova) {
 
 		.main-content,
 		.flex-tab-bar {
-			.transition(transform .2s linear);
+			transition: transform 0.2s linear;
 
 			&.notransition {
-				.transition(transform .0s);
+				transition: transform 0;
 			}
 		}
 
@@ -4494,13 +4510,6 @@ body:not(.is-cordova) {
 		padding-left: 10px;
 		padding-right: 10px;
 	}
-
-	.mobile-message-menu {
-		-webkit-user-select: none;
-		-moz-user-select: none;
-		-ms-user-select: none;
-		user-select: none;
-	}
 }
 
 @media all and(max-height: 480px) {
@@ -4533,6 +4542,13 @@ body:not(.is-cordova) {
 }
 
 .webrtc-video {
+	&.webrtc-video-overlay,
+	.main-video,
+	.state-overlay::before,
+	.videos .video-item {
+		color: #ffffff;
+	}
+
 	&.webrtc-video-overlay {
 		position: fixed;
 		left: 0;
@@ -4545,7 +4561,7 @@ body:not(.is-cordova) {
 		justify-content: center;
 
 		.main-video {
-			video {
+			.webrtc-video-element {
 				max-width: 100%;
 				width: auto;
 			}
@@ -4555,7 +4571,7 @@ body:not(.is-cordova) {
 	.main-video {
 		text-align: center;
 
-		video {
+		.webrtc-video-element {
 			width: 100%;
 			min-height: 299px;
 		}
@@ -4608,7 +4624,7 @@ body:not(.is-cordova) {
 				font-weight: bold;
 			}
 
-			video {
+			.webrtc-video-element {
 				height: 70px;
 				max-width: 100px;
 			}
@@ -4647,6 +4663,10 @@ body:not(.is-cordova) {
 	}
 }
 
+.webrtc-video-element {
+	background-color: #000000;
+}
+
 .alert-icon {
 	font-size: 80px;
 	display: block;
@@ -4724,22 +4744,23 @@ body:not(.is-cordova) {
 	padding: 8px 10px !important;
 	font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 	font-weight: 500;
-	-webkit-user-select: text;
-	-moz-user-select: text;
-	-ms-user-select: text;
-	user-select: text;
 	margin-bottom: 0 !important;
+	background-color: #444444 !important;
+	color: #ffffff;
+}
 
-	* {
-		-webkit-user-select: text;
-		-moz-user-select: text;
-		-ms-user-select: text;
-		user-select: text;
-	}
+.terminal-line {
+	word-break: break-all;
+}
 
-	> div {
-		word-break: break-all;
-	}
+.terminal-time {
+	color: #7f7f7f;
+}
+
+.code-colors {
+	background-color: #f8f8f8;
+	border-color: #cccccc;
+	color: #333333;
 }
 
 .new-logs {
@@ -4754,7 +4775,7 @@ body:not(.is-cordova) {
 	cursor: pointer;
 	bottom: 8px;
 	left: 50%;
-	.transition(transform 0.3s ease-out);
+	transition: transform 0.3s ease-out;
 	.transform(translateY(0));
 
 	&.not {
@@ -4774,7 +4795,7 @@ body:not(.is-cordova) {
 		margin-top: 5px;
 	}
 
-	pre {
+	.script-error {
 		font-size: 12px;
 		font-weight: bold;
 		padding: 6px;
@@ -4798,6 +4819,7 @@ body:not(.is-cordova) {
 	.buttons {
 		text-align: right;
 		border-width: 0 1px 1px;
+		background-color: #f7f7f7;
 	}
 
 	&.code-mirror-box-fullscreen {
diff --git a/packages/rocketchat-theme/client/imports/forms.less b/packages/rocketchat-theme/client/imports/forms.less
index 5a3fc7e3bf8..92f187a4dd7 100644
--- a/packages/rocketchat-theme/client/imports/forms.less
+++ b/packages/rocketchat-theme/client/imports/forms.less
@@ -43,7 +43,7 @@
 				height: 7px;
 				border-radius: 50%;
 				opacity: 0;
-				.transition(opacity .2s ease-out);
+				transition: opacity 0.2s ease-out;
 			}
 		}
 	}
@@ -85,7 +85,7 @@
 				width: 40px;
 				height: 16px;
 				border-radius: 50px;
-				.transition(background-color .2s ease-out);
+				transition: background-color 0.2s ease-out;
 			}
 
 			&::after {
@@ -97,7 +97,7 @@
 				width: 14px;
 				height: 14px;
 				z-index: 1;
-				.transition(left .2s ease-out);
+				transition: left 0.2s ease-out;
 			}
 		}
 	}
diff --git a/packages/rocketchat-theme/client/imports/lesshat.less b/packages/rocketchat-theme/client/imports/lesshat.less
index f114034c50c..0979dd5275e 100644
--- a/packages/rocketchat-theme/client/imports/lesshat.less
+++ b/packages/rocketchat-theme/client/imports/lesshat.less
@@ -49,17 +49,6 @@
 	transform-style: @process;
 }
 
-.transition(...) {
-	@process_webkit: ~`(function(r){r=r||"all 0 ease 0";var e=["background-size","border-radius","border-bottom-left-radius","border-bottom-right-radius","border-top-left-radius","border-top-right-radius","box-shadow","column","transform","filter"],t="-webkit-",o=/(?:\d)(?:ms|s)/gi,a=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%)/gi;return/^[^, ]*,/.test(r)&&(r=r.replace(/(?:,)(?![^(]*\))/g,"")),e.forEach(function(e,o){r.indexOf(e)!==-1&&(r=r.replace(new RegExp(e,"g"),function(r){return t+r}))}),o.test(r)||"0"===r||(r=r.replace(a,function(r){return r+=parseFloat(r,10)>10?"ms":"s"})),r})((function(){var r="@{arguments}";return r=r.replace(/^\[|\]$/g,"")})())`;
-	@process_moz: ~`(function(e){e=e||"all 0 ease 0";var n=["background-size","box-shadow","column","transform","filter"],r="-moz-",t=/(?:\d)(?:ms|s)/gi,a=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%)/gi;return/^[^, ]*,/.test(e)&&(e=e.replace(/(?:,)(?![^(]*\))/g,"")),n.forEach(function(n,t){e.indexOf(n)!==-1&&(e=e.replace(new RegExp(n,"g"),function(e){return r+e}))}),t.test(e)||"0"===e||(e=e.replace(a,function(e){return e+=parseFloat(e,10)>10?"ms":"s"})),e})((function(){var r="@{arguments}";return r=r.replace(/^\[|\]$/g,"")})())`;
-	@process_opera: ~`(function(e){e=e||"all 0 ease 0";var n=["transform"],r="-o-",t=/(?:\d)(?:ms|s)/gi,a=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%)/gi;return/^[^, ]*,/.test(e)&&(e=e.replace(/(?:,)(?![^(]*\))/g,"")),n.forEach(function(n,t){e.indexOf(n)!==-1&&(e=e.replace(new RegExp(n,"g"),function(e){return r+e}))}),t.test(e)||"0"===e||(e=e.replace(a,function(e){return e+=parseFloat(e,10)>10?"ms":"s"})),e})((function(){var r="@{arguments}";return r=r.replace(/^\[|\]$/g,"")})())`;
-	@process: ~`(function(n){n=n||"all 0 ease 0";var e=["-webkit-","-moz-","-o-",""],t=["column","transform","filter"],r=/(?:\d)(?:ms|s)/gi,o=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%)/gi;/^[^, ]*,/.test(n)&&(n=n.replace(/(?:,)(?![^(]*\))/g,""));var i=n.split(/(?:,)(?![^(]*\))/g);return i.forEach(function(n,r){t.forEach(function(t){n.indexOf(t)!==-1&&(i[r]="",e.forEach(function(o,a){i[r]+=n.trim().replace(new RegExp(t,"g"),function(n){return o+n}),a<e.length-1&&(i[r]+=",")}))})}),n=i.join(","),r.test(n)||"0"===n||(n=n.replace(o,function(n){return n+=parseFloat(n,10)>10?"ms":"s"})),n})((function(){var r="@{arguments}";return r=r.replace(/^\[|\]$/g,"")})())`;
-	-webkit-transition: @process_webkit;
-	-moz-transition: @process_moz;
-	-o-transition: @process_opera;
-	transition: @process;
-}
-
 .translate(...) {
 	@process: ~`(function(n){n=n||"0";var r=/\d/gi,t=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%|\.)/gi;return r.test(n)&&(n=n.replace(t,function(n){return 0==n&&n||n+"px"})),n})((function(){var r="@{arguments}";return r=r.replace(/^\[|\]$/g,"")})())`;
 	-webkit-transform: translate(@process);
diff --git a/packages/rocketchat-theme/client/imports/rtl.less b/packages/rocketchat-theme/client/imports/rtl.less
index 8ab8a28ebf1..123b9e68f4f 100644
--- a/packages/rocketchat-theme/client/imports/rtl.less
+++ b/packages/rocketchat-theme/client/imports/rtl.less
@@ -219,7 +219,7 @@
 	.main-content {
 		left: 40px;
 		right: @rooms-box-width;
-		.transition(left .25s cubic-bezier(.5, 0, .1, 1));
+		transition: left 0.25s cubic-bezier(0.5, 0, 0.1, 1);
 
 		&.flex-opened {
 			left: @flex-tab-width + 40px;
diff --git a/packages/rocketchat-theme/server/colors.less b/packages/rocketchat-theme/server/colors.less
index 81e03de440d..737a4c43284 100755
--- a/packages/rocketchat-theme/server/colors.less
+++ b/packages/rocketchat-theme/server/colors.less
@@ -15,10 +15,6 @@
 @error-contrast: contrast(@error-color);
 @pending-background: lighten(@pending-color, 45%);
 @pending-border: lighten(@pending-color, 30%);
-@window-border-color: @component-color;
-@code-background-color: #f8f8f8;
-@code-border-color: #cccccc;
-@code-font-color: #333333;
 
 /** ----------------------------------------------------------------------------
  * Transparency variables
@@ -32,87 +28,204 @@
 @transparent-lightest: rgba(255, 255, 255, 0.6);
 
 /** ----------------------------------------------------------------------------
- * Document components
+ * Classes for variables
  */
-html {
-	.custom-scroll(@transparent-dark, @custom-scrollbar-color, 0);
+
+// Major colors
+
+.content-background-color {
+	background-color: @content-background-color;
 }
 
-* {
-	.custom-scroll(@transparent-dark, @custom-scrollbar-color);
+.color-content-background-color {
+	color: @content-background-color;
 }
 
-body {
+.primary-background-color {
+	background-color: @primary-background-color;
+}
+
+.global-font-family {
 	font-family: @body-font-family;
+}
+
+.color-primary-font-color {
 	color: @primary-font-color;
+}
 
-	* {
-		border-color: @component-color;
-	}
+.color-primary-action-color {
+	color: @primary-action-color;
 }
 
-code {
-	background-color: @code-background-color;
-	border-color: @code-border-color;
-	color: @code-font-color;
+.background-primary-action-color {
+	background-color: @primary-action-color;
 }
 
-blockquote::before {
-	background-color: @transparent-darker;
+.secondary-background-color {
+	background-color: @secondary-background-color;
 }
 
-.filter-item {
+.border-secondary-background-color {
 	border-color: @secondary-background-color;
+}
 
-	&:hover {
-		border-color: @info-font-color;
-	}
+.secondary-font-color {
+	color: @secondary-font-color;
+}
 
-	&.active {
-		border-color: @primary-background-color;
-	}
+.border-component-color {
+	border-color: @component-color;
 }
 
-.info-font-color {
+.background-component-color {
+	background-color: @component-color;
+}
+
+.success-color {
+	color: @success-color;
+}
+
+.pending-color {
+	color: @pending-color;
+}
+
+.pending-background {
+	background-color: @pending-background;
+}
+
+.pending-border {
+	border-color: @pending-border;
+}
+
+.error-color {
+	color: @error-color;
+}
+
+.background-error-color {
+	background-color: @error-color;
+}
+
+.color-info-font-color {
 	color: @info-font-color;
 }
 
-.secondary-background-color {
-	background-color: @secondary-background-color;
+.background-info-font-color {
+	background-color: @info-font-color;
 }
 
-.main-content,
-.cms-page,
-.page-container {
-	background-color: @content-background-color;
+.background-attention-color {
+	background-color: @attention-color;
+}
 
-	header {
-		background-color: @content-background-color;
-		border-color: @component-color;
-	}
+// Minor Colors
+
+.tertiary-background-color {
+	background-color: @tertiary-background-color;
 }
 
-.page-container table {
-	overflow: hidden;
-	background-color: @secondary-background-color;
+.border-tertiary-background-color {
+	border-color: @tertiary-background-color;
+}
 
-	th,
-	td {
-		border-color: @component-color;
+// Derivative Colors
+
+.color-tertiary-font-color {
+	color: @tertiary-font-color;
+}
+
+.error-background {
+	background-color: @error-background;
+}
+
+.error-border {
+	border-color: @error-border;
+}
+
+.color-error-contrast {
+	color: @error-contrast;
+}
+
+// transparent
+
+.background-transparent-darkest {
+	background-color: @transparent-darkest;
+}
+
+.background-transparent-darker {
+	background-color: @transparent-darker;
+}
+
+.background-transparent-darker-hover:hover {
+	background-color: @transparent-darker;
+}
+
+.background-transparent-darker-before::before {
+	background-color: @transparent-darker;
+}
+
+.background-transparent-dark {
+	background-color: @transparent-dark;
+}
+
+.background-transparent-dark-hover:hover {
+	background-color: @transparent-dark;
+}
+
+.border-transparent-dark {
+	border-color: @transparent-dark;
+}
+
+.background-transparent-light {
+	background-color: @transparent-light;
+}
+
+.background-transparent-lightest {
+	background-color: @transparent-lightest;
+}
+
+// Derivative Colors
+.color-primary-action-contrast {
+	color: @primary-action-contrast;
+}
+
+/** ----------------------------------------------------------------------------
+ * Special components
+ */
+
+* {
+	-webkit-overflow-scrolling: touch;
+
+	&::-webkit-scrollbar {
+		height: 8px;
+		width: 8px;
+		background: @transparent-dark;
 	}
 
-	th {
-		background-color: @content-background-color;
+	&::-webkit-scrollbar-thumb {
+		background-color: @custom-scrollbar-color;
+		-webkit-border-radius: 50px;
 	}
 
-	tr {
-		background-color: @transparent-light;
+	&::-webkit-scrollbar-corner {
+		background-color: @transparent-dark;
+	}
+}
 
-		&:nth-of-type(even) {
-			background-color: @transparent-lightest;
-		}
+.filter-item {
+	&:hover {
+		border-color: @info-font-color;
 	}
 
+	&.active {
+		border-color: @primary-background-color;
+	}
+}
+
+/** ----------------------------------------------------------------------------
+ * Document components
+ */
+
+.page-container {
 	tr:hover td {
 		background-color: @content-background-color;
 	}
@@ -131,11 +244,6 @@ blockquote::before {
 .flex-nav {
 	.input-shade(@primary-background-contrast, @primary-background-color);
 
-	label,
-	legend {
-		color: @tertiary-font-color;
-	}
-
 	input {
 		&:focus {
 			border-color: fade(@primary-background-contrast, 50%);
@@ -153,23 +261,6 @@ blockquote::before {
 	&.setting-changed > label {
 		color: @selection-color;
 	}
-
-	i,
-	.settings-description {
-		color: @secondary-font-color;
-	}
-
-	.settings-alert {
-		background-color: @pending-background;
-		border-color: @pending-border;
-		color: @pending-color;
-	}
-}
-
-.emoji-filter {
-	input {
-		background-color: @content-background-color;
-	}
 }
 
 input:-webkit-autofill {
@@ -181,8 +272,8 @@ input:-webkit-autofill {
 	&.radio {
 		label {
 			&::before {
-				background-color: @content-background-color;
 				border-color: lighten(@secondary-background-contrast, 30%);
+				background-color: @content-background-color;
 			}
 
 			&::after {
@@ -221,9 +312,6 @@ input:-webkit-autofill {
 /** ----------------------------------------------------------------------------
  * Misc typography variants
  */
-a {
-	color: @primary-font-color;
-}
 
 a:active,
 a:hover {
@@ -242,48 +330,13 @@ a:hover {
 	}
 }
 
-.load-more .load-more-loading,
-.secondary-text {
-	color: @secondary-font-color;
-}
-
-.alert-icon {
-	color: @success-color;
-}
-
 .error {
-	background-color: @error-background;
 	border-color: @error-color;
-	color: @error-color;
 }
 
 /** ----------------------------------------------------------------------------
  * Admin and settings styles
  */
-.page-settings {
-	.content {
-		background-color: @transparent-dark;
-	}
-
-	.section {
-		background-color: @content-background-color;
-	}
-
-	.terminal {
-		background-color: #444444;
-		color: white;
-
-		.time {
-			color: @secondary-font-color;
-		}
-	}
-
-	.section-content {
-		.reset-setting i {
-			color: @error-contrast;
-		}
-	}
-}
 
 .page-list,
 .page-settings {
@@ -296,48 +349,19 @@ a:hover {
 	}
 }
 
-.settings-file-preview .preview.no-file {
+.admin-table-row {
 	background-color: @transparent-light;
-	color: @secondary-font-color;
-}
-
-.new-logs {
-	background: @primary-action-contrast;
-	color: @primary-action-color;
-}
-
-.code-error-box {
-	.title {
-		background-color: @error-color;
-		color: white;
-	}
 
-	pre {
-		color: @error-color;
-		border-color: @error-border;
+	&:nth-of-type(even) {
 		background-color: @transparent-lightest;
 	}
 }
 
-.code-mirror-box {
-	.buttons {
-		background-color: #f7f7f7;
-		// matches plugin styles
-	}
-
-	&.code-mirror-box-fullscreen {
-		background-color: @content-background-color;
-	}
+.new-logs {
+	background: @primary-action-contrast;
 }
 
 .avatar-suggestion-item {
-	background-color: @tertiary-background-color;
-
-	.avatar {
-		background-size: cover;
-		background-color: @tertiary-background-color;
-	}
-
 	.question-mark::before {
 		color: @secondary-font-color;
 	}
@@ -346,27 +370,10 @@ a:hover {
 /** ----------------------------------------------------------------------------
  * Asides (external to main application views)
  */
-.spotlight {
-	background-color: @transparent-darker;
-
-	> .spotlight-input {
-		background-color: @secondary-background-color;
-		color: @secondary-font-color;
-
-		> i {
-			color: @secondary-font-color;
-		}
-	}
-}
-
-.mobile-message-menu {
-	background-color: @transparent-dark;
-}
 
 .full-page,
 .page-loading {
 	.gradient(shade(@primary-background-color), @primary-background-color);
-	color: @tertiary-font-color;
 
 	a {
 		color: @tertiary-font-color;
@@ -375,15 +382,9 @@ a:hover {
 	a:hover {
 		color: @primary-background-contrast;
 	}
-
-	.spinner > div {
-		background-color: @primary-background-contrast;
-	}
 }
 
 #login-card {
-	color: @primary-font-color;
-	background-color: @content-background-color;
 	.input-shade(@primary-font-color, @content-background-color);
 
 	.input-text {
@@ -393,64 +394,16 @@ a:hover {
 	}
 }
 
-.dropzone.over .dropzone-overlay {
-	background-color: @transparent-darkest;
-	color: @content-background-color;
-
-	> div {
-		background-color: @transparent-darkest;
-	}
-}
-
 /** ----------------------------------------------------------------------------
  * Room components
  */
-.new-message {
-	color: @primary-action-contrast;
-	background-color: @primary-action-color;
-}
-
-.ticks-bar {
-	.tick {
-		background-color: @primary-action-color;
-	}
-
-	.tick-all {
-		background-color: @selection-color;
-	}
-}
-
-.room-not-found {
-	color: @error-color;
-}
-
-.favorite-room {
-	color: @pending-color;
-}
 
 .toggle-favorite {
 	color: @component-color;
 }
 
-.container-bars {
-	.upload-progress {
-		background-color: @component-color;
-		color: @primary-action-color;
-
-		&.upload-error {
-			background-color: @error-background;
-			border-color: @error-border;
-		}
-
-		.upload-progress-progress {
-			background-color: @success-background;
-		}
-	}
-
-	.unread-bar {
-		background-color: @component-color;
-		color: @primary-action-color;
-	}
+.upload-progress-progress {
+	background-color: @success-background;
 }
 
 .messages-container {
@@ -461,80 +414,40 @@ a:hover {
 	.footer {
 		background: @content-background-color;
 	}
+}
 
-	.message-form {
-		color: @secondary-font-color;
-
-		.input-message-container {
-			background-color: @content-background-color;
-		}
-
-		.message-buttons {
-			.buttonColors(lighten(@primary-font-color, 25%), @secondary-background-color);
-
-			&:hover {
-				background-color: mix(@secondary-background-color, contrast(@primary-font-color), 20%);
-			}
-		}
+.message-form {
+	.message-buttons {
+		.buttonColors(lighten(@primary-font-color, 25%), @secondary-background-color);
 
-		textarea {
-			&.editing {
-				background-color: lighten(@pending-color, 40%);
-			}
+		&:hover {
+			background-color: mix(@secondary-background-color, contrast(@primary-font-color), 20%);
 		}
 	}
 
-	.new-message {
-		color: @primary-action-contrast;
-		background-color: @primary-action-color;
-	}
-
-	.messages-box {
-		.jump-recent {
-			background-color: @component-color;
-		}
-
-		&.selectable .selected {
-			background-color: @selection-background;
-		}
-
-		.load-more span {
-			background-color: @secondary-background-color;
+	.message-form-text {
+		&.editing {
+			background-color: lighten(@pending-color, 40%);
 		}
 	}
 }
 
-.message-popup {
-	background: @content-background-color;
-}
-
-.message-popup-title {
-	background-color: @secondary-background-color;
-	// border-bottom-color: #E7E7E7;
-}
-
 .popup-item {
-	// color: @secondary-font-color;
-
 	&.selected {
 		color: @primary-action-contrast;
 		background-color: @primary-action-color;
 	}
-
-	span {
-		color: @secondary-font-color;
-	}
 }
 
 .messages-box {
-	.start {
-		color: @info-font-color;
+	&.selectable .selected {
+		background-color: @selection-background;
 	}
 
-	.editing .body,
-	textarea.editing {
-		background-color: lighten(@pending-color, 40%);
-	}
+	// .editing .body,
+	// textarea.editing {
+	// 	background-color: lighten(@pending-color, 40%);
+	// }
 }
 
 /** ----------------------------------------------------------------------------
@@ -561,55 +474,25 @@ a:hover {
 }
 
 .message {
-	.body {
-		color: @primary-font-color;
-	}
-
-	&.system .body {
-		color: @info-font-color;
-	}
-
-	&:hover {
-		background-color: @transparent-dark;
+	&.new-day::before {
+		background-color: @content-background-color;
 	}
 
-	.toggle-options {
-		color: @secondary-font-color;
+	&.new-day::after {
+		border-color: @component-color;
 	}
 
 	.message-dropdown,
 	.options-menu {
 		color: lighten(@primary-font-color, 13%);
-		background-color: @content-background-color;
 
 		ul li:hover {
 			background-color: @tertiary-background-color;
 		}
-
-		.message-dropdown-close {
-			background-color: @secondary-background-color;
-		}
-	}
-
-	&.new-day::before {
-		background-color: @content-background-color;
-	}
-
-	&.new-day::after,
-	.info,
-	.user-view,
-	.message-alias {
-		color: @info-font-color;
-		border-color: @component-color;
-	}
-
-	.user {
-		color: @primary-font-color;
 	}
 
 	.is-bot,
 	.role-tag {
-		background-color: @info-font-color;
 		color: contrast(@info-font-color);
 	}
 
@@ -617,42 +500,25 @@ a:hover {
 		.linkColors(@link-font-color, darken(@link-font-color, 10%));
 	}
 
-	a.mention-link {
-		color: @primary-action-color;
-
+	.mention-link {
 		&.mention-link-me {
 			color: @primary-action-contrast;
-			background-color: @primary-action-color;
 		}
 
 		&.mention-link-all {
 			color: @primary-action-contrast;
-			background-color: @attention-color;
 		}
 	}
 
 	.highlight-text {
 		background-color: @selection-background;
 	}
-
-	.attachment {
-		.attachment-block-border {
-			background-color: @info-font-color;
-		}
-	}
 }
 
 /** ----------------------------------------------------------------------------
  * Side nav
  */
 .side-nav {
-	color: @tertiary-font-color;
-	background-color: @primary-background-color;
-
-	* {
-		border-color: @transparent-darker;
-	}
-
 	a,
 	.info {
 		.linkColors(@tertiary-font-color, @tertiary-font-color);
@@ -663,37 +529,22 @@ a:hover {
 		background-color: @tertiary-font-color;
 	}
 
-	.info,
-	.options,
-	.content,
-	footer,
-	header {
-		background-color: @primary-background-color;
-	}
-
 	.rooms-list {
 		background-color: lighten(@primary-background-color, 2.5%);
 	}
 
-	h3:hover,
-	li:hover,
-	.more:hover,
-	.selected-users li {
-		background-color: @transparent-darker;
-	}
-
 	li.active {
 		background-color: @transparent-light !important;
 	}
 
-	i {
-		color: @transparent-lighter;
-	}
-
 	i.status-offline {
 		color: @transparent-lighter !important;
 	}
 
+	i {
+		color: @transparent-lighter;
+	}
+
 	.opt i:hover {
 		color: @transparent-lightest;
 	}
@@ -707,11 +558,6 @@ a:hover {
 		color: contrast(@success-color, #000000, #ffffff, 50%);
 	}
 
-	.unread-rooms {
-		background-color: @primary-action-color;
-		color: @primary-action-contrast;
-	}
-
 	.button {
 		.buttonColors(@tertiary-font-color, mix(@primary-action-color, @primary-background-color));
 	}
@@ -725,13 +571,9 @@ a:hover {
  * Flex tabs / admin fly-out panels
  */
 .flex-tab {
-	background-color: @secondary-background-color;
-
 	input,
 	select,
 	textarea {
-		background-color: @content-background-color;
-
 		&:focus {
 			border-color: lighten(@secondary-background-contrast, 30%);
 		}
@@ -751,8 +593,6 @@ a:hover {
 
 	.channel-settings {
 		.buttons {
-			background-color: @secondary-background-color;
-
 			.button {
 				.buttonColors(lighten(@primary-font-color, 25%), @secondary-background-color);
 			}
@@ -762,10 +602,6 @@ a:hover {
 			.buttonColors(lighten(@primary-font-color, 25%), @secondary-background-color);
 		}
 
-		.icon-ok {
-			color: inherit;
-		}
-
 		.input.checkbox.toggle {
 			input:checked + label::before {
 				background-color: @primary-background-color;
@@ -775,9 +611,6 @@ a:hover {
 }
 
 .flex-tab-bar {
-	background-color: @content-background-color;
-	border-color: @component-color;
-
 	.tab-button {
 		&:hover {
 			background-color: @secondary-background-color;
@@ -799,26 +632,6 @@ a:hover {
 	}
 }
 
-.webrtc-video {
-	&.webrtc-video-overlay,
-	.main-video,
-	.state-overlay::before,
-	.videos .video-item {
-		background-color: @transparent-darker;
-		color: white;
-	}
-
-	.main-video > div,
-	.video-muted-overlay,
-	.videos .video-item > div {
-		background-color: @transparent-darker;
-	}
-
-	video {
-		background-color: black;
-	}
-}
-
 /** ----------------------------------------------------------------------------
  * User status / user meta
  */
@@ -835,6 +648,11 @@ i.status-online {
 	border-color: darken(@status-online, 10%);
 }
 
+.account-box .status-offline .thumb::after,
+.account-box .status.offline::after {
+	background-color: @transparent-lighter;
+}
+
 i.status-away {
 	color: @status-away;
 }
@@ -872,30 +690,17 @@ i.status-offline {
 	border-color: darken(@status-offline, 10%);
 }
 
-.account-box .status-offline .thumb::after,
-.account-box .status.offline::after {
-	background-color: @transparent-lighter;
-}
-
-.popup-user-status {
-	border-color: @transparent-dark;
-}
-
-.popup-user-status-system {
-	border-color: transparent;
-}
+// .popup-user-status-system {
+// 	border-color: transparent;
+// }
 
-.user-view {
-	p {
-		color: @secondary-font-color;
-	}
-
-	.box::after,
-	.stats li,
-	.tags li {
-		background-color: @component-color;
-	}
-}
+// .user-view {
+// 	.box::after,
+// 	.stats li,
+// 	.tags li {
+// 		background-color: @component-color;
+// 	}
+// }
 
 /** ----------------------------------------------------------------------------
  * Buttons!
@@ -940,99 +745,25 @@ i.status-offline {
 			background-color: lighten(desaturate(@error-color, 50%), 30%);
 		}
 	}
-
-	&[disabled] {
-		cursor: initial;
-	}
-
-	&.external-login {
-		color: white;
-
-		&.facebook {
-			background-color: #325c99;
-		}
-
-		&.twitter {
-			background-color: #02acec;
-		}
-
-		&.google {
-			background-color: #dd4b39;
-		}
-
-		&.github {
-			background-color: #4c4c4c;
-		}
-
-		&.gitlab {
-			background-color: #373d47;
-		}
-
-		&.trello {
-			background-color: #026aa7;
-		}
-
-		&.meteor-developer {
-			background-color: #de4f4f;
-		}
-
-		&.wordpress {
-			background-color: #1e8cbe;
-		}
-
-		&.linkedin {
-			background-color: #1b86bc;
-		}
-	}
 }
 
 /** ----------------------------------------------------------------------------
  * Feedback and overlay content
  */
-.icon-ok,
-.feedback-success {
-	color: @success-color;
-}
-
-.feedback-warning {
-	color: @pending-color;
-}
-
-.feedback-error {
-	color: @error-color;
-}
-
-.livechat-form .error,
-.offline .error {
-	background-color: @error-background;
-}
 
 .alert-warning {
 	color: darken(@pending-color, 25%);
 	background-color: @pending-background;
-	border-color: @pending-border;
 }
 
 .alert-link {
 	.linkColors(@link-font-color, darken(@link-font-color, 10%));
 }
 
-.alert-danger {
-	color: @error-color;
-	background-color: @error-background;
-	border-color: @error-border;
-}
-
-.side-nav .input-error,
 label.required::after {
 	color: @error-color;
 }
 
-.burger .unread-burger-alert {
-	background-color: @error-color;
-	color: @error-contrast;
-}
-
 /** ----------------------------------------------------------------------------
  * Loading
  */
diff --git a/packages/rocketchat-theme/server/lesshat.less b/packages/rocketchat-theme/server/lesshat.less
index 4818288b2fe..cf7cf4758d6 100644
--- a/packages/rocketchat-theme/server/lesshat.less
+++ b/packages/rocketchat-theme/server/lesshat.less
@@ -12,36 +12,6 @@
 	transform: @process;
 }
 
-.transition(...) {
-	@process_webkit: ~`(function(r){r=r||"all 0 ease 0";var e=["background-size","border-radius","border-bottom-left-radius","border-bottom-right-radius","border-top-left-radius","border-top-right-radius","box-shadow","column","transform","filter"],t="-webkit-",o=/(?:\d)(?:ms|s)/gi,a=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%)/gi;return/^[^, ]*,/.test(r)&&(r=r.replace(/(?:,)(?![^(]*\))/g,"")),e.forEach(function(e,o){r.indexOf(e)!==-1&&(r=r.replace(new RegExp(e,"g"),function(r){return t+r}))}),o.test(r)||"0"===r||(r=r.replace(a,function(r){return r+=parseFloat(r,10)>10?"ms":"s"})),r})((function(){var r="@{arguments}";return r=r.replace(/^\[|\]$/g,"")})())`;
-	@process_moz: ~`(function(e){e=e||"all 0 ease 0";var n=["background-size","box-shadow","column","transform","filter"],r="-moz-",t=/(?:\d)(?:ms|s)/gi,a=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%)/gi;return/^[^, ]*,/.test(e)&&(e=e.replace(/(?:,)(?![^(]*\))/g,"")),n.forEach(function(n,t){e.indexOf(n)!==-1&&(e=e.replace(new RegExp(n,"g"),function(e){return r+e}))}),t.test(e)||"0"===e||(e=e.replace(a,function(e){return e+=parseFloat(e,10)>10?"ms":"s"})),e})((function(){var r="@{arguments}";return r=r.replace(/^\[|\]$/g,"")})())`;
-	@process_opera: ~`(function(e){e=e||"all 0 ease 0";var n=["transform"],r="-o-",t=/(?:\d)(?:ms|s)/gi,a=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%)/gi;return/^[^, ]*,/.test(e)&&(e=e.replace(/(?:,)(?![^(]*\))/g,"")),n.forEach(function(n,t){e.indexOf(n)!==-1&&(e=e.replace(new RegExp(n,"g"),function(e){return r+e}))}),t.test(e)||"0"===e||(e=e.replace(a,function(e){return e+=parseFloat(e,10)>10?"ms":"s"})),e})((function(){var r="@{arguments}";return r=r.replace(/^\[|\]$/g,"")})())`;
-	@process: ~`(function(n){n=n||"all 0 ease 0";var e=["-webkit-","-moz-","-o-",""],t=["column","transform","filter"],r=/(?:\d)(?:ms|s)/gi,o=/(?:\s|^)(\.?\d+\.?\d*)(?![^(]*\)|\w|%)/gi;/^[^, ]*,/.test(n)&&(n=n.replace(/(?:,)(?![^(]*\))/g,""));var i=n.split(/(?:,)(?![^(]*\))/g);return i.forEach(function(n,r){t.forEach(function(t){n.indexOf(t)!==-1&&(i[r]="",e.forEach(function(o,a){i[r]+=n.trim().replace(new RegExp(t,"g"),function(n){return o+n}),a<e.length-1&&(i[r]+=",")}))})}),n=i.join(","),r.test(n)||"0"===n||(n=n.replace(o,function(n){return n+=parseFloat(n,10)>10?"ms":"s"})),n})((function(){var r="@{arguments}";return r=r.replace(/^\[|\]$/g,"")})())`;
-	-webkit-transition: @process_webkit;
-	-moz-transition: @process_moz;
-	-o-transition: @process_opera;
-	transition: @process;
-}
-
-.custom-scroll(@background, @thumb, @width: 8px, @height: 8px) {
-	-webkit-overflow-scrolling: touch;
-
-	&::-webkit-scrollbar {
-		height: @height;
-		width: @width;
-		background: @background;
-	}
-
-	&::-webkit-scrollbar-thumb {
-		background-color: @thumb;
-		-webkit-border-radius: 50px;
-	}
-
-	&::-webkit-scrollbar-corner {
-		background-color: @background;
-	}
-}
-
 .gradient(@startColor: #eee, @endColor: white) {
 	background: linear-gradient(to top, @startColor, @endColor);
 }
diff --git a/packages/rocketchat-tooltip/loadStylesheet.js b/packages/rocketchat-tooltip/loadStylesheet.js
deleted file mode 100644
index 7cda63dac95..00000000000
--- a/packages/rocketchat-tooltip/loadStylesheet.js
+++ /dev/null
@@ -1,3 +0,0 @@
-RocketChat.theme.addPackageAsset(function() {
-	return Assets.getText('tooltip.less');
-});
diff --git a/packages/rocketchat-tooltip/package.js b/packages/rocketchat-tooltip/package.js
index 747c6da6b76..857ebbde68a 100644
--- a/packages/rocketchat-tooltip/package.js
+++ b/packages/rocketchat-tooltip/package.js
@@ -12,9 +12,9 @@ Package.onUse(function(api) {
 	api.use('rocketchat:lib');
 	api.use('rocketchat:theme');
 	api.use('rocketchat:ui-master');
+	api.use('less');
 
-	api.addAssets('tooltip.less', 'server');
-	api.addFiles('loadStylesheet.js', 'server');
+	api.addFiles('tooltip.less', 'client');
 
 	api.addFiles('rocketchat-tooltip.html', 'client');
 	api.addFiles('rocketchat-tooltip.js', 'client');
diff --git a/packages/rocketchat-tooltip/tooltip.less b/packages/rocketchat-tooltip/tooltip.less
index 28e4d240f2e..e79d9a547ab 100644
--- a/packages/rocketchat-tooltip/tooltip.less
+++ b/packages/rocketchat-tooltip/tooltip.less
@@ -10,7 +10,7 @@
 	opacity: 0;
 	max-width: 400px;
 	text-align: center;
-	.transition(opacity 0.3s ease);
+	transition: opacity 0.3s ease;
 
 	&.show {
 		visibility: visible;
diff --git a/packages/rocketchat-ui-account/account/account.html b/packages/rocketchat-ui-account/account/account.html
index c7b4d54829b..537dbcdf8dc 100644
--- a/packages/rocketchat-ui-account/account/account.html
+++ b/packages/rocketchat-ui-account/account/account.html
@@ -1,6 +1,6 @@
 <template name="account">
 	<section class="page-container page-home page-static">
-		<header class="fixed-title">
+		<header class="fixed-title border-component-color">
 			{{> burger}}
 			<h2>
 				<span class="room-title">{{_ "User_Settings"}}</span>
diff --git a/packages/rocketchat-ui-account/account/accountPreferences.html b/packages/rocketchat-ui-account/account/accountPreferences.html
index f45a8c40cd4..13d9f8c86b9 100644
--- a/packages/rocketchat-ui-account/account/accountPreferences.html
+++ b/packages/rocketchat-ui-account/account/accountPreferences.html
@@ -1,6 +1,6 @@
 <template name="accountPreferences">
 	<section class="page-container page-home page-static">
-		<header class="fixed-title">
+		<header class="fixed-title border-component-color">
 			{{> burger}}
 			<h2>
 				<span class="room-title">{{_ "Preferences"}}</span>
@@ -11,7 +11,7 @@
 				<fieldset>
 					<div class="section">
 						<h1>{{_ "Localization"}}</h1>
-						<div class="section-content">
+						<div class="section-content border-component-color">
 							<div class="input-line">
 								<label for="language">{{_ "Language"}}</label>
 								<div>
@@ -26,18 +26,18 @@
 					</div>
 					<div class="section">
 						<h1>{{_ "Messages"}}</h1>
-						<div class="section-content">
+						<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"></i> <span>{{_ "Test_Desktop_Notifications"}}</span></button></label>
+										<label><button class="button test-notifications"><i class="icon-comment-empty secondary-font-color"></i> <span>{{_ "Test_Desktop_Notifications"}}</span></button></label>
 									{{else}}
 										{{#if desktopNotificationDisabled}}
 											<label>{{_ "Desktop_Notifications_Disabled"}}</label>
 										{{else}}
-											<label><button class="button enable-notifications"><i class="icon-comment-empty"></i> <span>{{_ "Enable_Desktop_Notifications"}}</span></button></label>
+											<label><button class="button enable-notifications"><i class="icon-comment-empty secondary-font-color"></i> <span>{{_ "Enable_Desktop_Notifications"}}</span></button></label>
 										{{/if}}
 									{{/if}}
 								</div>
@@ -155,7 +155,7 @@
 					</div>
 					<div class="section">
 						<h1>{{_ "Highlights"}}</h1>
-						<div class="section-content">
+						<div class="section-content border-component-color">
 							<div class="input-line double-col">
 								<label>{{_ "Highlights_List"}}</label>
 								<div>
@@ -167,7 +167,7 @@
 					</div>
 					<div class="section">
 						<h1>{{_ "Sound"}}</h1>
-						<div class="section-content">
+						<div class="section-content border-component-color">
 							<div class="input-line double-col">
 								<label>{{_ "New_Room_Notification"}}</label>
 								<div>
diff --git a/packages/rocketchat-ui-account/account/accountProfile.html b/packages/rocketchat-ui-account/account/accountProfile.html
index 59e1ea725c8..2d67e2cfba7 100644
--- a/packages/rocketchat-ui-account/account/accountProfile.html
+++ b/packages/rocketchat-ui-account/account/accountProfile.html
@@ -1,6 +1,6 @@
 <template name="accountProfile">
 	<section class="page-container page-home page-static">
-		<header class="fixed-title">
+		<header class="fixed-title border-component-color">
 			{{> burger}}
 			<h2>
 				<span class="room-title">{{_ "Profile"}}</span>
@@ -30,7 +30,7 @@
 						<div>
 						{{#if emailVerified}}
 							<div class="right">
-								<i class="icon-ok" title="{{_ "Email_verified" }}"></i>
+								<i class="icon-ok success-color" title="{{_ "Email_verified" }}"></i>
 							</div>
 						{{/if}}
 						{{#if allowEmailChange}}
diff --git a/packages/rocketchat-ui-account/account/avatar/prompt.html b/packages/rocketchat-ui-account/account/avatar/prompt.html
index a3291b8c72d..f325f2dc0c3 100644
--- a/packages/rocketchat-ui-account/account/avatar/prompt.html
+++ b/packages/rocketchat-ui-account/account/avatar/prompt.html
@@ -1,7 +1,7 @@
 <template name="avatarSuggestion">
 	{{#if .}}
-		<div class="avatar-suggestion-item">
-			<div class="avatar" style="background-image: url({{blob}});">
+		<div class="avatar-suggestion-item tertiary-background-color">
+			<div class="avatar tertiary-background-color" style="background-image: url({{blob}});">
 			</div>
 			<div class="action">
 				<button type="button" class="button primary {{service}} select-service">{{_ "Use_service_avatar" service}}</button>
@@ -12,8 +12,8 @@
 
 <template name="avatarSuggestionLogin">
 	{{#if .}}
-		<div class="avatar-suggestion-item">
-			<div class="avatar question-mark icon-user"></div>
+		<div class="avatar-suggestion-item tertiary-background-color">
+			<div class="avatar question-mark icon-user tertiary-background-color"></div>
 			<div class="action">
 				<button type="button" class="button primary {{.}} login-with-service">{{_ "Login_with" .}}</button>
 			</div>
@@ -22,8 +22,8 @@
 </template>
 
 <template name="avatarPrompt">
-	<section class="page-container page-home page-static">
-		<header class="fixed-title">
+	<section class="page-container page-home page-static content-background-color">
+		<header class="fixed-title content-background-color border-component-color">
 			{{> burger}}
 			<h2>
 				<span class="room-title">{{_ "Select_an_avatar"}}</span>
@@ -31,12 +31,12 @@
 		</header>
 		<div class="content">
 			<div class="avatarPrompt">
-				<header>
+				<header class="content-background-color border-component-color">
 					<p>{{_ "Select_service_to_login"}}</p>
 				</header>
 				<div>
 					<div class="avatar-suggestions">
-						<div class="avatar-suggestion-item">
+						<div class="avatar-suggestion-item tertiary-background-color">
 							{{> avatar username=initialsUsername }}
 							{{#with service='initials'}}
 								<div class="action">
@@ -44,8 +44,8 @@
 								</div>
 							{{/with}}
 						</div>
-						<div class="avatar-suggestion-item">
-							<div style="background-image: url({{upload.blob}});" class="avatar {{#unless upload}}question-mark icon-upload{{/unless}}">
+						<div class="avatar-suggestion-item tertiary-background-color">
+							<div style="background-image: url({{upload.blob}});" class="avatar tertiary-background-color {{#unless upload}}question-mark icon-upload{{/unless}}">
 							</div>
 							<div class="action">
 								<div class="button primary">{{_ "Select_file"}}
@@ -56,9 +56,9 @@
 								{{/with}}
 							</div>
 						</div>
-						<div class="avatar-suggestion-item">
+						<div class="avatar-suggestion-item tertiary-background-color">
 							{{#with service='url'}}
-								<div class="avatar question-mark icon-upload"></div>
+								<div class="avatar question-mark icon-upload tertiary-background-color"></div>
 								<div class="action">
 									<div class="input-line">
 										<input type="text" name="avatarurl" id="avatarurl" />
diff --git a/packages/rocketchat-ui-admin/admin/admin.coffee b/packages/rocketchat-ui-admin/admin/admin.coffee
index a31a1b242e6..d07b49c3dfa 100644
--- a/packages/rocketchat-ui-admin/admin/admin.coffee
+++ b/packages/rocketchat-ui-admin/admin/admin.coffee
@@ -456,12 +456,12 @@ Template.admin.events
 
 	"click .button-fullscreen": ->
 		codeMirrorBox = $('.code-mirror-box[data-editor-id="'+this._id+'"]')
-		codeMirrorBox.addClass('code-mirror-box-fullscreen')
+		codeMirrorBox.addClass('code-mirror-box-fullscreen content-background-color')
 		codeMirrorBox.find('.CodeMirror')[0].CodeMirror.refresh()
 
 	"click .button-restore": ->
 		codeMirrorBox = $('.code-mirror-box[data-editor-id="'+this._id+'"]')
-		codeMirrorBox.removeClass('code-mirror-box-fullscreen')
+		codeMirrorBox.removeClass('code-mirror-box-fullscreen content-background-color')
 		codeMirrorBox.find('.CodeMirror')[0].CodeMirror.refresh()
 
 	'autocompleteselect .autocomplete': (event, instance, doc) ->
diff --git a/packages/rocketchat-ui-admin/admin/admin.html b/packages/rocketchat-ui-admin/admin/admin.html
index 3b0b4ef026e..9a814f4b9cf 100644
--- a/packages/rocketchat-ui-admin/admin/admin.html
+++ b/packages/rocketchat-ui-admin/admin/admin.html
@@ -1,6 +1,6 @@
 <template name="admin">
 	<section class="page-container page-home page-static page-settings">
-		<header class="fixed-title">
+		<header class="fixed-title border-component-color">
 			{{> burger}}
 			<h2>
 				<span class="room-title">{{#with group}}{{label}}{{/with}}</span>
@@ -15,7 +15,7 @@
 			{{/unless}}
 		</header>
 
-		<div class="content">
+		<div class="content background-transparent-dark">
 			{{#unless hasPermission 'view-privileged-setting'}}
 				<p>{{_ "You_are_not_authorized_to_view_this_page"}}</p>
 			{{else}}
@@ -39,7 +39,7 @@
 									</div>
 								</div>
 							{{/if}}
-							<div class="section-content">
+							<div class="section-content border-component-color">
 								{{#if section}}
 									{{#if sectionIsCustomOAuth section}}
 										<div class="section-helper">
@@ -80,7 +80,7 @@
 
 											{{#if $eq type 'select'}}
 												<div class="select-arrow">
-													<i class="icon-down-open"></i>
+													<i class="icon-down-open secondary-font-color"></i>
 												</div>
 												<select class="input-monitor" name="{{_id}}" {{isDisabled}}>
 													{{#each values}}
@@ -91,7 +91,7 @@
 
 											{{#if $eq type 'language'}}
 												<div class="select-arrow">
-													<i class="icon-down-open"></i>
+													<i class="icon-down-open secondary-font-color"></i>
 												</div>
 												<select class="input-monitor" name="{{_id}}" {{isDisabled}}>
 													{{#each languages}}
@@ -114,7 +114,7 @@
 													{{/if}}
 													<div class="color-editor">
 														<div class="select-arrow">
-															<i class="icon-down-open"></i>
+															<i class="icon-down-open secondary-font-color"></i>
 														</div>
 														<select name="color-editor">
 															{{#each allowedTypes}}
@@ -150,7 +150,7 @@
 
 											{{#if $eq type 'action'}}
 												{{#if hasChanges section}}
-													<span style="line-height: 40px" class="secondary-text">{{_ "Save_to_enable_this_action"}}</span>
+													<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}}" {{isDisabled}}>{{_ actionText}}</button>
 												{{/if}}
@@ -161,12 +161,12 @@
 													<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"></i>{{_ 'Delete'}}</button>
+															<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"><i class="icon-upload"></i></div>
+														<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}}" />
@@ -181,7 +181,7 @@
 													{{> 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"></i></li>
+															<li class="remove-room" data-setting={{../_id}}>{{name}} <i class="icon-cancel secondary-font-color"></i></li>
 														{{/each}}
 													</ul>
 												</div>
@@ -191,13 +191,13 @@
 												<div class="settings-description">{{{RocketChatMarkdown description}}}</div>
 											{{/if}}
 											{{#if alert}}
-												<div class="settings-alert"><i class="icon-attention"></i>{{{_ alert}}}</div>
+												<div class="settings-alert pending-color pending-background pending-border"><i class="icon-attention secondary-font-color"></i>{{{_ alert}}}</div>
 											{{/if}}
 										</div>
 										{{#unless $eq group._id 'Assets'}}
 											{{#unless isDefaultValue _id}}
 												<button text="{{_ 'Reset'}}" data-setting="{{_id}}" class="reset-setting button danger">
-													<i class="icon-ccw"></i>
+													<i class="icon-ccw secondary-font-color color-error-contrast"></i>
 												</button>
 											{{/unless}}
 										{{/unless}}
diff --git a/packages/rocketchat-ui-admin/admin/adminInfo.html b/packages/rocketchat-ui-admin/admin/adminInfo.html
index 2e8d9df21ad..b116f63ff15 100644
--- a/packages/rocketchat-ui-admin/admin/adminInfo.html
+++ b/packages/rocketchat-ui-admin/admin/adminInfo.html
@@ -1,6 +1,6 @@
 <template name="adminInfo">
 	<section class="page-container page-list">
-		<header class="fixed-title">
+		<header class="fixed-title border-component-color">
 			{{> burger}}
 			<h2>
 				<span class="room-title">{{_ "Info"}}</span>
@@ -9,186 +9,186 @@
 		<div class="content">
 			{{#if hasPermission 'view-statistics'}}
 				<h3>{{_ "Rocket.Chat"}}</h3>
-				<table class="statistics-table">
-					<tr>
-						<th>{{_ "Version"}}</th>
-						<td>{{statistics.version}}</td>
+				<table class="statistics-table secondary-background-color">
+					<tr class="admin-table-row">
+						<th class="content-background-color border-component-color">{{_ "Version"}}</th>
+						<td class="border-component-color">{{statistics.version}}</td>
 					</tr>
-					<tr>
-						<th>{{_ "DB_Migration"}}</th>
-						<td>{{statistics.migration.version}}</td>
+					<tr class="admin-table-row">
+						<th class="content-background-color border-component-color">{{_ "DB_Migration"}}</th>
+						<td class="border-component-color">{{statistics.migration.version}}</td>
 					</tr>
-					<tr>
-						<th>{{_ "DB_Migration_Date"}}</th>
-						<td>{{statistics.migration.lockedAt}}</td>
+					<tr class="admin-table-row">
+						<th class="content-background-color border-component-color">{{_ "DB_Migration_Date"}}</th>
+						<td class="border-component-color">{{statistics.migration.lockedAt}}</td>
 					</tr>
-					<tr>
-						<th>{{_ "Installed_at"}}</th>
-						<td>{{statistics.installedAt}}</td>
+					<tr class="admin-table-row">
+						<th class="content-background-color border-component-color">{{_ "Installed_at"}}</th>
+						<td class="border-component-color">{{statistics.installedAt}}</td>
 					</tr>
-					<tr>
-						<th>{{_ "Uptime"}}</th>
-						<td>{{humanReadableTime statistics.process.uptime}}</td>
+					<tr class="admin-table-row">
+						<th class="content-background-color border-component-color">{{_ "Uptime"}}</th>
+						<td class="border-component-color">{{humanReadableTime statistics.process.uptime}}</td>
 					</tr>
-					<tr>
-						<th>{{_ "Deployment_ID"}}</th>
-						<td>{{statistics.uniqueId}}</td>
+					<tr class="admin-table-row">
+						<th class="content-background-color border-component-color">{{_ "Deployment_ID"}}</th>
+						<td class="border-component-color">{{statistics.uniqueId}}</td>
 					</tr>
-					<tr>
-						<th>{{_ "PID"}}</th>
-						<td>{{statistics.process.pid}}</td>
+					<tr class="admin-table-row">
+						<th class="content-background-color border-component-color">{{_ "PID"}}</th>
+						<td class="border-component-color">{{statistics.process.pid}}</td>
 					</tr>
-					<tr>
-						<th>{{_ "Running_Instances"}}</th>
-						<td>{{statistics.instanceCount}}</td>
+					<tr class="admin-table-row">
+						<th class="content-background-color border-component-color">{{_ "Running_Instances"}}</th>
+						<td class="border-component-color">{{statistics.instanceCount}}</td>
 					</tr>
 				</table>
 			{{/if}}
 
 			<h3>{{_ "Commit"}}</h3>
-			<table class="statistics-table">
-				<tr>
-					<th>{{_ "Hash"}}</th>
-					<td>{{info.commit.hash}}</td>
+			<table class="statistics-table secondary-background-color">
+				<tr class="admin-table-row">
+					<th class="content-background-color border-component-color">{{_ "Hash"}}</th>
+					<td class="border-component-color">{{info.commit.hash}}</td>
 				</tr>
-				<tr>
-					<th>{{_ "Date"}}</th>
-					<td>{{info.commit.date}}</td>
+				<tr class="admin-table-row">
+					<th class="content-background-color border-component-color">{{_ "Date"}}</th>
+					<td class="border-component-color">{{info.commit.date}}</td>
 				</tr>
-				<tr>
-					<th>{{_ "Branch"}}</th>
-					<td>{{info.commit.branch}}</td>
+				<tr class="admin-table-row">
+					<th class="content-background-color border-component-color">{{_ "Branch"}}</th>
+					<td class="border-component-color">{{info.commit.branch}}</td>
 				</tr>
-				<tr>
-					<th>{{_ "Tag"}}</th>
-					<td>{{info.commit.tag}}</td>
+				<tr class="admin-table-row">
+					<th class="content-background-color border-component-color">{{_ "Tag"}}</th>
+					<td class="border-component-color">{{info.commit.tag}}</td>
 				</tr>
-				<tr>
-					<th>{{_ "Author"}}</th>
-					<td>{{info.commit.author}}</td>
+				<tr class="admin-table-row">
+					<th class="content-background-color border-component-color">{{_ "Author"}}</th>
+					<td class="border-component-color">{{info.commit.author}}</td>
 				</tr>
-				<tr>
-					<th>{{_ "Subject"}}</th>
-					<td>{{info.commit.subject}}</td>
+				<tr class="admin-table-row">
+					<th class="content-background-color border-component-color">{{_ "Subject"}}</th>
+					<td class="border-component-color">{{info.commit.subject}}</td>
 				</tr>
 			</table>
 
 			{{#if hasPermission 'view-statistics'}}
 				{{#if isReady}}
 					<h3>{{_ "Runtime_Environment"}}</h3>
-					<table class="statistics-table">
-						<tr>
-							<th>{{_ "OS_Type"}}</th>
-							<td>{{statistics.os.type}}</td>
+					<table class="statistics-table secondary-background-color">
+						<tr class="admin-table-row">
+							<th class="content-background-color border-component-color">{{_ "OS_Type"}}</th>
+							<td class="border-component-color">{{statistics.os.type}}</td>
 						</tr>
-						<tr>
-							<th>{{_ "OS_Platform"}}</th>
-							<td>{{statistics.os.platform}}</td>
+						<tr class="admin-table-row">
+							<th class="content-background-color border-component-color">{{_ "OS_Platform"}}</th>
+							<td class="border-component-color">{{statistics.os.platform}}</td>
 						</tr>
-						<tr>
-							<th>{{_ "OS_Arch"}}</th>
-							<td>{{statistics.os.arch}}</td>
+						<tr class="admin-table-row">
+							<th class="content-background-color border-component-color">{{_ "OS_Arch"}}</th>
+							<td class="border-component-color">{{statistics.os.arch}}</td>
 						</tr>
-						<tr>
-							<th>{{_ "OS_Release"}}</th>
-							<td>{{statistics.os.release}}</td>
+						<tr class="admin-table-row">
+							<th class="content-background-color border-component-color">{{_ "OS_Release"}}</th>
+							<td class="border-component-color">{{statistics.os.release}}</td>
 						</tr>
-						<tr>
-							<th>{{_ "Node_version"}}</th>
-							<td>{{statistics.process.nodeVersion}}</td>
+						<tr class="admin-table-row">
+							<th class="content-background-color border-component-color">{{_ "Node_version"}}</th>
+							<td class="border-component-color">{{statistics.process.nodeVersion}}</td>
 						</tr>
-						<tr>
-							<th>{{_ "OS_Uptime"}}</th>
-							<td>{{humanReadableTime statistics.os.uptime}}</td>
+						<tr class="admin-table-row">
+							<th class="content-background-color border-component-color">{{_ "OS_Uptime"}}</th>
+							<td class="border-component-color">{{humanReadableTime statistics.os.uptime}}</td>
 						</tr>
-						<tr>
-							<th>{{_ "OS_Loadavg"}}</th>
-							<td>{{numFormat statistics.os.loadavg.[0]}}, {{numFormat statistics.os.loadavg.[1]}}, {{numFormat statistics.os.loadavg.[2]}}</td>
+						<tr class="admin-table-row">
+							<th class="content-background-color border-component-color">{{_ "OS_Loadavg"}}</th>
+							<td class="border-component-color">{{numFormat statistics.os.loadavg.[0]}}, {{numFormat statistics.os.loadavg.[1]}}, {{numFormat statistics.os.loadavg.[2]}}</td>
 						</tr>
-						<tr>
-							<th>{{_ "OS_Totalmem"}}</th>
-							<td>{{inGB statistics.os.totalmem}}</td>
+						<tr class="admin-table-row">
+							<th class="content-background-color border-component-color">{{_ "OS_Totalmem"}}</th>
+							<td class="border-component-color">{{inGB statistics.os.totalmem}}</td>
 						</tr>
-						<tr>
-							<th>{{_ "OS_Freemem"}}</th>
-							<td>{{inGB statistics.os.freemem}}</td>
+						<tr class="admin-table-row">
+							<th class="content-background-color border-component-color">{{_ "OS_Freemem"}}</th>
+							<td class="border-component-color">{{inGB statistics.os.freemem}}</td>
 						</tr>
-						<tr>
-							<th>{{_ "OS_Cpus"}}</th>
-							<td>{{statistics.os.cpus.length}}</td>
+						<tr class="admin-table-row">
+							<th class="content-background-color border-component-color">{{_ "OS_Cpus"}}</th>
+							<td class="border-component-color">{{statistics.os.cpus.length}}</td>
 						</tr>
 					</table>
 
 					<h3>{{_ "Build_Environment"}}</h3>
-					<table class="statistics-table">
-						<tr>
-							<th>{{_ "OS_Platform"}}</th>
-							<td>{{build.platform}}</td>
+					<table class="statistics-table secondary-background-color">
+						<tr class="admin-table-row">
+							<th class="content-background-color border-component-color">{{_ "OS_Platform"}}</th>
+							<td class="border-component-color">{{build.platform}}</td>
 						</tr>
-						<tr>
-							<th>{{_ "OS_Arch"}}</th>
-							<td>{{build.arch}}</td>
+						<tr class="admin-table-row">
+							<th class="content-background-color border-component-color">{{_ "OS_Arch"}}</th>
+							<td class="border-component-color">{{build.arch}}</td>
 						</tr>
-						<tr>
-							<th>{{_ "OS_Release"}}</th>
-							<td>{{build.osRelease}}</td>
+						<tr class="admin-table-row">
+							<th class="content-background-color border-component-color">{{_ "OS_Release"}}</th>
+							<td class="border-component-color">{{build.osRelease}}</td>
 						</tr>
-						<tr>
-							<th>{{_ "Node_version"}}</th>
-							<td>{{build.nodeVersion}}</td>
+						<tr class="admin-table-row">
+							<th class="content-background-color border-component-color">{{_ "Node_version"}}</th>
+							<td class="border-component-color">{{build.nodeVersion}}</td>
 						</tr>
-						<tr>
-							<th>{{_ "Date"}}</th>
-							<td>{{formatDate build.date}}</td>
+						<tr class="admin-table-row">
+							<th class="content-background-color border-component-color">{{_ "Date"}}</th>
+							<td class="border-component-color">{{formatDate build.date}}</td>
 						</tr>
 					</table>
 
 
 					<h3>{{_ "Usage"}}</h3>
-					<table class="statistics-table">
-						<tr>
-							<th>{{_ "Stats_Total_Users"}}</th>
-							<td>{{statistics.totalUsers}}</td>
-						</tr>
-						<tr>
-							<th>{{_ "Stats_Active_Users"}}</th>
-							<td>{{statistics.activeUsers}}</td>
-						</tr>
-						<tr>
-							<th>{{_ "Stats_Non_Active_Users"}}</th>
-							<td>{{statistics.nonActiveUsers}}</td>
-						</tr>
-						<tr>
-							<th>{{_ "Stats_Online_Users"}}</th>
-							<td>{{statistics.onlineUsers}}</td>
-						</tr>
-						<tr>
-							<th>{{_ "Stats_Away_Users"}}</th>
-							<td>{{statistics.awayUsers}}</td>
-						</tr>
-						<tr>
-							<th>{{_ "Stats_Offline_Users"}}</th>
-							<td>{{statistics.offlineUsers}}</td>
-						</tr>
-						<tr>
-							<th>{{_ "Stats_Total_Rooms"}}</th>
-							<td>{{statistics.totalRooms}}</td>
-						</tr>
-						<tr>
-							<th>{{_ "Stats_Total_Channels"}}</th>
-							<td>{{statistics.totalChannels}}</td>
-						</tr>
-						<tr>
-							<th>{{_ "Stats_Total_Private_Groups"}}</th>
-							<td>{{statistics.totalPrivateGroups}}</td>
-						</tr>
-						<tr>
-							<th>{{_ "Stats_Total_Direct_Messages"}}</th>
-							<td>{{statistics.totalDirect}}</td>
-						</tr>
-						<tr>
-							<th>{{_ "Stats_Total_Messages"}}</th>
-							<td>{{statistics.totalMessages}}</td>
+					<table class="statistics-table secondary-background-color">
+						<tr class="admin-table-row">
+							<th class="content-background-color border-component-color">{{_ "Stats_Total_Users"}}</th>
+							<td class="border-component-color">{{statistics.totalUsers}}</td>
+						</tr>
+						<tr class="admin-table-row">
+							<th class="content-background-color border-component-color">{{_ "Stats_Active_Users"}}</th>
+							<td class="border-component-color">{{statistics.activeUsers}}</td>
+						</tr>
+						<tr class="admin-table-row">
+							<th class="content-background-color border-component-color">{{_ "Stats_Non_Active_Users"}}</th>
+							<td class="border-component-color">{{statistics.nonActiveUsers}}</td>
+						</tr>
+						<tr class="admin-table-row">
+							<th class="content-background-color border-component-color">{{_ "Stats_Online_Users"}}</th>
+							<td class="border-component-color">{{statistics.onlineUsers}}</td>
+						</tr>
+						<tr class="admin-table-row">
+							<th class="content-background-color border-component-color">{{_ "Stats_Away_Users"}}</th>
+							<td class="border-component-color">{{statistics.awayUsers}}</td>
+						</tr>
+						<tr class="admin-table-row">
+							<th class="content-background-color border-component-color">{{_ "Stats_Offline_Users"}}</th>
+							<td class="border-component-color">{{statistics.offlineUsers}}</td>
+						</tr>
+						<tr class="admin-table-row">
+							<th class="content-background-color border-component-color">{{_ "Stats_Total_Rooms"}}</th>
+							<td class="border-component-color">{{statistics.totalRooms}}</td>
+						</tr>
+						<tr class="admin-table-row">
+							<th class="content-background-color border-component-color">{{_ "Stats_Total_Channels"}}</th>
+							<td class="border-component-color">{{statistics.totalChannels}}</td>
+						</tr>
+						<tr class="admin-table-row">
+							<th class="content-background-color border-component-color">{{_ "Stats_Total_Private_Groups"}}</th>
+							<td class="border-component-color">{{statistics.totalPrivateGroups}}</td>
+						</tr>
+						<tr class="admin-table-row">
+							<th class="content-background-color border-component-color">{{_ "Stats_Total_Direct_Messages"}}</th>
+							<td class="border-component-color">{{statistics.totalDirect}}</td>
+						</tr>
+						<tr class="admin-table-row">
+							<th class="content-background-color border-component-color">{{_ "Stats_Total_Messages"}}</th>
+							<td class="border-component-color">{{statistics.totalMessages}}</td>
 						</tr>
 					</table>
 
diff --git a/packages/rocketchat-ui-admin/admin/rooms/adminRoomInfo.html b/packages/rocketchat-ui-admin/admin/rooms/adminRoomInfo.html
index 7544c1facd4..48655d97716 100644
--- a/packages/rocketchat-ui-admin/admin/rooms/adminRoomInfo.html
+++ b/packages/rocketchat-ui-admin/admin/rooms/adminRoomInfo.html
@@ -12,7 +12,7 @@
 								<label>{{_ "Name"}}</label>
 								<div>
 									{{#if editing 'roomName'}}
-										<input type="text" name="roomName" value="{{roomName}}" class="editing" />
+										<input type="text" name="roomName" value="{{roomName}}" class="content-background-color editing" />
 										<button type="button" class="button cancel">{{_ "Cancel"}}</button>
 										<button type="button" class="button primary save">{{_ "Save"}}</button>
 									{{else}}
@@ -25,7 +25,7 @@
 							<label>{{_ "Topic"}}</label>
 							<div>
 								{{#if editing 'roomTopic'}}
-									<input type="text" name="roomTopic" value="{{roomTopic}}" class="editing" />
+									<input type="text" name="roomTopic" value="{{roomTopic}}" class="content-background-color editing" />
 									<button type="button" class="button cancel">{{_ "Cancel"}}</button>
 									<button type="button" class="button primary save">{{_ "Save"}}</button>
 								{{else}}
diff --git a/packages/rocketchat-ui-admin/admin/rooms/adminRooms.html b/packages/rocketchat-ui-admin/admin/rooms/adminRooms.html
index 8315a3d9128..74522f97b79 100644
--- a/packages/rocketchat-ui-admin/admin/rooms/adminRooms.html
+++ b/packages/rocketchat-ui-admin/admin/rooms/adminRooms.html
@@ -1,6 +1,6 @@
 <template name="adminRooms">
 	<section class="page-container page-list">
-		<header class="fixed-title">
+		<header class="fixed-title border-component-color">
 			{{> burger}}
 			<h2>
 				<span class="room-title">{{_ "Rooms"}}</span>
@@ -13,7 +13,7 @@
 				<form class="search-form" role="form">
 					<div class="input-line search">
 						<input type="text" id="rooms-filter" placeholder="{{_ "Search"}}" dir="auto">
-						<i class="icon-search"></i>
+						<i class="icon-search secondary-font-color"></i>
 						{{#unless isReady}}<i class="icon-spin"></i>{{/unless}}
 					</div>
 					<label><input type="checkbox" name="room-type" value="c"> {{_ "Channels"}}</label>
@@ -24,24 +24,24 @@
 					{{{_ "Showing_results" roomCount}}}
 				</div>
 				<div class="list">
-					<table>
+					<table class="secondary-background-color">
 						<thead>
-							<tr>
-								<th width="30%">{{_ "Name"}}</th>
-								<th width="20%">{{_ "Type"}}</th>
-								<th width="20%">{{_ "Users"}}</th>
-								<th width="10%">{{_ "Msgs"}}</th>
-								<th width="20%">{{_ "Default"}}</th>
+							<tr class="admin-table-row">
+								<th class="content-background-color border-component-color" width="30%">{{_ "Name"}}</th>
+								<th class="content-background-color border-component-color" width="20%">{{_ "Type"}}</th>
+								<th class="content-background-color border-component-color" width="20%">{{_ "Users"}}</th>
+								<th class="content-background-color border-component-color" width="10%">{{_ "Msgs"}}</th>
+								<th class="content-background-color border-component-color" width="20%">{{_ "Default"}}</th>
 							</tr>
 						</thead>
 						<tbody>
 							{{#each rooms}}
 							<tr class="room-info row-link">
-								<td>{{name}}</td>
-								<td>{{type}}</td>
-								<td>{{usernames.length}}</td>
-								<td>{{msgs}}</td>
-								<td>{{default}}</td>
+								<td class="border-component-color">{{name}}</td>
+								<td class="border-component-color">{{type}}</td>
+								<td class="border-component-color">{{usernames.length}}</td>
+								<td class="border-component-color">{{msgs}}</td>
+								<td class="border-component-color">{{default}}</td>
 							</tr>
 							{{/each}}
 						</tbody>
@@ -53,7 +53,7 @@
 			{{/unless}}
 		</div>
 	</section>
-	<section class="flex-tab">
+	<section class="flex-tab secondary-background-color">
 		{{> Template.dynamic template=flexTemplate data=flexData}}
 	</section>
 </template>
diff --git a/packages/rocketchat-ui-admin/admin/users/adminInviteUser.html b/packages/rocketchat-ui-admin/admin/users/adminInviteUser.html
index 78991c1a997..439484d64ec 100644
--- a/packages/rocketchat-ui-admin/admin/users/adminInviteUser.html
+++ b/packages/rocketchat-ui-admin/admin/users/adminInviteUser.html
@@ -5,7 +5,7 @@
 				<h3>{{_ "Send_invitation_email"}}</h3>
 				<div class="input-line">
 					<label for="inviteEmails">{{_ "Send_invitation_email_info"}}</label>
-					<textarea id="inviteEmails" rows="3" style="height: auto"></textarea>
+					<textarea id="inviteEmails" rows="3" style="height: auto" class="content-background-color"></textarea>
 				</div>
 			</form>
 		</div>
diff --git a/packages/rocketchat-ui-admin/admin/users/adminUsers.html b/packages/rocketchat-ui-admin/admin/users/adminUsers.html
index cab9a39673c..bbdbe94c55e 100644
--- a/packages/rocketchat-ui-admin/admin/users/adminUsers.html
+++ b/packages/rocketchat-ui-admin/admin/users/adminUsers.html
@@ -1,6 +1,6 @@
 <template name="adminUsers">
 	<section class="page-container page-list">
-		<header class="fixed-title">
+		<header class="fixed-title border-component-color">
 			{{> burger}}
 			<h2>
 				<span class="room-title">{{_ "Users"}}</span>
@@ -13,34 +13,34 @@
 				<form class="search-form" role="form">
 					<div class="input-line search">
 						<input type="text" id="users-filter" placeholder="{{_ "Search"}}" dir="auto">
-						<i class="icon-search"></i>
-						{{#unless isReady}}<i class="icon-spin"></i>{{/unless}}
+						<i class="icon-search secondary-font-color"></i>
+						{{#unless isReady}}<i class="icon-spin secondary-font-color"></i>{{/unless}}
 					</div>
 				</form>
 				<div class="results">
 					{{{_ "Showing_results" users.length}}}
 				</div>
 				<div class="list">
-					<table>
+					<table class="secondary-background-color">
 						<thead>
-							<tr>
-								<th>&nbsp;</th>
-								<th width="34%">{{_ "Name"}}</th>
-								<th width="33%">{{_ "Username"}}</th>
-								<th width="33%">{{_ "Email"}}</th>
+							<tr class="admin-table-row">
+								<th class="content-background-color border-component-color">&nbsp;</th>
+								<th class="content-background-color border-component-color" width="34%">{{_ "Name"}}</th>
+								<th class="content-background-color border-component-color" width="33%">{{_ "Username"}}</th>
+								<th class="content-background-color border-component-color" width="33%">{{_ "Email"}}</th>
 							</tr>
 						</thead>
 						<tbody>
 							{{#each users}}
 							<tr class="user-info row-link">
-								<td>
+								<td class="border-component-color">
 									<div class="user-image status-{{status}}">
 										{{> avatar username=username}}
 									</div>
 								</td>
-								<td>{{name}}</td>
-								<td>{{username}}</td>
-								<td>{{emailAddress}}</td>
+								<td class="border-component-color">{{name}}</td>
+								<td class="border-component-color">{{username}}</td>
+								<td class="border-component-color">{{emailAddress}}</td>
 							</tr>
 							{{/each}}
 						</tbody>
@@ -52,7 +52,7 @@
 			{{/unless}}
 		</div>
 	</section>
-	<section class="flex-tab">
+	<section class="flex-tab secondary-background-color">
 		{{> Template.dynamic template=flexTemplate data=flexData}}
 	</section>
 </template>
diff --git a/packages/rocketchat-ui-flextab/flex-tab/tabs/membersList.html b/packages/rocketchat-ui-flextab/flex-tab/tabs/membersList.html
index 7320c2502e4..4f1675dead8 100644
--- a/packages/rocketchat-ui-flextab/flex-tab/tabs/membersList.html
+++ b/packages/rocketchat-ui-flextab/flex-tab/tabs/membersList.html
@@ -11,8 +11,8 @@
 							<div class="control">
 								<div class="search-form">
 									<div class="input-line search">
-										{{> inputAutocomplete settings=autocompleteSettingsAddUser id="user-add-search" class="search" placeholder=tAddUsers}}
-										<i class="icon-plus"></i>
+										{{> inputAutocomplete settings=autocompleteSettingsAddUser id="user-add-search" class="search content-background-color" placeholder=tAddUsers}}
+										<i class="icon-plus secondary-font-color"></i>
 									</div>
 								</div>
 							</div>
diff --git a/packages/rocketchat-ui-flextab/flex-tab/tabs/messageSearch.html b/packages/rocketchat-ui-flextab/flex-tab/tabs/messageSearch.html
index bfb77c7e6dc..540b8b3ba6e 100644
--- a/packages/rocketchat-ui-flextab/flex-tab/tabs/messageSearch.html
+++ b/packages/rocketchat-ui-flextab/flex-tab/tabs/messageSearch.html
@@ -3,13 +3,13 @@
 		<div class="list-view search-messages-list">
 			<div class="title">
 				<h2>{{_ "Search_Messages"}}</h2>
-				<p>{{_ "You_can_search_using_RegExp_eg"}} <code class="inline">/^text$/i</code></p>
+				<p>{{_ "You_can_search_using_RegExp_eg"}} <code class="code-colors inline">/^text$/i</code></p>
 			</div>
 			<div class="control">
 				<form class="search-form" role="form">
 					<div class="input-line search">
-						<input type="text" id="message-search" class="search" placeholder="{{tSearchMessages}}" autocomplete="off" />
-						<i class="icon-search"></i>
+						<input type="text" id="message-search" class="search content-background-color" placeholder="{{tSearchMessages}}" autocomplete="off" />
+						<i class="icon-search secondary-font-color"></i>
 					</div>
 				</form>
 			</div>
diff --git a/packages/rocketchat-ui-flextab/flex-tab/tabs/userEdit.html b/packages/rocketchat-ui-flextab/flex-tab/tabs/userEdit.html
index 7fd15324403..f05851461c5 100644
--- a/packages/rocketchat-ui-flextab/flex-tab/tabs/userEdit.html
+++ b/packages/rocketchat-ui-flextab/flex-tab/tabs/userEdit.html
@@ -1,6 +1,6 @@
 <template name="userEdit">
 	{{#unless canEditOrAdd}}
-		<p>{{_ "You_are_not_authorized_to_view_this_page"}}</p>
+		<p class="secondary-font-color">{{_ "You_are_not_authorized_to_view_this_page"}}</p>
 	{{else}}
 		<div class="about clearfix">
 			<form class="edit-form" autocomplete="off">
diff --git a/packages/rocketchat-ui-flextab/flex-tab/tabs/userInfo.html b/packages/rocketchat-ui-flextab/flex-tab/tabs/userInfo.html
index 2baa529d851..4d31d1bb69e 100644
--- a/packages/rocketchat-ui-flextab/flex-tab/tabs/userInfo.html
+++ b/packages/rocketchat-ui-flextab/flex-tab/tabs/userInfo.html
@@ -12,30 +12,30 @@
 				</div>
 				<div class="info">
 					<h3 title="{{username}}"><i class="status-{{status}}"></i> {{username}}</h3>
-					<p>{{name}}</p>
-					<p>
+					<p class="secondary-font-color">{{name}}</p>
+					<p class="secondary-font-color">
 						{{#each roleTags}}
 							<span class="role-tag" data-role="{{description}}">{{description}}</span>
 						{{/each}}
 					</p>
-					{{#if utc}}<p><i class="icon-clock"></i>{{userTime}} (UTC {{utc}})</p>{{/if}}
+					{{#if utc}}<p class="secondary-font-color"><i class="icon-clock"></i>{{userTime}} (UTC {{utc}})</p>{{/if}}
 					{{#if hasPermission 'view-full-other-user-info'}}
 						{{#if hasEmails}}
-							{{#each emails}} <p><i class="icon-mail"></i> {{address}}{{#if verified}}&nbsp;<i class="icon-ok"></i>{{/if}}</p> {{/each}}
+							{{#each emails}} <p class="secondary-font-color"><i class="icon-mail"></i> {{address}}{{#if verified}}&nbsp;<i class="icon-ok success-color"></i>{{/if}}</p> {{/each}}
 						{{/if}}
 						{{#if hasPhone}}
-							{{#each phone}} <p><i class="icon-phone"></i> {{phoneNumber}}</p> {{/each}}
+							{{#each phone}} <p class="secondary-font-color"><i class="icon-phone"></i> {{phoneNumber}}</p> {{/each}}
 						{{/if}}
-						{{#if lastLogin}} <p><i class="icon-calendar"></i> {{_ "Created_at"}}: {{createdAt}}</p> {{/if}}
-						{{#if lastLogin}} <p><i class="icon-calendar"></i> {{_ "Last_login"}}: {{lastLogin}}</p> {{/if}}
-						{{#if services.facebook.id}} <p><i class="icon-facebook"></i><a href="{{services.facebook.link}}" target="_blank">{{services.facebook.name}}</a></p> {{/if}}
-						{{#if services.github.id}} <p><i class="icon-github-circled"></i><a href="https://www.github.com/{{services.github.username}}" target="_blank">{{services.github.username}}</a></p> {{/if}}
-						{{#if services.gitlab.id}} <p><i class="icon-gitlab"></i>{{services.gitlab.username}}</p> {{/if}}
-						{{#if services.google.id}} <p><i class="icon-gplus"></i><a href="https://plus.google.com/{{services.google.id}}" target="_blank">{{services.google.name}}</a></p> {{/if}}
-						{{#if services.linkedin.id}} <p><i class="icon-linkedin"></i><a href="{{services.linkedin.publicProfileUrl}}" target="_blank">{{linkedinUsername}}</a></p> {{/if}}
-						{{#if servicesMeteor.id}} <p><i class="icon-meteor"></i>{{servicesMeteor.username}}</p> {{/if}}
-						{{#if services.twitter.id}} <p><i class="icon-twitter"></i><a href="https://twitter.com/{{services.twitter.screenName}}" target="_blank">{{services.twitter.screenName}}</a></p> {{/if}}
-						{{#if services.wordpress.id}} <p><i class="icon-wordpress"></i>{{services.wordpress.user_login}}</p> {{/if}}
+						{{#if lastLogin}} <p class="secondary-font-color"><i class="icon-calendar"></i> {{_ "Created_at"}}: {{createdAt}}</p> {{/if}}
+						{{#if lastLogin}} <p class="secondary-font-color"><i class="icon-calendar"></i> {{_ "Last_login"}}: {{lastLogin}}</p> {{/if}}
+						{{#if services.facebook.id}} <p class="secondary-font-color"><i class="icon-facebook"></i><a href="{{services.facebook.link}}" target="_blank">{{services.facebook.name}}</a></p> {{/if}}
+						{{#if services.github.id}} <p class="secondary-font-color"><i class="icon-github-circled"></i><a href="https://www.github.com/{{services.github.username}}" target="_blank">{{services.github.username}}</a></p> {{/if}}
+						{{#if services.gitlab.id}} <p class="secondary-font-color"><i class="icon-gitlab"></i>{{services.gitlab.username}}</p> {{/if}}
+						{{#if services.google.id}} <p class="secondary-font-color"><i class="icon-gplus"></i><a href="https://plus.google.com/{{services.google.id}}" target="_blank">{{services.google.name}}</a></p> {{/if}}
+						{{#if services.linkedin.id}} <p class="secondary-font-color"><i class="icon-linkedin"></i><a href="{{services.linkedin.publicProfileUrl}}" target="_blank">{{linkedinUsername}}</a></p> {{/if}}
+						{{#if servicesMeteor.id}} <p class="secondary-font-color"><i class="icon-meteor"></i>{{servicesMeteor.username}}</p> {{/if}}
+						{{#if services.twitter.id}} <p class="secondary-font-color"><i class="icon-twitter"></i><a href="https://twitter.com/{{services.twitter.screenName}}" target="_blank">{{services.twitter.screenName}}</a></p> {{/if}}
+						{{#if services.wordpress.id}} <p class="secondary-font-color"><i class="icon-wordpress"></i>{{services.wordpress.user_login}}</p> {{/if}}
 					{{/if}}
 				</div>
 			</div>
diff --git a/packages/rocketchat-ui-login/login/form.html b/packages/rocketchat-ui-login/login/form.html
index 3220c7da0a5..d8261a3886c 100644
--- a/packages/rocketchat-ui-login/login/form.html
+++ b/packages/rocketchat-ui-login/login/form.html
@@ -1,10 +1,10 @@
 <template name="loginForm">
 	{{#if state 'sandstorm'}}
-		<div class="alert alert-danger">
+		<div class="alert error-color error-background error-border">
 			You must login to Sandstorm (on the top right) in order to access this chat.
 		</div>
 	{{else}}
-		<form id="login-card" method='/' novalidate>
+		<form id="login-card" class="content-background-color color-primary-font-color" method='/' novalidate>
 			{{#if state 'wait-activation'}}
 				<header>
 					<h2>{{{_ "Registration_Succeeded"}}}</h2>
@@ -14,7 +14,7 @@
 			{{else}}
 				{{ > loginServices }}
 				{{#if needsValidateEmail}}
-					<div class="alert alert-danger">
+					<div class="alert error-color error-background error-border">
 						{{_ "You_need_confirm_email"}}
 					</div>
 				{{/if}}
@@ -116,7 +116,7 @@
 		<div class='login-terms'>
 			{{{loginTerms}}}
 			<div class="powered-by">
-				Powered by <a href="https://rocket.chat">Open Source Chat Platform Rocket.Chat</a>.
+				Powered by <a class="color-tertiary-font-color" href="https://rocket.chat">Open Source Chat Platform Rocket.Chat</a>.
 			</div>
 		</div>
 	{{/if}}
diff --git a/packages/rocketchat-ui-login/login/layout.html b/packages/rocketchat-ui-login/login/layout.html
index a097d5834bb..63f2c5f1341 100644
--- a/packages/rocketchat-ui-login/login/layout.html
+++ b/packages/rocketchat-ui-login/login/layout.html
@@ -1,5 +1,5 @@
 <template name="loginLayout">
-	<section class="full-page">
+	<section class="full-page color-tertiary-font-color">
 		<div class="wrapper">
 			{{ > loginHeader }}
 			{{> Template.dynamic template=center}}
diff --git a/packages/rocketchat-ui-login/reset-password/resetPassword.html b/packages/rocketchat-ui-login/reset-password/resetPassword.html
index 8592692eb75..cb35991720a 100644
--- a/packages/rocketchat-ui-login/reset-password/resetPassword.html
+++ b/packages/rocketchat-ui-login/reset-password/resetPassword.html
@@ -1,5 +1,5 @@
 <template name="resetPassword">
-	<form id="login-card" action="/">
+	<form id="login-card" class="content-background-color color-primary-font-color" action="/">
 		<div class="fields">
 			<header>
 			{{#if requirePasswordChange}}
diff --git a/packages/rocketchat-ui-login/username/layout.html b/packages/rocketchat-ui-login/username/layout.html
index 7302211d5d5..d2e64070552 100644
--- a/packages/rocketchat-ui-login/username/layout.html
+++ b/packages/rocketchat-ui-login/username/layout.html
@@ -1,5 +1,5 @@
 <template name="usernameLayout">
-	<section class="full-page">
+	<section class="full-page color-tertiary-font-color">
 		<div class="wrapper">
 			{{> Template.dynamic template=render}}
 		</div>
diff --git a/packages/rocketchat-ui-login/username/username.html b/packages/rocketchat-ui-login/username/username.html
index 4f12d49f0d3..1f64b55e25c 100644
--- a/packages/rocketchat-ui-login/username/username.html
+++ b/packages/rocketchat-ui-login/username/username.html
@@ -1,23 +1,23 @@
 <template name="username">
-	<section class="full-page">
+	<section class="full-page color-tertiary-font-color">
 		<div class="wrapper">
-			<form id="login-card" method='/'>
+			<form id="login-card" class="content-background-color color-primary-font-color" method='/'>
 				<header>
 					<h2>{{_ "Username_title"}}</h2>
 					<p>{{_ "Username_description"}}</p>
 				</header>
 				{{#if username.error}}
-					<div class="alert alert-danger">
+					<div class="alert error-color error-background error-border">
 						{{{_ "error-field-unavailable" field=username.username}}}
 					</div>
 				{{/if}}
 				{{#if username.invalid}}
-					<div class="alert alert-danger">
+					<div class="alert error-color error-background error-border">
 						{{{_ "Username_invalid" username.username}}}
 					</div>
 				{{/if}}
 				{{#if username.empty}}
-					<div class="alert alert-danger">
+					<div class="alert error-color error-background error-border">
 						{{{_ "Username_cant_be_empty"}}}
 					</div>
 				{{/if}}
diff --git a/packages/rocketchat-ui-master/master/error.html b/packages/rocketchat-ui-master/master/error.html
index 4290413f22f..07060aac8b9 100644
--- a/packages/rocketchat-ui-master/master/error.html
+++ b/packages/rocketchat-ui-master/master/error.html
@@ -1,5 +1,5 @@
 <template name="error">
-	<section class="full-page">
+	<section class="full-page color-tertiary-font-color">
 		<div class="wrapper">
 			<header>
 				<a class="logo" href="/">
diff --git a/packages/rocketchat-ui-master/master/logoLayout.html b/packages/rocketchat-ui-master/master/logoLayout.html
index c7decca4f52..f59261572c3 100644
--- a/packages/rocketchat-ui-master/master/logoLayout.html
+++ b/packages/rocketchat-ui-master/master/logoLayout.html
@@ -1,5 +1,5 @@
 <template name="logoLayout">
-	<section class="full-page">
+	<section class="full-page color-tertiary-font-color">
 		<div class="wrapper">
 			<header>
 				<a class="logo" href="/">
diff --git a/packages/rocketchat-ui-master/master/main.html b/packages/rocketchat-ui-master/master/main.html
index 0f624ac5bf9..754aadcb596 100644
--- a/packages/rocketchat-ui-master/master/main.html
+++ b/packages/rocketchat-ui-master/master/main.html
@@ -20,7 +20,7 @@
 	<link rel="apple-touch-icon" sizes="180x180" href="images/logo/apple-touch-icon-180x180.png?v=3" />
 </head>
 
-<body>
+<body class="global-font-family color-primary-font-color">
 </body>
 
 <template name="main">
@@ -52,11 +52,11 @@
 							{{> status}}
 						</div>
 						{{#unless modal}}
-							<div class="flex-tab-bar" role="toolbar">
+							<div class="flex-tab-bar content-background-color" role="toolbar">
 								{{> flexTabBar}}
 							</div>
 						{{/unless}}
-						<div class="main-content {{flexOpened}} {{flexOpenedRTC1}} {{flexOpenedRTC2}} {{#if modal}}main-modal{{/if}}">
+						<div class="main-content content-background-color {{flexOpened}} {{flexOpenedRTC1}} {{flexOpenedRTC2}} {{#if modal}}main-modal{{/if}}">
 							{{> Template.dynamic template=center}}
 						</div>
 						{{#unless modal}}
diff --git a/packages/rocketchat-ui-message/message/message.coffee b/packages/rocketchat-ui-message/message/message.coffee
index 48a688d0f71..76590ba3e34 100644
--- a/packages/rocketchat-ui-message/message/message.coffee
+++ b/packages/rocketchat-ui-message/message/message.coffee
@@ -32,8 +32,11 @@ Template.message.helpers
 			return 'temp'
 	body: ->
 		return Template.instance().body
-	system: ->
+	system: (returnClass) ->
 		if RocketChat.MessageTypes.isSystemMessage(this)
+			if returnClass
+				return 'color-info-font-color'
+
 			return 'system'
 	edited: ->
 		return Template.instance().wasEdited
@@ -229,4 +232,4 @@ Template.message.onViewRendered = (context) ->
 			else
 				if templateInstance?.firstNode && templateInstance?.atBottom is false
 					newMessage = templateInstance?.find(".new-message")
-					newMessage?.className = "new-message"
+					newMessage?.className = "new-message background-primary-action-color"
diff --git a/packages/rocketchat-ui-message/message/message.html b/packages/rocketchat-ui-message/message/message.html
index a5be3b79903..cb42e24f478 100644
--- a/packages/rocketchat-ui-message/message/message.html
+++ b/packages/rocketchat-ui-message/message/message.html
@@ -1,5 +1,5 @@
 <template name="message">
-	<li id="{{_id}}" class="message {{isSequential}} {{system}} {{t}} {{own}} {{isTemp}} {{chatops}} {{customClass}}" data-username="{{u.username}}" data-groupable="{{isGroupable}}" data-date="{{date}}" data-timestamp="{{timestamp}}">
+	<li id="{{_id}}" class="message background-transparent-dark-hover {{isSequential}} {{system}} {{t}} {{own}} {{isTemp}} {{chatops}} {{customClass}}" data-username="{{u.username}}" data-groupable="{{isGroupable}}" data-date="{{date}}" data-timestamp="{{timestamp}}">
 		<div class="day-divider">
 			<span>{{date}}</span>
 		</div>
@@ -25,16 +25,16 @@
 			{{/if}}
 		{{/if}}
 		{{#if alias}}
-			<button type="button" class="user user-card-message" data-username="{{u.username}}" tabindex="1">{{alias}} <span class="message-alias">@{{u.username}}</span></button>
+			<button type="button" class="user user-card-message color-primary-font-color" data-username="{{u.username}}" tabindex="1">{{alias}} <span class="message-alias border-component-color color-info-font-color">@{{u.username}}</span></button>
 		{{else}}
-			<button type="button" class="user user-card-message" data-username="{{u.username}}" tabindex="1">{{u.username}}</button>
+			<button type="button" class="user user-card-message color-primary-font-color" data-username="{{u.username}}" tabindex="1">{{u.username}}</button>
 		{{/if}}
-		<span class="info">
+		<span class="info border-component-color color-info-font-color">
 		{{#each roleTags}}
-			<span class="role-tag" data-role="{{description}}">{{description}}</span>
+			<span class="role-tag background-info-font-color" data-role="{{description}}">{{description}}</span>
 		{{/each}}
 		{{#if isBot}}
-			<span class="is-bot">BOT</span>
+			<span class="is-bot background-info-font-color">BOT</span>
 		{{/if}}
 		<span class="time" title='{{date}} {{time}}'>{{time}}</span>
 		{{#if edited}}
@@ -50,7 +50,7 @@
 				<i class="icon-cog message-cog" aria-label="{{_ "Actions"}}"></i>
 			</div>
 		</span>
-		<div class="body" dir="auto">
+		<div class="body color-primary-font-color {{system true}}" dir="auto">
 			{{{body}}}
 			{{#if hasOembed}}
 				{{#each urls}}
@@ -63,7 +63,7 @@
 		</div>
 		<ul class="actionLinks {{hideActionLinks}}">
 			{{#each actionLink in actionLinks}}
-				<li>
+				<li class="color-primary-action-color">
 					<span class="action-link" data-actionlink="{{actionLink.id}}">
 						{{#if actionLink.icon}}
 							<i class="{{actionLink.icon}}"></i>
diff --git a/packages/rocketchat-ui-message/message/messageBox.html b/packages/rocketchat-ui-message/message/messageBox.html
index 48ed519fc22..65a36bf0e10 100644
--- a/packages/rocketchat-ui-message/message/messageBox.html
+++ b/packages/rocketchat-ui-message/message/messageBox.html
@@ -1,11 +1,11 @@
 <template name="messageBox">
 	{{#if subscribed}}
-		<form class="message-form" method="post" action="/">
+		<form class="message-form secondary-font-color" method="post" action="/">
 			{{> messagePopupConfig getPopupConfig}}
 			{{#if allowedToSend}}
-			<div class="message-input">
-				<div class="input-message-container">
-					<textarea dir="auto" name="msg" maxlength="{{maxMessageLength}}" class="input-message autogrow-short" placeholder="{{_ 'Message'}}"></textarea>
+			<div class="message-input border-component-color">
+				<div class="input-message-container content-background-color">
+					<textarea dir="auto" name="msg" maxlength="{{maxMessageLength}}" class="message-form-text input-message autogrow-short" placeholder="{{_ 'Message'}}"></textarea>
 
 					<div class="inner-left-toolbar">
 						<i class="emoji-picker-icon icon-people"></i>
@@ -93,8 +93,8 @@
 					<span>~<strike>{{_ "strike"}}</strike>~</span>
 					{{/if}}
 					{{#if showMarkdownCode}}
-					<code class="inline">`{{_ "inline_code"}}`</code>
-					<code class="inline"><span class="hidden-br"><br></span>```<span class="hidden-br"><br></span><i class="icon-level-down"></i>{{_ "multi"}}<span class="hidden-br"><br></span><i class="icon-level-down"></i>{{_ "line"}}<span class="hidden-br"><br></span><i class="icon-level-down"></i>```</code>
+					<code class="code-colors inline">`{{_ "inline_code"}}`</code>
+					<code class="code-colors inline"><span class="hidden-br"><br></span>```<span class="hidden-br"><br></span><i class="icon-level-down"></i>{{_ "multi"}}<span class="hidden-br"><br></span><i class="icon-level-down"></i>{{_ "line"}}<span class="hidden-br"><br></span><i class="icon-level-down"></i>```</code>
 					{{/if}}
 					{{#if katexSyntax}}
 					<span><a href="https://github.com/Khan/KaTeX/wiki/Function-Support-in-KaTeX" target="_blank">{{katexSyntax}}</a></span>
diff --git a/packages/rocketchat-ui-message/message/messageDropdown.html b/packages/rocketchat-ui-message/message/messageDropdown.html
index 93468e4bd65..aeef21c9abe 100644
--- a/packages/rocketchat-ui-message/message/messageDropdown.html
+++ b/packages/rocketchat-ui-message/message/messageDropdown.html
@@ -1,7 +1,7 @@
 <template name="messageDropdown">
 	<div class="message-dropdown">
 		<ul>
-			<li class="message-dropdown-close"><i class=" icon-angle-left" aria-label="{{_ "Close"}}"></i></li>
+			<li class="message-dropdown-close secondary-background-color border-component-color"><i class=" icon-angle-left" aria-label="{{_ "Close"}}"></i></li>
 			{{#if actions.length}}
 				{{#each actions}}
 					<li class="{{id}} {{classes}} message-action" title="{{_ i18nLabel}}" data-id="{{id}}"><i class="{{icon}}" aria-label="{{_ i18nLabel}}"></i></li>
diff --git a/packages/rocketchat-ui-message/message/popup/messagePopup.html b/packages/rocketchat-ui-message/message/popup/messagePopup.html
index a66903b6373..c81aff00d73 100644
--- a/packages/rocketchat-ui-message/message/popup/messagePopup.html
+++ b/packages/rocketchat-ui-message/message/popup/messagePopup.html
@@ -1,9 +1,9 @@
 <template name="messagePopup">
 	{{#if isOpen}}
 		<div class="message-popup-position">
-			<div class="message-popup {{cls}}">
+			<div class="message-popup content-background-color {{cls}}">
 				{{#if title}}
-					<div class="message-popup-title">
+					<div class="message-popup-title secondary-background-color">
 						{{title}}
 					</div>
 				{{/if}}
diff --git a/packages/rocketchat-ui-message/message/popup/messagePopupUser.html b/packages/rocketchat-ui-message/message/popup/messagePopupUser.html
index 48d84d6129d..c90a04375d3 100644
--- a/packages/rocketchat-ui-message/message/popup/messagePopupUser.html
+++ b/packages/rocketchat-ui-message/message/popup/messagePopupUser.html
@@ -1,7 +1,7 @@
 <template name="messagePopupUser">
 	{{#unless system}}
-		<div class="popup-user-status popup-user-status-{{status}}"></div>
+		<div class="popup-user-status border-transparent-dark popup-user-status-{{status}}"></div>
 		<div class="popup-user-avatar" style="background-image:url({{avatarUrlFromUsername username}});"></div>
 	{{/unless}}
 	<strong>{{username}}</strong> {{name}}
-</template>
\ No newline at end of file
+</template>
diff --git a/packages/rocketchat-ui-sidenav/side-nav/accountBox.html b/packages/rocketchat-ui-sidenav/side-nav/accountBox.html
index 48c93b0003c..61282239834 100644
--- a/packages/rocketchat-ui-sidenav/side-nav/accountBox.html
+++ b/packages/rocketchat-ui-sidenav/side-nav/accountBox.html
@@ -1,7 +1,7 @@
 <template name="accountBox">
 	<div class="account-box" aria-label="{{_ "Account"}}" role="region">
 		{{#with myUserInfo}}
-			<div class="info status-{{status}}">
+			<div class="info status-{{status}} primary-background-color">
 				{{#if username}}
 					<div class="thumb" data-status='{{visualStatus}}'>
 						{{> avatar username=username}}
@@ -11,7 +11,7 @@
 					</div>
 				{{/if}}
 			</div>
-			<nav class="options animated-hidden">
+			<nav class="options primary-background-color animated-hidden">
 				<div class="wrapper">
 					<button data-status="online" class="status online"><span>{{_ "Online"}}</span></button>
 					<button data-status="away" class="status away"><span>{{_ "Away" context="male"}}</span></button>
diff --git a/packages/rocketchat-ui-sidenav/side-nav/channels.html b/packages/rocketchat-ui-sidenav/side-nav/channels.html
index 746fc7bb51d..9658c595dfc 100644
--- a/packages/rocketchat-ui-sidenav/side-nav/channels.html
+++ b/packages/rocketchat-ui-sidenav/side-nav/channels.html
@@ -1,5 +1,5 @@
 <template name="channels">
-	<h3 class="add-room {{isActive}}">
+	<h3 class="add-room background-transparent-darker-hover {{isActive}}">
 		{{_ "Channels"}} <span class="room-count-small">({{rooms.count}})</span>
 		{{#if canCreate}}
 			<i class="icon-plus" aria-label="{{_ "Create channel"}}" role="button"></i>
@@ -12,5 +12,5 @@
 			<p class="empty">{{_ "No_channels_yet" }}</p>
 		{{/each}}
 	</ul>
-	<button class="more more-channels">{{_ "More_channels"}}...</button>
+	<button class="more more-channels background-transparent-darker-hover">{{_ "More_channels"}}...</button>
 </template>
diff --git a/packages/rocketchat-ui-sidenav/side-nav/chatRoomItem.html b/packages/rocketchat-ui-sidenav/side-nav/chatRoomItem.html
index c3bf57b7711..92c8f8c63ab 100644
--- a/packages/rocketchat-ui-sidenav/side-nav/chatRoomItem.html
+++ b/packages/rocketchat-ui-sidenav/side-nav/chatRoomItem.html
@@ -1,5 +1,5 @@
 <template name="chatRoomItem">
-	<li class="link-room-{{rid}} {{active}} {{#if unread}}has-unread{{/if}} {{#if alert}}has-alert{{/if}}">
+	<li class="link-room-{{rid}} background-transparent-darker-hover {{active}} {{#if unread}}has-unread{{/if}} {{#if alert}}has-alert{{/if}}">
 		<a class="open-room" href="{{route}}" title="{{name}}">
 			{{#if unread}}
 				<span class="unread">{{unread}}</span>
diff --git a/packages/rocketchat-ui-sidenav/side-nav/combined.html b/packages/rocketchat-ui-sidenav/side-nav/combined.html
index 25a19a812d5..912120f588a 100644
--- a/packages/rocketchat-ui-sidenav/side-nav/combined.html
+++ b/packages/rocketchat-ui-sidenav/side-nav/combined.html
@@ -1,5 +1,5 @@
 <template name="combined">
-	<h3 class="add-room {{isActive}}">
+	<h3 class="add-room background-transparent-darker-hover {{isActive}}">
 		{{_ "Channels"}} <span class="room-count-small">({{rooms.count}})</span>
 		{{#if canCreate}}
 			<i class="icon-plus" aria-label="{{_ "Create channel"}}" role="button"></i>
@@ -12,5 +12,5 @@
 			<p class="empty">{{_ "No_channels_yet" }}</p>
 		{{/each}}
 	</ul>
-	<button class="more more-channels">{{_ "More_channels"}}...</button>
+	<button class="more more-channels background-transparent-darker-hover">{{_ "More_channels"}}...</button>
 </template>
diff --git a/packages/rocketchat-ui-sidenav/side-nav/createChannelFlex.html b/packages/rocketchat-ui-sidenav/side-nav/createChannelFlex.html
index d188757768f..346125416a1 100644
--- a/packages/rocketchat-ui-sidenav/side-nav/createChannelFlex.html
+++ b/packages/rocketchat-ui-sidenav/side-nav/createChannelFlex.html
@@ -1,31 +1,31 @@
 <template name="createChannelFlex">
-	<header>
+	<header class="primary-background-color">
 		<div>
 			<h4>{{_ "Channels"}}</h4>
 		</div>
 	</header>
-	<div class="content">
+	<div class="content primary-background-color">
 		<div class="wrapper">
 			<h4>{{_ "Create_new" }}</h4>
 			<div class="input-line">
-				<label for="channel-name">{{_ "Name"}}</label>
+				<label class="color-tertiary-font-color" for="channel-name">{{_ "Name"}}</label>
 				<input type="text" id="channel-name" class="required" dir="auto" placeholder="{{_ 'Enter_name_here'}}">
 			</div>
 			<div class="input-line">
-				<label for="channel-ro">{{_ "Read_only_channel"}}</label>
+				<label class="color-tertiary-font-color" for="channel-ro">{{_ "Read_only_channel"}}</label>
 				<input type="checkbox" id="channel-ro">
 			</div>
 			<div class="input-line">
-				<label for="channel-members">{{_ "Select_users"}}</label>
+				<label class="color-tertiary-font-color" for="channel-members">{{_ "Select_users"}}</label>
 				{{> inputAutocomplete settings=autocompleteSettings id="channel-members" class="search" placeholder=(_ "Search_by_username") autocomplete="off"}}
 				<ul class="selected-users">
 					{{#each selectedUsers}}
-						<li>{{.}} <i class="icon-cancel remove-room-member"></i></li>
+						<li class="background-transparent-darker">{{.}} <i class="icon-cancel remove-room-member secondary-font-color"></i></li>
 					{{/each}}
 				</ul>
 			</div>
 			{{#if error.fields}}
-				<div class="input-error">
+				<div class="input-error error-color">
 					<strong>{{_ "Oops!"}}</strong>
 					{{#each error.fields}}
 						<p>{{_ "The_field_is_required" .}}</p>
@@ -33,19 +33,19 @@
 				</div>
 			{{/if}}
 			{{#if error.invalid}}
-				<div class="input-error">
+				<div class="input-error error-color">
 					<strong>{{_ "Oops!"}}</strong>
 					{{{_ "Invalid_room_name" roomName}}}
 				</div>
 			{{/if}}
 			{{#if error.duplicate}}
-				<div class="input-error">
+				<div class="input-error error-color">
 					<strong>{{_ "Oops!"}}</strong>
 					{{{_ "Duplicate_channel_name" roomName}}}
 				</div>
 			{{/if}}
 			{{#if error.archivedduplicate}}
-				<div class="input-error">
+				<div class="input-error error-color">
 					<strong>{{_ "Oops!"}}</strong>
 					{{{_ "Duplicate_archived_channel_name" roomName}}}
 				</div>
@@ -56,7 +56,7 @@
 			</div>
 		</div>
 	</div>
-	<footer>
+	<footer class="primary-background-color">
 		<div>
 			<button class="button all">{{_ "All_channels"}}</button>
 		</div>
diff --git a/packages/rocketchat-ui-sidenav/side-nav/createCombinedFlex.html b/packages/rocketchat-ui-sidenav/side-nav/createCombinedFlex.html
index 5cd08d27b01..1b68e172105 100644
--- a/packages/rocketchat-ui-sidenav/side-nav/createCombinedFlex.html
+++ b/packages/rocketchat-ui-sidenav/side-nav/createCombinedFlex.html
@@ -1,10 +1,10 @@
 <template name="createCombinedFlex">
-	<header>
+	<header class="primary-background-color">
 		<div>
 			<h4>{{_ "Channels"}}</h4>
 		</div>
 	</header>
-	<div class="content">
+	<div class="content primary-background-color">
 		<div class="wrapper">
 			<h4>{{_ "Create_new" }}</h4>
 			<div class="input-line no-icon">
@@ -15,27 +15,27 @@
 				<span>{{_ "Private"}}</span>
 				<div class="input checkbox toggle">
 					<input type="checkbox" id="channel-type" {{privateSwitchDisabled}} {{privateSwitchChecked}}>
-					<label for="channel-type"></label>
+					<label class="color-tertiary-font-color" for="channel-type"></label>
 				</div>
 			</div>
 			<div class="input-line toggle">
 				<span>{{_ "Read_only_channel"}}</span>
 				<div class="input checkbox toggle">
 					<input type="checkbox" id="channel-ro">
-					<label for="channel-ro"></label>
+					<label class="color-tertiary-font-color" for="channel-ro"></label>
 				</div>
 			</div>
 			<div class="input-line no-icon">
-				<label for="channel-members">{{_ "Select_users"}}</label>
+				<label class="color-tertiary-font-color" for="channel-members">{{_ "Select_users"}}</label>
 				{{> inputAutocomplete settings=autocompleteSettings id="channel-members" class="search" placeholder=(_ "Search_by_username") autocomplete="off"}}
 				<ul class="selected-users">
 					{{#each selectedUsers}}
-						<li>{{.}} <i class="icon-cancel remove-room-member"></i></li>
+						<li class="background-transparent-darker">{{.}} <i class="icon-cancel remove-room-member"></i></li>
 					{{/each}}
 				</ul>
 			</div>
 			{{#if error.fields}}
-				<div class="input-error">
+				<div class="input-error error-color">
 					<strong>{{_ "Oops!"}}</strong>
 					{{#each error.fields}}
 						<p>{{_ "The_field_is_required" .}}</p>
@@ -43,19 +43,19 @@
 				</div>
 			{{/if}}
 			{{#if error.invalid}}
-				<div class="input-error">
+				<div class="input-error error-color">
 					<strong>{{_ "Oops!"}}</strong>
 					{{{_ "Invalid_room_name" roomName}}}
 				</div>
 			{{/if}}
 			{{#if error.duplicate}}
-				<div class="input-error">
+				<div class="input-error error-color">
 					<strong>{{_ "Oops!"}}</strong>
 					{{{_ "Duplicate_channel_name" roomName}}}
 				</div>
 			{{/if}}
 			{{#if error.archivedduplicate}}
-				<div class="input-error">
+				<div class="input-error error-color">
 					<strong>{{_ "Oops!"}}</strong>
 					{{{_ "Duplicate_archived_channel_name" roomName}}}
 				</div>
@@ -66,7 +66,7 @@
 			</div>
 		</div>
 	</div>
-	<footer>
+	<footer class="primary-background-color">
 		<div>
 			<button class="button all">{{_ "All_channels"}}</button>
 		</div>
diff --git a/packages/rocketchat-ui-sidenav/side-nav/directMessages.html b/packages/rocketchat-ui-sidenav/side-nav/directMessages.html
index 9bcf597e859..2e8fddcc897 100644
--- a/packages/rocketchat-ui-sidenav/side-nav/directMessages.html
+++ b/packages/rocketchat-ui-sidenav/side-nav/directMessages.html
@@ -1,5 +1,5 @@
 <template name="directMessages">
-	<h3 class="add-room {{isActive}}">
+	<h3 class="add-room background-transparent-darker-hover {{isActive}}">
 		{{_ "Direct_Messages"}} <span class="room-count-small">({{rooms.count}})</span>
 		{{#if canCreate}}
 			<i class="icon-plus"></i>
@@ -11,6 +11,6 @@
 		{{else}}
 			<p class="empty">{{_ "No_direct_messages_yet" }}</p>
 		{{/each}}
-		<button class="more more-direct-messages">{{_ "More_direct_messages"}}...</button>
+		<button class="more more-direct-messages background-transparent-darker-hover">{{_ "More_direct_messages"}}...</button>
 	</ul>
 </template>
diff --git a/packages/rocketchat-ui-sidenav/side-nav/directMessagesFlex.html b/packages/rocketchat-ui-sidenav/side-nav/directMessagesFlex.html
index 93d2597fee2..43b66dbbd71 100644
--- a/packages/rocketchat-ui-sidenav/side-nav/directMessagesFlex.html
+++ b/packages/rocketchat-ui-sidenav/side-nav/directMessagesFlex.html
@@ -1,18 +1,18 @@
 <template name="directMessagesFlex">
-	<header>
+	<header class="primary-background-color">
 		<div>
 			<h4>{{_ "Direct_Messages"}}</h4>
 		</div>
 	</header>
-	<div class="content">
+	<div class="content primary-background-color">
 		<div class="wrapper">
 			<h4>{{_ "Create_new"}}</h4>
 			<div class="input-line no-icon">
-				<label for="who">{{_ "Select_user" }}</label>
+				<label class="color-tertiary-font-color" for="who">{{_ "Select_user" }}</label>
 				{{> inputAutocomplete settings=autocompleteSettings id="who" class="required search" autocomplete="off" placeholder=(_ "Search_by_username")}}
 			</div>
 			{{#if error}}
-				<div class="input-error">
+				<div class="input-error error-color">
 					<strong>{{_ "Oops!"}}</strong>
 					{{#each error}}
 						<p>{{_ "The_field_is_required" error}}</p>
diff --git a/packages/rocketchat-ui-sidenav/side-nav/listChannelsFlex.html b/packages/rocketchat-ui-sidenav/side-nav/listChannelsFlex.html
index 3afcba90900..8df15568b59 100644
--- a/packages/rocketchat-ui-sidenav/side-nav/listChannelsFlex.html
+++ b/packages/rocketchat-ui-sidenav/side-nav/listChannelsFlex.html
@@ -1,10 +1,10 @@
 <template name="listChannelsFlex">
-	<header>
+	<header class="primary-background-color">
 		<div>
 			<h4>{{_ "Channels"}}</h4>
 		</div>
 	</header>
-	<div class="content">
+	<div class="content primary-background-color">
 		<div class="wrapper">
 			<div class="flex-control">
 				<div class="search">
@@ -14,7 +14,7 @@
 								<option value="joined" selected="{{showSelected 'joined'}}">{{_ "Joined"}}</option>
 								<option value="all" selected="{{showSelected 'all'}}">{{_ "All"}}</option>
 							</select>
-							<i class="icon-comment"></i>
+							<i class="icon-comment secondary-font-color"></i>
 						</div>
 						<div class="input-line search">
 							<select class="c-select" id="sort-channels">
@@ -25,11 +25,11 @@
 								<option value="name" selected="{{sortSubscriptionsSelected 'name'}}">{{_ "Name"}}</option>
 								<option value="ls" selected="{{sortSubscriptionsSelected 'ls'}}">{{_ "Last_seen"}}</option>
 							</select>
-							<i class="icon-sort-alt-up"></i>
+							<i class="icon-sort-alt-up secondary-font-color"></i>
 						</div>
 						<div class="input-line search">
 							<input type="text" id="channel-search" class="search" placeholder="{{_ "Search_Channels"}}" autocomplete="off" />
-							<i class="icon-right-open-small"></i>
+							<i class="icon-right-open-small secondary-font-color"></i>
 						</div>
 					</form>
 				</div>
@@ -60,7 +60,7 @@
 			{{/if}}
 		</div>
 	</div>
-	<footer>
+	<footer class="primary-background-color">
 		<div>
 		{{#if hasPermission 'create-c'}}
 			<button class="button primary create">{{_ "Create_new"}}</button>
diff --git a/packages/rocketchat-ui-sidenav/side-nav/listCombinedFlex.html b/packages/rocketchat-ui-sidenav/side-nav/listCombinedFlex.html
index c64a7952e73..371cd9ff32b 100644
--- a/packages/rocketchat-ui-sidenav/side-nav/listCombinedFlex.html
+++ b/packages/rocketchat-ui-sidenav/side-nav/listCombinedFlex.html
@@ -1,10 +1,10 @@
 <template name="listCombinedFlex">
-	<header>
+	<header class="primary-background-color">
 		<div>
 			<h4>{{_ "Channels"}}</h4>
 		</div>
 	</header>
-	<div class="content">
+	<div class="content primary-background-color">
 		<div class="wrapper">
 			<div class="flex-control">
 				<div class="search">
@@ -14,7 +14,7 @@
 								<option value="joined" selected="{{showSelected 'joined'}}">{{_ "Joined"}}</option>
 								<option value="all" selected="{{showSelected 'all'}}">{{_ "All"}}</option>
 							</select>
-							<i class="icon-comment"></i>
+							<i class="icon-comment secondary-font-color"></i>
 						</div>
 						<div class="input-line search">
 							<select class="c-select" id="sort-channels">
@@ -25,7 +25,7 @@
 								<option value="name" selected="{{sortSubscriptionsSelected 'name'}}">{{_ "Name"}}</option>
 								<option value="ls" selected="{{sortSubscriptionsSelected 'ls'}}">{{_ "Last_seen"}}</option>
 							</select>
-							<i class="icon-sort-alt-up"></i>
+							<i class="icon-sort-alt-up secondary-font-color"></i>
 						</div>
 						<div class="input-line search">
 							<select class="c-select" id="channel-type">
@@ -33,11 +33,11 @@
 								<option value="public" selected="{{channelTypeSelected 'public'}}">{{_ "Public"}}</option>
 								<option value="private" selected="{{channelTypeSelected 'private'}}">{{_ "Private"}}</option>
 							</select>
-							<i class="icon-lock"></i>
+							<i class="icon-lock secondary-font-color"></i>
 						</div>
 						<div class="input-line search">
 							<input type="text" id="channel-search" class="search" placeholder="{{_ "Search"}}" autocomplete="off" />
-							<i class="icon-search"></i>
+							<i class="icon-search secondary-font-color"></i>
 						</div>
 					</form>
 				</div>
@@ -68,7 +68,7 @@
 			{{/if}}
 		</div>
 	</div>
-	<footer>
+	<footer class="primary-background-color">
 		<div>
 		{{#if canCreate}}
 			<button class="button primary create">{{_ "Create_new"}}</button>
diff --git a/packages/rocketchat-ui-sidenav/side-nav/listDirectMessagesFlex.html b/packages/rocketchat-ui-sidenav/side-nav/listDirectMessagesFlex.html
index ed8e719a57e..c252bea71e4 100644
--- a/packages/rocketchat-ui-sidenav/side-nav/listDirectMessagesFlex.html
+++ b/packages/rocketchat-ui-sidenav/side-nav/listDirectMessagesFlex.html
@@ -1,24 +1,24 @@
 <template name="listDirectMessagesFlex">
-	<header>
+	<header class="primary-background-color">
 		<div>
 			<h4>{{_ "Direct_Messages"}}</h4>
 		</div>
 	</header>
-	<div class="content">
+	<div class="content primary-background-color">
 		<div class="wrapper">
 			<div class="flex-control">
 				<div class="search">
 					<form class="search-form" role="form">
 						<div class="input-line search">
 							<input type="text" id="channel-search" class="search" placeholder="{{_ "Search"}}" autocomplete="off" />
-							<i class="icon-search"></i>
+							<i class="icon-search secondary-font-color"></i>
 						</div>
 						<div class="input-line search">
 							<select class="c-select" id="sort">
 								<option value="name" selected="{{sortSelected 'name'}}">{{_ "Name"}}</option>
 								<option value="ls" selected="{{sortSelected 'ls'}}">{{_ "Last_seen"}}</option>
 							</select>
-							<i class="icon-sort-alt-up"></i>
+							<i class="icon-sort-alt-up secondary-font-color"></i>
 						</div>
 					</form>
 				</div>
diff --git a/packages/rocketchat-ui-sidenav/side-nav/listPrivateGroupsFlex.html b/packages/rocketchat-ui-sidenav/side-nav/listPrivateGroupsFlex.html
index b31f039dc78..f664e26c666 100644
--- a/packages/rocketchat-ui-sidenav/side-nav/listPrivateGroupsFlex.html
+++ b/packages/rocketchat-ui-sidenav/side-nav/listPrivateGroupsFlex.html
@@ -1,10 +1,10 @@
 <template name="listPrivateGroupsFlex">
-	<header>
+	<header class="primary-background-color">
 		<div>
 			<h4>{{_ "Private_Groups"}}</h4>
 		</div>
 	</header>
-	<div class="content">
+	<div class="content primary-background-color">
 		<div class="wrapper">
 			<div class="flex-control">
 				<div class="search">
@@ -14,11 +14,11 @@
 								<option value="name" selected="{{sortSelected 'name'}}">{{_ "Name"}}</option>
 								<option value="ls" selected="{{sortSelected 'ls'}}">{{_ "Last_seen"}}</option>
 							</select>
-							<i class="icon-sort-alt-up"></i>
+							<i class="icon-sort-alt-up secondary-font-color"></i>
 						</div>
 						<div class="input-line search">
 							<input type="text" id="channel-search" class="search" placeholder="{{_ "Search_Private_Groups"}}" autocomplete="off" />
-							<i class="icon-right-open-small"></i>
+							<i class="icon-right-open-small secondary-font-color"></i>
 						</div>
 					</form>
 				</div>
@@ -46,7 +46,7 @@
 			{{/if}}
 		</div>
 	</div>
-	<footer>
+	<footer class="primary-background-color">
 		<div>
 			<button class="button primary create">{{_ "Create_new"}}</button>
 		</div>
diff --git a/packages/rocketchat-ui-sidenav/side-nav/privateGroups.html b/packages/rocketchat-ui-sidenav/side-nav/privateGroups.html
index 9238e93da07..f23c44a824f 100644
--- a/packages/rocketchat-ui-sidenav/side-nav/privateGroups.html
+++ b/packages/rocketchat-ui-sidenav/side-nav/privateGroups.html
@@ -1,5 +1,5 @@
 <template name="privateGroups">
-	<h3 class="add-room {{isActive}}">
+	<h3 class="add-room background-transparent-darker-hover {{isActive}}">
 		{{_ "Private_Groups"}} <span class="room-count-small">({{rooms.count}})</span>
 		{{#if canCreate}}
 			<i class="icon-plus"></i>
@@ -13,6 +13,6 @@
 		{{/each}}
 	</ul>
 	{{#if $gt total totalOpen}}
-		<button class="more more-groups">{{_ "More_groups"}}...</button>
+		<button class="more more-groups background-transparent-darker-hover">{{_ "More_groups"}}...</button>
 	{{/if}}
 </template>
diff --git a/packages/rocketchat-ui-sidenav/side-nav/privateGroupsFlex.html b/packages/rocketchat-ui-sidenav/side-nav/privateGroupsFlex.html
index a434b28ce8b..b44af2de8eb 100644
--- a/packages/rocketchat-ui-sidenav/side-nav/privateGroupsFlex.html
+++ b/packages/rocketchat-ui-sidenav/side-nav/privateGroupsFlex.html
@@ -1,31 +1,31 @@
 <template name="privateGroupsFlex">
-	<header>
+	<header class="primary-background-color">
 		<div>
 			<h4>{{_ "Private_Groups"}}</h4>
 		</div>
 	</header>
-	<div class="content">
+	<div class="content primary-background-color">
 		<div class="wrapper">
 			<h4>{{_ "Create_new"}}</h4>
 			<div class="input-line">
-				<label for="pvt-group-name">{{_ "Name"}}</label>
+				<label class="color-tertiary-font-color" for="pvt-group-name">{{_ "Name"}}</label>
 				<input type="text" id="pvt-group-name" class="required" dir="auto" placeholder="{{_ 'Enter_name_here'}}">
 			</div>
 			<div class="input-line">
-				<label for="channel-ro">{{_ "Read_only_group"}}</label>
+				<label class="color-tertiary-font-color" for="channel-ro">{{_ "Read_only_group"}}</label>
 				<input type="checkbox" id="channel-ro">
 			</div>
 			<div class="input-line">
-				<label for="pvt-group-members">{{_ "Select_users" }}</label>
+				<label class="color-tertiary-font-color" for="pvt-group-members">{{_ "Select_users" }}</label>
 				{{> inputAutocomplete settings=autocompleteSettings id="pvt-group-members" class="search" placeholder=(_ "Search_by_username") autocomplete="off"}}
 				<ul class="selected-users">
 					{{#each selectedUsers}}
-						<li>{{.}} <i class="icon-cancel remove-room-member"></i></li>
+						<li class="background-transparent-darker">{{.}} <i class="icon-cancel remove-room-member"></i></li>
 					{{/each}}
 				</ul>
 			</div>
 			{{#if error.fields}}
-				<div class="input-error">
+				<div class="input-error error-color">
 					<strong>{{_ "Oops!"}}</strong>
 					{{#each error.fields}}
 						<p>{{_ "The_field_is_required" .}}</p>
@@ -33,19 +33,19 @@
 				</div>
 			{{/if}}
 			{{#if error.invalid}}
-				<div class="input-error">
+				<div class="input-error error-color">
 					<strong>{{_ "Oops!"}}</strong>
 					{{{_ "Invalid_room_name" groupName}}}
 				</div>
 			{{/if}}
 			{{#if error.duplicate}}
-				<div class="input-error">
+				<div class="input-error error-color">
 					<strong>{{_ "Oops!"}}</strong>
 					{{{_ "Duplicate_private_group_name" groupName}}}
 				</div>
 			{{/if}}
 			{{#if error.archivedduplicate}}
-				<div class="input-error">
+				<div class="input-error error-color">
 					<strong>{{_ "Oops!"}}</strong>
 					{{{_ "Duplicate_archived_private_group_name" groupName}}}
 				</div>
diff --git a/packages/rocketchat-ui-sidenav/side-nav/sideNav.html b/packages/rocketchat-ui-sidenav/side-nav/sideNav.html
index b728c343382..2196ac70be2 100644
--- a/packages/rocketchat-ui-sidenav/side-nav/sideNav.html
+++ b/packages/rocketchat-ui-sidenav/side-nav/sideNav.html
@@ -1,10 +1,10 @@
 <template name="sideNav">
-	<aside class="side-nav" role="navigation">
+	<aside class="side-nav primary-background-color color-tertiary-font-color" role="navigation">
 		<header class="header">
 			{{> accountBox }}
 		</header>
 		{{#if currentUser}}
-			<div class="unread-rooms top-unread-rooms hidden">
+			<div class="unread-rooms background-primary-action-color color-primary-action-contrast top-unread-rooms hidden">
 				{{_ "More_unreads"}} <i class="icon-up-big"></i>
 			</div>
 			<div class="rooms-list" aria-label="{{_ "Channels"}}" role="region">
@@ -24,10 +24,10 @@
 					{{/if}}
 				</div>
 			</div>
-			<div class="unread-rooms bottom-unread-rooms hidden">
+			<div class="unread-rooms background-primary-action-color color-primary-action-contrast bottom-unread-rooms hidden">
 				{{_ "More_unreads"}} <i class="icon-down-big"></i>
 			</div>
-			<div class="flex-nav animated-hidden">
+			<div class="flex-nav primary-background-color animated-hidden">
 				<section>
 					{{> Template.dynamic template=flexTemplate data=flexData}}
 				</section>
diff --git a/packages/rocketchat-ui-sidenav/side-nav/userStatus.html b/packages/rocketchat-ui-sidenav/side-nav/userStatus.html
index 66dc5a7e632..b92728ef137 100644
--- a/packages/rocketchat-ui-sidenav/side-nav/userStatus.html
+++ b/packages/rocketchat-ui-sidenav/side-nav/userStatus.html
@@ -1,7 +1,7 @@
 <template name="userStatus">
 	<div class="account-box">
 		{{#with myUserInfo}}
-			<div class="info status-{{status}}">
+			<div class="info status-{{status}} primary-background-color">
 				{{#if username}}
 					<div class="thumb" data-status='{{visualStatus}}'>
 						{{> avatar username=username}}
@@ -11,7 +11,7 @@
 					</div>
 				{{/if}}
 			</div>
-			<nav class="options animated-hidden">
+			<nav class="options primary-background-color animated-hidden">
 				<div class="wrapper">
 					<button data-status="online" class="status online"><span>{{_ "Online"}}</span></button>
 					<button data-status="away" class="status away"><span>{{_ "Away" context="male"}}</span></button>
diff --git a/packages/rocketchat-ui-vrecord/client/vrecord.html b/packages/rocketchat-ui-vrecord/client/vrecord.html
index 3b4046a4e4c..881a941a01d 100644
--- a/packages/rocketchat-ui-vrecord/client/vrecord.html
+++ b/packages/rocketchat-ui-vrecord/client/vrecord.html
@@ -1,16 +1,16 @@
 <template name="vrecDialog">
-	<div class="vrec-dialog">
+	<div class="vrec-dialog secondary-background-color">
 		<div class="video-container">
 			<video width="320" height="240" src=""></video>
 		</div>
 		<div class="buttons">
 			<ul>
-				<li class="left-aligned">
+				<li class="left-aligned border-secondary-background-color">
 					<button class="button primary record {{recordDisabled}}" {{recordDisabled}}>
 						<i class="{{recordIcon}}"></i>
 					</button>
 				</li>
-				<li class="right-aligned">
+				<li class="right-aligned border-secondary-background-color">
 					<button class="button cancel">{{_ "Cancel"}}</button>
 					<button class="button primary ok {{okDisabled}}" {{okDisabled}}>{{_ "Ok"}}</button>
 				</li>
diff --git a/packages/rocketchat-ui-vrecord/client/vrecord.less b/packages/rocketchat-ui-vrecord/client/vrecord.less
index 97038176961..5bfd1d2f73d 100644
--- a/packages/rocketchat-ui-vrecord/client/vrecord.less
+++ b/packages/rocketchat-ui-vrecord/client/vrecord.less
@@ -2,7 +2,6 @@
 	opacity: 0;
 	visibility: hidden;
 	position: absolute;
-	background-color: @secondary-background-color;
 	border-radius: 5px;
 	box-shadow:
 		0 1px 1px 0 rgba(0, 0, 0, 0.2),
@@ -27,7 +26,7 @@
 				display: table-cell;
 				margin: 0 2px;
 				padding: 6px 0;
-				border-bottom: 2px solid @secondary-background-color;
+				border-bottom-width: 2px;
 
 				&.right-aligned {
 					text-align: right;
diff --git a/packages/rocketchat-ui-vrecord/loadStylesheet.coffee b/packages/rocketchat-ui-vrecord/loadStylesheet.coffee
deleted file mode 100644
index 62be80a50dd..00000000000
--- a/packages/rocketchat-ui-vrecord/loadStylesheet.coffee
+++ /dev/null
@@ -1,2 +0,0 @@
-RocketChat.theme.addPackageAsset ->
-	return Assets.getText 'client/vrecord.less'
diff --git a/packages/rocketchat-ui-vrecord/package.js b/packages/rocketchat-ui-vrecord/package.js
index eb8101001ee..309ac94c290 100644
--- a/packages/rocketchat-ui-vrecord/package.js
+++ b/packages/rocketchat-ui-vrecord/package.js
@@ -18,12 +18,11 @@ Package.onUse(function(api) {
 	]);
 
 
-	api.addAssets('client/vrecord.less', 'server');
+	api.addFiles('client/vrecord.less', 'client');
 
 	api.addFiles('client/vrecord.html', 'client');
 	api.addFiles('client/vrecord.coffee', 'client');
 	api.addFiles('client/VRecDialog.coffee', 'client');
 
 	api.addFiles('server/settings.coffee', 'server');
-	api.addFiles('loadStylesheet.coffee', 'server');
 });
diff --git a/packages/rocketchat-ui/lib/RoomManager.coffee b/packages/rocketchat-ui/lib/RoomManager.coffee
index 5a3ac938636..99296113cb0 100644
--- a/packages/rocketchat-ui/lib/RoomManager.coffee
+++ b/packages/rocketchat-ui/lib/RoomManager.coffee
@@ -224,9 +224,9 @@ Tracker.autorun ->
 			topOffset = $(item).offset().top + scrollTop
 			percent = 100 / totalHeight * topOffset
 			if $(item).hasClass('mention-link-all')
-				ticksBar.append('<div class="tick tick-all" style="top: '+percent+'%;"></div>')
+				ticksBar.append('<div class="tick background-attention-color" style="top: '+percent+'%;"></div>')
 			else
-				ticksBar.append('<div class="tick" style="top: '+percent+'%;"></div>')
+				ticksBar.append('<div class="tick background-primary-action-color" style="top: '+percent+'%;"></div>')
 
 	open: open
 	close: close
diff --git a/packages/rocketchat-ui/lib/cordova/keyboard-fix.coffee b/packages/rocketchat-ui/lib/cordova/keyboard-fix.coffee
index 9b45da2a5e6..119946b2499 100644
--- a/packages/rocketchat-ui/lib/cordova/keyboard-fix.coffee
+++ b/packages/rocketchat-ui/lib/cordova/keyboard-fix.coffee
@@ -8,7 +8,6 @@ if Meteor.isCordova
 		if device?.platform.toLowerCase() isnt 'android'
 			if Meteor.userId()?
 				$('.main-content').css 'height', window.innerHeight
-				$('.mobile-message-menu').css 'height', window.innerHeight
 				$('.sweet-alert').css 'transform', "translateY(-#{(document.height - window.innerHeight)/2}px)"
 				$('.sweet-alert').css '-webkit-transform', "translateY(-#{(document.height - window.innerHeight)/2}px)"
 			else
@@ -19,9 +18,8 @@ if Meteor.isCordova
 		if device?.platform.toLowerCase() isnt 'android'
 			if Meteor.userId()?
 				$('.main-content').css 'height', window.innerHeight
-				$('.mobile-message-menu').css 'height', window.innerHeight
 				$('.sweet-alert').css 'transform', ''
 				$('.sweet-alert').css '-webkit-transform', ''
 			else
 				$(document.body).css 'height', window.innerHeight
-				$(document.body).css 'overflow', 'visible'
\ No newline at end of file
+				$(document.body).css 'overflow', 'visible'
diff --git a/packages/rocketchat-ui/lib/getAvatarUrlFromUsername.coffee b/packages/rocketchat-ui/lib/getAvatarUrlFromUsername.coffee
index d27928df206..90761f6b720 100644
--- a/packages/rocketchat-ui/lib/getAvatarUrlFromUsername.coffee
+++ b/packages/rocketchat-ui/lib/getAvatarUrlFromUsername.coffee
@@ -1,10 +1,19 @@
 @getAvatarUrlFromUsername = (username) ->
 	key = "avatar_random_#{username}"
 	random = Session?.keys[key] or 0
+
 	if not username?
 		return
-	if Meteor.isCordova
-		path = Meteor.absoluteUrl().replace /\/$/, ''
+
+	cdnPrefix = (RocketChat.settings.get('CDN_PREFIX') or '').trim().replace(/\/$/, '')
+	pathPrefix = (__meteor_runtime_config__.ROOT_URL_PATH_PREFIX or '').trim().replace(/\/$/, '')
+
+	if cdnPrefix
+		path = cdnPrefix + pathPrefix
+	else if Meteor.isCordova
+		# Meteor.absoluteUrl alread has path prefix
+		path = Meteor.absoluteUrl().replace(/\/$/, '')
 	else
-		path = __meteor_runtime_config__.ROOT_URL_PATH_PREFIX || '';
-	"#{path}/avatar/#{encodeURIComponent(username)}?_dc=#{random}"
+		path = pathPrefix
+
+	return "#{path}/avatar/#{encodeURIComponent(username)}?_dc=#{random}"
diff --git a/packages/rocketchat-ui/views/404/roomNotFound.html b/packages/rocketchat-ui/views/404/roomNotFound.html
index b3c02810687..9d653a0cce2 100644
--- a/packages/rocketchat-ui/views/404/roomNotFound.html
+++ b/packages/rocketchat-ui/views/404/roomNotFound.html
@@ -1,12 +1,12 @@
 <template name="roomNotFound">
-	<section class="page-container page-list">
-		<header class="fixed-title">
+	<section class="page-container page-list content-background-color">
+		<header class="fixed-title content-background-color border-component-color">
 			{{> burger}}
 			<h2>
 				<span class="room-title">{{_ "Room_not_found"}}</span>
 			</h2>
 		</header>
-		<div class="content room-not-found">
+		<div class="content room-not-found error-color">
 			<i class="icon-attention"></i>
 			<div>
 				{{#with data}}
diff --git a/packages/rocketchat-ui/views/app/burger.html b/packages/rocketchat-ui/views/app/burger.html
index 46e7b58a840..2ae6d163307 100644
--- a/packages/rocketchat-ui/views/app/burger.html
+++ b/packages/rocketchat-ui/views/app/burger.html
@@ -4,7 +4,7 @@
 		<i></i>
 		<i></i>
 		{{#if unread}}
-			<div class="unread-burger-alert">
+			<div class="unread-burger-alert color-error-contrast background-error-color">
 				{{unread}}
 			</div>
 		{{/if}}
diff --git a/packages/rocketchat-ui/views/app/home.html b/packages/rocketchat-ui/views/app/home.html
index 2983174eb66..f9463714cae 100644
--- a/packages/rocketchat-ui/views/app/home.html
+++ b/packages/rocketchat-ui/views/app/home.html
@@ -1,6 +1,6 @@
 <template name="home">
-	<section class="page-container page-home page-static">
-		<header class="fixed-title">
+	<section class="page-container page-home page-static content-background-color">
+		<header class="fixed-title content-background-color border-component-color">
 			{{> burger}}
 			<h2>
 				<span class="room-title">{{title}}</span>
diff --git a/packages/rocketchat-ui/views/app/pageContainer.html b/packages/rocketchat-ui/views/app/pageContainer.html
index 0508293eb39..666501273d9 100644
--- a/packages/rocketchat-ui/views/app/pageContainer.html
+++ b/packages/rocketchat-ui/views/app/pageContainer.html
@@ -1,6 +1,6 @@
 <template name="pageContainer">
-	<section class="page-container page-home page-static page-list">
-		<header class="fixed-title">
+	<section class="page-container page-home page-static page-list content-background-color">
+		<header class="fixed-title content-background-color border-component-color">
 			{{> burger}}
 			<h2>
 				<span class="page-title">
diff --git a/packages/rocketchat-ui/views/app/pageSettingsContainer.html b/packages/rocketchat-ui/views/app/pageSettingsContainer.html
index e37b35c1992..46bfee36ebb 100644
--- a/packages/rocketchat-ui/views/app/pageSettingsContainer.html
+++ b/packages/rocketchat-ui/views/app/pageSettingsContainer.html
@@ -1,6 +1,6 @@
 <template name="pageSettingsContainer">
-	<section class="page-container page-home page-static page-settings">
-		<header class="fixed-title">
+	<section class="page-container page-home page-static page-settings content-background-color">
+		<header class="fixed-title content-background-color border-component-color">
 			{{> burger}}
 			<h2>
 				<span class="page-title">{{pageTitle}}</span>
diff --git a/packages/rocketchat-ui/views/app/privateHistory.html b/packages/rocketchat-ui/views/app/privateHistory.html
index 15eaf15df7a..5544350792f 100644
--- a/packages/rocketchat-ui/views/app/privateHistory.html
+++ b/packages/rocketchat-ui/views/app/privateHistory.html
@@ -1,6 +1,6 @@
 <template name="privateHistory">
-	<section class="page-container page-list">
-		<header class="fixed-title">
+	<section class="page-container page-list content-background-color">
+		<header class="fixed-title content-background-color border-component-color">
 			{{> burger}}
 			<h2>
 				<span class="room-title">{{_ "History"}}</span>
@@ -10,7 +10,7 @@
 			<form class="search-form" role="form">
 				<div class="input-line search">
 					<input type="text" id="history-filter" placeholder="{{_ "Search"}}" dir="auto">
-					<i class="icon-search"></i>
+					<i class="icon-search secondary-font-color"></i>
 				</div>
 			</form>
 			<div class="results">
diff --git a/packages/rocketchat-ui/views/app/room.coffee b/packages/rocketchat-ui/views/app/room.coffee
index 633c1f661b3..69bb49fc234 100644
--- a/packages/rocketchat-ui/views/app/room.coffee
+++ b/packages/rocketchat-ui/views/app/room.coffee
@@ -18,7 +18,7 @@ Template.room.helpers
 
 	favorite: ->
 		sub = ChatSubscription.findOne { rid: this._id }, { fields: { f: 1 } }
-		return 'icon-star favorite-room' if sub?.f? and sub.f and favoritesEnabled()
+		return 'icon-star favorite-room pending-color' if sub?.f? and sub.f and favoritesEnabled()
 		return 'icon-star-empty'
 
 	favoriteLabel: ->
@@ -575,13 +575,13 @@ Template.room.onRendered ->
 	template.isAtBottom = (scrollThreshold) ->
 		if not scrollThreshold? then scrollThreshold = 0
 		if wrapper.scrollTop + scrollThreshold >= wrapper.scrollHeight - wrapper.clientHeight
-			newMessage.className = "new-message not"
+			newMessage.className = "new-message background-primary-action-color not"
 			return true
 		return false
 
 	template.sendToBottom = ->
 		wrapper.scrollTop = wrapper.scrollHeight - wrapper.clientHeight
-		newMessage.className = "new-message not"
+		newMessage.className = "new-message background-primary-action-color not"
 
 	template.checkIfScrollIsAtBottom = ->
 		template.atBottom = template.isAtBottom(100)
diff --git a/packages/rocketchat-ui/views/app/room.html b/packages/rocketchat-ui/views/app/room.html
index 93448fed3c9..a79f89aa518 100644
--- a/packages/rocketchat-ui/views/app/room.html
+++ b/packages/rocketchat-ui/views/app/room.html
@@ -1,13 +1,13 @@
 <template name="room">
 	<div class="dropzone">
-		<div class="dropzone-overlay">
-			<div>
+		<div class="dropzone-overlay background-transparent-darkest color-content-background-color">
+			<div class="background-transparent-darkest">
 				{{_ "Drop_to_upload_file"}}
 			</div>
 		</div>
-		<section class="messages-container {{adminClass}}" id="{{windowId}}" aria-label="{{_ "Channel"}}">
+		<section class="messages-container border-component-color {{adminClass}}" id="{{windowId}}" aria-label="{{_ "Channel"}}">
 			{{#unless embeddedVersion}}
-			<header class="fixed-title">
+			<header class="fixed-title content-background-color border-component-color">
 				{{> burger}}
 				<h2>
 					{{#if showToggleFavorite}}
@@ -23,7 +23,7 @@
 				{{#with unreadData}}
 					{{#if since}}
 						{{#if count}}
-							<div class="unread-bar">
+							<div class="unread-bar color-primary-action-color background-component-color">
 								<button class="jump-to">
 									<span class="jump-to-large">{{_ "Jump_to_first_unread"}}</span>
 									<span class="jump-to-small">{{_ "Jump"}}</span>
@@ -42,7 +42,7 @@
 					{{/if}}
 				{{/with}}
 				{{#each uploading}}
-					<div class="upload-progress {{#if error}}upload-error{{/if}}">
+					<div class="upload-progress color-primary-action-color background-component-color {{#if error}}error-background error-border{{/if}}">
 						{{#if error}}
 							<div class="upload-progress-text">
 								{{error}}
@@ -64,15 +64,15 @@
 			</div>
 			<div class="messages-box {{#if selectable}}selectable{{/if}} {{viewMode}}">
 				<div class="ticks-bar"></div>
-				<button class="new-message not">
+				<button class="new-message background-primary-action-color color-primary-action-contrast not">
 					<i class="icon-down-big"></i>
 					{{_ "New_messages"}}
 				</button>
-				<div class="jump-recent {{#unless hasMoreNext}}not{{/unless}}">
+				<div class="jump-recent background-component-color {{#unless hasMoreNext}}not{{/unless}}">
 					<button>{{_ "Jump_to_recent_messages"}} <i class="icon-level-down"></i></button>
 				</div>
 				{{#unless canPreview}}
-					<div class="content room-not-found">
+					<div class="content room-not-found error-color">
 						<div>
 							{{_ "You_must_join_to_view_messages_in_this_channel"}}
 						</div>
@@ -86,7 +86,7 @@
 									{{> loading}}
 								</li>
 							{{else}}
-								<li class="start">
+								<li class="start color-info-font-color">
 									{{_ "Start_of_conversation"}}
 								</li>
 							{{/if}}
@@ -102,11 +102,11 @@
 					</ul>
 				</div>
 			</div>
-			<footer class="footer">
+			<footer class="footer border-component-color">
 				{{> messageBox}}
 			</footer>
 		</section>
-		<section class="flex-tab">
+		<section class="flex-tab secondary-background-color">
 			{{> Template.dynamic template=flexTemplate data=flexData}}
 		</section>
 	</div>
diff --git a/packages/rocketchat-ui/views/app/spotlight/spotlight.html b/packages/rocketchat-ui/views/app/spotlight/spotlight.html
index 5eacde1e2fe..f291a1bbf9e 100644
--- a/packages/rocketchat-ui/views/app/spotlight/spotlight.html
+++ b/packages/rocketchat-ui/views/app/spotlight/spotlight.html
@@ -1,7 +1,7 @@
 <template name="spotlight">
-	<div class="spotlight hidden">
-		<div class="spotlight-input">
-			<i class="icon-search"></i>
+	<div class="spotlight hidden background-transparent-darker">
+		<div class="spotlight-input secondary-background-color secondary-font-color">
+			<i class="icon-search secondary-font-color"></i>
 			<input type="text" name="spotlight">
 			{{> messagePopup popupConfig}}
 		</div>
diff --git a/packages/rocketchat-ui/views/app/videoCall/videoCall.html b/packages/rocketchat-ui/views/app/videoCall/videoCall.html
index ce641e2ab9b..1fe1594f2be 100644
--- a/packages/rocketchat-ui/views/app/videoCall/videoCall.html
+++ b/packages/rocketchat-ui/views/app/videoCall/videoCall.html
@@ -1,17 +1,17 @@
 <template name="videoCall">
 	{{#if videoAvaliable}}
 		{{#if videoActive}}
-			<div class="webrtc-video {{#if overlay}}webrtc-video-overlay{{/if}}">
-				<div class="main-video">
-					<video src="{{mainVideoUrl}}" autoplay muted="true" class="{{#if $eq mainVideoUrl selfVideoUrl}}video-flip{{/if}}"></video>
-					<div>{{mainVideoUsername}}</div>
+			<div class="webrtc-video {{#if overlay}}webrtc-video-overlay background-transparent-darker{{/if}}">
+				<div class="main-video background-transparent-darker">
+					<video src="{{mainVideoUrl}}" autoplay muted="true" class="webrtc-video-element {{#if $eq mainVideoUrl selfVideoUrl}}video-flip{{/if}}"></video>
+					<div class="background-transparent-darker">{{mainVideoUsername}}</div>
 				</div>
 				<div class="videos">
 					{{#if selfVideoUrl}}
-						<div class="video-item" data-username="$self">
-							<video src="{{selfVideoUrl}}" autoplay muted="true" class="{{#unless screenShareEnabled}}video-flip{{/unless}}"></video>
+						<div class="video-item background-transparent-darker" data-username="$self">
+							<video src="{{selfVideoUrl}}" autoplay muted="true" class="webrtc-video-element {{#unless screenShareEnabled}}video-flip{{/unless}}"></video>
 							{{#unless audioAndVideoEnabled}}
-								<div class="video-muted-overlay">
+								<div class="video-muted-overlay background-transparent-darker">
 									{{#unless audioEnabled}}
 										<button><i class="icon-mute"></i></button>
 									{{/unless}}
@@ -20,13 +20,13 @@
 									{{/unless}}
 								</div>
 							{{/unless}}
-							<div>{{_ "you"}}</div>
+							<div class="background-transparent-darker">{{_ "you"}}</div>
 						</div>
 					{{/if}}
 					{{#each remoteVideoItems}}
-						<div class="video-item {{#unless connected}}state-overlay{{/unless}}" data-state-text="{{stateText}}" data-username="{{id}}">
-							<video src="{{url}}" autoplay></video>
-							<div>{{usernameByUserId id}}</div>
+						<div class="video-item background-transparent-darker {{#unless connected}}state-overlay background-transparent-darker-before{{/unless}}" data-state-text="{{stateText}}" data-username="{{id}}">
+							<video src="{{url}}" autoplay class="webrtc-video-element"></video>
+							<div class="background-transparent-darker">{{usernameByUserId id}}</div>
 						</div>
 					{{/each}}
 				</div>
diff --git a/packages/rocketchat-ui/views/cmsPage.html b/packages/rocketchat-ui/views/cmsPage.html
index 9cd5c7fbddb..30e92787934 100644
--- a/packages/rocketchat-ui/views/cmsPage.html
+++ b/packages/rocketchat-ui/views/cmsPage.html
@@ -1,5 +1,5 @@
 <template name="cmsPage">
-	<div class="cms-page">
+	<div class="cms-page content-background-color">
 		<div class="cms-page-close">
 			<a href="/login" class="button primary"><i class="icon-cancel"></i></a>
 		</div>
diff --git a/packages/rocketchat-ui/views/fxos.html b/packages/rocketchat-ui/views/fxos.html
index 23c767884d1..c12762c3ef9 100644
--- a/packages/rocketchat-ui/views/fxos.html
+++ b/packages/rocketchat-ui/views/fxos.html
@@ -1,12 +1,12 @@
 <template name="fxOsInstallPrompt">
-	<section class="full-page">
+	<section class="full-page color-tertiary-font-color">
 		<div class="wrapper">
 			<header>
 				<a class="logo" href="/">
 					<img src="images/logo/logo.svg?v=3" />
 				</a>
 			</header>
-			<div class="cms-page">
+			<div class="cms-page content-background-color">
 				<h1>{{_ "Install_FxOs"}}</h1>
 				<p>{{_ "Install_FxOs_follow_instructions"}}</p>
 			</div>
@@ -15,14 +15,14 @@
 </template>
 
 <template name="fxOsInstallDone">
-	<section class="full-page">
+	<section class="full-page color-tertiary-font-color">
 		<div class="wrapper">
 			<header>
 				<a class="logo" href="/">
 					<img src="images/logo/logo.svg?v=3" />
 				</a>
 			</header>
-			<div class="cms-page">
+			<div class="cms-page content-background-color">
 				<h1>{{_ "Install_FxOs"}}</h1>
 				<p>{{_ "Install_FxOs_done"}}</p>
 			</div>
@@ -31,14 +31,14 @@
 </template>
 
 <template name="fxOsInstallError">
-	<section class="full-page">
+	<section class="full-page color-tertiary-font-color">
 		<div class="wrapper">
 			<header>
 				<a class="logo" href="/">
 					<img src="images/logo/logo.svg?v=3" />
 				</a>
 			</header>
-			<div class="cms-page">
+			<div class="cms-page content-background-color">
 				<h1>{{_ "Install_FxOs"}}</h1>
 				<p>{{_ "Install_FxOs_error"}}</p>
 				<p>{{installError}}</p>
diff --git a/packages/rocketchat-webrtc/WebRTCClass.coffee b/packages/rocketchat-webrtc/WebRTCClass.coffee
index a5471384a1a..4ac810fac61 100644
--- a/packages/rocketchat-webrtc/WebRTCClass.coffee
+++ b/packages/rocketchat-webrtc/WebRTCClass.coffee
@@ -595,7 +595,7 @@ class WebRTCClass
 				title = "Group audio call from #{subscription.name}"
 
 		swal
-			title: "<i class='icon-#{icon} alert-icon'></i>#{title}"
+			title: "<i class='icon-#{icon} alert-icon success-color'></i>#{title}"
 			text: "Do you want to accept?"
 			html: true
 			showCancelButton: true
diff --git a/server/startup/avatar.coffee b/server/startup/avatar.coffee
index d0b9693103b..23ed1c91894 100644
--- a/server/startup/avatar.coffee
+++ b/server/startup/avatar.coffee
@@ -1,3 +1,5 @@
+import getFileType from 'file-type'
+
 Meteor.startup ->
 	storeType = 'GridFS'
 
@@ -114,8 +116,17 @@ Meteor.startup ->
 		res.setHeader 'Cache-Control', 'public, max-age=0'
 		res.setHeader 'Expires', '-1'
 		res.setHeader 'Last-Modified', file.uploadDate?.toUTCString() or new Date().toUTCString()
-		res.setHeader 'Content-Type', file.contentType
 		res.setHeader 'Content-Length', file.length
 
+		if file.contentType?
+			res.setHeader 'Content-Type', file.contentType
+		else
+			file.readStream.once 'data', (chunk) ->
+				fileType = getFileType(chunk)
+				if fileType?
+					res.setHeader 'Content-Type', fileType.mime
+				else
+					res.setHeader 'Content-Type', 'image/jpeg'
+
 		file.readStream.pipe res
 		return