diff --git a/packages/rocketchat-mailer/client/views/mailerUnsubscribe.html b/packages/rocketchat-mailer/client/views/mailerUnsubscribe.html
index e00707e7b5f..637e0a59621 100644
--- a/packages/rocketchat-mailer/client/views/mailerUnsubscribe.html
+++ b/packages/rocketchat-mailer/client/views/mailerUnsubscribe.html
@@ -1,5 +1,5 @@
 <template name="mailerUnsubscribe">
-	<section class="full-page color-tertiary-font-color">
+	<section class="rc-old full-page color-tertiary-font-color">
 		<div class="wrapper">
 			<header>
 				<a class="logo" href="/">
diff --git a/packages/rocketchat-theme/client/imports/general/base_old.css b/packages/rocketchat-theme/client/imports/general/base_old.css
index bf541abb7ad..368dd351ddd 100644
--- a/packages/rocketchat-theme/client/imports/general/base_old.css
+++ b/packages/rocketchat-theme/client/imports/general/base_old.css
@@ -902,7 +902,7 @@
 
 /* rooms-box */
 
-.rc-old .flex-nav {
+.rc-old.flex-nav {
 	position: fixed;
 	top: 0;
 	left: 0;
diff --git a/packages/rocketchat-theme/client/imports/sidebar.css b/packages/rocketchat-theme/client/imports/sidebar.css
index b7824b3df70..7daedb6363f 100644
--- a/packages/rocketchat-theme/client/imports/sidebar.css
+++ b/packages/rocketchat-theme/client/imports/sidebar.css
@@ -16,10 +16,16 @@
 	overflow: visible;
 	z-index: 100;
 	will-change: transform;
+	display: flex;
+	flex-direction: column;
 
 	&__header {
 		padding: 24px 24px 32px;
 	}
+
+	& .unread-rooms {
+		display: none;
+	}
 }
 
 /* Sidebar Account */
@@ -99,6 +105,7 @@
 /* rooms list */
 .rooms-list {
 	padding: 0 16px 0 30px;
+	height: 100%;
 
 	&__list {
 		margin-bottom: 32px;
@@ -122,6 +129,7 @@
 	height: var(--room-item-height);
 	display: flex;
 	align-items: center;
+	border-radius: 2px;
 
 	&__link {
 		font-size: 1rem;
@@ -134,3 +142,11 @@
 		margin: 0 8px 0 3px;
 	}
 }
+
+.sidebar__footer {
+	padding: 24px;
+
+	& img {
+		width: 100%;
+	}
+}
diff --git a/packages/rocketchat-theme/server/variables.js b/packages/rocketchat-theme/server/variables.js
index ae2042beceb..d0e34b3896d 100644
--- a/packages/rocketchat-theme/server/variables.js
+++ b/packages/rocketchat-theme/server/variables.js
@@ -94,7 +94,7 @@ const sidebar = [
 	{
 		name: 'sidebar-content-hover:hover',
 		properties: ['background-color'],
-		value: '#6c727a'
+		value: '#414852'
 	},
 	{
 		name: 'sidebar-category-badge',
diff --git a/packages/rocketchat-ui-login/client/login/layout.html b/packages/rocketchat-ui-login/client/login/layout.html
index 056958c7a01..f05d14d4799 100644
--- a/packages/rocketchat-ui-login/client/login/layout.html
+++ b/packages/rocketchat-ui-login/client/login/layout.html
@@ -1,5 +1,5 @@
 <template name="loginLayout">
-	<section class="full-page color-tertiary-font-color">
+	<section class="rc-old full-page color-tertiary-font-color">
 		<div class="wrapper">
 			{{> loginHeader }}
 			{{> Template.dynamic template=center}}
diff --git a/packages/rocketchat-ui-login/client/username/layout.html b/packages/rocketchat-ui-login/client/username/layout.html
index d2e64070552..918b461250b 100644
--- a/packages/rocketchat-ui-login/client/username/layout.html
+++ b/packages/rocketchat-ui-login/client/username/layout.html
@@ -1,5 +1,5 @@
 <template name="usernameLayout">
-	<section class="full-page color-tertiary-font-color">
+	<section class="rc-old full-page color-tertiary-font-color">
 		<div class="wrapper">
 			{{> Template.dynamic template=render}}
 		</div>
diff --git a/packages/rocketchat-ui-login/client/username/username.html b/packages/rocketchat-ui-login/client/username/username.html
index 1f64b55e25c..f9635c62ff8 100644
--- a/packages/rocketchat-ui-login/client/username/username.html
+++ b/packages/rocketchat-ui-login/client/username/username.html
@@ -1,5 +1,5 @@
 <template name="username">
-	<section class="full-page color-tertiary-font-color">
+	<section class="rc-old full-page color-tertiary-font-color">
 		<div class="wrapper">
 			<form id="login-card" class="content-background-color color-primary-font-color" method='/'>
 				<header>
diff --git a/packages/rocketchat-ui-master/client/error.html b/packages/rocketchat-ui-master/client/error.html
index 07060aac8b9..ad3cc7edaf2 100644
--- a/packages/rocketchat-ui-master/client/error.html
+++ b/packages/rocketchat-ui-master/client/error.html
@@ -1,5 +1,5 @@
 <template name="error">
-	<section class="full-page color-tertiary-font-color">
+	<section class="rc-old full-page color-tertiary-font-color">
 		<div class="wrapper">
 			<header>
 				<a class="logo" href="/">
diff --git a/packages/rocketchat-ui-master/client/logoLayout.html b/packages/rocketchat-ui-master/client/logoLayout.html
index f59261572c3..5277a6a9407 100644
--- a/packages/rocketchat-ui-master/client/logoLayout.html
+++ b/packages/rocketchat-ui-master/client/logoLayout.html
@@ -1,5 +1,5 @@
 <template name="logoLayout">
-	<section class="full-page color-tertiary-font-color">
+	<section class="rc-old full-page color-tertiary-font-color">
 		<div class="wrapper">
 			<header>
 				<a class="logo" href="/">
diff --git a/packages/rocketchat-ui-sidenav/client/chatRoomItem.html b/packages/rocketchat-ui-sidenav/client/chatRoomItem.html
index 863bfb3d0ec..9d419a3056e 100644
--- a/packages/rocketchat-ui-sidenav/client/chatRoomItem.html
+++ b/packages/rocketchat-ui-sidenav/client/chatRoomItem.html
@@ -1,7 +1,7 @@
 <template name="chatRoomItem">
 	{{#let unread=unread name=name route=route}}
-		<li class="room-item sidebar-content-hover-background {{active}}" data-room-id="{{rid}}">
-			<a class="room-item__link sidebar-content {{alert}}" href="{{route}}" title="{{name}}">
+		<li class="room-item {{#if active}}sidebar-content-active-background{{else}}sidebar-content-hover-background{{/if}}" data-room-id="{{rid}}">
+			<a class="room-item__link sidebar-content {{alert}} {{#if active}}sidebar-content-unread{{/if}}" href="{{route}}" title="{{name}}">
 				<i class="{{roomIcon}} {{userStatus}}" aria-label=""></i>
 				<span class='room-item__name {{archived}}'>{{name}}</span>
 
diff --git a/packages/rocketchat-ui-sidenav/client/chatRoomItem.js b/packages/rocketchat-ui-sidenav/client/chatRoomItem.js
index b3d519aefeb..3d088d1280b 100644
--- a/packages/rocketchat-ui-sidenav/client/chatRoomItem.js
+++ b/packages/rocketchat-ui-sidenav/client/chatRoomItem.js
@@ -32,9 +32,12 @@ Template.chatRoomItem.helpers({
 	},
 
 	active() {
+		console.log('ACTIVE');
 		if (Session.get('openedRoom') && Session.get('openedRoom') === this.rid || Session.get('openedRoom') === this._id) {
-			return 'room-item--active';
+			return true;
 		}
+
+		return false;
 	},
 
 	canLeave() {
diff --git a/packages/rocketchat-ui-sidenav/client/sideNav.html b/packages/rocketchat-ui-sidenav/client/sideNav.html
index f192d7f3a29..7c5a9c6666d 100644
--- a/packages/rocketchat-ui-sidenav/client/sideNav.html
+++ b/packages/rocketchat-ui-sidenav/client/sideNav.html
@@ -29,7 +29,7 @@
 			<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 primary-background-color animated-hidden">
+			<div class="rc-old flex-nav primary-background-color animated-hidden">
 				<section>
 					{{> Template.dynamic template=flexTemplate data=flexData }}
 				</section>
@@ -42,7 +42,7 @@
 				</div>
 			</div>
 		{{/if}}
-		<footer class="footer">
+		<footer class="sidebar__footer">
 			{{{footer}}}
 		</footer>
 	</aside>
diff --git a/packages/rocketchat-ui/client/views/fxos.html b/packages/rocketchat-ui/client/views/fxos.html
index c12762c3ef9..3bdbcbf5502 100644
--- a/packages/rocketchat-ui/client/views/fxos.html
+++ b/packages/rocketchat-ui/client/views/fxos.html
@@ -1,5 +1,5 @@
 <template name="fxOsInstallPrompt">
-	<section class="full-page color-tertiary-font-color">
+	<section class="rc-old full-page color-tertiary-font-color">
 		<div class="wrapper">
 			<header>
 				<a class="logo" href="/">
@@ -15,7 +15,7 @@
 </template>
 
 <template name="fxOsInstallDone">
-	<section class="full-page color-tertiary-font-color">
+	<section class="rc-old full-page color-tertiary-font-color">
 		<div class="wrapper">
 			<header>
 				<a class="logo" href="/">
@@ -31,7 +31,7 @@
 </template>
 
 <template name="fxOsInstallError">
-	<section class="full-page color-tertiary-font-color">
+	<section class="rc-old full-page color-tertiary-font-color">
 		<div class="wrapper">
 			<header>
 				<a class="logo" href="/">