diff --git a/.storybook/config.js b/.storybook/config.js
index 650cb43d..3050c1c5 100644
--- a/.storybook/config.js
+++ b/.storybook/config.js
@@ -1,4 +1,4 @@
-import '../.storybook/styles/application.scss'
+import '../.storybook/styles/storybook.scss'
 
 import { configure, addDecorator } from '@storybook/react'
 import { withA11y } from '@storybook/addon-a11y'
diff --git a/.storybook/styles/application.scss b/.storybook/styles/application.scss
deleted file mode 100644
index 155fd129..00000000
--- a/.storybook/styles/application.scss
+++ /dev/null
@@ -1,69 +0,0 @@
-/*
- * This is a manifest file that'll be compiled into application.css, which will include all the files
- * listed below.
- *
- * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
- * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
- *
- * You're free to add application-wide styles to this file and they'll appear at the bottom of the
- * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
- * files in this directory. Styles in this file should be added after the last require_* statement.
- * It is generally better to create a new file per style scope.
- *
-
- *= require_self
- */
-
-// Imports
-@import "~bourbon/app/assets/stylesheets/bourbon";
-@import "~bourbon-neat/app/assets/stylesheets/neat";
- @import "datepicker";
-
- $output-bourbon-deprecation-warnings: false;
-
-// Settings
- @import "settings/settings";
-
-
- // Base Styles
- @import "base/typography";
-
-
- // Components List
- @import "components/buttons";
- @import "components/footer";
- @import "components/navigation";
- @import "components/side-navigation";
- @import "components/page-header";
- @import "components/forms";
- @import "components/table";
- @import "components/spinner";
- @import "components/modal";
- @import "components/flash";
- @import "components/grid";
- @import "components/empty-state";
- @import "components/expander";
- @import "components/blade";
- @import "components/due-dates";
- @import "components/reminders";
- @import "components/summit-list";
- @import "components/profile-card";
- @import "components/profile-section";
- @import "components/invites";
- @import "components/loading-container";
- @import "components/activity";
- @import "components/progress-circle";
- @import "components/sign-up-blocks";
- @import "components/emails";
- @import "components/login";
- @import "components/pagination";
- @import "components/sidebar-content";
- @import "components/radio";
- @import "components/purchased-profile-blade";
- @import "components/search-results-and-filtering";
- @import "components/recruiter-search";
- @import "components/tabs";
-
- // Page Styles
- @import "pages/main";
- @import "pages/styleguide";
diff --git a/.storybook/styles/base/_typography.scss b/.storybook/styles/base/_typography.scss
index 78ef7a16..6041bdc8 100755
--- a/.storybook/styles/base/_typography.scss
+++ b/.storybook/styles/base/_typography.scss
@@ -4,12 +4,11 @@
 html{
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
+  font-size: 87.5%;
 }
 
 body {
-  background-color: $grey-lighter;
   @include font-type($primary-sans-serif, normal, normal);
-  font: 100%/1.618;
   overflow-x: hidden;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
@@ -21,16 +20,15 @@ h2,
 h3,
 h4,
 h5,
-h6
- {
+h6 {
   color: $black-base;
+  @include font-type($primary-sans-serif, normal, $regular);
+  @include rem(margin-bottom, 12px);
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
-  letter-spacing: 1.75;
-  line-height: 1.1;
 
   a{
-    @include transition(all 0.3s ease-in-out);
+    @include font-type($primary-sans-serif, normal, $regular);
 
     &:hover{
       text-decoration: underline;
@@ -38,47 +36,61 @@ h6
   }
 }
 
-h1 {
-  font-size: $s-bigger;
-  @include media($tablet) {
-    font-size: $s-large;
+h1 { 
+  @include rem(font-size, 28px);
+  font-weight: $light;
+
+  @include grid-media($tablet-landscape){
+    @include rem(font-size, 31px);
   }
 }
 
-h2 {
-  font-size: $s-medium;
-  @include media($tablet-landscape) {
-    font-size: $s-bigger;
-    font-weight: 500;
+
+h2 { 
+  @include rem(font-size, 25px);
+  font-weight: $light;
+  @include rem(margin-bottom, 30px);
+
+  @include grid-media($tablet-landscape){
+    @include rem(font-size, 27px);
   }
 }
 
 h3 {
-  font-size: $s-base;
-  @include media($tablet) {
-    font-size: $s-big;
-    @include rem(margin-bottom, 20px);
-  }
+  @include font-size-jumbo;   
+  font-weight: $semibold;
 }
 
-h4 { font-size: $s-bigger; }
-h5 { font-size: $s-big; }
-h6 { font-size: $s-big; }
-
 h4 {
+  @include font-size-display;   
+  font-weight: $semibold;
+}
+
+h5 {  
+  @include font-size-subheader; 
+  font-weight: $semibold;
+}
+
+h6 { 
+  @include font-size-minor; 
+  font-weight: $semibold;
   text-transform: uppercase;
-  font-weight: $bold;
 }
 
-p {
-  font-size: $s-small;
-  //@include rem(margin-bottom, 12px);
-  line-height: 22px;
-  color: $black-base;
-  @include media($tablet) {
-    font-size: $s-base;
-  }
 
+h3, h4, h5, h6{
+  @include rem(margin, 30px 0px);
+}
+
+p{
+  color: $black-base;
+  font-weight: normal;
+  font-style: normal;
+  @include font-type($primary-sans-serif, normal, $regular);
+  @include font-size-mbody;
+  @include rem(margin-bottom, 12px);
+  line-height: $base-line-loose;
+  @include rem(margin-bottom, 30px);
 
   &:last-child { @include rem(margin-bottom, 0); }
 }
@@ -87,6 +99,7 @@ li,
 dd{
   color: $black-base;
   @include font-type($primary-sans-serif, normal, normal);
+  @include font-size-mbody;
   line-height: $base-line-height;
   list-style: none;
 }
@@ -94,35 +107,19 @@ dd{
 a {
   color: $black-base;
   cursor: pointer;
-  @include transition(all 0.3s ease-in-out);
-  text-decoration: none;
-  border-bottom: 2px solid $blue-light;
-  font-size: $s-small;
+  @include font-size-mbody;
+  @include font-type($primary-sans-serif, normal, normal);
+  text-decoration: underline;
+  transition: all .5s ease-in-out;
 
   &:hover, &:focus  {
-    border-bottom: 2px solid $blue-base;
+    color: $black-dark;
   }
-
-  &:active,
-  &:focus {
-    outline: none;
-  }
-}
-
-.edit-link {
-  display: inline-block;
-  cursor: pointer;
-  border-bottom: 2px solid $blue-light;
 }
 
 strong, b { font-weight: $bold; }
 i, em { font-style: italic; }
 
-
-b, i {
-  color: $black-base;
-}
-
-b, i {
-  font-size: $s-base;
+u{
+  text-decoration: underline;
 }
diff --git a/.storybook/styles/components/_activity.scss b/.storybook/styles/components/_activity.scss
deleted file mode 100644
index d6d7d4c3..00000000
--- a/.storybook/styles/components/_activity.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-.activity {
-
-  h3 {
-    text-align: center;
-    text-transform: uppercase;
-  }
-  .activity-increase {
-    color: $green-base;
-  }
-
-  .activity-decrease {
-    color: $red-base;
-  }
-
-  img {
-    height: 10px;
-    width: inherit;
-    @include rem(margin-right, 5px);
-  }
-
-  img, p {
-    display: inline-block;
-  }
-}
diff --git a/.storybook/styles/components/_blade.scss b/.storybook/styles/components/_blade.scss
deleted file mode 100644
index 3f6d418a..00000000
--- a/.storybook/styles/components/_blade.scss
+++ /dev/null
@@ -1,115 +0,0 @@
-/*-----------------------
-Blade Header
------------------------*/
-
-.blade-header{
-  color: $grey-base;
-  @include rem(margin-bottom, 10px);
-}
-
-
-/*-----------------------
-Blade Contents
------------------------*/
-.blade{
-  background-color: $white-base;
-  box-shadow: 0 0 17px 0 rgba(222,222,222,0.50);
-  cursor: pointer;
-  @include rem(margin-bottom, 10px);
-  @include rem(padding, 15px);
-  @include transition(all 0.3s ease-in-out);
-
-  &:hover{
-    background-color: $blue-light;
-  }
-
-  p{
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    line-height: normal;
-  }
-
-  .profile-thumb{
-    background-color: $white-light;
-    border-radius: 50%;
-    display: inline-block;
-    height: 42px;
-    @include rem(margin-right, 10px);
-    width: 42px;
-    vertical-align: -4px;
-
-    img{
-      border-radius: 50%;
-    }
-  }
-
-  .text-block{
-    display: inline-block;
-    width: calc(100% - 58px);
-
-    p{
-      margin: 0px;
-    }
-
-    span{
-      color: $grey-base;
-      @include s-small;
-    }
-  }
-}
-
-
-.blade{
-
-  .center{
-    @include rem(margin-top, 10px);
-  }
-
-  a{
-    @include rem(margin-top, 5px);
-  }
-
-  span{
-    border-radius: 50%;
-    display: inline-block;
-    height: 10px;
-    width: 10px;
-    vertical-align: text-top;
-    @include rem(margin-right, 5px);
-  }
-
-  .is-complete span{
-    background-color: $green-base;
-  }
-
-  .in-progress span{
-    background-color: $yellow-base;
-  }
-
-  .is-late span{
-    background-color: $red-base;
-  }
-}
-
-.status{
-  li{
-    @include font-type($primary-sans-serif, normal, $regular);
-    @include s-small;
-    color: $grey-base;
-    display: inline-block;
-    line-height: normal;
-
-    &:before{
-      content: "/";
-      display: inline-block;
-      @include rem(margin, 0px 2px);
-    }
-
-    &:first-child, &:nth-child(2){
-      &:before{
-        display: none;
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/.storybook/styles/components/_buttons.scss b/.storybook/styles/components/_buttons.scss
index bc712671..b5788122 100755
--- a/.storybook/styles/components/_buttons.scss
+++ b/.storybook/styles/components/_buttons.scss
@@ -3,50 +3,30 @@
 
 // Main Button
 @mixin button{
+  border-radius: 0px;
   display: inline-block;
-  font-weight: $bold;
-  @include rem(padding, 10px);
-  @include transition (all 0.3s ease-in-out);
-  letter-spacing: 1px;
-  line-height: normal;
+  @include font-type($primary-sans-serif, normal, $bold);
+  @include rem(padding, 8px 15px);
+  @include rem(font-size, 13px);
+  transition: all .5s ease-in-out;
+  min-width: 100px;
   position: relative;
   text-align: center;
   text-decoration: none;
-  text-transform: uppercase;
-  width: 100%;
-
-  &[class*=-outline]{
-    box-shadow: none;
-  }
-
-  text{
-    align: center;
-    decoration: none;
-  }
   -webkit-appearance: none;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  @include rem(height, 46px);
 
   &:hover{ cursor: pointer; }
 
   &:focus{
     border: none;
-    outline: none;
+    // @include outline-dark;
     text-decoration: none;
   }
 }
 
-button.button-primary:hover {
-  background-color: $green-dark;
-}
-
-button.button-alert:hover {
-  background-color: $yellow-dark;
-}
-
-button.button-chill:hover {
-  background-color: $grey-base;
-  color: $white-base;
-}
-
 
 // Button Styles
 @each $button in $buttons{
@@ -57,7 +37,7 @@ button.button-chill:hover {
   $hover-bg:    nth($button, 5);
   $hover-color: nth($button, 6);
 
-  .button-#{$type}{
+  .button-#{$type}, a.button-#{$type}{
     background-color: $bg-1;
     border: 1px solid $border;
     color: $color;
@@ -67,7 +47,6 @@ button.button-chill:hover {
       background-color: $hover-bg;
       border: 1px solid $hover-bg;
       color: $hover-color;
-      opacity: 1;
     }
 
     &:active{
@@ -79,79 +58,124 @@ button.button-chill:hover {
     &:focus{ border: 1px solid $hover-bg; }
 
     &.is-disabled{
-      opacity: 0.4;
+      background-color: $bg-1;
+      color: $color;
       cursor: not-allowed;
+      opacity: 0.4;
     }
 
     &.in-progress{
-      pointer-events: none;
       color: transparent;
+      pointer-events: none;
       position: relative;
 
       &:after{
-         border: 2px solid rgba(255,255,255,1);
+         animation: spin 0.5s linear infinite;
+         border: 2px solid $color;
          border-radius: 50%;
          border-right-color: transparent;
          border-top-color: transparent;
          content:"";
          display: block;
          height: 20px;
-         @include animation(spin 0.5s linear infinite);
-         margin: 0 calc((100% - 40px)/2);
-         position: absolute;
-         top: 12px;
+         @include position(absolute, 10px null null null);
+         margin: 0 calc((100% - 50px)/2);
          width: 20px;
       }
+    }
+
+    &.with-arrow{
+      align-items: center;
+      display: flex;
+      min-width: 170px;
+      text-align: left;
+      text-decoration: none;
 
-      &[class*=-primary-outline]{
-        &:after{
-          border: 2px solid $blue-base;
-          border-right-color: transparent;
-          border-top-color: transparent;
-        }
+      &:after{
+        // background: url('../../images/icons/arrow-right.svg') no-repeat center top;
+        background-size: 100%;
+        content: "";
+        display: inline-block;
+        height: 14px;
+        margin-left: auto;
+        transition: all 0.3s ease-in-out;
+        vertical-align: sub;
+        width: 9px;
       }
 
-      &[class*=-alert-outline]{
-        &:after{
-          border: 2px solid $yellow-base;
-          border-right-color: transparent;
-          border-top-color: transparent;
-        }
+      &:hover:after{
+        // background: url('../../images/icons/arrow-right-white.svg') no-repeat center top;
+        background-size: 100%;
       }
     }
+
+    span{
+      top: calc(50% - 7px);
+      position: relative;
+    }
   }
 
   // Links
   .link-#{$type}{
     color: $bg-1;
     display: inline-block;
-    @include s-base;
-    @include font-type($primary-sans-serif, normal, $bold);
-    @include transition(all 0.3s ease-in-out);
-    @include rem(margin-top, 15px);
-    @include rem(padding-bottom, 3px);
+    @include font-size-sbody;
+    @include font-type($primary-sans-serif, normal, normal);
+    transition: all 0.3s ease-in-out;
+    @include rem(margin-bottom, 20px);
     text-decoration: none;
+    width: fit-content;
 
     &:hover{
       color: $hover-bg;
+      text-decoration: underline;
+    }
+
+    &:focus{
+      // @include outline-dark;
+    }
+  
+    &.with-underline{
+      text-decoration: underline;
+    }
+
+    &.all-caps{
+      text-transform: uppercase;
+      @include rem(font-size, 13px);
+      letter-spacing: 0.5px;
+      font-weight: $semibold;
+      display: block;
+
+      img{
+        width: 10px;
+        display: inline-block;
+        @include rem(margin-right, 8px);
+        vertical-align: middle;
+      }
     }
   }
 }
 
 
 // Buton Sizes
-.button-small {
-  @include rem(padding, 5px 6px);
-  @include s-small;
-  min-width: inherit;
-  width: 100px;
-}
+.button-small, a.button-small{
+  @include rem(height, 36px);
+  min-width: 0px;
 
-.button-large {
-   @include rem(padding, 15px 12px);
+  &.in-progress{
+    &:after{
+      top: 5px;
+    }
+  }
 }
 
-.button-arrow {
-    padding: 15px 14px;
-}
+.button-large, a.button-large {
+   @include rem(height, 60px);
+   min-width: 160px;
 
+   &.in-progress{
+     &:after{
+       top: 17px;
+     }
+   }
+}
\ No newline at end of file
diff --git a/.storybook/styles/components/_due-dates.scss b/.storybook/styles/components/_due-dates.scss
deleted file mode 100644
index b5ed4a5c..00000000
--- a/.storybook/styles/components/_due-dates.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-/*-----------------------
-Due Dates
------------------------*/
-.due-dates{
-
-  .date-block{
-    @include rem(margin-bottom, 10px);
-
-    span{
-      border: 1px solid $grey-base;
-      border-radius: 50%;
-      display: inline-block;
-      height: 25px;
-      @include rem(margin-right, 5px);
-      width: 25px;
-      vertical-align: 16px;
-    }
-
-    .is-complete{
-      border-color: $green-base;
-      position: relative;
-
-      &:before{
-        content: "";
-        color: $green-base;
-        // background-image: asset-url("checkmark-success.svg");
-        background-repeat: no-repeat;
-        background-size: 14px;
-        height: 14px;
-        width: 14px;
-        display: block;
-        @include vertical-horizontal-center;
-      }
-    }
-
-    .text-block{
-      display: inline-block;
-
-      h6{
-        color: $grey-base;
-      }
-
-      a{
-        text-decoration: none;
-        margin: 0px;
-        text-transform: uppercase;
-        @include font-type($primary-sans-serif, normal, $bold);
-        @include s-small;
-      }
-
-      p{
-        @include s-small;
-      }
-    }
-  }
-}
diff --git a/.storybook/styles/components/_emails.scss b/.storybook/styles/components/_emails.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/.storybook/styles/components/_empty-state.scss b/.storybook/styles/components/_empty-state.scss
deleted file mode 100644
index 6751201a..00000000
--- a/.storybook/styles/components/_empty-state.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-/*-----------------------
-Empty State
------------------------*/
-
-.empty-state{
-  @include center;
-  max-width: 400px;
-  text-align: center;
-
-  img{
-    @include rem(margin-bottom, 10px);
-    max-width: 100px;
-    opacity: 0.5;
-  }
-}
\ No newline at end of file
diff --git a/.storybook/styles/components/_expander.scss b/.storybook/styles/components/_expander.scss
deleted file mode 100644
index c78012ba..00000000
--- a/.storybook/styles/components/_expander.scss
+++ /dev/null
@@ -1,50 +0,0 @@
-/*-----------------------
-Expander
------------------------*/
-.expander {
-  .expander-trigger {
-    border: none;
-    display: block;
-    @include rem(padding, 10px 20px);
-    text-decoration: none;
-    @include rem(margin, 0px -20px);
-
-    @include media($tablet){
-      @include rem(margin, 0px -40px);
-      @include rem(padding, 10px 40px);
-    }
-
-    &:before {
-      content: "+";
-      color: $grey-light;
-      height: 34px;
-      display: inline-block;
-      text-align: center;
-      line-height: 2;
-      @include rem(margin-right, 10px);
-      font-size: 22px;
-      font-weight: $bold;
-    }
-  }
-
-  .expander-content{
-    display: none;
-  }
-
-  .is-active {
-    &:before {
-      content: "–";
-      color: $green-base;
-      font-weight: $bold;
-    }
-  }
-
-  .is-active + .expander-content {
-    display: block;
-  }
-
-  hr.dotted-line {
-    border-top: 1px dotted $grey-light;
-    border-bottom: 1px dotted $grey-lighter;
-  }
-}
diff --git a/.storybook/styles/components/_flash.scss b/.storybook/styles/components/_flash.scss
index 946e734b..795c3112 100644
--- a/.storybook/styles/components/_flash.scss
+++ b/.storybook/styles/components/_flash.scss
@@ -2,26 +2,61 @@
 Flash
 -----------------------*/
 .flash-message-container{
-  @include position(absolute, 0px 0px null 0px);
+  @include position(fixed, 55px 0px null 0px);
+  z-index: 2;
+  @include rem(padding, 0px 18px);
+
+  .flash-message{
+    position: relative;
+    top: 0px;
+  }
+}
+
+.side-navigation ~ .flash-message-container{
+  @include grid-media($tablet-landscape){
+    margin-left: 250px;
+  }
+}
+
+.side-navigation.is-collapsed ~ .flash-message-container{
+  @include grid-media($tablet-landscape){
+    margin-left: 50px;
+  }
 }
 
 .flash-message{
-  @include rem(padding, 10px 20px);
-  @include animation(fade-in 0.5s ease-in);
-  width: 50%;
+  @include rem(padding, 16px 20px);
+  animation: fade-in 0.5s ease-in;
   margin: 0 auto;
   text-align: center;
+  width: 100%;
+  z-index: 2;
+  @include center;
+
+  @include grid-media($tablet-landscape){
+    max-width: 600px
+  }
 
   p{
     text-align: center;
   }
-  
+
   button.dismiss {
-    float: right;
+    background: transparent;
     border: none;
+    cursor: pointer;
+    float: right;
+    @include rem(font-size, 25px);
     padding: 0;
-    background: inherit;
-    font-size: $s-base;
+
+    &:hover{
+      opacity: 0.8;
+    }
+  }
+
+  button ~ p{
+    text-align: left;
+    @include rem(margin-right, 30px);
   }
 
   &.success{
@@ -40,10 +75,25 @@ Flash
     p, button{
       color: $red-base;
     }
+
+    p{
+      &:before{
+        border: 1px solid $red-base;
+        border-radius: 20em;
+        display: inline-block;
+        @include rem(font-size, 15px);
+        line-height: normal;
+        font-weight: bold;
+        content: "!";
+        text-align: center;
+        height: 22px;
+        width: 22px;
+        @include rem(margin-right, 5px);
+      }
+    }
   }
 }
 
-.styleguide-flash{
-  position: relative;
-  height: 50px;
+.flash-message ~ .flash-message{
+  @include rem(margin-top, 5px);
 }
diff --git a/.storybook/styles/components/_footer.scss b/.storybook/styles/components/_footer.scss
deleted file mode 100644
index 49605ff4..00000000
--- a/.storybook/styles/components/_footer.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-/*-----------------------
-Footer
------------------------*/
-footer{
-  display: inline-block;
-  @include rem(padding, 40px 20px);
-  text-align: center;
-  width: 100%;
-
-  p{ @include s-tiny; }
-}
-
-
-
-
-/*-----------------------
-Social Media
------------------------*/
-.social-media{
-  @include rem(margin-bottom, 20px);
-
-  li{
-    display: inline-block;
-    @include transition(all 0.3s ease-in-out);
-    opacity: 0.8;
-    width: inherit;
-
-    &:hover{
-      opacity: 1;
-    }
-  }
-}
\ No newline at end of file
diff --git a/.storybook/styles/components/_forms.scss b/.storybook/styles/components/_forms.scss
index d21ee7bd..8bc91338 100755
--- a/.storybook/styles/components/_forms.scss
+++ b/.storybook/styles/components/_forms.scss
@@ -1,161 +1,201 @@
 /*-----------------------
 Fieldset
 -----------------------*/
-fieldset{
+fieldset {
   display: inline-block;
-  @include rem(margin-top, 15px);
+  @include rem(margin-bottom, 18px);
   position: relative;
   width: 100%;
-  vertical-align: top;
-  max-width: 300px;
-  @include rem(margin-right, 20px);
 }
 
 /*-----------------------
 Labels
 -----------------------*/
-label{
+label {
   color: $black-base;
   display: inline-block;
-  font-size: $s-small;
+  @include font-type($primary-sans-serif, normal, $bold);
+  @include font-size-mbody;
   @include rem(margin-bottom, 6px);
+  text-align: left;
 
-  i{
+  i {
     font-style: italic;
-    font-weight: $light;
+    font-weight: $regular;
+    @include rem(margin-left, 6px);
+    text-transform: none;
   }
 }
 
+//Required
+.required-indicator {
+  color: $red-base;
+  @include rem(margin-left, 3px);
+}
+
 /*-----------------------
 Inputs
 -----------------------*/
 #{$all-text-inputs},
 select,
-textarea{
+textarea,
+.input {
   background-color: $white-base;
-  border: none;
-  border-bottom: 3px solid $grey-light;
+  border: 1px solid $white-dark;
+  border-radius: 0px;
   box-sizing: border-box;
-  @include appearance(none);
-  @include transition (all 0.3s ease-in-out);
+  appearance: none;
+  transition: all 0.3s ease-in-out;
   @include font-type($primary-sans-serif, normal, 400);
-  @include s-base;
+  @include font-size-mbody;
+  @include rem(padding, 13px);
   width: 100%;
   -webkit-font-smoothing: antialiased;
-  border-radius: 0;
+  font-weight: $semibold;
+  cursor: pointer;
+  color: $black-base;
 
-  @include placeholder{
-    color: $white-med;
+  &::placeholder {
+    color: $white-dark;
     font-style: italic;
   }
 
-  &:focus{
-    border-color: $green-base;
+  &:focus {
     outline: none;
   }
+
+  &:hover,
+  &:active,
+  &:focus {
+    border-color: #9da7b9;
+  }
+
+  &:active,
+  &:focus {
+    background-color: #f4f6f7;
+  }
+
+  &:disabled {
+    border-color: #e3e6eb;
+    background-color: #f8f9fa;
+  }
+}
+
+textarea ~ span {
+  label {
+    &:after {
+      content: '*';
+      display: inline-block;
+      color: $red-base;
+    }
+  }
+}
+
+/*-----------------------
+Hidden Input
+-----------------------*/
+.hidden-field {
+  height: 0px;
+  width: 0px;
+}
+
+// Cypress does not provide a way (or I couldn't find it)
+// to set the value of a hidden input. This is to `hide`
+// the input with type="text"
+.really.hidden-field {
+  input {
+    padding: 0px;
+    border: none;
+  }
 }
 
 /*-----------------------
 Input Icon
 -----------------------*/
-.icon-label{
+.icon-label {
   position: relative;
-  input{
+  input {
     @include rem(padding-left, 30px);
   }
 
-  i{
-    @include position(absolute, 1px null null 10px);
+  i {
+    @include position(absolute, 12px null null 10px);
     background-repeat: no-repeat;
     background-size: 15px;
     height: 20px;
     width: 20px;
   }
-
-  .mail-icon:after{
-    content: '📧';
-    // background-image: asset-url("mail.svg");
-  }
-  .phone-icon{
-    // background-image: asset-url("phone.svg");
-  }
-  .linkedin-icon{
-    // background-image: asset-url("linkedin.svg");
-  }
-  .web-icon{
-    // background-image: asset-url("web.svg");
-  }
 }
 
 /*-----------------------
 Textarea
 -----------------------*/
 textarea,
-textarea[type="text"]{
+textarea[type='text'] {
   height: 100px;
-  resize: none;
-  border: 1px solid $grey-light;
-  @include rem(padding, 8px);
+  resize: vertical;
 }
 
-textarea:focus {
-  border-color: $black-base;
-}
-
-.with-character-count{
-  label{
+.with-character-count {
+  label {
     @include rem(padding-right, 108px);
   }
 
-  .character-count{
-    color: $grey-base;
+  .character-count {
+    color: $black-base;
     float: right;
     @include position(absolute, 0px 0px null null);
-    @include s-small;
+    @include font-size-sbody;
   }
 }
 
-
 /*-----------------------
 Select
 -----------------------*/
-select{
-  // background-image: asset-url("down-arrow.svg");
-  background-position: right 0px top 50%;
+select {
+  //background-image: url('../images/utility-icons/dropdown.svg');
+  background-position: right 10px top 50%;
   background-repeat: no-repeat;
   background-size: 15px;
   cursor: pointer;
-  //@include rem(padding, 8px 32px 8px 8px);
+  @include rem(padding-right, 32px);
   text-overflow: ellipsis;
   width: 100%;
-  &.unselected {
-    color: gray
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+
+  option:disabled {
+    color: $grey-light;
+    font-style: italic;
   }
 }
 
-
 /*-----------------------
 Checkbox
 -----------------------*/
-.checkbox{
-  @include rem(margin-top, 15px);
+.checkbox {
   width: 100%;
 
-  label{
+  label {
     cursor: pointer;
     float: right;
-    @include rem(margin-top, 4px);
+    @include rem(margin, -1px 0px 0px);
     line-height: normal;
     width: calc(100% - 32px);
+    text-transform: none;
+    @include font-size-mbody;
   }
 }
 
-input[type="checkbox"]{
-  @include appearance(none);
-  @include transition (all 0.3s ease-in-out);
+input[type='checkbox'] {
+  -webkit-appearance: none;
+  appearance: none;
+  transition: all 0.3s ease-in-out;
   background-color: $white-base;
-  border: 1px solid $white-med;
-  border-radius: 2px;
+  border: 1px solid #d5d9e1;
+  border-radius: 0px;
+  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.06);
   cursor: pointer;
   position: relative;
   @include rem(height, 20px);
@@ -164,69 +204,235 @@ input[type="checkbox"]{
   display: inline-block;
   @include rem(margin, 0px 8px 0px 0px);
 
-  &:focus{
+  &:focus {
+    border-color: $black-base;
     outline: none;
   }
 
-  &:checked{
-    &:after{
-      background-size: 17px;
-      color: $green-base;
-      content: '✓';
+  &:hover {
+    border-color: darken($white-dark, 10%);
+  }
+
+  &:checked {
+    &:after {
+      // background-image: url('../../images/icons/checkmark.svg');
+      background-size: 15px 14px;
+      content: '';
       display: block;
-      font-size: 17px;
-      font-weight: $bold;
-      height: 12px;
-      @include transition(all 0.2s ease-in);
-      margin-left: 1px;
-      @include position(absolute, 1px null null 1px);
+      height: 15px;
+      transition: all 0.2s ease-in;
+      @include position(absolute, 2px null null 2px);
       text-align: center;
-      width: 17px;
+      width: 14px;
       -webkit-position: absolute;
       -webkit-z-index: 3;
     }
   }
 }
 
+.CheckboxGroup,
+.RadioGroup {
+  label, span label{
+    @include font-size-sbody;
+    text-transform: uppercase;
+    font-weight: 600;
+    @include rem(margin-bottom, 8px);
+  }
+
+  fieldset {
+    @include rem(margin-bottom, 10px);
+    &:last-of-type {
+      margin-bottom: 0px;
+    }
+
+    label{
+      font-weight: 400;
+      text-transform: none;
+    }
+  }
+}
 
 /*-----------------------
-Error
+Radio Buttons
 -----------------------*/
-.error{
-  input, textarea, select{
-    border: none;
-    border-bottom: 3px solid $red-base;
+.radio-buttons {
+  display: block;
+  width: 100%;
+
+  .label-input {
+    display: block;
+    margin-bottom: 10px;
+  }
+
+  .input-wrapper .row {
+    display: block;
+    margin-bottom: 0px;
+
+    input[type='radio'] {
+      position: absolute;
+      z-index: -1;
+    }
 
-    &:focus{
+    input[type='radio']:focus ~ span {
+      border-color: $black-base;
+    }
+
+    label.radio-button {
+      background-color: $white-base;
+      border-radius: 3px;
+      display: inline-block;
+      // @include grid-column(6 of 12);
+      overflow: hidden;
+      position: relative;
+      text-align: center;
+    }
+
+    span {
+      background: $white-base;
+      border: 1px solid $grey-base;
+      border-radius: 4px;
+      color: $black-base;
+      cursor: pointer;
+      display: block;
+      @include font-size-mbody;
+      font-weight: $bold;
+      padding: 15px;
+      width: 100%;
+
+      &:hover {
+        background-color: lighten($primary-base, 65%);
+        transition: all 0.3s ease-in-out;
+      }
+    }
+
+    input:checked + span {
+      background-color: $primary-base;
+      border-color: $primary-base;
+      color: $white-base;
+    }
+  }
+}
+
+/*-----------------------
+Radio Inputs
+-----------------------*/
+.RadioGroup {
+  width: 100%;
+
+  label {
+    cursor: pointer;
+    line-height: normal;
+    display: block;
+    text-transform: none;
+    @include font-size-mbody;
+  }
+
+  fieldset span {
+    color: $black-base;
+    display: inline-block;
+    width: calc(100% - 32px);
+
+    p {
+      white-space: normal;
+    }
+  }
+
+  .input-wrapper {
+    float: left;
+    vertical-align: top;
+  }
+
+  input[type='radio'] {
+    -webkit-appearance: none;
+    appearance: none;
+    transition: all 0.3s ease-in-out;
+    background-color: $white-base;
+    border: 1px solid $white-dark;
+    border-radius: 2px;
+    cursor: pointer;
+    position: relative;
+    @include rem(height, 20px);
+    @include rem(width, 20px);
+    outline: none;
+    display: inline-block;
+    @include rem(margin, 0px 8px 0px 0px);
+    border-radius: 20em;
+    vertical-align: top;
+    background: #ffffff;
+    border: 1px solid #c7cdd7;
+    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.06);
+
+    &:focus {
       border-color: $black-base;
       outline: none;
     }
+
+    &:hover {
+      border-color: darken($white-dark, 10%);
+    }
+
+    &:checked {
+      position: relative;
+      &:after {
+        background-color: $black-base;
+        color: $black-base;
+        content: '';
+        display: block;
+        height: 6px;
+        transition: all 0.2s ease-in;
+        text-align: center;
+        width: 6px;
+        -webkit-position: absolute;
+        -webkit-z-index: 3;
+        border-radius: 20em;
+        @include vertical-horizontal-center;
+      }
+    }
   }
 }
 
-textarea.textarea-error {
-  border: none;
-  border: 1px solid $red-base;
+/*-----------------------
+Error
+-----------------------*/
+.error {
+  input,
+  textarea,
+  select {
+    border: 1px solid $red-base;
+
+    &:focus {
+      border-color: $black-base;
+      outline: none;
+    }
+  }
 }
 
-.error-message{
+.error-message,
+span.error-message,
+#inputError {
   color: $red-base;
   display: inline-block;
-  @include rem(margin-top, 4px);
-  @include s-tiny;
-  @include transition (all 0.3s ease-in-out);
-}
+  @include rem(margin-top, 6px);
+  font-size: 12px;
+  transition: all 0.3s ease-in-out;
+
+  border: none;
+  padding: 0px;
 
+  &:first-letter {
+    text-transform: capitalize;
+  }
+}
 
 /*-----------------------
 Input Tooltip
 -----------------------*/
-.tooltip-trigger:after{
-  background-color: $white-light;
-  border: 1px solid $white-med;
+.tooltip-trigger:after {
+  background-color: $grey-light;
+  border: 1px solid $white-light;
   border-radius: 50%;
   color: $grey-base;
-  content:"?";
+  content: '?';
   cursor: pointer;
   display: inline-block;
   height: 18px;
@@ -238,338 +444,137 @@ Input Tooltip
   width: 18px;
 }
 
-.tooltip-content{
+.tooltip-content {
   display: none;
   @include rem(margin-bottom, 8px);
 
-  p{
+  p {
     line-height: 1.5;
   }
 
-  &.is-active{ display: block; }
+  &.is-active {
+    display: block;
+  }
 }
 
-
 /*-----------------------
 Uploader
 -----------------------*/
-.fileupload{
-
-  .thumbnail{
+.fileupload {
+  .thumbnail {
     display: inline-block;
     @include rem(margin-right, 15px);
     width: 70px;
     vertical-align: middle;
 
-    img{
+    img {
       border-radius: 50%;
       height: 70px;
     }
   }
 
-  .button-secondary-light{
+  .button-secondary-light {
+    @include button;
     overflow: hidden;
     position: relative;
     vertical-align: middle;
-    background-color: $grey-base;
+    background-color: $grey-light;
     box-shadow: none;
     border: none;
     cursor: pointer;
-    color: $white-base;
-    text-align: center;
-
-    &:hover{
-      background-color: darken($grey-base, 8%);
-    }
-
-    .fileupload-exists{
-      color: $white-base;
-    }
-  }
-
-  &.fileupload-exists{
-    div{
-      padding: 0px !important;
 
-      span{
-        //border: 1px solid $grey-base;
-        display: inline-block;
-        //@include rem(padding, 15px);
-        @include rem(margin, 20px 0px);
-        color: $black-base;
-      }
+    &:hover {
+      background-color: darken($grey-light, 8%);
     }
   }
 
-  .button-secondary-light>input{
-    position:absolute;
-    top:0;
-    right:0;
-    margin:0;
-    opacity:0;
-    filter:alpha(opacity=0);
-    transform:translate(-300px, 0) scale(4);
+  .button-secondary-light > input {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    opacity: 0;
+    filter: alpha(opacity=0);
+    transform: translate(-300px, 0) scale(4);
     cursor: pointer;
   }
 }
 
-.fileupload-exists .fileupload-new,.fileupload-new .fileupload-exists{
+.fileupload-exists .fileupload-new,
+.fileupload-new .fileupload-exists {
   display: none;
 }
 
-.fileupload-preview{
+.fileupload-preview {
   @include rem(margin, 0px 10px);
-  @include s-tiny;
-  //color: $grey-base
+  @include font-size-sbody;
+  vertical-align: middle;
 }
 
-.close{
+.fileupload .close {
   text-decoration: none;
-  vertical-align: text-bottom;
-  // border: none;
+  vertical-align: middle;
+  @include font-size-mbody;
 }
 
-
 /*-----------------------
-Button Area
+Date Picker
 -----------------------*/
-.button-area{
-  @include rem(margin-top, 20px);
-
-  button{
-    width: 100%;
-
-    @include media($tablet){
-      //width: inherit;
-    }
-  }
-
-  a{
-    display: inline-block;
-    @include rem(margin-top, 20px);
-    text-align: center;
-    width: 100%;
-
-    @include media($tablet){
-      @include rem(margin-top, 10px);
-      float: right;
-      width: inherit;
-    }
-  }
-}
-
-// SHORT INPUTS
-
-.short-input {
-  width: 135px;
+.react-datepicker__input-container {
+  width: 100%;
 }
 
-
-
 /*-----------------------
-Input Icon
+Color Picker
 -----------------------*/
-.icon-label{
-  position: relative;
-  input{
-    @include rem(padding-left, 30px);
+.color-picker {
+  .color {
+    border: 1px solid $white-light;
+    height: 20px;
+    @include position(absolute, 32px null null 10px);
+    width: 20px;
   }
 
-  .input-wrapper{
-    position: relative;
+  .hex {
+    @include position(absolute, 35px null null 38px);
+  }
 
-    i{
-      @include position(absolute, 3px null null 10px);
-      background-repeat: no-repeat;
-      background-size: 15px;
-      display: inline-block;
-      height: 20px;
-      width: 20px;
-    }
+  .color-input {
+    @include rem(padding-left, 50px);
   }
 }
 
 /*-----------------------
-Custom Dropdown Select
+Button Area
 -----------------------*/
-.dropdown-select, .dropdown{
-  position: relative;
-
-  .select-input{
-    background-color: $white-base;
-    border: 1px solid $white-med;
-    border-radius: 5px;
-    box-sizing: border-box;
-    cursor: pointer;
-    @include appearance(none);
-    @include transition (all 0.3s ease-in-out);
-    @include font-type($primary-sans-serif, normal, 400);
-    @include s-base;
-    @include rem(padding, 7px 13px);
-
-    &:after{
-      // background-image: asset-url('dropdown.svg');
-      background-position: right 10px top 50%;
-      background-repeat: no-repeat;
-      background-size: 15px;
-      content: "";
-      @include position(absolute, 15px 5px null null);
-      @include rem(padding, 8px 32px 8px 8px);
-      width: 100%;
-    }
-
-    p{
-      margin: 0px;
-    }
-  }
-
-  a{
-    text-decoration: none;
-  }
-
-  label, a{
-    font-weight: normal;
-  }
-
-  .options{
-    display: none;
-
-    &.is-active{
-      display: inline-block;
-
-      .scroll-box{
-        max-height: 150px;
-        overflow: scroll;
-      }
-    }
-  }
-
-  .scroll-box{
-    background-color: $white-base;
-    border: 1px solid $white-med;
-    @include position(absolute, 41px 0px null 0px);
-    z-index: 2;
-
-    & > * {
-      @include rem(padding, 2px 10px);
-    }
-
-    .checkbox {
-      margin-bottom: 0;
-    }
-
-    .expander{
-      padding: 0px;
-    }
-
-    .expander-trigger{
-      @include rem(padding, 5px);
-      border: none;
-    }
-
-    .expander .is-active + .expander-content{
-      padding: 5px;
-      display: inline-block;
-        width: 100%;
-    }
-  }
-
-  .checkboxes{
-    li{
-      display: inline-block;
-      @include rem(padding, 0px 15px);
-      width: 100%;
-
-      .checkbox{
-        @include rem(margin, 5px 0px 0px);
-
-        label{
-          font-weight: normal;
-        }
-
-        span{
-          float: none;
-        }
-
-      }
-    }
-
-  }
-}
-
-.dropdown{
-  @include rem(margin-bottom, 10px);
-
-  @include media($tablet){
-    @include rem(margin-bottom, 0px);
-  }
-
-  .select-input{
-    background-color: $white-light;
-    height: 56px;
-    @include rem(padding, 18px);
-
-    &:after{
-      @include position(absolute, 22px 15px null null);
-    }
-  }
-}
-
-.scroll-box{
-  .toggle{
-    display: block;
-    height: 27px;
-    @include rem(margin, 10px 10px 0px);
-    @include s-small;
-    padding: 0px;
+.button-area {
+  button {
+    width: 100%;
 
-    .is-active, li, li:hover{
-      height: 25px;
-      line-height: 2;
+    @include grid-media($tablet) {
+      width: inherit;
     }
   }
 
-  fieldset.checkbox, fieldset.CheckboxGroup{
-    width: 100% !important;
+  a {
+    display: inline-block;
+    @include rem(margin-top, 20px);
+    text-align: center;
+    width: 100%;
 
-    input{
-      border: 1px solid $white-med;
+    @include grid-media($tablet) {
+      @include rem(margin-top, 10px);
+      float: right;
+      width: inherit;
     }
   }
 }
 
 /*-----------------------
-Color Picker
+Forms
 -----------------------*/
-.color-picker{
-  .swatch{
-    cursor: pointer;
-    border: 1px solid $white-med;
-    height: 20px;
-    @include position(absolute, 32px null null 10px);
-    width: 20px;
-  }
-
-  .cover {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-
-  .popover {
-    position: absolute;
-    top: 80px;
-    z-index: 2;
+form {
+  .row {
+    margin-bottom: 0px;
   }
 }
-
-.color-input{
-  .hex-input{
-    @include rem(padding-left, 50px);
-  }
-  .hex{
-    @include position(absolute, 35px null null 38px);
-  }
-}
\ No newline at end of file
diff --git a/.storybook/styles/components/_grid.scss b/.storybook/styles/components/_grid.scss
index 72438b44..770ef3fb 100644
--- a/.storybook/styles/components/_grid.scss
+++ b/.storybook/styles/components/_grid.scss
@@ -9,17 +9,17 @@ Column Width
 
   @for $i from 1 through 12 {
     .col-#{$i} {
-      @include media($tablet){
-        @include span-columns($i of 12);
+      @include grid-media($tablet){
+        @include grid-column($i of 12);
       }
     }
   }
 }
 
 .settings-content {
-  @include span-columns(12 of 12);
-  @include media($tablet-landscape) {
-    @include span-columns(12 of 12);
+  @include grid-column(12 of 12);
+  @include grid-media($tablet-landscape) {
+    @include grid-column(12 of 12);
   }
 }
 
diff --git a/.storybook/styles/components/_invites.scss b/.storybook/styles/components/_invites.scss
deleted file mode 100644
index 741e29ad..00000000
--- a/.storybook/styles/components/_invites.scss
+++ /dev/null
@@ -1,67 +0,0 @@
-.content-center {
-  text-align: center;
-  img {
-    height: 20px;
-    @include rem(margin-bottom, 20px);
-  }
-
-  h3 {
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    @include rem(margin-bottom, 20px);
-  }
-
-  p {
-    max-width: 500px;
-    margin: 0 auto;
-    @include rem(margin-bottom, 20px);
-  }
-
-  fieldset {
-    width: 300px;
-    label {
-      float: left;
-    }
-  }
-
-}
-
-
-.invites-accepted {
-  span {
-    background-color: $blue-light;
-    height: 40px;
-    display: block;
-    @include rem(padding, 9px);
-    p, h2 {
-      display: inline-block;
-    }
-
-    p {
-      float: left;
-      text-transform: uppercase;
-      color: $blue-base;
-      font-weight: $bold;
-    }
-
-    h3 {
-      float: right;
-      color: $white-base;
-      font-size: 19px;
-    }
-  }
-
-  table {
-    @include rem(margin-bottom, 20px);
-  }
-}
-
-.slush-fund {
-    border: 1px solid $green-base;
-    background-color: $green-light;
-
-    h1 {
-      color: $green-base;
-      padding-bottom: 20px;
-    }
-  }
diff --git a/.storybook/styles/components/_login.scss b/.storybook/styles/components/_login.scss
deleted file mode 100644
index 67987be0..00000000
--- a/.storybook/styles/components/_login.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-.choose-login {
-background:
--webkit-linear-gradient(-45deg, rgba(126, 217, 122, 1.0), rgba(195, 228, 255, 1.0));
-  text-align: center;
-  height: 100vh;
-
-  .button-login {
-    border-radius: 30px;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    border: 1px solid $white-base;
-    background-color: transparent;
-    color: $white-base;
-    @include rem(padding, 15px 20px);
-    font-weight: $bold;
-    outline: none;
-
-    a {
-      border-bottom: none;
-    }
-  }
-
-  .button-login:hover {
-    background-color: $white-base;
-    color: $green-base;
-    transition: all 0.5s ease;
-  }
-
-  img {
-    max-width: 300px;
-    @include rem(margin-bottom, 20px);
-  }
-
-  ul {
-    @include rem(margin, 50px 30px 30px);
-    display: inline-block;
-  }
-}
diff --git a/.storybook/styles/components/_modal.scss b/.storybook/styles/components/_modal.scss
index 00675005..ec8a3787 100644
--- a/.storybook/styles/components/_modal.scss
+++ b/.storybook/styles/components/_modal.scss
@@ -1,107 +1,114 @@
-.modal {
-
-  .modal-fade-screen {
-    @include position(fixed, 0 0 0 0);
-    background-color: rgba(0, 0, 0, 0.65);
-    opacity: 1;
-    transition: opacity 0.25s ease;
-    visibility: hidden;
-    z-index: 9999999;
-
-    &.is-active {
-      opacity: 1;
-      visibility: visible;
-    }
-  }
-
-  .modal-bg {
-    cursor: pointer;
-    @include position(absolute, 0 0 0 0);
-  }
-
-  h2{
-    border-bottom: 1px solid $blue-base;
-    @include rem(padding-bottom, 20px);
-  }
-
-  .modal-close {
-    cursor: pointer;
-    @include position(absolute, 0px 0px null null);
-    @include s-huge;
-    @include rem(padding, 20px);
-    color: $blue-base;
-
-    @include media($tablet){
-      @include position(absolute, 15px 20px null null);
-    }
-  }
-
-
-  &.modal-warning{
-    h2{
-      border-bottom: 1px solid $red-base;
-      color: $red-base;
-    }
+body.modal-open {
+	overflow: hidden;
+	position: fixed;
+	width: 100%;
+	height: 100%;
+	overscroll-behavior-y: contain;
+}
 
-    .modal-close{
-      color: $grey-base
-    }
-  }
+.modal-fade-screen {
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	background-color: rgba(0, 0, 0, 0.65);
+	opacity: 1;
+	transition: opacity 0.25s ease;
+	z-index: 9999999;
+}
 
-  .modal-inner {
-    @include outer-container;
-    background-color: $white-base;
-    box-shadow: none;
-    margin: auto;
-    max-height: 95%;
-    overflow: auto;
-    position: relative;
-    transition: opacity 0.25s ease;
-    width: 100%;
+.modal.is-active {
+	opacity: 1;
+	visibility: visible;
+}
 
-    @include media($tablet) {
-      @include center;
-      max-width: 700px;
-      @include vertical-center;
-      left: 50%;
-      max-height: 598px;
-      @include transform(translateY(-50%) translateX(-50%));
-    }
+.modal .modal-bg {
+	cursor: pointer;
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+}
 
-    a{
-      width: 100%;
+.modal .modal-close {
+	color: #444444;
+	border: none;
+	cursor: pointer;
+	position: absolute;
+	font-size: 36px;
+	font-size: 2.5714285714rem;
+	top: 10px;
+	right: 10px;
+	line-height: 0;
+	background-color: transparent;
+	line-height: 25px;
+}
 
-      @include media($tablet){
-        @include rem(margin-right, 15px);
-        width: inherit;
-      }
+.modal .modal-inner {
+	max-width: 1200px;
+	margin-left: auto;
+	margin-right: auto;
+	background-color: #FFFFFF;
+	box-shadow: none;
+	max-height: calc(100% - 40px);
+	-ms-overflow-style: none;
+	overflow: scroll;
+	position: relative;
+	transition: opacity 0.25s ease;
+	padding: 2em;
+	margin: 20px;
+}
 
-      &:last-child{
-        @include rem(margin-top, 15px);
+.modal .modal-inner::after {
+	clear: both;
+	content: "";
+	display: block;
+}
 
-        @include media($tablet){
-          @include rem(margin-top, 0px);
-        }
-      }
-    }
-  }
+@media screen and (min-width: 45em) {
+	.modal .modal-inner {
+		margin: auto;
+		display: block;
+		margin-left: auto;
+		margin-right: auto;
+		width: 100%;
+		max-width: 700px;
+		-webkit-transform: translateY(-50%);
+		-moz-transform: translateY(-50%);
+		-ms-transform: translateY(-50%);
+		-o-transform: translateY(-50%);
+		transform: translateY(-50%);
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		max-height: 650px;
+		-webkit-transform: translateY(-50%) translateX(-50%);
+		-moz-transform: translateY(-50%) translateX(-50%);
+		-ms-transform: translateY(-50%) translateX(-50%);
+		-o-transform: translateY(-50%) translateX(-50%);
+		transform: translateY(-50%) translateX(-50%);
+	}
 }
 
-.modal-card{
-  position: relative;
+.modal .modal-inner a {
+	width: 100%;
+}
 
-  .modal{
+@media screen and (min-width: 45em) {
+	.modal .modal-inner a {
+		margin-right: 1.0714285714rem;
+		width: inherit;
+	}
+}
 
-    .modal-fade-screen{
-      position: relative;
-      opacity: 1;
-      visibility: visible;
-      z-index: 0;
+.modal .modal-inner a:last-child {
+	margin-top: 1.0714285714rem;
+}
 
-      .modal-inner{
-        @include position(relative, 0 0 0 0);
-        @include transform(translateY(0) translateX(0));
-      }
-    }
-  }
+@media screen and (min-width: 45em) {
+	.modal .modal-inner a:last-child {
+		margin-top: 0px;
+	}
 }
\ No newline at end of file
diff --git a/.storybook/styles/components/_navigation.scss b/.storybook/styles/components/_navigation.scss
deleted file mode 100644
index cf6cee19..00000000
--- a/.storybook/styles/components/_navigation.scss
+++ /dev/null
@@ -1,252 +0,0 @@
-// Site Navigation Styles
-// ========================================
-$mobile-nav-height: 58px;
-$desktop-nav-height: 70px;
-
-.navigation {
-  background-color: $white-base;
-  box-shadow: 0 0 18px 0 rgba(131,131,131,0.50);
-  height: $desktop-nav-height;
-  @include rem(padding, 20px 20px);
-  position: relative;
-  text-align: center;
-  width: 100%;
-}
-
-
-/*-----------------------
-Logo
------------------------*/
-.logo{
-  color: $black-base;
-  @include rem(margin-bottom, 0px);
-  text-decoration: none;
-  border-bottom: none;
-  font-size: $s-large;
-
-  @include media($tablet) {
-    float: left;
-  }
-
-  a{
-    vertical-align: sub;
-  }
-}
-
-/*-----------------------
-Primary Nav
------------------------*/
-.navigation{
-  @include position(fixed, 0 null null null);
-  @include transition(all 0.3s ease-in-out);
-  width: 100%;
-  z-index: 2;
-
-  .nav-logo {
-    width: 120px;
-    border: none;
-    float: left;
-    @include rem(margin-right, 50px);
-  }
-
-  nav {
-    @include media($tablet-landscape) {
-      text-align: right;
-    }
-  }
-
-  ul {
-    @include rem(margin-right, -17px);
-    display: none;
-    @include media($tablet-landscape) {
-      display: block;
-    }
-  }
-
-  li {
-    display: inline-block;
-    padding: 21px 38px 18px 38px;
-    margin: -22px -4px 0 3px;
-    vertical-align: top;
-    border-left: 1px solid $grey-light;
-
-    a{
-      color: $black-base;
-      @include s-small;
-      text-decoration: none;
-      border: none;
-    }
-    &:hover {
-      background-color: $grey-lighter;
-      cursor: pointer;
-
-      a {
-        color: $blue-base;
-      }
-    }
-  }
-}
-
-  .selected {
-      border-bottom: 4px solid $blue-base;
-      background-color: $grey-lighter;
-    }
-
-
-
-/*-----------------------
-Dropdown
------------------------*/
-.submenu{
-  background-color: $white-base;
-  box-shadow: 0 0 18px 0 rgba(232,232,232,0.50);
-  @include animation(fade-in 0.2s ease-in);
-  @include rem(margin-top, 10px);
-
-  li a{
-    @include s-small;
-    @include rem(padding, 5px 15px);
-  }
-}
-
-.hover-menu {
-  @include rem(padding-bottom, 25px);
-  overflow: visible;
-  padding-right: 0;
-  position: relative;
-
-  .submenu {
-    display: none;
-    position: absolute;
-    top: 35px;
-    right: 15px;
-    z-index: 3;
-    text-align: center;
-    width: 130px;
-  }
-
-  .submenu li {
-    display: block;
-    margin: 0;
-    padding-right: 0;
-    border: none;
-    border-bottom: 1px solid $grey-light;
-    padding: inherit;
-    padding: 17px;
-  }
-
-  .submenu li a {
-    color: $black-base;
-    display: inline-block;
-    text-align: right;
-
-    &:hover{
-      color: $blue-base;
-    }
-  }
-
-  &:focus > .submenu,
-  &:hover > .submenu {
-    display: block;
-  }
-}
-
-
-
-/*-----------------------
-Mobile Menu
------------------------*/
-
-.mobile-menu {
-  float: right;
-  @include media($tablet-landscape) {
-    display: none;
-  }
-}
-
-img.mobile-menu {
-  width: 30px;
-  border: none;
-  text-align: right;
-}
-
-.mobile-menu-items {
-  display: none;
-  margin-top: 48px;
-
-  &.show-mobile {
-    display: block;
-    @include rem(margin-top, -42px);
-  }
-
-  li {
-    background-color: $white-base;
-    margin: 0 -23px;
-    border-left: none;
-    border: 1px solid $grey-light;
-    border-top: none;
-    padding: 21px 38px 18px 38px;
-    width: 100%;
-    display: inline-block;
-    text-align: center;
-  }
-
-  li:first-child {
-    margin-top: 24px;
-    @include rem(margin-right, -46px);
-  }
-
-  li.selected {
-    border-bottom: 3px solid $blue-light;
-    background-color: $grey-lighter;
-  }
-
-   @include media($tablet-landscape) {
-    display: none;
-  }
-}
-
-
-// Recruiter Nav
-
-
-li.recruiter-nav-item, li.search {
-  border-left: none;
-}
-
-li.recruiter-nav-item:hover {
-  background-color: $white-base;
-}
-
-li.search {
-  float: left;
-}
-
-li.search:hover {
-  background-color: transparent;
-}
-
-li.search-selected {
-  background-color: transparent;
-  border-bottom: 3px solid $blue-light;
-}
-
-
-.bookmarked {
-  border-radius: 50%;
-  width: 22px;
-  height: 22px;
-  font-size: 12px;
-  background-color: $green-base;
-  display: inline-block;
-  vertical-align: middle;
-  @include rem(margin-left, 3px);
-  span {
-    font-weight: bold;
-    font-size: 12px;
-    color: $white-base;
-    text-align: center;
-    display: block;
-    @include rem(margin-top, -1.4px);
-  }
-}
diff --git a/.storybook/styles/components/_page-header.scss b/.storybook/styles/components/_page-header.scss
deleted file mode 100644
index 79a69d02..00000000
--- a/.storybook/styles/components/_page-header.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-/*-----------------------
-Content Header
------------------------*/
-.header-content{
-  border-bottom: 1px solid $white-med;
-  display: inline-block;
-  @include rem(padding, 10px 30px);
-  width: calc(100% - 245px);
-
-  h1{
-    float: left;
-    @include rem(margin, 8px 0px 0px);
-  }
-
-  .header-buttons{
-    float: right;
-
-    li{
-      display: inline-block;
-      @include rem(margin-left, 15px);
-
-      a{
-        text-decoration: none;
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/.storybook/styles/components/_pagination.scss b/.storybook/styles/components/_pagination.scss
index 530251b4..3e27b461 100644
--- a/.storybook/styles/components/_pagination.scss
+++ b/.storybook/styles/components/_pagination.scss
@@ -1,55 +1,87 @@
+/*-----------------------
+Pagination
+-----------------------*/
+$pagination-active-color: $black-base !default;
+$pagination-default-color: $black-base !default;
 
 .pagination {
-  margin: 0 auto;
   display: table;
-  padding: 2px 2px 3px 1px;
-
-  ul{
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    float: left;
-  }
+  @include rem(margin, 20px auto 0px);
 
   li {
     float: left;
-    margin: 0 4px 0 0;
-    font-size: 12px;
+    @include rem(margin, 0px 8px);
 
-    &:last-child {
-      margin: 0;
-    }
+    a {
+      color: $pagination-default-color;
+      float: left;
+      text-decoration: none;
+      text-align: center;
 
-    &.active a,
-    a:active {
-      box-shadow: none;
+      &:hover {
+        color: darken($pagination-default-color, 10%);
+        text-decoration: underline;
+      }
     }
 
     &.active a,
-    a:hover {
-      color: $blue-base;
+    a:active {
+      color: $pagination-active-color;
     }
 
     .delimeter {
       display: block;
-      padding-top: 6px;
+      @include rem(padding-top, 6px);
     }
   }
-  a {
-    float: left;
-    background: #fff;
-    background: linear-gradient(top, #fff, #f5f5f5);
-    border-radius: 3px;
-    padding: 4px 10px;
-    border: 1px solid #d9d9d9;
-    border-top-color: $grey-light;
-    box-shadow: 0 3px 5px rgba(0,0,0,0.14);
-    color: #666;
-    text-decoration: none;
+}
+
+//With Arrows
+@mixin pagination-arrows {
+  background-position: top;
+  background-size: 100%;
+  content: '';
+  display: inline-block;
+  height: 18px;
+  transition: all 0.3s ease-in-out;
+  width: 14px;
+  vertical-align: sub;
+}
+
+.pagination {
+  li.next,
+  li.prev {
+    margin: 0px;
+
+    a {
+      height: 22px;
+      overflow: hidden;
+      width: 18px;
+
+      &:before {
+        display: block;
+      }
+    }
   }
-  
-  a:focus {
-    outline: auto;
-    outline-color: $blue-base;
+
+  .next a {
+    width: auto;
+
+    &:before {
+      // background: url('../../images/icons/next.svg') no-repeat center;
+      @include pagination-arrows;
+      @include rem(margin, 6px 0px 0px 3px);
+    }
+  }
+
+  .prev a {
+    width: auto;
+
+    &:before {
+      // background: url('../../images/icons/next.svg') no-repeat center;
+      @include pagination-arrows;
+      @include rem(margin-top, 3px);
+      transform: rotate(180deg);
+    }
   }
 }
diff --git a/.storybook/styles/components/_profile-card.scss b/.storybook/styles/components/_profile-card.scss
deleted file mode 100644
index ce766e1a..00000000
--- a/.storybook/styles/components/_profile-card.scss
+++ /dev/null
@@ -1,202 +0,0 @@
-.profile-card {
-  @include media($tablet-landscape) {
-    text-align: left;
-    display: inline-block;
-    width: 100%;
-  }
-
-  h3 {
-      text-transform: uppercase;
-    }
-
-  .student-info {
-    text-align: center;
-    @include media($tablet-landscape) {
-      margin-left: 188px;
-      text-align: left
-    }
-  }
-
-  .student-info-edit {
-    text-align: left;
-    @include rem(margin, 0px 0 10px 0);
-
-  }
-
-  .profile-image {
-    width: 100px;
-    margin: 0 auto;
-    @include media($tablet-landscape) {
-      width: 168px;
-      float: left;
-    }
-  }
-
-  .upload-image {
-    display: none;
-    @include media($tablet-landscape) {
-      width: 30px;
-      position: absolute;
-      @include rem(margin, 5px);
-    }
-  }
-  .image-banner {
-    display: none;
-    @include media($tablet-landscape) {
-      background-color: rgba(255, 190, 29, 0.7);;
-      color: $white-base;
-      width: 100%;
-      font-weight: $bold;
-      font-size: $s-tiny;
-      text-align: center;
-      margin-top: -28px;
-      position: relative;
-      cursor: pointer;
-      margin-bottom: 6px;
-    }
-  }
-
-  .image-banner-recruiter-view {
-    @include media($tablet-landscape) {
-      display: block;
-    }
-  }
-
-  .profile-image-student-view:hover .image-banner {
-    @include media($tablet-landscape) {
-      display: block;
-    }
-  }
-
-  .profile-image-student-view:hover img.upload-image {
-    @include media($tablet-landscape) {
-      display: block;
-    }
-  }
-
-
-  span {
-    img {
-      width: 15px;
-    }
-    a {
-      margin: 5px 0;
-      display: inline-flex;
-    }
-    img, p {
-      vertical-align: middle;
-      display: inline-block;
-    }
-  }
-
-
-  h1 {
-    @include rem(margin, 10px 0 5px);
-    font-weight: $light;
-    @include media($tablet-landscape) {
-      margin-top: 0;
-    }
-  }
-
-  h1, h2, {
-    @include rem(margin-bottom, 5px);
-  }
-
-  .upload-link {
-    display: none;
-    @include media($tablet-landscape) {
-      display: inline-block;
-      font-weight: $regular;
-      @include rem(margin, 0px 10px 0 10px);
-    }
-  }
-
-  .edit-section {
-    display: none;
-    width: 20px;
-    position: relative;
-    float: right;
-    margin: -44px -10px 0px 0px;
-  }
-
-  .edit-section-trash {
-    @include rem(margin-top, 20px);
-    width: 20px;
-    position: relative;
-    float: right;
-    margin: -44px -10px 0px 0px;
-  }
-
-  fieldset {
-    width: 300px;
-    @include rem(margin-right, 20px);
-    text-align: left;
-
-    .short-input {
-      width: 100px;
-      @include rem(margin-right, 10px);
-    }
-  }
-
-  .bullet-point {
-    width: 100%;
-    @include rem(margin, 10px 0);
-    textarea {
-      height: 60px;
-    }
-
-    span {
-      float: right;
-      color: $red-base;
-      font-size: $s-small;
-      cursor: pointer;
-    }
-  }
-}
-
-  .button-group {
-    @include rem(margin-top, 20px);
-    width: 100%;
-    text-align: center;
-    @include media($tablet-landscape) {
-     display: inline-block;
-    }
-   button {
-    @include rem(margin, 0 2px 2px 0);
-    @include media($tablet-landscape) {
-      width: 49.3%;
-    }
-   }
-  }
-
-.button-profile-card {
-  @include rem(margin-top, 2px);
-  @include media($tablet) {
-    display: inline-block;
-    width: 49.6%;
-  }
-}
-
-.button-top {
-  @include rem(margin-top, 20px);
-  float: left;
-}
-
-.button-right {
-  float:right;
-  @include rem(margin-top, -2px);
-}
-
-.item-upload {
-  @include rem(margin, 6px 0 0 17px);
-
-  input {
-    width: inherit;
-  }
-
-  img {
-    @include rem(margin-top, 10px);
-    width: 80px;
-  }
-
-}
diff --git a/.storybook/styles/components/_profile-section.scss b/.storybook/styles/components/_profile-section.scss
deleted file mode 100644
index c3743f6c..00000000
--- a/.storybook/styles/components/_profile-section.scss
+++ /dev/null
@@ -1,89 +0,0 @@
-.profile-section, .profile-blade {
-  h3 {
-    letter-spacing: 1px;
-    @include rem(margin-bottom, 20px);
-    text-transform: uppercase;
-  }
-
-  .with-character-count {
-    @include rem(margin, 0 0 10px 0)
-  }
-
-  .edit-section {
-    display: none;
-    width: 20px;
-    position: relative;
-    float: right;
-    margin: -53px -10px 0px 0px;
-  }
-
-  .profile-component {
-    margin: 0;
-  }
-
-  .work-info {
-    display: block;
-    @include rem(margin-bottom, 10px);
-  }
-
-  .info-block {
-    @include rem(margin-bottom, 20px);
-  }
-
-  .line-item {
-    padding-left: 10px ;
-    text-indent: -10px ;
-  }
-}
-
-.info-block:hover .edit-section {
-  display: block;
-}
-
-.about-section:hover .edit-section {
-  display: block;
-}
-
-.proficiencies {
-  span {
-    @include rem(margin, 0 5px 5px 0 );
-    display: inline-block;
-  }
-  p, img {
-    display: inline-block;
-    vertical-align: top;
-    background-color: $blue-light;
-  }
-
-  p {
-    @include rem(padding, 5px 11px);
-    color: $black-base;
-    font-weight: $bold;
-  }
-
-  .add-pro {
-    background-color: $blue-base;
-    color: $white-base;
-  }
-  img {
-    width: 34px;
-    @include rem(padding, 10px);
-    @include rem(margin-left, 1px);
-  }
-
-  fieldset {
-    @include rem(margin, 0 10px 0 5px);
-    vertical-align: middle;
-    width: 200px;
-  }
-
-  .cancel {
-    background-color: transparent;
-    @include rem(margin-left, 210px);
-    @include rem(margin-top, -30px);
-  }
-}
-
-.proficiency-form {
-  display: inline-block;
-}
diff --git a/.storybook/styles/components/_progress-circle.scss b/.storybook/styles/components/_progress-circle.scss
deleted file mode 100644
index 10541da3..00000000
--- a/.storybook/styles/components/_progress-circle.scss
+++ /dev/null
@@ -1,92 +0,0 @@
-.profile-completed {
-  text-align: center;
-
-  h3 {
-    text-transform: uppercase;
-    letter-spacing: 1px;
-  }
-}
-
-* { box-sizing: border-box; }
-
-body {
-  font-family: Rubik;
-  background-color: #e7e7e7;
-  color: #555;
-  line-height: 1.4;
-}
-
-.progress--circle {
-  position: relative;
-  display: inline-block;
-  margin: 1rem;
-  width: 120px;
-  height: 120px;
-  border-radius: 50%;
-  background-color: $grey-light;
-  &:before {
-    content: '';
-    position: absolute;
-    top: 15px;
-    left: 15px;
-    width: 90px;
-    height: 90px;
-    border-radius: 50%;
-    background-color: white;
-  }
-  &:after {
-    content: '';
-    display: inline-block;
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    background-color: $blue-base;
-  }
-}
-
-.progress__number {
-  position: absolute;
-  top: 50%;
-  width: 100%;
-  line-height: 1;
-  margin-top: -0.75rem;
-  text-align: center;
-  font-size: 1.5rem;
-  color: #777;
-}
-
-.progress--circle--complete {
-  &:after {
-    background-color: $yellow-base;
-  }
-}
-
-$step: 5;
-$loops: round(100 / $step);
-$increment: 360 / $loops;
-$half: round($loops / 2);
-@for $i from 0 through $loops {
-  .progress--bar.progress--#{$i * $step}:after {
-    width: $i * $step * 1%;
-  }
-  .progress--circle.progress--#{$i * $step}:after {
-    @if $i < $half {
-      $nextDeg: 90deg + ($increment * $i);
-      background-image: linear-gradient(90deg, $grey-light 50%, transparent 50%, transparent), linear-gradient($nextDeg, $blue-base 50%, $grey-light 50%, $grey-light);
-    }
-    @else {
-      $nextDeg: -90deg + ($increment * ($i - $half));
-      background-image: linear-gradient($nextDeg, $blue-base 50%, transparent 50%, transparent), linear-gradient(270deg, $blue-base 50%, $grey-light 50%, $grey-light);
-    }
-  }
-  .progress--circle--complete.progress--#{$i * $step}:after {
-    @if $i < $half {
-      $nextDeg: 90deg + ($increment * $i);
-      background-image: linear-gradient(90deg, $grey-light 50%, transparent 50%, transparent), linear-gradient($nextDeg, $yellow-base 50%, $grey-light 50%, $grey-light);
-    }
-    @else {
-      $nextDeg: -90deg + ($increment * ($i - $half));
-      background-image: linear-gradient($nextDeg, $yellow-base 50%, transparent 50%, transparent), linear-gradient(270deg, $yellow-base 50%, $grey-light 50%, $grey-light);
-    }
-  }
-}
diff --git a/.storybook/styles/components/_purchased-profile-blade.scss b/.storybook/styles/components/_purchased-profile-blade.scss
deleted file mode 100644
index 93fe45d8..00000000
--- a/.storybook/styles/components/_purchased-profile-blade.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.purchased-profile-blade {
-  border: 1px solid $green-base;
-  background-color: $green-light;
-
-  a {
-    font-size:$s-small;
-    font-weight: $bold;
-    @include media($tablet) {
-      font-size: $s-base;
-    }
-  }
-
-  img {
-    width: 15px;
-    position: relative;
-    float: right;
-    margin: -14px;
-  }
-}
diff --git a/.storybook/styles/components/_radio.scss b/.storybook/styles/components/_radio.scss
index 111022e8..ba04e58c 100644
--- a/.storybook/styles/components/_radio.scss
+++ b/.storybook/styles/components/_radio.scss
@@ -24,7 +24,7 @@
     &:checked {
       + .radio-label {
         &:before {
-          background-color: $blue-base;
+          background-color: $black-base;
           box-shadow: inset 0 0 0 4px $white-base;
         }
       }
diff --git a/.storybook/styles/components/_recruiter-search.scss b/.storybook/styles/components/_recruiter-search.scss
deleted file mode 100644
index 86b90149..00000000
--- a/.storybook/styles/components/_recruiter-search.scss
+++ /dev/null
@@ -1,91 +0,0 @@
-.recruiter-search-results {
-  text-align: center;
-  @include rem(padding, 30px);
-
-  li {
-    @include rem(margin-bottom, 20px);
-  }
-  img {
-    width: 200px;
-  }
-
-  @include media($tablet-landscape) {
-    @include rem(margin-left, 280px);
-  }
-}
-
-
-.recruiter-search {
-  width: 340px;
-  margin: 0 auto;
-  background-color: $white-base;
-  @include rem(padding, 20px);
-  @include rem(margin-top, -45px);
-
-  @include media($tablet-landscape) {
-    @include rem(padding, 0px 20px 50px 20px);
-    display: block;
-    background-color: $white-base;
-    box-shadow: 0 0 18px 0 rgba(232,232,232,0.50);
-    @include position(fixed, 0px null 0px 0px);
-    overflow: scroll;
-    margin-top: 70px;
-    width: 340px;
-
-    .selected {
-      background-color: $grey-lighter;
-      border: none;
-      border-left: 3px solid $green-base;
-    }
-  }
-
-  .short-input, select#canSponsor {
-    width: 40%;
-  }
-
-  .CheckboxGroup {
-    border: 1px solid $grey-light;
-    @include rem(padding, 10px);
-    max-height: 150px;
-    overflow: scroll;
-  }
-
-  input#minGPA {
-    width: 100%;
-  }
-
-  .slider-value {
-    float: right;
-    font-weight: bold;
-    font-style: normal;
-    @include rem(margin-top, -43px);
-  }
-
-  h3 {
-    text-transform: uppercase;
-    letter-spacing: 1px;
-
-    @include media($tablet-landscape) {
-      @include rem(margin-top, 20px);
-    }
-  }
-
-  .exit-filter {
-    float: right;
-    @include rem(margin-top, -15px);
-    @include media($tablet) {
-      @include rem(margin-top, -37px);
-    }
-    @include media($tablet-landscape) {
-      display: none;
-    }
-  }
-
-  button {
-    @include rem(margin-top, 20px);
-
-    @include media($tablet-landscape) {
-      display: none;
-    }
-  }
-}
diff --git a/.storybook/styles/components/_reminders.scss b/.storybook/styles/components/_reminders.scss
deleted file mode 100644
index dd0262fe..00000000
--- a/.storybook/styles/components/_reminders.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-/*-----------------------
-Reminders
------------------------*/
-.reminder{
-  .row{
-    border-bottom: 1px solid $white-med;
-    @include rem(padding, 10px);
-
-    &:first-child{
-      background-color: $blue-light;
-    }
-
-    fieldset{
-
-      @include media($tablet){
-        margin-top: 0px;
-      }
-
-      &:first-of-type{
-        margin-top: 0px;
-      }
-    }
-
-    label, p, a{
-      @include rem(margin-top, 5px);
-      margin-bottom: 0px;
-    }
-
-    a{
-      @include s-bigger;
-      text-align: right;
-      text-decoration: none;
-    }
-  }
-}
\ No newline at end of file
diff --git a/.storybook/styles/components/_search-results-and-filtering.scss b/.storybook/styles/components/_search-results-and-filtering.scss
deleted file mode 100644
index 64066741..00000000
--- a/.storybook/styles/components/_search-results-and-filtering.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-ul.search-results {
-  @include rem(padding, 50px 0px);
-
-  li {
-    font-weight: $bold;
-    vertical-align: middle;
-  }
-
-  li:first-child {
-    float: left;
-  }
-
-  li:last-child {
-    float: right;
-  }
-}
-
-
-ul.filtered-search-results {
-  @include media($tablet) {
-    @include rem(padding, 28px 0 50px);
-  }
-  fieldset {
-    @include rem(margin, 0 0 20px);
-    max-width: none;
-    width: 100%;
-    @include media($tablet) {
-      width: 250px;
-      float: right;
-    }
-  }
-
-  select {
-    border: 1px solid #A9A9A9;
-    height: 50px;
-    @include rem(padding-left, 10px);
-    background-position: right 10px top 50%;
-    @include rem(margin-top, -12px);
-  }
-
-  li:last-child {
-    text-align: center;
-    @include rem(margin-bottom, 20px);
-    @include media($tablet) {
-      float: left;
-    }
-  }
-}
diff --git a/.storybook/styles/components/_side-navigation.scss b/.storybook/styles/components/_side-navigation.scss
deleted file mode 100644
index 6b4958f9..00000000
--- a/.storybook/styles/components/_side-navigation.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-$side-navigation: 245px;
-
-.side-navigation{
-  display: none;
-
-  @include media($tablet-landscape) {
-    display: block;
-    background-color: $white-base;
-    box-shadow: 0 0 18px 0 rgba(232,232,232,0.50);
-    @include position(fixed, 0px null 0px 0px);
-    overflow: scroll;
-    margin-top: $desktop-nav-height;
-    width: $side-navigation;
-
-    .selected {
-      background-color: $grey-lighter;
-      border: none;
-      border-left: 3px solid $green-base;
-    }
-
-    a{
-      display: inline-block;
-      @include font-type($primary-sans-serif, normal, $bold);
-      @include rem(padding, 10px);
-      @include s-small;
-      text-decoration: none;
-      text-transform: uppercase;
-      width: 100%;
-      border-bottom: 1px solid $grey-light;
-    }
-
-    img {
-      width: 20px;
-      float: right;
-      @include rem(margin-top, 2px);
-    }
-  }
-}
diff --git a/.storybook/styles/components/_sidebar-content.scss b/.storybook/styles/components/_sidebar-content.scss
deleted file mode 100644
index deb30bc2..00000000
--- a/.storybook/styles/components/_sidebar-content.scss
+++ /dev/null
@@ -1,108 +0,0 @@
-.sidebar-content {
-  display: none;
-
-  @include media($tablet-landscape) {
-    display: block;
-    background-color: $white-base;
-    box-shadow: 0 0 18px 0 rgba(232,232,232,0.50);
-    //@include position(fixed, 0px null 0px 0px);
-    overflow: scroll;
-    margin-top: 70px;
-    width: 345px;
-    @include rem(padding, 20px);
-  }
-
-  input, select {
-    border: 1px solid $grey-base;
-    height: 50px;
-    @include rem(padding-left, 8px);
-  }
-
-  select {
-    background-position: right 10px top 50%;
-    color: $grey-base;
-  }
-
-  .choose-degree {
-    @include rem(margin-top, 20px);
-    .radio {
-      display: inline-block;
-      @include rem(margin-right, 30px);
-    }
-  }
-
-  .coupled-inputs {
-    fieldset {
-      display: inline-block;
-      width: 42%;
-      vertical-align: bottom;
-
-    }
-  }
-  h3 {
-    text-align: center;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-  }
-
-  li {
-    display: inline-block;
-  }
-}
-
-.purchase-credits {
-
-  hr {
-      @include rem(margin, 50px 0 40px )
-    }
-
-    .content-center {
-      h3 {
-        font-weight: $bold;
-      }
-
-      p {
-        @include rem(margin-bottom, 0);
-      }
-
-      li:first-child {
-        font-weight: $bold;
-        float: left;
-        font-size: $s-big;
-      }
-
-      li:last-child {
-        color: $green-base;
-        float: right;
-        font-size: $s-large;
-      }
-
-      ul {
-        @include rem(margin-bottom, 23px);
-      }
-    }
-
-    .selected-credits {
-      border: 1px solid $green-base;
-    }
-
-    .mobile-credits {
-      display: block;
-
-      @include media($tablet-landscape) {
-        display: none;
-      }
-
-      p {
-        @include rem(margin-bottom, 0px);
-      }
-
-      h3 {
-      font-size: 20px;
-      @include rem(margin-bottom, 20px);
-      text-transform: uppercase;
-      letter-spacing: 1px;
-      text-align: center;
-      }
-    }
-  }
diff --git a/.storybook/styles/components/_sign-up-blocks.scss b/.storybook/styles/components/_sign-up-blocks.scss
deleted file mode 100644
index 562055ac..00000000
--- a/.storybook/styles/components/_sign-up-blocks.scss
+++ /dev/null
@@ -1,150 +0,0 @@
-.card-signup {
-  background-color: $green-base;
-  min-height: 100vh;
-  @include rem(padding, 20px);
-
-  img.logo-white {
-    width: 150px;
-    @include rem(margin-bottom, 40px);
-    display: block;
-  }
-
-  .sign-up-content {
-    max-width: 350px;
-    margin: 0 auto;
-  }
-
-  .card-signup-content {
-    background-color: $white-base;
-    border-radius: 8px;
-    box-shadow: 0 0 18px 0 rgba(232,232,232,0.50);
-  }
-
-    .headshot-preview {
-      width: 90px;
-      display: block;
-      margin: 0 auto;
-      @include rem(margin-bottom, -38px);
-      border-radius: 50%;
-    }
-
-    .headshot-header {
-      @include rem(padding-top, 50px);
-    }
-
-  .inner-content {
-    @include rem(padding, 20px 20px 50px);
-  }
-
-  span {
-    @include rem(margin-top, -23px);
-    img, p {
-      display: inline-block;
-    }
-    img {
-      width: 10px;
-      @include rem(margin-right, 3px);
-    }
-
-    p {
-      color: $white-base;
-    }
-  }
-
-  .back {
-    float: right;
-    cursor: pointer;
-  }
-
-  h2 {
-    text-transform: uppercase;
-    letter-spacing: 2px;
-    text-align: center;
-    @include rem(padding, 20px 0);
-    -webkit-box-shadow: 0px 4px 7px 0px rgba(145,145,145,0.09);
-    -moz-box-shadow: 0px 4px 7px 0px rgba(145,145,145,0.09);
-    box-shadow: 0px 4px 7px 0px rgba(145,145,145,0.09);
-  }
-
-  .instruction-text {
-    text-align: center;
-  }
-
-  .sign-in {
-    text-align: center;
-    @include rem(margin-top, 40px);
-
-    p, a {
-      color: $white-base;
-      border: none;
-    }
-
-    a {
-      font-weight: $bold;
-    }
-  }
-
-  button {
-    margin: 0 auto;
-    text-align: center;
-    display: block;
-    margin-top: -28px;
-    border: none;
-
-    img {
-      width: 20px;
-      @include rem(margin,0 -5px 0 -8px);
-    }
-  }
-
-  .button-arrow {
-    float: right;
-    @include rem(margin-right, 40px);
-    width: 52px;
-  }
-
-  button.button-primary {
-    border-radius: 25px;
-    width: initial;
-    @include rem(padding, 15px 20px);
-    letter-spacing: 1px;
-    background-image: linear-gradient(0deg, #35AA31 0%, #4AC346 90%);
-    background-color: $green-base;
-    box-shadow: 0 16px 32px 0 rgba(9, 73, 7, .35);
-    transition: all 0.5s ease;
-    opacity: 1 !important;
-
-    &:hover {
-      box-shadow: 0 0px 0px 0 rgba(0, 40, 120, 0);
-      background-position: 0 0;
-      border: none;
-    }
-  }
-}
-
-
-.log-in {
-  max-width: 500px !important;
-  fieldset {
-    width: 300px;
-    display: inherit;
-  }
-}
-
-.forgot-password {
-  display: inline-block;
-  @include rem(margin-top, 20px);
-}
-
-
-// Recruiter Styles
-
-.recruiter-card-signup {
-  background-color: $blue-base;
-
-  button.button-primary {
-    background-image: linear-gradient(0deg, #509BD0 0%, #6BC2FF 90%);
-    background-color: $blue-base;
-    box-shadow: 0 16px 32px 0 rgba(23, 99, 152, .35);
-  }
-}
diff --git a/.storybook/styles/components/_spinner.scss b/.storybook/styles/components/_spinner.scss
index b33c2fbd..b4fd25b1 100644
--- a/.storybook/styles/components/_spinner.scss
+++ b/.storybook/styles/components/_spinner.scss
@@ -3,23 +3,22 @@ Spinner
 -----------------------*/
 
 #spinner {
-  @include rem(margin-top, 50px);
   text-align: center;
 
   &:after{
-    border: 3px solid $green-base;
+    animation: spin 0.5s linear infinite;
+    border: 3px solid $primary-base;
     border-radius: 50%;
-    border-top-color: $blue-base;
+    border-top-color: $primary-base;
     border-right-color: transparent;
     border-top-color: transparent;
     content:"";
     display: inline-block;
     height: 30px;
-    @include animation(spin 0.5s linear infinite);
     width: 30px;
   }
 }
 
-@include keyframes(spin) {
-  to { @include transform(rotate(360deg)); }
-}
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
\ No newline at end of file
diff --git a/.storybook/styles/components/_summit-list.scss b/.storybook/styles/components/_summit-list.scss
deleted file mode 100644
index ce7ad2bd..00000000
--- a/.storybook/styles/components/_summit-list.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-/*-----------------------
-Summit List
------------------------*/
-.summit-list{
-  display: inline-block;
-  width: 100%;
-
-  .card-link{
-    display: inline-block;
-    @include rem(margin-bottom, 20px);
-
-    @include media($tablet){
-      @include span-columns(6 of 12);
-      @include omega(2n);
-    }
-
-    &:hover{
-      .card{ background-color: $blue-light; }
-    }
-
-    .card {
-      @include transition(all 0.3s ease-in-out);
-      @include rem(padding, 20px);
-
-      .text-block{
-        @include rem(margin-top, 20px);
-
-        h4{
-          margin-bottom: 0px;
-        }
-      }
-    }
-  }
-
-  span{
-    border-radius: 20px;
-    color: $white-base;
-    display: inline-block;
-    font-weight: bold;
-    @include rem(margin-bottom, 10px);
-    @include rem(padding, 5px 0px);
-    @include s-small;
-    text-align: center;
-    text-transform: uppercase;
-    width: 65px;
-  }
-
-  .is-live{
-    background-color: $green-base;
-  }
-
-  .in-progress{
-    background-color: $yellow-base;
-  }
-
-  .is-past{
-    background-color: $blue-base;
-  }
-}
-
-.summit-thumb{
-  background-color: $grey-light;
-  height: 100%;
-  width: 100%;
-}
\ No newline at end of file
diff --git a/.storybook/styles/components/_table.scss b/.storybook/styles/components/_table.scss
index 0644c9b0..ff326ce4 100644
--- a/.storybook/styles/components/_table.scss
+++ b/.storybook/styles/components/_table.scss
@@ -1,19 +1,22 @@
 /*-----------------------
 Table
 -----------------------*/
-
 table{
-  background-color: $grey-lighter;
+  background-color: $white-base;
   table-layout: fixed;
   width: 100%;
 
+  thead{
+    border-bottom: 2px solid $black-base;
+  }
+
   th, td {
+    color: $black-base;
     display: table-cell;
     @include rem(margin, 15px 5px);
-    @include rem(padding, 10px);
-    @include s-medium;
+    @include rem(padding, 12px 10px);
+    @include font-size-mbody;
     text-align: left;
-    white-space: nowrap;
     width: inherit;
     vertical-align: middle;
   }
@@ -21,67 +24,63 @@ table{
   th, td:before {
     color: $grey-base;
     font-weight: $bold;
-    font-size: $s-small;
+    @include font-size-mbody;
   }
 
-  td{
-    max-width: 300px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-size: $s-small;
+  th{
+    color: $black-base;
+    width: 100%;
   }
 
-  th, thead{
-    background-color: $yellow-light;
-    color: $black-base;
+  th.sortable{
     cursor: pointer;
-    width: 100%;
   }
 
   tbody{
     overflow: auto;
 
     tr{
+      &.clickable{
+        cursor: pointer;
+      }
       &:nth-child(even){
-        background-color: rgba(lighten($blue-base, 35%), 0.7);
+        background-color: $white-light;
       }
     }
   }
 }
 
+/*-----------------------
+Scrollable
+-----------------------*/
+.scrollable-table{
+  overflow: auto;
+}
+
 /*-----------------------
 Filter Table Arrows
 -----------------------*/
-th{
+th.sortable{
   &:after{
     display: inline-block;
-    font-size: 8px;
+    font-size: 12px;
     @include rem(margin-left, 10px);
     opacity: 0.4;
   }
 
-  &:hover:after{
-    content:"▼";
-  }
-}
-
-.order-ascend{
-  &:after{
-    content:"▲";
-  }
-
-  &:hover:after{
-   content:"▼";
+  &.order-descend:after {
+    // background-image: url('../images/utility-icons/dropdown.svg');
   }
-}
-
-.order-descend{
-  &:after{
-    content:"▼";
+  &.order-ascend:after{
+    // background-image: url('../images/utility-icons/dropdown.svg');
+    transform: scaleY(-1);
+    filter: FlipV;
+    -ms-filter: “FlipV”;
   }
-
-  &:hover:after{
-    content:"▲";
+  &:not(.order-ascend):not(.order-descend):hover:after {
+    // background-image: url('../images/utility-icons/dropdown.svg');
+    transform: scaleY(-1);
+    filter: FlipV;
+    -ms-filter: “FlipV”;
   }
-}
+}
\ No newline at end of file
diff --git a/.storybook/styles/components/_tabs.scss b/.storybook/styles/components/_tabs.scss
index e2248456..25aa38d3 100644
--- a/.storybook/styles/components/_tabs.scss
+++ b/.storybook/styles/components/_tabs.scss
@@ -3,13 +3,18 @@ Shared
 -----------------------*/
 .tabs{
   cursor: pointer;
+  position: relative;
 
   li{
-    @include transition(all 0.3s ease-in-out);
+    transition: all 0.3s ease-in-out;
 
     &:hover{
       color: darken($black-base, 100%);
     }
+
+    a{
+      text-decoration: none;
+    }
   }
 }
 
diff --git a/.storybook/styles/dependencies.scss b/.storybook/styles/dependencies.scss
new file mode 100644
index 00000000..469e0d52
--- /dev/null
+++ b/.storybook/styles/dependencies.scss
@@ -0,0 +1,4 @@
+
+@import "../../node_modules/bourbon/core/bourbon";
+@import "../../node_modules/bourbon-neat/core/neat";
+@import "datepicker";
diff --git a/.storybook/styles/main.scss b/.storybook/styles/main.scss
new file mode 100644
index 00000000..ca600c4b
--- /dev/null
+++ b/.storybook/styles/main.scss
@@ -0,0 +1,18 @@
+// Settings
+@import 'settings/settings';
+
+// Base Styles
+@import 'base/typography';
+
+// Components List
+@import 'components/buttons';
+@import 'components/loading-container';
+@import 'components/flash';
+@import 'components/modal';
+@import 'components/spinner';
+@import 'components/forms';
+@import 'components/pagination';
+@import 'components/table';
+@import 'components/grid';
+@import 'components/radio';
+@import 'components/tabs';
diff --git a/.storybook/styles/pages/_main.scss b/.storybook/styles/pages/_main.scss
deleted file mode 100644
index f0b493e5..00000000
--- a/.storybook/styles/pages/_main.scss
+++ /dev/null
@@ -1,92 +0,0 @@
-[class*=-block-container]{
-  @include base-padding;
-  //@include outer-container;
-  display: inline-block;
-  width: 100%;
-  @include media($tablet-landscape) {
-  width: calc(100% - 245px);
-  }
-}
-
-@keyframes fade-in{
-  0%{ opacity:0;  }
-  100%{ opacity:1; }
-}
-
-hr{
-  border: none;
-  border-bottom: 1px solid $white-med;
-}
-
-
-/*-----------------------
-Card
------------------------*/
-.card{
-  background-color: $white-base;
-  border-radius: 2px;
-  box-shadow: 0 0 18px 0 rgba(232,232,232,0.50);
-  @include rem(padding, 20px);
-  @include rem(margin-bottom, 20px);
-
-  @include media($tablet) {
-    //@include rem(padding, 40px);
-  }
-
-  p:last-child{
-
-  }
-}
-
-
-/*-----------------------
-Content
------------------------*/
-.content{
-  display: inline-block;
-  @include animation(fade-in 0.5s ease-in);
-  margin-top: $desktop-nav-height;
-  position: relative;
-  width: 100%;
-
-  &.with-sidebar{
-    @include media($tablet-landscape) {
-      margin-left: $side-navigation;
-      width: calc(100% - $side-navigation);
-
-      .content-container{
-        .card{
-          @include media($tablet-landscape){
-            @include span-columns(8 of 12);
-          }
-        }
-      }
-    }
-  }
-
-  &.centered{
-    @include rem(margin, 30px 10px);
-    margin-top: $desktop-nav-height;
-
-    .card{
-      @include center;
-      max-width: 800px;
-      @include rem(margin, 30px auto 20px);
-    }
-  }
-}
-
-.content-right {
-  @include rem(margin-top, 0);
-  @include media($tablet) {
-    @include rem(margin-top, 61px);
-  }
-}
-
-
-/*-----------------------
-Centered Block
------------------------*/
-.centered-block{
-  text-align: center;
-}
diff --git a/.storybook/styles/pages/_styleguide.scss b/.storybook/styles/pages/_styleguide.scss
deleted file mode 100644
index 31165d61..00000000
--- a/.storybook/styles/pages/_styleguide.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-/*-----------------------
-Styleguide
------------------------*/
-.styleguide{
-  .styleguide-fields fieldset{
-    margin-top: 0px;
-  }
-
-  h5:not(:first-child){
-    @include rem(margin-top, 20px);
-  }
-
-  .styleguide-sidebar{
-    .side-navigation{
-      margin-top: 0px;
-      position: relative;
-    }
-  }
-  .styleguide-header{
-    .navigation{
-      position: relative;
-    }
-  }
-
-  &.content{
-    &.with-sidebar{
-      .content-container{
-        .card{
-          @include media($tablet-landscape){
-            float: inherit;
-            width: 100%;
-          }
-        }
-      }
-    }
-  }
-}
-
-.code-header{
-  border-bottom: 1px solid $white-med;
-  @include rem(margin-bottom, 20px);
-  @include rem(padding-bottom, 20px);
-
-  &:not(:first-child){
-    @include rem(margin-top, 60px);
-  }
-}
-
-xmp{
-  background-color: rgba(lighten($blue-base, 35%), 0.5);
-  @include rem(padding, 20px);
-  white-space: pre-wrap;
-}
diff --git a/.storybook/styles/settings/_reset.scss b/.storybook/styles/settings/_reset.scss
index c2fdc2e5..f68965b9 100755
--- a/.storybook/styles/settings/_reset.scss
+++ b/.storybook/styles/settings/_reset.scss
@@ -10,6 +10,10 @@
     font-size: 100%;
     font: inherit;
     vertical-align: baseline;
+    
+-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
+-moz-box-sizing: border-box;    /* Firefox, other Gecko */
+box-sizing: border-box;         /* Opera/IE 8+ */
   }
 
   // HTML5 display-role reset for older browsers
diff --git a/.storybook/styles/settings/mixins/_layout.scss b/.storybook/styles/settings/mixins/_layout.scss
index 7308242b..a13ef119 100755
--- a/.storybook/styles/settings/mixins/_layout.scss
+++ b/.storybook/styles/settings/mixins/_layout.scss
@@ -1,38 +1,20 @@
-//GRID SETTINGS
-  $grid-columns: 12;
-
 //MEDIA QUERIES
-
-  //DEFINED VARIABLES
-  $mobile-size:em(320);
-  $tablet-size:em(720);
-  $desktop-size:em(1200);
-
-  // SPECIAL VARIABLES
-  $tablet-landscape: em(1024);
-
-  // Bourbon Neat Breakpoints
-  $mobile: new-breakpoint(min-width $mobile-size 4);
-  $tablet: new-breakpoint(min-width $tablet-size 9);
-  $tablet-landscape: new-breakpoint(min-width $tablet-landscape orientation landscape 9); //LPL Added
-  $desktop: new-breakpoint(min-width $desktop-size 12);
+$tablet: (
+  columns: 12,
+  gutter: 32px,
+  media: 720px,
+);
+
+$tablet-landscape: (
+  columns: 12,
+  gutter: 32px,
+  media: 1024px,
+);
 
 //BORDERS
-$blue-border: 1px solid $blue-base;
-$grey-border: 1px solid $grey-base;
-$white-border: 1px solid $white-base;
-$blue-border-thick: 4px solid $blue-base;
-
-//OFFSET
-$page-header-offset: 112px;
-$page-header-offset-mobile: 90px;
-
-
-@mixin header-offset {
-  margin-top: $page-header-offset-mobile;
-  @include media($tablet) { margin-top: $page-header-offset; }
-}
+$grey-border: 1px solid $grey-light;
 
+//MIXINS
 @mixin center {
   display: block;
   margin-left: auto;
@@ -43,25 +25,17 @@ $page-header-offset-mobile: 90px;
 @mixin base-padding {
   @include rem(padding, 20px);
 
-  @include media($tablet) { @include rem(padding, 30px); }
-}
-
-@mixin secondary-padding {
-  @include rem(padding, 40px 20px);
-}
-
-@mixin side-padding {
-  @include rem(padding, 0 20px);
+  @include grid-media($tablet) { @include rem(padding, 30px); }
 }
 
 @mixin vertical-center {
-  @include transform(translateY(-50%));
+  transform: translateY(-50%);
   position: absolute;
   top: 50%;
 }
 
 @mixin horizontal-center {
-  @include transform(translateX(-50%));
+  transform: translateX(-50%);
   position: absolute;
   left: 50%;
 }
@@ -69,14 +43,7 @@ $page-header-offset-mobile: 90px;
 @mixin vertical-horizontal-center {
   @include vertical-center;
   left: 50%;
-  @include transform(translateY(-50%) translateX(-50%));
-}
-
-@mixin hover-zoom {
-  @include transition(all 1s ease);
-  background-size: 100%;
-
-  &:hover { background-size: 120%; }
+  transform: translateY(-50%) translateX(-50%);
 }
 
 img { width: 100%; }
@@ -89,27 +56,29 @@ img { width: 100%; }
 
 @mixin mobile-hide {
   display: none;
-  @include media($tablet) { display: block; }
+  @include grid-media($tablet) { display: block; }
 }
 
 @mixin desktop-hide{
-  @include media ($tablet){ display: none; }
+  @include grid-media ($tablet){ display: none; }
 }
 
 .horizontal-divider {
   border-bottom: $grey-border;
 }
 
-// ------------------------------------------------------------
-// Override Neat's grid settings
-// ------------------------------------------------------------
-$column: golden-ratio(1em, 2) !default;
-$gutter: golden-ratio(1em, 1) !default;
-$fg-column: $column;
-$fg-gutter: $gutter;
-
-@mixin omega-reset($nth) {
-  &:nth-child(#{$nth}) { margin-right: flex-gutter(); }
-  &:nth-child(#{$nth}+1) { clear: none }
+@mixin ellipsis{
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@mixin outline-dark{
+  outline: 1px dotted $black-base;
+  outline-offset: 2px;
 }
 
+@mixin outline-light{
+  outline: 1px dotted $white-base;
+  outline-offset: 2px;
+}
\ No newline at end of file
diff --git a/.storybook/styles/settings/mixins/_typography.scss b/.storybook/styles/settings/mixins/_typography.scss
index 4794fba7..1b2a9c98 100755
--- a/.storybook/styles/settings/mixins/_typography.scss
+++ b/.storybook/styles/settings/mixins/_typography.scss
@@ -3,55 +3,49 @@
 
 
 // Font Sizes
-@mixin s-giga{
-  @include rem(font-size, $s-giga);
+@mixin font-size-hero{
+  @include rem(font-size, $s-hero);
 }
 
-@mixin s-mega{
+@mixin font-size-mega{
   @include rem(font-size, $s-mega);
 }
 
-@mixin s-huge{
-  @include rem(font-size, $s-huge);
+@mixin font-size-jumbo{
+  @include rem(font-size, $s-jumbo);
 }
 
-@mixin s-large{
-  @include rem(font-size, $s-large);
+@mixin font-size-display{
+  @include rem(font-size, $s-display);
   @include rem(line-height, $base-line-height);
 }
 
-@mixin s-bigger{
-  @include rem(font-size, $s-bigger);
+@mixin font-size-subheader{
+  @include rem(font-size, $s-subheader);
   @include rem(line-height, $base-line-height);
 }
 
-@mixin s-big{
-  @include rem(font-size, $s-big);
+@mixin font-size-minor{
+  @include rem(font-size, $s-minor);
   @include rem(line-height, $base-line-loose);
 }
 
-@mixin s-medium{
-  @include rem(font-size, $s-medium);
+@mixin font-size-lbody{
+  @include rem(font-size, $s-lbody);
   line-height: normal;
 }
 
-@mixin s-base{
-  @include rem(font-size, $s-base);
+@mixin font-size-mbody{
+  @include rem(font-size, $s-mbody);
 }
 
-@mixin s-small{
-  @include rem(font-size, $s-small);
+@mixin font-size-sbody{
+  @include rem(font-size, $s-sbody);
 }
 
-@mixin s-tiny{
-  @include rem(font-size, $s-tiny);
-  @include rem(line-height, $base-line-small);
-}
-
-
 // Font Styles
 @mixin font-type($type, $style, $weight){
   font-family: $type;
   font-style:  $style;
   font-weight: $weight;
-}
+}
\ No newline at end of file
diff --git a/.storybook/styles/settings/variables/_buttons.scss b/.storybook/styles/settings/variables/_buttons.scss
index fd259c16..bc46b845 100755
--- a/.storybook/styles/settings/variables/_buttons.scss
+++ b/.storybook/styles/settings/variables/_buttons.scss
@@ -2,7 +2,10 @@
 // ========================================
 
 $buttons: (
-  (primary,     $green-base,    $green-base,    $white-base,   $green-base,    $white-base)
-  (alert,     $yellow-base,    $yellow-base,    $white-base,   $yellow-base,    $white-base)
-  (chill,     $grey-light,    $grey-light,    $grey-dark,   $grey-light,    $grey-dark)
-);
+  (primary,     $primary-base,    $primary-base,    $white-base,   $primary-dark,    $white-base)
+  (primary-outline,     transparent,    $primary-base,    $primary-base,   $primary-base,    $white-base)
+  (secondary,     $secondary-base,    $secondary-base,    $white-base,   $secondary-dark,    $white-base)
+  (secondary-outline,     transparent,    $secondary-base,    $secondary-base,   $secondary-base,    $white-base)
+  (warn,     $red-base,    $red-base,    $white-base,   $red-dark,    $white-base)
+  (warn-outline,     transparent,    $red-base,    $red-base,   $red-base,    $white-base)
+);
\ No newline at end of file
diff --git a/.storybook/styles/settings/variables/_colors.scss b/.storybook/styles/settings/variables/_colors.scss
index 9f078609..22580b07 100755
--- a/.storybook/styles/settings/variables/_colors.scss
+++ b/.storybook/styles/settings/variables/_colors.scss
@@ -1,55 +1,35 @@
 //MAIN COLORS
 
   //BLACK
-    $black-base:   #5B5B5B;
-
-  //BLUE
-    $blue-light:   #BEE4FF;
-    $blue-base:    #6BC2FF;
+    $black-light:  #44525A;
+    $black-base:   #444444;
+    $black-dark:   #15191C;
 
   //GREEN
-    $green-dark:   #56C852;
-    $green-base:   #7ED97A;
-    $green-light:  #E9FFE8;
+    $green-base:   #0f8e47;
+    $green-light:  lighten($green-base, 65%);
+    $green-dark:   darken($green-base, 10%);
 
   //GREY
-    $grey-lighter: #FAFAFA;
-    $grey-light:   #E7E7E7;
+    $grey-light:   #f1f1f1;
     $grey-base:    #A9A9A9;
     $grey-dark:    #767676;
 
   //RED
-    $red-base:     #FF715E;
-    $red-light:    #FFE8E5;
-
-  //YELLOW
-    $yellow-light: #FFE196;
-    $yellow-base:  #FFBE1D;
-    $yellow-dark:  #F9B307;
+    $red-base:     #D50000;
+    $red-light:    lighten($red-base, 45%);
+    $red-dark:     darken($red-base, 10%);
 
   //WHITE
-    $white-light:  #F8F8F8;
+    $white-light:  #F4F6F6;
     $white-base:   #FFFFFF;
-    $white-med:    #DEDEDE;
-    $white-dark:   #F7F7F7;
+    $white-dark:   #9B9B9B;
+  
+  //PRIMARY
+    $primary-base: $black-base;
+    $primary-dark: darken($primary-base, 10%);
 
+  //SECONDARY
+    $secondary-base: $grey-base;
+    $secondary-dark: darken($secondary-base, 10%);
 
-  //MAIN PALETTE LIST
-  $colors: (
-    black-base    $black-base,
-    blue-light    $blue-light,
-    blue-base     $blue-base,
-    grey-light    $grey-light,
-    grey-base     $grey-base,
-    grey-dark     $grey-dark,
-    green-dark    $green-dark,
-    green-base    $green-base,
-    green-light   $green-light,
-    red-light     $red-light,
-    red-base      $red-base,
-    yellow-base   $yellow-base,
-    yellow-dark   $yellow-dark,
-    white-light   $white-light,
-    white-base    $white-base,
-    white-dark    $white-dark
-  );
diff --git a/.storybook/styles/settings/variables/_typography.scss b/.storybook/styles/settings/variables/_typography.scss
index 488c6593..41291b9b 100755
--- a/.storybook/styles/settings/variables/_typography.scss
+++ b/.storybook/styles/settings/variables/_typography.scss
@@ -3,22 +3,25 @@
 
   // Font Families
 
-  $primary-sans-serif: 'Rubik', sans-serif;
+  $primary-sans-serif: 'Open Sans', sans-serif;
 
 
   // Sizes
   $font-size-base: 14px;
 
-  $s-giga:    60px;
-  $s-mega:    38px;
+  $s-hero:      47px;
+  $s-mega:      38px;
+  $s-jumbo:     22px;
+  $s-display:   19px;
+  $s-subheader: 17px;
+  $s-minor:     15px;
+  $s-lbody:     18px;
+  $s-mbody:     16px;
+  $s-sbody:     15px;
 
-  $s-huge:    36px;
-  $s-large:   27px;
-  $s-bigger:  20px;
-  $s-big:     20px;
-  $s-medium:  16px;
-  $s-base:    14px;
-  $s-small:   12px;
+
+  $s-base:    15px;
+  $s-small:   13px;
   $s-tiny:    10px;
 
   // Line Heights
@@ -29,5 +32,5 @@
   // Font Weights
   $light: 300;
   $regular: 400;
-  $bold: 700;
-  $heavy: 900;
+  $semibold: 600;
+  $bold: 700;
\ No newline at end of file
diff --git a/.storybook/styles/storybook.scss b/.storybook/styles/storybook.scss
new file mode 100644
index 00000000..97881b77
--- /dev/null
+++ b/.storybook/styles/storybook.scss
@@ -0,0 +1,8 @@
+
+
+ $output-bourbon-deprecation-warnings: false;
+
+ @import "dependencies";
+ @import "main";
+
+ 
\ No newline at end of file
diff --git a/package.json b/package.json
index 017fcfb4..707e4a30 100644
--- a/package.json
+++ b/package.json
@@ -66,8 +66,8 @@
     "@storybook/addons": "^5.0.6",
     "@storybook/react": "^5.0.6",
     "babel-loader": "^8.0.0",
-    "bourbon": "^4.3.3",
-    "bourbon-neat": "^1.8.0",
+    "bourbon": "^7.0.0",
+    "bourbon-neat": "^4.0.0",
     "css-loader": "^3.0.0",
     "documentation": "^12.1.1",
     "enzyme": "^3.2.0",
diff --git a/yarn.lock b/yarn.lock
index c8d14369..d26ecd04 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3608,17 +3608,15 @@ boolbase@^1.0.0, boolbase@~1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
-bourbon-neat@^1.8.0:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/bourbon-neat/-/bourbon-neat-1.9.1.tgz#f7932e889bb24ac908c45d399b04bd5b0df1e949"
-  integrity sha512-W4gjJx1j+KPNF8Bg/3ecaTHPMC7IJ2pFKmYEZanWtzFk9MpM9kn+f14iXypIj8htHMRmzVByhzFhVWwuDKSTYg==
-  dependencies:
-    node-sass "^4.1.1"
+bourbon-neat@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/bourbon-neat/-/bourbon-neat-4.0.0.tgz#8aa1794aafba50b13993817af5e16c449739e332"
+  integrity sha512-Ql1JdvjNvK9NbGvcBpsDkfuRRMK8fZ/mx1gRyZEy3PM/kqQ8QX0PcmKEqnZMl18YLfKaDwC0qa+e36TlDmT49g==
 
-bourbon@^4.3.3:
-  version "4.3.4"
-  resolved "https://registry.yarnpkg.com/bourbon/-/bourbon-4.3.4.tgz#4da380029e92c0c8f9764c779451a134b11e7cc3"
-  integrity sha1-TaOAAp6SwMj5dkx3lFGhNLEefMM=
+bourbon@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/bourbon/-/bourbon-7.0.0.tgz#42c0b691e99cb1f7616aad2a11b17ab88bbc4918"
+  integrity sha512-49kyBY+4gwnEvnez8H0TzFjfNZpUVdCmmS873S9nQ6YUuh2+qesbOh8lA+9gAuWlqtYlF+/3Etxm/13RhceOrg==
 
 boxen@^3.0.0:
   version "3.2.0"
@@ -9286,7 +9284,7 @@ node-releases@^1.1.38, node-releases@^1.1.46:
   dependencies:
     semver "^6.3.0"
 
-node-sass@^4.1.1, node-sass@^4.11.0:
+node-sass@^4.11.0:
   version "4.13.0"
   resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.13.0.tgz#b647288babdd6a1cb726de4545516b31f90da066"
   integrity sha512-W1XBrvoJ1dy7VsvTAS5q1V45lREbTlZQqFbiHb3R3OTTCma0XBtuG6xZ6Z4506nR4lmHPTqVRwxT6KgtWC97CA==