diff --git a/app/common/styles/base/buttons.scss b/app/common/styles/base/buttons.scss
index f97aa6d..9aeb725 100644
--- a/app/common/styles/base/buttons.scss
+++ b/app/common/styles/base/buttons.scss
@@ -1,127 +1,150 @@
-button, .button, .submit, .btn, [type='button'] {
-  font-size: 1em;
+$btn-primary__bg: $color--blue-40;
+$btn-primary__bg--hover: $color--blue-30;
+$btn-primary__bg--disabled: $color--grey-40;
+$btn-primary__txt: $color--grey-0;
+$btn-primary__txt--disabled: $color--grey-60;
+
+$btn-secondary__bg: $color--grey-0;
+$btn-secondary__txt: $color--blue-40;
+$btn-secondary__txt--hover: $color--blue-30;
+$btn-secondary__txt--disabled: $color--grey-60;
+
+$btn-tertiary__bg: transparent;
+$btn-tertiary__txt: $color--blue-40;
+$btn-tertiary__txt--hover: $color--blue-30;
+$btn-tertiary__txt--disabled: $color--grey-60;
+
+/***
+Include .btn class in addition to the button type.
+These styles provide structural and base properties
+shared across all buttons. The additional button
+type (.btn-primary, .btn-secondary) will provide color
+properties
+***/
+button,
+.btn,
+[type='button'] {
   @include fontFamilyBold;
+  @include fastTransition-all;
+  border-style: solid;
+  border-width: 2px;
+  border-color: transparent;
+  font-size: 1em;
   text-transform: none;
   border-radius: 0;
   padding: .5em 1em;
   line-height: 1;
-  &:hover {
-    cursor: pointer;
-  }
+  display: inline-block;
+  cursor: pointer;
+  &[disabled],
   &.disabled {
-    pointer-events: none;
-    color: $btn__disabled-txt;
-    background-color: $btn__disabled-bg;
-    border-color: $btn__disabled-bg;
-    border-style: solid;
-    border-width: 2px;
-    &:hover {
-      cursor: default;
-      background: transparent;
-      text-decoration: none;
-    }
+    opacity: 1;
+    cursor: default;
   }
-}
-
-.btn-primary {
-  color: $primebtn__text;
-  background: $primebtn__bg;
-  border: 2px solid $primebtn__bg;
-  &:hover {
-    background: lighten($primebtn__bg, 8%);
-    border-color: lighten($primebtn__bg, 8%);
-    @include fastTransition-all;
+  &.full-width {
+    width: 100%;
   }
-  &.disabled {
-    background: $primebtn__disabled-bg;
-    border-color: $primebtn__disabled-bg;
-    color: $primebtn__disabled-txt;
-    @include fastTransition-all;
-    &:hover {
-      cursor: default;
-    }
-  }
+  .icon,
   i {
     //button symbol
     font-style: normal;
+    font-weight: normal;
     text-transform: none;
-    font-size: 1.5em;
-    transform: rotate(80deg);
     display: inline-block;
+    margin-right: 0.3em;
+    vertical-align: bottom;
   }
   img {
     width: 1.5em;
     height: 1.5em;
     display: inline-block;
+    margin-right: 0.5em;
   }
-}
-.btn-secondary {
-  color: $secbtn__text;
-  background: transparent;
-  border: 2px solid $secbtn__border;
-  &:hover {
-    color: $secbtn__text;
-    cursor: pointer;
-    background: $secbtn__bg;
-    border-color: $secbtn__text;
-    @include fastTransition-all;
-  }
-  &.disabled {
-    pointer-events: none;
-    color: $btn__disabled-txt;
-    background-color: $btn__disabled-bg;
-    border-color: $btn__disabled-bg;
-    border-style: solid;
-    border-width: 2px;
-    &:hover {
-      background: $btn__disabled-bg;
-    }
-  }
-  i {
-    // button symbol
-    font-style: normal;
-    font-weight: 400;
-    text-transform: none;
-    font-size: 1.5em;
-    transform: rotate(80deg) translate(-2px);
-    display: inline-block;
-    vertical-align: middle;
-  }
-  img {
-    width: 1.5em;
-    height: 1.5em;
-    display: inline-block;
-    margin-right: .5em;
+  svg {
+    height: 1.2em;
+    width: auto;
   }
 }
 
-.btn-pop-out {
-  position: relative;
-  padding: 0 0 1em 2em;
-  color: $black;
+/***
+Use for the primary use-case/s that is non-destructive.
+e.g. directing to a new page, a call to action
+***/
+.btn-primary {
+  background-color: $btn-primary__bg;
+  border-color: $btn-primary__bg;
+  color: $btn-primary__txt;
   &:hover {
-    text-decoration: underline;
+    background-color: $btn-primary__bg--hover;
+    border-color: $btn-primary__bg--hover;
   }
-  &:before {
-    content: "";
-    position: absolute;
-    left: 0;
-    top: 0px;
-    width: 25px;
-    height: 20px;
-    display: inline-block;
-    border: 1px solid $black;
-    border-top: 4px solid $black;
+  &[disabled],
+  &.disabled {
+    background: $btn-primary__bg--disabled;
+    border-color: $btn-primary__bg--disabled;
+    color: $btn-primary__txt--disabled;
+      .icon {
+        fill: $btn-primary__txt--disabled;
+      }
   }
-  &:after {
-    content: "\2794";
-    position: absolute;
-    transform: rotate(-45deg);
-    font-size: 0.9em;
-    font-weight: 700;
-    vertical-align: middle;
-    display: inline-block;
-    left: 11px;
-    top: 0px;
+  .icon {
+    fill: $btn-primary__txt;
   }
 }
+
+/***
+Secondary buttons are actions that fall secondary or
+of less priority to primary buttons.
+These usually come coupled with a primary.
+***/
+.btn-secondary {
+  background-color: $btn-secondary__bg;
+  border-color: $btn-secondary__txt;
+  color: $btn-secondary__txt;
+  &:hover {
+    background-color: $btn-secondary__bg;
+    border-color: $btn-secondary__txt--hover;
+    color: $btn-secondary__txt--hover;
+    .icon {
+      fill: $btn-secondary__txt--hover;
+    }
+  }
+  &[disabled],
+  &.disabled {
+    background-color: $btn-secondary__bg;
+    border-color: $btn-secondary__txt--disabled;
+    color: $btn-secondary__txt--disabled;
+    .icon {
+      fill: $btn-secondary__txt--disabled;
+    }
+  }
+  .icon {
+    fill: $btn-secondary__txt;
+  }
+}
+
+/***
+Tertiary text buttons are used to identify less pressing or
+optional actions given on a page.
+***/
+.btn-tertiary {
+  background-color: $btn-tertiary__bg;
+  border-color: $btn-tertiary__bg;
+  color: $btn-tertiary__txt;
+  &:hover {
+    color: $btn-tertiary__txt--hover;
+    .icon {
+      fill: $btn-tertiary__txt--hover;
+    }
+  }
+  &[disabled],
+  &.disabled {
+    color: $btn-tertiary__txt--disabled;
+    .icon {
+      fill: $btn-tertiary__txt--disabled;
+    }
+  }
+  .icon {
+    fill: $btn-tertiary__txt;
+  }
+}
\ No newline at end of file
diff --git a/app/common/styles/base/colors.scss b/app/common/styles/base/colors.scss
index 03e8e19..f5f93f0 100644
--- a/app/common/styles/base/colors.scss
+++ b/app/common/styles/base/colors.scss
@@ -1,7 +1,39 @@
+// Base colors
+$color--blue-100: #1B2834;
+$color--blue-50: #1D3458;
+$color--blue-40: #2D60E5;
+$color--blue-30: #7295F1;
+$color--blue-20: #CCD7F4;
+
+$color--grey-100: #333333;
+$color--grey-80: #666666;
+$color--grey-60: #999999;
+$color--grey-40: #CCCCCC;
+$color--grey-30: #DCDEE0;
+$color--grey-20: #F0F2F5;
+$color--grey-10: #FAFBFC;
+$color--grey-0: #FFFFFF;
+
+// Status colors
+$color--teal-70: #098292;
+$color--teal-50: #00B6CB;
+$color--teal-20: #CCF0F5;
+
+$color--green-50: #0A7D06;
+$color--green-20: #C6E8C5;
+
+$color--yellow-70: #EFC100;
+$color--yellow-50: #FEDF39;
+$color--yellow-40: #FFDF99;
+$color--yellow-20: #FFF8E4;
+
+$color--red-50: #DA1416;
+$color--red-20: #FAD3D3;
+
 // Global
-$white: #ffffff;
-$black: #333;
-$darkgrey: #666;
+$white: $color--grey-0;
+$black: $color--grey-100;
+$darkgrey: $color--grey-80;
 $medgrey: #d7dbe0;
 $lightgrey: #f5f7fa;
 $lightblue: #f1f2f6;
@@ -10,10 +42,6 @@
 $purple: #5A3EC8;
 $field__disabled: #e6e6e6;
 $field__focus: #3C6DEF;
-$btn__disabled-txt: #a6a5a6;
-$btn__disabled-bg: #d8d8d8;
-$primebtn__disabled-txt: #999999;
-$primebtn__disabled-bg: #CCCCCC;
 
 // Dark background
 $darkbg__grey: #E3ECEC;
@@ -22,7 +50,7 @@
 
 //Disabled table elements
 $disabled-row: #dddee0;
-$disabled-row-txt: #999999;
+$disabled-row-txt: $color--grey-60;
 
 //Forms
 $input-border: #a7a7a7;
@@ -30,10 +58,10 @@
 // Light Background
 $lightbg__grey: #b8c1c1;
 $lightbg__accent: #d8e2fc;
-$lightbg__primary: #2d60e5;
+$lightbg__primary: $color--blue-40;
 
 // Primary Button colors
-$primebtn__bg: #2d60e5;
+$primebtn__bg: $color--blue-40;
 $primebtn__text: $white;
 
 // Secondary Button colors
@@ -67,13 +95,13 @@
 $normal: #00baa1;
 
 // Priority tags
-$lowPriorityColor: #00b6cb;
+$lowPriorityColor: $color--teal-50;
 $lowPriorty-bg: #cdf0f6;
 $medPriorityColor: #feb101;
 $medPriorty-bg: #fef0cd;
 $highPriorityColor: #e62425;
 $highPriority-bg: #edc9cb;
-$resolvedColor: #999999;
+$resolvedColor: $color--grey-60;
 $resolved-bg: #d6d6d6;
 
 
@@ -87,7 +115,7 @@
 $inactive: $severity-medium-lightbg;
 
 // Links
-$links: #2d60e5;
+$links: $color--blue-40;
 $links__hover: $lightbg__primary;
 $links__visited: #8ea7ea;
 $links__disabled: rgba(27, 40, 52, 0.70);
@@ -98,4 +126,4 @@
 $nav__second-level-text-color: #4b5d78;
 
 //Loader
-$loaderColor: #1d3458;
+$loaderColor: $color--blue-50;
diff --git a/app/common/styles/base/icons.scss b/app/common/styles/base/icons.scss
index 557c857..bd5b9a6 100644
--- a/app/common/styles/base/icons.scss
+++ b/app/common/styles/base/icons.scss
@@ -1,13 +1,7 @@
 .icon {
   display: inline-block;
-  width: 20px;
-  height: 20px;
-  position: relative;
-  speak: none;
-  font-style: normal;
-  &.icon-as-spacer {
-    text-indent: -9999px;
-  }
+  width: 1.5em;
+  height: auto;
 }
 
 .icon__more {
@@ -33,6 +27,7 @@
 }
 
 .icon__bar-arrow {
+  font-style: normal;
   &:before {
     content: '\21E5';
     position: absolute;
@@ -46,6 +41,7 @@
 }
 
 .icon-angle {
+  font-style: normal;
   &:before {
     content: '\276F';
     display: inline-block;
@@ -88,21 +84,6 @@
   background-image: url(../assets/images/icon-off.svg);
 }
 
-.icon__return {
-  @include status-icon;
-  background-image: url(../assets/images/icon-return.svg);
-}
-
-.icon__standby {
-  @include status-icon;
-  background-image: url(../assets/images/icon-standby.svg);
-}
-
-.icon__plus {
-  @include status-icon;
-  background-image: url(../assets/images/icon-plus.svg);
-}
-
 .icon__info{
   margin-top: -4px;
   margin-right: .5em;
@@ -122,22 +103,8 @@
     background: url(../assets/images/icon-arrow-gray.svg) center center no-repeat;
   }
 }
+
 .icon__down-arrow {
   @extend .icon__up-arrow;
   transform: rotate(180deg);
 }
-
-.icon__edit {
-  @include status-icon;
-  background-image: url(../assets/images/icon-edit-blue.svg);
-}
-
-.icon__delete {
-  @include status-icon;
-  background-image: url(../assets/images/icon-trashcan-blue.svg);
-}
-
-.icon__close {
-  @include status-icon;
-  background-image: url(../assets/images/crit-x-black.svg);
-}
diff --git a/app/common/styles/directives/app-header.scss b/app/common/styles/directives/app-header.scss
deleted file mode 100644
index e69de29..0000000
--- a/app/common/styles/directives/app-header.scss
+++ /dev/null
diff --git a/app/common/styles/directives/app-navigation.scss b/app/common/styles/directives/app-navigation.scss
index 1e21659..79eb11e 100644
--- a/app/common/styles/directives/app-navigation.scss
+++ b/app/common/styles/directives/app-navigation.scss
@@ -8,8 +8,8 @@
   max-height: 40px;
   stroke-width: .5;
   display: block;
-  width: 40px;
-  margin: 0 auto .5em auto;
+  margin: .5em auto;
+  overflow: hidden;
   .st0 {
     fill: none;
     stroke: $white;
@@ -46,13 +46,21 @@
   li {
     margin: 0;
   }
+  > li > a,
+  > li > button {
+    height: 120px;
+  }
   //svg icons
   .nav-icon {
     @include navIcons;
+    width: 100%;
+    svg {
+      width: 36px;
+      height: auto;
+    }
   }
   .button, button, a {
     background: transparent;
-    height: auto;
     border: 0;
     color: $white;
     fill: $white;
@@ -66,16 +74,9 @@
     text-decoration: none;
     border-top: 1px solid transparent;
     border-bottom: 1px solid $darkgrey;
-    a {
-      margin-bottom: 5px;
-    }
-    span {
-      margin: 1em 0 0 0;
-      display: block;
-      font-size: .9em;
-      font-weight: 400;
-      line-height: 1rem;
-    }
+    font-weight: normal;
+    font-size: .9em;
+    line-height: 1.2;
     &:hover {
       background: $white;
       fill: $black;
diff --git a/app/common/styles/directives/confirm.scss b/app/common/styles/directives/confirm.scss
deleted file mode 100644
index e69de29..0000000
--- a/app/common/styles/directives/confirm.scss
+++ /dev/null
diff --git a/app/common/styles/directives/index.scss b/app/common/styles/directives/index.scss
index a70c007..5d9de6f 100644
--- a/app/common/styles/directives/index.scss
+++ b/app/common/styles/directives/index.scss
@@ -1,3 +1 @@
-@import "./app-header.scss";
-@import "./app-navigation.scss";
-@import "./confirm.scss";
\ No newline at end of file
+@import "./app-navigation.scss";
\ No newline at end of file
diff --git a/app/common/styles/elements/export.scss b/app/common/styles/elements/export.scss
deleted file mode 100644
index 545e3f3..0000000
--- a/app/common/styles/elements/export.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-//Export button
-.btn-export {
-  color: $black;
-  font-size: .9em;
-  font-weight: 700;
-  position: relative;
-  padding: 0 0 0 2em;
-  margin-right: .6em;
-  text-decoration: none;
-  margin-top: 0;
-  &:hover {
-    text-decoration: underline;
-  }
-}
-.btn-export:before {
-  content: '\21E5';
-  position: absolute;
-  font-size: 1.7em;
-  vertical-align: middle;
-  transform: rotate(90deg);
-  display: inline-block;
-  left: 2px;
-  top: -7px;
-}
\ No newline at end of file
diff --git a/app/common/styles/elements/index.scss b/app/common/styles/elements/index.scss
index 25162bb..c8bbfce 100644
--- a/app/common/styles/elements/index.scss
+++ b/app/common/styles/elements/index.scss
@@ -8,7 +8,6 @@
 @import "content-search";
 @import "paginate";
 @import "tags";
-@import "export";
 @import "modals";
 @import "quicklinks";
 @import "toast";
diff --git a/app/common/styles/elements/inline-confirm.scss b/app/common/styles/elements/inline-confirm.scss
index c65e5de..873e66e 100644
--- a/app/common/styles/elements/inline-confirm.scss
+++ b/app/common/styles/elements/inline-confirm.scss
@@ -26,7 +26,6 @@
     border: 2px solid $white;
     padding: 1em 2.2em;
     margin: 0 10px;
-    border-radius: 4px;
     &:focus,
     &.default {
       background: $primebtn__bg;
diff --git a/app/common/styles/elements/toggle-filter.scss b/app/common/styles/elements/toggle-filter.scss
index ebdcf91..94c94d1 100644
--- a/app/common/styles/elements/toggle-filter.scss
+++ b/app/common/styles/elements/toggle-filter.scss
@@ -14,13 +14,12 @@
   }
   margin-right: 2em;
   margin-bottom: 1em;
-  button {
-    margin: 3px -3px;
-    padding: .6em 2em;
-    font-size: .9em;
-    font-weight: 700;
-    border-radius: 0;
-    display: inline-block;
+  .btn {
+    float:left;
+    width: 100px;
+    &:not(:first-of-type) {
+      border-left-width: 1px;
+    }
   }
   .btn-primary {
     border: 2px solid $primebtn__bg;
diff --git a/app/common/styles/layout/header.scss b/app/common/styles/layout/header.scss
index 56460c6..034c49e 100644
--- a/app/common/styles/layout/header.scss
+++ b/app/common/styles/layout/header.scss
@@ -79,9 +79,6 @@
   }
   .logo__wrapper {
     padding-top: .5em;
-    //position: absolute;
-    //top: 50%;
-    //transform: translateY(-50%);
   }
 
   .header__logo {
@@ -128,7 +125,7 @@
         display: block;
         font-size: 1rem;
         font-weight: bold;
-        margin-top: .3em;
+        margin-top: .5em;
       }
     }
   }
@@ -211,26 +208,23 @@
     }
   }
   .header__page-refresh {
-    padding: 0 0.5rem 0.6rem;
-    position: relative;
+    padding-top: 1em;
     span {
       font-size: 0.875em;
       font-weight: 400;
       color: $darkgrey;
       display: block;
-      margin-bottom: 1.1em;
+      margin-bottom: .2em;
+    }
+    .icon {
+      display: block;
+      margin-left: auto;
+      margin-right: auto;
     }
     svg {
-      stroke: $medblue;
-      fill: $medblue;
-      height: 20px;
-      width: 20px;
-      display: block;
-      margin: 0 auto;
-      position: absolute;
-      left: 50%;
-      top: 55%;
-      transform: translateX(-50%);
+      width: 25px;
+      height: auto;
+      fill: $color--blue-40;
     }
   }
 }