diff --git a/app/common/styles/components/form-elements.scss b/app/common/styles/components/form-elements.scss
index 8b26339..61ca4d3 100644
--- a/app/common/styles/components/form-elements.scss
+++ b/app/common/styles/components/form-elements.scss
@@ -6,7 +6,7 @@
   padding-left: .5em;
   padding-right: 1.5em;
   margin-top: 0;
-  border: 1px solid $input-border;
+  border: 1px solid $border-color-02;
   min-width: 70px;
   font-weight: 400;
   @include bgImage__arrowDown-primary;
@@ -25,12 +25,12 @@
   z-index: 100;
   right: 0;
   top: 100%;
-  background: $white;
+  background: $primary-light;
   padding: 0;
   width: 100%;
-  border: 1px solid $lightbg__grey;
+  border: 1px solid $border-color-02;
   margin-top: -5px;
-  box-shadow: 0 4px 10px -2px $darkgrey;
+  box-shadow: 0 4px 10px -2px $base-02--02;
   li {
     list-style-type: none;
   }
@@ -40,7 +40,7 @@
     width: 100%;
     font-weight: 400;
     &:hover {
-      background: $dropdown__focus-bg;
+      background: $background-02;
     }
   }
 }
@@ -57,7 +57,7 @@
       display: inline-block;
       top: 50%;
       left: .6em;
-      color: $lightbg__primary;
+      color: $primary-accent;
       transform: translateY(-50%);
     }
   }
@@ -71,7 +71,7 @@
   }
   input {
     max-width: 170px;
-    color: $darkgrey;
+    color: $text-01;
   }
 }
 
@@ -101,35 +101,34 @@
   left: 0;
   width: 20px;
   height: 20px;
-  background: $white;
-  border: 1px solid $lightbg__grey;
+  background: $primary-light;
+  border: 1px solid $border-color-02;
   font-size: 0;
 }
 
 /* Hover and focus states */
 .control-check:hover input ~ .control__indicator,
 .control-check input:focus ~ .control__indicator {
-  border: 1px solid $primebtn__bg;
-  background-color: $primebtn__bg;
+  border: 1px solid $primary-accent;
+  background-color: $primary-accent;
 }
 
 /* Checked state */
 .control-check input:checked ~ .control__indicator {
-  background: $primebtn__bg;
-
+  background: $primary-accent;
 }
 
 /* Hover state whilst checked */
 .control-check:hover input:not([disabled]):checked ~ .control__indicator {
-  background: $primebtn__bg;
+  background: $primary-accent;
 }
 
 /* Disabled state */
 .control-check input:disabled ~ .control__indicator {
   pointer-events: none;
   opacity: .6;
-  background: #ccc;
-  border: 1px solid $white;
+  background: $base-02--04;
+  border: 1px solid $primary-light;
 }
 
 .control-check:hover > input:disabled ~ .control__indicator {
@@ -156,14 +155,14 @@
   width: 5px;
   height: 10px;
   transform: rotate(45deg);
-  border: solid $white;
+  border: solid $primary-light;
   border-width: 0 2px 2px 0;
 }
 
 /* Disabled tick colour */
 .control-check input:disabled ~ .control__indicator:after {
-  border-color: $white;
-  color: $white;
+  border-color: $primary-light;
+  color: $primary-light;
 }
 
 // Radio Buttons
@@ -179,8 +178,8 @@
   left: 0;
   width: 30px;
   height: 30px;
-  background: $white;
-  border: 2px solid $darkgrey;
+  background: $primary-light;
+  border: 2px solid $border-color-02;
 }
 .control-radio input{
   position: absolute;
@@ -194,22 +193,22 @@
 
 /* Hover and focus states */
 .control-radio input:focus ~ .control__indicator {
-  background: $primebtn__bg;
-  outline: 1px solid $primebtn__bg;
+  background: $primary-accent;
+  outline: 1px solid $primary-accent;
   outline-offset: 3px;
 }
 
 .control-radio input:checked ~ .control__indicator {
-  background: $lightbg__accent;
-  border: 2px solid $primebtn__bg;
+  background: $background-02;
+  border: 2px solid $primary-accent;
 }
 
 /* Disabled state */
 .control-radio input:disabled ~ .control__indicator{
   pointer-events: none;
   opacity: .6;
-  background: #ccc;
-  border: 1px solid $medgrey;
+  background: $base-02--04;
+  border: 1px solid $border-color-01;
 }
 
 .control-radio:hover > input:disabled ~ .control__indicator{
@@ -234,8 +233,8 @@
 
 /* Disabled tick colour */
 .control-radio input:disabled ~ .control__indicator:after{
-  border-color: $white;
-  color: $white;
+  border-color: $primary-light;
+  color: $primary-light;
 }
 
 /* Radio button inner circle */
@@ -245,7 +244,7 @@
   width: 18px;
   height: 18px;
   border-radius: 50%;
-  background: $primebtn__bg;
+  background: $primary-accent;
 }
 
 .control-radio:hover .control__indicator:after {
@@ -254,7 +253,7 @@
 
 /* Disabled circle colour */
 .control-radio input:disabled ~ .control__indicator:after {
-  background: #7b7b7b;
+  background: $base-02--03;
   width: 20px;
   height: 20px;
 }
\ No newline at end of file
diff --git a/app/common/styles/components/table.scss b/app/common/styles/components/table.scss
index c26ba59..67dc0be 100644
--- a/app/common/styles/components/table.scss
+++ b/app/common/styles/components/table.scss
@@ -2,11 +2,11 @@
 // Table Header
 .table-header {
   width: 100%;
-  color: $black;
+  color: $primary-dark;
   line-height: 30px;
   padding: .8em 0 0;
   margin-bottom: .8em;
-  border-bottom: 1px solid $medgrey;
+  border-bottom: 1px solid $border-color-01;
   font-size: 1.25em;
   @include mediaQuery(medium) {
     margin: 1.8em 0;
@@ -30,8 +30,8 @@
   font-weight: 400;
   position: relative;
   &.disabled {
-    background-color: $disabled-row;
-    color: $disabled-row-txt;
+    background-color: $background-03;
+    color: $text-02;
   }
 }
 
@@ -41,9 +41,9 @@
   left: 0;
   width: 100%;
   height:100%;
-  background: $darkbg__primary;
+  background: $background-04;
   z-index:200;
-  color: $white;
+  color: $primary-light;
   padding: .8em 1em;
   text-align: center;
   font-size: 1.5em;
@@ -57,7 +57,7 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  border-bottom: 1px solid $medgrey;
+  border-bottom: 1px solid $border-color-01;
   @include mediaQuery(small) {
     flex: 1;
   }
@@ -84,9 +84,9 @@
   .table__row {
     display: none;
     font-weight: 700;
-    border-bottom: 1px solid $medgrey;
-    background-color: $darkbg__primary;
-    color: $white;
+    border-bottom: 1px solid $border-color-01;
+    background-color: $background-05;
+    color: $primary-light;
 
     @include mediaQuery(small) {
       display: flex;
@@ -104,7 +104,7 @@
 }
 
 .table__row-uploading {
-  color: $darkgrey;
+  color: $text-02;
   font-weight: 700;
   @include indeterminate-bar;
 }
@@ -119,7 +119,7 @@
 //sortable heading
 .sort-heading {
   position: relative;
-  color: $lightblue;
+  color: $text-03;
   &::after {
     content: '\025be';
     position: absolute;
@@ -137,12 +137,12 @@
   }
   &.sort-up {
     &::before {
-      color: $darkbg__accent;
+      color: $primary-accent;
     }
   }
   &.sort-down {
     &::after {
-      color: $darkbg__accent;
+      color: $primary-accent;
     }
   }
 }