diff --git a/app/common/directives/app-header.html b/app/common/directives/app-header.html
index 050ac05..a9c41b4 100644
--- a/app/common/directives/app-header.html
+++ b/app/common/directives/app-header.html
@@ -20,9 +20,7 @@
       </p>
       <button class="header__page-refresh" ng-click="refresh()" aria-label="refresh page data">
         <span>Refresh</span>
-        <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52.18 51.91">
-          <path class="cls-1" d="M38,20.77H52v-14H48.3v6.07A26,26,0,1,0,48.7,38H44.32a22.14,22.14,0,1,1,1.8-20.92H38v3.67Z" transform="translate(0.16 0.14)"/>
-        </svg>
+        <icon file="icon-restart.svg"></icon>
       </button>
     </div>
   </div>
diff --git a/app/common/directives/app-navigation.html b/app/common/directives/app-navigation.html
index 379aa3d..6bd2c79 100644
--- a/app/common/directives/app-navigation.html
+++ b/app/common/directives/app-navigation.html
@@ -2,20 +2,16 @@
   <ul id="nav__top-level" ng-style="navStyle">
     <li>
       <a class="btn-overview" ng-class="{opened: firstLevel == 'overview'}" href="#/overview/server" ng-click="change('overview')">
-        <span>
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" class="nav-icon"><path d="M23.9 18.2l3.3 3.3 1.1-1.1-4.4-4.4-7.8 7.8-3.3-3.3-1.1 1.1 4.4 4.4 7.8-7.8z"/><path d="M5 8v24h30V8H5zm28 22H7V12h26v18z"/></svg>
-          Server overview
-        </span>
+        <icon class="nav-icon" file="icon-overview.svg"></icon>
+        Server overview
       </a>
     </li>
     <li>
       <button class="btn-health"
-        ng-class="{opened: firstLevel == 'server-health'}"
-        ng-click="change('server-health')">
-        <span>
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" class="nav-icon"><path class="st0" d="M32 12.9V16H8V8h19M8 16h24v8H8zM8 24h24v8H8zM19 12h8M11 12h2M19 20h8M11 20h2M19 28h8M11 28h2"/><path d="M36.4 4l1.1 1.1-5.1 5.1-2.9-2.8 1.2-1.2L32.4 8z"/></svg>
-          Server health
-        </span>
+      ng-class="{opened: firstLevel == 'server-health'}"
+      ng-click="change('server-health')">
+        <icon class="nav-icon" file="icon-health.svg"></icon>
+        Server health
       </button>
       <ul class="nav__second-level btn-health"
         ng-style="navStyle"
@@ -40,10 +36,8 @@
     </li>
     <li>
       <button class="btn-control" ng-class="{opened: firstLevel == 'server-control'}" ng-click="change('server-control')">
-        <span>
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" class="nav-icon"><path class="st0" d="M8 12h24M8 20h24M8 28h24"/><path class="st1" d="M24 28h4M18 20h4M12 12h4"/></svg>
-          Server control
-        </span>
+        <icon class="nav-icon" file="icon-control.svg"></icon>
+        Server control
       </button>
       <ul class="nav__second-level btn-control"
         ng-style="navStyle"
@@ -80,10 +74,8 @@
     </li>
     <li>
       <button class="btn-config" ng-class="{opened: firstLevel == 'configuration'}" ng-click="change('configuration')">
-        <span>
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" class="nav-icon"><path d="M31.5 20c0-.6-.1-1.2-.2-1.8L35 15l-3.1-5.1-4.4 1.4c-1.1-.9-2.3-1.6-3.6-2.1L23 5h-6l-1 4.2c-1.3.5-2.5 1.2-3.6 2.1L8.1 9.9 5 15l3.7 3.2c-.1.6-.2 1.2-.2 1.8 0 .6.1 1.2.2 1.8L5 25l3.1 5.1 4.4-1.4c1.1.9 2.3 1.6 3.6 2.1l1 4.2h6l1-4.2c1.3-.5 2.5-1.2 3.6-2.1l4.4 1.4L35 25l-3.7-3.2c.1-.6.2-1.2.2-1.8zm.9 5.4L31 27.7l-2.9-.9-1.1-.4-.9.7c-.9.8-1.9 1.3-2.9 1.7l-1 .4-.2 1.1-.6 2.7h-2.8l-.6-2.7-.2-1.1-1-.4c-1.1-.4-2.1-1-2.9-1.7l-.9-.7-1.1.4-2.9.9-1.4-2.3 2.4-2.1.8-.7-.2-1.1c-.1-.5-.1-1-.1-1.5 0-.4 0-.9.1-1.5l.2-1.1-.8-.7-2.4-2.1L9 12.3l2.9.9 1.1.4.9-.7c.9-.8 1.9-1.3 2.9-1.7l1-.4.2-1.1.6-2.7h2.8l.6 2.7.2 1.1 1 .4c1.1.4 2.1 1 2.9 1.7l.9.7 1.1-.4 2.9-.9 1.4 2.3-2.4 2.1-.8.7.2 1.1c.1.6.1 1 .1 1.5s0 .9-.1 1.5l-.2 1.1.8.7 2.4 2.1z"/><path d="M20 15c-2.8 0-5 2.2-5 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 8c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3z"/></svg>
-          Server configuration
-        </span>
+        <icon class="nav-icon" file="icon-config.svg"></icon>
+        Server configuration
       </button>
       <ul class="nav__second-level btn-firmware"
         ng-style="navStyle"
@@ -108,10 +100,8 @@
     </li>
     <li>
       <button class="btn-users" ng-class="{opened: firstLevel == 'users'}" ng-click="change('users')">
-        <span>
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="nav-icon"><path d="M16 21c5.523 0 10-4.477 10-10S21.523 1 16 1 6 5.477 6 11s4.477 10 10 10zm0-18c4.411 0 8 3.589 8 8s-3.589 8-8 8-8-3.589-8-8 3.589-8 8-8zm8 20H8a4 4 0 0 0-4 4v4h24v-4a4 4 0 0 0-4-4z"/></svg>
-          Users
-        </span>
+        <icon class="nav-icon" file="icon-user.svg"></icon>
+        Users
       </button>
       <ul class="nav__second-level btn-users"
         ng-style="navStyle"
diff --git a/app/common/directives/confirm.html b/app/common/directives/confirm.html
index a38cf60..3faf2a4 100644
--- a/app/common/directives/confirm.html
+++ b/app/common/directives/confirm.html
@@ -1,10 +1,10 @@
 <div class="inline__confirm" ng-class="{active: confirm}">
     <div class="inline__confirm-message">
-        <p class="h3"><i></i>Are you sure you want to <strong>{{title}}?</strong></p>
+        <p class="h3">Are you sure you want to <strong>{{title}}?</strong></p>
         <p>{{message}}</p>
     </div>
     <div class="inline__confirm-buttons">
-        <button class="btn-primary" ng-click="accept()">Yes</button>
-        <button class="btn-primary" ng-click="cancel()">No</button>
+        <button class="btn  btn-primary" ng-click="accept()">Yes</button>
+        <button class="btn  btn-primary" ng-click="cancel()">No</button>
     </div>
 </div>
\ No newline at end of file
diff --git a/app/common/directives/firmware-list.html b/app/common/directives/firmware-list.html
index 1227a20..4ebf117 100644
--- a/app/common/directives/firmware-list.html
+++ b/app/common/directives/firmware-list.html
@@ -39,17 +39,11 @@
         </div>
         <div class="table__cell firmware__version" ng-class="{'active':firmware.isExtended}">
           <span class="table__cell-label">Version:</span>{{firmware.Version}}
-          <div class="icon icon__more" ng-click="toggleMoreDropdown($event, firmware)"
+          <button
+              ng-click="toggleMoreDropdown($event, firmware)"
               ng-class="{'active':firmware.isExtended}" ng-show="firmware.isExtended">
-            <svg version="1.1" x="0px" y="0px" viewBox="0 0 24.3 24.6">
-              <path d="M12.1,23C6.1,23,1.3,18.2,1.3,12.3S6.1,1.6,12.1,1.6s10.7,4.8,10.7,10.7S18,23,12.1,23z M12.1,2.6c-5.4,0-9.7,4.4-9.7,9.7 S6.7,22,12.1,22s9.7-4.4,9.7-9.7S17.4,2.6,12.1,2.6z"/>
-              <g>
-                <circle cx="6.7" cy="12.5" r="1.5"/>
-                <circle cx="12.1" cy="12.5" r="1.5"/>
-                <circle cx="17.4" cy="12.5" r="1.5"/>
-              </g>
-            </svg>
-          </div>
+              <icon file="icon-more.svg"></icon>
+          </button>
         </div>
         <div class="icon__more-dropdown" ng-show="firmware.extended.show" click-outside="firmware.extended.show=false;">
           <h5 class="bold">Extended version information</h5>
diff --git a/app/common/directives/icon-provider.js b/app/common/directives/icon-provider.js
new file mode 100644
index 0000000..5554fdd
--- /dev/null
+++ b/app/common/directives/icon-provider.js
@@ -0,0 +1,28 @@
+/**
+ * Directive to inline an svg icon
+ *
+ * To use–add an <icon> directive with a file attribute with
+ * a value that corresponds to the desired svg file to inline
+ * from the icons directory.
+ *
+ * Example: <icon file="icon-export.svg"></icon>
+ *
+ */
+window.angular && ((angular) => {
+  'use-strict';
+
+  angular.module('app.common.directives').directive('icon', () => {
+    return {
+      restrict: 'E', link: (scope, element, attrs) => {
+        const file = attrs.file;
+        if (file === undefined) {
+          console.log('File name not provided for <icon> directive.')
+          return;
+        }
+        const svg = require(`../../assets/icons/${file}`);
+        element.html(svg);
+        element.addClass('icon');
+      }
+    }
+  })
+})(window.angular);
\ No newline at end of file
diff --git a/app/common/directives/log-event.html b/app/common/directives/log-event.html
index 5a183ed..e89ce50 100644
--- a/app/common/directives/log-event.html
+++ b/app/common/directives/log-event.html
@@ -41,20 +41,20 @@
         </div>
         <div>
           <div class="event__actions">
-            <button class="btn-meta-copy" clipboard text="copyText(event)" on-copied="copySuccess(event)" on-error="copyfailed(err)">
-              <img class="event__icon" src="../../assets/images/icon-copy.svg" alt=""/><span ng-if="!event.copied">Copy</span><span ng-if="event.copied">Copied</span>
+            <button class="btn  btn-tertiary" clipboard text="copyText(event)" on-copied="copySuccess(event)" on-error="copyfailed(err)">
+              <icon file="icon-copy.svg"></icon>
+              <span ng-if="!event.copied">Copy</span>
+              <span ng-if="event.copied">Copied</span>
             </button>
             <button
-              class="btn-delete"
+              class="btn  btn-tertiary"
               ng-class="{'disabled': multiSelected}"
               ng-click="event.confirm= ! event.confirm"
               ng-disabled="multiSelected">
-                <img
-                  class="event__icon"
-                  src="../../assets/images/icon-trashcan.svg"
-                  alt=""/>Delete
+                <icon file="icon-trashcan.svg"></icon>Delete
             </button>
-            <button class="btn-resolve" ng-class="{'disabled': (event.Resolved == 1 || multiSelected)}" ng-click="resolveEvent(event)" ng-disabled="event.Resolved == 1 || multiSelected"><img class="event__icon" src="../../assets/images/icon-check.svg" alt=""/>Mark as resolved</button>
+            <button class="btn  btn-tertiary" ng-class="{'disabled': (event.Resolved == 1 || multiSelected)}" ng-click="resolveEvent(event)" ng-disabled="event.Resolved == 1 || multiSelected">
+              <icon file="icon-check.svg"></icon>Mark as resolved
           </div>
           <div class="event__related" ng-show="event.related_items.length">
             <p class="inline event__related-label">Related items:</p>
diff --git a/app/common/directives/log-filter.html b/app/common/directives/log-filter.html
index b84618e..d3c392f 100644
--- a/app/common/directives/log-filter.html
+++ b/app/common/directives/log-filter.html
@@ -1,16 +1,16 @@
 <section id="event-filter" class="row column" aria-label="event log filtering">
     <div class="inline event__severity-filter">
         <p class="filter-label">Filter by severity</p>
-        <button class="inline first" ng-click="toggleSeverityAll()"
+        <button class="btn" ng-click="toggleSeverityAll()"
                 ng-class="selectedSeverity.all ? 'btn-primary' : 'btn-secondary'">All
         </button>
-        <button class="inline " ng-click="toggleSeverity('high')"
+        <button class="btn" ng-click="toggleSeverity('high')"
                 ng-class="selectedSeverity.high ? 'btn-primary' : 'btn-secondary'">High
         </button>
-        <button class="inline" ng-click="toggleSeverity('medium')"
+        <button class="btn" ng-click="toggleSeverity('medium')"
                 ng-class="selectedSeverity.medium ? 'btn-primary' : 'btn-secondary'">Medium
         </button>
-        <button class="inline last" ng-click="toggleSeverity('low')"
+        <button class="btn" ng-click="toggleSeverity('low')"
                 ng-class="selectedSeverity.low ? 'btn-primary' : 'btn-secondary'">Low
         </button>
     </div>
diff --git a/app/common/directives/serial-console.html b/app/common/directives/serial-console.html
index cf451aa..68e8304 100644
--- a/app/common/directives/serial-console.html
+++ b/app/common/directives/serial-console.html
@@ -1,6 +1,8 @@
 <div class="serial-lan__wrapper">
   <div id="terminal"></div>
-  <div class="serial-lan__actions">
-    <button class="inline btn-pop-out" ng-click="openTerminalWindow()" ng-show="showTabBtn === true">Open in new tab</button>
+  <div class="serial-lan__actions float-right">
+    <button class="btn  btn-tertiary" ng-click="openTerminalWindow()" ng-show="showTabBtn === true">
+      <icon file="icon-launch.svg"></icon>Open in new tab
+    </button>
   </div>
 </div>
\ No newline at end of file
diff --git a/app/common/directives/syslog-filter.html b/app/common/directives/syslog-filter.html
index f24311e..46f178a 100644
--- a/app/common/directives/syslog-filter.html
+++ b/app/common/directives/syslog-filter.html
@@ -1,7 +1,7 @@
 <section id="sys-log-filter" class="row column" aria-label="system log filtering">
     <div class="inline sys-log__severity-filter">
         <p class="filter-label">Filter by severity</p>
-        <button ng-repeat="severity in severityList" class="inline " ng-click="toggleSeverity(severity)"
+        <button ng-repeat="severity in severityList" class="btn" ng-click="toggleSeverity(severity)"
                 ng-class="((selectedSeverityList.indexOf(severity) > -1) || ((severity == 'All') && (selectedSeverityList.length == 0))) ? 'btn-primary' : 'btn-secondary'">{{severity}}
         </button>
     </div>
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;
     }
   }
 }