diff --git a/projects/netgrif-components/nae-theme.scss b/projects/netgrif-components/nae-theme.scss
index 367bb45d44..023eac1243 100644
--- a/projects/netgrif-components/nae-theme.scss
+++ b/projects/netgrif-components/nae-theme.scss
@@ -4,7 +4,9 @@
 @import 'src/lib/data-fields/data-field.theme';
 @import 'src/lib/user/user.theme';
 @import "src/lib/navigation/navigation.theme";
+@import "src/lib/admin/ldap-group-role-assignment/ldap-group-role-assignment.component.theme";
 @import "src/lib/admin/role-assignment/role-assignment.component.theme";
+@import "src/lib/admin/user-invite/user-invite.component.theme";
 @import "src/lib/side-menu/content-components/user-assign/user-assign-list/user-assign-item/theme/user-assign-item.component.theme";
 @import "src/lib/side-menu/content-components/admin-impersonate/admin-impersonate-list/admin-impersonate-item/theme/admin-impersonate-item.component.theme";
 @import 'src/lib/view/view.theme';
@@ -15,26 +17,70 @@
 @import "src/lib/search/advanced-search/advanced-search-component/advanced-search.component.theme";
 @import "src/lib/search/search-component/search.component-theme.scss";
 @import "src/lib/dialog/dialog.theme";
+@import "src/lib/snack-bar/snack-bar.theme";
+@import "src/lib/task-content/task-content.theme";
+
+@mixin nae-lib-theme($app-theme, $app-typography-config,
+    $nae-variables: (
+            base-color: #64748B,
+            background: #FFFFFF,
+            border: #EEEEEE,
+            datafield-text-disabled: #64748B,
+            datafield-outline-disabled: #CBD5E1,
+            datafield-text-enabled: #64748B,
+            datafield-outline-enabled: #64748B,
+            datafield-background: #FFFFFF,
+            datafield-icon-disabled: #94A3B8,
+            datafield-stepper-background: #F9F9F9,
+            datafield-stepper-color: #FFFFFF,
+            datafield-required-label: red,
+            datafield-canvas-stroke: black,
+            datafield-canvas-disabled: #CBD5E1,
+            drawer-border: #E2E8F0,
+            drawer-background: #F8FAFC,
+            drawer-color: black,
+            drawer-logo: #fafafa,
+            rail-border: #dddddd,
+            rail-background: white,
+            panel-background: #F8FAFC,
+            panel-color: rgba(0, 0, 0, .87),
+            panel-border: rgba(0, 0, 0, .03),
+            search-background: #fafafa,
+            snack-bar-icon: #dedede,
+            tabs-background: white,
+            tabs-border: #E2E8F0,
+            loading-placeholder: #FFFFFF,
+            loading-placeholder-col: #ced4da,
+            profile-name: #FFFFFF,
+            profile-border: #DDDDDD,
+            profile-border-background: #f0f0f0,
+            user-card: #fd971f,
+            user-card-text: #424242,
+        )
+) {
 
-@mixin nae-lib-theme($app-theme, $app-typography-config) {
     @include nae-typography($app-typography-config);
-    @include panel-component($app-theme);
-    @include data-field-component($app-theme);
-    @include user-profile($app-theme);
-    @include navigation-theme($app-theme);
-    @include header-component($app-theme);
-    @include roles-assignment-theme($app-theme);
+    @include panel-component($app-theme, $nae-variables);
+    @include data-field-component($app-theme, $nae-variables);
+    @include user-profile($app-theme, $nae-variables);
+    @include navigation-theme($app-theme, $nae-variables);
+    @include header-component($app-theme, $nae-variables);
+    @include ldap-assignment-theme($app-theme, $nae-variables);
+    @include roles-assignment-theme($app-theme, $nae-variables);
+    @include user-invite-theme($app-theme, $nae-variables);
     @include user-assign-item-component-theme($app-theme);
     @include admin-impersonate-item-component-theme($app-theme);
     @include view-theme($app-theme);
-    @include tabs-theme($app-theme);
-    @include search-predicate-theme($app-theme);
-    @include search-clause-theme($app-theme);
+    @include tabs-theme($app-theme, $nae-variables);
+    @include search-predicate-theme($app-theme, $nae-variables);
+    @include search-clause-theme($app-theme, $nae-variables);
     @include search-configuration-input-theme($app-theme);
-    @include side-menu-theme($app-theme);
+    @include side-menu-theme($app-theme, $nae-variables);
     @include advanced-search-theme($app-theme);
-    @include advanced-search-icon($app-theme);
-    @include dialog-theme($app-theme);
+    @include advanced-search-icon($app-theme, $nae-variables);
+    @include dialog-theme($app-theme, $nae-variables);
+    @include snack-bar-theme($app-theme, $nae-variables);
+    @include task-content-theme($app-theme, $nae-variables);
 }
 
 .mat-tab-group.nae-tab-fill-height .mat-tab-body-wrapper {
diff --git a/projects/netgrif-components/src/lib/admin/ldap-group-role-assignment/ldap-group-role-assignment.component.html b/projects/netgrif-components/src/lib/admin/ldap-group-role-assignment/ldap-group-role-assignment.component.html
index 28a509435e..76f8861c21 100644
--- a/projects/netgrif-components/src/lib/admin/ldap-group-role-assignment/ldap-group-role-assignment.component.html
+++ b/projects/netgrif-components/src/lib/admin/ldap-group-role-assignment/ldap-group-role-assignment.component.html
@@ -12,7 +12,8 @@
                 <div fxLayout="row" fxLayoutAlign="start center" class="netgrif-input netgrif-input-search-fix">
                     <mat-form-field fxFlex="100" class="ldapGroup-assign-search" color="primary" appearance="outline">
                         <mat-icon matPrefix class="prefix-icon">search</mat-icon>
-                        <input matInput [formControl]="searchLdapGroupControl" placeholder="{{ 'side-menu.ldapGroup.choose' | translate }}">
+                        <mat-label>{{ 'side-menu.ldapGroup.choose' | translate }}</mat-label>
+                        <input matInput [formControl]="searchLdapGroupControl">
                         <button color="warn" *ngIf="searchLdapGroupControl.value" matSuffix mat-icon-button
                                 (click)="searchLdapGroupControl.setValue('')">
                             <mat-icon>close</mat-icon>
diff --git a/projects/netgrif-components/src/lib/admin/ldap-group-role-assignment/ldap-group-role-assignment.component.scss b/projects/netgrif-components/src/lib/admin/ldap-group-role-assignment/ldap-group-role-assignment.component.scss
index c0ce725a6b..0dffaae6cb 100644
--- a/projects/netgrif-components/src/lib/admin/ldap-group-role-assignment/ldap-group-role-assignment.component.scss
+++ b/projects/netgrif-components/src/lib/admin/ldap-group-role-assignment/ldap-group-role-assignment.component.scss
@@ -38,7 +38,6 @@
 
 .ldapGroup-assign-search {
     width: 100%;
-    color: #64748B;
     min-width: 250px;
     border-radius: 6px;
 }
diff --git a/projects/netgrif-components/src/lib/admin/ldap-group-role-assignment/ldap-group-role-assignment.component.theme.scss b/projects/netgrif-components/src/lib/admin/ldap-group-role-assignment/ldap-group-role-assignment.component.theme.scss
index c3efd8df8c..fd242114aa 100644
--- a/projects/netgrif-components/src/lib/admin/ldap-group-role-assignment/ldap-group-role-assignment.component.theme.scss
+++ b/projects/netgrif-components/src/lib/admin/ldap-group-role-assignment/ldap-group-role-assignment.component.theme.scss
@@ -1,10 +1,14 @@
 @use '@angular/material' as mat;
 
-@mixin roles-assignment-theme($theme) {
+@mixin ldap-assignment-theme($theme, $nae-variables) {
     $primary: map-get($theme, primary);
     $accent: map-get($theme, accent);
 
     .list-item-selected {
         background: mat.get-color-from-palette($primary, 100, 1);
     }
+
+    .ldapGroup-assign-search {
+        color: map-get($nae-variables, base-color);
+    }
 }
diff --git a/projects/netgrif-components/src/lib/admin/role-assignment/role-assignment.component.scss b/projects/netgrif-components/src/lib/admin/role-assignment/role-assignment.component.scss
index 7e2ae94546..27e8a6e121 100644
--- a/projects/netgrif-components/src/lib/admin/role-assignment/role-assignment.component.scss
+++ b/projects/netgrif-components/src/lib/admin/role-assignment/role-assignment.component.scss
@@ -38,7 +38,6 @@
 
 .user-assign-search {
     width: 100%;
-    color: #64748B;
     min-width: 250px;
     border-radius: 6px;
 }
diff --git a/projects/netgrif-components/src/lib/admin/role-assignment/role-assignment.component.theme.scss b/projects/netgrif-components/src/lib/admin/role-assignment/role-assignment.component.theme.scss
index c6b5441b7d..e8beded86e 100644
--- a/projects/netgrif-components/src/lib/admin/role-assignment/role-assignment.component.theme.scss
+++ b/projects/netgrif-components/src/lib/admin/role-assignment/role-assignment.component.theme.scss
@@ -1,9 +1,13 @@
 @use '@angular/material' as mat;
 
-@mixin roles-assignment-theme($theme) {
+@mixin roles-assignment-theme($theme, $nae-variables) {
     $primary: map-get($theme, primary);
     $accent: map-get($theme, accent);
 
+    .user-assign-search {
+        color: map-get($nae-variables, base-color);
+    }
+
     .list-item-selected {
         background-color: mat.get-color-from-palette($primary, 100, 1);
     }
diff --git a/projects/netgrif-components/src/lib/admin/user-invite/user-invite.component.html b/projects/netgrif-components/src/lib/admin/user-invite/user-invite.component.html
index 60441cd590..164b8efcd6 100644
--- a/projects/netgrif-components/src/lib/admin/user-invite/user-invite.component.html
+++ b/projects/netgrif-components/src/lib/admin/user-invite/user-invite.component.html
@@ -5,9 +5,9 @@
         <mat-toolbar color="primary" class="min-height-72 margin-bottom-16px">
             <span>{{'admin.user-invite.newUser' | translate}}</span>
             <div fxFlex></div>
-            <div fxLayout="row" fxLayoutAlign="start center" fxFlex="40"  class="padding-right-16px netgrif-input netgrif-input-fix netgrif-input-primary-fix netgrif-input-search-fix">
+            <div fxLayout="row" fxLayoutAlign="start center" fxFlex="40"  class="padding-right-16px netgrif-input netgrif-input-search-fix">
                 <mat-icon fxFlex class="mail-icon">email</mat-icon>
-                <mat-form-field fxFlex="100" class="user-assign-search" color="primary" appearance="outline">
+                <mat-form-field fxFlex="100" class="user-invite-search" color="primary" appearance="outline">
                     <mat-label>{{ 'admin.user-invite.mail' | translate }}</mat-label>
                     <input matInput [formControl]="invitedEmailControl">
                     <button mat-button *ngIf="invitedEmailControl.value" matSuffix mat-icon-button
diff --git a/projects/netgrif-components/src/lib/admin/user-invite/user-invite.component.scss b/projects/netgrif-components/src/lib/admin/user-invite/user-invite.component.scss
index df50d687f0..bda68572aa 100644
--- a/projects/netgrif-components/src/lib/admin/user-invite/user-invite.component.scss
+++ b/projects/netgrif-components/src/lib/admin/user-invite/user-invite.component.scss
@@ -16,8 +16,10 @@
     padding: 0 16px;
     width: 100%;
     white-space: nowrap;
-    border: 1px solid #eeeeee;
-    background: white;
+}
+
+.user-invite-search {
+    border-radius: 6px;
 }
 
 .invited-card-font, .invited-card-font h1, .invited-card-font h2, .invited-card-font h3, .invited-card-font h4, .invited-card-font h5, .invited-card-font h6 {
diff --git a/projects/netgrif-components/src/lib/admin/user-invite/user-invite.component.theme.scss b/projects/netgrif-components/src/lib/admin/user-invite/user-invite.component.theme.scss
new file mode 100644
index 0000000000..ba506edde5
--- /dev/null
+++ b/projects/netgrif-components/src/lib/admin/user-invite/user-invite.component.theme.scss
@@ -0,0 +1,12 @@
+@use '@angular/material' as mat;
+
+@mixin user-invite-theme($theme, $nae-variables) {
+    .user-invite-search {
+        color: map-get($nae-variables, base-color);
+    }
+    .invited-card {
+        border: 1px solid map-get($nae-variables, border);
+        background: map-get($nae-variables, background);
+    }
+}
+
diff --git a/projects/netgrif-components/src/lib/data-fields/data-field.theme.scss b/projects/netgrif-components/src/lib/data-fields/data-field.theme.scss
index ba4735d179..54abe0026d 100644
--- a/projects/netgrif-components/src/lib/data-fields/data-field.theme.scss
+++ b/projects/netgrif-components/src/lib/data-fields/data-field.theme.scss
@@ -4,25 +4,149 @@
 @import "quill/dist/quill.core.css";
 @import '~node_modules/@covalent/markdown/markdown-theme';
 
-@mixin data-field-component($theme) {
+@mixin data-field-component($theme, $nae-variables) {
     $primary: map-get($theme, primary);
     $secondary: map-get($theme, accent);
     $warn: map-get($theme, warn);
 
-    $color-text-disabled: #64748B;
-    $color-outline-disabled: #CBD5E1;
+    $color-text-disabled: map-get($nae-variables, datafield-text-disabled);
+    $color-outline-disabled: map-get($nae-variables, datafield-outline-disabled);
 
-    $color-text-enabled: #64748B;
-    $color-outline-enabled: #64748B;
+    $color-text-enabled: map-get($nae-variables, datafield-text-enabled);
+    $color-outline-enabled: map-get($nae-variables, datafield-outline-enabled);
+
+    // DATAFIELD PALETTE CUSTOMIZATION
+    .enum-icon-item {
+        color: $color-text-enabled;
+    }
+    .enum-icon-item-disabled {
+        color: map-get($nae-variables,datafield-icon-disabled);
+    }
+    .stepper-arrow-text {
+        color: $color-text-enabled;
+    }
+    .stepper-disabled .stepper-arrow-text {
+        color: map-get($nae-variables,datafield-icon-disabled);
+    }
+    .stepper-tooltip-text {
+        color: map-get($nae-variables,datafield-stepper-color);
+    }
+    .vertical-state {
+        color: map-get($nae-variables,datafield-stepper-color);
+    }
+    .horizontal-state {
+        color: map-get($nae-variables,datafield-stepper-color);
+    }
+    .stepper-min-height {
+        background-color: map-get($nae-variables,datafield-stepper-background);
+    }
 
     .editor-preview > h1 {
-        border-bottom: 1px solid #ddd;
+        border-bottom: 1px solid map-get($nae-variables, border);
     }
 
     .editor-preview > h2 {
-        border-bottom: 1px solid #eee;
+        border-bottom: 1px solid map-get($nae-variables, border);
+    }
+
+    .input-placeholder {
+        color: $color-text-enabled;
+    }
+
+    .form-input {
+        background: map-get($nae-variables, datafield-background);
+        color: $color-text-enabled;
+        border: 1px solid $color-text-enabled;
+    }
+
+    .form-input-disabled, .form-input-disabled:focus-within {
+        border-color: $color-outline-disabled !important;
+    }
+
+    .form-input-disabled {
+        border-color: $color-outline-disabled !important;
+    }
+
+    .no-cursor {
+        color: $color-text-disabled;
+    }
+
+    .file-field-label {
+        color: $color-text-enabled;
+    }
+
+    .selected-language-value {
+        color: $color-text-enabled;
+    }
+
+    .selected-language-value:disabled {
+        color: $color-text-disabled;
+    }
+
+    .form-input-interfield {
+        background: map-get($nae-variables, datafield-background);
+        color: $color-text-enabled;
+        border: 1px solid
+    }
+
+    .form-input-interfield:hover {
+        border: solid 2px $color-outline-enabled;
+    }
+
+    .language-svg-icon {
+        border: solid 1px $color-outline-enabled;
+    }
+
+    .filled-language-row {
+        background-color: map-get($nae-variables, datafield-background);
+    }
+
+    .filled-language-row:not(:last-child) {
+        border-bottom: 1px solid $color-outline-enabled;
+    }
+
+    .filled-languages-wrapper {
+        border-radius: 0 0 6px 6px;
+        border-left: 1px solid $color-outline-enabled;
+        border-right: 1px solid $color-outline-enabled;
+        border-bottom: 1px solid $color-outline-enabled;
+    }
+
+    .i18n-label {
+        color: $color-text-enabled;
+    }
+
+    .required-label-color {
+        color: map-get($nae-variables, datafield-required-label);
+    }
+
+    .disabled-color {
+        color: map-get($nae-variables, datafield-icon-disabled);
+    }
+
+    .html-border {
+        border: 1px solid $color-outline-disabled;
+    }
+
+    .rich-border {
+        border: 1px solid $color-outline-disabled;
+    }
+
+    .signature-canvas {
+        border: 1px solid $color-outline-enabled;
+        -webkit-text-stroke-color: map-get($nae-variables, datafield-canvas-stroke);
     }
 
+    .canvas-background-disabled {
+        background-color: map-get($nae-variables, datafield-canvas-disabled);
+    }
+
+    .user-field-label {
+        color: $color-text-enabled;
+    }
+
+    // END BLOCK
+
     .mat-option {
         height: auto !important;
         min-height: 48px;
@@ -271,12 +395,12 @@
 
         .mat-form-field-appearance-outline .mat-form-field-outline {
             color: $color-outline-enabled;
-            background-color: #FFFFFF;
+            background-color: map-get($nae-variables, datafield-background);
             border-radius: 6px;
         }
 
         .ql-toolbar {
-            background-color: #FFFFFF;
+            background-color: map-get($nae-variables, datafield-background);
         }
 
         .ql-editor {
@@ -285,7 +409,7 @@
         }
 
         .ql-editor.ql-blank {
-            background-color: #FFFFFF;
+            background-color: map-get($nae-variables, datafield-background);
         }
 
         .mat-form-field-appearance-outline .mat-form-field-outline-start {
@@ -431,7 +555,7 @@
     }
 
     :host ::ng-deep .editor-toolbar {
-        background-color: #FFFFFF !important;
+        background-color: map-get($nae-variables, datafield-background) !important;
         border-top: 1px solid $color-outline-enabled !important;
         border-left: 1px solid $color-outline-enabled !important;
         border-right: 1px solid $color-outline-enabled !important;
@@ -486,10 +610,3 @@ nc-user-list-default-field .mat-form-field .mat-form-field-prefix {
     top: 0 !important;
     padding-right: 4px !important;
 }
-
-:host .editor-toolbar {
-    background-color: #FFFFFF !important;
-    border-top: 1px solid #FFFFFF !important;
-    border-left: 1px solid #FFFFFF !important;
-    border-right: 1px solid #FFFFFF !important;
-}
diff --git a/projects/netgrif-components/src/lib/data-fields/enumeration-field/enumeration-icon-field/enumeration-icon-field.component.scss b/projects/netgrif-components/src/lib/data-fields/enumeration-field/enumeration-icon-field/enumeration-icon-field.component.scss
index 2e1f0318d4..0cbf51c910 100644
--- a/projects/netgrif-components/src/lib/data-fields/enumeration-field/enumeration-icon-field/enumeration-icon-field.component.scss
+++ b/projects/netgrif-components/src/lib/data-fields/enumeration-field/enumeration-icon-field/enumeration-icon-field.component.scss
@@ -5,7 +5,6 @@
     line-height: 24px;
     letter-spacing: -0.2px;
     text-align: left;
-    color: #64748B;
     text-decoration: none;
     padding: 8px 0;
 }
diff --git a/projects/netgrif-components/src/lib/data-fields/enumeration-field/enumeration-stepper-field/enumeration-stepper-field.component.scss b/projects/netgrif-components/src/lib/data-fields/enumeration-field/enumeration-stepper-field/enumeration-stepper-field.component.scss
index dd874b1e34..55cefd0cd5 100644
--- a/projects/netgrif-components/src/lib/data-fields/enumeration-field/enumeration-stepper-field/enumeration-stepper-field.component.scss
+++ b/projects/netgrif-components/src/lib/data-fields/enumeration-field/enumeration-stepper-field/enumeration-stepper-field.component.scss
@@ -37,7 +37,6 @@
 }
 
 .horizontal-state {
-    color: white;
     border-radius: 50%;
     height: 24px;
     width: 24px;
@@ -112,7 +111,6 @@
 }
 
 .vertical-state {
-    color: white;
     border-radius: 50%;
     height: 24px;
     width: 24px;
@@ -158,14 +156,12 @@
 }
 
 .stepper-tooltip-text {
-    color: #FFFFFF;
     padding: 10px 15px;
 }
 
 .stepper-min-height {
     border-radius: 10px;
     min-height: 70px;
-    background-color: #F9F9F9;
     padding: 0 32px;
 }
 
@@ -174,7 +170,6 @@
     font-size: 16px;
     letter-spacing: -0.2;
     line-height: 24px;
-    color: #64748B;
     cursor: pointer;
     text-align: center;
 }
@@ -184,7 +179,6 @@
 }
 
 .stepper-disabled .stepper-arrow-text {
-    color: #94A3B8;
     cursor: alias;
 }
 
diff --git a/projects/netgrif-components/src/lib/data-fields/file-field/file-default-field/file-default-field.component.scss b/projects/netgrif-components/src/lib/data-fields/file-field/file-default-field/file-default-field.component.scss
index bb3bf1f5d9..c8c6172fd2 100644
--- a/projects/netgrif-components/src/lib/data-fields/file-field/file-default-field/file-default-field.component.scss
+++ b/projects/netgrif-components/src/lib/data-fields/file-field/file-default-field/file-default-field.component.scss
@@ -17,10 +17,6 @@
     cursor: pointer;
 }
 
-.input-placeholder {
-    color: #64748B;
-}
-
 .button-icon-input {
     padding: 2px !important;
 }
@@ -31,10 +27,7 @@
 }
 
 .form-input {
-    background: #FFFFFF;
-    color: #64748B;
     outline: none;
-    border: 1px solid #64748B;
     text-align: left;
     font-size: 14px;
     line-height: 20px;
@@ -54,7 +47,6 @@
 
 .form-input-disabled, .form-input-disabled:focus-within {
     background: transparent !important;
-    border-color: #CBD5E1 !important;
 }
 
 .form-input-disabled:hover, .form-input-disabled:focus-within  {
@@ -79,7 +71,6 @@
 
 .no-cursor {
     cursor: default !important;
-    color: #64748B;
 }
 
 .border-LGBTQ {
@@ -127,7 +118,6 @@
 .file-field-label {
     transform: translate(0.4em,-0.45em) scale(.75);
     transform-origin: left;
-    color: #64748B;
     background: transparent;
     width: fit-content;
     padding: 0 0.5em;
diff --git a/projects/netgrif-components/src/lib/data-fields/file-list-field/file-list-default-field/file-list-default-field.component.scss b/projects/netgrif-components/src/lib/data-fields/file-list-field/file-list-default-field/file-list-default-field.component.scss
index 64aa7a338f..e58bae7818 100644
--- a/projects/netgrif-components/src/lib/data-fields/file-list-field/file-list-default-field/file-list-default-field.component.scss
+++ b/projects/netgrif-components/src/lib/data-fields/file-list-field/file-list-default-field/file-list-default-field.component.scss
@@ -17,9 +17,7 @@
     cursor: pointer;
 }
 
-.input-placeholder {
-    color: #64748B;
-}
+
 
 .button-icon-input {
     padding: 2px !important;
@@ -31,10 +29,7 @@
 }
 
 .form-input {
-    background: #FFFFFF;
-    color: #64748B;
     outline: none;
-    border: 1px solid #64748B;
     text-align: left;
     font-size: 14px;
     line-height: 20px;
@@ -52,7 +47,6 @@
 
 .form-input-disabled {
     background: transparent !important;
-    border-color: #CBD5E1 !important;
 }
 
 .form-input-disabled:hover {
@@ -76,7 +70,6 @@
 
 .no-cursor {
     cursor: default !important;
-    color: #64748B;
 }
 
 .border-default {
@@ -96,7 +89,6 @@
 .file-field-label {
     transform: translate(0.4em,-0.45em) scale(.75);
     transform-origin: left;
-    color: #64748B;
     background: transparent;
     width: fit-content;
     padding: 0 0.5em;
diff --git a/projects/netgrif-components/src/lib/data-fields/i18n-field/i18n-text-field/i18n-text-field.component.scss b/projects/netgrif-components/src/lib/data-fields/i18n-field/i18n-text-field/i18n-text-field.component.scss
index 63556224be..65a6cf5d1d 100644
--- a/projects/netgrif-components/src/lib/data-fields/i18n-field/i18n-text-field/i18n-text-field.component.scss
+++ b/projects/netgrif-components/src/lib/data-fields/i18n-field/i18n-text-field/i18n-text-field.component.scss
@@ -11,19 +11,11 @@
     font-size: 14px;
     border: 0;
     margin-left: 8px;
-    color: #64748B;
     background: transparent;
 }
 
-.selected-language-value:disabled {
-    color: #94A3B8;
-}
-
 .form-input-interfield {
-    background: #FFFFFF;
-    color: #64748B;
     outline: none;
-    border: 1px solid #64748B;
     text-align: left;
     font-size: 14px;
     line-height: 15.75px;
@@ -33,10 +25,6 @@
     height: 44px;
 }
 
-.form-input-interfield:hover {
-    border: solid 2px #64748B;
-}
-
 .button-icon-input {
     padding: 2px;
 }
@@ -66,18 +54,9 @@
     margin: 0 8px;
 }
 
-.language-svg-icon {
-    border: solid 1px #64748B;
-}
-
 .filled-language-row {
     min-height: 28px;
     padding: 4px 0;
-    background-color: #FFFFFF;
-}
-
-.filled-language-row:not(:last-child) {
-    border-bottom: 1px solid #64748B;
 }
 
 .filled-language-row:last-child {
@@ -87,9 +66,6 @@
 
 .filled-languages-wrapper {
     border-radius: 0 0 6px 6px;
-    border-left: 1px solid #64748B;
-    border-right: 1px solid #64748B;
-    border-bottom: 1px solid #64748B;
     margin-top: -5px;
     padding-top: 5px;
     transform-origin: top;
@@ -127,7 +103,6 @@
 .i18n-label {
     transform: translate(0.4em,-0.4em) scale(.75);
     transform-origin: left;
-    color: #64748B;
     background: transparent;
     width: fit-content;
     padding: 0 0.5em;
@@ -139,7 +114,6 @@
 
 .form-input-disabled {
     background: transparent !important;
-    border-color: #CBD5E1 !important;
 }
 
 .form-input-disabled:hover {
diff --git a/projects/netgrif-components/src/lib/data-fields/required-label/required-label.component.scss b/projects/netgrif-components/src/lib/data-fields/required-label/required-label.component.scss
index 327cf0dda3..8b13789179 100644
--- a/projects/netgrif-components/src/lib/data-fields/required-label/required-label.component.scss
+++ b/projects/netgrif-components/src/lib/data-fields/required-label/required-label.component.scss
@@ -1,7 +1 @@
-.required-label-color {
-    color: red;
-}
 
-.disabled-color {
-    color: #94A3B8;
-}
diff --git a/projects/netgrif-components/src/lib/data-fields/text-field/html-textarea-field/html-textarea-field.component.html b/projects/netgrif-components/src/lib/data-fields/text-field/html-textarea-field/html-textarea-field.component.html
index de91f785b3..e747907735 100644
--- a/projects/netgrif-components/src/lib/data-fields/text-field/html-textarea-field/html-textarea-field.component.html
+++ b/projects/netgrif-components/src/lib/data-fields/text-field/html-textarea-field/html-textarea-field.component.html
@@ -3,7 +3,7 @@
                   [modules]="quillModules" [bounds]="quillContainer" placeholder="{{ dataField.placeholder |translate}}"></quill-editor>
     <mat-error *ngIf="dataField.isInvalid(formControlRef)">{{getErrorMessage()}}</mat-error>
     <input type="hidden" [formControl]="formControlRef">
-    <div *ngIf="formControlRef.disabled" class="ql-snow user-select-auto" [ngClass]="{'border' : dataField.materialAppearance === 'outline'}">
+    <div *ngIf="formControlRef.disabled" class="ql-snow user-select-auto" [ngClass]="{'html-border' : dataField.materialAppearance === 'outline'}">
         <div [ngClass]="{'ql-editor' : dataField.materialAppearance === 'outline'}" [innerHTML]="disabledDisplay"></div>
     </div>
 </div>
diff --git a/projects/netgrif-components/src/lib/data-fields/text-field/html-textarea-field/html-textarea-field.component.scss b/projects/netgrif-components/src/lib/data-fields/text-field/html-textarea-field/html-textarea-field.component.scss
index 0007c60f84..12c667b140 100644
--- a/projects/netgrif-components/src/lib/data-fields/text-field/html-textarea-field/html-textarea-field.component.scss
+++ b/projects/netgrif-components/src/lib/data-fields/text-field/html-textarea-field/html-textarea-field.component.scss
@@ -2,8 +2,7 @@
     height: 100%;
 }
 
-.border {
-    border: 1px solid #CBD5E1;
+.html-border {
     border-radius: 6px;
     padding: 10px;
     z-index: 1;
diff --git a/projects/netgrif-components/src/lib/data-fields/text-field/rich-textarea-field/rich-textarea-field.component.html b/projects/netgrif-components/src/lib/data-fields/text-field/rich-textarea-field/rich-textarea-field.component.html
index 5715512e0c..89470a7b35 100644
--- a/projects/netgrif-components/src/lib/data-fields/text-field/rich-textarea-field/rich-textarea-field.component.html
+++ b/projects/netgrif-components/src/lib/data-fields/text-field/rich-textarea-field/rich-textarea-field.component.html
@@ -4,7 +4,7 @@
 
     <input type="hidden" [formControl]="formControlRef">
 
-    <div [ngClass]="{'border': dataField.materialAppearance === 'outline'}" *ngIf="formControlRef.disabled">
+    <div [ngClass]="{'rich-border': dataField.materialAppearance === 'outline'}" *ngIf="formControlRef.disabled">
         <td-markdown>{{dataField.value}}</td-markdown>
     </div>
 </div>
diff --git a/projects/netgrif-components/src/lib/data-fields/text-field/rich-textarea-field/rich-textarea-field.component.scss b/projects/netgrif-components/src/lib/data-fields/text-field/rich-textarea-field/rich-textarea-field.component.scss
index 47f0112cb3..80ad1e6bd4 100644
--- a/projects/netgrif-components/src/lib/data-fields/text-field/rich-textarea-field/rich-textarea-field.component.scss
+++ b/projects/netgrif-components/src/lib/data-fields/text-field/rich-textarea-field/rich-textarea-field.component.scss
@@ -2,8 +2,7 @@
     height: 100%;
 }
 
-.border {
-    border: 1px solid #CBD5E1;
+.rich-border {
     border-radius: 6px;
     padding: 10px;
     z-index: 1;
diff --git a/projects/netgrif-components/src/lib/data-fields/text-field/signature-pad-field/signature-pad-field.component.html b/projects/netgrif-components/src/lib/data-fields/text-field/signature-pad-field/signature-pad-field.component.html
index 2e85fa50be..28e297d4cd 100644
--- a/projects/netgrif-components/src/lib/data-fields/text-field/signature-pad-field/signature-pad-field.component.html
+++ b/projects/netgrif-components/src/lib/data-fields/text-field/signature-pad-field/signature-pad-field.component.html
@@ -1,7 +1,7 @@
 <div class="canvas-div" #canvasDiv [ngClass]="{'canvas-disabled': formControlRef.disabled}" (blur)="mouseUp($event)">
     <canvas (mousedown)="onMouseDown($event)" (mousemove)="onMouseMove($event)" (touchmove)="onMouseMove($event)"
             (touchstart)="onMouseDown($event)" #signPad width="{{canvasWidth}}" (blur)="mouseUp($event)" height="{{canvasHeight}}"
-            class="canvas" [ngClass]="{'canvas-background-disabled': formControlRef.disabled}">
+            class="signature-canvas" [ngClass]="{'canvas-background-disabled': formControlRef.disabled}">
     </canvas>
 </div>
 <button mat-stroked-button color="primary" *ngIf="!formControlRef.disabled" (click)="clearSignature()">{{'dataField.clear' | translate }}</button>
diff --git a/projects/netgrif-components/src/lib/data-fields/text-field/signature-pad-field/signature-pad-field.component.scss b/projects/netgrif-components/src/lib/data-fields/text-field/signature-pad-field/signature-pad-field.component.scss
index 65d8c276a5..5ba1cf9e23 100644
--- a/projects/netgrif-components/src/lib/data-fields/text-field/signature-pad-field/signature-pad-field.component.scss
+++ b/projects/netgrif-components/src/lib/data-fields/text-field/signature-pad-field/signature-pad-field.component.scss
@@ -3,10 +3,8 @@
     height: 100%;
 }
 
-.canvas {
-    border: 1px solid #64748B;
+.signature-canvas {
     border-radius: 6px;
-    -webkit-text-stroke-color: #000;
 }
 
 .canvas-disabled {
@@ -15,6 +13,5 @@
 }
 
 .canvas-background-disabled {
-    background-color: #CBD5E1;
     pointer-events: none;
 }
diff --git a/projects/netgrif-components/src/lib/data-fields/user-field/user-default-field/user-default-field.component.scss b/projects/netgrif-components/src/lib/data-fields/user-field/user-default-field/user-default-field.component.scss
index 60607082cc..30e10f762c 100644
--- a/projects/netgrif-components/src/lib/data-fields/user-field/user-default-field/user-default-field.component.scss
+++ b/projects/netgrif-components/src/lib/data-fields/user-field/user-default-field/user-default-field.component.scss
@@ -8,10 +8,6 @@
     text-overflow: ellipsis;
 }
 
-.input-placeholder {
-    color: #64748B;
-}
-
 .button-icon-input {
     padding: 2px !important;
 }
@@ -22,10 +18,7 @@
 }
 
 .form-input {
-    background: #FFFFFF;
-    color: #64748B;
     outline: none;
-    border: 1px solid #64748B;
     text-align: left;
     font-size: 14px;
     line-height: 20px;
@@ -43,7 +36,6 @@
 
 .form-input-disabled {
     background: transparent !important;
-    border-color: #CBD5E1 !important;
 }
 
 .form-input-disabled:hover {
@@ -69,7 +61,6 @@
 
 .no-cursor {
     cursor: default !important;
-    color: #64748B;
 }
 
 .border-default {
@@ -90,7 +81,6 @@
 .user-field-label {
     transform: translate(0.4em,-0.45em) scale(.75);
     transform-origin: left;
-    color: #64748B;
     background: transparent;
     width: fit-content;
     padding: 0 0.5em;
diff --git a/projects/netgrif-components/src/lib/data-fields/user-field/user-field.component.scss b/projects/netgrif-components/src/lib/data-fields/user-field/user-field.component.scss
index 60607082cc..e69de29bb2 100644
--- a/projects/netgrif-components/src/lib/data-fields/user-field/user-field.component.scss
+++ b/projects/netgrif-components/src/lib/data-fields/user-field/user-field.component.scss
@@ -1,105 +0,0 @@
-.do-not-click:hover {
-    cursor: not-allowed;
-}
-
-.input-name-ellipsis {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.input-placeholder {
-    color: #64748B;
-}
-
-.button-icon-input {
-    padding: 2px !important;
-}
-
-.full-width {
-    width: 100%;
-    min-width: 100%;
-}
-
-.form-input {
-    background: #FFFFFF;
-    color: #64748B;
-    outline: none;
-    border: 1px solid #64748B;
-    text-align: left;
-    font-size: 14px;
-    line-height: 20px;
-    border-radius: 6px;
-    min-width: 5px;
-    padding: 8px 15px 8px 15px;
-    box-sizing: border-box;
-    height: 44px;
-}
-
-.form-input:hover {
-    border-width: 2px;
-    padding-left: 1px !important;
-}
-
-.form-input-disabled {
-    background: transparent !important;
-    border-color: #CBD5E1 !important;
-}
-
-.form-input-disabled:hover {
-    border-width: 1px;
-    padding: 2px !important;
-}
-
-.user-hint-error {
-    font-size: 75%;
-    padding: 0 1em;
-    width: unset;
-
-    position: absolute;
-    margin-top: 0.5em;
-    top: calc(100% - 2em);
-}
-
-.image-preview {
-    width: auto;
-    height: auto;
-    cursor: pointer;
-}
-
-.no-cursor {
-    cursor: default !important;
-    color: #64748B;
-}
-
-.border-default {
-    border-width: 1px;
-    border-style: solid;
-    border-color: black;
-}
-
-@media only screen and (max-width: 959.99px) {
-    .input-name-ellipsis {
-        word-break: break-word;
-        white-space: normal;
-        overflow-y: auto;
-        max-height: 40px;
-    }
-}
-
-.user-field-label {
-    transform: translate(0.4em,-0.45em) scale(.75);
-    transform-origin: left;
-    color: #64748B;
-    background: transparent;
-    width: fit-content;
-    padding: 0 0.5em;
-    z-index: 5;
-    height: 0;
-    position: relative;
-}
-
-.netgrif-user-padding {
-    padding-bottom: 13px;
-    position: relative;
-}
diff --git a/projects/netgrif-components/src/lib/dialog/admin-impersonate-dialog/admin-impersonate-dialog.component.scss b/projects/netgrif-components/src/lib/dialog/admin-impersonate-dialog/admin-impersonate-dialog.component.scss
index 4e2ae23f22..c181660914 100644
--- a/projects/netgrif-components/src/lib/dialog/admin-impersonate-dialog/admin-impersonate-dialog.component.scss
+++ b/projects/netgrif-components/src/lib/dialog/admin-impersonate-dialog/admin-impersonate-dialog.component.scss
@@ -10,7 +10,6 @@
 
 .prefix-icon {
     font-size: 18px;
-    color: #64748B;
 }
 
 .height-100 {
diff --git a/projects/netgrif-components/src/lib/dialog/dialog.theme.scss b/projects/netgrif-components/src/lib/dialog/dialog.theme.scss
index 004beea13a..418b83b473 100644
--- a/projects/netgrif-components/src/lib/dialog/dialog.theme.scss
+++ b/projects/netgrif-components/src/lib/dialog/dialog.theme.scss
@@ -6,7 +6,7 @@
     }
 }
 
-@mixin dialog-theme($theme) {
+@mixin dialog-theme($theme, $nae-variables) {
     .dialog-content-margin {
         margin-bottom: 16px;
     }
@@ -47,7 +47,7 @@
         font-size: 20px;
         line-height: 24px;
         letter-spacing: 0.15px;
-        color: #1E293B;
+        color: map-get($theme, 800);
     }
 
     .mat-dialog-container {
@@ -59,5 +59,17 @@
             top: unset;
         }
     }
+
+    .prefix-icon {
+        color: map-get($nae-variables, base-color);
+    }
+
+    .upper-divider {
+        border-top-color: map-get($theme, 800);
+    }
+
+    .version-span {
+        color: map-get($nae-variables, base-color);
+    }
 }
 
diff --git a/projects/netgrif-components/src/lib/dialog/multi-user-assign-dialog/multi-user-assign-dialog.component.scss b/projects/netgrif-components/src/lib/dialog/multi-user-assign-dialog/multi-user-assign-dialog.component.scss
index c307782099..2736aab3da 100644
--- a/projects/netgrif-components/src/lib/dialog/multi-user-assign-dialog/multi-user-assign-dialog.component.scss
+++ b/projects/netgrif-components/src/lib/dialog/multi-user-assign-dialog/multi-user-assign-dialog.component.scss
@@ -10,7 +10,6 @@
 
 .prefix-icon {
     font-size: 18px;
-    color: #64748B;
 }
 
 .height-100 {
diff --git a/projects/netgrif-components/src/lib/dialog/new-case-dialog/new-case-dialog.component.scss b/projects/netgrif-components/src/lib/dialog/new-case-dialog/new-case-dialog.component.scss
index b638a15503..daa7799e48 100644
--- a/projects/netgrif-components/src/lib/dialog/new-case-dialog/new-case-dialog.component.scss
+++ b/projects/netgrif-components/src/lib/dialog/new-case-dialog/new-case-dialog.component.scss
@@ -1,6 +1,5 @@
-.version-span{
+.version-span {
     padding-left: 8px;
-    color: gray;
 }
 
 .spinner-padding {
diff --git a/projects/netgrif-components/src/lib/dialog/task-view-dialog/task-view-dialog.component.scss b/projects/netgrif-components/src/lib/dialog/task-view-dialog/task-view-dialog.component.scss
index b51bae35d1..c4ff37f237 100644
--- a/projects/netgrif-components/src/lib/dialog/task-view-dialog/task-view-dialog.component.scss
+++ b/projects/netgrif-components/src/lib/dialog/task-view-dialog/task-view-dialog.component.scss
@@ -57,7 +57,6 @@
 
 .upper-divider {
     border-top-width: 20px;
-    border-top-color: #023b7e;
     border-radius: 4px;
     margin-bottom: 10px;
 }
diff --git a/projects/netgrif-components/src/lib/dialog/user-assign-dialog/user-assign-dialog.component.scss b/projects/netgrif-components/src/lib/dialog/user-assign-dialog/user-assign-dialog.component.scss
index c307782099..2736aab3da 100644
--- a/projects/netgrif-components/src/lib/dialog/user-assign-dialog/user-assign-dialog.component.scss
+++ b/projects/netgrif-components/src/lib/dialog/user-assign-dialog/user-assign-dialog.component.scss
@@ -10,7 +10,6 @@
 
 .prefix-icon {
     font-size: 18px;
-    color: #64748B;
 }
 
 .height-100 {
diff --git a/projects/netgrif-components/src/lib/header/header-modes/loading-mode/loading-mode.component.scss b/projects/netgrif-components/src/lib/header/header-modes/loading-mode/loading-mode.component.scss
index a7d4f8f274..cfa785229d 100644
--- a/projects/netgrif-components/src/lib/header/header-modes/loading-mode/loading-mode.component.scss
+++ b/projects/netgrif-components/src/lib/header/header-modes/loading-mode/loading-mode.component.scss
@@ -6,7 +6,6 @@
 .phl-col {
     height: 20px;
     flex: 0 0 55%;
-    background-color: #ced4da;
     border-radius: 6px;
 
 }
@@ -25,13 +24,6 @@
         bottom: 0;
         left: 0;
         transform: translateX(-100%);
-        background-image: linear-gradient(
-                90deg,
-                rgba(#fff, 0) 0,
-                rgba(#fff, 0.2) 20%,
-                rgba(#fff, 0.5) 60%,
-                rgba(#fff, 0)
-        );
         animation: shimmer 1s infinite;
         content: '';
     }
diff --git a/projects/netgrif-components/src/lib/header/header-modes/sort-mode/sort-mode.component.scss b/projects/netgrif-components/src/lib/header/header-modes/sort-mode/sort-mode.component.scss
index a77ff55e4b..86ff1afd0f 100644
--- a/projects/netgrif-components/src/lib/header/header-modes/sort-mode/sort-mode.component.scss
+++ b/projects/netgrif-components/src/lib/header/header-modes/sort-mode/sort-mode.component.scss
@@ -4,7 +4,6 @@
     font-size: 14px;
     line-height: 20px;
     letter-spacing: 0.1px;
-    color: #64748B;
 }
 
 .checkbox-padding {
diff --git a/projects/netgrif-components/src/lib/header/header.theme.scss b/projects/netgrif-components/src/lib/header/header.theme.scss
index f4ff6a3ffb..6d75b46b58 100644
--- a/projects/netgrif-components/src/lib/header/header.theme.scss
+++ b/projects/netgrif-components/src/lib/header/header.theme.scss
@@ -1,6 +1,6 @@
 @use '@angular/material' as mat;
 
-@mixin header-component($theme) {
+@mixin header-component($theme, $nae-variables) {
     $primary: map-get($theme, primary);
     .active-header-item {
         background: rgba(mat.get-color-from-palette($primary), 0.3);
@@ -11,4 +11,25 @@
             caret-color: mat.get-contrast-color-from-palette($primary, 500) !important;
         }
     }
+
+    .header-text {
+        color: map-get($nae-variables, base-color);
+    }
+
+    .phl-col {
+        background-color: map-get($nae-variables, loading-placeholder-col);
+    }
+
+    .phl-item {
+        background-color: map-get($nae-variables, loading-placeholder);
+        &::after {
+            background-image: linear-gradient(
+                    90deg,
+                    rgba(map-get($nae-variables, loading-placeholder), 0) 0,
+                    rgba(map-get($nae-variables, loading-placeholder), 0.2) 20%,
+                    rgba(map-get($nae-variables, loading-placeholder), 0.5) 60%,
+                    rgba(map-get($nae-variables, loading-placeholder), 0)
+            );
+        }
+    }
 }
diff --git a/projects/netgrif-components/src/lib/navigation/navigation-double-drawer/navigation-double-drawer.component.html b/projects/netgrif-components/src/lib/navigation/navigation-double-drawer/navigation-double-drawer.component.html
index 3ecce1390c..19491852bf 100644
--- a/projects/netgrif-components/src/lib/navigation/navigation-double-drawer/navigation-double-drawer.component.html
+++ b/projects/netgrif-components/src/lib/navigation/navigation-double-drawer/navigation-double-drawer.component.html
@@ -110,7 +110,7 @@
 
 <ng-template #defaultLeftSide>
 
-    <div class="height-60 border-bottom" fxLayoutAlign="center center" fxHide.lt-md>
+    <div class="height-60 drawer-border-bottom" fxLayoutAlign="center center" fxHide.lt-md>
         <button mat-icon-button (click)="toggleRightMenu()" class="menu-button mat-typography menu-font-color">
             <mat-icon>menu</mat-icon>
         </button>
@@ -146,7 +146,7 @@
 </ng-template>
 
 <ng-template #defaultRightSide>
-    <div class="logo border-bottom" fxLayoutAlign="center center" fxHide.lt-md>
+    <div class="logo drawer-border-bottom" fxLayoutAlign="center center" fxHide.lt-md>
         <img *ngIf="image !== undefined" [alt]="imageAlt" [src]="image" class="logoimg"
              [routerLink]="imageRouterLink !== undefined ? imageRouterLink : []">
     </div>
diff --git a/projects/netgrif-components/src/lib/navigation/navigation-double-drawer/navigation-double-drawer.component.scss b/projects/netgrif-components/src/lib/navigation/navigation-double-drawer/navigation-double-drawer.component.scss
index 7ca957c50c..d184347e8d 100644
--- a/projects/netgrif-components/src/lib/navigation/navigation-double-drawer/navigation-double-drawer.component.scss
+++ b/projects/netgrif-components/src/lib/navigation/navigation-double-drawer/navigation-double-drawer.component.scss
@@ -42,10 +42,6 @@
     box-shadow: 0px 2px 4px rgba(13, 45, 60, 0.16), 0px 4px 8px rgba(84, 110, 122, 0.16);
 }
 
-.border-bottom {
-    border-bottom: 1px solid #E2E8F0;
-}
-
 .logo {
     height: 60px;
 }
@@ -66,7 +62,6 @@
     height: 40px;
     width: 40px;
     font-size: 40px;
-    color: rgba(0, 0, 0, 0.7);
 }
 
 .icon-container {
@@ -78,10 +73,6 @@
     cursor: pointer;
 }
 
-.menu-font-color {
-    color: rgba(0, 0, 0, 0.7) !important;
-}
-
 .margin-top-65 {
     margin-top: 49px;
 }
@@ -107,7 +98,6 @@
     cursor: pointer;
     padding: 10px 8px;
     margin: 0 8px;
-    color: rgba(0, 0, 0, 0.7);
     position: relative;
     border-radius: 8px;
     font-weight: 500;
@@ -141,7 +131,6 @@
         bottom: 0;
         pointer-events: none;
         border-radius: inherit;
-        background: black;
         transition: opacity 200ms cubic-bezier(0.35, 0, 0.25, 1), background-color 200ms cubic-bezier(0.35, 0, 0.25, 1);
     }
 }
@@ -164,13 +153,11 @@
     height: 33px;
     outline: none !important;
     cursor: pointer;
-    background: #fafafa;
 }
 
 .toolbar {
     min-height: 50px !important;
     height: 50px;
-    border-bottom: 1px solid #E2E8F0;
 }
 
 @media screen and (max-width: 959.99px) {
@@ -240,13 +227,7 @@
     overflow: hidden;
 }
 
-.content-color {
-    background-color: #F8FAFC;
-}
-
-
 .expansion-indicator {
-    color: rgba(0, 0, 0, 0.5);
     margin-right: 10px;
 }
 
@@ -264,10 +245,6 @@
     transform: scale(0.7);
 }
 
-.order-text {
-    color: rgba(0, 0, 0, 0.7);
-}
-
 .order-icon-wrapper {
     margin-bottom: 0;
 }
diff --git a/projects/netgrif-components/src/lib/navigation/navigation.theme.scss b/projects/netgrif-components/src/lib/navigation/navigation.theme.scss
index 73565b89e3..5452d429df 100644
--- a/projects/netgrif-components/src/lib/navigation/navigation.theme.scss
+++ b/projects/netgrif-components/src/lib/navigation/navigation.theme.scss
@@ -1,17 +1,58 @@
 @use '@angular/material' as mat;
 
-@mixin navigation-theme($theme) {
+@mixin navigation-theme($theme, $nae-variables) {
     $primary: map-get($theme, primary);
     $accent: map-get($theme, accent);
 
+    // DOUBLE DRAWER
+    .drawer-border-bottom {
+        border-bottom: 1px solid map-get($nae-variables, drawer-border);
+    }
+
+    .menu-font-color {
+        color: map-get($nae-variables, drawer-color) !important;
+    }
+
+    .icon-large {
+        color: map-get($nae-variables, drawer-color);
+    }
+
+    .tree-node {
+        color: map-get($nae-variables, drawer-color);
+        .menu-item-focus-overlay {
+            background: map-get($nae-variables, drawer-color);
+        }
+    }
+
+    .logoimg-tool {
+        background: map-get($nae-variables, drawer-logo);
+    }
+
+    .toolbar {
+        border-bottom: 1px solid map-get($nae-variables, drawer-border);
+    }
+
+    .content-color {
+        background-color: map-get($nae-variables, drawer-background);
+    }
+
+    .expansion-indicator {
+        color: map-get($nae-variables, drawer-color);
+    }
+
+    .order-text {
+        color: map-get($nae-variables, drawer-color);
+    }
+
+    // END
     .active-navigation-route {
         background-color: rgba(mat.get-color-from-palette($accent), 0.3);
     }
 
     .active-rail {
-        background: white;
-        border-bottom: 1px solid #dddddd;
-        border-top: 1px solid #dddddd;
+        background: map-get($nae-variables, rail-background);
+        border-bottom: 1px solid map-get($nae-variables, rail-border);
+        border-top: 1px solid map-get($nae-variables, drail-border);
         border-left: 3px solid mat.get-color-from-palette($primary);
 
         .icon-large {
@@ -20,7 +61,7 @@
     }
 
     .rail-color {
-        background: #F8FAFC;
+        background: map-get($nae-variables, drawer-background);
     }
 
     .rail-selected-color {
diff --git a/projects/netgrif-components/src/lib/panel/panel.component.scss b/projects/netgrif-components/src/lib/panel/panel.component.scss
index 5858601098..9946f5104f 100644
--- a/projects/netgrif-components/src/lib/panel/panel.component.scss
+++ b/projects/netgrif-components/src/lib/panel/panel.component.scss
@@ -1,8 +1,3 @@
-.mat-expansion-panel-header {
-    border-bottom: 1px solid rgba(0, 0, 0, .03);
-    color: rgba(0, 0, 0, .87);
-}
-
 .header-padding {
     padding: 0 16px;
 }
diff --git a/projects/netgrif-components/src/lib/panel/panel.theme.scss b/projects/netgrif-components/src/lib/panel/panel.theme.scss
index a8e113cc59..6c458ec293 100644
--- a/projects/netgrif-components/src/lib/panel/panel.theme.scss
+++ b/projects/netgrif-components/src/lib/panel/panel.theme.scss
@@ -1,6 +1,6 @@
 @use '@angular/material' as mat;
 
-@mixin panel-component($theme) {
+@mixin panel-component($theme, $nae-variables) {
     $primary: map-get($theme, primary);
     $accent: map-get($theme, accent);
     .panel-color:hover {
@@ -73,10 +73,15 @@
     .panel-body {
         .mat-expansion-panel-body {
             padding: 0 !important;
-            background-color: #F8FAFC;
+            background-color: map-get($nae-variables, panel-background);
         }
     }
 
+    .mat-expansion-panel-header {
+        border-bottom: 1px solid map-get($nae-variables, panel-border);
+        color: map-get($nae-variables, panel-color);
+    }
+
     .single-task-fix {
         .mat-expansion-panel-content {
             height: 100% !important;
diff --git a/projects/netgrif-components/src/lib/search/advanced-search/search-clause-component/search-clause.component.scss b/projects/netgrif-components/src/lib/search/advanced-search/search-clause-component/search-clause.component.scss
index 9adee22b64..6dc42ae250 100644
--- a/projects/netgrif-components/src/lib/search/advanced-search/search-clause-component/search-clause.component.scss
+++ b/projects/netgrif-components/src/lib/search/advanced-search/search-clause-component/search-clause.component.scss
@@ -12,6 +12,5 @@
 
 .prefix-icon{
     font-size: 18px;
-    color: #64748B;
 }
 
diff --git a/projects/netgrif-components/src/lib/search/advanced-search/search-clause-component/search-clause.component.theme.scss b/projects/netgrif-components/src/lib/search/advanced-search/search-clause-component/search-clause.component.theme.scss
index 8e919bb9cc..5d6435e6a4 100644
--- a/projects/netgrif-components/src/lib/search/advanced-search/search-clause-component/search-clause.component.theme.scss
+++ b/projects/netgrif-components/src/lib/search/advanced-search/search-clause-component/search-clause.component.theme.scss
@@ -1,9 +1,13 @@
 @use '@angular/material' as mat;
 
-@mixin search-clause-theme($theme) {
+@mixin search-clause-theme($theme, $nae-variables) {
     $primary: map-get($theme, primary);
 
     .clause-body-color {
         background: mat.get-color-from-palette($primary, 100);
     }
+
+    .prefix-icon{
+        color: map-get($nae-variables, base-color);
+    }
 }
diff --git a/projects/netgrif-components/src/lib/search/advanced-search/search-predicate-component/search-predicate.component.scss b/projects/netgrif-components/src/lib/search/advanced-search/search-predicate-component/search-predicate.component.scss
index 414b47216c..a0a085669b 100644
--- a/projects/netgrif-components/src/lib/search/advanced-search/search-predicate-component/search-predicate.component.scss
+++ b/projects/netgrif-components/src/lib/search/advanced-search/search-predicate-component/search-predicate.component.scss
@@ -19,11 +19,6 @@
     margin-left: 4px;
 }
 
-// TODO 19.1.2021 - we might want to get the "white" color from the theme, so that it is not hardcoded
-.white-background {
-    background: #fafafa;
-}
-
 ::ng-deep .mat-form-field-wrapper {
     margin: 0;
     padding-bottom: 0;
@@ -32,7 +27,6 @@
 .mat-form-field-wrapper-search {
     margin: 0 !important;
     border-radius: 5px;
-    background: #fafafa;
     min-width: 250px;
 }
 
@@ -45,7 +39,6 @@
 
 .prefix-icon {
     font-size: 18px;
-    color: #64748B;
 }
 
 @media only screen and (max-width: 599px) {
diff --git a/projects/netgrif-components/src/lib/search/advanced-search/search-predicate-component/search-predicate.component.theme.scss b/projects/netgrif-components/src/lib/search/advanced-search/search-predicate-component/search-predicate.component.theme.scss
index 49c0db9479..9dbbfe24f0 100644
--- a/projects/netgrif-components/src/lib/search/advanced-search/search-predicate-component/search-predicate.component.theme.scss
+++ b/projects/netgrif-components/src/lib/search/advanced-search/search-predicate-component/search-predicate.component.theme.scss
@@ -1,6 +1,6 @@
 @use '@angular/material' as mat;
 
-@mixin search-predicate-theme($theme) {
+@mixin search-predicate-theme($theme, $nae-variables) {
     $primary: map-get($theme, primary);
 
     .predicate-body-color {
@@ -13,4 +13,16 @@
             padding-bottom: 0;
         }
     }
+
+    white-background {
+        background: map-get($nae-variables, search-background);
+    }
+
+    .mat-form-field-wrapper-search {
+        background: map-get($nae-variables, search-background);
+    }
+
+    .prefix-icon {
+        color: map-get($nae-variables, base-color);
+    }
 }
diff --git a/projects/netgrif-components/src/lib/search/fulltext-search-component/fulltext-search.component.scss b/projects/netgrif-components/src/lib/search/fulltext-search-component/fulltext-search.component.scss
index bb4b8c9ff6..7b25c859fb 100644
--- a/projects/netgrif-components/src/lib/search/fulltext-search-component/fulltext-search.component.scss
+++ b/projects/netgrif-components/src/lib/search/fulltext-search-component/fulltext-search.component.scss
@@ -4,7 +4,6 @@
 }
 
 .fulltext-search {
-    background: white;
     min-width: 360px;
     border-radius: 6px;
 }
diff --git a/projects/netgrif-components/src/lib/search/search-component/search.component-theme.scss b/projects/netgrif-components/src/lib/search/search-component/search.component-theme.scss
index fc2603da25..d2f6d1579d 100644
--- a/projects/netgrif-components/src/lib/search/search-component/search.component-theme.scss
+++ b/projects/netgrif-components/src/lib/search/search-component/search.component-theme.scss
@@ -1,6 +1,6 @@
 @use '@angular/material' as mat;
 
-@mixin advanced-search-icon($theme) {
+@mixin advanced-search-icon($theme, $nae-variables) {
     $primary: map-get($theme, primary);
 
     .advanced-search-icon {
@@ -18,4 +18,12 @@
     .mat-menu-item:hover:not([disabled]), .mat-menu-item.cdk-program-focused:not([disabled]), .mat-menu-item.cdk-keyboard-focused:not([disabled]), .mat-menu-item-highlighted:not([disabled]) {
         background: mat.get-color-from-palette($primary, 50) !important;
     }
+
+    .prefix-icon {
+        color: map-get($nae-variables, base-color) !important;
+    }
+
+    .fulltext-search {
+        background: map-get($nae-variables, search-backgroud);
+    }
 }
diff --git a/projects/netgrif-components/src/lib/search/search-component/search.component.scss b/projects/netgrif-components/src/lib/search/search-component/search.component.scss
index 67f1c3fdeb..c27e026813 100644
--- a/projects/netgrif-components/src/lib/search/search-component/search.component.scss
+++ b/projects/netgrif-components/src/lib/search/search-component/search.component.scss
@@ -40,8 +40,3 @@
     min-width: 44px;
     padding: 0;
 }
-
-.prefix-icon {
-    color: #64748B !important;
-}
-
diff --git a/projects/netgrif-components/src/lib/side-menu/content-components/multi-user-assign/multi-user-assign.component.scss b/projects/netgrif-components/src/lib/side-menu/content-components/multi-user-assign/multi-user-assign.component.scss
index d5e7c575f9..4347e6aee4 100644
--- a/projects/netgrif-components/src/lib/side-menu/content-components/multi-user-assign/multi-user-assign.component.scss
+++ b/projects/netgrif-components/src/lib/side-menu/content-components/multi-user-assign/multi-user-assign.component.scss
@@ -1,4 +1,3 @@
-@import '../../side-menu.theme';
 @import '../../../../styles/core';
 
 .user-assign-container {
diff --git a/projects/netgrif-components/src/lib/side-menu/content-components/new-case/new-case.component.scss b/projects/netgrif-components/src/lib/side-menu/content-components/new-case/new-case.component.scss
index 436a817202..fa1e435946 100644
--- a/projects/netgrif-components/src/lib/side-menu/content-components/new-case/new-case.component.scss
+++ b/projects/netgrif-components/src/lib/side-menu/content-components/new-case/new-case.component.scss
@@ -1,8 +1,5 @@
-@import '../../side-menu.theme';
-
 .version-span{
     padding-left: 8px;
-    color: gray;
 }
 
 .spinner-margin {
diff --git a/projects/netgrif-components/src/lib/side-menu/content-components/user-assign/user-assign.component.scss b/projects/netgrif-components/src/lib/side-menu/content-components/user-assign/user-assign.component.scss
index d5e7c575f9..4347e6aee4 100644
--- a/projects/netgrif-components/src/lib/side-menu/content-components/user-assign/user-assign.component.scss
+++ b/projects/netgrif-components/src/lib/side-menu/content-components/user-assign/user-assign.component.scss
@@ -1,4 +1,3 @@
-@import '../../side-menu.theme';
 @import '../../../../styles/core';
 
 .user-assign-container {
diff --git a/projects/netgrif-components/src/lib/side-menu/side-menu.theme.scss b/projects/netgrif-components/src/lib/side-menu/side-menu.theme.scss
index b2cf5d2922..82188ddb35 100644
--- a/projects/netgrif-components/src/lib/side-menu/side-menu.theme.scss
+++ b/projects/netgrif-components/src/lib/side-menu/side-menu.theme.scss
@@ -8,7 +8,7 @@
     }
 }
 
-@mixin side-menu-theme($theme) {
+@mixin side-menu-theme($theme, $nae-variables) {
     $primary: map-get($theme, primary);
 
     .custom-mat-toolbar {
@@ -21,4 +21,8 @@
         line-height: 32px;
         font-family: 'Roboto', sans-serif;
     }
+
+    .version-span {
+        color: map-get($nae-variables, base-color);
+    }
 }
diff --git a/projects/netgrif-components/src/lib/snack-bar/snack-bar.theme.scss b/projects/netgrif-components/src/lib/snack-bar/snack-bar.theme.scss
index 0be0875b31..ae37428101 100644
--- a/projects/netgrif-components/src/lib/snack-bar/snack-bar.theme.scss
+++ b/projects/netgrif-components/src/lib/snack-bar/snack-bar.theme.scss
@@ -6,10 +6,12 @@
     }
 }
 
-.snack-bar-icon-margin {
-    margin-right: 8px;
-}
+@mixin snack-bar-theme($theme, $nae-variables) {
+    .snack-bar-icon-margin {
+        margin-right: 8px;
+    }
 
-.snack-bar-close-icon {
-    color: #dedede
+    .snack-bar-close-icon {
+        color: map-get($nae-variables, snack-bar-icon);
+    }
 }
diff --git a/projects/netgrif-components/src/lib/tabs/tabs.theme.scss b/projects/netgrif-components/src/lib/tabs/tabs.theme.scss
index 2347fd64bb..cb404315f6 100644
--- a/projects/netgrif-components/src/lib/tabs/tabs.theme.scss
+++ b/projects/netgrif-components/src/lib/tabs/tabs.theme.scss
@@ -1,6 +1,6 @@
 @use '@angular/material' as mat;
 
-@mixin tabs-theme($theme) {
+@mixin tabs-theme($theme, $nae-variables) {
     $primary: map-get($theme, primary);
     .center-tabs {
         .mat-tab-labels {
@@ -15,11 +15,11 @@
     }
 
     .mat-tab-label-container {
-        background: white;
+        background: map-get($nae-variables, tabs-background);
     }
 
     .mat-tab-header {
-        border-bottom: 2px solid #E2E8F0;
+        border-bottom: 2px solid map-get($nae-variables, tabs-border);
     }
 
     .icon-tab-color {
diff --git a/projects/netgrif-components/src/lib/task-content/field-component-resolver/field-component-resolver.component.scss b/projects/netgrif-components/src/lib/task-content/field-component-resolver/field-component-resolver.component.scss
index b05a39d6f3..8e495421e5 100644
--- a/projects/netgrif-components/src/lib/task-content/field-component-resolver/field-component-resolver.component.scss
+++ b/projects/netgrif-components/src/lib/task-content/field-component-resolver/field-component-resolver.component.scss
@@ -20,9 +20,7 @@
 .phl-col {
     height: 70px;
     flex: 0 0 90%;
-    background-color: #ced4da;
     border-radius: 8px;
-
 }
 
 .phl-item {
@@ -31,7 +29,6 @@
     display: flex;
     flex-wrap: wrap;
     overflow: hidden;
-    background-color: #fff;
 
     &::after {
         position: absolute;
@@ -40,13 +37,6 @@
         bottom: 0;
         left: 0;
         transform: translateX(-100%);
-        background-image: linear-gradient(
-                90deg,
-                rgba(#fff, 0) 0,
-                rgba(#fff, 0.2) 20%,
-                rgba(#fff, 0.5) 60%,
-                rgba(#fff, 0)
-        );
         animation: shimmer 1s infinite;
         content: '';
     }
diff --git a/projects/netgrif-components/src/lib/task-content/task-content.theme.scss b/projects/netgrif-components/src/lib/task-content/task-content.theme.scss
new file mode 100644
index 0000000000..204404ac41
--- /dev/null
+++ b/projects/netgrif-components/src/lib/task-content/task-content.theme.scss
@@ -0,0 +1,24 @@
+@use '@angular/material' as mat;
+
+@mixin task-content-theme($theme, $nae-variables) {
+    .paper-view-content {
+        border: 1px solid map-get($nae-variables, base-color);
+    }
+
+    .phl-col {
+        background-color: map-get($nae-variables, loading-placeholder-col);
+    }
+
+    .phl-item {
+        background-color: map-get($nae-variables, loading-placeholder);
+        &::after {
+            background-image: linear-gradient(
+                    90deg,
+                    rgba(map-get($nae-variables, loading-placeholder), 0) 0,
+                    rgba(map-get($nae-variables, loading-placeholder), 0.2) 20%,
+                    rgba(map-get($nae-variables, loading-placeholder), 0.5) 60%,
+                    rgba(map-get($nae-variables, loading-placeholder), 0)
+            );
+        }
+    }
+}
diff --git a/projects/netgrif-components/src/lib/task-content/task-content/task-content.component.scss b/projects/netgrif-components/src/lib/task-content/task-content/task-content.component.scss
index 13d1d93d12..0be550dd22 100644
--- a/projects/netgrif-components/src/lib/task-content/task-content/task-content.component.scss
+++ b/projects/netgrif-components/src/lib/task-content/task-content/task-content.component.scss
@@ -5,7 +5,6 @@
 .paper-view-content {
     padding: 20px;
     width: 22cm;
-    border: 1px solid #dddddd;
 }
 
 .scrolling_data {
diff --git a/projects/netgrif-components/src/lib/user/profile/profile.component.html b/projects/netgrif-components/src/lib/user/profile/profile.component.html
index a8edbdae54..287eccca39 100644
--- a/projects/netgrif-components/src/lib/user/profile/profile.component.html
+++ b/projects/netgrif-components/src/lib/user/profile/profile.component.html
@@ -14,7 +14,7 @@ <h1>{{ 'profile.notLogged' | translate}}</h1>
         <h1 class="white-name">{{user.fullName}}</h1>
     </div>
     <div fxLayout="row" fxFlex fxLayoutAlign="center end" class="full-width div-background netgrif-input">
-        <div fxFlex="80" class="tab-group margin-bottom-x2 mat-elevation-z4">
+        <div fxFlex="80" class="tab-profile-group margin-bottom-x2 mat-elevation-z4">
             <div fxLayout="row">
                 <div fxFlex="50" class="padding-x2" fxLayout="column">
                     <div fxLayout="column" class="full-height border">
diff --git a/projects/netgrif-components/src/lib/user/profile/profile.component.scss b/projects/netgrif-components/src/lib/user/profile/profile.component.scss
index a01574357c..4fd203b682 100644
--- a/projects/netgrif-components/src/lib/user/profile/profile.component.scss
+++ b/projects/netgrif-components/src/lib/user/profile/profile.component.scss
@@ -17,27 +17,16 @@
     margin-right: 32px;
 }
 
-.white-name {
-    color: #FFF;
-}
-
-.tab-group {
+.tab-profile-group {
     margin-top: -48px;
     z-index: 100;
-    background: #f0f0f0;
-}
-
-.div-background {
-    background: #ddd;
 }
 
 .user-chip-list {
     width: 100%;
 }
 
-.border {
-    border: 1px solid #dddddd;
+.profile-border {
     border-radius: 6px;
-    background: white;
 }
 
diff --git a/projects/netgrif-components/src/lib/user/user-card/user-card.component.scss b/projects/netgrif-components/src/lib/user/user-card/user-card.component.scss
index 514749658c..0bbf2719bd 100644
--- a/projects/netgrif-components/src/lib/user/user-card/user-card.component.scss
+++ b/projects/netgrif-components/src/lib/user/user-card/user-card.component.scss
@@ -49,16 +49,12 @@
 
 .full-showcase-text {
     text-align: center;
-
     span {
         &:first-child {
             font-size: 20px;
-            color: #424242;
             margin-bottom: 4px;
         }
-
         font-size: 12px;
-        color: #616161;
     }
 }
 
@@ -68,7 +64,6 @@
 
 .horizontal-showcase-container {
     height: 80px;
-    border: 1px solid #fd971f;
     border-radius: 6px;
 
     .user-avatar-large {
@@ -78,7 +73,6 @@
 
 .vertical-showcase-container {
     width: 160px;
-    border: 1px solid #f0ad4e;
     border-radius: 6px;
     white-space: pre-line;
 
diff --git a/projects/netgrif-components/src/lib/user/user.theme.scss b/projects/netgrif-components/src/lib/user/user.theme.scss
index 57b6ca551b..3059a25984 100644
--- a/projects/netgrif-components/src/lib/user/user.theme.scss
+++ b/projects/netgrif-components/src/lib/user/user.theme.scss
@@ -1,11 +1,45 @@
 @use '@angular/material' as mat;
 
-@mixin user-profile($theme) {
+@mixin user-profile($theme, $nae-variables) {
     $primary: map-get($theme, primary);
     .card-title {
         background: mat.get-color-from-palette($primary) !important;
         border-top-left-radius: 5px;
         border-top-right-radius: 5px;
     }
+
+    .white-name {
+        color: map-get($nae-variables, profile-name);
+    }
+
+    .tab-profile-group {
+        background: map-get($nae-variables, profile-border);
+    }
+
+    .div-background {
+        background: map-get($nae-variables, profile-border-background);
+    }
+
+    .profile-border {
+        border: 1px solid map-get($nae-variables, profile-border);
+        background: map-get($nae-variables, profile-name);
+    }
+
+    .full-showcase-text {
+        span {
+            &:first-child {
+                color: map-get($nae-variables, user-card-text);
+            }
+            color: rgba(map-get($nae-variables, user-card-text), 0.9);
+        }
+    }
+
+    .horizontal-showcase-container {
+        border: 1px solid map-get($nae-variables, user-card);
+    }
+
+    .vertical-showcase-container {
+        border: 1px solid map-get($nae-variables, user-card);
+    }
 }