diff --git a/src/assets/icons/help-outline.svg b/src/assets/icons/help-outline.svg
index 2fd05c3..c0271f7 100644
--- a/src/assets/icons/help-outline.svg
+++ b/src/assets/icons/help-outline.svg
@@ -1,10 +1,12 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="Help-Mode" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="01.-Help-button" transform="translate(-1408.000000, -645.000000)" fill="#283241" fill-rule="nonzero">
+<svg height="20px" version="1.1" viewBox="0 0 20 20" width="20px" xmlns="http://www.w3.org/2000/svg"
+>
+    <g fill="none" fill-rule="evenodd" id="Help-Mode" stroke="none" stroke-width="1">
+        <g fill="currentColor" fill-rule="nonzero" id="01.-Help-button" transform="translate(-1408.000000, -645.000000)">
             <g id="help-button" transform="translate(1294.000000, 635.000000)">
                 <g id="help" transform="translate(114.000000, 10.000000)">
-                    <path d="M10,0 C15.5,1.01033361e-15 20,4.5 20,10 C20,15.5 15.5,20 10,20 C4.5,20 3.55271368e-15,15.5 3.55271368e-15,10 C7.10542736e-15,4.5 4.5,-1.01033361e-15 10,0 Z M10,2 C5.6,2 2,5.6 2,10 C2,14.4 5.6,18 10,18 C14.4,18 18,14.4 18,10 C18,5.6 14.4,2 10,2 Z M10.86,12.9 L10.86,14.9 L8.86,14.9 L8.86,12.9 L10.86,12.9 Z M9.86,4.9 C11.56,4.9 12.86,6.2 12.86,7.9 C12.86,8.8 12.36,9.7 11.66,10.3 C11.3830769,10.4846154 10.9357396,10.839645 10.8685571,11.4437415 L10.86,11.6 L10.86,11.9 L8.86,11.9 L8.86,11.6 C8.86,10.5 9.46,9.4 10.46,8.7 C10.76,8.5 10.86,8.2 10.86,7.9 C10.86,7.3 10.46,6.9 9.86,6.9 C9.30285714,6.9 8.91816327,7.24489796 8.86604956,7.77456268 L8.86,7.9 L6.86,7.9 C6.86,6.2 8.16,4.9 9.86,4.9 Z"></path>
+                    <path
+                        d="M10,0 C15.5,1.01033361e-15 20,4.5 20,10 C20,15.5 15.5,20 10,20 C4.5,20 3.55271368e-15,15.5 3.55271368e-15,10 C7.10542736e-15,4.5 4.5,-1.01033361e-15 10,0 Z M10,2 C5.6,2 2,5.6 2,10 C2,14.4 5.6,18 10,18 C14.4,18 18,14.4 18,10 C18,5.6 14.4,2 10,2 Z M10.86,12.9 L10.86,14.9 L8.86,14.9 L8.86,12.9 L10.86,12.9 Z M9.86,4.9 C11.56,4.9 12.86,6.2 12.86,7.9 C12.86,8.8 12.36,9.7 11.66,10.3 C11.3830769,10.4846154 10.9357396,10.839645 10.8685571,11.4437415 L10.86,11.6 L10.86,11.9 L8.86,11.9 L8.86,11.6 C8.86,10.5 9.46,9.4 10.46,8.7 C10.76,8.5 10.86,8.2 10.86,7.9 C10.86,7.3 10.46,6.9 9.86,6.9 C9.30285714,6.9 8.91816327,7.24489796 8.86604956,7.77456268 L8.86,7.9 L6.86,7.9 C6.86,6.2 8.16,4.9 9.86,4.9 Z"></path>
                 </g>
             </g>
         </g>
diff --git a/src/assets/icons/list.svg b/src/assets/icons/list.svg
index ab4457d..2ae2446 100644
--- a/src/assets/icons/list.svg
+++ b/src/assets/icons/list.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg height="14px" version="1.1" viewBox="0 0 14 14" width="14px" xmlns="http://www.w3.org/2000/svg">
     <g fill="none" fill-rule="evenodd" id="Styleguide" stroke="none" stroke-width="1">
-        <g fill="#283241" fill-rule="nonzero" id="Styleguide-Actions" transform="translate(-979.000000, -294.000000)">
+        <g fill="currentColor" fill-rule="nonzero" id="Styleguide-Actions" transform="translate(-979.000000, -294.000000)">
             <g id="list" transform="translate(969.000000, 284.000000)">
                 <g id="list-view" transform="translate(10.000000, 10.000000)">
                     <path
diff --git a/src/assets/icons/sort-asc.svg b/src/assets/icons/sort-asc.svg
index 8121847..2c00b5a 100644
--- a/src/assets/icons/sort-asc.svg
+++ b/src/assets/icons/sort-asc.svg
@@ -2,9 +2,9 @@
 <svg height="14px" version="1.1" viewBox="0 0 6 14" width="6px" xmlns="http://www.w3.org/2000/svg">
     <g fill="none" fill-rule="evenodd" id="Icons" stroke="none" stroke-width="1">
         <g id="Artboard" transform="translate(-1212.000000, -325.000000)">
-            <polygon fill="currentColor" id="Fill-1" points="1215 338 1218 334 1212 334"></polygon>
-            <polygon fill="#28324180" id="Fill-1"
-                     points="1215 330 1218 326 1212 326"
+            <polygon id="Fill-1"
+                     points="1215 338 1218 334 1212 334" style="fill: var(--iqser-primary)"></polygon>
+            <polygon fill="currentColor" id="Fill-1" points="1215 330 1218 326 1212 326"
                      transform="translate(1215.000000, 328.000000) rotate(-180.000000) translate(-1215.000000, -328.000000) "></polygon>
         </g>
     </g>
diff --git a/src/assets/icons/sort-desc.svg b/src/assets/icons/sort-desc.svg
index f9211f8..de28f2b 100644
--- a/src/assets/icons/sort-desc.svg
+++ b/src/assets/icons/sort-desc.svg
@@ -2,9 +2,9 @@
 <svg height="14px" version="1.1" viewBox="0 0 6 14" width="6px" xmlns="http://www.w3.org/2000/svg">
     <g fill="none" fill-rule="evenodd" id="Icons" stroke="none" stroke-width="1">
         <g id="Artboard" transform="translate(-1212.000000, -325.000000)">
-            <polygon fill="#28324180" id="Fill-1" points="1215 338 1218 334 1212 334"></polygon>
-            <polygon fill="currentColor" id="Fill-1"
-                     points="1215 330 1218 326 1212 326"
+            <polygon fill="currentColor" id="Fill-1" points="1215 338 1218 334 1212 334"></polygon>
+            <polygon id="Fill-1" points="1215 330 1218 326 1212 326"
+                     style="fill: var(--iqser-primary)"
                      transform="translate(1215.000000, 328.000000) rotate(-180.000000) translate(-1215.000000, -328.000000) "></polygon>
         </g>
     </g>
diff --git a/src/assets/styles/_common-mixins.scss b/src/assets/styles/_common-mixins.scss
index 7034d9f..9d90ac6 100644
--- a/src/assets/styles/_common-mixins.scss
+++ b/src/assets/styles/_common-mixins.scss
@@ -21,30 +21,34 @@
 }
 
 @mixin scroll-bar {
-    scrollbar-color: var(--iqser-quick-filter-border) var(--iqser-grey-2);
+    scrollbar-color: var(--iqser-inputs-outline) var(--iqser-alt-background);
     scrollbar-width: thin;
 
+    ::-webkit-scrollbar-corner {
+        background: var(--iqser-alt-background);
+    }
+
     &::-webkit-scrollbar {
         width: 11px;
     }
 
     /* Track */
     &::-webkit-scrollbar-track {
-        background: var(--iqser-grey-2);
+        background: var(--iqser-alt-background);
     }
 
     /* Handle */
     &::-webkit-scrollbar-thumb {
-        background: var(--iqser-quick-filter-border);
+        background: var(--iqser-inputs-outline);
     }
 }
 
 @mixin inset-shadow {
-    box-shadow: inset 0 4px 3px -2px var(--iqser-btn-bg-hover);
+    box-shadow: inset 0 4px 3px -2px var(--iqser-shadow);
 }
 
 @mixin drop-shadow {
-    box-shadow: 0 4px 3px 2px var(--iqser-btn-bg-hover);
+    box-shadow: 0 1px 6px 0 var(--iqser-shadow);
 }
 
 @mixin clear-btn {
@@ -59,9 +63,9 @@
 
 @mixin clear-a {
     text-decoration: none;
-    color: initial;
+    color: var(--iqser-text);
 
     &:hover {
-        color: initial;
+        color: var(--iqser-text);
     }
 }
diff --git a/src/assets/styles/_common-variables.scss b/src/assets/styles/_common-variables.scss
index 5f2f1c8..03e7587 100644
--- a/src/assets/styles/_common-variables.scss
+++ b/src/assets/styles/_common-variables.scss
@@ -1,11 +1,13 @@
 @use 'sass:meta';
 
-:root {
+body {
     --iqser-primary: lightblue;
     --iqser-primary-rgb: 220, 230, 234;
     --iqser-primary-2: orange;
     --iqser-accent: blue;
     --iqser-accent-rgb: 123, 234, 111;
+    --iqser-background: white;
+    --iqser-text: black;
     --iqser-disabled: #9398a0;
     --iqser-not-disabled-table-item: #f9fafb;
     --iqser-btn-bg-hover: #e2e4e9;
@@ -15,18 +17,15 @@
     --iqser-black: black;
     --iqser-light: white;
     --iqser-separator: rgba(226, 228, 233, 0.9);
-    --iqser-quick-filter-border: #d3d5da;
-    --iqser-grey-1: #283241;
-    --iqser-grey-2: #f4f5f7;
-    --iqser-grey-3: #aaacb3;
-    --iqser-grey-4: #e2e4e9;
-    --iqser-grey-5: #d3d5da;
-    --iqser-grey-6: #f0f1f4;
-    --iqser-grey-7: #9398a0;
-    --iqser-grey-8: #f9fafb;
-    --iqser-grey-9: #f5f5f7;
-    --iqser-grey-10: #313d4e;
-    --iqser-grey-11: #ecedf0;
+    --iqser-grey-1: #283241; // ebony clay
+    --iqser-grey-10: #313d4e; // oxford blue - manual only
+    --iqser-grey-7: #9398a0; // manatee
+    --iqser-grey-3: #aaacb3; // aluminium
+    --iqser-grey-5: #d3d5da; // iron
+    --iqser-grey-4: #e2e4e9; // athens gray
+    --iqser-grey-6: #f0f1f4; // athens gray
+    --iqser-grey-2: #f4f5f7; // athens gray
+    --iqser-grey-8: #f9fafb; // athens gray
     --iqser-green-1: #00ff00;
     --iqser-green-2: #5ce594;
     --iqser-orange-1: #ff801a;
@@ -44,8 +43,16 @@
     --iqser-helpmode-primary: green;
 }
 
-@mixin configure($args...) {
-    :root {
+@mixin configureLight($args...) {
+    body.light {
+        @each $name, $value in meta.keywords($args) {
+            --#{$name}: #{$value};
+        }
+    }
+}
+
+@mixin configureDark($args...) {
+    body.dark {
         @each $name, $value in meta.keywords($args) {
             --#{$name}: #{$value};
         }
diff --git a/src/assets/styles/common-base-screen.scss b/src/assets/styles/common-base-screen.scss
index ec2c3ef..9922f3d 100644
--- a/src/assets/styles/common-base-screen.scss
+++ b/src/assets/styles/common-base-screen.scss
@@ -8,6 +8,7 @@
     padding: 0 24px;
     border-bottom: 1px solid var(--iqser-separator);
     box-sizing: border-box;
+    background-color: var(--iqser-background);
 
     > *:not(:last-child) {
         margin-right: 50px;
@@ -28,6 +29,7 @@
         letter-spacing: 0;
         line-height: 20px;
         white-space: nowrap;
+        color: var(--iqser-text);
     }
 
     .menu {
diff --git a/src/assets/styles/common-breadcrumbs.scss b/src/assets/styles/common-breadcrumbs.scss
index b8976d7..7df17fb 100644
--- a/src/assets/styles/common-breadcrumbs.scss
+++ b/src/assets/styles/common-breadcrumbs.scss
@@ -18,7 +18,7 @@
         color: var(--iqser-primary);
 
         &[aria-expanded='true'] .mat-button-wrapper > span {
-            color: var(--iqser-accent);
+            color: var(--iqser-text);
         }
     }
 }
@@ -30,7 +30,7 @@
 
 .breadcrumb {
     text-decoration: none;
-    color: var(--iqser-accent);
+    color: var(--iqser-text);
     font-weight: 600;
     width: fit-content;
     white-space: nowrap;
diff --git a/src/assets/styles/common-buttons.scss b/src/assets/styles/common-buttons.scss
index 84c43ab..9d68a97 100644
--- a/src/assets/styles/common-buttons.scss
+++ b/src/assets/styles/common-buttons.scss
@@ -21,9 +21,13 @@
             margin: auto;
         }
     }
+}
 
+.mat-button,
+.mat-icon-button,
+.mat-flat-button {
     &.mat-button-disabled .mat-button-wrapper {
-        color: var(--iqser-accent);
+        color: var(--iqser-text);
         opacity: 0.3;
     }
 }
@@ -84,6 +88,7 @@ iqser-circle-button {
 
         &.help:hover {
             background-color: var(--iqser-helpmode-primary);
+            color: var(--iqser-grey-1);
         }
     }
 
diff --git a/src/assets/styles/common-checkbox.scss b/src/assets/styles/common-checkbox.scss
index 9e9142a..765f013 100644
--- a/src/assets/styles/common-checkbox.scss
+++ b/src/assets/styles/common-checkbox.scss
@@ -19,7 +19,7 @@
 
     .mat-checkbox-label {
         font-size: 13px;
-        color: var(--iqser-accent);
+        color: var(--iqser-text);
 
         display: flex;
         align-items: center;
diff --git a/src/assets/styles/common-color-picker.scss b/src/assets/styles/common-color-picker.scss
new file mode 100644
index 0000000..6562a74
--- /dev/null
+++ b/src/assets/styles/common-color-picker.scss
@@ -0,0 +1,7 @@
+.color-picker {
+    background-color: var(--iqser-background) !important;
+
+    input {
+        color: var(--iqser-text) !important;
+    }
+}
diff --git a/src/assets/styles/common-components.scss b/src/assets/styles/common-components.scss
index 51592da..7ac4631 100644
--- a/src/assets/styles/common-components.scss
+++ b/src/assets/styles/common-components.scss
@@ -23,20 +23,22 @@
     }
 
     &.gray-dark {
-        background-color: var(--iqser-grey-6);
+        background-color: var(--iqser-user-avatar-1);
+        color: var(--iqser-text);
     }
 
     &.gray-primary {
-        background-color: var(--iqser-grey-6);
+        background-color: var(--iqser-user-avatar-1);
         color: var(--iqser-primary);
     }
 
     &.lightgray-dark {
-        background-color: var(--iqser-grey-4);
+        background-color: var(--iqser-user-avatar-2);
+        color: var(--iqser-text);
     }
 
     &.lightgray-primary {
-        background-color: var(--iqser-grey-4);
+        background-color: var(--iqser-user-avatar-2);
         color: var(--iqser-primary);
     }
 
@@ -56,11 +58,12 @@
     }
 
     &.white-dark {
-        border: 1px solid var(--iqser-grey-4);
+        background-color: var(--iqser-user-avatar-2);
+        color: var(--iqser-accent);
     }
 
     &.inactive {
-        background-color: var(--iqser-grey-6);
+        background-color: var(--iqser-user-avatar-1);
         color: var(--iqser-grey-7);
     }
 }
@@ -79,8 +82,7 @@
 
         mat-icon {
             width: 10px;
-            height: 10px;
-            line-height: 13px;
+            height: 11px;
             margin-right: 6px;
         }
 
@@ -97,6 +99,7 @@
 
         &.warn {
             background-color: rgba(var(--iqser-yellow-rgb), 0.7);
+            color: var(--iqser-accent);
         }
 
         &.error {
diff --git a/src/assets/styles/common-dialogs.scss b/src/assets/styles/common-dialogs.scss
index ede9ae4..9eda646 100644
--- a/src/assets/styles/common-dialogs.scss
+++ b/src/assets/styles/common-dialogs.scss
@@ -2,7 +2,8 @@
 
 .mat-dialog-container {
     display: flex !important;
-    color: var(--iqser-accent);
+    color: var(--iqser-text);
+    background-color: var(--iqser-background);
     padding: 0 !important;
     border-radius: 8px !important;
     @include common-mixins.scroll-bar;
diff --git a/src/assets/styles/common-file-drop.scss b/src/assets/styles/common-file-drop.scss
index 40fae90..320ff3d 100644
--- a/src/assets/styles/common-file-drop.scss
+++ b/src/assets/styles/common-file-drop.scss
@@ -9,7 +9,7 @@
     z-index: 1000;
     padding: 12px;
     opacity: 0.7;
-    background: var(--iqser-white);
+    background: var(--iqser-background);
     justify-content: center;
     align-items: center;
     display: flex;
diff --git a/src/assets/styles/common-full-pages.scss b/src/assets/styles/common-full-pages.scss
index 3b37d46..b83f25a 100644
--- a/src/assets/styles/common-full-pages.scss
+++ b/src/assets/styles/common-full-pages.scss
@@ -6,7 +6,7 @@
 
 .full-page-section {
     opacity: 0.7;
-    background: var(--iqser-white);
+    background: var(--iqser-background);
     z-index: 900;
 }
 
diff --git a/src/assets/styles/common-inputs.scss b/src/assets/styles/common-inputs.scss
index 7fff6a7..0e3f2e3 100644
--- a/src/assets/styles/common-inputs.scss
+++ b/src/assets/styles/common-inputs.scss
@@ -21,10 +21,10 @@ form .iqser-input-group:not(first-of-type) {
         position: absolute;
         left: 114px;
         bottom: 1px;
-        background: var(--iqser-quick-filter-border);
+        background: var(--iqser-grey-5);
         height: 34px;
         width: 34px;
-        border-left: 1px solid var(--iqser-quick-filter-border);
+        border-left: 1px solid var(--iqser-inputs-outline);
         border-top-right-radius: 7px;
         border-bottom-right-radius: 7px;
         cursor: pointer;
@@ -59,7 +59,7 @@ form .iqser-input-group:not(first-of-type) {
 
     .mat-form-field-label {
         opacity: 0.7 !important;
-        color: var(--iqser-accent) !important;
+        color: var(--iqser-text) !important;
         transform: translateY(-1.34em) !important;
     }
 
@@ -97,10 +97,11 @@ form .iqser-input-group:not(first-of-type) {
         box-sizing: border-box;
         padding-left: 11px;
         padding-right: 11px;
-        border: 1px solid var(--iqser-quick-filter-border);
+        border: 1px solid var(--iqser-inputs-outline);
         font-family: Inter, sans-serif;
         font-size: 13px;
-        background-color: #ffffff;
+        background-color: var(--iqser-background);
+        color: var(--iqser-text);
         border-radius: 8px;
         outline: none;
         margin-top: 3px;
@@ -111,11 +112,11 @@ form .iqser-input-group:not(first-of-type) {
         }
 
         &:focus:not(:disabled):not(.mat-select-disabled) {
-            border-color: var(--iqser-accent);
+            border-color: var(--iqser-text);
         }
 
         &::placeholder {
-            color: var(--iqser-accent);
+            color: var(--iqser-text);
             opacity: 0.7;
         }
 
@@ -129,8 +130,8 @@ form .iqser-input-group:not(first-of-type) {
 
         &:disabled,
         &.mat-select-disabled {
-            background-color: var(--iqser-grey-2);
-            color: rgba(var(--iqser-accent-rgb), 0.3);
+            background-color: var(--iqser-alt-background);
+            color: rgba(var(--iqser-text-rgb), 0.3);
         }
     }
 
@@ -143,13 +144,23 @@ form .iqser-input-group:not(first-of-type) {
         max-width: 150px;
     }
 
-    mat-select {
+    mat-select,
+    .mat-select.mat-select-disabled {
         .mat-select-trigger {
             height: 32px;
         }
 
+        .mat-select-placeholder {
+            color: rgba(var(--iqser-text-rgb), 0.4);
+        }
+
         .mat-select-value {
             vertical-align: middle;
+            color: var(--iqser-text);
+        }
+
+        .mat-select-arrow {
+            color: rgba(var(--iqser-text-rgb), 0.7);
         }
     }
 
@@ -171,7 +182,7 @@ form .iqser-input-group:not(first-of-type) {
         letter-spacing: 0;
         line-height: 14px;
         margin-bottom: 2px;
-        color: var(--iqser-accent);
+        color: var(--iqser-text);
 
         &.mat-checkbox-layout {
             opacity: 1;
diff --git a/src/assets/styles/common-layout.scss b/src/assets/styles/common-layout.scss
index dcd8e4f..0db257f 100644
--- a/src/assets/styles/common-layout.scss
+++ b/src/assets/styles/common-layout.scss
@@ -6,7 +6,8 @@ body {
     padding: 0;
     height: 100vh;
     font-family: 'Inter', sans-serif;
-    color: var(--iqser-accent);
+    color: var(--iqser-text);
+    background-color: var(--iqser-background);
     font-size: 13px;
     line-height: 16px;
     display: flex;
@@ -44,7 +45,7 @@ section.settings {
     height: 50px;
     width: 100vw;
     box-sizing: border-box;
-    background-color: var(--iqser-white);
+    background-color: var(--iqser-background);
     border-bottom: 1px solid var(--iqser-separator);
 
     .filters {
@@ -121,10 +122,10 @@ section.settings {
     border-radius: 8px;
     margin-top: 40px;
     margin-bottom: 70px;
-    background-color: var(--iqser-white);
+    background-color: var(--iqser-background);
     max-width: 650px;
     height: fit-content;
-    box-shadow: 0 1px 5px 0 rgba(40, 50, 65, 0.19);
+    @include common-mixins.drop-shadow;
     position: unset;
 
     .heading-l {
@@ -158,9 +159,9 @@ section.settings {
 }
 
 .right-container {
-    border-left: 1px solid var(--iqser-grey-4);
+    border-left: 1px solid var(--iqser-separator);
     box-sizing: border-box;
-    background: var(--iqser-white);
+    background: var(--iqser-background);
     overflow: hidden;
     transition: width ease-in-out 0.2s, min-width ease-in-out 0.2s;
 
diff --git a/src/assets/styles/common-loading.scss b/src/assets/styles/common-loading.scss
index 43fdc4f..7f93ba9 100644
--- a/src/assets/styles/common-loading.scss
+++ b/src/assets/styles/common-loading.scss
@@ -6,15 +6,15 @@
 @keyframes dots {
     0%,
     20% {
-        color: rgba(40, 50, 65, 0);
-        text-shadow: 0.25em 0 0 rgba(40, 50, 65, 0), 0.5em 0 0 rgba(40, 50, 65, 0);
+        color: rgba(var(--iqser-accent-rgb), 0);
+        text-shadow: 0.25em 0 0 rgba(var(--iqser-accent-rgb), 0), 0.5em 0 0 rgba(var(--iqser-accent-rgb), 0);
     }
     40% {
         color: #283241;
-        text-shadow: 0.25em 0 0 rgba(40, 50, 65, 0), 0.5em 0 0 rgba(40, 50, 65, 0);
+        text-shadow: 0.25em 0 0 rgba(var(--iqser-accent-rgb), 0), 0.5em 0 0 rgba(var(--iqser-accent-rgb), 0);
     }
     60% {
-        text-shadow: 0.25em 0 0 #283241, 0.5em 0 0 rgba(40, 50, 65, 0);
+        text-shadow: 0.25em 0 0 #283241, 0.5em 0 0 rgba(var(--iqser-accent-rgb), 0);
     }
     80%,
     100% {
diff --git a/src/assets/styles/common-menu.scss b/src/assets/styles/common-menu.scss
index 1d38269..f2586b9 100644
--- a/src/assets/styles/common-menu.scss
+++ b/src/assets/styles/common-menu.scss
@@ -2,11 +2,12 @@
 
 .mat-menu-panel {
     border-radius: 8px !important;
-    box-shadow: 0 2px 6px 0 rgba(40, 50, 65, 0.3);
     max-width: none !important;
     min-width: 180px !important;
     margin-top: 10px;
+    background-color: var(--iqser-popup-background);
     @include common-mixins.scroll-bar;
+    @include common-mixins.drop-shadow;
 
     .mat-menu-content:not(:empty) {
         padding-top: 8px;
@@ -23,7 +24,7 @@
 
     .mat-menu-item {
         font-size: 13px;
-        color: var(--iqser-accent);
+        color: var(--iqser-text);
         padding: 0 26px 0 8px;
         margin: 0 8px 2px 8px;
         border-radius: 4px;
@@ -32,6 +33,10 @@
         display: flex;
         align-items: center;
 
+        mat-icon {
+            color: var(--iqser-text);
+        }
+
         .dot {
             right: 8px;
         }
diff --git a/src/assets/styles/common-select.scss b/src/assets/styles/common-select.scss
index d2c7cca..5773c34 100644
--- a/src/assets/styles/common-select.scss
+++ b/src/assets/styles/common-select.scss
@@ -2,20 +2,21 @@
 
 .mat-select-panel {
     padding: 7px 0 !important;
+    background-color: var(--iqser-background);
     @include common-mixins.scroll-bar;
 
     .mat-option {
         margin: 1px 8px;
         border-radius: 4px;
+        color: var(--iqser-text);
 
         &:hover:not(.mat-option-disabled),
         &:focus:not(.mat-option-disabled) {
-            background-color: var(--iqser-grey-6);
+            background-color: var(--iqser-btn-bg);
         }
 
         &.mat-selected:not(.mat-option-multiple) {
             background-color: rgba(var(--iqser-primary-rgb), 0.2);
-            color: var(--iqser-accent);
         }
     }
 }
diff --git a/src/assets/styles/common-side-nav.scss b/src/assets/styles/common-side-nav.scss
index 61c2423..11f2e07 100644
--- a/src/assets/styles/common-side-nav.scss
+++ b/src/assets/styles/common-side-nav.scss
@@ -5,7 +5,7 @@ iqser-side-nav {
     flex-direction: column;
     min-width: 200px;
     max-width: 200px;
-    background-color: var(--iqser-grey-2);
+    background-color: var(--iqser-side-nav);
     border-right: 1px solid var(--iqser-separator);
     box-sizing: border-box;
     padding: 8px;
@@ -24,7 +24,7 @@ iqser-side-nav {
         cursor: pointer;
         transition: background-color 0.2s;
         font-weight: 500;
-        color: var(--iqser-accent);
+        color: var(--iqser-text);
         text-decoration: none;
         display: flex;
         align-items: center;
diff --git a/src/assets/styles/common-slider.scss b/src/assets/styles/common-slider.scss
index b7b8efa..2eb38f6 100644
--- a/src/assets/styles/common-slider.scss
+++ b/src/assets/styles/common-slider.scss
@@ -22,7 +22,7 @@
         height: 4px !important;
         margin-top: 1px;
         border-radius: 3px;
-        background-color: var(--iqser-grey-4) !important;
+        background-color: var(--iqser-toggle-bg) !important;
     }
 
     .mat-slider-focus-ring {
diff --git a/src/assets/styles/common-styles.scss b/src/assets/styles/common-styles.scss
index 9e77796..eb7891e 100644
--- a/src/assets/styles/common-styles.scss
+++ b/src/assets/styles/common-styles.scss
@@ -29,3 +29,4 @@
 @use 'common-file-drop';
 @use 'common-side-nav';
 @use 'common-radio';
+@use 'common-color-picker';
diff --git a/src/assets/styles/common-tabs.scss b/src/assets/styles/common-tabs.scss
index 7bc7308..422df34 100644
--- a/src/assets/styles/common-tabs.scss
+++ b/src/assets/styles/common-tabs.scss
@@ -16,7 +16,7 @@
     cursor: pointer;
 
     &:not([disabled]):not(.active):hover {
-        background-color: var(--iqser-grey-6);
+        background-color: var(--iqser-tab-hover);
     }
 
     &.active {
@@ -26,7 +26,7 @@
     }
 
     &[disabled] {
-        color: rgba(var(--iqser-accent-rgb), 0.3);
+        color: rgba(var(--iqser-text-rgb), 0.3);
         cursor: not-allowed;
     }
 }
diff --git a/src/assets/styles/common-texts.scss b/src/assets/styles/common-texts.scss
index 122ce29..273711f 100644
--- a/src/assets/styles/common-texts.scss
+++ b/src/assets/styles/common-texts.scss
@@ -52,7 +52,7 @@ a {
 
 pre {
     font-family: Inter, sans-serif;
-    color: var(--iqser-accent);
+    color: var(--iqser-text);
 }
 
 .heading-xl {
@@ -95,7 +95,7 @@ pre {
 }
 
 .link-action {
-    color: var(--iqser-accent);
+    color: var(--iqser-text);
     font-size: 11px;
     line-height: 14px;
     text-decoration: underline;
@@ -103,12 +103,12 @@ pre {
 
     &:hover {
         text-decoration: none;
-        color: var(--iqser-accent);
+        color: var(--iqser-text);
     }
 }
 
 .large-label {
-    color: var(--iqser-accent);
+    color: var(--iqser-text);
     font-size: 13px;
     line-height: 16px;
 }
diff --git a/src/assets/styles/common-toggle-button.scss b/src/assets/styles/common-toggle-button.scss
index b6be148..19e3752 100644
--- a/src/assets/styles/common-toggle-button.scss
+++ b/src/assets/styles/common-toggle-button.scss
@@ -6,7 +6,7 @@
 
     .mat-button-toggle:not(.mat-button-toggle-checked) {
         .mat-button-toggle-button {
-            background: var(--iqser-grey-6);
+            background: var(--iqser-btn-bg);
             color: var(--iqser-grey-7);
         }
     }
diff --git a/src/assets/styles/common-toggle.scss b/src/assets/styles/common-toggle.scss
index 161a8bd..fafb414 100644
--- a/src/assets/styles/common-toggle.scss
+++ b/src/assets/styles/common-toggle.scss
@@ -3,7 +3,7 @@
         height: 16px !important;
         width: 30px !important;
         border-radius: 16px !important;
-        background-color: var(--iqser-grey-4);
+        background-color: var(--iqser-toggle-bg);
     }
 
     .mat-slide-toggle-thumb-container {
@@ -17,7 +17,7 @@
         height: 12px !important;
         width: 12px !important;
         box-shadow: none;
-        background-color: var(--iqser-grey-2);
+        background-color: var(--iqser-alt-background);
     }
 
     .mat-ripple {
@@ -27,11 +27,11 @@
     &.mat-primary.mat-checked {
         .mat-slide-toggle-bar {
             background-color: var(--iqser-primary);
-            border: 1px solid var(--iqser-white);
+            border: 1px solid var(--iqser-background);
         }
 
         .mat-slide-toggle-thumb {
-            background-color: var(--iqser-white);
+            background-color: var(--iqser-background);
         }
 
         .mat-slide-toggle-thumb-container {
diff --git a/src/lib/buttons/help-button/help-button.component.html b/src/lib/buttons/help-button/help-button.component.html
index bac8fc3..45fbb64 100644
--- a/src/lib/buttons/help-button/help-button.component.html
+++ b/src/lib/buttons/help-button/help-button.component.html
@@ -1,14 +1,6 @@
-<iqser-icon-button
-    *ngIf="dialogButton"
-    (action)="activateHelpMode()"
-    icon="iqser:help-outline"
-    type="help"
-    [label]="'help-mode.button-text' | translate"
-></iqser-icon-button>
 <iqser-circle-button
-    *ngIf="!dialogButton"
     (action)="activateHelpMode()"
+    [tooltip]="'help-mode.button-text' | translate"
     icon="iqser:help-outline"
     type="help"
-    [tooltip]="'help-mode.button-text' | translate"
 ></iqser-circle-button>
diff --git a/src/lib/buttons/help-button/help-button.component.ts b/src/lib/buttons/help-button/help-button.component.ts
index 86f8d49..c684311 100644
--- a/src/lib/buttons/help-button/help-button.component.ts
+++ b/src/lib/buttons/help-button/help-button.component.ts
@@ -8,7 +8,6 @@ import { HelpModeService } from '@iqser/common-ui';
     styleUrls: ['./help-button.component.scss'],
 })
 export class HelpButtonComponent implements OnInit, OnDestroy {
-    @Input() dialogButton = true;
     @Input() helpButtonKey?: string;
 
     constructor(private readonly _helpModeService: HelpModeService) {}
@@ -27,6 +26,6 @@ export class HelpButtonComponent implements OnInit, OnDestroy {
             window.open(url, '_blank');
             return;
         }
-        this._helpModeService.activateHelpMode(this.dialogButton);
+        this._helpModeService.activateHelpMode();
     }
 }
diff --git a/src/lib/filtering/popup-filter/popup-filter.component.scss b/src/lib/filtering/popup-filter/popup-filter.component.scss
index 97a3f53..2e05059 100644
--- a/src/lib/filtering/popup-filter/popup-filter.component.scss
+++ b/src/lib/filtering/popup-filter/popup-filter.component.scss
@@ -28,7 +28,7 @@
 }
 
 .filter-options {
-    background-color: var(--iqser-grey-2);
+    background-color: var(--iqser-side-nav);
     padding-bottom: 8px;
 }
 
diff --git a/src/lib/filtering/quick-filters/quick-filters.component.scss b/src/lib/filtering/quick-filters/quick-filters.component.scss
index e011abd..a7440a2 100644
--- a/src/lib/filtering/quick-filters/quick-filters.component.scss
+++ b/src/lib/filtering/quick-filters/quick-filters.component.scss
@@ -6,7 +6,7 @@
 
 .quick-filter {
     box-sizing: border-box;
-    border: 1px solid var(--iqser-quick-filter-border);
+    border: 1px solid var(--iqser-inputs-outline);
     border-radius: 17px;
     background-color: var(--iqser-btn-bg);
     padding: 0 14px;
@@ -17,11 +17,11 @@
     transition: background-color 0.2s;
 
     &:hover {
-        background-color: var(--iqser-white);
+        background-color: var(--iqser-background);
     }
 
     &.active {
-        background-color: var(--iqser-white);
+        background-color: var(--iqser-background);
         font-weight: 600;
         border: none;
     }
diff --git a/src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.scss b/src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.scss
index 05fc890..0a00849 100644
--- a/src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.scss
+++ b/src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.scss
@@ -1,5 +1,5 @@
 section {
-    background: var(--iqser-grey-11);
+    background: var(--iqser-btn-bg-hover);
     align-items: center;
 
     .content {
diff --git a/src/lib/help-mode/help-mode/help-mode.component.scss b/src/lib/help-mode/help-mode/help-mode.component.scss
index ab71e1d..104a014 100644
--- a/src/lib/help-mode/help-mode/help-mode.component.scss
+++ b/src/lib/help-mode/help-mode/help-mode.component.scss
@@ -23,10 +23,11 @@
         justify-content: space-between;
         align-items: center;
         pointer-events: visiblePainted;
+        color: var(--iqser-grey-1);
 
         a {
-            color: black;
             text-decoration: underline;
+            color: var(--iqser-grey-1);
         }
 
         .close {
diff --git a/src/lib/inputs/details-radio/details-radio.component.scss b/src/lib/inputs/details-radio/details-radio.component.scss
index b50616b..51db6f8 100644
--- a/src/lib/inputs/details-radio/details-radio.component.scss
+++ b/src/lib/inputs/details-radio/details-radio.component.scss
@@ -5,7 +5,7 @@ label {
 .option {
     padding: 16px;
     border-radius: 8px;
-    background-color: var(--iqser-grey-2);
+    background-color: var(--iqser-alt-background);
 
     &.active {
         background-color: rgba(var(--iqser-primary-rgb), 0.1);
diff --git a/src/lib/inputs/round-checkbox/round-checkbox.component.scss b/src/lib/inputs/round-checkbox/round-checkbox.component.scss
index a87359e..fc7aaeb 100644
--- a/src/lib/inputs/round-checkbox/round-checkbox.component.scss
+++ b/src/lib/inputs/round-checkbox/round-checkbox.component.scss
@@ -9,8 +9,8 @@
     border-radius: 50%;
 
     &.inactive {
-        border: 1px solid #d3d5da;
-        background-color: var(--iqser-white);
+        border: 1px solid var(--iqser-inputs-outline);
+        background-color: var(--iqser-background);
     }
 
     .mat-icon {
diff --git a/src/lib/listing/scroll-button/scroll-button.component.scss b/src/lib/listing/scroll-button/scroll-button.component.scss
index ee4a294..afc466a 100644
--- a/src/lib/listing/scroll-button/scroll-button.component.scss
+++ b/src/lib/listing/scroll-button/scroll-button.component.scss
@@ -1,12 +1,14 @@
+@use '../../../assets/styles/common-mixins' as mixins;
+
 .scroll-button {
-    background-color: var(--iqser-white);
+    background-color: var(--iqser-popup-background);
     position: absolute;
     right: 0;
     height: 40px;
     width: 44px;
     border: none;
     border-radius: 8px 0 0 8px;
-    box-shadow: -1px 1px 5px 0 rgba(40, 50, 65, 0.25);
+    @include mixins.drop-shadow;
 
     &.bottom {
         bottom: 30px;
diff --git a/src/lib/listing/table-column-name/table-column-name.component.scss b/src/lib/listing/table-column-name/table-column-name.component.scss
index 7fb6e0d..46aa2fc 100644
--- a/src/lib/listing/table-column-name/table-column-name.component.scss
+++ b/src/lib/listing/table-column-name/table-column-name.component.scss
@@ -36,7 +36,7 @@
 
     .sort-arrows-container {
         display: none;
-        color: var(--iqser-primary);
+        color: rgba(var(--iqser-text-rgb), 0.5);
         margin-left: 8px;
 
         mat-icon {
diff --git a/src/lib/listing/table-content/table-content.component.scss b/src/lib/listing/table-content/table-content.component.scss
index 568053f..3a65a2b 100644
--- a/src/lib/listing/table-content/table-content.component.scss
+++ b/src/lib/listing/table-content/table-content.component.scss
@@ -3,6 +3,7 @@
 :host cdk-virtual-scroll-viewport {
     height: calc(100vh - 50px - 31px - 111px);
     overflow-y: hidden !important;
+    background-color: var(--iqser-background);
     @include mixins.scroll-bar;
 
     &.no-data {
diff --git a/src/lib/listing/table-content/table-item/table-item.component.scss b/src/lib/listing/table-content/table-item/table-item.component.scss
index 2260b6e..eafb95b 100644
--- a/src/lib/listing/table-content/table-item/table-item.component.scss
+++ b/src/lib/listing/table-content/table-item/table-item.component.scss
@@ -17,6 +17,7 @@
         border-bottom: 1px solid var(--iqser-separator);
         height: var(--itemSize);
         padding: 0 10px;
+        background-color: var(--iqser-background);
 
         &.center {
             align-items: center;
@@ -68,7 +69,7 @@
         padding-left: 100px;
         padding-right: 21px;
         z-index: 1;
-        background: linear-gradient(to right, rgba(244, 245, 247, 0) 0%, var(--iqser-grey-2) 35%);
+        background: linear-gradient(to right, rgba(244, 245, 247, 0) 0%, var(--iqser-side-nav) 35%);
 
         mat-icon {
             width: 14px;
diff --git a/src/lib/listing/workflow/workflow.component.scss b/src/lib/listing/workflow/workflow.component.scss
index f503083..e2bb64e 100644
--- a/src/lib/listing/workflow/workflow.component.scss
+++ b/src/lib/listing/workflow/workflow.component.scss
@@ -16,7 +16,7 @@
         display: flex;
         flex-direction: column;
         flex: 1;
-        background-color: var(--iqser-grey-2);
+        background-color: var(--iqser-alt-background);
         border-radius: 6px;
         padding-top: 18px;
         position: relative;
@@ -51,8 +51,8 @@
                     -45deg,
                     var(--iqser-separator),
                     var(--iqser-separator) 1px,
-                    var(--iqser-white) 1px,
-                    var(--iqser-white) 8px
+                    var(--iqser-background) 1px,
+                    var(--iqser-background) 8px
                 );
 
                 > .heading,
@@ -76,8 +76,8 @@
 }
 
 .item {
-    background-color: var(--iqser-white);
-    border: 2px solid var(--iqser-white);
+    background-color: var(--iqser-background);
+    border: 2px solid var(--iqser-background);
 
     &:last-child {
         margin-bottom: 8px;
@@ -99,7 +99,7 @@
 }
 
 .add-btn {
-    background-color: var(--iqser-grey-6);
+    background-color: var(--iqser-btn-bg);
     padding: 10px;
     text-align: center;
     cursor: pointer;
@@ -110,7 +110,7 @@
     }
 
     &:hover {
-        background-color: var(--iqser-grey-4);
+        background-color: var(--iqser-btn-bg-hover);
     }
 }
 
diff --git a/src/lib/misc/progress-bar/progress-bar.component.scss b/src/lib/misc/progress-bar/progress-bar.component.scss
index dc7256e..c03010e 100644
--- a/src/lib/misc/progress-bar/progress-bar.component.scss
+++ b/src/lib/misc/progress-bar/progress-bar.component.scss
@@ -3,11 +3,11 @@
 }
 
 .wrapper {
-    background-color: var(--iqser-grey-6);
+    background-color: var(--iqser-btn-bg);
 
     .indicator {
         width: calc(100% / var(--total) * var(--count));
-        background-color: var(--iqser-grey-7);
+        background-color: var(--iqser-loading-progress);
     }
 }
 
@@ -28,5 +28,5 @@
 }
 
 .active .indicator {
-    background-color: rgba(var(--iqser-primary-rgb), 0.4);
+    background-color: rgba(var(--iqser-primary-rgb), 0.7);
 }
diff --git a/src/lib/upload-file/drag-drop-file-upload.directive.ts b/src/lib/upload-file/drag-drop-file-upload.directive.ts
index 060f21f..fc73659 100644
--- a/src/lib/upload-file/drag-drop-file-upload.directive.ts
+++ b/src/lib/upload-file/drag-drop-file-upload.directive.ts
@@ -1,21 +1,18 @@
-import { Directive, EventEmitter, Output, HostListener, HostBinding } from '@angular/core';
-
-const DRAG_OVER_BACKGROUND_COLOR = '#e2eefd';
-const DEFAULT_BACKGROUND_COLOR = '#f4f5f7';
+import { Directive, EventEmitter, HostBinding, HostListener, Output } from '@angular/core';
 
 @Directive({
     selector: '[iqserDragDropFileUpload]',
 })
 export class DragDropFileUploadDirective {
     @Output() readonly fileDropped = new EventEmitter();
-    @HostBinding('style.background-color') private _background = DEFAULT_BACKGROUND_COLOR;
+    @HostBinding('class.drag-over') private _dragOver = false;
 
     @HostListener('dragover', ['$event'])
     onDragOver(event: DragEvent) {
         event.preventDefault();
         event.stopPropagation();
         if (event.dataTransfer?.types.includes('Files')) {
-            this._background = DRAG_OVER_BACKGROUND_COLOR;
+            this._dragOver = true;
         }
     }
 
@@ -23,7 +20,7 @@ export class DragDropFileUploadDirective {
     onDragLeave(event: DragEvent) {
         event.preventDefault();
         event.stopPropagation();
-        this._background = DEFAULT_BACKGROUND_COLOR;
+        this._dragOver = false;
     }
 
     @HostListener('drop', ['$event'])
@@ -31,7 +28,7 @@ export class DragDropFileUploadDirective {
         event.preventDefault();
         event.stopPropagation();
         if (event?.dataTransfer?.types.includes('Files')) {
-            this._background = DEFAULT_BACKGROUND_COLOR;
+            this._dragOver = false;
             const files = event.dataTransfer.files;
             if (files.length > 0) {
                 this.fileDropped.emit({ target: { files } });
diff --git a/src/lib/upload-file/upload-file.component.scss b/src/lib/upload-file/upload-file.component.scss
index 81faed2..5c716cc 100644
--- a/src/lib/upload-file/upload-file.component.scss
+++ b/src/lib/upload-file/upload-file.component.scss
@@ -1,12 +1,14 @@
-@import '../../assets/styles/common-variables';
-
 .upload-area,
 .file-area {
     display: flex;
     align-items: center;
     border-radius: 8px;
     width: 100%;
-    background: var(--iqser-grey-2);
+    background: var(--iqser-alt-background);
+
+    &.drag-over {
+        background-color: var(--iqser-file-drop-drag-over);
+    }
 }
 
 .upload-area {
diff --git a/test.json b/test.json
new file mode 100644
index 0000000..e69de29