diff --git a/src/assets/styles/_common-mixins.scss b/src/assets/styles/_common-mixins.scss
index dfe467c..f31e562 100644
--- a/src/assets/styles/_common-mixins.scss
+++ b/src/assets/styles/_common-mixins.scss
@@ -44,7 +44,7 @@
 }
 
 @mixin drop-shadow {
-    box-shadow: 0 2px 6px 0 var(--iqser-shadow);
+    box-shadow: 0 1px 6px 0 var(--iqser-shadow);
 }
 
 @mixin clear-btn {
diff --git a/src/assets/styles/common-buttons.scss b/src/assets/styles/common-buttons.scss
index f136b90..0b5a495 100644
--- a/src/assets/styles/common-buttons.scss
+++ b/src/assets/styles/common-buttons.scss
@@ -21,13 +21,18 @@
             margin: auto;
         }
     }
+}
 
+.mat-button,
+.mat-icon-button,
+.mat-flat-button {
     &.mat-button-disabled .mat-button-wrapper {
         color: var(--iqser-text);
         opacity: 0.3;
     }
 }
 
+
 .mat-flat-button.mat-primary,
 .mat-button.primary {
     padding: 0 14px;
@@ -84,6 +89,7 @@ iqser-circle-button {
 
         &.help:hover {
             background-color: var(--iqser-helpmode-primary);
+            color: var(--iqser-grey-1);
         }
     }
 
diff --git a/src/assets/styles/common-components.scss b/src/assets/styles/common-components.scss
index a3bd775..2cd90d3 100644
--- a/src/assets/styles/common-components.scss
+++ b/src/assets/styles/common-components.scss
@@ -79,12 +79,10 @@
         display: flex;
         align-items: center;
         min-width: fit-content;
-        @include mixins.line-clamp(1);
 
         mat-icon {
             width: 10px;
-            height: 10px;
-            line-height: 13px;
+            height: 11px;
             margin-right: 6px;
         }
 
diff --git a/src/assets/styles/common-inputs.scss b/src/assets/styles/common-inputs.scss
index e4c566f..9a87dad 100644
--- a/src/assets/styles/common-inputs.scss
+++ b/src/assets/styles/common-inputs.scss
@@ -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;
     }
 
@@ -130,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);
         }
     }
 
@@ -144,11 +144,15 @@ 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);
diff --git a/src/assets/styles/common-layout.scss b/src/assets/styles/common-layout.scss
index 27a6ed0..0db257f 100644
--- a/src/assets/styles/common-layout.scss
+++ b/src/assets/styles/common-layout.scss
@@ -125,7 +125,7 @@ section.settings {
     background-color: var(--iqser-background);
     max-width: 650px;
     height: fit-content;
-    box-shadow: 0 1px 5px 0 rgba(var(--iqser-accent-rgb), 0.19);
+    @include common-mixins.drop-shadow;
     position: unset;
 
     .heading-l {
diff --git a/src/assets/styles/common-toggle.scss b/src/assets/styles/common-toggle.scss
index 092d02d..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 {
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 ba695e0..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-4); // todo
+    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/listing/workflow/workflow.component.scss b/src/lib/listing/workflow/workflow.component.scss
index f503083..f5dfda2 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;
@@ -48,11 +48,11 @@
 
             &:not(.list-can-receive):not(.list-dragging) {
                 background: repeating-linear-gradient(
-                    -45deg,
-                    var(--iqser-separator),
-                    var(--iqser-separator) 1px,
-                    var(--iqser-white) 1px,
-                    var(--iqser-white) 8px
+                        -45deg,
+                        var(--iqser-separator),
+                        var(--iqser-separator) 1px,
+                        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/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 {