diff --git a/app/view/main/Main.js b/app/view/main/Main.js
index b575d7f4..e3b3a04b 100644
--- a/app/view/main/Main.js
+++ b/app/view/main/Main.js
@@ -26,7 +26,9 @@ Ext.define('Rambox.view.main.Main', {
 	,autoShow: true
 	,deferredRender: false
 	,tabBar: {
-		items: [{
+		 id: 'mainTabBar'
+		,cls: JSON.parse(localStorage.getItem('dontDisturb')) ? 'dontdisturb' : ''
+		,items: [{
 			 xtype: 'button'
 			,html: '<span class="fa fa-heart" style="color:red;font-size:16px;cursor:pointer;padding:0 5px;"></span>'
 			,baseCls: ''
diff --git a/app/view/main/MainController.js b/app/view/main/MainController.js
index a4e3c9a9..c338cf9c 100644
--- a/app/view/main/MainController.js
+++ b/app/view/main/MainController.js
@@ -319,6 +319,8 @@ Ext.define('Rambox.view.main.MainController', {
 
 		btn.pressed ? btn.setGlyph('xf1f7@FontAwesome') : btn.setGlyph('xf0f3@FontAwesome');
 
+		Ext.getCmp('mainTabBar').getEl().toggleCls('dontdisturb');
+
 		// If this method is called from Lock method, prevent showing toast
 		if ( !e ) return;
 		Ext.toast({
diff --git a/packages/local/rambox-default-theme/sass/src/tab/Bar.scss b/packages/local/rambox-default-theme/sass/src/tab/Bar.scss
index 90e1bc3e..3ca5fc8e 100644
--- a/packages/local/rambox-default-theme/sass/src/tab/Bar.scss
+++ b/packages/local/rambox-default-theme/sass/src/tab/Bar.scss
@@ -7,3 +7,10 @@
 		margin-top: -10px;
 	}
 }
+
+.dontdisturb {
+	background-color: #c3c3c3;
+	.x-tab {
+		background-color: #c3c3c3;
+	}
+}