diff --git a/app/theme/client/imports/components/header.css b/app/theme/client/imports/components/header.css
index 063647aca0bb..3ef3fdc1dc8b 100644
--- a/app/theme/client/imports/components/header.css
+++ b/app/theme/client/imports/components/header.css
@@ -248,15 +248,7 @@
 
 		padding: 0 0.25rem;
 
-		color: var(--header-toggle-favorite-star-color);
-
-		&.empty {
-			color: var(--header-toggle-favorite-color);
-
-			& > .rc-header__icon {
-				fill: none;
-			}
-		}
+		color: var(--header-toggle-favorite-color);
 
 		& > .rc-header__icon {
 			font-size: 2rem;
@@ -265,6 +257,10 @@
 		&:hover {
 			color: var(--header-toggle-favorite-star-color);
 		}
+
+		&--checked {
+			color: var(--header-toggle-favorite-star-color);
+		}
 	}
 
 	&__toggle-encryption {
diff --git a/app/theme/client/imports/components/tooltip.css b/app/theme/client/imports/components/tooltip.css
index 4d60d4ca826a..5c08d8be2516 100644
--- a/app/theme/client/imports/components/tooltip.css
+++ b/app/theme/client/imports/components/tooltip.css
@@ -21,7 +21,6 @@
 
 		bottom: 100%;
 
-		min-height: 100%;
 		margin: 11px 0;
 		padding: 0.5em 1em;
 
diff --git a/app/ui/client/components/header/header.js b/app/ui/client/components/header/header.js
index 8fef0596d4e8..380a80bdacd7 100644
--- a/app/ui/client/components/header/header.js
+++ b/app/ui/client/components/header/header.js
@@ -1,6 +1,7 @@
 import { Template } from 'meteor/templating';
 
 import { TabBar, fireGlobalEvent } from '../../../../ui-utils';
+import './header.html';
 
 Template.header.helpers({
 	back() {
diff --git a/app/ui/client/components/header/headerRoom.html b/app/ui/client/components/header/headerRoom.html
index b3d6a7c2fff4..7cd0b5a2e1bb 100644
--- a/app/ui/client/components/header/headerRoom.html
+++ b/app/ui/client/components/header/headerRoom.html
@@ -14,7 +14,7 @@
 
 			{{#if isToggleFavoriteButtonVisible}}
 				<div class="rc-header__block rc-header__favorite rc-header__block--action">
-					<button aria-label="{{toggleFavoriteButtonIconLabel}}" type="button" class="rc-header__toggle-favorite rc-header__first-icon js-favorite">
+					<button aria-label="{{toggleFavoriteButtonIconLabel}}" type="button" class="rc-header__toggle-favorite {{#if isToggleFavoriteButtonChecked}}rc-header__toggle-favorite--checked{{/if}} rc-header__first-icon rc-tooltip rc-tooltip--down rc-tooltip--start js-favorite">
 						{{> icon block="rc-header__icon" icon=toggleFavoriteButtonIcon}}
 					</button>
 				</div>
diff --git a/app/ui/client/components/header/headerRoom.js b/app/ui/client/components/header/headerRoom.js
index 3f72b2d8d5c0..2d8418fe4aed 100644
--- a/app/ui/client/components/header/headerRoom.js
+++ b/app/ui/client/components/header/headerRoom.js
@@ -14,6 +14,8 @@ import { emoji } from '../../../../emoji';
 import { Markdown } from '../../../../markdown/client';
 import { hasAllPermission } from '../../../../authorization';
 
+import './headerRoom.html';
+
 const getUserStatus = (id) => {
 	const roomData = Session.get(`roomData${ id }`);
 	return roomTypes.getUserStatus(roomData.t, id);
@@ -27,6 +29,7 @@ const getUserStatusText = (id) => {
 Template.headerRoom.helpers({
 	isDiscussion: () => Template.instance().state.get('discussion'),
 	isToggleFavoriteButtonVisible: () => Template.instance().state.get('favorite') !== null,
+	isToggleFavoriteButtonChecked: () => Template.instance().state.get('favorite'),
 	toggleFavoriteButtonIconLabel: () => (Template.instance().state.get('favorite') ? t('Unfavorite') : t('Favorite')),
 	toggleFavoriteButtonIcon: () => (Template.instance().state.get('favorite') ? 'star-filled' : 'star'),
 
@@ -145,6 +148,7 @@ Template.headerRoom.events({
 	'click .js-favorite'(event, instance) {
 		event.stopPropagation();
 		event.preventDefault();
+		event.currentTarget.blur();
 
 		return Meteor.call(
 			'toggleFavorite',
diff --git a/app/ui/client/index.js b/app/ui/client/index.js
index e812fc0e40dc..39f35a953ee3 100644
--- a/app/ui/client/index.js
+++ b/app/ui/client/index.js
@@ -49,9 +49,7 @@ import './components/popupList.html';
 import './components/popupList';
 import './components/selectDropdown.html';
 
-import './components/header/header.html';
 import './components/header/header';
-import './components/header/headerRoom.html';
 import './components/header/headerRoom';
 import './components/contextualBar.html';
 import './components/contextualBar';