diff --git a/components/TimeHeader.vue b/components/TimeHeader.vue
index c474360..53102b3 100644
--- a/components/TimeHeader.vue
+++ b/components/TimeHeader.vue
@@ -45,6 +45,7 @@ header {
   grid-template-columns: 1fr 1fr 1fr;
   min-width: 18rem;
   width: 100%;
+  transition: background-color 2000ms, color 2000ms;
 }
 @media (min-width: 768px) {
   header {
diff --git a/layouts/default.vue b/layouts/default.vue
index d13e9fa..eb3335e 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -130,5 +130,6 @@ main {
 .spare-time {
   background: rgba(2555, 255, 255, 0.6);
   box-shadow: 0px 0px 21px 3px #fff;
+  transition: color 2000ms;
 }
 </style>