diff --git a/src/app/index.scss b/src/app/index.scss
index fe76a7a..3651fc5 100644
--- a/src/app/index.scss
+++ b/src/app/index.scss
@@ -133,8 +133,13 @@ body {
         border-right: 0;
         border-top: 0;
         border-radius: 6px;
-        background-color: #5e739d;
-        border-bottom: 3px solid #45506e;
+        @each $category,
+          $color in $categories {
+            .#{$category} & {
+              background-color: $color;
+              border-bottom: 3px solid darken( $color, 10% );
+            }
+          }
 
         -webkit-transition: all $time ease-in-out;
         -moz-transition: all $time ease-in-out;
@@ -143,7 +148,12 @@ body {
 
         &:hover,
         &:focus {
-          background-color: #45506e;
+          @each $category,
+          $color in $categories {
+            .#{$category} & {
+              background-color: darken( $color, 10% );
+            }
+          }
         }
 
         .contraste & {
@@ -204,7 +214,7 @@ body {
     width: 100%;
     height: 100%;
     text-align: center;
-    
+
     .icon-circle{
         position: absolute;
         left: 50%;
diff --git a/src/app/layout.scss b/src/app/layout.scss
index 62e0502..e88cf35 100644
--- a/src/app/layout.scss
+++ b/src/app/layout.scss
@@ -361,7 +361,7 @@ blockquote {
 
   p {
     margin-left: 60px;
-    
+
     &:first-of-type {
       padding-top: 50px;
     }
--
libgit2 0.21.2