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);
-}