diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss
index cdca4e14..35b2beaf 100644
--- a/styles/components/_portfolio_layout.scss
+++ b/styles/components/_portfolio_layout.scss
@@ -55,10 +55,18 @@
 
     .icon-link {
       padding: 0.8rem 1.2rem;
+
+      color: $color-gray;
+      opacity: 0.3;
+      .icon {
+        @include icon-color($color-gray);
+      }
+
       &.active {
-        color: $color-gray;
+        opacity: 1.0;
+        color: $color-blue;
         .icon {
-          @include icon-color($color-gray);
+          @include icon-color($color-blue);
         }
       }
 
diff --git a/templates/portfolios/header.html b/templates/portfolios/header.html
index c736a152..16d77f2b 100644
--- a/templates/portfolios/header.html
+++ b/templates/portfolios/header.html
@@ -2,7 +2,7 @@
 {% from "components/tooltip.html" import Tooltip %}
 
 {% macro Link(icon, text, url, active=False) %}
-  <a class='icon-link {{ "active icon-link--disabled" if active }}' href='{{ url }}'>
+  <a class='icon-link {{ "active" if active }}' href='{{ url }}'>
     <div class='col'>
       <div class='icon-link--icon'>{{ Icon(icon) }}</div>
       <div class='icon-link--name'>{{ text }}</div>