diff --git a/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.scss b/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.scss
index b5de9680c..1f1e8b80c 100644
--- a/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.scss
+++ b/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.scss
@@ -8,12 +8,12 @@
     border: none;
     outline: none;
     color: var(--iqser-text);
-    background-color: var(--iqser-background);
+    background-color: transparent;
 }
 
 .highlight {
     border-radius: 4px;
-    background-color: var(--iqser-grey-2);
+    background-color: var(--iqser-side-nav);
 }
 
 .wrapper {
diff --git a/apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen/notifications-screen.component.scss b/apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen/notifications-screen.component.scss
index 5bfd95db4..9f7f3fbe9 100644
--- a/apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen/notifications-screen.component.scss
+++ b/apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen/notifications-screen.component.scss
@@ -16,7 +16,7 @@
 
         .statement {
             opacity: 0.7;
-            color: var(--iqser-grey-1);
+            color: var(--iqser-text);
             font-weight: 500;
             padding: 10px 0;
         }
@@ -40,7 +40,7 @@
             padding: 10px 0;
 
             .group-title {
-                color: var(--iqser-grey-1);
+                color: var(--iqser-text);
                 font-weight: 600;
             }
 
diff --git a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html
index 50380cbea..25e652fcc 100644
--- a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html
@@ -102,8 +102,8 @@
             {{ log.message }}
         </div>
 
-        <div class="small-label cell">
-            {{ log.recordDate | date: 'd MMM yyyy, hh:mm a' }}
+        <div class="cell">
+            <span class="small-label">{{ log.recordDate | date: 'd MMM yyyy, hh:mm a' }}</span>
         </div>
 
         <div class="user-column cell">
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html
index 166bf5f5e..1340ee764 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html
@@ -77,12 +77,12 @@
             {{ attribute.label }}
         </div>
 
-        <div class="cell small-label">
-            {{ attribute.placeholder }}
+        <div class="cell">
+            <span class="small-label">{{ attribute.placeholder }}</span>
         </div>
 
-        <div class="cell small-label">
-            {{ translations[attribute.type] | translate }}
+        <div class="cell">
+            <span class="small-label">{{ translations[attribute.type] | translate }}</span>
         </div>
 
         <div class="cell">
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.html
index 8fc488463..7b1e32582 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.html
@@ -70,12 +70,12 @@
             </div>
         </div>
 
-        <div class="cell small-label">
-            <span>{{ state.rank }}</span>
+        <div class="cell">
+            <span class="small-label">{{ state.rank }}</span>
         </div>
 
-        <div class="cell small-label">
-            <span>{{ state.dossierCount }}</span>
+        <div class="cell">
+            <span class="small-label">{{ state.dossierCount }}</span>
         </div>
 
         <div class="cell">
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.scss
index 1c40bf617..8e05e5883 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.scss
@@ -9,7 +9,7 @@
     font-size: 16px;
     font-weight: 600;
     line-height: 20px;
-    color: var(--iqser-grey-1);
+    color: var(--iqser-text);
 }
 
 .right-container {
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
index 355f56117..c592ddb1a 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
@@ -96,7 +96,9 @@
             <span>{{ attribute.label }}</span>
         </div>
 
-        <div [translate]="translations[attribute.type]" class="small-label cell"></div>
+        <div class="cell">
+            <span [translate]="translations[attribute.type]" class="small-label"></span>
+        </div>
 
         <div class="center read-only cell">
             <mat-icon
@@ -107,8 +109,8 @@
             ></mat-icon>
         </div>
 
-        <div class="small-label cell">
-            {{ attribute.csvColumnHeader }}
+        <div class="cell">
+            <span class="small-label">{{ attribute.csvColumnHeader }}</span>
         </div>
 
         <div class="center cell">
diff --git a/apps/red-ui/src/app/modules/admin/screens/license/combo-chart/combo-chart.component.scss b/apps/red-ui/src/app/modules/admin/screens/license/combo-chart/combo-chart.component.scss
index 7ee754487..c2ef9aba1 100644
--- a/apps/red-ui/src/app/modules/admin/screens/license/combo-chart/combo-chart.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/license/combo-chart/combo-chart.component.scss
@@ -66,7 +66,7 @@
     }
 
     .tooltip-anchor {
-        fill: rgb(0, 0, 0);
+        fill: var(--iqser-text);
     }
 
     .gridline-path {
@@ -86,4 +86,18 @@
             }
         }
     }
+
+    fill: var(--iqser-text);
+}
+
+.chart-legend .legend-labels {
+    background: var(--iqser-alt-background) !important;
+
+    .legend-label .legend-label-text {
+        color: var(--iqser-text) !important;
+
+        &:hover {
+            color: rgba(var(--iqser-text-rgb), 0.8) !important;
+        }
+    }
 }
diff --git a/apps/red-ui/src/app/modules/admin/screens/license/license-screen/license-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/license/license-screen/license-screen.component.scss
index 5302874b3..9912f1c10 100644
--- a/apps/red-ui/src/app/modules/admin/screens/license/license-screen/license-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/license/license-screen/license-screen.component.scss
@@ -27,7 +27,7 @@
 
             &:hover {
                 > div {
-                    background-color: var(--iqser-grey-2);
+                    background-color: var(--iqser-alt-background);
                 }
             }
         }
diff --git a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
index 2ad031f25..fa2b709a3 100644
--- a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
@@ -74,7 +74,9 @@
             <redaction-initials-avatar [showYou]="true" [user]="user" [withName]="true"></redaction-initials-avatar>
         </div>
 
-        <div class="small-label cell">{{ user.email || '-' }}</div>
+        <div class="cell">
+            <span class="small-label">{{ user.email || '-' }}</span>
+        </div>
 
         <div class="center cell">
             <mat-slide-toggle
@@ -85,7 +87,9 @@
             ></mat-slide-toggle>
         </div>
 
-        <div class="small-label cell">{{ getDisplayRoles(user) }}</div>
+        <div class="cell">
+            <span class="small-label">{{ getDisplayRoles(user) }}</span>
+        </div>
 
         <div class="cell">
             <div class="action-buttons">
diff --git a/apps/red-ui/src/app/modules/archive/components/table-item/table-item.component.html b/apps/red-ui/src/app/modules/archive/components/table-item/table-item.component.html
index d94dbc95f..ee66ff76b 100644
--- a/apps/red-ui/src/app/modules/archive/components/table-item/table-item.component.html
+++ b/apps/red-ui/src/app/modules/archive/components/table-item/table-item.component.html
@@ -2,7 +2,9 @@
     <redaction-dossier-name-column [dossierStats]="stats$ | async" [dossier]="dossier"></redaction-dossier-name-column>
 </div>
 
-<div class="cell small-label">{{ dossier.archivedTime | date: 'd MMM yyyy' }}</div>
+<div class="cell">
+    <span class="small-label">{{ dossier.archivedTime | date: 'd MMM yyyy' }}</span>
+</div>
 
 <div class="cell user-column">
     <redaction-initials-avatar [user]="dossier.ownerId" [withName]="true"></redaction-initials-avatar>
diff --git a/apps/red-ui/src/app/modules/dashboard/components/template-stats/template-stats.component.scss b/apps/red-ui/src/app/modules/dashboard/components/template-stats/template-stats.component.scss
index 4160bf43b..e544be4f2 100644
--- a/apps/red-ui/src/app/modules/dashboard/components/template-stats/template-stats.component.scss
+++ b/apps/red-ui/src/app/modules/dashboard/components/template-stats/template-stats.component.scss
@@ -17,7 +17,7 @@
 
     &:not(.empty) {
         &:hover {
-            background-color: var(--iqser-grey-2);
+            background-color: var(--iqser-side-nav);
 
             .heading {
                 text-decoration: underline;
diff --git a/apps/red-ui/src/app/modules/shared-dossiers/components/file-actions/file-actions.component.scss b/apps/red-ui/src/app/modules/shared-dossiers/components/file-actions/file-actions.component.scss
index 593f3c7ae..091142726 100644
--- a/apps/red-ui/src/app/modules/shared-dossiers/components/file-actions/file-actions.component.scss
+++ b/apps/red-ui/src/app/modules/shared-dossiers/components/file-actions/file-actions.component.scss
@@ -1,8 +1,8 @@
-@use 'libs/common-ui/src/assets/styles/common-mixins';
+@use 'common-mixins';
 
 .file-actions {
     display: flex;
-    color: var(--iqser-grey-1);
+    color: var(--iqser-text);
 
     > *:not(:last-child) {
         margin-right: 2px;
diff --git a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.component.html b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.component.html
index c446cf066..a2faa635d 100644
--- a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.component.html
+++ b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.component.html
@@ -24,19 +24,18 @@
         ></redaction-team-members>
     </ng-container>
 
-    <ng-container *ngIf="(selectedReviewers$ | async)?.length">
-        <div class="all-caps-label mt-16" id="reviewersLabel" translate="assign-dossier-owner.dialog.reviewers"></div>
-        <redaction-team-members
-            (remove)="toggleSelected($event)"
-            [canAdd]="false"
-            [canRemove]="hasOwner && !disabled"
-            [dossierId]="dossier.id"
-            [largeSpacing]="true"
-            [memberIds]="selectedReviewers$ | async"
-            [perLine]="13"
-            [unremovableMembers]="[selectedOwnerId]"
-        ></redaction-team-members>
-    </ng-container>
+    <div class="all-caps-label mt-16" id="reviewersLabel" translate="assign-dossier-owner.dialog.reviewers"></div>
+
+    <redaction-team-members
+        (remove)="toggleSelected($event)"
+        [canAdd]="false"
+        [canRemove]="hasOwner && !disabled"
+        [dossierId]="dossier.id"
+        [largeSpacing]="true"
+        [memberIds]="selectedReviewers$ | async"
+        [perLine]="13"
+        [unremovableMembers]="[selectedOwnerId]"
+    ></redaction-team-members>
 
     <ng-container *ngIf="!(selectedReviewers$ | async)?.length">
         <div class="info mt-4">{{ 'assign-dossier-owner.dialog.no-reviewers' | translate }}</div>
diff --git a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.component.scss b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.component.scss
index 0d427a120..51ce0bbb6 100644
--- a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.component.scss
+++ b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.component.scss
@@ -54,7 +54,7 @@ redaction-team-members {
 
         &.selected,
         &:hover {
-            background-color: var(--iqser-grey-2);
+            background-color: var(--iqser-alt-background);
 
             .actions {
                 display: flex;
diff --git a/apps/red-ui/src/app/modules/shared/components/expandable-file-actions/expandable-file-actions.component.scss b/apps/red-ui/src/app/modules/shared/components/expandable-file-actions/expandable-file-actions.component.scss
index 822b7dc96..aec40dc04 100644
--- a/apps/red-ui/src/app/modules/shared/components/expandable-file-actions/expandable-file-actions.component.scss
+++ b/apps/red-ui/src/app/modules/shared/components/expandable-file-actions/expandable-file-actions.component.scss
@@ -18,6 +18,6 @@ mat-slide-toggle {
     }
 
     &[disabled] {
-        color: rgba(var(--iqser-accent-rgb), 0.3);
+        color: rgba(var(--iqser-text-rgb), 0.3);
     }
 }
diff --git a/apps/red-ui/src/app/modules/shared/components/select/select.component.scss b/apps/red-ui/src/app/modules/shared/components/select/select.component.scss
index afcada18e..1897536ec 100644
--- a/apps/red-ui/src/app/modules/shared/components/select/select.component.scss
+++ b/apps/red-ui/src/app/modules/shared/components/select/select.component.scss
@@ -65,13 +65,13 @@ mat-chip {
 }
 
 .mat-chip.mat-standard-chip.mat-chip-selected.mat-primary {
-    background-color: var(--iqser-grey-6);
-    color: var(--iqser-accent);
+    background-color: var(--iqser-btn-bg);
+    color: var(--iqser-text);
 }
 
 .mat-chip.mat-standard-chip {
-    background-color: var(--iqser-white);
-    color: var(--iqser-accent);
+    background-color: var(--iqser-background);
+    color: var(--iqser-text);
     margin: 0 0 2px 0;
     transition: background-color 0.2s;
 
diff --git a/apps/red-ui/src/styles.scss b/apps/red-ui/src/styles.scss
index f08dc7461..f7dffeb7d 100644
--- a/apps/red-ui/src/styles.scss
+++ b/apps/red-ui/src/styles.scss
@@ -34,24 +34,33 @@
     $iqser-helpmode-primary: vars.$green-2,
     $iqser-inputs-border: vars.$grey-5,
     $iqser-popup-background: vars.$white,
-    $iqser-shadow: vars.$grey-4
+    $iqser-shadow: vars.$grey-4,
+    $iqser-toggle-bg: vars.$grey-4,
+    $iqser-file-drop-drag-over: #e2eefd
 );
 
+$light-accent-5: lighten(vars.$accent, 5%);
+$light-accent-10: lighten(vars.$accent, 10%);
+
+$dark-accent-5: darken(vars.$accent, 5%);
+$dark-accent-8: darken(vars.$accent, 8%);
+$dark-accent-10: darken(vars.$accent, 10%);
+
 @include common-variables.configureDark(
     $iqser-primary: vars.$primary,
     $iqser-primary-rgb: common-functions.hexToRgb(vars.$primary),
     $iqser-primary-2: vars.$primary-2,
     $iqser-accent: vars.$accent,
     $iqser-accent-rgb: common-functions.hexToRgb(vars.$accent),
-    $iqser-background: darken(vars.$accent, 10%),
-    $iqser-alt-background: darken(vars.$accent, 5%),
+    $iqser-background: $dark-accent-10,
+    $iqser-alt-background: $dark-accent-5,
     $iqser-text: vars.$white,
     $iqser-text-rgb: common-functions.hexToRgb(vars.$white),
     $iqser-disabled: vars.$grey-7,
-    $iqser-not-disabled-table-item: darken(vars.$accent, 5%),
+    $iqser-not-disabled-table-item: $dark-accent-5,
     $iqser-btn-bg-hover: vars.$accent,
-    $iqser-btn-bg: darken(vars.$accent, 8%),
-    $iqser-side-nav: darken(vars.$accent, 8%),
+    $iqser-btn-bg: $dark-accent-8,
+    $iqser-side-nav: $dark-accent-8,
     $iqser-warn: vars.$warn,
     $iqser-separator: vars.$accent,
     $iqser-grey-2: vars.$grey-2,
@@ -65,7 +74,9 @@
     $iqser-yellow-1: vars.$yellow-1,
     $iqser-yellow-2: vars.$yellow-2,
     $iqser-helpmode-primary: vars.$green-2,
-    $iqser-inputs-border: lighten(vars.$accent, 10%),
-    $iqser-popup-background: darken(vars.$accent, 5%),
-    $iqser-shadow: #00000060
+    $iqser-inputs-border: $light-accent-10,
+    $iqser-popup-background: $dark-accent-5,
+    $iqser-shadow: rgba(0, 0, 0, 0.4),
+    $iqser-toggle-bg: $light-accent-5,
+    $iqser-file-drop-drag-over: $light-accent-10
 );