diff --git a/src/components/Table/MagnifyingGlass.svelte b/src/components/Table/MagnifyingGlass.svelte
index 169c2393..b83a8b00 100644
--- a/src/components/Table/MagnifyingGlass.svelte
+++ b/src/components/Table/MagnifyingGlass.svelte
@@ -7,5 +7,11 @@
 >
   <path
     d="M3.41069 12.0711C2.83695 11.5053 2.38137 10.8311 2.07042 10.0878C1.75947 9.3444 1.59934 8.54666 1.59934 7.74088C1.59934 6.9351 1.75947 6.13735 2.07042 5.39399C2.38137 4.65063 2.83695 3.97647 3.41069 3.41069C3.97647 2.83695 4.65063 2.38137 5.39399 2.07042C6.13735 1.75947 6.9351 1.59934 7.74088 1.59934C8.54666 1.59934 9.3444 1.75947 10.0878 2.07042C10.8311 2.38137 11.5053 2.83695 12.0711 3.41069C12.6448 3.97647 13.1004 4.65063 13.4113 5.39399C13.7223 6.13735 13.8824 6.9351 13.8824 7.74088C13.8824 8.54666 13.7223 9.3444 13.4113 10.0878C13.1004 10.8311 12.6448 11.5053 12.0711 12.0711C11.5053 12.6448 10.8311 13.1004 10.0878 13.4113C9.3444 13.7223 8.54666 13.8824 7.74088 13.8824C6.9351 13.8824 6.13735 13.7223 5.39399 13.4113C4.65063 13.1004 3.97647 12.6448 3.41069 12.0711ZM17.8254 16.6899L13.7454 12.6099C14.9941 11.0703 15.6041 9.11021 15.4497 7.13395C15.2953 5.1577 14.3882 3.3161 12.9156 1.98914C11.4429 0.662179 9.51715 -0.0489011 7.53554 0.00261584C5.55393 0.0541328 3.66769 0.864316 2.266 2.266C0.864316 3.66769 0.0541328 5.55393 0.00261584 7.53554C-0.0489011 9.51715 0.662179 11.4429 1.98914 12.9156C3.3161 14.3882 5.1577 15.2953 7.13395 15.4497C9.11021 15.6041 11.0703 14.9941 12.6099 13.7454L16.6899 17.8254C16.8453 17.9485 17.0405 18.0101 17.2384 17.9986C17.4363 17.9872 17.6231 17.9034 17.7633 17.7633C17.9034 17.6231 17.9872 17.4363 17.9986 17.2384C18.0101 17.0405 17.9485 16.8453 17.8254 16.6899Z"
-    fill="#D0D0D0"></path>
+  ></path>
 </svg>
+
+<style>
+  svg path {
+    fill: var(--theme-colour-text-secondary);
+  }
+</style>
diff --git a/src/components/Table/Pagination.svelte b/src/components/Table/Pagination.svelte
index c48f0a5e..95170d16 100644
--- a/src/components/Table/Pagination.svelte
+++ b/src/components/Table/Pagination.svelte
@@ -76,18 +76,20 @@
     align-items: flex-start;
     margin-top: 1rem;
     button {
-      border: 1px solid $tr-light-grey;
+      border: 1px solid var(--theme-colour-text-secondary, $tr-light-grey);
       border-radius: 50%;
-      background: $white;
-      color: $tr-light-grey;
+      background: var(--theme-color-background);
+      color: var(--theme-colour-text-secondary, $tr-light-grey);
       cursor: pointer;
       width: 35px;
       height: 35px;
       &:disabled {
         cursor: default;
+        color: var(--theme-colour-brand-rules);
+        border-color: var(--theme-colour-brand-rules);
         .icon-wrapper:hover {
-          color: $tr-light-grey;
-          border-color: $tr-light-grey;
+          color: var(--theme-colour-brand-rules);
+          border-color: var(--theme-colour-brand-rules);
         }
       }
       .icon-wrapper {
@@ -96,8 +98,8 @@
         justify-content: center;
         white-space: nowrap;
         &:hover {
-          color: $tr-medium-grey;
-          border-color: $tr-medium-grey;
+          color: var(--theme-colour-text-primary, $tr-medium-grey);
+          border-color: var(--theme-colour-text-primary, $tr-medium-grey);
         }
       }
     }
@@ -110,10 +112,10 @@
       margin: 0 0.5rem;
       .records {
         font-size: 0.8rem;
-        font-family: $font-family-display;
+        font-family: var(--theme-font-family-hed, $font-family-display);
         font-weight: 300;
         margin: 0 1rem;
-        color: $tr-medium-grey;
+        color: var(--theme-colour-text-primary, $tr-medium-grey);
       }
       .progress {
         padding: 0.33rem 0 0 0;
diff --git a/src/components/Table/ProgressBar.svelte b/src/components/Table/ProgressBar.svelte
index 9a312a9f..37a445d4 100644
--- a/src/components/Table/ProgressBar.svelte
+++ b/src/components/Table/ProgressBar.svelte
@@ -20,9 +20,9 @@
     .progress-bar--segment {
       height: 5px;
       width: 30%;
-      background-color: $tr-muted-grey;
+      background-color: var(--theme-colour-brand-rules, $tr-muted-grey);
       &.active {
-        background-color: $tr-medium-grey;
+        background-color: var(--theme-colour-text-primary, $tr-medium-grey);
       }
     }
   }
diff --git a/src/components/Table/Search.svelte b/src/components/Table/Search.svelte
index da41be80..37b16ff3 100644
--- a/src/components/Table/Search.svelte
+++ b/src/components/Table/Search.svelte
@@ -58,14 +58,16 @@
       top: 0.15rem;
       width: 1.5rem;
       height: 1.5rem;
-      fill: $tr-muted-grey;
+      fill: var(--theme-colour-brand-rules, $tr-muted-grey);
     }
     .search--input {
-      font-family: $font-family-display;
+      font-family: var(--theme-font-family-hed, $font-family-display);
+      color: var(--theme-colour-text-primary, $tr-dark-grey);
       padding: 0 0 0 2rem;
       font-size: 0.8rem;
       height: 33px;
-      border: 1px solid $tr-muted-grey;
+      border: 1px solid var(--theme-colour-brand-rules, $tr-muted-grey);
+      background: transparent;
       border-radius: 6px;
       width: 100%;
     }
@@ -75,7 +77,7 @@
       top: 0.15rem;
       width: 1.5rem;
       height: 1.5rem;
-      fill: $tr-dark-grey;
+      fill: var(--theme-colour-text-primary, $tr-medium-grey);
       cursor: pointer;
       &.invisible {
         display: none;
diff --git a/src/components/Table/Select.svelte b/src/components/Table/Select.svelte
index 104d004c..18693ee7 100644
--- a/src/components/Table/Select.svelte
+++ b/src/components/Table/Select.svelte
@@ -44,20 +44,21 @@
 
   .select {
     width: 256px;
-    font-family: $font-family-display;
+    font-family: var(--theme-font-family-hed, $font-family-display);
     label {
       display: block;
       font-size: 0.8rem;
       font-weight: 300;
-      color: $tr-dark-grey;
+      color: var(--theme-colour-text-primary, $tr-dark-grey);
       padding: 0 0 0.125rem 0;
     }
     .select--input {
       position: relative;
       font-size: 0.8rem;
-      font-weight: 500;
+      font-weight: 400;
       height: 33px;
-      border: 1px solid $tr-muted-grey;
+      border: 1px solid var(--theme-colour-brand-rules, $tr-muted-grey);
+      color: var(--theme-colour-text-primary, $tr-dark-grey);
       border-radius: 6px;
       width: 100%;
       padding: 0.5rem;
diff --git a/src/components/Table/SortArrow.svelte b/src/components/Table/SortArrow.svelte
index 1a23961f..d7ff89b4 100644
--- a/src/components/Table/SortArrow.svelte
+++ b/src/components/Table/SortArrow.svelte
@@ -27,9 +27,9 @@
 <style lang="scss">
   @import '../../scss/colours/thematic/tr';
   path {
-    fill: $tr-muted-grey;
+    fill: var(--theme-colour-brand-rules, $tr-muted-grey);
     &.active {
-      fill: $tr-dark-grey;
+      fill: var(--theme-colour-text-primary, $tr-dark-grey);
     }
   }
 </style>
diff --git a/src/components/Table/Table.svelte b/src/components/Table/Table.svelte
index bb4fdab2..59ed1e83 100644
--- a/src/components/Table/Table.svelte
+++ b/src/components/Table/Table.svelte
@@ -358,13 +358,13 @@
       border-spacing: 0;
       width: 100%;
       font-size: 1rem;
-      font-family: $font-family-display;
-      color: $tr-dark-grey;
+      font-family: var(--theme-font-family-hed, $font-family-display);
+      color: var(--theme-colour-text-primary, $tr-dark-grey);
       .table--caption {
         caption-side: top;
         .table--caption--title {
           font-weight: 500;
-          color: $tr-dark-grey;
+          color: var(--theme-colour-text-primary, $tr-dark-grey);
           font-size: 1.33rem;
           padding: 0;
         }
@@ -373,13 +373,15 @@
           font-weight: 300;
           padding: 0;
           line-height: 1.4;
+          color: var(--theme-colour-text-primary);
         }
       }
       thead {
         tr {
-          border-bottom: 1px solid $tr-medium-grey;
+          border-bottom: 1px solid
+            var(--theme-colour-text-primary, $tr-medium-grey);
           th {
-            color: $tr-medium-grey;
+            color: var(--theme-colour-text-primary, $tr-medium-grey);
             font-size: 0.85rem;
             font-weight: 500;
             text-transform: uppercase;
@@ -401,7 +403,8 @@
       }
       tbody {
         tr {
-          border-bottom: 1px solid $tr-muted-grey;
+          border-bottom: 1px solid
+            var(--theme-colour-brand-rules, $tr-muted-grey);
         }
         td {
           font-size: 1rem;
@@ -409,7 +412,7 @@
           padding: 0.5rem 0.25rem 0.5rem 0;
           vertical-align: top;
           &.no-results {
-            color: $tr-muted-grey;
+            color: var(--theme-colour-text-secondary, $tr-muted-grey);
           }
         }
       }
@@ -420,7 +423,7 @@
         }
         td {
           font-weight: 300;
-          color: $tr-dark-grey;
+          color: var(--theme-colour-text-primary, $tr-dark-grey);
           font-size: 0.8rem;
           padding: 0.5rem 0 0 0;
         }
@@ -428,10 +431,14 @@
       &.truncated {
         tbody tr:last-child:not(:first-child) {
           border-bottom: none;
-          mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
+          mask-image: linear-gradient(
+            to bottom,
+            var(--theme-colour-text-primary) 0%,
+            transparent 100%
+          );
           -webkit-mask-image: linear-gradient(
             to bottom,
-            black 0%,
+            var(--theme-colour-text-primary) 0%,
             transparent 100%
           );
         }
@@ -458,14 +465,14 @@
     margin-top: 1rem;
     button {
       font-size: 0.8rem;
-      font-family: $font-family-display;
+      font-family: var(--theme-font-family-hed, $font-family-display);
       font-weight: 500;
       min-width: 175px;
       padding: 0.33rem 0.5rem;
-      border: 1px solid $tr-muted-grey;
+      border: 1px solid var(--theme-colour-brand-rules, $tr-muted-grey);
       border-radius: 4px;
-      background: $white;
-      color: $tr-medium-grey;
+      background: var(--theme-colour-background);
+      color: var(--theme-colour-text-primary, $tr-medium-grey);
       cursor: pointer;
     }
   }
diff --git a/src/components/Table/X.svelte b/src/components/Table/X.svelte
index 2c0e3a7f..6b5a3a70 100644
--- a/src/components/Table/X.svelte
+++ b/src/components/Table/X.svelte
@@ -10,11 +10,12 @@
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M0.300421 0.292131C0.392053 0.199685 0.50109 0.126304 0.621235 0.0762269C0.741381 0.0261493 0.870256 0.000366211 1.00042 0.000366211C1.13059 0.000366211 1.25946 0.0261493 1.37961 0.0762269C1.49975 0.126304 1.60879 0.199685 1.70042 0.292131L7.00082 5.45346L12.3012 0.292131C12.3929 0.199685 12.5019 0.126304 12.622 0.0762269C12.7422 0.0261493 12.8711 0.000366211 13.0012 0.000366211C13.1314 0.000366211 13.2603 0.0261493 13.3804 0.0762269C13.5006 0.126304 13.6096 0.199685 13.7012 0.292131C13.7954 0.378994 13.8706 0.48445 13.922 0.601837C13.9734 0.719225 13.9999 0.845993 13.9998 0.974136C13.9997 1.10228 13.973 1.22901 13.9215 1.34633C13.8699 1.46364 13.7946 1.569 13.7003 1.65573L8.21229 6.99906L13.7003 12.3443C14.0708 12.7064 14.0979 13.2365 13.7796 13.622L13.6994 13.7079C13.6077 13.8003 13.4987 13.8737 13.3785 13.9238C13.2584 13.9738 13.1295 13.9996 12.9994 13.9996C12.8692 13.9996 12.7403 13.9738 12.6202 13.9238C12.5 13.8737 12.391 13.8003 12.2994 13.7079L6.99895 8.54653L1.69855 13.7079C1.60692 13.8003 1.49789 13.8737 1.37774 13.9238C1.25759 13.9738 1.12872 13.9996 0.998554 13.9996C0.86839 13.9996 0.739515 13.9738 0.619369 13.9238C0.499223 13.8737 0.390186 13.8003 0.298554 13.7079C0.204346 13.621 0.129174 13.5155 0.0777863 13.3982C0.0263988 13.2808 -8.74916e-05 13.154 2.17122e-07 13.0259C8.79258e-05 12.8977 0.0267478 12.771 0.0782959 12.6537C0.129844 12.5364 0.20516 12.431 0.299488 12.3443L5.78655 7L0.300421 1.65573C-0.0710458 1.2936 -0.0981124 0.763464 0.220154 0.377998L0.300421 0.292131Z"
-      fill="#404040"></path>
+      fill="var(--theme-colour-text-secondary)"></path>
   </g>
   <defs>
     <clipPath id="clip0_25_237">
-      <rect width="14" height="14" fill="white"></rect>
+      <rect width="14" height="14" fill="var(--theme-colour-background, white)"
+      ></rect>
     </clipPath>
   </defs>
 </svg>