diff --git a/packages/rocketchat-theme/client/imports/components/contextual-bar.css b/packages/rocketchat-theme/client/imports/components/contextual-bar.css
index 5f7d8be116ead..e9e59007df5d3 100644
--- a/packages/rocketchat-theme/client/imports/components/contextual-bar.css
+++ b/packages/rocketchat-theme/client/imports/components/contextual-bar.css
@@ -2,20 +2,20 @@
 	z-index: 1;
 
 	display: flex;
+
+	overflow: hidden;
 	flex-direction: column;
 	flex: 0 0 var(--flex-tab-width);
 
 	width: var(--flex-tab-width);
 	height: 100%;
 
-
 	background: var(--color-white);
 	box-shadow: 0 3px 1px 2px rgba(31, 35, 41, 0.08);
 
 	&-wrap {
 		position: relative;
 
-
 		display: flex;
 		flex-direction: column;
 		flex: 1 1 100%;
@@ -29,6 +29,7 @@
 
 	&__content {
 		overflow: auto;
+
 		padding: var(--default-padding);
 
 		& .js-back {
@@ -44,10 +45,11 @@
 	&__header {
 		display: flex;
 		flex: 0 0 auto;
-		justify-content: flex-end;
+
 		padding: var(--default-padding);
 
 		align-items: end;
+		justify-content: flex-end;
 
 		&-data {
 			display: flex;
@@ -81,9 +83,8 @@
 		}
 	}
 
-
 	& .search-form .rc-input__icon-svg {
-    font-size: 1.2rem;
+		font-size: 1.2rem;
 	}
 }
 
@@ -116,9 +117,9 @@
 .attachments {
 	&__item {
 		display: flex;
+		overflow: hidden;
 
 		flex: 1;
-		overflow: hidden;
 
 		transition: background-color 0.3s;
 
@@ -234,20 +235,25 @@
 
 .mail-messages__instructions {
 	display: flex;
+
+	margin-bottom: 3rem;
+
+	padding: 1.25rem;
+
+	color: var(--rc-color-alert-message-primary);
+
 	border-width: 1px;
 	border-color: var(--rc-color-alert-message-primary);
-	background: var(--rc-color-alert-message-primary-background);
 	border-radius: 2px;
-	color: var(--rc-color-alert-message-primary);
-	padding: 1.25rem;
-	margin-bottom: 3rem;
+	background: var(--rc-color-alert-message-primary-background);
 
 	&--selected {
-		background: var(--rc-color-alert-message-secondary-background);
-		border-color: var(--rc-color-alert-message-secondary);
-		color: var(--rc-color-alert-message-secondary);
 
 		cursor: pointer;
+
+		color: var(--rc-color-alert-message-secondary);
+		border-color: var(--rc-color-alert-message-secondary);
+		background: var(--rc-color-alert-message-secondary-background);
 	}
 
 	&--warning {
@@ -258,26 +264,31 @@
 
 	&-wrapper {
 		display: flex;
+
 		margin: 0 -10px;
 	}
 
 	&-icon {
-		font-size: 2rem;
 		margin: 0 10px;
 
+		font-size: 2rem;
+
 		&--hand-pointer {
-			transform: rotate3d(0, 0, 1, -25deg);
 			margin: 0 15px;
+
+			transform: rotate3d(0, 0, 1, -25deg);
 			fill: currentColor;
 		}
 	}
 
 	&-text {
-		font-size: 0.875rem;
-		font-weight: 600;
-		margin: 0 10px;
 		display: flex;
 		flex-direction: column;
+
+		margin: 0 10px;
+
+		font-size: 0.875rem;
+		font-weight: 600;
 		line-height: 1.2rem;
 
 		&-selected {
diff --git a/packages/rocketchat-theme/client/imports/components/header.css b/packages/rocketchat-theme/client/imports/components/header.css
index afc16f2ccfca5..b5d7e6cf847b5 100644
--- a/packages/rocketchat-theme/client/imports/components/header.css
+++ b/packages/rocketchat-theme/client/imports/components/header.css
@@ -1,33 +1,38 @@
 .rc-header {
+	padding: 0 0.5rem;
 
-	&--height-fixed {
-		height: 78px;
-	}
+	&__wrap {
+
+		z-index: 2;
 
-	&__block {
 		display: flex;
 
-		margin: 0 0.5rem;
-		align-items: center;
-	}
+		margin: 0 -0.5rem;
 
-	align-items: center;
-	z-index: 2;
+		padding: var(--header-padding);
 
-	display: flex;
+		white-space: nowrap;
 
-	margin: 0 -0.5rem;
+		background-color: var(--header-background-color);
+		box-shadow: 0 1px 2px 0 rgba(31, 35, 41, 0.08);
 
-	padding: var(--header-padding);
+		font-size: var(--header-title-font-size);
 
-	white-space: nowrap;
+		align-items: center;
 
-	background-color: var(--header-background-color);
-	box-shadow: 0 1px 2px 0 rgba(31, 35, 41, 0.08);
+		justify-content: space-between;
+	}
+
+	&--height-fixed {
+		height: 78px;
+	}
 
-	font-size: var(--header-title-font-size);
+	&__block {
+		display: flex;
 
-	justify-content: space-between;
+		margin: 0 0.5rem;
+		align-items: center;
+	}
 
 	&__content {
 		display: flex;
diff --git a/packages/rocketchat-ui/client/components/header/header.html b/packages/rocketchat-ui/client/components/header/header.html
index 1679dbef87d90..2ded1a2af6059 100644
--- a/packages/rocketchat-ui/client/components/header/header.html
+++ b/packages/rocketchat-ui/client/components/header/header.html
@@ -1,74 +1,77 @@
 <template name="header">
 	<header class="rc-header{{#if fixedHeight}} rc-header--height-fixed{{/if}}" >
-		<div class="rc-header__block rc-header--burger">
-			{{> burger}}
-		</div>
-		{{#if showToggleFavorite}}
+		<div class="rc-header__wrap">
+
+			<div class="rc-header__block rc-header--burger">
+				{{> burger}}
+			</div>
+			{{#if showToggleFavorite}}
 			<div class="rc-header__block rc-header__favorite">
 				<a href="#favorite" class="rc-header__toggle-favorite {{state}}">{{> icon block="rc-header__icon" icon="star"}}</a>
 			</div>
-		{{/if}}
-		<!-- TODO: fix it style and helper -->
-		{{#if tokenAccessChannel}}
+			{{/if}}
+			<!-- TODO: fix it style and helper -->
+			{{#if tokenAccessChannel}}
 			<i class="icon-tokenpass" aria-label="{{_ "Tokenpass_Channel_Label"}}"></i>
-		{{/if}}
-		{{#if isChannel}}
+			{{/if}}
+			{{#if isChannel}}
 			<div class="rc-header__content rc-header__block">
 				{{#if isDirect}}
-					<div class="rc-header__image rc-header__block">
-						{{> avatar username=avatarBackground}}
-					</div>
+				<div class="rc-header__image rc-header__block">
+					{{> avatar username=avatarBackground}}
+				</div>
 				{{/if}}
 
 				<div class="rc-header__data">
 					{{#unless secondaryName}}
-						<div class="rc-header__name">{{> icon block="rc-header__icon" icon=channelIcon}}{{roomName}}</div>
+					<div class="rc-header__name">{{> icon block="rc-header__icon" icon=channelIcon}}{{roomName}}</div>
 					{{else}}
-						<div class="rc-header__name">{{roomName}} <div class="rc-header__username">@{{secondaryName}}</div></div>
+					<div class="rc-header__name">{{roomName}} <div class="rc-header__username">@{{secondaryName}}</div></div>
 					{{/unless}}
 
 					{{#if isDirect}}
 					<span class="rc-header__status">
-							<div class="rc-header__status-bullet rc-header__status-bullet--{{userStatus}}" title="{{userStatus}}"></div>
-							<div class="rc-header__visual-status">{{userStatus}}</div>
-						</span>
+						<div class="rc-header__status-bullet rc-header__status-bullet--{{userStatus}}" title="{{userStatus}}"></div>
+						<div class="rc-header__visual-status">{{userStatus}}</div>
+					</span>
 					{{else}}
-						{{#if roomTopic}}<span class="rc-header__topic">{{{RocketChatMarkdown roomTopic}}}</span>{{/if}}
+					{{#if roomTopic}}<span class="rc-header__topic">{{{RocketChatMarkdown roomTopic}}}</span>{{/if}}
 					{{/if}}
 				</div>
 
 				{{#if sentimentSmile}}
-					<span class="sentiment">{{sentimentSmile}}</span>
+				<span class="sentiment">{{sentimentSmile}}</span>
 				{{/if}}
 				{{#if isTranslated}}
-					<i class="icon-language" aria-label="{{_ "Translated"}}"></i>
+				<i class="icon-language" aria-label="{{_ "Translated"}}"></i>
 				{{/if}}
 			</div>
-		{{/if}}
+			{{/if}}
 
-		{{#if isSection}}
+			{{#if isSection}}
 			<span class="rc-header__block">{{_ sectionName}}</span>
-		{{/if}}
+			{{/if}}
 
-		{{#if Template.contentBlock}}
+			{{#if Template.contentBlock}}
 			{{> Template.contentBlock}}
-		{{/if}}
+			{{/if}}
 
-		{{#unless isChannel}}
+			{{#unless isChannel}}
 			{{# unless hideHelp}}
-				<div class="rc-header__section-help"></div>
+			<div class="rc-header__section-help"></div>
+			{{/unless}}
 			{{/unless}}
-		{{/unless}}
 
-		{{#with toolbarButtons}}
+			{{#with toolbarButtons}}
 			<div class="iframe-toolbar">
 				{{#each buttons}}
-					<button class="{{id}}">
-						{{#if icon}}<i class="{{icon}}"></i>{{/if}}
-						{{label}}
-					</button>
+				<button class="{{id}}">
+					{{#if icon}}<i class="{{icon}}"></i>{{/if}}
+					{{label}}
+				</button>
 				{{/each}}
 			</div>
-		{{/with}}
+			{{/with}}
+		</div>
 	</header>
 </template>