diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
index a066ba1c..f79b6aea 100644
--- a/stylesheets/_global.scss
+++ b/stylesheets/_global.scss
@@ -31,6 +31,7 @@ body {
 #header {
   background-color: $grey_l;
   color: $grey_d;
+  transition: background-color 0.5s;
 
   &.active {
     background-color: $blue;
diff --git a/stylesheets/_index.scss b/stylesheets/_index.scss
index e9a1c74e..2d0ef240 100644
--- a/stylesheets/_index.scss
+++ b/stylesheets/_index.scss
@@ -58,7 +58,8 @@
   height: 64px;
   text-align: center;
   color: white;
-  background: #999999;
+  background-color: #999999;
+  transition: background-color 0.5s;
 
   .avatar {
     margin-bottom: -30px;
@@ -71,7 +72,7 @@
   }
 }
 .inactive .conversation-header {
-  background: $grey_l !important;
+  background-color: $grey_l !important;
   color: $grey_d;
 }
 
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index d6209481..46172835 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -39,7 +39,8 @@ body {
 
 #header {
   background-color: #f3f3f3;
-  color: #454545; }
+  color: #454545;
+  transition: background-color 0.5s; }
   #header.active {
     background-color: #2090ea;
     color: white; }
@@ -473,7 +474,8 @@ input[type=text]:active, input[type=text]:focus, input[type=search]:active, inpu
   height: 64px;
   text-align: center;
   color: white;
-  background: #999999; }
+  background-color: #999999;
+  transition: background-color 0.5s; }
   .conversation-header .avatar {
     margin-bottom: -30px;
     border: solid 2px white;
@@ -484,7 +486,7 @@ input[type=text]:active, input[type=text]:focus, input[type=search]:active, inpu
     position: relative; }
 
 .inactive .conversation-header {
-  background: #f3f3f3 !important;
+  background-color: #f3f3f3 !important;
   color: #454545; }
 
 input.search {