diff --git a/src/scss/Variables.scss b/src/scss/Variables.scss
index 71a7c35..961bfef 100644
--- a/src/scss/Variables.scss
+++ b/src/scss/Variables.scss
@@ -46,50 +46,103 @@ $main-border-color: $gray-scale-4;
 
 $main-hover-color: darken($main-background-color, 5%);
 
-$great-league-color: #4d6ed0;
-$ultra-league-color: #5e30a3;
-$master-league-color: #475b5e;
-$custom-league-color: #f00;
+$great-league-colors: (
+  primary: #649bde,
+  shadow: #243897,
+);
+$ultra-league-colors: (
+  primary: #516d76,
+  shadow: #262d31,
+);
+$master-league-colors: (
+  primary: #703fb1,
+  shadow: #361b7c,
+);
+$custom-league-colors: (
+  primary: #f00,
+  shadow: darkred,
+);
 $league-colors: (
   great: (
-    primary: $great-league-color,
-    border: $nes-dark,
-    hover: lighten($great-league-color, 10),
-    // active: #355aca,
-    blur: lighten($great-league-color, 30),
-    blur-border: lighten($nes-dark, 10),
-    shadow: #1a3ea7,
-    contrast: #fff
+    active: (
+      background-color: map-get($great-league-colors, 'primary'),
+      box-shadow-color: map-get($great-league-colors, 'shadow'),
+      border-color: $nes-dark,
+      color: #fff,
+    ),
+    blur: (
+      background-color: lighten(map-get($great-league-colors, 'primary'), 30),
+      box-shadow-color: lighten(map-get($great-league-colors, 'shadow'), 40),
+      border-color: $nes-dark,
+      color: $nes-dark,
+    ),
+    hover: (
+      background-color: lighten(map-get($great-league-colors, 'primary'), 30),
+      box-shadow-color: lighten(map-get($great-league-colors, 'shadow'), 40),
+      border-color: $nes-dark,
+      color: $nes-dark,
+    ),
   ),
   ultra: (
-    primary: $ultra-league-color,
-    border: $nes-dark,
-    hover: lighten($ultra-league-color, 10),
-    // active: #50298b,
-    blur: lighten($ultra-league-color, 30),
-    blur-border: lighten($nes-dark, 10),
-    shadow: #342085,
-    contrast: #fff
+    active: (
+      background-color: map-get($ultra-league-colors, 'primary'),
+      box-shadow-color: map-get($ultra-league-colors, 'shadow'),
+      border-color: $nes-dark,
+      color: #fff,
+    ),
+    blur: (
+      background-color: lighten(map-get($ultra-league-colors, 'primary'), 40),
+      box-shadow-color: lighten(map-get($ultra-league-colors, 'shadow'), 40),
+      border-color: $nes-dark,
+      color: $nes-dark,
+    ),
+    hover: (
+      background-color: lighten(map-get($ultra-league-colors, 'primary'), 40),
+      box-shadow-color: lighten(map-get($ultra-league-colors, 'shadow'), 40),
+      border-color: $nes-dark,
+      color: $nes-dark,
+    ),
   ),
   master: (
-    primary: $master-league-color,
-    border: $nes-dark,
-    hover: lighten($master-league-color, 10),
-    // active: #3a4a4d,
-    blur: lighten($master-league-color, 30),
-    blur-border: lighten($nes-dark, 10),
-    shadow: #2f4947,
-    contrast: #fff
+    active: (
+      background-color: map-get($master-league-colors, 'primary'),
+      box-shadow-color: map-get($master-league-colors, 'shadow'),
+      border-color: $nes-dark,
+      color: #fff,
+    ),
+    blur: (
+      background-color: lighten(map-get($master-league-colors, 'primary'), 40),
+      box-shadow-color: lighten(map-get($master-league-colors, 'shadow'), 40),
+      border-color: $nes-dark,
+      color: $nes-dark,
+    ),
+    hover: (
+      background-color: lighten(map-get($master-league-colors, 'primary'), 40),
+      box-shadow-color: lighten(map-get($master-league-colors, 'shadow'), 40),
+      border-color: $nes-dark,
+      color: $nes-dark,
+    ),
   ),
   custom: (
-    primary: $custom-league-color,
-    border: $nes-dark,
-    hover: lighten($custom-league-color, 10),
-    blur: lighten($custom-league-color, 30),
-    blur-border: lighten($nes-dark, 10),
-    shadow: darkred,
-    contrast: #fff
-  )
+    active: (
+      background-color: map-get($custom-league-colors, 'primary'),
+      box-shadow-color: map-get($custom-league-colors, 'shadow'),
+      border-color: $nes-dark,
+      color: #fff,
+    ),
+    blur: (
+      background-color: lighten(map-get($custom-league-colors, 'primary'), 40),
+      box-shadow-color: lighten(map-get($custom-league-colors, 'shadow'), 40),
+      border-color: $nes-dark,
+      color: $nes-dark,
+    ),
+    hover: (
+      background-color: lighten(map-get($custom-league-colors, 'primary'), 40),
+      box-shadow-color: lighten(map-get($custom-league-colors, 'shadow'), 40),
+      border-color: $nes-dark,
+      color: $nes-dark,
+    ),
+  ),
 );
 
 // https://bulbapedia.bulbagarden.net/wiki/Category:Type_color_templates
diff --git a/src/ts/app/components/PokemonExplorer/styles/LeagueSelector.scss b/src/ts/app/components/PokemonExplorer/styles/LeagueSelector.scss
index 640dacf..2b79735 100644
--- a/src/ts/app/components/PokemonExplorer/styles/LeagueSelector.scss
+++ b/src/ts/app/components/PokemonExplorer/styles/LeagueSelector.scss
@@ -1,57 +1,58 @@
 @import 'styles/Variables.scss';
 
-@each $league, $colors in $league-colors {
-  $blur: map-get($colors, 'blur');
-  $hover: map-get($colors, 'hover');
-  $primary: map-get($colors, 'primary');
-  $shadow: map-get($colors, 'shadow');
-  $border: map-get($colors, 'border');
-  $blur-border: map-get($colors, 'blur-border');
-  $contrast: map-get($colors, 'contrast');
+@each $league, $states in $league-colors {
+  $active: map-get($states, 'active');
+  $blur: map-get($states, 'blur');
+  $hover: map-get($states, 'hover');
 
   :global(.nes-btn).#{$league}LeagueButton {
-    color: $contrast;
-    background-color: $blur;
-    box-shadow: none;
+    color: map-get($blur, 'color');
+    background-color: map-get($blur, 'background-color');
+    box-shadow: inset -4px -4px map-get($blur, 'box-shadow-color');
+    opacity: 0.6;
     // box-shadow: inset -4px -4px darken(saturate(adjust-hue($primary, -12deg), 7), 9);
     // box-shadow: inset -4px -4px darken(saturate($primary, 14), 18);
 
     &::before,
     &::after {
-      border-color: $blur-border;
+      border-color: map-get($blur, 'border-color');
     }
 
     &:hover,
     &:focus {
-      background-color: $hover;
-      box-shadow: inset -4px -4px $shadow;
+      color: map-get($hover, 'color');
+      background-color: map-get($hover, 'background-color');
+      box-shadow: inset -6px -6px map-get($hover, 'box-shadow-color');
+      opacity: 0.75;
 
       &:active {
-        box-shadow: inset 4px 4px $shadow;
+        box-shadow: inset 4px 4px map-get($hover, 'box-shadow-color');
       }
 
       &::before,
       &::after {
-        border-color: $border;
+        border-color: map-get($hover, 'border-color');
       }
     }
 
     &.active {
-      background-color: $primary;
-      box-shadow: inset -4px -4px $shadow;
+      color: map-get($active, 'color');
+      background-color: map-get($active, 'background-color');
+      box-shadow: inset -4px -4px map-get($active, 'box-shadow-color');
+      opacity: 1;
 
       &:hover,
       &:focus {
-        box-shadow: inset -6px -6px $shadow;
+        box-shadow: inset -6px -6px map-get($active, 'box-shadow-color');
       }
 
       &:active {
-        box-shadow: inset 4px 4px $shadow;
+        box-shadow: inset 4px 4px map-get($active, 'box-shadow-color');
       }
 
       &::before,
       &::after {
-        border-color: $border;
+        border-color: map-get($active, 'border-color');
       }
     }
   }