diff --git a/src/scss/Variables.scss b/src/scss/Variables.scss
index c29a08b..3c6d695 100644
--- a/src/scss/Variables.scss
+++ b/src/scss/Variables.scss
@@ -1,11 +1,48 @@
-$light: #e8e8e8;
-$medium: #939393;
-$dark: #3d3d3d;
+$game-boy-1: #e3eec0;
+$game-boy-2: #aeba89;
+$game-boy-3: #5e6745;
+$game-boy-4: #202020;
+
+$game-boy-pocket-1: #e0dbcd;
+$game-boy-pocket-2: #a89f94;
+$game-boy-pocket-3: #706b66;
+$game-boy-pocket-4: #2b2b26;
+
+$gbc-pokemon-red-1: #ffefff;
+$gbc-pokemon-red-2: #f7b58c;
+$gbc-pokemon-red-3: #84739c;
+$gbc-pokemon-red-4: #181010;
+
+$gbc-pokemon-blue-1: #e7e8f3;
+$gbc-pokemon-blue-2: #8c83c3;
+$gbc-pokemon-blue-3: #634d8f;
+$gbc-pokemon-blue-4: #120b19;
+
+$gray-scale-1: #fff;
+$gray-scale-2: #b6b6b6;
+$gray-scale-3: #676767;
+$gray-scale-4: #000;
+
+$custom-light: #f9f9f9;
+$custom-hover: #e8e8e8;
+$custom-medium: #939393;
+$custom-dark: #3d3d3d;
+
 $nes-dark: #212529;
 
-$background-color: #f9f9f9;
-$font-color: $dark;
-$border-color: $dark;
+// $main-background-color: $custom-light;
+// $main-font-primary-color: $custom-dark;
+// $main-font-secondary-color: $custom-medium;
+// $main-hover-color: $custom-hover;
+// $main-border-color: $custom-dark;
+$main-background-color: $gray-scale-1;
+$main-font-primary-color: $gray-scale-4;
+$main-font-secondary-color: $gray-scale-2;
+$main-active-background-color: $gray-scale-3;
+$main-active-font-color: $gray-scale-1;
+$main-border-color: $gray-scale-4;
+
+$main-hover-color: darken($main-background-color, 5%);
 
 $normal-primary: #a8a77a;
 $normal-contrast: #fff;
diff --git a/src/scss/index.scss b/src/scss/index.scss
index 99189db..5390946 100644
--- a/src/scss/index.scss
+++ b/src/scss/index.scss
@@ -10,26 +10,63 @@ body {
 a {
   display: flex;
   align-items: center;
+
+  &:hover {
+    background-color: $main-hover-color;
+  }
+
+  &.active {
+    background-color: $main-active-background-color;
+    color: $main-active-font-color;
+
+    & > * {
+      color: $main-active-font-color;
+    }
+  }
 }
 
-a:hover {
-  background-color: $light;
+.de-emphasize {
+  color: $main-font-secondary-color;
 }
 
 /** nes.css overrides */
 
 body {
-  background-color: $background-color;
-  color: $font-color;
+  background-color: $main-background-color;
+  color: $main-font-primary-color;
+}
+
+a.active:not([href]):not([tabindex]) {
+  color: $main-active-font-color;
+}
+
+a.list-item {
+  position: relative;
+
+  &.active,
+  &:hover {
+    &::before {
+      content: "\A";
+      border-style: solid;
+      border-width: 7px 0 7px 11px;
+      border-color: transparent transparent transparent $main-font-primary-color;
+      position: absolute;
+      left: 8px;
+    }
+  }
+
+  &.active::before {
+    border-color: transparent transparent transparent $main-active-font-color;
+  }
 }
 
 .nes-container::after,
 .nes-container.is-rounded::after, {
-  border-color: $dark;
+  border-color: $main-border-color;
 }
 
 .nes-container.with-title > .title {
-  background-color: $background-color;
+  background-color: $main-background-color;
 }
 
 .nes-container:not(:last-child) {
@@ -51,5 +88,6 @@ body {
 
 .nes-input,
 .nes-textarea {
-  box-shadow: 0 4px $dark, 0 -4px $dark, 4px 0 $dark, -4px 0 $dark;
+  background-color: $main-background-color;
+  box-shadow: 0 4px $main-border-color, 0 -4px $main-border-color, 4px 0 $main-border-color, -4px 0 $main-border-color;
 }
diff --git a/src/ts/app/components/PokemonExplorer/LeagueStatsList.tsx b/src/ts/app/components/PokemonExplorer/LeagueStatsList.tsx
index 16e9867..bf25be5 100644
--- a/src/ts/app/components/PokemonExplorer/LeagueStatsList.tsx
+++ b/src/ts/app/components/PokemonExplorer/LeagueStatsList.tsx
@@ -120,13 +120,16 @@ export class LeagueStatsList extends React.Component<ILeagueStatsListProps, ISta
     private rowFactory({ index, style } : IRowFactory) {
         const activeIvs = this.props.activeIndividualValues;
         const stats = this.props.leagueStatsList[index];
-        const css = classNames({
-            active: activeIvs.level === stats.level &&
-                activeIvs.hp === stats.ivHp &&
-                activeIvs.atk === stats.ivAtk &&
-                activeIvs.def === stats.ivDef,
-            highlight: this.state.activeIndex === index,
-        });
+        const css = classNames(
+            'list-item',
+            {
+                active: activeIvs.level === stats.level &&
+                    activeIvs.hp === stats.ivHp &&
+                    activeIvs.atk === stats.ivAtk &&
+                    activeIvs.def === stats.ivDef,
+                highlight: this.state.activeIndex === index,
+            }
+        );
         const onClick = () => {
             this.props.handleActivateLeagueStats(stats);
             this.setState({ activeIndex: index });
diff --git a/src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx b/src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx
index cab57da..bd06a78 100644
--- a/src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx
+++ b/src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx
@@ -195,7 +195,7 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
                             <i className={ pokemonIconCss } />
                             <h4 className={ styles.dexHeader }>No.{ dex }</h4>
                             { leaguePokemon.form &&
-                                <h6 className={ styles.formHeader }>{ leaguePokemon.form } Forme</h6>
+                                <h6 className={ styles.formHeader }>{ leaguePokemon.form.toLowerCase().replace('_', ' ') } Forme</h6>
                             }
                             <div className={ styles.pokemonTypeWrapper }>
                                 { type1 }
diff --git a/src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss b/src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss
index 7380ebc..5a17bbc 100644
--- a/src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss
+++ b/src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss
@@ -1,10 +1,11 @@
 @import 'styles/Variables.scss';
 
 .wrapper {
+  height: 100vh;
+  margin: 0 auto;
+  flex-basis: 15rem;
   display: flex;
   flex-flow: column nowrap;
-  height: 100vh;
-  width: 25rem;
 }
 
 .pokemonName {
@@ -48,6 +49,7 @@
     margin-top: 0.5rem;
     font-size: 0.7em;
     flex-basis: 50%;
+    margin-bottom: 14px; // reset to default nes.css value
   }
 
   // override the default nes.css default, which uses #fff
@@ -243,7 +245,9 @@
 
 :global(.nes-field.is-inline) .ivInput {
   flex-grow: 0;
-  width: 5em;
+  width: 3.75rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
 }
 
 :global(.nes-field.is-inline).fieldRow {
diff --git a/src/ts/app/components/PokemonSelectList/PokemonSelectList.tsx b/src/ts/app/components/PokemonSelectList/PokemonSelectList.tsx
index 9f0ec7f..ab7c98a 100644
--- a/src/ts/app/components/PokemonSelectList/PokemonSelectList.tsx
+++ b/src/ts/app/components/PokemonSelectList/PokemonSelectList.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { ContentRect, default as Measure } from 'react-measure';
-import { FixedSizeList } from 'react-window';
+import { VariableSizeList } from 'react-window';
 
 import classNames from 'classnames';
 
@@ -50,10 +50,13 @@ export class PokemonSelectList extends React.Component<IPokemonSelectListProps,
                 this.setState({ dimensions: contentRect.bounds });
             }
         };
-        const classes = classNames({
-            loading: this.props.isLoading,
-            [styles.leftPanel]: true,
-        });
+        const classes = classNames(
+            'nes-container',
+            styles.leftPanel,
+            {
+                loading: this.props.isLoading,
+            }
+        );
 
         return (
             <div id="pokemon-select-list" className={ classes }>
@@ -64,14 +67,15 @@ export class PokemonSelectList extends React.Component<IPokemonSelectListProps,
                     {
                         ({ measureRef }) => (
                             <div ref={ measureRef }>
-                                <FixedSizeList
+                                <VariableSizeList
                                     height={ height }
                                     itemCount={ this.props.pokemonList.length }
-                                    itemSize={ 35 }
+                                    estimatedItemSize={ 25 }
+                                    itemSize={ this.calculateRowHeight }
                                     width={ width }
                                 >
                                     { this.rowFactory.bind(this) }
-                                </FixedSizeList>
+                                </VariableSizeList>
                             </div>
                         )
                     }
@@ -80,21 +84,38 @@ export class PokemonSelectList extends React.Component<IPokemonSelectListProps,
         );
     }
 
+    private readonly calculateRowHeight = (index : number) => this.props.pokemonList[index].form !== null ? 40 : 25;
+
     private rowFactory({ index, style } : IRowFactory) {
         const pokemon = this.props.pokemonList[index];
         const dex = formatDexNumber(pokemon.dex);
-        const css = classNames({
-            active: this.props.activePokemonIndex === index
-        });
+        const anchorCss = classNames(
+            'list-item',
+            {
+                active: this.props.activePokemonIndex === index
+            }
+        );
+        const dexCss = classNames(
+            'de-emphasize',
+            styles.dex
+        );
+        const formCss = classNames(
+            'de-emphasize',
+            styles.form
+        );
         const onClick = () => this.props.handleActivatePokemon(index);
         return (
             <a
                 key={ index }
                 style={ style }
-                className={ css }
+                className={ anchorCss }
                 onClick={ onClick }
             >
-                <span>{ `#${dex} ${pokemon.name} ${(pokemon.form ? ` (${pokemon.form})` : '')}` }</span>
+                <span>{ pokemon.name }</span>
+                <span className={ dexCss }>#{ dex }</span>
+                { pokemon.form &&
+                    <span className={ formCss }>{ pokemon.form.toLowerCase().replace('_', ' ') } Forme</span>
+                }
             </a>
         );
     }
diff --git a/src/ts/app/components/PokemonSelectList/styles/PokemonSelectList.scss b/src/ts/app/components/PokemonSelectList/styles/PokemonSelectList.scss
index 281184e..13fc59c 100644
--- a/src/ts/app/components/PokemonSelectList/styles/PokemonSelectList.scss
+++ b/src/ts/app/components/PokemonSelectList/styles/PokemonSelectList.scss
@@ -2,10 +2,28 @@
 
 .leftPanel {
   height: 100vh;
-  border: 1px solid $border-color;
-  width: 20em;
+  font-size: 0.8rem;
+  flex-basis: 20em;
+  padding: 6px;
 
   & > * {
     height: 100%;
   }
+
+  a {
+    padding: 5px 1em 5px 2em;
+    justify-content: space-between;
+    align-content: space-around;
+    flex-wrap: wrap;
+  }
+}
+
+.dex,
+.form {
+  font-size: 0.8em;
+  text-transform: capitalize;
+}
+
+.form {
+  flex: 0 1 100%;
 }
diff --git a/src/ts/app/components/PokemonSelectList/styles/PokemonSelectList.scss.d.ts b/src/ts/app/components/PokemonSelectList/styles/PokemonSelectList.scss.d.ts
index ff2d8cb..c8db241 100644
--- a/src/ts/app/components/PokemonSelectList/styles/PokemonSelectList.scss.d.ts
+++ b/src/ts/app/components/PokemonSelectList/styles/PokemonSelectList.scss.d.ts
@@ -1,3 +1,5 @@
 // This file is automatically generated.
 // Please do not change this file!
+export const dex: string;
+export const form: string;
 export const leftPanel: string;
diff --git a/src/ts/app/styles/PokemonApp.scss b/src/ts/app/styles/PokemonApp.scss
index a3ab805..9e8ddf4 100644
--- a/src/ts/app/styles/PokemonApp.scss
+++ b/src/ts/app/styles/PokemonApp.scss
@@ -7,6 +7,7 @@
   height: 100vh;
 
   & > * {
-    flex: 1 auto;
+    flex-grow: 0;
+    flex-shrink: 0;
   }
 }