diff --git a/projects/netgrif-components-core/src/lib/navigation/dashboard/abstract-dashboard.component.ts b/projects/netgrif-components-core/src/lib/navigation/dashboard/abstract-dashboard.component.ts
index 0c3be28ad..6b5bf88f1 100644
--- a/projects/netgrif-components-core/src/lib/navigation/dashboard/abstract-dashboard.component.ts
+++ b/projects/netgrif-components-core/src/lib/navigation/dashboard/abstract-dashboard.component.ts
@@ -33,6 +33,7 @@ export abstract class AbstractDashboardComponent {
     public static readonly DASHBOARD_MANAGEMENT_LOGOUT_TOOLBAR_DATAFIELD = 'logout_dashboard_toolbar';
     public static readonly DASHBOARD_MANAGEMENT_NAME_DATAFIELD = 'dashboard_name';
     public static readonly DASHBOARD_MANAGEMENT_LOGO_DATAFIELD = 'dashboard_logo';
+    public static readonly DASHBOARD_MANAGEMENT_COLOR_DATAFIELD = 'toolbar_color';
     public static readonly DASHBOARD_MANAGEMENT_ITEMS_ORDER_DATAFIELD = "items_order";
     public static readonly DASHBOARD_MANAGEMENT_PROFILE_URL_DATAFIELD = "profile_url";
     public static readonly DASHBOARD_MANAGEMENT_LOGIN_URL_DATAFIELD = "login_url";
@@ -105,7 +106,8 @@ export abstract class AbstractDashboardComponent {
                 toolbarName: this.getManagementName(this.dashboardCase),
                 toolbarLogo: this.getManagementLogo(this.dashboardCase),
                 profileUrl: this.getManagementProfileUrl(this.dashboardCase),
-                loginUrl: this.getManagementLoginUrl(this.dashboardCase)
+                loginUrl: this.getManagementLoginUrl(this.dashboardCase),
+                color: this.getManagementColor(this.dashboardCase),
             }
 
             const dashboardItemsOptions = this.dashboardCase.immediateData
@@ -201,7 +203,7 @@ export abstract class AbstractDashboardComponent {
 
     public getItemFontColor(itemCase: Case): string {
         const fontColor = this.getFieldValue(itemCase, AbstractDashboardComponent.DASHBOARD_ITEM_FONT_COLOR_DATAFIELD) as string;
-        return !!fontColor && fontColor !== '' ? fontColor : 'black';
+        return !!fontColor && fontColor !== '' ? fontColor : null;
     }
 
     public getItemFontWeight(itemCase: Case): string {
@@ -211,7 +213,7 @@ export abstract class AbstractDashboardComponent {
 
     public getItemIconColor(itemCase: Case): string {
         const iconColor = this.getFieldValue(itemCase, AbstractDashboardComponent.DASHBOARD_ITEM_ICON_COLOR_DATAFIELD);
-        return !!iconColor && iconColor !== '' ? iconColor : 'black';
+        return !!iconColor && iconColor !== '' ? iconColor : null;
     }
 
     // GET management fields
@@ -267,4 +269,8 @@ export abstract class AbstractDashboardComponent {
             window.open(this.getItemURL(itemCase), "_blank");
         }
     }
+
+    private getManagementColor(itemCase: Case): string {
+        return this.getFieldValue(itemCase, AbstractDashboardComponent.DASHBOARD_MANAGEMENT_COLOR_DATAFIELD) as string;
+    }
 }
diff --git a/projects/netgrif-components-core/src/lib/navigation/navigation-double-drawer/abstract-navigation-double-drawer.ts b/projects/netgrif-components-core/src/lib/navigation/navigation-double-drawer/abstract-navigation-double-drawer.ts
index 1cdc0a22d..e7f92d121 100644
--- a/projects/netgrif-components-core/src/lib/navigation/navigation-double-drawer/abstract-navigation-double-drawer.ts
+++ b/projects/netgrif-components-core/src/lib/navigation/navigation-double-drawer/abstract-navigation-double-drawer.ts
@@ -1,10 +1,10 @@
 import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
 import {Component, EventEmitter, Inject, Input, OnDestroy, OnInit, Output, TemplateRef} from '@angular/core';
-import {ActivatedRoute, Router} from '@angular/router';
+import {ActivatedRoute, IsActiveMatchOptions, NavigationEnd, Router} from '@angular/router';
 import {TranslateService} from '@ngx-translate/core';
 import {ResizeEvent} from 'angular-resizable-element';
-import {Observable, Subscription} from 'rxjs';
-import {filter, take, switchMap} from 'rxjs/operators';
+import {combineLatest, Observable, Subscription} from 'rxjs';
+import {filter, take, switchMap, startWith} from 'rxjs/operators';
 import {AccessService} from '../../authorization/permission/access.service';
 import {ConfigurationService} from '../../configuration/configuration.service';
 import {ImpersonationUserSelectService} from '../../impersonation/services/impersonation-user-select.service';
@@ -96,6 +96,25 @@ export abstract class AbstractNavigationDoubleDrawerComponent implements OnInit,
     protected itemClickedSub: Subscription;
     protected itemLoadedSub: Subscription;
     protected rightItemsSub: Subscription;
+    protected activeParentSub: Subscription;
+
+    /**
+     * Id of the left side item (parent folder), whose child view is currently rendered by the router.
+     * Undefined when none of the displayed child views matches the active route.
+     * */
+    protected _activeParentItemId: string;
+
+    /**
+     * Route matching rules used to resolve the active child view. They mirror the defaults of
+     * `routerLinkActive` (without `[routerLinkActiveOptions]="{exact: true}"`), so that the parent
+     * folder is highlighted for exactly the same routes as its child item.
+     * */
+    protected readonly activeMatchOptions: IsActiveMatchOptions = {
+        paths: 'subset',
+        queryParams: 'subset',
+        fragment: 'ignored',
+        matrixParams: 'ignored',
+    };
 
     protected constructor(protected _router: Router,
                           protected _activatedRoute: ActivatedRoute,
@@ -140,6 +159,15 @@ export abstract class AbstractNavigationDoubleDrawerComponent implements OnInit,
             }
         });
 
+        this.activeParentSub = combineLatest([
+            this._router.events.pipe(filter(event => event instanceof NavigationEnd), startWith(null)),
+            this.leftItems$,
+            this.rightItems$,
+            this.moreItems$,
+        ]).subscribe(() => {
+            this._activeParentItemId = this.resolveActiveParentItemId();
+        });
+
         if (this.canApplyAutoSelect()) {
             this.rightItemsSub = this.rightItems$.pipe(
                 filter(rightItems => rightItems.length > 0),
@@ -166,6 +194,7 @@ export abstract class AbstractNavigationDoubleDrawerComponent implements OnInit,
         this.itemClickedSub.unsubscribe();
         this.itemLoadedSub.unsubscribe();
         this.rightItemsSub?.unsubscribe();
+        this.activeParentSub?.unsubscribe();
     }
 
     public get currentNode(): UriNodeResource {
@@ -349,6 +378,51 @@ export abstract class AbstractNavigationDoubleDrawerComponent implements OnInit,
         return DoubleDrawerUtils.isItemAndNodeEqual(item, node);
     }
 
+    /**
+     * Resolves whether the given left side item is the parent folder of the view that is currently
+     * rendered by the router. Used to highlight the parent of the selected view the same way the
+     * selected view itself is highlighted by `routerLinkActive`.
+     *
+     * @param item an item of the left side menu
+     * @returns true if one of the currently displayed children of the item is the active route
+     * */
+    public isParentOfActiveView(item: NavigationItem): boolean {
+        return !!item && !!this._activeParentItemId && item.id === this._activeParentItemId;
+    }
+
+    /**
+     * Resolves whether the item's view is the one currently rendered by the router.
+     *
+     * @param item any navigation item holding a routing path
+     * */
+    public isItemRouteActive(item: NavigationItem): boolean {
+        const path = item?.routing?.path;
+        if (!path) {
+            return false;
+        }
+        // the url tree is built the same way `routerLink` builds it in the template,
+        // so both absolute and route relative paths are resolved identically
+        return this._router.isActive(
+            this._router.createUrlTree([path], {relativeTo: this._activatedRoute}),
+            this.activeMatchOptions,
+        );
+    }
+
+    /**
+     * The right side items (including the ones hidden behind the "load more" button) are the children of
+     * [currentNode]{@link AbstractNavigationDoubleDrawerComponent#currentNode}. Their parent folder on the
+     * left side is therefore the left item that corresponds to the current node.
+     *
+     * @returns the id of the left side item whose child view is active, or undefined if no child view is active
+     * */
+    protected resolveActiveParentItemId(): string | undefined {
+        const children = [...(this.rightItems ?? []), ...(this.moreItems ?? [])];
+        if (!children.some(child => this.isItemRouteActive(child))) {
+            return undefined;
+        }
+        return this.leftItems?.find(item => this.isItemAndNodeEqual(item, this.currentNode))?.id;
+    }
+
     public setMenuEditMode(newVal: boolean): void {
         this.editModeEnabled = newVal;
     }
diff --git a/projects/netgrif-components-core/src/lib/navigation/navigation-double-drawer/util/double-drawer-utils.ts b/projects/netgrif-components-core/src/lib/navigation/navigation-double-drawer/util/double-drawer-utils.ts
index f3c529eee..6268adf37 100644
--- a/projects/netgrif-components-core/src/lib/navigation/navigation-double-drawer/util/double-drawer-utils.ts
+++ b/projects/netgrif-components-core/src/lib/navigation/navigation-double-drawer/util/double-drawer-utils.ts
@@ -23,7 +23,11 @@ export class DoubleDrawerUtils {
     }
 
     public static isItemAndNodeEqual(item: NavigationItem, node: UriNodeResource): boolean {
-        return item.resource?.immediateData.find(f => f.stringId === GroupNavigationConstants.ITEM_FIELD_ID_NODE_PATH)?.value === node.uriPath;
+        if (!item || !node) {
+            return false;
+        }
+        const itemNodePath = item.resource?.immediateData?.find(f => f.stringId === GroupNavigationConstants.ITEM_FIELD_ID_NODE_PATH)?.value;
+        return !!itemNodePath && itemNodePath === node.uriPath;
     }
 
     public static extractChildCaseIds(item: Case): string[] {
@@ -49,7 +53,7 @@ export class DoubleDrawerUtils {
     }
 
     public static isNodeCorrespondingToItem(node: UriNodeResource, item: NavigationItem): boolean {
-        return item.resource?.immediateData.find(f => f.stringId === GroupNavigationConstants.ITEM_FIELD_ID_NODE_PATH)?.value === node.uriPath
+        return DoubleDrawerUtils.isItemAndNodeEqual(item, node);
     }
 
     public static findTaskIdInCase(useCase: Case, transId: string): string {
diff --git a/projects/netgrif-components-core/src/lib/toolbar/abstract-toolbar.component.ts b/projects/netgrif-components-core/src/lib/toolbar/abstract-toolbar.component.ts
index b7f08b387..3d2365bf6 100644
--- a/projects/netgrif-components-core/src/lib/toolbar/abstract-toolbar.component.ts
+++ b/projects/netgrif-components-core/src/lib/toolbar/abstract-toolbar.component.ts
@@ -4,6 +4,7 @@ import {LanguageService} from '../translate/language.service';
 import {ToolbarConfig} from './toolbar-config';
 import {UserService} from '../user/services/user.service';
 import {Router} from '@angular/router';
+import {ThemePalette} from '@angular/material/core';
 import {User} from '../user/models/user';
 import {RedirectService} from '../routing/redirect-service/redirect.service';
 
@@ -62,6 +63,20 @@ export abstract class AbstractToolbarComponent {
         return this.loggedUser.isImpersonating();
     }
 
+    /**
+     * @returns the background color defined in `toolbarConfig.color`, or `null` if it is not defined
+     */
+    public get toolbarCustomColor(): string | null {
+        return this.toolbarConfig?.color?.trim() || null;
+    }
+
+    /**
+     * @returns `primary` theme palette as a fallback, only when `toolbarConfig.color` is not defined
+     */
+    public get toolbarThemeColor(): ThemePalette {
+        return this.toolbarCustomColor ? undefined : 'primary';
+    }
+
     public getToolbarTitle(): string {
         return this.selectLangService.getLanguage() in this.toolbarConfig.toolbarName.translations
             ? this.toolbarConfig.toolbarName.translations[this.selectLangService.getLanguage()]
diff --git a/projects/netgrif-components-core/src/lib/toolbar/toolbar-config.ts b/projects/netgrif-components-core/src/lib/toolbar/toolbar-config.ts
index 432bd37b9..1f5f44e35 100644
--- a/projects/netgrif-components-core/src/lib/toolbar/toolbar-config.ts
+++ b/projects/netgrif-components-core/src/lib/toolbar/toolbar-config.ts
@@ -9,4 +9,5 @@ export interface ToolbarConfig {
     toolbarLogo?: string;
     profileUrl?: string;
     loginUrl?: string;
+    color?: string;
 }
diff --git a/projects/netgrif-components/src/lib/builder/form-builder/gridster/gridster-datafield/gridster-data-field.component.html b/projects/netgrif-components/src/lib/builder/form-builder/gridster/gridster-datafield/gridster-data-field.component.html
index c1776c0ce..eeaf125b6 100644
--- a/projects/netgrif-components/src/lib/builder/form-builder/gridster/gridster-datafield/gridster-data-field.component.html
+++ b/projects/netgrif-components/src/lib/builder/form-builder/gridster/gridster-datafield/gridster-data-field.component.html
@@ -3,7 +3,8 @@
           class="placeholder-text">{{ 'builder.form-builder.gridster.placeholderFor' | translate }} {{dataField.dataVariable.type}} {{ 'builder.form-builder.gridster.withId' | translate }} '{{dataField.dataVariable?.id}}'</span>
 
     <nc-data-field-template *ngIf="!fieldListService.isPlaceholderField(dataField)"
-                            [additionalFieldProperties]="{taskId: ''}" [dataField]="engineField" [offset]="0" fxFlex >
+                            [additionalFieldProperties]="{taskId: ''}" [dataField]="engineField" [offset]="0" fxFlex
+                            [ngClass]="{'date-field-fix': isDateField()}">
     </nc-data-field-template>
 </div>
 <div *ngIf="isHidden()" fxLayout="row" fxLayoutAlign="center center" class="gridster-item-content min-row-height hidden-field">
diff --git a/projects/netgrif-components/src/lib/builder/form-builder/gridster/gridster-datafield/gridster-data-field.component.ts b/projects/netgrif-components/src/lib/builder/form-builder/gridster/gridster-datafield/gridster-data-field.component.ts
index 1d87fc83a..a279eece0 100644
--- a/projects/netgrif-components/src/lib/builder/form-builder/gridster/gridster-datafield/gridster-data-field.component.ts
+++ b/projects/netgrif-components/src/lib/builder/form-builder/gridster/gridster-datafield/gridster-data-field.component.ts
@@ -1,5 +1,5 @@
 import {Component, Input, OnDestroy, OnInit, QueryList, TemplateRef, ViewChildren} from '@angular/core';
-import {DataField, EnumerationField, MultichoiceField} from '@netgrif/components-core';
+import {DataField, EnumerationField, MultichoiceField, DateField, DateTimeField} from '@netgrif/components-core';
 import {DataRefBehavior, DataType, I18nWithDynamic} from '@netgrif/petriflow';
 import moment from 'moment';
 import {Subscription} from 'rxjs';
@@ -76,6 +76,14 @@ export class GridsterDataFieldComponent implements OnInit, OnDestroy {
         return this.dataField.dataRef.logic.behavior === DataRefBehavior.HIDDEN;
     }
 
+    /**
+     * Mirrors the `date-field-fix` wrapper class applied by `FieldComponentResolverComponent`
+     * in the regular task view, so the datepicker toggle does not overlap the field title.
+     */
+    public isDateField(): boolean {
+        return this.engineField instanceof DateField || this.engineField instanceof DateTimeField;
+    }
+
     public name(): string {
         return `${this.dataField?.dataVariable?.title?.value} [${this.dataField?.dataVariable?.id}]`;
     }
diff --git a/projects/netgrif-components/src/lib/builder/form-builder/gridster/gridster.component.html b/projects/netgrif-components/src/lib/builder/form-builder/gridster/gridster.component.html
index 143a68ba7..cb876549d 100644
--- a/projects/netgrif-components/src/lib/builder/form-builder/gridster/gridster.component.html
+++ b/projects/netgrif-components/src/lib/builder/form-builder/gridster/gridster.component.html
@@ -1,10 +1,11 @@
 <gridster (click)="deselect()" [options]="options">
   <gridster-item *ngFor="let field of placedDataFields" [item]="field"
+                 (itemInit)="onItemInit(field)"
                  [ngClass]="{'active-item-gridster': isActive(field)}" class="gridster-item">
 
     <form (click)="select($event, field)" (contextmenu)="openMenu($event, field)"
           class="fill-all-space gridster-item-form">
-      <nc-builder-gridster-datafield [dataField]="field" class="fill-all-space"></nc-builder-gridster-datafield>
+      <nc-builder-gridster-datafield *ngIf="isInitialized(field)" [dataField]="field" class="fill-all-space"></nc-builder-gridster-datafield>
       <div class="hover-button">
         <button class="drag-handler" mat-mini-fab>
           <mat-icon>open_with</mat-icon>
diff --git a/projects/netgrif-components/src/lib/builder/form-builder/gridster/gridster.component.ts b/projects/netgrif-components/src/lib/builder/form-builder/gridster/gridster.component.ts
index 38389c1ed..ebcfaa210 100644
--- a/projects/netgrif-components/src/lib/builder/form-builder/gridster/gridster.component.ts
+++ b/projects/netgrif-components/src/lib/builder/form-builder/gridster/gridster.component.ts
@@ -19,6 +19,16 @@ import {TranslateService} from "@ngx-translate/core";
 })
 export class GridsterComponent implements OnInit, OnDestroy {
 
+    /**
+     * Gridster items that have already been laid out (have non-zero size).
+     * The data field content is rendered only after that, because Angular Material
+     * measures the width of the `matPrefix` container exactly once (on first zone stable)
+     * to compute the floating label offset. Gridster items are `display: none` until
+     * their layout is calculated, so an earlier render would measure the prefix as 0px
+     * and the label would overlap the prefix icon (e.g. the datepicker toggle).
+     */
+    private readonly _initializedItems = new WeakSet<GridsterDataField>();
+
     constructor(private gridsterService: GridsterService,
                 private fieldListService: FieldListService,
                 private modelService: ModelService,
@@ -57,6 +67,14 @@ export class GridsterComponent implements OnInit, OnDestroy {
         return this.gridsterService.placedDataFields;
     }
 
+    onItemInit(field: GridsterDataField): void {
+        this._initializedItems.add(field);
+    }
+
+    isInitialized(field: GridsterDataField): boolean {
+        return this._initializedItems.has(field);
+    }
+
     removeItem($event, field: GridsterDataField) {
         $event.preventDefault();
         $event.stopPropagation();
diff --git a/projects/netgrif-components/src/lib/header/header.component.html b/projects/netgrif-components/src/lib/header/header.component.html
index 7cf4fa03f..b03e5062e 100644
--- a/projects/netgrif-components/src/lib/header/header.component.html
+++ b/projects/netgrif-components/src/lib/header/header.component.html
@@ -71,21 +71,23 @@
                             <mat-icon color="warn">close</mat-icon>
                             {{ 'tasks.view.cancel' | translate}}
                         </button>
-                        <div class="mat-menu-item-look" *ngIf="canOverflow && showTableSection">
+                        <mat-divider *ngIf="canOverflow && showTableSection"></mat-divider>
+                        <div class="header-menu-row header-menu-toggle" (click)="clickStop($event)"
+                             *ngIf="canOverflow && showTableSection">
                             <mat-slide-toggle
                                 [formControl]="overflowControl">{{ 'headers.overflowMode' | translate}}</mat-slide-toggle>
                         </div>
-                        <div class="mat-menu-item-look mat-menu-item-height" (click)="clickStop($event)"
+                        <div class="header-menu-row header-menu-field" (click)="clickStop($event)"
                              *ngIf="canOverflow && showTableSection && overflowControl.value">
-                            <mat-form-field appearance="outline">
+                            <mat-form-field appearance="outline" subscriptSizing="dynamic">
                                 <mat-label>{{ 'headers.columnWidth' | translate}}</mat-label>
                                 <input matInput type="number" [formControl]="columnWidthControl">
                                 <mat-error *ngIf="!columnWidthControl.valid">{{getErrorMessageWidth()}}</mat-error>
                             </mat-form-field>
                         </div>
-                        <div class="mat-menu-item-look mat-menu-item-height" (click)="clickStop($event)"
+                        <div class="header-menu-row header-menu-field" (click)="clickStop($event)"
                              *ngIf="canOverflow && showTableSection && overflowControl.value">
-                            <mat-form-field appearance="outline">
+                            <mat-form-field appearance="outline" subscriptSizing="dynamic">
                                 <mat-label>{{ 'headers.columnCount' | translate}}</mat-label>
                                 <input matInput type="number" [formControl]="columnCountControl">
                                 <mat-error *ngIf="!columnCountControl.valid">{{getErrorMessageCount()}}</mat-error>
diff --git a/projects/netgrif-components/src/lib/header/header.component.scss b/projects/netgrif-components/src/lib/header/header.component.scss
index 9727b13d9..0461e148a 100644
--- a/projects/netgrif-components/src/lib/header/header.component.scss
+++ b/projects/netgrif-components/src/lib/header/header.component.scss
@@ -19,27 +19,30 @@
     flex: 1 1 5%;
 }
 
-.mat-mdc-menu-item-look {
-    user-select: none;
-    cursor: pointer;
-    outline: none;
-    border: none;
-    -webkit-tap-highlight-color: transparent;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: block;
-    line-height: 48px;
-    height: 48px;
+.header-menu-row {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
     padding: 0 16px;
-    text-align: left;
-    text-decoration: none;
-    max-width: 100%;
-    position: relative;
     font-size: 14px;
+    user-select: none;
 }
 
-.mat-mdc-menu-item-height {
-    min-height: 64px;
-    height: auto;
+.header-menu-toggle {
+    min-height: 48px;
+    cursor: pointer;
+}
+
+.header-menu-field {
+    // fixed, compact width so the fields don't stretch the whole menu
+    width: 100%;
+    min-width: 200px;
+    max-width: 280px;
+    padding-top: 12px;
+    padding-bottom: 4px;
+    cursor: default;
+
+    mat-form-field {
+        width: 100%;
+    }
 }
diff --git a/projects/netgrif-components/src/lib/navigation/dashboard/dashboard.component.html b/projects/netgrif-components/src/lib/navigation/dashboard/dashboard.component.html
index 886c9dc27..b40fe82bc 100644
--- a/projects/netgrif-components/src/lib/navigation/dashboard/dashboard.component.html
+++ b/projects/netgrif-components/src/lib/navigation/dashboard/dashboard.component.html
@@ -10,7 +10,10 @@
                     <mat-card-content fxLayout="column" fxLayoutAlign="center center" class="card-content">
                         <mat-icon *ngIf="!getItemExternalIcon(item)" class="card-icon" [ngStyle]="{'color': getItemIconColor(item)}">{{ getItemIcon(item) }}</mat-icon>
                         <img *ngIf="getItemExternalIcon(item)" class="card-icon" src="{{getItemIcon(item)}}" alt="{{getItemName(item)}}">
-                        <div class="card-main-text" [ngStyle]="{'color': getItemFontColor(item), 'font-weight': getItemFontWeight(item)}">{{ getItemName(item) }}</div>
+                        <div class="card-main-text"
+                             [ngStyle]="{'color': getItemFontColor(item), 'font-weight': getItemFontWeight(item)}"
+                             [matTooltip]="getItemName(item)"
+                             matTooltipShowDelay="500">{{ getItemName(item) }}</div>
                     </mat-card-content>
                 </div>
             </ng-template>
diff --git a/projects/netgrif-components/src/lib/navigation/dashboard/dashboard.component.scss b/projects/netgrif-components/src/lib/navigation/dashboard/dashboard.component.scss
index 5804e3f9a..6084b9c2e 100644
--- a/projects/netgrif-components/src/lib/navigation/dashboard/dashboard.component.scss
+++ b/projects/netgrif-components/src/lib/navigation/dashboard/dashboard.component.scss
@@ -27,6 +27,8 @@
 .card-content {
     text-align: center;
     margin-bottom: 0 !important;
+    max-width: 100%;
+    box-sizing: border-box;
 }
 
 .card-icon {
@@ -46,4 +48,8 @@
     text-align: center;
     margin-bottom: 20px !important;
     margin-top: 10px !important;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
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 5bff28e28..b674a5ec0 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
@@ -36,13 +36,15 @@
             <mat-menu #userRailMenu="matMenu">
                 <div mat-menu-item role="menuitem" class="large-menu-item" fxLayout="row" fxFlexAlign="center center"
                      [routerLink]="profileRouterLink" routerLinkActive="active-tree-node">
-                    <mat-icon class="margin-auto" fxFlex>face</mat-icon>
-                    <div class="large-menu-item" fxLayout="column" fxFlexAlign="start center" fxFlex>
-                        <span *ngIf="!user.isImpersonating()" class="large-menu-item-text"
-                              fxFlex="50">{{ user.fullName }}</span>
-                        <span *ngIf="user.isImpersonating()" class="large-menu-item-text"
-                              fxFlex="50">{{ user.fullName }} ({{ user.getSelfOrImpersonated().fullName }})</span>
-                        <span class="large-menu-item-text" style="font-size: 12px;" fxFlex="50">{{ user.email }}</span>
+                    <mat-icon class="user-menu-icon">face</mat-icon>
+                    <div class="large-menu-item user-menu-text" fxLayout="column" fxFlexAlign="start center" fxFlex>
+                        <span *ngIf="!user.isImpersonating()" class="large-menu-item-text text-ellipsis"
+                              fxFlex="50" [matTooltip]="user.fullName">{{ user.fullName }}</span>
+                        <span *ngIf="user.isImpersonating()" class="large-menu-item-text text-ellipsis"
+                              fxFlex="50"
+                              [matTooltip]="user.fullName + ' (' + user.getSelfOrImpersonated().fullName + ')'">{{ user.fullName }} ({{ user.getSelfOrImpersonated().fullName }})</span>
+                        <span class="large-menu-item-text text-ellipsis" style="font-size: 12px;" fxFlex="50"
+                              [matTooltip]="user.email">{{ user.email }}</span>
                     </div>
                 </div>
                 <button *ngIf="includeImpersonation && !user.isImpersonating()" mat-menu-item (click)="impersonate()">
@@ -151,9 +153,10 @@
     <div class="margin-top-x2"></div>
 
     <button *ngFor='let folder of leftItems$ | async; trackBy: itemsTrackBy' mat-icon-button (click)="onItemClick(folder)"
-            class="menu-button mat-typography menu-font-color" [matTooltip]="folder.navigation.title"
+            class="menu-button mat-typography" [matTooltip]="folder.navigation.title"
             [matTooltipPosition]="'right'"
-            [ngClass]="isItemAndNodeEqual(folder, currentNode) ? 'rail-selected-color' : 'menu-font-color'"
+            [ngClass]="isParentOfActiveView(folder) ? 'active-tree-node'
+                       : (isItemAndNodeEqual(folder, currentNode) ? 'rail-selected-color' : 'menu-font-color')"
             [routerLink]='folder.routing.path'
             routerLinkActive="active">
         <mat-icon>{{ folder.navigation.icon }}</mat-icon>
@@ -183,7 +186,7 @@
                  class="tree-node width-menu mat-typography mat-body-2" fxLayoutAlign="start center"  [routerLink]='item.routing.path'
                  routerLinkActive="active-tree-node">
                 <mat-icon class="tree-node-icon">{{ item.navigation.icon }}</mat-icon>
-                <span>{{ item.navigation.title }}</span>
+                <span class="tree-node-title" [matTooltip]="item.navigation.title" matTooltipShowDelay="500">{{ item.navigation.title }}</span>
                 <span class="menu-item-focus-overlay"></span>
             </div>
             <button mat-icon-button *ngIf="editModeEnabled" class="cursor-pointer" [matTooltip]="'dynamicNavigation.editMenuItem' | translate" matTooltipPosition="right" (click)="editMenuItem(item.resource)" fxLayoutAlign="end">
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 22a3038a5..0baaf97d5 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
@@ -121,6 +121,15 @@
         width: 24px;
         font-size: 24px;
         margin-right: 4px;
+        flex-shrink: 0; // prevents icon from shrinking when title is long
+    }
+
+    .tree-node-title {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        min-width: 0;   // required for ellipsis to work inside flex container
+        flex: 1;        // take remaining space, but not more than available
     }
 
     .tree-node-label {
@@ -227,10 +236,29 @@
     line-height: 64px;
 }
 
+.user-menu-icon {
+    flex: 0 0 auto;
+    margin: auto 16px auto 0;
+}
+
+.user-menu-text {
+    flex: 1 1 0;
+    min-width: 0;
+    overflow: hidden;
+}
+
 .large-menu-item-text {
     line-height: 32px;
 }
 
+.text-ellipsis {
+    display: block;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
 .cursor-pointer {
     cursor: pointer;
 }
diff --git a/projects/netgrif-components/src/lib/navigation/navigation.theme.scss b/projects/netgrif-components/src/lib/navigation/navigation.theme.scss
index cd15b22b5..9c67d8c0b 100644
--- a/projects/netgrif-components/src/lib/navigation/navigation.theme.scss
+++ b/projects/netgrif-components/src/lib/navigation/navigation.theme.scss
@@ -38,7 +38,7 @@
 
     .active-tree-node {
         color: mat.get-color-from-palette($primary) !important;
-        background-color: rgba(mat.get-color-from-palette($primary), 0.25);
+        background-color: rgba(mat.get-color-from-palette($primary), 0.25) !important;
     }
 
     .tree-node {
@@ -63,6 +63,14 @@
         }
     }
 
+    .card-icon {
+        color: mat.get-color-from-palette($primary);
+    }
+
+    .card-main-text {
+        color: mat.get-color-from-palette($primary);
+    }
+
     .quick-panel-menu {
         .mat-mdc-menu-item-text {
             flex-direction: row;
diff --git a/projects/netgrif-components/src/lib/navigation/quick-panel/components/language-selector/language-selector.component.html b/projects/netgrif-components/src/lib/navigation/quick-panel/components/language-selector/language-selector.component.html
index a92531b28..e4b42552c 100644
--- a/projects/netgrif-components/src/lib/navigation/quick-panel/components/language-selector/language-selector.component.html
+++ b/projects/netgrif-components/src/lib/navigation/quick-panel/components/language-selector/language-selector.component.html
@@ -6,7 +6,7 @@
     </button>
 </mat-menu>
 
-<button mat-icon-button [matMenuTriggerFor]="languageMenu" class="icon-button-height">
+<button mat-icon-button [matMenuTriggerFor]="languageMenu" class="menu-button mat-typography menu-font-color">
     <div [innerHTML]="getLangIcon(getCurrentLang())"
          alt="Country icon" class="icon-medium-dimensions">
     </div>
diff --git a/projects/netgrif-components/src/lib/navigation/quick-panel/components/language-selector/language-selector.component.scss b/projects/netgrif-components/src/lib/navigation/quick-panel/components/language-selector/language-selector.component.scss
index 286f6509b..aef66147c 100644
--- a/projects/netgrif-components/src/lib/navigation/quick-panel/components/language-selector/language-selector.component.scss
+++ b/projects/netgrif-components/src/lib/navigation/quick-panel/components/language-selector/language-selector.component.scss
@@ -15,3 +15,12 @@
 .icon-button-height {
     height: 40px;
 }
+
+.menu-button {
+    margin: 0 auto;
+    border-radius: 8px;
+}
+
+.menu-font-color {
+    color: rgba(0, 0, 0, 0.7) !important;
+}
diff --git a/projects/netgrif-components/src/lib/toolbar/toolbar.component.html b/projects/netgrif-components/src/lib/toolbar/toolbar.component.html
index 241a0dcb3..ea3dd19a7 100644
--- a/projects/netgrif-components/src/lib/toolbar/toolbar.component.html
+++ b/projects/netgrif-components/src/lib/toolbar/toolbar.component.html
@@ -1,4 +1,4 @@
-<mat-toolbar color="primary">
+<mat-toolbar [color]="toolbarThemeColor" [style.background-color]="toolbarCustomColor">
     <mat-toolbar-row fxLayout="row">
         <div class="main-toolbar-logo" fxFlex fxLayout="row">
             <a href="/">