diff --git a/ui-ngx/src/app/core/services/breadcrumb.service.ts b/ui-ngx/src/app/core/services/breadcrumb.service.ts
new file mode 100644
index 0000000000..bafa4979a1
--- /dev/null
+++ b/ui-ngx/src/app/core/services/breadcrumb.service.ts
@@ -0,0 +1,149 @@
+///
+/// Copyright © 2016-2026 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, merge, shareReplay, Subject, Subscription } from 'rxjs';
+import { BreadCrumb, BreadCrumbConfig } from '@shared/components/breadcrumb';
+import { ActivatedRoute, ActivatedRouteSnapshot, NavigationEnd, Router } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
+import { MenuService } from '@core/services/menu.service';
+import { distinctUntilChanged, filter, first, map, switchMap } from 'rxjs/operators';
+import { MenuSection, menuSectionMap } from '@core/services/menu.models';
+import { guid } from '@core/utils';
+import { ActiveComponentService } from '@core/services/active-component.service';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { getCurrentAuthUser } from '@core/auth/auth.selectors';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class BreadcrumbService {
+
+  private updateBreadcrumbsSubscription: Subscription = null;
+  private breadcrumbsSubject: Subject<Array<BreadCrumb>> = new BehaviorSubject<Array<BreadCrumb>>([]);
+  private activeComponent: any;
+
+  get breadcrumbs$() {
+    return this.breadcrumbsSubject.asObservable().pipe(shareReplay(1));
+  }
+
+  get lastBreadcrumb$() {
+    return this.breadcrumbs$.pipe<BreadCrumb>(
+      map( (breadcrumbs: BreadCrumb[]) => breadcrumbs.length ? breadcrumbs[breadcrumbs.length - 1] : null)
+    );
+  }
+
+  constructor(private router: Router,
+              private store: Store<AppState>,
+              private activatedRoute: ActivatedRoute,
+              private translate: TranslateService,
+              private menuService: MenuService,
+              private activeComponentService: ActiveComponentService) {
+
+    merge(this.router.events.pipe(
+      filter((event) => event instanceof NavigationEnd ),
+      distinctUntilChanged()), this.menuService.availableMenuSections()).pipe(
+      switchMap(() => this.menuService.availableMenuSections().pipe(first())),
+      map( (sections: MenuSection[]) => this.buildBreadCrumbs(this.activatedRoute.snapshot, sections) )
+    ).subscribe((breadcrumbs: BreadCrumb[]) => this.breadcrumbsSubject.next(breadcrumbs) );
+
+    this.activeComponentService.onActiveComponentChanged().subscribe(comp => this.setActiveComponent(comp));
+  }
+
+  private setActiveComponent(activeComponent: any) {
+    if (this.updateBreadcrumbsSubscription) {
+      this.updateBreadcrumbsSubscription.unsubscribe();
+      this.updateBreadcrumbsSubscription = null;
+    }
+    this.activeComponent = activeComponent;
+    if (this.activeComponent) {
+      if (this.activeComponent.updateBreadcrumbs) {
+        this.updateBreadcrumbsSubscription = this.activeComponent.updateBreadcrumbs.subscribe(() => {
+          this.menuService.availableMenuSections().pipe(first()).subscribe((sections: MenuSection[]) => {
+            const breadcrumbs = this.buildBreadCrumbs(this.activatedRoute.snapshot, sections);
+            this.breadcrumbsSubject.next(breadcrumbs);
+          });
+        });
+      }
+    }
+  }
+
+  private buildBreadCrumbs(route: ActivatedRouteSnapshot, availableMenuSections: MenuSection[],
+                           breadcrumbs: Array<BreadCrumb> = [],
+                           lastChild?: ActivatedRouteSnapshot): Array<BreadCrumb> {
+    if (!lastChild) {
+      lastChild = this.lastChild(route);
+    }
+    let newBreadcrumbs = breadcrumbs;
+    if (route.routeConfig && route.routeConfig.data) {
+      const breadcrumbConfig = route.routeConfig.data.breadcrumb as BreadCrumbConfig<any>;
+      if (breadcrumbConfig && !breadcrumbConfig.skip) {
+        let labelFunction: () => string;
+        let section: MenuSection = null;
+        let menuId = breadcrumbConfig.menuId;
+        if (!menuId && breadcrumbConfig.menuIdByAuthority) {
+          const authority = getCurrentAuthUser(this.store).authority;
+          menuId = breadcrumbConfig.menuIdByAuthority[authority];
+        }
+        if (menuId) {
+          section = availableMenuSections.find(menu => menu.id === menuId);
+          if (!section) {
+            section = menuSectionMap.get(menuId);
+          }
+        }
+        const label = section?.name || breadcrumbConfig.label || 'home.home';
+        const customTranslate = section?.customTranslate || false;
+        if (breadcrumbConfig.labelFunction) {
+          labelFunction = () => {
+            if (this.activeComponent) {
+              try {
+                return breadcrumbConfig.labelFunction(route, this.translate, this.activeComponent, lastChild.data);
+              } catch {
+                return label;
+              }
+            } else {
+              return label;
+            }
+          }
+        }
+        const link = [ route.pathFromRoot.map(v => v.url.map(segment => segment.toString()).join('/')).join('/') ];
+        const breadcrumb = {
+          id: guid(),
+          label,
+          customTranslate,
+          labelFunction,
+          link,
+          queryParams: null
+        };
+        newBreadcrumbs = [...breadcrumbs, breadcrumb];
+      }
+    }
+    if (route.firstChild) {
+      return this.buildBreadCrumbs(route.firstChild, availableMenuSections, newBreadcrumbs, lastChild);
+    }
+    return newBreadcrumbs;
+  }
+
+  private lastChild(route: ActivatedRouteSnapshot) {
+    let child = route;
+    while (child.firstChild !== null) {
+      child = child.firstChild;
+    }
+    return child;
+  }
+
+}
diff --git a/ui-ngx/src/app/core/services/home.service.ts b/ui-ngx/src/app/core/services/home.service.ts
new file mode 100644
index 0000000000..878001844d
--- /dev/null
+++ b/ui-ngx/src/app/core/services/home.service.ts
@@ -0,0 +1,70 @@
+///
+/// Copyright © 2016-2026 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { EventEmitter, Injectable } from '@angular/core';
+import { ActiveComponentService } from '@core/services/active-component.service';
+import { BehaviorSubject, Observable, shareReplay, Subject } from 'rxjs';
+import { distinctUntilChanged } from 'rxjs/operators';
+import { RouterTabsComponent } from '@home/components/router-tabs.component';
+import { isDefinedAndNotNull } from '@core/utils';
+import { PageComponent } from '@shared/components/page.component';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class HomeService {
+
+  private hideMainToolbarSubject: Subject<boolean> = new BehaviorSubject<boolean>(false);
+  private hideLoadingBarSubject: Subject<boolean> = new BehaviorSubject<boolean>(false);
+
+  get hideMainToolbar$() {
+    return this.hideMainToolbarSubject.asObservable().pipe(distinctUntilChanged(), shareReplay(1));
+  }
+
+  get hideLoadingBar$() {
+    return this.hideLoadingBarSubject.asObservable().pipe(distinctUntilChanged(), shareReplay(1));
+  }
+
+  toggleSideBar = new EventEmitter<void>();
+
+  constructor(private activeComponentService: ActiveComponentService) {
+    this.activeComponentService.onActiveComponentChanged().subscribe(activeComponent => {
+      Promise.resolve().then(() => {
+        this.activeComponentChanged(activeComponent);
+      });
+    });
+  }
+
+  public setHideMainToolbar(hide: boolean): void {
+    Promise.resolve().then(() => {
+      this.hideMainToolbarSubject.next(hide);
+    });
+  }
+
+  private activeComponentChanged(activeComponent: any) {
+    this.hideMainToolbarSubject.next(false);
+    let hideLoadingBar = false;
+    if (activeComponent && activeComponent instanceof RouterTabsComponent
+      && isDefinedAndNotNull(activeComponent.activatedRoute?.snapshot?.data?.showMainLoadingBar)) {
+      hideLoadingBar = !activeComponent.activatedRoute.snapshot.data.showMainLoadingBar;
+    } else if (activeComponent && activeComponent instanceof PageComponent
+      && isDefinedAndNotNull(activeComponent?.showMainLoadingBar)) {
+      hideLoadingBar = !activeComponent.showMainLoadingBar;
+    }
+    this.hideLoadingBarSubject.next(hideLoadingBar);
+  }
+
+}
diff --git a/ui-ngx/src/app/core/services/menu.models.ts b/ui-ngx/src/app/core/services/menu.models.ts
index 443debdc43..a196be2562 100644
--- a/ui-ngx/src/app/core/services/menu.models.ts
+++ b/ui-ngx/src/app/core/services/menu.models.ts
@@ -18,7 +18,7 @@ import { AuthState } from '@core/auth/auth.models';
 import { Authority } from '@shared/models/authority.enum';
 import { deepClone } from '@core/utils';
 
-export declare type MenuSectionType = 'link' | 'toggle';
+export declare type MenuSectionType = 'link' | 'toggle' | 'divider';
 
 export interface MenuSection {
   id: MenuId | string;
@@ -32,6 +32,7 @@ export interface MenuSection {
   rootOnly?: boolean;
   isNew?: boolean;
   customTranslate?: boolean;
+  active?: boolean;
 }
 
 export interface MenuReference {
@@ -39,11 +40,6 @@ export interface MenuReference {
   pages?: Array<MenuReference>;
 }
 
-export interface HomeSectionReference {
-  name: string;
-  places: Array<MenuId>;
-}
-
 export interface HomeSection {
   name: string;
   places: Array<MenuSection>;
@@ -52,6 +48,7 @@ export interface HomeSection {
 export enum MenuId {
   home = 'home',
   tenants = 'tenants',
+  tenants_section = 'tenants_section',
   tenant_profiles = 'tenant_profiles',
   resources = 'resources',
   widget_library = 'widget_library',
@@ -71,6 +68,8 @@ export enum MenuId {
   mobile_apps = 'mobile_apps',
   mobile_bundles = 'mobile_bundles',
   mobile_qr_code_widget = 'mobile_qr_code_widget',
+  platform = 'platform',
+  platform_section = 'platform_section',
   settings = 'settings',
   general = 'general',
   mail_server = 'mail_server',
@@ -86,6 +85,7 @@ export enum MenuId {
   domains = 'domains',
   clients = 'clients',
   audit_log = 'audit_log',
+  monitor = 'monitor',
   alarms_center = 'alarms_center',
   alarms = 'alarms',
   alarm_rules = 'alarm_rules',
@@ -98,7 +98,9 @@ export enum MenuId {
   profiles = 'profiles',
   device_profiles = 'device_profiles',
   asset_profiles = 'asset_profiles',
+  customers_and_users = 'customers_and_users',
   customers = 'customers',
+  data_processing = 'data_processing',
   calculated_fields = 'calculated_fields',
   rule_chains = 'rule_chains',
   edge_management = 'edge_management',
@@ -111,7 +113,8 @@ export enum MenuId {
   api_usage = 'api_usage',
   trendz_settings = 'trendz_settings',
   ai_models = 'ai_models',
-  iot_hub = 'iot_hub'
+  iot_hub = 'iot_hub',
+  divider = 'divider'
 }
 
 declare type MenuFilter = (authState: AuthState) => boolean;
@@ -124,7 +127,17 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       name: 'home.home',
       type: 'link',
       path: '/home',
-      icon: 'home'
+      icon: 'mdi:home-outline'
+    }
+  ],
+  [
+    MenuId.tenants_section,
+    {
+      id: MenuId.tenants_section,
+      name: 'tenant.tenants',
+      type: 'toggle',
+      path: '/tenants',
+      icon: 'mdi:account-supervisor-outline'
     }
   ],
   [
@@ -134,7 +147,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       name: 'tenant.tenants',
       type: 'link',
       path: '/tenants',
-      icon: 'supervisor_account'
+      icon: 'mdi:account-supervisor-outline'
     }
   ],
   [
@@ -144,7 +157,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       name: 'tenant-profile.tenant-profiles',
       type: 'link',
       path: '/tenantProfiles',
-      icon: 'mdi:alpha-t-box'
+      icon: 'mdi:alpha-t-box-outline'
     }
   ],
   [
@@ -154,17 +167,17 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       name: 'admin.resources',
       type: 'toggle',
       path: '/resources',
-      icon: 'folder'
+      icon: 'mdi:folder-outline'
     }
   ],
   [
     MenuId.widget_library,
     {
       id: MenuId.widget_library,
-      name: 'widget.widget-library',
+      name: 'widget.widgets',
       type: 'link',
       path: '/resources/widgets-library',
-      icon: 'now_widgets'
+      icon: 'mdi:widgets-outline'
     }
   ],
   [
@@ -174,7 +187,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       name: 'widget.widgets',
       type: 'link',
       path: '/resources/widgets-library/widget-types',
-      icon: 'now_widgets'
+      icon: 'mdi:widgets-outline'
     }
   ],
   [
@@ -184,14 +197,14 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       name: 'widgets-bundle.widgets-bundles',
       type: 'link',
       path: '/resources/widgets-library/widgets-bundles',
-      icon: 'now_widgets'
+      icon: 'mdi:widgets-outline'
     }
   ],
   [
     MenuId.images,
     {
       id: MenuId.images,
-      name: 'image.gallery',
+      name: 'image.images',
       type: 'link',
       path: '/resources/images',
       icon: 'filter'
@@ -211,17 +224,17 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
     MenuId.resources_library,
     {
       id: MenuId.resources_library,
-      name: 'resource.resources-library',
+      name: 'resource.files',
       type: 'link',
       path: '/resources/resources-library',
-      icon: 'mdi:rhombus-split'
+      icon: 'mdi:rhombus-split-outline'
     }
   ],
   [
     MenuId.javascript_library,
     {
       id: MenuId.javascript_library,
-      name: 'javascript.javascript-library',
+      name: 'javascript.scripts',
       type: 'link',
       path: '/resources/javascript-library',
       icon: 'mdi:language-javascript'
@@ -231,10 +244,10 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
     MenuId.notifications_center,
     {
       id: MenuId.notifications_center,
-      name: 'notification.notification-center',
+      name: 'notification.notifications',
       type: 'link',
       path: '/notification',
-      icon: 'mdi:message-badge'
+      icon: 'mdi:message-badge-outline'
     }
   ],
   [
@@ -267,7 +280,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       fullName: 'notification.notification-recipients',
       type: 'link',
       path: '/notification/recipients',
-      icon: 'contacts'
+      icon: 'mdi:contacts-outline'
     }
   ],
   [
@@ -289,7 +302,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       fullName: 'notification.notification-rules',
       type: 'link',
       path: '/notification/rules',
-      icon: 'mdi:message-cog'
+      icon: 'mdi:message-cog-outline'
     }
   ],
   [
@@ -306,7 +319,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
     MenuId.mobile_center,
     {
       id: MenuId.mobile_center,
-      name: 'mobile.mobile-center',
+      name: 'mobile.mobile-apps',
       type: 'link',
       path: '/mobile-center',
       icon: 'smartphone'
@@ -343,6 +356,26 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       icon: 'qr_code'
     }
   ],
+  [
+    MenuId.platform,
+    {
+      id: MenuId.platform,
+      name: 'admin.platform',
+      type: 'link',
+      path: '/settings',
+      icon: 'miscellaneous_services'
+    }
+  ],
+  [
+    MenuId.platform_section,
+    {
+      id: MenuId.platform_section,
+      name: 'admin.platform',
+      type: 'toggle',
+      path: '/platform',
+      icon: 'miscellaneous_services'
+    }
+  ],
   [
     MenuId.settings,
     {
@@ -350,7 +383,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       name: 'admin.settings',
       type: 'link',
       path: '/settings',
-      icon: 'settings'
+      icon: 'mdi:cog-outline'
     }
   ],
   [
@@ -361,7 +394,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       fullName: 'admin.general-settings',
       type: 'link',
       path: '/settings/general',
-      icon: 'settings_applications'
+      icon: 'mdi:cog-outline'
     }
   ],
   [
@@ -371,7 +404,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       name: 'admin.outgoing-mail',
       type: 'link',
       path: '/settings/outgoing-mail',
-      icon: 'mail'
+      icon: 'mail_outline'
     }
   ],
   [
@@ -382,7 +415,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       fullName: 'admin.home-settings',
       type: 'link',
       path: '/settings/home',
-      icon: 'settings_applications'
+      icon: 'mdi:cog-outline'
     }
   ],
   [
@@ -393,7 +426,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       fullName: 'admin.notifications-settings',
       type: 'link',
       path: '/settings/notifications',
-      icon: 'mdi:message-badge'
+      icon: 'mdi:message-badge-outline'
     }
   ],
   [
@@ -446,7 +479,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       fullName: 'security.general-settings',
       type: 'link',
       path: '/security-settings/general',
-      icon: 'settings_applications'
+      icon: 'mdi:cog-outline'
     }
   ],
   [
@@ -466,7 +499,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       name: 'admin.oauth2.oauth2',
       type: 'link',
       path: '/security-settings/oauth2',
-      icon: 'mdi:shield-account'
+      icon: 'mdi:shield-account-outline'
     }
   ],
   [
@@ -499,6 +532,16 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       icon: 'track_changes'
     }
   ],
+  [
+    MenuId.monitor,
+    {
+      id: MenuId.monitor,
+      name: 'monitor.monitor',
+      type: 'toggle',
+      path: '/monitor',
+      icon: 'mdi:view-dashboard-outline'
+    }
+  ],
   [
     MenuId.alarms_center,
     {
@@ -536,17 +579,17 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       name: 'dashboard.dashboards',
       type: 'link',
       path: '/dashboards',
-      icon: 'dashboards'
+      icon: 'mdi:view-dashboard-outline'
     }
   ],
   [
     MenuId.entities,
     {
       id: MenuId.entities,
-      name: 'entity.entities',
+      name: 'entity.devices-and-assets',
       type: 'toggle',
       path: '/entities',
-      icon: 'category'
+      icon: 'mdi:shape-outline'
     }
   ],
   [
@@ -576,7 +619,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       name: 'entity-view.entity-views',
       type: 'link',
       path: '/entities/entityViews',
-      icon: 'view_quilt'
+      icon: 'mdi:view-quilt-outline'
     }
   ],
   [
@@ -606,7 +649,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       name: 'device-profile.device-profiles',
       type: 'link',
       path: '/profiles/deviceProfiles',
-      icon: 'mdi:alpha-d-box'
+      icon: 'mdi:alpha-d-box-outline'
     }
   ],
   [
@@ -616,7 +659,17 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       name: 'asset-profile.asset-profiles',
       type: 'link',
       path: '/profiles/assetProfiles',
-      icon: 'mdi:alpha-a-box'
+      icon: 'mdi:alpha-a-box-outline'
+    }
+  ],
+  [
+    MenuId.customers_and_users,
+    {
+      id: MenuId.customers_and_users,
+      name: 'customer.customers-and-users',
+      type: 'link',
+      path: '/customers',
+      icon: 'mdi:account-multiple-outline'
     }
   ],
   [
@@ -626,7 +679,17 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       name: 'customer.customers',
       type: 'link',
       path: '/customers',
-      icon: 'supervisor_account'
+      icon: 'mdi:account-supervisor-outline'
+    }
+  ],
+  [
+    MenuId.data_processing,
+    {
+      id: MenuId.data_processing,
+      name: 'entity.data-processing',
+      type: 'toggle',
+      path: '/dataProcessing',
+      icon: 'settings_ethernet',
     }
   ],
   [
@@ -729,7 +792,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       name: 'api-usage.api-usage',
       type: 'link',
       path: '/usage',
-      icon: 'insert_chart'
+      icon: 'insert_chart_outlined'
     }
   ],
   [
@@ -750,9 +813,19 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       name: 'iot-hub.iot-hub',
       type: 'link',
       path: '/iot-hub',
-      icon: 'hub',
+      icon: 'mdi:hub-outline',
       isNew: true
     }
+  ],
+  [
+    MenuId.divider,
+    {
+      id: MenuId.divider,
+      name: '',
+      type: 'divider',
+      path: 'divider',
+      icon: ''
+    }
   ]
 ]);
 
@@ -773,22 +846,11 @@ const defaultUserMenuMap = new Map<Authority, MenuReference[]>([
     Authority.SYS_ADMIN,
     [
       {id: MenuId.home},
-      {id: MenuId.tenants},
-      {id: MenuId.tenant_profiles},
       {
-        id: MenuId.resources,
+        id: MenuId.tenants_section,
         pages: [
-          {
-            id: MenuId.widget_library,
-            pages: [
-              {id: MenuId.widget_types},
-              {id: MenuId.widgets_bundles}
-            ]
-          },
-          {id: MenuId.images},
-          {id: MenuId.scada_symbols},
-          {id: MenuId.javascript_library},
-          {id: MenuId.resources_library}
+          {id: MenuId.tenants},
+          {id: MenuId.tenant_profiles},
         ]
       },
       {
@@ -802,20 +864,19 @@ const defaultUserMenuMap = new Map<Authority, MenuReference[]>([
         ]
       },
       {
-        id: MenuId.mobile_center,
-        pages: [
-          {id: MenuId.mobile_bundles},
-          {id: MenuId.mobile_apps},
-          {id: MenuId.mobile_qr_code_widget}
-        ]
-      },
-      {
-        id: MenuId.settings,
+        id: MenuId.resources,
         pages: [
-          {id: MenuId.general},
-          {id: MenuId.mail_server},
-          {id: MenuId.notification_settings},
-          {id: MenuId.queues}
+          {
+            id: MenuId.widget_library,
+            pages: [
+              {id: MenuId.widget_types},
+              {id: MenuId.widgets_bundles}
+            ]
+          },
+          {id: MenuId.images},
+          {id: MenuId.scada_symbols},
+          {id: MenuId.javascript_library},
+          {id: MenuId.resources_library}
         ]
       },
       {
@@ -832,6 +893,23 @@ const defaultUserMenuMap = new Map<Authority, MenuReference[]>([
           },
           {id: MenuId.audit_log}
         ]
+      },
+      {
+        id: MenuId.platform,
+        pages: [
+          {id: MenuId.general},
+          {id: MenuId.mail_server},
+          {id: MenuId.notification_settings},
+          {id: MenuId.queues}
+        ]
+      },
+      {
+        id: MenuId.mobile_center,
+        pages: [
+          {id: MenuId.mobile_bundles},
+          {id: MenuId.mobile_apps},
+          {id: MenuId.mobile_qr_code_widget}
+        ]
       }
     ]
   ],
@@ -839,46 +917,49 @@ const defaultUserMenuMap = new Map<Authority, MenuReference[]>([
     Authority.TENANT_ADMIN,
     [
       {id: MenuId.home},
+      {id: MenuId.iot_hub},
+      {id: MenuId.divider},
       {
-        id: MenuId.alarms_center,
+        id: MenuId.monitor,
         pages: [
-          {id: MenuId.alarms},
-          {id: MenuId.alarm_rules}
+          {id: MenuId.dashboards},
+          {
+            id: MenuId.alarms_center,
+            pages: [
+              {id: MenuId.alarms},
+              {id: MenuId.alarm_rules}
+            ]
+          },
+          {
+            id: MenuId.notifications_center,
+            pages: [
+              {id: MenuId.notification_inbox},
+              {id: MenuId.notification_sent},
+              {id: MenuId.notification_recipients},
+              {id: MenuId.notification_templates},
+              {id: MenuId.notification_rules}
+            ]
+          }
         ]
       },
-      {id: MenuId.dashboards},
-      {id: MenuId.iot_hub},
       {
         id: MenuId.entities,
         pages: [
           {id: MenuId.devices},
+          {id: MenuId.gateways},
           {id: MenuId.assets},
-          {id: MenuId.entity_views},
-          {id: MenuId.gateways}
-        ]
-      },
-      {
-        id: MenuId.profiles,
-        pages: [
           {id: MenuId.device_profiles},
-          {id: MenuId.asset_profiles}
-        ]
-      },
-      {id: MenuId.customers},
-      {id: MenuId.calculated_fields},
-      {id: MenuId.rule_chains},
-      {
-        id: MenuId.edge_management,
-        pages: [
-          {id: MenuId.edges},
-          {id: MenuId.rulechain_templates}
+          {id: MenuId.asset_profiles},
+          {id: MenuId.entity_views},
+          {id: MenuId.otaUpdates}
         ]
       },
+      {id: MenuId.customers_and_users},
       {
-        id: MenuId.features,
+        id: MenuId.data_processing,
         pages: [
-          {id: MenuId.otaUpdates},
-          {id: MenuId.version_control}
+          {id: MenuId.calculated_fields},
+          {id: MenuId.rule_chains}
         ]
       },
       {
@@ -898,44 +979,47 @@ const defaultUserMenuMap = new Map<Authority, MenuReference[]>([
         ]
       },
       {
-        id: MenuId.notifications_center,
+        id: MenuId.security_settings,
         pages: [
-          {id: MenuId.notification_inbox},
-          {id: MenuId.notification_sent},
-          {id: MenuId.notification_recipients},
-          {id: MenuId.notification_templates},
-          {id: MenuId.notification_rules}
+          {
+            id: MenuId.oauth2,
+            pages: [
+              {id: MenuId.clients}
+            ]
+          },
+          {id: MenuId.audit_log}
         ]
       },
       {
-        id: MenuId.mobile_center,
+        id: MenuId.platform_section,
         pages: [
-          {id: MenuId.mobile_bundles},
-          {id: MenuId.mobile_apps}
+          {id: MenuId.version_control},
+          {
+            id: MenuId.settings,
+            pages: [
+              {id: MenuId.home_settings},
+              {id: MenuId.notification_settings},
+              {id: MenuId.repository_settings},
+              {id: MenuId.auto_commit_settings},
+              {id: MenuId.trendz_settings},
+              {id: MenuId.ai_models}
+            ]
+          },
+          {id: MenuId.api_usage}
         ]
       },
-      {id: MenuId.api_usage},
       {
-        id: MenuId.settings,
+        id: MenuId.edge_management,
         pages: [
-          {id: MenuId.home_settings},
-          {id: MenuId.notification_settings},
-          {id: MenuId.repository_settings},
-          {id: MenuId.auto_commit_settings},
-          {id: MenuId.trendz_settings},
-          {id: MenuId.ai_models}
+          {id: MenuId.edges},
+          {id: MenuId.rulechain_templates}
         ]
       },
       {
-        id: MenuId.security_settings,
+        id: MenuId.mobile_center,
         pages: [
-          {id: MenuId.audit_log},
-          {
-            id: MenuId.oauth2,
-            pages: [
-              {id: MenuId.clients}
-            ]
-          }
+          {id: MenuId.mobile_bundles},
+          {id: MenuId.mobile_apps}
         ]
       }
     ]
@@ -944,115 +1028,33 @@ const defaultUserMenuMap = new Map<Authority, MenuReference[]>([
     Authority.CUSTOMER_USER,
     [
       {id: MenuId.home},
-      {id: MenuId.alarms},
-      {id: MenuId.dashboards},
       {
-        id: MenuId.entities,
+        id: MenuId.monitor,
         pages: [
-          {id: MenuId.devices},
-          {id: MenuId.assets},
-          {id: MenuId.entity_views}
+          {id: MenuId.dashboards},
+          {
+            id: MenuId.alarms_center,
+            pages: [
+              {id: MenuId.alarms}
+            ]
+          },
+          {
+            id: MenuId.notifications_center,
+            pages: [
+              {id: MenuId.notification_inbox}
+            ]
+          }
         ]
       },
-      {id: MenuId.edge_instances},
       {
-        id: MenuId.notifications_center,
+        id: MenuId.entities,
         pages: [
-          {id: MenuId.notification_inbox}
+          {id: MenuId.devices},
+          {id: MenuId.assets},
+          {id: MenuId.entity_views}
         ]
-      }
-    ]
-  ]
-]);
-
-const defaultHomeSectionMap = new Map<Authority, HomeSectionReference[]>([
-  [
-    Authority.SYS_ADMIN,
-    [
-      {
-        name: 'tenant.management',
-        places: [MenuId.tenants, MenuId.tenant_profiles]
       },
-      {
-        name: 'widget.management',
-        places: [MenuId.widget_library]
-      },
-      {
-        name: 'admin.system-settings',
-        places: [MenuId.general, MenuId.mail_server,
-          MenuId.notification_settings, MenuId.security_settings, MenuId.oauth2, MenuId.domains,
-          MenuId.clients, MenuId.two_fa, MenuId.resources_library, MenuId.queues]
-      }
-    ]
-  ],
-  [
-    Authority.TENANT_ADMIN,
-    [
-      {
-        name: 'rulechain.management',
-        places: [MenuId.rule_chains]
-      },
-      {
-        name: 'customer.management',
-        places: [MenuId.customers]
-      },
-      {
-        name: 'asset.management',
-        places: [MenuId.assets, MenuId.asset_profiles]
-      },
-      {
-        name: 'device.management',
-        places: [MenuId.devices, MenuId.device_profiles, MenuId.otaUpdates]
-      },
-      {
-        name: 'entity-view.management',
-        places: [MenuId.entity_views]
-      },
-      {
-        name: 'edge.management',
-        places: [MenuId.edges, MenuId.rulechain_templates]
-      },
-      {
-        name: 'dashboard.management',
-        places: [MenuId.widget_library, MenuId.dashboards]
-      },
-      {
-        name: 'version-control.management',
-        places: [MenuId.version_control]
-      },
-      {
-        name: 'audit-log.audit',
-        places: [MenuId.audit_log, MenuId.api_usage]
-      },
-      {
-        name: 'admin.system-settings',
-        places: [MenuId.home_settings, MenuId.resources_library, MenuId.repository_settings, MenuId.auto_commit_settings, MenuId.trendz_settings]
-      }
-    ]
-  ],
-  [
-    Authority.CUSTOMER_USER,
-    [
-      {
-        name: 'asset.view-assets',
-        places: [MenuId.assets]
-      },
-      {
-        name: 'device.view-devices',
-        places: [MenuId.devices]
-      },
-      {
-        name: 'entity-view.management',
-        places: [MenuId.entity_views]
-      },
-      {
-        name: 'edge.management',
-        places: [MenuId.edge_instances]
-      },
-      {
-        name: 'dashboard.view-dashboards',
-        places: [MenuId.dashboards]
-      }
+      {id: MenuId.edge_instances}
     ]
   ]
 ]);
@@ -1062,10 +1064,9 @@ export const buildUserMenu = (authState: AuthState): Array<MenuSection> => {
   return (references || []).map(ref => referenceToMenuSection(authState, ref)).filter(section => !!section);
 };
 
-export const buildUserHome = (authState: AuthState, availableMenuSections: MenuSection[]): Array<HomeSection> => {
-  const references = defaultHomeSectionMap.get(authState.authUser.authority);
-  return (references || []).map(ref =>
-    homeReferenceToHomeSection(availableMenuSections, ref)).filter(section => !!section);
+export const buildUserHome = (currentMenuSections: MenuSection[]): Array<HomeSection> => {
+  return (currentMenuSections || []).map(section =>
+    menuSectionToHomeSection(section)).filter(section => !!section);
 };
 
 const referenceToMenuSection = (authState: AuthState, reference: MenuReference): MenuSection | undefined => {
@@ -1103,14 +1104,18 @@ const filterMenuReference = (authState: AuthState, reference: MenuReference): bo
   }
 };
 
-const homeReferenceToHomeSection = (availableMenuSections: MenuSection[], reference: HomeSectionReference): HomeSection | undefined => {
-  const places = reference.places.map(id => availableMenuSections.find(m => m.id === id)).filter(p => !!p);
-  if (places.length) {
-    return {
-      name: reference.name,
-      places
-    };
-  } else {
-    return undefined;
+const menuSectionToHomeSection = (section: MenuSection): HomeSection => {
+  if (section.id !== MenuId.home) {
+    if (section.type === 'link') {
+      return {
+        name: section.name,
+        places: [ section ]
+      }
+    } else if (section.type === 'toggle' && section.pages?.length) {
+      return {
+        name: section.name,
+        places: section.pages
+      };
+    }
   }
-};
+}
diff --git a/ui-ngx/src/app/core/services/menu.service.ts b/ui-ngx/src/app/core/services/menu.service.ts
index 747cbf3e3c..c0f3bf0568 100644
--- a/ui-ngx/src/app/core/services/menu.service.ts
+++ b/ui-ngx/src/app/core/services/menu.service.ts
@@ -22,7 +22,7 @@ import { filter, map, take } from 'rxjs/operators';
 import { buildUserHome, buildUserMenu, HomeSection, MenuId, MenuSection } from '@core/services/menu.models';
 import { Observable, ReplaySubject, Subject } from 'rxjs';
 import { AuthState } from '@core/auth/auth.models';
-import { NavigationEnd, Router } from '@angular/router';
+import { ActivationEnd, NavigationEnd, Router } from '@angular/router';
 
 @Injectable({
   providedIn: 'root'
@@ -32,6 +32,7 @@ export class MenuService {
   private currentMenuSections: Array<MenuSection>;
   private menuSections$: Subject<Array<MenuSection>> = new ReplaySubject<Array<MenuSection>>(1);
   private homeSections$: Subject<Array<HomeSection>> = new ReplaySubject<Array<HomeSection>>(1);
+  private _availableMenuSections: Array<MenuSection> = [];
   private availableMenuSections$: Subject<Array<MenuSection>> = new ReplaySubject<Array<MenuSection>>(1);
   private availableMenuLinks$ = this.menuSections$.pipe(
     map((items) => this.allMenuLinks(items))
@@ -51,6 +52,9 @@ export class MenuService {
         this.updateOpenedMenuSections();
       }
     );
+    this.router.events.pipe(filter(event => event instanceof ActivationEnd)).subscribe(() => {
+        this.updateActiveMenuSections();
+    });
   }
 
   private buildMenu() {
@@ -58,11 +62,12 @@ export class MenuService {
       (authState: AuthState) => {
         if (authState.authUser) {
           this.currentMenuSections = buildUserMenu(authState);
+          this._availableMenuSections = this.allMenuSections(this.currentMenuSections);
+          this.updateActiveMenuSections();
           this.updateOpenedMenuSections();
           this.menuSections$.next(this.currentMenuSections);
-          const availableMenuSections = this.allMenuSections(this.currentMenuSections);
-          this.availableMenuSections$.next(availableMenuSections);
-          const homeSections = buildUserHome(authState, availableMenuSections);
+          this.availableMenuSections$.next(this._availableMenuSections);
+          const homeSections = buildUserHome(this.currentMenuSections);
           this.homeSections$.next(homeSections);
         }
       }
@@ -70,11 +75,10 @@ export class MenuService {
   }
 
   private updateOpenedMenuSections() {
-    const url = this.router.url;
     const openedMenuSections = getCurrentOpenedMenuSections(this.store);
     if (this.currentMenuSections?.length) {
       this.currentMenuSections.filter(section => section.type === 'toggle' &&
-        (url.startsWith(section.path) || openedMenuSections.includes(section.path))).forEach(
+        (openedMenuSections.includes(section.path) || section.active)).forEach(
         section => section.opened = true
       );
     }
@@ -112,6 +116,27 @@ export class MenuService {
     return this.homeSections$;
   }
 
+  private updateActiveMenuSections() {
+    const url = this.router.url;
+    const activeMenuSection = this._availableMenuSections.find(section => section.path === url);
+    this._availableMenuSections.forEach((section: MenuSection) => {
+      section.active = this.isSectionActive(section, activeMenuSection);
+    });
+  }
+
+  private isSectionActive(section: MenuSection, activeMenuSection: MenuSection): boolean {
+    if (activeMenuSection === section) {
+      return true;
+    } else if (section.pages?.length) {
+      for (const page of section.pages) {
+        if (this.isSectionActive(page, activeMenuSection)) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
   public availableMenuLinks(): Observable<Array<MenuSection>> {
     return this.availableMenuLinks$;
   }
diff --git a/ui-ngx/src/app/modules/home/components/ai-model/ai-model-dialog.component.html b/ui-ngx/src/app/modules/home/components/ai-model/ai-model-dialog.component.html
index 6802eaaf8b..d9471ef31d 100644
--- a/ui-ngx/src/app/modules/home/components/ai-model/ai-model-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/ai-model/ai-model-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2>{{ dialogTitle | translate }}</h2>
   <span class="flex-1"></span>
   <div tb-help="aiModels"></div>
diff --git a/ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rule-details-dialog.component.html b/ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rule-details-dialog.component.html
index 413b72e614..b7759bb49b 100644
--- a/ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rule-details-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rule-details-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form style="width: 800px">
-  <mat-toolbar class="justify-between" color="primary">
+  <mat-toolbar class="tb-dialog-header justify-between">
     <h2>{{ 'alarm-rule.edit-alarm-rule-additional-info' | translate }}</h2>
     <button mat-icon-button (click)="cancel()" type="button">
       <mat-icon class="material-icons">close</mat-icon>
diff --git a/ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rule-dialog.component.html b/ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rule-dialog.component.html
index 48f4e8a5af..af7d921d52 100644
--- a/ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rule-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rule-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <div [formGroup]="fieldFormGroup" class="calculated-field-dialog-container flex h-full flex-col">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ 'alarm-rule.alarm-rule' | translate}}</h2>
     <span class="flex-1"></span>
     <div tb-help="alarmRules"></div>
diff --git a/ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rules.component.html b/ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rules.component.html
index daee0a6e8c..a5c4dce2ce 100644
--- a/ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rules.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rules.component.html
@@ -17,19 +17,19 @@
 -->
 @if (!standalone) {
   <div class="tb-details-buttons xs:flex xs:flex-col">
-    <button mat-raised-button color="primary"
+    <button mat-stroked-button color="primary"
             [disabled]="(isLoading$ | async)"
             (click)="onEntityAction($event, 'open')"
             [class.!hidden]="isEdit || isDetailsPage">
       {{ 'common.open-details-page' | translate }}
     </button>
-    <button mat-raised-button color="primary"
+    <button mat-stroked-button color="primary"
             [disabled]="(isLoading$ | async)"
             (click)="onEntityAction($event, 'export')"
             [class.!hidden]="isEdit">
       {{ 'action.export' | translate }}
     </button>
-    <button mat-raised-button color="primary"
+    <button mat-stroked-button color="primary"
             [disabled]="(isLoading$ | async)"
             (click)="onEntityAction($event, 'delete')"
             [class.!hidden]="hideDelete() || isEdit">
diff --git a/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rule-condition-dialog.component.html b/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rule-condition-dialog.component.html
index 3426347595..3b23286118 100644
--- a/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rule-condition-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rule-condition-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="conditionFormGroup" (ngSubmit)="save()">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ (readonly ? 'alarm-rule.alarm-rule-condition' : 'alarm-rule.edit-alarm-rule-condition') | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-schedule-dialog.component.html b/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-schedule-dialog.component.html
index 3908d919b3..2795d37a64 100644
--- a/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-schedule-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-schedule-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form>
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ (readonly ? 'alarm-rule.schedule-title' : 'alarm-rule.edit-schedule') | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-complex-filter-predicate-dialog.component.html b/ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-complex-filter-predicate-dialog.component.html
index 5ca3cde37b..ef31db737f 100644
--- a/ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-complex-filter-predicate-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-complex-filter-predicate-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="complexFilterFormGroup" (ngSubmit)="save()" style="width: 1200px;">
-  <mat-toolbar class="justify-between" color="primary">
+  <mat-toolbar class="tb-dialog-header justify-between">
     <h2 translate>filter.complex-filter</h2>
     <button mat-icon-button
             (click)="cancel()"
diff --git a/ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-filter-dialog.component.html b/ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-filter-dialog.component.html
index 2d971f98ab..5c8bd09b69 100644
--- a/ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-filter-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-filter-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="filterFormGroup" (ngSubmit)="save()" style="width: 1200px;">
-  <mat-toolbar class="justify-between" color="primary">
+  <mat-toolbar class="tb-dialog-header justify-between">
     <h2>{{(data.isAdd ? 'alarm-rule.add-filter' : 'alarm-rule.edit-filter') | translate}}</h2>
     <button mat-icon-button
             (click)="cancel()"
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-comment-dialog.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-comment-dialog.component.html
index a5935e1f2b..b366a785fb 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-comment-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-comment-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form style="width: 600px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <span class="flex-1"></span>
     <button mat-icon-button (click)="close()" type="button">
       <mat-icon class="material-icons">close</mat-icon>
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.html
index a47de5b3f7..550c42605f 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="alarmFormGroup" style="width: 600px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ 'alarm.alarm-details' | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/alias/entity-alias-dialog.component.html b/ui-ngx/src/app/modules/home/components/alias/entity-alias-dialog.component.html
index 3394114d88..ce14dfe673 100644
--- a/ui-ngx/src/app/modules/home/components/alias/entity-alias-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/alias/entity-alias-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="entityAliasFormGroup" (ngSubmit)="save()" style="width: 700px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ (isAdd ? 'alias.add' : 'alias.edit') | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/alias/entity-aliases-dialog.component.html b/ui-ngx/src/app/modules/home/components/alias/entity-aliases-dialog.component.html
index 05aba8344a..ad7fcae448 100644
--- a/ui-ngx/src/app/modules/home/components/alias/entity-aliases-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/alias/entity-aliases-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="entityAliasesFormGroup" (ngSubmit)="save()" style="width: 800px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ title | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/api-key/add-api-key-dialog.component.html b/ui-ngx/src/app/modules/home/components/api-key/add-api-key-dialog.component.html
index 05549f5260..942d3333bc 100644
--- a/ui-ngx/src/app/modules/home/components/api-key/add-api-key-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/api-key/add-api-key-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar class="min-w-0" color="primary">
+<mat-toolbar class="tb-dialog-header min-w-0">
   <h2>{{ 'api-key.generate-title' | translate }}</h2>
   <span class="flex-1"></span>
   <div tb-help="apiKeys"></div>
diff --git a/ui-ngx/src/app/modules/home/components/api-key/api-key-generated-dialog.component.html b/ui-ngx/src/app/modules/home/components/api-key/api-key-generated-dialog.component.html
index 70e7ae7396..bf0158dd1d 100644
--- a/ui-ngx/src/app/modules/home/components/api-key/api-key-generated-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/api-key/api-key-generated-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar class="min-w-0" color="primary">
+<mat-toolbar class="tb-dialog-header min-w-0">
   <h2>{{ 'api-key.generated-api-key-title' | translate }}</h2>
   <span class="flex-1"></span>
   <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/api-key/api-keys-table-dialog.component.html b/ui-ngx/src/app/modules/home/components/api-key/api-keys-table-dialog.component.html
index 22aea2c7a2..f6d767cfc2 100644
--- a/ui-ngx/src/app/modules/home/components/api-key/api-keys-table-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/api-key/api-keys-table-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <div class="api-keys-dialog-container flex flex-col xs:h-full">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ 'api-key.manage-api-keys' | translate }}</h2>
     <span class="flex-1"></span>
     <div tb-help="apiKeys"></div>
diff --git a/ui-ngx/src/app/modules/home/components/attribute/add-attribute-dialog.component.html b/ui-ngx/src/app/modules/home/components/attribute/add-attribute-dialog.component.html
index eddcf3f9b2..586065baf8 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/add-attribute-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/attribute/add-attribute-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="attributeFormGroup" (ngSubmit)="add()" style="min-width: 420px; max-width: 420px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ (isTelemetry ? 'attribute.add-telemetry' : 'attribute.add') | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/attribute/add-widget-to-dashboard-dialog.component.html b/ui-ngx/src/app/modules/home/components/attribute/add-widget-to-dashboard-dialog.component.html
index 41d5d69edb..36f2fb831f 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/add-widget-to-dashboard-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/attribute/add-widget-to-dashboard-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="addWidgetFormGroup" (ngSubmit)="add()" style="min-width: 400px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>attribute.add-widget-to-dashboard</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/audit-log/audit-log-details-dialog.component.html b/ui-ngx/src/app/modules/home/components/audit-log/audit-log-details-dialog.component.html
index 9db295dc26..c084023723 100644
--- a/ui-ngx/src/app/modules/home/components/audit-log/audit-log-details-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/audit-log/audit-log-details-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2 translate>audit-log.audit-log-details</h2>
   <span class="flex-1"></span>
   <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/calculated-field.component.html b/ui-ngx/src/app/modules/home/components/calculated-fields/calculated-field.component.html
index 86d183dcfd..686de981c8 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/calculated-field.component.html
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/calculated-field.component.html
@@ -17,19 +17,19 @@
 -->
 @if (!standalone) {
   <div class="tb-details-buttons xs:flex xs:flex-col">
-    <button mat-raised-button color="primary"
+    <button mat-stroked-button color="primary"
             [disabled]="(isLoading$ | async)"
             (click)="onEntityAction($event, 'open')"
             [class.!hidden]="isEdit || isDetailsPage">
       {{ 'common.open-details-page' | translate }}
     </button>
-    <button mat-raised-button color="primary"
+    <button mat-stroked-button color="primary"
             [disabled]="(isLoading$ | async)"
             (click)="onEntityAction($event, 'export')"
             [class.!hidden]="isEdit">
       {{ 'action.export' | translate }}
     </button>
-    <button mat-raised-button color="primary"
+    <button mat-stroked-button color="primary"
             [disabled]="(isLoading$ | async)"
             (click)="onEntityAction($event, 'delete')"
             [class.!hidden]="hideDelete() || isEdit">
diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.html b/ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.html
index 503927c71a..ce258b811f 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <div [formGroup]="fieldFormGroup" class="calculated-field-dialog-container flex flex-col">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ 'entity.type-calculated-field' | translate}}</h2>
     <span class="flex-1"></span>
     <div tb-help="calculatedField"></div>
diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/components/test-dialog/calculated-field-script-test-dialog.component.html b/ui-ngx/src/app/modules/home/components/calculated-fields/components/test-dialog/calculated-field-script-test-dialog.component.html
index 5cb43c752e..fb60ade3c6 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/components/test-dialog/calculated-field-script-test-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/components/test-dialog/calculated-field-script-test-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form #testScriptContainer class="cf-test-dialog-container size-full" [formGroup]="calculatedFieldScriptTestFormGroup">
-  <mat-toolbar class="flex justify-between" color="primary">
+  <mat-toolbar class="tb-dialog-header flex justify-between">
     <h2>{{ 'calculated-fields.test-script-function' | translate }} ({{ 'api-usage.tbel' | translate }})</h2>
     <button mat-icon-button
             (click)="cancel()"
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-dialog.component.html
index ebd73b5388..456b690346 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-dialog.component.html
@@ -16,13 +16,13 @@
 
 -->
 <form class="tb-add-widget-dialog" [formGroup]="widgetFormGroup">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <div class="tb-add-widget-toolbar">
       <h2>{{'widget.add' | translate}}:</h2>
       <span class="flex-1">{{data.widgetInfo.widgetName}}</span>
       <div class="flex flex-row items-center justify-start gt-xs:gap-4" style="min-width: fit-content;">
         @if (widgetConfig.hasBasicMode) {
-          <tb-toggle-select appearance="fill-invert" selectMediaBreakpoint="xs"
+          <tb-toggle-select appearance="fill" selectMediaBreakpoint="xs"
                             [(ngModel)]="widgetConfigMode" [ngModelOptions]="{standalone: true}">
             <tb-toggle-option value="basic">{{ 'widget.basic-mode' | translate }}</tb-toggle-option>
             <tb-toggle-option value="advanced">{{ 'widget.advanced-mode' | translate }}</tb-toggle-option>
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.html
index 35d77e784a..ed2f0fad3d 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form (ngSubmit)="save()">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>dashboard.update-image</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html
index c62c29555e..151a415e6c 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html
@@ -15,6 +15,20 @@
     limitations under the License.
 
 -->
+
+<ng-template #dashboardBreadcrumbsTpl>
+  <tb-states-component class="lt-md:flex-1"
+                       [statesControllerId]="dashboardConfiguration.settings.stateControllerId"
+                       [dashboardCtrl]="this"
+                       [dashboardId]="setStateDashboardId ? dashboard.id.id : ''"
+                       [isMobile]="isMobile"
+                       [state]="dashboardCtx.state"
+                       [currentState]="currentState"
+                       [syncStateWithQueryParam]="syncStateWithQueryParam"
+                       [states]="dashboardConfiguration.states">
+  </tb-states-component>
+</ng-template>
+
 <div class="tb-dashboard-page mat-content flex-1" [class.mobile-app]="isMobileApp && !isEdit" tb-toast
      tb-fullscreen [fullscreenElement]="elRef.nativeElement" [fullscreen]="widgetEditMode || iframeMode || forceFullscreen || isFullscreen">
   <tb-hotkeys-cheatsheet #cheatSheetComponent></tb-hotkeys-cheatsheet>
@@ -26,7 +40,7 @@
       <div class="tb-dashboard-action-panels flex flex-col items-stretch justify-center gt-sm:flex-row gt-sm:items-center gt-sm:justify-between">
         <div class="tb-dashboard-action-panel tb-left-panel" [class.!hidden]="isMobileApp && !isEdit">
           @if (!isPublicUser() && forceFullscreen) {
-            <tb-user-menu class="gt-sm:!hidden" displayUserInfo="true">
+            <tb-user-menu class="gt-sm:!hidden">
             </tb-user-menu>
           }
           @if (isEdit) {
@@ -50,17 +64,24 @@
                 [dashboardCtrl]="this">
               </tb-select-dashboard-breakpoint>
             </div>
+            <tb-states-component class="lt-md:flex-1"
+                                 [statesControllerId]="'default'"
+                                 [dashboardCtrl]="this"
+                                 [dashboardId]="setStateDashboardId ? dashboard.id.id : ''"
+                                 [isMobile]="isMobile"
+                                 [state]="dashboardCtx.state"
+                                 [currentState]="currentState"
+                                 [syncStateWithQueryParam]="syncStateWithQueryParam"
+                                 [states]="dashboardConfiguration.states">
+            </tb-states-component>
+          } @else {
+            @if (!isPublicUser()) {
+              <tb-notification-bell class="gt-sm:!hidden"></tb-notification-bell>
+            }
+            <tb-breadcrumb class="lt-md:flex-1"
+              [componentBreadcrumbsTpl]="dashboardBreadcrumbsTpl">
+            </tb-breadcrumb>
           }
-          <tb-states-component class="lt-md:flex-1"
-                               [statesControllerId]="isEdit ? 'default' : dashboardConfiguration.settings.stateControllerId"
-                               [dashboardCtrl]="this"
-                               [dashboardId]="setStateDashboardId ? dashboard.id.id : ''"
-                               [isMobile]="isMobile"
-                               [state]="dashboardCtx.state"
-                               [currentState]="currentState"
-                               [syncStateWithQueryParam]="syncStateWithQueryParam"
-                               [states]="dashboardConfiguration.states">
-          </tb-states-component>
           @if (isEdit) {
             <button class="gt-md:!hidden" mat-icon-button
                     matTooltip="{{'dashboard.manage-states' | translate}}"
@@ -79,6 +100,13 @@
           @if (showDashboardLogo()) {
             <tb-logo [link]="dashboardLogoLink" [src]="dashboardLogo | image | async" class="dashboard_logo"></tb-logo>
           }
+          @if (!isEdit) {
+            <button mat-icon-button
+                    [class.!hidden]="forceFullscreen || isFullscreen"
+                    class="-ml-2 gt-sm:!hidden" (click)="toggleSidenav()">
+              <mat-icon class="material-icons">menu</mat-icon>
+            </button>
+          }
         </div>
         <div class="tb-dashboard-action-panel">
           <button [class.!hidden]="!showCloseToolbar()" mat-icon-button class="close-action"
@@ -88,7 +116,7 @@
             <mat-icon>arrow_forward</mat-icon>
           </button>
           @if (!isPublicUser() && forceFullscreen) {
-            <tb-user-menu class="lt-md:!hidden" displayUserInfo="true">
+            <tb-user-menu class="lt-md:!hidden">
             </tb-user-menu>
           }
           <button [class.!hidden]="!showRightLayoutSwitch()" mat-icon-button
@@ -97,12 +125,20 @@
                   (click)="toggleLayouts()">
             <mat-icon>{{isRightLayoutOpened ? 'arrow_back' : 'menu'}}</mat-icon>
           </button>
-          <button [class.!hidden]="hideFullscreenButton()" class="xs:!hidden" mat-icon-button
-                  matTooltip="{{(isFullscreen ? 'fullscreen.exit' : 'fullscreen.expand') | translate}}"
-                  matTooltipPosition="below"
-                  (click)="isFullscreen = !isFullscreen">
-            <mat-icon>{{ isFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
-          </button>
+          <div class="flex flex-row-reverse items-center lt-md:!hidden">
+            @if (!isEdit && !isPublicUser()) {
+              <tb-notification-bell></tb-notification-bell>
+            }
+            <button [class.!hidden]="hideFullscreenButton()" mat-icon-button
+                    matTooltip="{{(isFullscreen ? 'fullscreen.exit' : 'fullscreen.expand') | translate}}"
+                    matTooltipPosition="below"
+                    (click)="isFullscreen = !isFullscreen">
+              <mat-icon>{{ isFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
+            </button>
+          </div>
+          <mat-divider
+            [class.!hidden]="readonly || isEdit"
+            class="tb-toolbar-divider -mr-1.5 ml-2 lt-md:!hidden lt-lg:mr-[-3px]" vertical></mat-divider>
           <button [class.!hidden]="!currentDashboardId || isMobileApp || !displayExport() || isEdit" mat-icon-button
                   matTooltip="{{'dashboard.export' | translate}}"
                   matTooltipPosition="below"
@@ -191,7 +227,7 @@
               {{ 'dashboard.settings' | translate }}
             </button>
           }
-          <button [class.!hidden]="!currentDashboardId || isEdit || isMobileApp || !isTenantAdmin() || !displayUpdateDashboardImage()" mat-icon-button
+          <button [class.!hidden]="!currentDashboardId || isEdit || isMobileApp || !canEdit() || readonly || !displayUpdateDashboardImage()" mat-icon-button
                   matTooltip="{{'dashboard.update-image' | translate}}"
                   matTooltipPosition="below"
                   (click)="updateDashboardImage($event)">
@@ -264,15 +300,25 @@
                                     [aliasController]="dashboardCtx.aliasController">
           </tb-aliases-entity-select>
           @if (!isEdit && !widgetEditMode && !embedded && displayDashboardsSelect()) {
-            <tb-dashboard-select [(ngModel)]="currentDashboardId"
+            <tb-dashboard-select class="ml-2" [(ngModel)]="currentDashboardId"
                                  (ngModelChange)="currentDashboardIdChanged(currentDashboardId)"
                                  [customerId]="currentCustomerId"
                                  [dashboardsScope]="currentDashboardScope">
             </tb-dashboard-select>
           }
+          @if (!isEdit && !widgetEditMode) {
+            <div class="-mr-1.5 md-lg:!hidden lt-md:!hidden" [class.!hidden]="githubBadge.hideGithubBadge">
+              <tb-github-badge #githubBadge ></tb-github-badge>
+            </div>
+          }
         </div>
       </div>
     </tb-dashboard-toolbar>
+    @if (hideMainToolbar && toolbarOpened && (homeService.hideLoadingBar$ | async) === false && (isLoading$ | async)) {
+      <mat-progress-bar color="warn" style="z-index: 10; margin-bottom: -4px; width: 100%;" mode="indeterminate"
+      >
+      </mat-progress-bar>
+    }
   </section>
   <section class="tb-dashboard-container tb-absolute-fill"
            tb-toast toastTarget="dashboardRoot"
@@ -350,7 +396,7 @@
         @if (!readonly && (hideToolbar || widgetEditMode)) {
           <section data-html2canvas-ignore class="tb-header-buttons tb-enter-edit-mode flex flex-row flex-wrap items-end justify-start">
             <button [class.!hidden]="isEdit"
-                    color="primary"
+                    color="#fff"
                     mat-mini-fab
                     class="tb-btn-header tb-btn-edit"
                     (click)="toggleDashboardEditMode()"
@@ -359,7 +405,7 @@
               <mat-icon>edit</mat-icon>
             </button>
             <button [class.!hidden]="!isEdit"
-                    color="primary"
+                    color="#fff"
                     mat-mini-fab
                     class="tb-btn-header tb-btn-edit"
                     (click)="saveDashboard()"
@@ -369,7 +415,7 @@
               <mat-icon>done</mat-icon>
             </button>
             <button [class.!hidden]="!isEdit"
-                    color="primary"
+                    color="#fff"
                     mat-mini-fab
                     class="tb-btn-header tb-btn-edit"
                     (click)="toggleDashboardEditMode()"
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.scss b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.scss
index 1db4c35a6f..79383cec12 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.scss
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.scss
@@ -15,10 +15,10 @@
  */
 @import "../../../../../scss/constants";
 
-$toolbar-height: 50px !default;
-$fullscreen-toolbar-height: 64px !default;
-$mobile-toolbar-height: 84px !default;
-$mobile-app-toolbar-height: 40px !default;
+$toolbar-height: 56px !default;
+$fullscreen-toolbar-height: 56px !default;
+$mobile-toolbar-height: 96px !default;
+$mobile-app-toolbar-height: 48px !default;
 
 tb-dashboard-page {
   display: flex;
@@ -79,8 +79,7 @@ div.tb-dashboard-page {
   }
 
   .mat-divider-vertical.tb-toolbar-divider {
-    border-right-color: rgba(255,255,255,0.75);
-    height: 30px;
+    height: 100%;
   }
 
   .tb-dashboard-container {
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
index 26a0ef2761..024708455b 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
@@ -149,6 +149,7 @@ import {
   MoveWidgetsDialogResult
 } from '@home/components/dashboard-page/layout/move-widgets-dialog.component';
 import { HttpStatusCode } from '@angular/common/http';
+import { HomeService } from '@core/services/home.service';
 
 // @dynamic
 @Component({
@@ -199,6 +200,9 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
     return ((this.hideToolbarValue || this.hideToolbarSetting()) && !this.isEdit) || (this.isEditingWidget || this.isAddingWidget);
   }
 
+  @Input()
+  hideMainToolbar = true;
+
   @Input()
   syncStateWithQueryParam = true;
 
@@ -267,7 +271,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
   dashboardLogoLink = this.getDashboardLogoLink();
 
   private dashboardLogoCache: SafeUrl;
-  private defaultDashboardLogo = 'assets/logo_title_white.svg';
+  private defaultDashboardLogo = 'assets/logo_title_black.svg';
 
   private dashboardResize$: ResizeObserver;
 
@@ -374,7 +378,8 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
               private viewContainerRef: ViewContainerRef,
               private cd: ChangeDetectorRef,
               public elRef: ElementRef,
-              private injector: Injector) {
+              private injector: Injector,
+              public homeService: HomeService) {
     super(store);
     if (isDefinedAndNotNull(this.embeddedValue)) {
       this.embedded = this.embeddedValue;
@@ -382,6 +387,9 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
   }
 
   ngOnInit() {
+    if (this.hideMainToolbar) {
+      this.homeService.setHideMainToolbar(true);
+    }
     this.rxSubscriptions.push(this.route.data.subscribe(
       (data) => {
         let dashboardPageInitData: DashboardPageInitData;
@@ -867,6 +875,10 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
     return this.authUser.authority === Authority.SYS_ADMIN;
   }
 
+  public canEdit(): boolean {
+    return this.isTenantAdmin() || (this.isSystemAdmin() && this.widgetEditMode);
+  }
+
   public exportDashboard($event: Event) {
     if ($event) {
       $event.preventDefault();
@@ -1745,6 +1757,10 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
     }
   }
 
+  toggleSidenav() {
+    this.homeService.toggleSideBar.emit();
+  }
+
   get showMainLayoutFiller(): boolean {
     const layoutMaxWidth = this.dashboardUtils.getBreakpointInfoById(this.layouts.main.layoutCtx.breakpoint)?.maxWidth || Infinity;
     const dashboardMaxWidth = this.dashboardUtils.getBreakpointInfoById(this.dashboardCtx.breakpoint)?.maxWidth || Infinity;
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html
index 7fb0f3f68d..9221414b45 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form (ngSubmit)="save()" style="width: 750px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>{{settings ? 'dashboard.settings' : 'layout.settings'}}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-state.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-state.component.html
index fa9dc29dca..3d8ec87adc 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-state.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-state.component.html
@@ -20,6 +20,7 @@
     [embedded]="true"
     [syncStateWithQueryParam]="false"
     [hideToolbar]="true"
+    [hideMainToolbar]="false"
     [currentState]="currentState"
     [dashboard]="dashboard"
     [parentDashboard]="parentDashboard"
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-toolbar.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-toolbar.component.html
index bbbdca13cc..5971889e87 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-toolbar.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-toolbar.component.html
@@ -15,18 +15,17 @@
     limitations under the License.
 
 -->
-<mat-fab-toolbar [isOpen]="toolbarOpened" color="primary" direction="left"
-                 [class.is-fullscreen]="forceFullscreen"
-                 [class.mat-elevation-z1]="forceFullscreen && toolbarOpened">
+<mat-fab-toolbar [isOpen]="toolbarOpened" direction="left"
+                 [class.is-fullscreen]="forceFullscreen">
   <mat-fab-trigger>
-    <button mat-fab color="primary"
+    <button mat-fab color="#fff"
             [matTooltip]="!toolbarOpened ? ('dashboard.open-toolbar' | translate) : ''"
             matTooltipPosition="below"
             (click)="onTriggerClick()">
       <mat-icon>more_horiz</mat-icon>
     </button>
   </mat-fab-trigger>
-  <mat-toolbar color="primary">
+  <mat-toolbar>
     <mat-fab-actions class="mat-toolbar-tools">
       <ng-content></ng-content>
     </mat-fab-actions>
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-toolbar.component.scss b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-toolbar.component.scss
index d4b7d444aa..e0392d66d0 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-toolbar.component.scss
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-toolbar.component.scss
@@ -15,13 +15,13 @@
  */
 @import "../../../../../scss/constants";
 
-$toolbar-height: 50px !default;
-$fullscreen-toolbar-height: 64px !default;
-$mobile-toolbar-height: 80px !default;
-$half-mobile-toolbar-height: 40px !default;
-$mobile-toolbar-height-total: 84px !default;
+$toolbar-height: 56px !default;
+$fullscreen-toolbar-height: 56px !default;
+$mobile-toolbar-height: 96px !default;
+$half-mobile-toolbar-height: 48px !default;
+$mobile-toolbar-height-total: 96px !default;
 
-$mobile-app-toolbar-height: 40px !default;
+$mobile-app-toolbar-height: 48px !default;
 
 div.tb-dashboard-page.mobile-app {
   tb-dashboard-toolbar {
@@ -95,6 +95,12 @@ tb-dashboard-toolbar {
       }
     }
 
+    &.mat-is-open {
+      .mat-fab-toolbar-wrapper {
+        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+      }
+    }
+
     .mat-fab-toolbar-wrapper {
       height: $mobile-toolbar-height-total;
 
@@ -121,12 +127,12 @@ tb-dashboard-toolbar {
 
         mat-fab-actions {
           margin-top: 0;
+          padding: 0 16px !important;
           font-size: 16px;
 
           @media #{$mat-lt-md} {
             height: $mobile-toolbar-height;
             max-height: $mobile-toolbar-height;
-            padding: 0 8px !important;
           }
 
           .close-action {
@@ -138,14 +144,14 @@ tb-dashboard-toolbar {
             height: $mobile-toolbar-height;
 
             @media #{$mat-gt-sm} {
-              height: 46px;
+              height: $toolbar-height;
             }
 
             .tb-dashboard-action-panels {
               height: $mobile-toolbar-height;
 
               @media #{$mat-gt-sm} {
-                height: 46px;
+                height: $toolbar-height;
               }
 
               .tb-dashboard-action-panel {
@@ -161,14 +167,14 @@ tb-dashboard-toolbar {
                 }
 
                 @media #{$mat-lt-md} {
-                  padding-left: 12px;
+              //    padding-left: 12px;
                 }
 
                 @media #{$mat-xs} {
                   gap: 3px;
                   padding-left: 0;
                   &.tb-left-panel {
-                    padding-left: 12px;
+                 //   padding-left: 12px;
                   }
                 }
 
@@ -198,14 +204,14 @@ tb-dashboard-toolbar {
                   &.tb-left-panel {
                     place-content: center flex-end;
                   }
-                  height: 46px;
+                  height: $toolbar-height;
                 }
 
                 > div {
                   height: $half-mobile-toolbar-height;
 
                   @media #{$mat-gt-sm} {
-                    height: 46px;
+                    height: $toolbar-height;
                   }
                 }
 
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.html
index 7d2ea9cdb5..07a205095a 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.html
@@ -16,11 +16,11 @@
 
 -->
 <div class="tb-dashboard-widget-select">
-  <mat-toolbar color="primary" class="tb-widget-select-header flex flex-col">
+  <mat-toolbar class="tb-widget-select-header flex flex-col">
     <div class="tb-widget-select-title-row flex flex-row items-center">
       @if (showTopLevelWidgetModeToggle()) {
         <tb-toggle-select class="tb-top-level-widget-mode-toggle"
-                          appearance="fill-invert"
+                          appearance="fill"
                           [disablePagination]="true"
                           [(ngModel)]="selectWidgetMode">
           <tb-toggle-option value="installed" [template]="installedWidgetsOption"></tb-toggle-option>
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.scss b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.scss
index c63eb26caf..c8a12c55ad 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.scss
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.scss
@@ -35,15 +35,12 @@ tb-dashboard-widget-select {
     width: 100%;
     height: auto;
     gap: 16px;
-    color: #fff;
     padding: 12px 12px 12px 24px;
 
     button.mat-mdc-icon-button.mat-mdc-button-base {
       --mdc-icon-button-state-layer-size: 40px;
       --mat-icon-button-state-layer-size: 40px;
-      --mdc-icon-button-icon-color: #fff;
       padding: 8px;
-      color: #fff;
     }
   }
 
@@ -56,7 +53,6 @@ tb-dashboard-widget-select {
       font-size: 24px;
       line-height: 32px;
       font-weight: 400;
-      color: #fff;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
@@ -90,11 +86,6 @@ tb-dashboard-widget-select {
             }
           }
         }
-        &.tb-fill.tb-invert {
-          .mat-button-toggle.mat-button-toggle-appearance-standard {
-            color: #FFF;
-          }
-        }
       }
     }
   }
@@ -106,14 +97,14 @@ tb-dashboard-widget-select {
     .tb-widget-select-search {
       height: 40px;
       padding: 8px 12px;
-      background: rgba(255, 255, 255, 0.16);
-      border: 1px solid rgba(255, 255, 255, 0.15);
+      background: rgba(0, 0, 0, 0.03);
+      border: 1px solid rgba(0, 0, 0, 0.15);
       border-radius: 8px;
       caret-color: $tb-primary-color;
-      color: rgba(255, 255, 255, 0.84);
+      color: rgba(0, 0, 0, 0.54);
 
       mat-icon {
-        color: rgba(255, 255, 255, 0.8);
+        color: rgba(0, 0, 0, 0.54);
       }
 
       input {
@@ -124,23 +115,22 @@ tb-dashboard-widget-select {
         font-size: 16px;
         line-height: 24px;
         background: transparent;
-        color: #fff;
         border: none;
         outline: none;
 
         &::placeholder {
-          color: rgba(255, 255, 255, 0.8);
+          color: rgba(0, 0, 0, 0.54);
           opacity: 1;
         }
       }
 
       button.mat-mdc-icon-button mat-icon {
-        color: rgba(255, 255, 255, 0.8);
+        color: rgba(0, 0, 0, 0.54);
       }
 
       &.focus {
         background: #fff;
-        border-color: rgba(255, 255, 255, 0.15);
+        border-color: rgba(0, 0, 0, 0.15);
         caret-color: $tb-primary-color;
 
         mat-icon {
@@ -165,14 +155,9 @@ tb-dashboard-widget-select {
     }
 
     .tb-widget-select-sort {
-      color: #fff;
       font-weight: 500;
       font-size: 14px;
       letter-spacing: 0.25px;
-
-      mat-icon {
-        color: #fff;
-      }
     }
   }
 
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/add-new-breakpoint-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/add-new-breakpoint-dialog.component.html
index 14656f6b7c..12d95c89e4 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/add-new-breakpoint-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/add-new-breakpoint-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2 translate>layout.add-new-breakpoint</h2>
   <span class="flex-1"></span>
   <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html
index d96f491113..e6abba1a8e 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="layoutsFormGroup" (ngSubmit)="save()">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>layout.manage</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/move-widgets-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/move-widgets-dialog.component.html
index 1e0d835d4f..9d493adee3 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/move-widgets-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/move-widgets-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form (ngSubmit)="move()">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>dashboard.move-all-widgets</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.html
index 58cb21253d..83040a0cc5 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="stateFormGroup" (ngSubmit)="save()" style="min-width: 480px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>{{ isAdd ? 'dashboard.add-state' : 'dashboard.edit-state' }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/states/default-state-controller.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/states/default-state-controller.component.html
index a84fb44d26..6fe5c774e8 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/default-state-controller.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/default-state-controller.component.html
@@ -15,11 +15,16 @@
     limitations under the License.
 
 -->
-<mat-select class="default-state-controller" [class.!hidden]="!displayStateSelection()"
-            [(ngModel)]="stateObject[0].id" (ngModelChange)="selectedStateIdChanged()">
-  @for (stateKv of states | keyvalue; track stateKv) {
-    <mat-option [value]="stateKv.key">
-      {{getStateName(stateKv.key, stateKv.value)}}
-    </mat-option>
+<div class="flex flex-row items-center justify-start gap-2" [class.tb-mobile]="isMobile">
+  @if ((breadcrumbs$ | async).length > 1) {
+    <span class='state-divider'> > </span>
   }
-</mat-select>
+  <mat-select class="default-state-controller" [class.!hidden]="!displayStateSelection()"
+              [(ngModel)]="stateObject[0].id" (ngModelChange)="selectedStateIdChanged()">
+    @for (stateKv of states | keyvalue; track stateKv) {
+      <mat-option [value]="stateKv.key">
+        {{getStateName(stateKv.key, stateKv.value)}}
+      </mat-option>
+    }
+  </mat-select>
+</div>
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/states/default-state-controller.component.scss b/ui-ngx/src/app/modules/home/components/dashboard-page/states/default-state-controller.component.scss
index d43994ee31..63cc557beb 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/default-state-controller.component.scss
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/default-state-controller.component.scss
@@ -16,13 +16,55 @@
 :host {
   pointer-events: all;
   width: min-content; //for Safari
+
+  .state-divider {
+    display: none;
+    padding: 0;
+    width: 20px;
+    min-width: 20px;
+    text-align: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    pointer-events: none;
+  }
+
+  :host-context(.tb-breadcrumb) {
+    .state-divider {
+      display: block;
+    }
+    .tb-mobile {
+      .state-divider {
+        display: none;
+      }
+    }
+  }
+
+}
+
+:host-context(.tb-breadcrumb) {
+  ::ng-deep {
+    .mat-mdc-select.default-state-controller {
+      --mat-select-trigger-text-size: 16px;
+      --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.76);
+    }
+  }
+  .tb-mobile {
+    ::ng-deep {
+      .mat-mdc-select.default-state-controller {
+        --mat-select-trigger-text-size: 24px;
+        --mat-select-trigger-text-line-height: 32px;
+        --mat-select-trigger-text-weight: 400;
+      }
+    }
+  }
 }
 
 :host ::ng-deep {
   .mat-mdc-select.default-state-controller {
+    --mat-select-trigger-text-size: 14px;
     .mat-mdc-select-value {
       max-width: 200px;
-      font-size: 14px;
     }
     .mat-mdc-select-arrow {
       width: 24px;
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/states/default-state-controller.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/states/default-state-controller.component.ts
index c0b3668e2e..17a6a97ad2 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/default-state-controller.component.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/default-state-controller.component.ts
@@ -27,6 +27,7 @@ import { base64toObj, objToBase64 } from '@app/core/utils';
 import { DashboardUtilsService } from '@core/services/dashboard-utils.service';
 import { EntityService } from '@core/http/entity.service';
 import { MobileService } from '@core/services/mobile.service';
+import { BreadcrumbService } from '@core/services/breadcrumb.service';
 
 @Component({
     selector: 'tb-default-state-controller',
@@ -36,6 +37,8 @@ import { MobileService } from '@core/services/mobile.service';
 })
 export class DefaultStateControllerComponent extends StateControllerComponent implements OnInit, OnDestroy {
 
+  breadcrumbs$ = this.breadcrumbService.breadcrumbs$;
+
   constructor(protected router: Router,
               protected route: ActivatedRoute,
               protected ngZone: NgZone,
@@ -43,7 +46,8 @@ export class DefaultStateControllerComponent extends StateControllerComponent im
               private utils: UtilsService,
               private entityService: EntityService,
               private mobileService: MobileService,
-              private dashboardUtils: DashboardUtilsService) {
+              private dashboardUtils: DashboardUtilsService,
+              private breadcrumbService: BreadcrumbService) {
     super(router, route, ngZone, statesControllerService);
   }
 
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/states/entity-state-controller.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/states/entity-state-controller.component.html
index a932cd145e..7a56f11197 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/entity-state-controller.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/entity-state-controller.component.html
@@ -16,29 +16,33 @@
 
 -->
 <div class="entity-state-controller">
-  @if (!isMobile || stateObject.length === 1) {
-    <div class="flex flex-row items-center justify-start">
-      @for (state of stateObject; track state; let i = $index; let isLast = $last) {
+  @if (!isMobile) {
+    <div class="flex flex-row items-center justify-start gap-2">
+      @for (state of stateObject; track state.id; let i = $index; let isLast = $last;) {
+        @if ((breadcrumbs$ | async).length > 1 || i > 0) {
+          <span class='state-divider' [class.last-divider]="isLast"> > </span>
+        }
         <span class="state-entry"
-              [style.font-weight]="isLast ? 'bold' : 'normal'"
-              [style.cursor]="isLast ? 'default' : 'pointer'" (click)="navigatePrevState(i)">
+              [class.last-entry]="isLast"
+              (click)="navigatePrevState(i)">
           {{getStateName(i)}}
-          <span class='state-divider' [class.!hidden]="isLast"> > </span>
         </span>
       }
     </div>
-  }
-  @if (isMobile && stateObject.length > 1) {
-    <mat-select
-      [(ngModel)]="selectedStateIndex" (ngModelChange)="selectedStateIndexChanged()">
-      @for (state of stateObject; track state; let i = $index) {
-        <mat-option [value]="i">
-          {{getStateName(i)}}
-        </mat-option>
-      }
-    </mat-select>
+  } @else {
+    @if (stateObject.length > 1) {
+      <mat-select
+        [(ngModel)]="selectedStateIndex" (ngModelChange)="selectedStateIndexChanged()">
+        @for (state of stateObject; track state.id; let i = $index) {
+          <mat-option [value]="i">
+            {{getStateName(i)}}
+          </mat-option>
+        }
+      </mat-select>
+    } @else {
+      <h1 (click)="navigatePrevState(0)">
+          {{getStateName(0)}}
+      </h1>
+    }
   }
 </div>
-
-
-
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/states/entity-state-controller.component.scss b/ui-ngx/src/app/modules/home/components/dashboard-page/states/entity-state-controller.component.scss
index f2950ba584..a0e1153dee 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/entity-state-controller.component.scss
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/entity-state-controller.component.scss
@@ -14,37 +14,65 @@
  * limitations under the License.
  */
 :host {
+  display: block;
   overflow: hidden;
 
   .entity-state-controller {
+    color: rgba(0,0,0,0.76);
     .state-divider {
-      padding: 0 15px;
+      padding: 0;
+      width: 20px;
+      text-align: center;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       pointer-events: none;
+      opacity: .75;
+      &.last-divider {
+        opacity: 1;
+      }
     }
 
     .state-entry {
       pointer-events: all;
       overflow: hidden;
-      font-size: 18px;
+      font-size: 16px;
+      font-weight: 400;
       text-overflow: ellipsis;
       white-space: nowrap;
+      color: inherit;
       outline: none;
+      cursor: pointer;
+      &:not(.last-entry) {
+        opacity: .75;
+        transition: opacity .35s;
+        &:hover,
+        &:focus {
+          opacity: 1;
+        }
+      }
+      &.last-entry {
+        cursor: default;
+      }
+    }
+
+    h1 {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: 24px;
+      line-height: 32px;
+      font-weight: 400;
     }
   }
 }
 
 :host ::ng-deep {
   .mat-mdc-select {
-    .mat-mdc-select-value {
-      max-width: 200px;
-      .mat-mdc-select-value-text {
-        font-size: 18px;
-        font-weight: 700;
-      }
-    }
+    --mat-select-trigger-text-size: 24px;
+    --mat-select-trigger-text-line-height: 32px;
+    --mat-select-trigger-text-weight: 400;
+    --mat-select-enabled-trigger-text-color: rgba(0,0,0,0.76);
     .mat-mdc-select-arrow {
       width: 24px;
     }
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/states/entity-state-controller.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/states/entity-state-controller.component.ts
index f8dfff6c97..7440932268 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/entity-state-controller.component.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/entity-state-controller.component.ts
@@ -29,6 +29,7 @@ import { EntityService } from '@core/http/entity.service';
 import { EntityType } from '@shared/models/entity-type.models';
 import { map, tap } from 'rxjs/operators';
 import { MobileService } from '@core/services/mobile.service';
+import { BreadcrumbService } from '@core/services/breadcrumb.service';
 
 @Component({
     selector: 'tb-entity-state-controller',
@@ -38,6 +39,8 @@ import { MobileService } from '@core/services/mobile.service';
 })
 export class EntityStateControllerComponent extends StateControllerComponent implements OnInit, OnDestroy {
 
+  breadcrumbs$ = this.breadcrumbService.breadcrumbs$;
+
   selectedStateIndex = -1;
 
   constructor(protected router: Router,
@@ -47,7 +50,8 @@ export class EntityStateControllerComponent extends StateControllerComponent imp
               private utils: UtilsService,
               private entityService: EntityService,
               private mobileService: MobileService,
-              private dashboardUtils: DashboardUtilsService) {
+              private dashboardUtils: DashboardUtilsService,
+              private breadcrumbService: BreadcrumbService) {
     super(router, route, ngZone, statesControllerService);
   }
 
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.html
index 40cad0acf3..93881d545c 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2 translate>dashboard.manage-states</h2>
   <span class="flex-1"></span>
   <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-view/dashboard-view.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-view/dashboard-view.component.ts
index 14bbd20688..6082e8375e 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-view/dashboard-view.component.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard-view/dashboard-view.component.ts
@@ -35,4 +35,5 @@ export class DashboardViewComponent extends PageComponent {
               private route: ActivatedRoute) {
     super(store);
   }
+
 }
diff --git a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.html b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.html
index 5ba7c784b3..23b6f98925 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.html
@@ -78,7 +78,7 @@
   </mat-menu>
   <div [class]="dashboardClass" id="gridster-background">
     <gridster #gridster id="gridster-child" [options]="gridsterOpts">
-      @for (widget of dashboardWidgets; track widget) {
+      @for (widget of dashboardWidgets; track widget.widgetId) {
         <gridster-item #gridsterItem [item]="widget" [class]="{'tb-noselect': isEdit}">
           <tb-widget-container
             [gridsterItem]="gridsterItem"
diff --git a/ui-ngx/src/app/modules/home/components/dashboard/select-target-layout-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard/select-target-layout-dialog.component.html
index bf89db1b8d..4c60f62d98 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard/select-target-layout-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard/select-target-layout-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form>
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>layout.select</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/dashboard/select-target-state-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard/select-target-state-dialog.component.html
index fdd4b84397..faeb9811d9 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard/select-target-state-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard/select-target-state-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="stateFormGroup" (ngSubmit)="save()">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>dashboard.select-state</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/details-panel.component.html b/ui-ngx/src/app/modules/home/components/details-panel.component.html
index eebb9a6db7..61f85dfa10 100644
--- a/ui-ngx/src/app/modules/home/components/details-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/details-panel.component.html
@@ -16,7 +16,7 @@
 
 -->
 <header>
-  <mat-toolbar class="details-toolbar" color="primary" [style.height]="headerHeightPx+'px'">
+  <mat-toolbar class="details-toolbar" [style.height]="headerHeightPx+'px'">
     <div class="mat-toolbar-tools flex flex-row items-center justify-start" style="height: 100%;">
       <div class="mat-toolbar-tools tb-details-title-header flex flex-1 flex-col items-start justify-start" [class.!hidden]="showSearchPane">
         <div class="tb-details-title flex flex-row items-center justify-start">
diff --git a/ui-ngx/src/app/modules/home/components/details-panel.component.scss b/ui-ngx/src/app/modules/home/components/details-panel.component.scss
index 2344a36635..61ca19b4a7 100644
--- a/ui-ngx/src/app/modules/home/components/details-panel.component.scss
+++ b/ui-ngx/src/app/modules/home/components/details-panel.component.scss
@@ -22,6 +22,7 @@
   flex-direction: column;
   .mat-toolbar.details-toolbar {
     padding: 0;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
   }
 }
 
diff --git a/ui-ngx/src/app/modules/home/components/device/copy-device-credentials.component.html b/ui-ngx/src/app/modules/home/components/device/copy-device-credentials.component.html
index 392d972906..d43c092144 100644
--- a/ui-ngx/src/app/modules/home/components/device/copy-device-credentials.component.html
+++ b/ui-ngx/src/app/modules/home/components/device/copy-device-credentials.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<button mat-raised-button
+<button mat-stroked-button
         ngxClipboard
         [cbContent]="credential"
         (cbOnSuccess)="onCopyCredential()"
diff --git a/ui-ngx/src/app/modules/home/components/device/copy-device-credentials.component.ts b/ui-ngx/src/app/modules/home/components/device/copy-device-credentials.component.ts
index 4d668d3255..8a6d7e9117 100644
--- a/ui-ngx/src/app/modules/home/components/device/copy-device-credentials.component.ts
+++ b/ui-ngx/src/app/modules/home/components/device/copy-device-credentials.component.ts
@@ -30,7 +30,7 @@ import { TranslateService } from '@ngx-translate/core';
 @Component({
     selector: 'tb-copy-device-credentials',
     templateUrl: './copy-device-credentials.component.html',
-    styleUrls: [],
+    styles: ':host { display: contents; }',
     standalone: false
 })
 export class CopyDeviceCredentialsComponent implements OnInit, OnDestroy {
diff --git a/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.html b/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.html
index 795bde21c1..062f1a6662 100644
--- a/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form (ngSubmit)="add()" style="min-width: 400px; width: 750px;" [style]="entitiesTableConfig.addDialogStyle">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>{{ translations.add }}</h2>
     <span class="flex-1"></span>
     <div [tb-help]="helpLinkId()"></div>
diff --git a/ui-ngx/src/app/modules/home/components/event/event-content-dialog.component.html b/ui-ngx/src/app/modules/home/components/event/event-content-dialog.component.html
index f24d348444..2edadfbb6d 100644
--- a/ui-ngx/src/app/modules/home/components/event/event-content-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/event/event-content-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar class="flex flex-row" color="primary">
+<mat-toolbar class="tb-dialog-header flex flex-row">
   <h2 translate>{{ title }}</h2>
   <span class="flex-1"></span>
   <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate-dialog.component.html b/ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate-dialog.component.html
index cc86556a26..c9251be922 100644
--- a/ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="complexFilterFormGroup" (ngSubmit)="save()" style="width: 1200px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>filter.complex-filter</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/filter/filter-dialog.component.html b/ui-ngx/src/app/modules/home/components/filter/filter-dialog.component.html
index 0cd0ea729e..b436a9d9a5 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filter-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="filterFormGroup" (ngSubmit)="save()" style="width: 700px;">
-  <mat-toolbar color="primary" class="justify-between">
+  <mat-toolbar class="tb-dialog-header justify-between">
     <h2>{{ (isAdd ? 'filter.add' : 'filter.edit') | translate }}</h2>
     <button mat-icon-button
             (click)="cancel()"
diff --git a/ui-ngx/src/app/modules/home/components/filter/filter-user-info-dialog.component.html b/ui-ngx/src/app/modules/home/components/filter/filter-user-info-dialog.component.html
index 1190125501..8683ff1e8c 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filter-user-info-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-user-info-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="filterUserInfoFormGroup" (ngSubmit)="save()" style="width: 500px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{(data.readonly ? 'filter.filter-user-params' : 'filter.edit-filter-user-params') | translate}}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/filter/filters-dialog.component.html b/ui-ngx/src/app/modules/home/components/filter/filters-dialog.component.html
index 0a1fd59275..3cc55dd283 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filters-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filters-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="filtersFormGroup" (ngSubmit)="save()" style="width: 700px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ title | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/filter/key-filter-dialog.component.html b/ui-ngx/src/app/modules/home/components/filter/key-filter-dialog.component.html
index f7624c873f..c4543dfd22 100644
--- a/ui-ngx/src/app/modules/home/components/filter/key-filter-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/key-filter-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="keyFilterFormGroup" (ngSubmit)="save()" style="width: 1200px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{(data.isAdd ? 'filter.add-key-filter' : (data.readonly ? 'filter.key-filter' : 'filter.edit-key-filter')) | translate}}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/filter/user-filter-dialog.component.html b/ui-ngx/src/app/modules/home/components/filter/user-filter-dialog.component.html
index f1836ae17e..9c163dc49a 100644
--- a/ui-ngx/src/app/modules/home/components/filter/user-filter-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/user-filter-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form (ngSubmit)="save()" style="width: 400px;" class="user-filter-dialog">
-  <mat-toolbar color="primary" class="justify-between">
+  <mat-toolbar class="tb-dialog-header justify-between">
     <h2>{{ filter.filter | customTranslate }}</h2>
     <button mat-icon-button
             (click)="cancel()"
diff --git a/ui-ngx/src/app/modules/home/components/github-badge/github-badge.component.scss b/ui-ngx/src/app/modules/home/components/github-badge/github-badge.component.scss
index 74f346c2aa..3a95e90422 100644
--- a/ui-ngx/src/app/modules/home/components/github-badge/github-badge.component.scss
+++ b/ui-ngx/src/app/modules/home/components/github-badge/github-badge.component.scss
@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 :host {
+  pointer-events: auto;
   &:has(section) {
     height: 100%;
   }
@@ -35,6 +36,7 @@
     }
 
     .mdc-icon-button {
+      --mat-icon-color: #fff;
       background-color: #162C41;
 
       &:hover {
diff --git a/ui-ngx/src/app/modules/home/components/github-badge/github-badge.component.ts b/ui-ngx/src/app/modules/home/components/github-badge/github-badge.component.ts
index 7b12265e66..1c6c21976c 100644
--- a/ui-ngx/src/app/modules/home/components/github-badge/github-badge.component.ts
+++ b/ui-ngx/src/app/modules/home/components/github-badge/github-badge.component.ts
@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, OnDestroy } from '@angular/core';
+import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { GitHubService } from '@core/http/git-hub.service';
 import { Store } from '@ngrx/store';
 import { selectAuthUser, selectIsAuthenticated } from '@core/auth/auth.selectors';
@@ -32,18 +32,27 @@ const SETTINGS_KEY = 'HIDE_GITHUB_STAR_BUTTON';
     styleUrl: './github-badge.component.scss',
     standalone: false
 })
-export class GithubBadgeComponent implements OnDestroy {
+export class GithubBadgeComponent implements OnInit, OnDestroy {
+
+  get hideGithubBadge(): boolean {
+    return this.hide;
+  }
 
   githubStar = 0;
 
+  private hide = false;
   private stopWatch$ = new Subject<void>();
 
   constructor(private gitHubService: GitHubService,
               private localStorageService: LocalStorageService,
-              private store: Store<AppState>,) {
-    const hide = this.localStorageService.getItem(SETTINGS_KEY) ?? false;
+              private store: Store<AppState>,
+              private cd: ChangeDetectorRef) {
+  }
+
+  ngOnInit() {
+    this.hide = this.localStorageService.getItem(SETTINGS_KEY) ?? false;
 
-    if (!hide) {
+    if (!this.hide) {
       this.store.select(selectIsAuthenticated).pipe(
         filter((data) => data),
         switchMap(() => this.store.select(selectAuthUser).pipe(take(1))),
@@ -60,21 +69,25 @@ export class GithubBadgeComponent implements OnDestroy {
         } else {
           this.githubStar = 0
         }
+        this.cd.detectChanges();
       });
     }
   }
 
+  ngOnDestroy() {
+    this.stopWatch$.next();
+    this.stopWatch$.complete();
+  }
+
   hideGithubStar($event: Event) {
     $event?.stopPropagation();
     this.localStorageService.setItem(SETTINGS_KEY, true);
+    this.hide = true;
     this.githubStar = 0;
 
     this.stopWatch$.next();
     this.stopWatch$.complete();
+    this.cd.detectChanges();
   }
 
-  ngOnDestroy() {
-    this.stopWatch$.next();
-    this.stopWatch$.complete();
-  }
 }
diff --git a/ui-ngx/src/app/modules/home/components/github-badge/github-badge.module.ts b/ui-ngx/src/app/modules/home/components/github-badge/github-badge.module.ts
new file mode 100644
index 0000000000..438d917b61
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/github-badge/github-badge.module.ts
@@ -0,0 +1,35 @@
+///
+/// Copyright © 2016-2026 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SharedModule } from '@app/shared/shared.module';
+import { GithubBadgeComponent } from '@home/components/github-badge/github-badge.component';
+
+@NgModule({
+  declarations:
+    [
+      GithubBadgeComponent
+    ],
+  imports: [
+    CommonModule,
+    SharedModule
+  ],
+  exports: [
+    GithubBadgeComponent
+  ]
+})
+export class GithubBadgeModule { }
diff --git a/ui-ngx/src/app/modules/home/components/home-components.module.ts b/ui-ngx/src/app/modules/home/components/home-components.module.ts
index aefb08bd34..984852c5c9 100644
--- a/ui-ngx/src/app/modules/home/components/home-components.module.ts
+++ b/ui-ngx/src/app/modules/home/components/home-components.module.ts
@@ -202,6 +202,8 @@ import { ApiKeyGeneratedDialogComponent } from '@home/components/api-key/api-key
 import { ApiKeysTableDialogComponent } from '@home/components/api-key/api-keys-table-dialog.component';
 import { AuditLogFilterComponent } from "@home/components/audit-log/audit-log-filter.component";
 import { EventsDialogComponent } from '@home/dialogs/events-dialog.component';
+import { NotificationBellModule } from '@home/components/notification/notification-bell.module';
+import { GithubBadgeModule } from '@home/components/github-badge/github-badge.module';
 
 @NgModule({
   declarations:
@@ -374,7 +376,9 @@ import { EventsDialogComponent } from '@home/dialogs/events-dialog.component';
     StatesControllerModule,
     DeviceCredentialsModule,
     DeviceProfileCommonModule,
-    EntityDebugSettingsButtonComponent
+    EntityDebugSettingsButtonComponent,
+    NotificationBellModule,
+    GithubBadgeModule
   ],
   exports: [
     RouterTabsComponent,
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-add-item-dialog.component.html b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-add-item-dialog.component.html
index ebe3f7baef..b81091303d 100644
--- a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-add-item-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-add-item-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form>
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ getTitle() }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/notification/notification-bell.component.html b/ui-ngx/src/app/modules/home/components/notification/notification-bell.component.html
index cc60ce8c39..0e39ccfc12 100644
--- a/ui-ngx/src/app/modules/home/components/notification/notification-bell.component.html
+++ b/ui-ngx/src/app/modules/home/components/notification/notification-bell.component.html
@@ -16,5 +16,5 @@
 
 -->
 <button mat-icon-button #showNotificationButton (click)="showNotification($event, showNotificationButton)">
-  <mat-icon class="material-icons" aria-hidden="false" [matBadge]="(count$ | async)" [matBadgeHidden]="!(count$ | async)" matBadgeColor="warn" matBadgeSize="small">notifications</mat-icon>
+  <tb-icon aria-hidden="false" [matBadge]="(count$ | async)" [matBadgeHidden]="!(count$ | async)" matBadgeColor="warn" matBadgeSize="small">notifications_none</tb-icon>
 </button>
diff --git a/ui-ngx/src/app/modules/home/components/notification/notification-bell.module.ts b/ui-ngx/src/app/modules/home/components/notification/notification-bell.module.ts
new file mode 100644
index 0000000000..b988280a3f
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/notification/notification-bell.module.ts
@@ -0,0 +1,38 @@
+///
+/// Copyright © 2016-2026 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SharedModule } from '@app/shared/shared.module';
+import { NotificationBellComponent } from '@home/components/notification/notification-bell.component';
+import { ShowNotificationPopoverComponent } from '@home/components/notification/show-notification-popover.component';
+
+@NgModule({
+  declarations:
+    [
+      NotificationBellComponent,
+      ShowNotificationPopoverComponent
+    ],
+  imports: [
+    CommonModule,
+    SharedModule
+  ],
+  exports: [
+    NotificationBellComponent,
+    ShowNotificationPopoverComponent
+  ]
+})
+export class NotificationBellModule { }
diff --git a/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.html
index de39c93a2f..962cc57478 100644
--- a/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2 translate>device-profile.add</h2>
   <span class="flex-1"></span>
   <div [tb-help]="'deviceProfiles'"></div>
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition-dialog.component.html
index c039992035..49fffd357f 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="conditionFormGroup" (ngSubmit)="save()" style="width: 900px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ (readonly ? 'device-profile.alarm-rule-condition' : 'device-profile.edit-alarm-rule-condition') | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule-dialog.component.html
index 141713832f..db37be5317 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="alarmScheduleFormGroup" (ngSubmit)="save()" style="width: 900px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ (readonly ? 'device-profile.schedule' : 'device-profile.edit-schedule') | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/edit-alarm-details-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/edit-alarm-details-dialog.component.html
index 30caafd1aa..ed22f9306d 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/edit-alarm-details-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/edit-alarm-details-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="editDetailsFormGroup" (ngSubmit)="save()" style="width: 800px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ 'device-profile.edit-alarm-rule-additional-info' | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/profile/asset-profile-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/asset-profile-dialog.component.html
index d47b4fa65c..d2743bebd2 100644
--- a/ui-ngx/src/app/modules/home/components/profile/asset-profile-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/asset-profile-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form (ngSubmit)="save()" style="width: 600px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ (isAdd ? 'asset-profile.add' : 'asset-profile.edit' ) | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/profile/asset-profile.component.html b/ui-ngx/src/app/modules/home/components/profile/asset-profile.component.html
index 9782cf9d19..406628bb30 100644
--- a/ui-ngx/src/app/modules/home/components/profile/asset-profile.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/asset-profile.component.html
@@ -17,32 +17,32 @@
 -->
 @if (!standalone) {
   <div class="tb-details-buttons xs:flex xs:flex-col">
-    <button mat-raised-button color="primary"
+    <button mat-stroked-button color="primary"
             [disabled]="(isLoading$ | async)"
             (click)="onEntityAction($event, 'open')"
             [class.!hidden]="isEdit || isDetailsPage">
       {{'common.open-details-page' | translate }}
     </button>
-    <button mat-raised-button color="primary"
+    <button mat-stroked-button color="primary"
             [disabled]="(isLoading$ | async)"
             (click)="onEntityAction($event, 'export')"
             [class.!hidden]="isEdit">
       {{'asset-profile.export' | translate }}
     </button>
-    <button mat-raised-button color="primary"
+    <button mat-stroked-button color="primary"
             [disabled]="(isLoading$ | async)"
             (click)="onEntityAction($event, 'setDefault')"
             [class.!hidden]="isEdit || entity?.default">
       {{'asset-profile.set-default' | translate }}
     </button>
-    <button mat-raised-button color="primary"
+    <button mat-stroked-button color="primary"
             [disabled]="(isLoading$ | async)"
             (click)="onEntityAction($event, 'delete')"
             [class.!hidden]="hideDelete() || isEdit">
       {{'asset-profile.delete' | translate }}
     </button>
     <div class="flex flex-row xs:flex-col">
-      <button mat-raised-button
+      <button mat-stroked-button
               ngxClipboard
               (cbOnSuccess)="onAssetProfileIdCopied($event)"
               [cbContent]="entity?.id?.id"
diff --git a/ui-ngx/src/app/modules/home/components/profile/device-profile-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/device-profile-dialog.component.html
index dcb15e48b8..01432d7dfc 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device-profile-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device-profile-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form (ngSubmit)="save()" style="width: 1000px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ (isAdd ? 'device-profile.add' : 'device-profile.edit' ) | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/profile/device-profile.component.html b/ui-ngx/src/app/modules/home/components/profile/device-profile.component.html
index 9b54e59253..1e39b49294 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device-profile.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device-profile.component.html
@@ -17,32 +17,32 @@
 -->
 @if (!standalone) {
   <div class="tb-details-buttons xs:flex xs:flex-col">
-    <button mat-raised-button color="primary"
+    <button mat-stroked-button color="primary"
             [disabled]="(isLoading$ | async)"
             (click)="onEntityAction($event, 'open')"
             [class.!hidden]="isEdit || isDetailsPage">
       {{'common.open-details-page' | translate }}
     </button>
-    <button mat-raised-button color="primary"
+    <button mat-stroked-button color="primary"
             [disabled]="(isLoading$ | async)"
             (click)="onEntityAction($event, 'export')"
             [class.!hidden]="isEdit">
       {{'device-profile.export' | translate }}
     </button>
-    <button mat-raised-button color="primary"
+    <button mat-stroked-button color="primary"
             [disabled]="(isLoading$ | async)"
             (click)="onEntityAction($event, 'setDefault')"
             [class.!hidden]="isEdit || entity?.default">
       {{'device-profile.set-default' | translate }}
     </button>
-    <button mat-raised-button color="primary"
+    <button mat-stroked-button color="primary"
             [disabled]="(isLoading$ | async)"
             (click)="onEntityAction($event, 'delete')"
             [class.!hidden]="hideDelete() || isEdit">
       {{'device-profile.delete' | translate }}
     </button>
     <div class="flex flex-row xs:flex-col">
-      <button mat-raised-button
+      <button mat-stroked-button
               ngxClipboard
               (cbOnSuccess)="onDeviceProfileIdCopied($event)"
               [cbContent]="entity?.id?.id"
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-dialog.component.html
index 6a631c8df2..f52e912b13 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="attributeFormGroup" (ngSubmit)="save()" style="min-width: 500px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>
       {{ (readonly ? 'device-profile.lwm2m.view-attributes' : 'device-profile.lwm2m.edit-attributes') | translate : {name: name} }}
     </h2>
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-bootstrap-add-config-server-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-bootstrap-add-config-server-dialog.component.html
index a966d6197b..21201a1b59 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-bootstrap-add-config-server-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-bootstrap-add-config-server-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="addConfigServerFormGroup" style="width: 400px;">
-  <mat-toolbar class="flex flex-row" color="primary">
+  <mat-toolbar class="tb-dialog-header flex flex-row">
     <h2 translate>device-profile.lwm2m.add-new-server-title</h2>
     <span class="flex-1"></span>
     <button mat-icon-button (click)="cancel()" type="button">
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-object-add-instances-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-object-add-instances-dialog.component.html
index 1f36c01fe4..acc86b15e6 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-object-add-instances-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-object-add-instances-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="instancesFormGroup" (ngSubmit)="add()" style="min-width: 400px;">
-  <mat-toolbar class="flex flex-row" color="primary">
+  <mat-toolbar class="tb-dialog-header flex flex-row">
     <span style="font-weight: 500">{{data.objectName}}</span>&nbsp;#{{data.objectId}}
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant-profile-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/tenant-profile-dialog.component.html
index 19ef843762..3942f87c28 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant-profile-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant-profile-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form (ngSubmit)="save()" style="width: 650px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ (isAdd ? 'tenant-profile.add' : 'tenant-profile.edit' ) | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant-profile.component.html b/ui-ngx/src/app/modules/home/components/profile/tenant-profile.component.html
index 3a53b4cbc9..69b3b2dd6e 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant-profile.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant-profile.component.html
@@ -17,26 +17,26 @@
 -->
 @if (!standalone) {
   <div class="tb-details-buttons xs:flex xs:flex-col">
-    <button mat-raised-button color="primary"
+    <button mat-stroked-button color="primary"
             [disabled]="(isLoading$ | async)"
             (click)="onEntityAction($event, 'open')"
             [class.!hidden]="isEdit || isDetailsPage">
       {{'common.open-details-page' | translate }}
     </button>
-    <button mat-raised-button color="primary"
+    <button mat-stroked-button color="primary"
             [disabled]="(isLoading$ | async)"
             (click)="onEntityAction($event, 'setDefault')"
             [class.!hidden]="isEdit || entity?.default">
       {{'tenant-profile.set-default' | translate }}
     </button>
-    <button mat-raised-button color="primary"
+    <button mat-stroked-button color="primary"
             [disabled]="(isLoading$ | async)"
             (click)="onEntityAction($event, 'delete')"
             [class.!hidden]="hideDelete() || isEdit">
       {{'tenant-profile.delete' | translate }}
     </button>
     <div class="flex flex-row xs:flex-col">
-      <button mat-raised-button
+      <button mat-stroked-button
               ngxClipboard
               (cbOnSuccess)="onTenantProfileIdCopied($event)"
               [cbContent]="entity?.id?.id"
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-details-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-details-dialog.component.html
index 370849422e..f8b359fc96 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-details-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-details-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="editDetailsFormGroup">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ title | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/relation/relation-dialog.component.html b/ui-ngx/src/app/modules/home/components/relation/relation-dialog.component.html
index ffbfb48cf3..c6d05d0d83 100644
--- a/ui-ngx/src/app/modules/home/components/relation/relation-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/relation/relation-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="relationFormGroup" (ngSubmit)="save()" style="min-width: 600px;">
-  <mat-toolbar class="flex flex-row" color="primary">
+  <mat-toolbar class="tb-dialog-header flex flex-row">
     <h2>{{ (isAdd ? 'relation.add' : 'relation.edit' ) | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/resources/resources-dialog.component.html b/ui-ngx/src/app/modules/home/components/resources/resources-dialog.component.html
index a5757e7e58..91cbaff8b7 100644
--- a/ui-ngx/src/app/modules/home/components/resources/resources-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/resources/resources-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form (ngSubmit)="save()" style="width: 600px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ 'resource.add' | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/resources/resources-library.component.html b/ui-ngx/src/app/modules/home/components/resources/resources-library.component.html
index b4c2901852..33f3290c6c 100644
--- a/ui-ngx/src/app/modules/home/components/resources/resources-library.component.html
+++ b/ui-ngx/src/app/modules/home/components/resources/resources-library.component.html
@@ -17,26 +17,26 @@
 -->
 @if (!standalone) {
   <div class="tb-details-buttons xs:flex xs:flex-col">
-    <button mat-raised-button color="primary"
+    <button mat-stroked-button color="primary"
             [disabled]="(isLoading$ | async)"
             (click)="onEntityAction($event, 'open')"
             [class.!hidden]="isEdit || isDetailsPage">
       {{'common.open-details-page' | translate }}
     </button>
-    <button mat-raised-button color="primary"
+    <button mat-stroked-button color="primary"
             [disabled]="(isLoading$ | async)"
             (click)="onEntityAction($event, 'downloadResource')"
             [class.!hidden]="isEdit">
       {{ 'resource.download' | translate }}
     </button>
-    <button mat-raised-button color="primary"
+    <button mat-stroked-button color="primary"
             [disabled]="(isLoading$ | async)"
             (click)="onEntityAction($event, 'deleteResource')"
             [class.!hidden]="hideDelete() || isEdit">
       {{ 'resource.delete' | translate }}
     </button>
     <div class="flex flex-row xs:flex-col">
-      <button mat-raised-button
+      <button mat-stroked-button
               ngxClipboard
               (cbOnSuccess)="onResourceIdCopied()"
               [cbContent]="entity?.id?.id"
diff --git a/ui-ngx/src/app/modules/home/components/router-tabs.component.html b/ui-ngx/src/app/modules/home/components/router-tabs.component.html
index c71256897d..b334437787 100644
--- a/ui-ngx/src/app/modules/home/components/router-tabs.component.html
+++ b/ui-ngx/src/app/modules/home/components/router-tabs.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="flex flex-1 flex-col" style="width: 100%;">
+<div class="flex flex-1 flex-col" [class.mt-2]="(homeService.hideMainToolbar$ | async) === false" style="width: 100%;">
   <div class="flex flex-row" style="width: 100%;">
     @if (!routerOutlet?.activatedRouteData?.hideTabs && !hideCurrentTabs && (tabs$ | async).length > 1) {
       <nav mat-tab-nav-bar mat-stretch-tabs="false" class="tb-router-tabs flex-1" [tabPanel]="tabPanel">
diff --git a/ui-ngx/src/app/modules/home/components/router-tabs.component.scss b/ui-ngx/src/app/modules/home/components/router-tabs.component.scss
index 9391b56e19..4579bfbdb1 100644
--- a/ui-ngx/src/app/modules/home/components/router-tabs.component.scss
+++ b/ui-ngx/src/app/modules/home/components/router-tabs.component.scss
@@ -19,11 +19,14 @@
   height: 100%;
 
   .mat-mdc-tab-nav-bar.tb-router-tabs {
+    --mat-tab-container-height: 38px;
+    --mat-tab-divider-height: 1px;
+    --mat-tab-divider-color: rgba(0, 0, 0, 0.12);
     a.mat-mdc-tab-link {
       display: inline-flex;
       align-items: center;
       overflow: hidden;
-      line-height: 40px;
+      line-height: 38px;
       min-width: 200px;
       border-bottom: none;
       .mat-icon {
diff --git a/ui-ngx/src/app/modules/home/components/router-tabs.component.ts b/ui-ngx/src/app/modules/home/components/router-tabs.component.ts
index b75b90e373..ebaef85a6f 100644
--- a/ui-ngx/src/app/modules/home/components/router-tabs.component.ts
+++ b/ui-ngx/src/app/modules/home/components/router-tabs.component.ts
@@ -26,6 +26,7 @@ import { MenuSection } from '@core/services/menu.models';
 import { ActiveComponentService } from '@core/services/active-component.service';
 import { TbAnchorComponent } from '@shared/components/tb-anchor.component';
 import { getCurrentAuthUser } from '@core/auth/auth.selectors';
+import { HomeService } from '@core/services/home.service';
 
 @Component({
     selector: 'tb-router-tabs',
@@ -46,10 +47,11 @@ export class RouterTabsComponent extends PageComponent implements OnInit {
   tabs$: Observable<Array<MenuSection>>;
 
   constructor(protected store: Store<AppState>,
-              private activatedRoute: ActivatedRoute,
+              public activatedRoute: ActivatedRoute,
               public router: Router,
               private menuService: MenuService,
-              private activeComponentService: ActiveComponentService) {
+              private activeComponentService: ActiveComponentService,
+              public homeService: HomeService) {
     super(store);
   }
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions-dialog.component.html
index 8b0ca22543..2a83f7d1c5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="actionsSettings" style="width: 900px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ data.widgetTitle }}: {{ 'widget-config.actions' | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.html
index 1fc69be0a6..53ca4eb748 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="widgetActionFormGroup" (ngSubmit)="save()" style="width: 900px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ (isAdd ? 'widget-config.add-action' : 'widget-config.edit-action' ) | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/widget/dialog/embed-dashboard-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/dialog/embed-dashboard-dialog.component.html
index a31ad603f1..e05f6f678b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/dialog/embed-dashboard-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/dialog/embed-dashboard-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <div class="dashboard-state-dialog flex flex-col" [style]="dialogStyle">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{title}}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button (click)="close()" type="button">
@@ -30,7 +30,7 @@
     <div style="height: 4px;"></div>
   }
   <div class="dashboard-state-dialog-content flex flex-1 flex-col" mat-dialog-content style="padding: 8px;">
-    <tb-dashboard-page [embedded]="true" [syncStateWithQueryParam]="false" [hideToolbar]="hideToolbar"
+    <tb-dashboard-page [embedded]="true" [syncStateWithQueryParam]="false" [hideToolbar]="hideToolbar" [hideMainToolbar]="false"
     [currentState]="state" [dashboard]="dashboard" [parentDashboard]="parentDashboard" style="width: 100%; height: 100%;"></tb-dashboard-page>
   </div>
   <div mat-dialog-actions class="flex items-center justify-end">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps-legacy/dialogs/select-entity-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/maps-legacy/dialogs/select-entity-dialog.component.html
index afc11a7633..7e0a84dc81 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps-legacy/dialogs/select-entity-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps-legacy/dialogs/select-entity-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form #addEntityForm="ngForm" [formGroup]="selectEntityFormGroup" (ngSubmit)="save()">
-  <mat-toolbar class="flex flex-row" color="primary">
+  <mat-toolbar class="tb-dialog-header flex flex-row">
     <h2 translate>widgets.maps.select-entity</h2>
     <span class="flex-1"></span>
     <button mat-icon-button [matDialogClose]="null" type="button">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/navigation-card-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/navigation-card-widget.component.html
index 2308549987..12cb7f3856 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/navigation-card-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/navigation-card-widget.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<a mat-raised-button color="primary" class="tb-nav-button" href="{{settings.path}}" (click)="navigate($event, settings.path)">
+<a mat-stroked-button class="tb-nav-button" href="{{settings.path}}" (click)="navigate($event, settings.path)">
   <tb-icon matButtonIcon class="tb-mat-96">{{settings.icon}}</tb-icon>
   <span>{{translatedName}}</span>
 </a>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/navigation-card-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/navigation-card-widget.component.scss
index c5259df3ed..08a527182f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/navigation-card-widget.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/navigation-card-widget.component.scss
@@ -19,18 +19,14 @@
 }
 
 :host ::ng-deep {
-  .tb-nav-button {
+  .tb-nav-button.mat-mdc-outlined-button {
+    background: #fff;
     width: 100%;
     height: 100% !important;
-    &:hover {
-      border-bottom: none;
-    }
-    &:focus {
-      border-bottom: none;
-    }
     display: flex;
     flex-direction: column;
     align-items: center;
+    color: rgba(0,0,0,0.76);
     .mat-icon {
       margin: auto !important;
     }
@@ -46,11 +42,5 @@
       white-space: normal;
       text-align: center;
     }
-    &.mat-mdc-raised-button.mat-primary {
-      .mat-ripple-element {
-        opacity: 0.3;
-        background-color: rgba(255, 255, 255, 0.3);
-      }
-    }
   }
 }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/navigation-cards-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/navigation-cards-widget.component.html
index 2f1f53968e..01f92c586b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/navigation-cards-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/navigation-cards-widget.component.html
@@ -27,7 +27,7 @@
             <mat-grid-list rowHeight="170px" [cols]="sectionPlaces(section).length">
               @for (place of sectionPlaces(section); track place) {
                 <mat-grid-tile>
-                  <a mat-raised-button color="primary" class="tb-card-button" href="{{place.path}}" (click)="navigate($event, place.path)">
+                  <a mat-stroked-button class="tb-card-button" href="{{place.path}}" (click)="navigate($event, place.path)">
                     <tb-icon matButtonIcon class="tb-mat-96">{{place.icon}}</tb-icon>
                     <span>{{place.customTranslate ? (place.name | customTranslate) : (place.name | translate)}}</span>
                   </a>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/navigation-cards-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/navigation-cards-widget.component.scss
index e4bf4b9462..18ace8935b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/navigation-cards-widget.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/navigation-cards-widget.component.scss
@@ -42,19 +42,14 @@
         padding: 16px;
       }
     }
-    .tb-card-button {
+    .tb-card-button.mat-mdc-outlined-button {
       width: 100%;
       height: 100%;
       max-width: 240px;
-      &:hover {
-        border-bottom: none;
-      }
-      &:focus {
-        border-bottom: none;
-      }
       display: flex;
       flex-direction: column;
       align-items: center;
+      color: rgba(0,0,0,0.76);
       .mat-icon {
         margin: auto;
       }
@@ -70,12 +65,6 @@
         white-space: normal;
         text-align: center;
       }
-      &.mat-mdc-raised-button.mat-primary {
-        .mat-ripple-element {
-          opacity: 0.3;
-          background-color: rgba(255, 255, 255, 0.3);
-        }
-      }
     }
   }
 }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-add-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-add-dialog.component.html
index f98ef7e8c8..fc3d97ce8f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-add-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-add-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="persistentFormGroup" (ngSubmit)="save()" style="min-width: 480px; max-width: 600px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ 'widgets.persistent-table.add-title' | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-details-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-details-dialog.component.html
index 491cada8cd..c371e06133 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-details-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-details-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="persistentFormGroup" style="min-width: 480px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ persistentFormGroup.get('rpcId').value }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/key/data-key-config-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/key/data-key-config-dialog.component.html
index 802adb5211..94360e82af 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/key/data-key-config-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/key/data-key-config-dialog.component.html
@@ -16,12 +16,12 @@
 
 -->
 <form [formGroup]="dataKeyFormGroup" (ngSubmit)="save()" style="width: 900px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ 'datakey.configuration' | translate }}</h2>
     <span class="flex-1"></span>
     @if (hasAdvanced) {
       <tb-toggle-select
-        appearance="fill-invert" selectMediaBreakpoint="xs" [options]="dataKeyConfigHeaderOptions"
+        appearance="fill" selectMediaBreakpoint="xs" [options]="dataKeyConfigHeaderOptions"
         [(ngModel)]="dataKeyConfigMode" [ngModelOptions]="{ standalone: true }">
       </tb-toggle-select>
     }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-dialog.component.html
index 8e484c8e3d..975e71517a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form (ngSubmit)="save()" class="tb-map-data-layer-dialog" style="width: 750px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>{{dialogTitle}}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.html b/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.html
index 01a83e5d11..e49a08ebd3 100644
--- a/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2 translate>device.add-device-text</h2>
   <span class="flex-1"></span>
   <div [tb-help]="'devices'"></div>
diff --git a/ui-ngx/src/app/modules/home/dialogs/add-entities-to-customer-dialog.component.html b/ui-ngx/src/app/modules/home/dialogs/add-entities-to-customer-dialog.component.html
index c397f8b1a0..e45e2add4f 100644
--- a/ui-ngx/src/app/modules/home/dialogs/add-entities-to-customer-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/dialogs/add-entities-to-customer-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="addEntitiesToCustomerFormGroup" (ngSubmit)="assign()">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ assignToCustomerTitle | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/dialogs/add-entities-to-edge-dialog.component.html b/ui-ngx/src/app/modules/home/dialogs/add-entities-to-edge-dialog.component.html
index 4aed4a41b8..f4365bc21b 100644
--- a/ui-ngx/src/app/modules/home/dialogs/add-entities-to-edge-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/dialogs/add-entities-to-edge-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="addEntitiesToEdgeFormGroup" (ngSubmit)="assign()">
-  <mat-toolbar class="flex flex-row" color="primary">
+  <mat-toolbar class="tb-dialog-header flex flex-row">
     <h2>{{ assignToEdgeTitle | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/dialogs/assign-to-customer-dialog.component.html b/ui-ngx/src/app/modules/home/dialogs/assign-to-customer-dialog.component.html
index efa6ef3c1c..899372ba14 100644
--- a/ui-ngx/src/app/modules/home/dialogs/assign-to-customer-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/dialogs/assign-to-customer-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="assignToCustomerFormGroup" (ngSubmit)="assign()">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ assignToCustomerTitle | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/dialogs/events-dialog.component.html b/ui-ngx/src/app/modules/home/dialogs/events-dialog.component.html
index 0b337f0bd9..50d802a0cc 100644
--- a/ui-ngx/src/app/modules/home/dialogs/events-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/dialogs/events-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <div class="debug-dialog-container flex flex-col xs:h-full">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ data.title | translate}}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/home.component.html b/ui-ngx/src/app/modules/home/home.component.html
index 5255a565c6..f1a0fc0136 100644
--- a/ui-ngx/src/app/modules/home/home.component.html
+++ b/ui-ngx/src/app/modules/home/home.component.html
@@ -15,72 +15,92 @@
     limitations under the License.
 
 -->
-<mat-sidenav-container>
+<mat-sidenav-container [class.tb-desktop]="sidenavDesktop()"
+                       [class.tb-collapsed]="sidenavCollapsed()">
   <mat-sidenav #sidenav class="tb-site-sidenav mat-elevation-z2"
                [disableClose]="sidenavOpened"
                (click)="sidenavClicked()"
                [mode]="sidenavMode"
                [opened]="sidenavOpened && !forceFullscreen">
     <header class="tb-nav-header">
-      <mat-toolbar color="primary" class="tb-nav-header-toolbar">
-        <div class="flex flex-auto">
-          <tb-logo [src]="logo" class="tb-logo-title"></tb-logo>
-        </div>
+      <mat-toolbar class="tb-nav-header-toolbar">
+        <tb-logo
+          [src]="logo" class="tb-logo-title">
+        </tb-logo>
+        @if (sidenavDesktop()) {
+          <button mat-icon-button class="tb-sidenav-toggle tb-mat-32" (click)="toggleSidenav()">
+            @if (sidenavCollapsed()) {
+              <div class="tb-collapsed-logo-container">
+                <img class="tb-collapsed-logo" [src]="collapsedLogo" aria-label="logo" alt="Logo"/>
+                <tb-icon class="tb-mat-20 tb-open-icon">sidebar-open</tb-icon>
+              </div>
+            } @else {
+              <tb-icon class="tb-mat-20">sidebar-close</tb-icon>
+            }
+          </button>
+        }
       </mat-toolbar>
     </header>
-    <mat-toolbar color="primary" class="tb-side-menu-toolbar flex flex-1 flex-col" role="navigation">
-      <tb-side-menu></tb-side-menu>
+    <mat-toolbar class="tb-side-menu-toolbar flex flex-1 flex-col" role="navigation">
+      <div class="w-full flex-1 overflow-y-auto overflow-x-hidden">
+        <tb-side-menu  [collapsed]="menuCollapsed()"></tb-side-menu>
+      </div>
+      <tb-user-menu [collapsed]="menuCollapsed()" (menuClicked)="sidenavClicked()"></tb-user-menu>
     </mat-toolbar>
   </mat-sidenav>
-  <mat-sidenav-content>
+  <mat-sidenav-content class="tb-site-content" [class.tb-force-fullscreen]="forceFullscreen">
     <div class="flex flex-col" role="main" style="height: 100%;">
-      <mat-toolbar color="primary" class="tb-primary-toolbar flex flex-row">
-        <button mat-icon-button id="main"
-                [class.!hidden]="forceFullscreen || displaySearchMode()"
-                class="gt-sm:!hidden" (click)="sidenav.toggle()">
-          <mat-icon class="material-icons">menu</mat-icon>
-        </button>
-        <button mat-icon-button
-                [class.!hidden]="!forceFullscreen || displaySearchMode"
-                (click)="goBack()">
-          <mat-icon class="material-icons">arrow_back</mat-icon>
-        </button>
-        <button mat-icon-button
-                [class.!hidden]="!displaySearchMode()"
-                (click)="closeSearch()">
-          <mat-icon class="material-icons">arrow_back</mat-icon>
-        </button>
-        <tb-breadcrumb
-          [class.!hidden]="displaySearchMode()"
-          class="mat-toolbar-tools flex-1">
-        </tb-breadcrumb>
-        <div [class.!hidden]="!displaySearchMode()" class="tb-dark flex flex-1 flex-row">
-          <mat-form-field class="tb-appearance-transparent flex-1">
-            <input #searchInput matInput
-                   [formControl]="textSearch"
-                   placeholder="{{ 'common.enter-search' | translate }}"/>
-          </mat-form-field>
-        </div>
-        <tb-github-badge class="lt-md:!hidden"></tb-github-badge>
-        <button [class.!hidden]="!searchEnabled"
-                mat-icon-button (click)="openSearch()">
-          <mat-icon class="material-icons">search</mat-icon>
-        </button>
-        @if (fullscreenEnabled) {
-          <button
-            [class.!hidden]="displaySearchMode()"
-            class="lt-md:!hidden"
-            mat-icon-button (click)="toggleFullscreen()">
-            <mat-icon class="material-icons">{{ isFullscreen() ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
+      @if ((homeService.hideMainToolbar$ | async) === false) {
+        <mat-toolbar class="tb-primary-toolbar flex flex-row">
+          <button mat-icon-button id="main"
+                  [class.!hidden]="forceFullscreen || displaySearchMode()"
+                  class="gt-sm:!hidden" (click)="sidenav.toggle()">
+            <mat-icon>menu</mat-icon>
           </button>
+          <button mat-icon-button
+                  [class.!hidden]="!forceFullscreen || displaySearchMode"
+                  (click)="goBack()">
+            <mat-icon>arrow_back</mat-icon>
+          </button>
+          <tb-breadcrumb
+            [class.!hidden]="displaySearchMode()"
+            class="mat-toolbar-tools flex-1">
+          </tb-breadcrumb>
+          @if (searchEnabled) {
+            <div [class.!hidden]="!showSearch" [class.mr-4]="!textSearch.value" class="flex flex-1 flex-row">
+              <mat-form-field class="tb-appearance-transparent flex-1">
+                <input #searchInput matInput
+                       [formControl]="textSearch"
+                       placeholder="{{ 'common.enter-search' | translate }}"/>
+              </mat-form-field>
+            </div>
+            <button [class.!hidden]="showSearch"
+                    mat-icon-button (click)="openSearch()">
+              <mat-icon>search</mat-icon>
+            </button>
+            <button [class.!hidden]="!showSearch"
+                    mat-icon-button (click)="closeSearch()">
+              <mat-icon>close</mat-icon>
+            </button>
+          }
+          <tb-github-badge class="lt-md:!hidden"></tb-github-badge>
+          @if (fullscreenEnabled) {
+            <button
+              class="lt-md:!hidden"
+              mat-icon-button (click)="toggleFullscreen()">
+              <mat-icon>{{ isFullscreen() ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
+            </button>
+          }
+          <tb-notification-bell></tb-notification-bell>
+          @if (forceFullscreen) {
+            <tb-user-menu></tb-user-menu>
+          }
+        </mat-toolbar>
+        @if ((homeService.hideLoadingBar$ | async) === false && (isLoading$ | async)) {
+          <mat-progress-bar color="warn" style="z-index: 10; margin-bottom: -4px; width: 100%;" mode="indeterminate"
+                            >
+          </mat-progress-bar>
         }
-        <tb-notification-bell></tb-notification-bell>
-        <tb-user-menu [displayUserInfo]="!displaySearchMode()"></tb-user-menu>
-      </mat-toolbar>
-      @if (!hideLoadingBar && (isLoading$ | async)) {
-        <mat-progress-bar color="warn" style="z-index: 10; margin-bottom: -4px; width: 100%;" mode="indeterminate"
-                          >
-        </mat-progress-bar>
       }
       <div #mainContent tb-toast class="tb-main-content flex flex-1 flex-col">
         <router-outlet (activate)="activeComponentChanged($event)"></router-outlet>
diff --git a/ui-ngx/src/app/modules/home/home.component.scss b/ui-ngx/src/app/modules/home/home.component.scss
index ed5f43ae82..0fe46ac42c 100644
--- a/ui-ngx/src/app/modules/home/home.component.scss
+++ b/ui-ngx/src/app/modules/home/home.component.scss
@@ -13,6 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+@import "constants";
+
 :host {
   display: flex;
   width: 100%;
@@ -20,6 +23,31 @@
 
   mat-sidenav-container {
     flex: 1;
+    &.tb-desktop {
+      mat-sidenav.tb-site-sidenav {
+        width: 250px;
+        transition: width $sidenav-anim-timing;
+        .tb-logo-title {
+          opacity: 1;
+          transition: opacity $sidenav-anim-timing;
+        }
+      }
+      mat-sidenav-content.tb-site-content:not(.tb-force-fullscreen) {
+        margin-left: 250px !important;
+        transition: margin-left $sidenav-anim-timing;
+      }
+      &.tb-collapsed {
+        mat-sidenav.tb-site-sidenav {
+          width: 50px;
+          .tb-logo-title {
+            opacity: 0;
+          }
+        }
+        mat-sidenav-content.tb-site-content {
+          margin-left: 50px !important;
+        }
+      }
+    }
   }
   mat-sidenav.tb-site-sidenav {
     width: 250px;
@@ -31,33 +59,78 @@
       flex-shrink: 0;
       white-space: nowrap;
       .tb-nav-header-toolbar {
-        min-height: 64px;
+        position: relative;
+        min-height: 56px;
         height: inherit;
-        padding: 0;
+        padding: 8px 12px 8px 16px;
         z-index: 2;
         flex-shrink: 0;
         white-space: nowrap;
-        border-bottom: 1px solid rgba(0, 0, 0, .12);
-        & > div {
-          height: 64px;
-          .tb-logo-title {
-            width: auto;
-            max-width: 100%;
-            height: 36px;
-            max-height: 100%;
-            margin: auto;
+        border-right: 1px solid rgba(0, 0, 0, 0.12);
+        .tb-logo-title {
+          width: auto;
+          max-width: 100%;
+          height: 30px;
+          max-height: 100%;
+          margin: auto 0;
+        }
+        .tb-sidenav-toggle {
+          margin: 0;
+          position: absolute;
+          right: 9px;
+          top: 12px;
+          .tb-collapsed-logo-container {
+            position: relative;
+            width: 20px;
+            height: 20px;
+            margin-left: 6px;
+            .mat-icon, img {
+              width: 20px;
+              height: 20px;
+              position: absolute;
+              inset: 0;
+              transition: opacity $sidenav-anim-timing;
+            }
+            .tb-open-icon {
+              opacity: 0;
+            }
+            .tb-collapsed-logo {
+              opacity: 1;
+            }
+          }
+          &:hover {
+            .tb-collapsed-logo-container {
+              .tb-open-icon {
+                opacity: 1;
+              }
+              .tb-collapsed-logo {
+                opacity: 0;
+              }
+            }
           }
         }
       }
     }
     .tb-side-menu-toolbar {
-      overflow-y: auto;
+      overflow: hidden;
       height: inherit;
       padding: 0;
+      border-right: 1px solid rgba(0, 0, 0, 0.12);
+      --mat-toolbar-container-text-color: rgba(0, 0, 0, .76);
+      tb-user-menu {
+        border-top: 1px solid rgba(0, 0, 0, 0.12);
+      }
     }
   }
   .tb-primary-toolbar {
     z-index: 2;
+    height: 56px;
+    min-height: 56px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+    .mat-toolbar-tools {
+      height: 56px;
+      padding: 0;
+    }
     h1 {
       font-size: 24px !important;
       font-weight: 400 !important;
diff --git a/ui-ngx/src/app/modules/home/home.component.ts b/ui-ngx/src/app/modules/home/home.component.ts
index 1bd9b73386..91ef8c16a4 100644
--- a/ui-ngx/src/app/modules/home/home.component.ts
+++ b/ui-ngx/src/app/modules/home/home.component.ts
@@ -14,15 +14,25 @@
 /// limitations under the License.
 ///
 
-import { AfterViewInit, Component, ElementRef, Inject, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import {
+  AfterViewInit,
+  Component,
+  computed,
+  ElementRef,
+  Inject,
+  OnDestroy,
+  OnInit,
+  signal,
+  ViewChild
+} from '@angular/core';
 import { skip, startWith, Subject } from 'rxjs';
-import { Store } from '@ngrx/store';
-import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
+import { select, Store } from '@ngrx/store';
+import { debounceTime, distinctUntilChanged, take, takeUntil } from 'rxjs/operators';
 
 import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
 import { PageComponent } from '@shared/components/page.component';
 import { AppState } from '@core/core.state';
-import { getCurrentAuthState } from '@core/auth/auth.selectors';
+import { getCurrentAuthState, selectUserSettingsProperty } from '@core/auth/auth.selectors';
 import { MediaBreakpoints } from '@shared/models/constants';
 import screenfull from 'screenfull';
 import { MatSidenav } from '@angular/material/sidenav';
@@ -30,10 +40,9 @@ import { AuthState } from '@core/auth/auth.models';
 import { WINDOW } from '@core/services/window.service';
 import { instanceOfSearchableComponent, ISearchableComponent } from '@home/models/searchable-component.models';
 import { ActiveComponentService } from '@core/services/active-component.service';
-import { RouterTabsComponent } from '@home/components/router-tabs.component';
 import { FormBuilder } from '@angular/forms';
-import { ActivatedRoute } from '@angular/router';
-import { isDefined, isDefinedAndNotNull } from '@core/utils';
+import { ActionPreferencesPutUserSettings } from '@core/auth/auth.actions';
+import { HomeService } from '@core/services/home.service';
 
 @Component({
     selector: 'tb-home',
@@ -53,7 +62,12 @@ export class HomeComponent extends PageComponent implements AfterViewInit, OnIni
   sidenavMode: 'over' | 'push' | 'side' = 'side';
   sidenavOpened = true;
 
-  logo = 'assets/logo_title_white.svg';
+  sidenavDesktop = signal(true);
+  sidenavCollapsed = signal(false);
+  menuCollapsed= computed(() => this.sidenavDesktop() && this.sidenavCollapsed());
+
+  logo = 'assets/logo_title_black.svg';
+  collapsedLogo =  'assets/small_logo_title_black.svg';
 
   @ViewChild('sidenav')
   sidenav: MatSidenav;
@@ -68,15 +82,14 @@ export class HomeComponent extends PageComponent implements AfterViewInit, OnIni
   showSearch = false;
   textSearch = this.fb.control('', {nonNullable: true});
 
-  hideLoadingBar = false;
-
   private destroy$ = new Subject<void>();
 
   constructor(protected store: Store<AppState>,
               @Inject(WINDOW) private window: Window,
               private activeComponentService: ActiveComponentService,
               private fb: FormBuilder,
-              public breakpointObserver: BreakpointObserver) {
+              public breakpointObserver: BreakpointObserver,
+              public homeService: HomeService) {
     super(store);
   }
 
@@ -85,6 +98,12 @@ export class HomeComponent extends PageComponent implements AfterViewInit, OnIni
     const isGtSm = this.breakpointObserver.isMatched(MediaBreakpoints['gt-sm']);
     this.sidenavMode = isGtSm ? 'side' : 'over';
     this.sidenavOpened = isGtSm;
+    this.sidenavDesktop.set(isGtSm);
+    this.store.pipe(select(selectUserSettingsProperty('menuCollapsed'))).pipe(
+      take(1)
+    ).subscribe((collapsed: boolean) => {
+      this.sidenavCollapsed.set(collapsed);
+    });
 
     this.breakpointObserver
       .observe(MediaBreakpoints['gt-sm'])
@@ -93,12 +112,18 @@ export class HomeComponent extends PageComponent implements AfterViewInit, OnIni
           if (state.matches) {
             this.sidenavMode = 'side';
             this.sidenavOpened = true;
+            this.sidenavDesktop.set(true);
           } else {
             this.sidenavMode = 'over';
             this.sidenavOpened = false;
+            this.sidenavDesktop.set(false);
           }
         }
       );
+
+    this.homeService.toggleSideBar.pipe(takeUntil(this.destroy$)).subscribe(() => {
+      this.sidenav.toggle();
+    });
   }
 
   ngOnDestroy() {
@@ -122,6 +147,11 @@ export class HomeComponent extends PageComponent implements AfterViewInit, OnIni
     }
   }
 
+  toggleSidenav() {
+    this.sidenavCollapsed.update(state => !state);
+    this.store.dispatch(new ActionPreferencesPutUserSettings({ menuCollapsed: this.sidenavCollapsed() }));
+  }
+
   toggleFullscreen() {
     if (screenfull.isEnabled) {
       screenfull.toggle();
@@ -150,18 +180,9 @@ export class HomeComponent extends PageComponent implements AfterViewInit, OnIni
 
   private updateActiveComponent(activeComponent: any) {
     this.showSearch = false;
-    this.hideLoadingBar = false;
     this.textSearch.reset('', {emitEvent: false});
     this.activeComponent = activeComponent;
 
-    if (activeComponent && activeComponent instanceof RouterTabsComponent
-      && isDefinedAndNotNull(this.activeComponent.activatedRoute?.snapshot?.data?.showMainLoadingBar)) {
-      this.hideLoadingBar = !this.activeComponent.activatedRoute.snapshot.data.showMainLoadingBar;
-    } else if (activeComponent && activeComponent instanceof PageComponent
-      && isDefinedAndNotNull(this.activeComponent?.showMainLoadingBar)) {
-      this.hideLoadingBar = !this.activeComponent.showMainLoadingBar;
-    }
-
     if (this.activeComponent && instanceOfSearchableComponent(this.activeComponent)) {
       this.searchEnabled = true;
       this.searchableComponent = this.activeComponent;
diff --git a/ui-ngx/src/app/modules/home/home.module.ts b/ui-ngx/src/app/modules/home/home.module.ts
index 08dbf42104..293820941d 100644
--- a/ui-ngx/src/app/modules/home/home.module.ts
+++ b/ui-ngx/src/app/modules/home/home.module.ts
@@ -23,9 +23,8 @@ import { SharedModule } from '@app/shared/shared.module';
 import { MenuLinkComponent } from '@modules/home/menu/menu-link.component';
 import { MenuToggleComponent } from '@modules/home/menu/menu-toggle.component';
 import { SideMenuComponent } from '@modules/home/menu/side-menu.component';
-import { GithubBadgeComponent } from '@home/components/github-badge/github-badge.component';
-import { NotificationBellComponent } from '@home/components/notification/notification-bell.component';
-import { ShowNotificationPopoverComponent } from '@home/components/notification/show-notification-popover.component';
+import { NotificationBellModule } from '@home/components/notification/notification-bell.module';
+import { GithubBadgeModule } from '@home/components/github-badge/github-badge.module';
 
 @NgModule({
   declarations:
@@ -33,14 +32,13 @@ import { ShowNotificationPopoverComponent } from '@home/components/notification/
       HomeComponent,
       MenuLinkComponent,
       MenuToggleComponent,
-      SideMenuComponent,
-      GithubBadgeComponent,
-      NotificationBellComponent,
-      ShowNotificationPopoverComponent
+      SideMenuComponent
     ],
   imports: [
     CommonModule,
     SharedModule,
+    NotificationBellModule,
+    GithubBadgeModule,
     HomeRoutingModule
   ]
 })
diff --git a/ui-ngx/src/app/modules/home/menu/menu-link.component.html b/ui-ngx/src/app/modules/home/menu/menu-link.component.html
index a62ca48f24..745f4cc6cd 100644
--- a/ui-ngx/src/app/modules/home/menu/menu-link.component.html
+++ b/ui-ngx/src/app/modules/home/menu/menu-link.component.html
@@ -16,6 +16,8 @@
 
 -->
 <a mat-button routerLinkActive="tb-active" [routerLinkActiveOptions]="{paths: 'subset', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored'}" routerLink="{{section.path}}"
+   [matTooltip]="collapsed ? (section.customTranslate ? (section.name | customTranslate) : (section.name | translate)) : null"
+   matTooltipPosition="right"
    [class.is-new]="section.isNew">
   @if (section.icon !== null) {
     <tb-icon matButtonIcon>{{section.icon}}</tb-icon>
diff --git a/ui-ngx/src/app/modules/home/menu/menu-link.component.scss b/ui-ngx/src/app/modules/home/menu/menu-link.component.scss
index 7720091e79..ab83632095 100644
--- a/ui-ngx/src/app/modules/home/menu/menu-link.component.scss
+++ b/ui-ngx/src/app/modules/home/menu/menu-link.component.scss
@@ -14,22 +14,23 @@
  * limitations under the License.
  */
 
-@import '../../../../scss/constants';
+@import "constants";
 
 :host ::ng-deep {
   a.is-new::after {
+    position: absolute;
+    right: 16px;
+    top: 4px;
     content: "NEW";
-    font-size: 12px;
-    letter-spacing: .03125em;
-    transform: translate(6px, -6px);
-    display: inline-block;
+    background: rgba(0, 0, 0, 0.03);
+    color: rgba(0, 0, 0, 0.76);
+    font-size: 11px;
+    letter-spacing: .25px;
+    line-height: 16px;
+    padding: 2px 8px;
     border-radius: 10px;
-    line-height: 22px;
-    height: 20px;
-    background: #fff;
-    color: $tb-primary-color;
-    padding-left: 6px;
-    padding-right: 6px;
-    margin-left: -6px;
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    opacity: 1;
+    transition: opacity $sidenav-anim-timing;
   }
 }
diff --git a/ui-ngx/src/app/modules/home/menu/menu-link.component.ts b/ui-ngx/src/app/modules/home/menu/menu-link.component.ts
index 95abc6623b..46f0796417 100644
--- a/ui-ngx/src/app/modules/home/menu/menu-link.component.ts
+++ b/ui-ngx/src/app/modules/home/menu/menu-link.component.ts
@@ -14,8 +14,9 @@
 /// limitations under the License.
 ///
 
-import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { MenuSection } from '@core/services/menu.models';
+import { coerceBoolean } from '@shared/decorators/coercion';
 
 @Component({
     selector: 'tb-menu-link',
@@ -24,14 +25,15 @@ import { MenuSection } from '@core/services/menu.models';
     changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: false
 })
-export class MenuLinkComponent implements OnInit {
+export class MenuLinkComponent {
 
   @Input() section: MenuSection;
 
-  constructor() {
-  }
+  @Input()
+  @coerceBoolean()
+  collapsed = false;
 
-  ngOnInit() {
+  constructor() {
   }
 
 }
diff --git a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html
index 2223a99062..850409b964 100644
--- a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html
+++ b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html
@@ -15,7 +15,19 @@
     limitations under the License.
 
 -->
-<a mat-button class="tb-button-toggle" (click)="toggleSection($event)"
+<a mat-button class="tb-button-toggle"
+   [class.tb-toggled]="section.opened && !collapsed"
+   [class.tb-hovered]="collapsed && menuPopover?.component?.tbVisible"
+   [class.tb-active]="toggleSectionActive()"
+   (click)="toggleSection($event)"
+   tb-popover
+   #menuPopover="tbPopover"
+   [tbPopoverTrigger]="collapsed ? 'hover' : null"
+   [tbPopoverMouseLeaveDelay]="0.05"
+   [tbPopoverMenu]="true"
+   [tbPopoverOverlayStyle]="{marginTop: '-8px'}"
+   [tbPopoverContent]="menuToggleMenuTpl"
+   [tbPopoverPlacement]="'rightTop'"
    [class.is-new]="section.isNew">
   @if (section.icon !== null) {
     <tb-icon matButtonIcon>{{section.icon}}</tb-icon>
@@ -25,9 +37,23 @@
   [class.tb-toggled]="section.opened"></span>
 </a>
 <ul id="docs-menu-{{section.name | nospace}}" class="tb-menu-toggle-list" [style.height]="sectionHeight()">
-  @for (page of section.pages; track trackBySectionPages($index, page)) {
+  @for (page of section.pages; track page.id) {
     <li>
       <tb-menu-link [section]="page"></tb-menu-link>
     </li>
   }
 </ul>
+
+<ng-template #menuToggleMenuTpl>
+  <div class="tb-menu-content tb-toggle-menu-items">
+    <div class="tb-menu-toggle-header">
+      <span>{{section.customTranslate ? (section.name | customTranslate) : (section.name | translate)}}</span>
+    </div>
+    @for (page of section.pages; track page.id) {
+      <a mat-button routerLinkActive="tb-active" [routerLinkActiveOptions]="{paths: 'subset', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored'}"
+         routerLink="{{page.path}}" (click)="menuPopover?.hide();">
+        <span>{{page.customTranslate ? (page.name | customTranslate) : (page.name | translate)}}</span>
+      </a>
+    }
+  </div>
+</ng-template>
diff --git a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.scss b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.scss
index faa0d01ff2..2d05fb283f 100644
--- a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.scss
+++ b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.scss
@@ -18,10 +18,15 @@
 
 :host ::ng-deep {
   .tb-button-toggle {
+    &.tb-toggled {
+      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+      --mat-button-text-label-text-weight: 500;
+    }
     .tb-toggle-icon {
       display: inline-block;
-      width: 15px;
-      min-width: 15px;
+      width: 12px;
+      min-width: 12px;
+      font-size: 12px;
       margin: auto 0 auto auto;
       background-size: 100% auto;
       transition: transform .3s ease-in-out;
@@ -34,17 +39,16 @@
       right: 44px;
       top: 4px;
       content: "NEW";
-      font-size: 12px;
-      letter-spacing: .03125em;
-      display: inline-block;
+      background: rgba(0, 0, 0, 0.03);
+      color: rgba(0, 0, 0, 0.76);
+      font-size: 11px;
+      letter-spacing: .25px;
+      line-height: 16px;
+      padding: 2px 8px;
       border-radius: 10px;
-      line-height: 22px;
-      height: 20px;
-      background: #fff;
-      color: $tb-primary-color;
-      padding-left: 6px;
-      padding-right: 6px;
-      margin-left: -6px;
+      border: 1px solid rgba(0, 0, 0, 0.05);
+      opacity: 1;
+      transition: opacity $sidenav-anim-timing;
     }
   }
 
@@ -58,10 +62,39 @@
     transition-property: height;
 
     a.mat-mdc-button {
-      padding: 0 16px 0 32px;
-      font-weight: 500;
-      text-transform: none !important;
-      text-rendering: optimizeLegibility;
+      .mat-icon {
+        visibility: hidden;
+      }
+    }
+  }
+}
+
+.tb-toggle-menu-items {
+  min-width: 250px;
+  display: flex;
+  flex-direction: column;
+  .tb-menu-toggle-header {
+    display: flex;
+    align-items: center;
+    cursor: default;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 20px;
+    height: 40px;
+    padding: 8px 16px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  }
+  a.mat-mdc-button {
+    border-bottom: none;
+    &:hover {
+      background-color: rgba(0, 0, 0, .07);
+      border-bottom: none;
+    }
+    &:focus {
+      border-bottom: none;
+    }
+    &.tb-active {
+      background-color: rgba(0, 0, 0, .05);
     }
   }
 }
diff --git a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.ts b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.ts
index 4415e9f580..9a17b8ecee 100644
--- a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.ts
+++ b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.ts
@@ -14,12 +14,12 @@
 /// limitations under the License.
 ///
 
-import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { MenuSection } from '@core/services/menu.models';
-import { Router } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { ActionPreferencesUpdateOpenedMenuSection } from '@core/auth/auth.actions';
+import { coerceBoolean } from '@shared/decorators/coercion';
 
 @Component({
     selector: 'tb-menu-toggle',
@@ -28,19 +28,19 @@ import { ActionPreferencesUpdateOpenedMenuSection } from '@core/auth/auth.action
     changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: false
 })
-export class MenuToggleComponent implements OnInit {
+export class MenuToggleComponent {
 
   @Input() section: MenuSection;
 
-  constructor(private router: Router,
-              private store: Store<AppState>) {
-  }
+  @Input()
+  @coerceBoolean()
+  collapsed = false;
 
-  ngOnInit() {
+  constructor(private store: Store<AppState>) {
   }
 
   sectionHeight(): string {
-    if (this.section.opened) {
+    if (this.section.opened && !this.collapsed) {
       return this.section.pages.length * 40 + 'px';
     } else {
       return '0px';
@@ -49,11 +49,22 @@ export class MenuToggleComponent implements OnInit {
 
   toggleSection(event: MouseEvent) {
     event.stopPropagation();
-    this.section.opened = !this.section.opened;
-    this.store.dispatch(new ActionPreferencesUpdateOpenedMenuSection({path: this.section.path, opened: this.section.opened}));
+    if (this.collapsed) {
+      event.preventDefault();
+    } else {
+      this.section.opened = !this.section.opened;
+      this.store.dispatch(new ActionPreferencesUpdateOpenedMenuSection({
+        path: this.section.path,
+        opened: this.section.opened
+      }));
+    }
   }
 
-  trackBySectionPages(index: number, section: MenuSection){
-    return section.id;
+  toggleSectionActive(): boolean {
+    if (this.collapsed) {
+      return this.section.active;
+    } else {
+      return false;
+    }
   }
 }
diff --git a/ui-ngx/src/app/modules/home/menu/side-menu.component.html b/ui-ngx/src/app/modules/home/menu/side-menu.component.html
index 34304319ae..949467b6cc 100644
--- a/ui-ngx/src/app/modules/home/menu/side-menu.component.html
+++ b/ui-ngx/src/app/modules/home/menu/side-menu.component.html
@@ -15,15 +15,18 @@
     limitations under the License.
 
 -->
-<ul class="tb-side-menu flex flex-col items-stretch justify-start">
-  @for (section of menuSections$ | async; track trackByMenuSection($index, section)) {
+<ul class="tb-side-menu flex flex-col items-stretch justify-start" [class.tb-collapsed]="collapsed">
+  @for (section of menuSections$ | async; track section.id) {
     <li>
-      @switch (section.type === 'link') {
-        @case (true) {
-          <tb-menu-link [section]="section"></tb-menu-link>
+      @switch (section.type) {
+        @case ('link') {
+          <tb-menu-link [section]="section" [collapsed]="collapsed"></tb-menu-link>
         }
-        @case (false) {
-          <tb-menu-toggle [section]="section"></tb-menu-toggle>
+        @case ('toggle') {
+          <tb-menu-toggle [section]="section" [collapsed]="collapsed"></tb-menu-toggle>
+        }
+        @case ('divider') {
+          <mat-divider></mat-divider>
         }
       }
     </li>
diff --git a/ui-ngx/src/app/modules/home/menu/side-menu.component.scss b/ui-ngx/src/app/modules/home/menu/side-menu.component.scss
index b5b1016dc8..7e89cbf61c 100644
--- a/ui-ngx/src/app/modules/home/menu/side-menu.component.scss
+++ b/ui-ngx/src/app/modules/home/menu/side-menu.component.scss
@@ -13,23 +13,44 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+@import "constants";
+
 :host {
   width: 100%;
 }
 
 :host ::ng-deep {
 
-  .tb-side-menu,
+  .tb-side-menu {
+    padding: 12px 0;
+    margin: 0;
+    list-style: none;
+    --mat-button-text-label-text-weight: 400;
+    &.tb-collapsed {
+      a.mat-mdc-button.mat-mdc-button-base {
+        padding-right: 0;
+        min-width: 0;
+        span.mdc-button__label {
+          opacity: 0;
+        }
+        &.is-new::after {
+          opacity: 0;
+        }
+      }
+    }
+    .mat-divider.mat-divider-horizontal {
+      margin-top: 12px;
+      margin-bottom: 12px;
+    }
+  }
+
   .tb-side-menu ul {
     padding: 0;
     margin-top: 0;
     list-style: none;
   }
 
-  .tb-side-menu > li {
-    border-bottom: 1px solid rgba(0, 0, 0, .12);
-  }
-
   a.mat-mdc-button.mat-mdc-button-base {
     display: inline-flex;
     width: 100%;
@@ -39,15 +60,16 @@
     line-height: 40px;
     border-radius: 0;
     padding: 0 16px;
-    &:hover {
+    --mat-button-text-label-text-color: rgba(0, 0, 0, .76);
+    &:hover, &.tb-hovered {
+      background-color: rgba(0, 0, 0, .07);
       border-bottom: none;
-      background-color: rgba(255,255,255,0.08);
     }
     &:focus {
       border-bottom: none;
     }
     &.tb-active {
-      background-color: rgba(255, 255, 255, .15);
+      background-color: rgba(0, 0, 0, .05);
     }
     .mat-icon {
       margin-right: 8px;
@@ -61,6 +83,8 @@
       text-overflow: ellipsis;
       white-space: nowrap;
       display: inline-flex;
+      opacity: 1;
+      transition: opacity $sidenav-anim-timing;
       & > span {
         overflow: hidden;
         text-overflow: ellipsis;
diff --git a/ui-ngx/src/app/modules/home/menu/side-menu.component.ts b/ui-ngx/src/app/modules/home/menu/side-menu.component.ts
index f266cee1a8..d3369ba7e5 100644
--- a/ui-ngx/src/app/modules/home/menu/side-menu.component.ts
+++ b/ui-ngx/src/app/modules/home/menu/side-menu.component.ts
@@ -14,9 +14,9 @@
 /// limitations under the License.
 ///
 
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { MenuService } from '@core/services/menu.service';
-import { MenuSection } from '@core/services/menu.models';
+import { coerceBoolean } from '@shared/decorators/coercion';
 
 @Component({
     selector: 'tb-side-menu',
@@ -25,18 +25,15 @@ import { MenuSection } from '@core/services/menu.models';
     changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: false
 })
-export class SideMenuComponent implements OnInit {
+export class SideMenuComponent {
+
+  @Input()
+  @coerceBoolean()
+  collapsed = false;
 
   menuSections$ = this.menuService.menuSections();
 
   constructor(private menuService: MenuService) {
   }
 
-  trackByMenuSection(index: number, section: MenuSection){
-    return section.id;
-  }
-
-  ngOnInit() {
-  }
-
 }
diff --git a/ui-ngx/src/app/modules/home/pages/admin/admin-routing.module.ts b/ui-ngx/src/app/modules/home/pages/admin/admin-routing.module.ts
index d2322a6b4a..700ee2b2e9 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/admin-routing.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/admin/admin-routing.module.ts
@@ -103,7 +103,7 @@ const routes: Routes = [
             component: ImageGalleryComponent,
             data: {
               auth: [Authority.TENANT_ADMIN, Authority.SYS_ADMIN],
-              title: 'image.gallery',
+              title: 'image.images',
               imageSubType: ResourceSubType.IMAGE
             }
           }
@@ -157,7 +157,7 @@ const routes: Routes = [
             component: EntitiesTableComponent,
             data: {
               auth: [Authority.TENANT_ADMIN, Authority.SYS_ADMIN],
-              title: 'resource.resources-library',
+              title: 'resource.files',
             },
             resolve: {
               entitiesTableConfig: ResourcesLibraryTableConfigResolver
@@ -194,7 +194,7 @@ const routes: Routes = [
             component: EntitiesTableComponent,
             data: {
               auth: [Authority.TENANT_ADMIN, Authority.SYS_ADMIN],
-              title: 'javascript.javascript-library',
+              title: 'javascript.scripts',
             },
             resolve: {
               entitiesTableConfig: JsLibraryTableConfigResolver
@@ -227,7 +227,10 @@ const routes: Routes = [
       auth: [Authority.SYS_ADMIN, Authority.TENANT_ADMIN],
       showMainLoadingBar: false,
       breadcrumb: {
-        menuId: MenuId.settings
+        menuIdByAuthority: {
+          SYS_ADMIN: MenuId.platform,
+          TENANT_ADMIN: MenuId.settings
+        }
       }
     },
     children: [
diff --git a/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client-dialog.component.html b/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client-dialog.component.html
index fc26b51e86..580dd004e0 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form (ngSubmit)="save()" style="width: 850px;max-height: 100vh">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ 'admin.oauth2.add-client' | translate }}</h2>
     <span class="flex-1"></span>
     <div [tb-help]="helpLinkId()"></div>
diff --git a/ui-ngx/src/app/modules/home/pages/admin/queue/queue.component.html b/ui-ngx/src/app/modules/home/pages/admin/queue/queue.component.html
index 2a5c55f3e8..b86ecd61e7 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/queue/queue.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/queue/queue.component.html
@@ -16,20 +16,20 @@
 
 -->
 <div class="tb-details-buttons xs:flex xs:flex-col">
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
           [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
           [class.!hidden]="hideDelete() || isEdit">
     {{ 'queue.delete' | translate }}
   </button>
   <div class="flex flex-row xs:flex-col">
-    <button mat-raised-button
+    <button mat-stroked-button
             ngxClipboard
             (cbOnSuccess)="onQueueIdCopied($event)"
             [cbContent]="entity?.id?.id"
diff --git a/ui-ngx/src/app/modules/home/pages/admin/resource/js-library-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/admin/resource/js-library-table-config.resolver.ts
index 76371d1957..466f1b3335 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/resource/js-library-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/admin/resource/js-library-table-config.resolver.ts
@@ -92,7 +92,7 @@ export class JsLibraryTableConfigResolver  {
     this.config.columns.push(
       new DateEntityTableColumn<ResourceInfo>('createdTime', 'common.created-time', this.datePipe, '150px'),
       new EntityTableColumn<ResourceInfo>('title', 'resource.title', '60%'),
-      new EntityTableColumn<ResourceInfo>('resourceSubType', 'javascript.javascript-type', '40%',
+      new EntityTableColumn<ResourceInfo>('resourceSubType', 'javascript.script-type', '40%',
         entity => this.translate.instant(ResourceSubTypeTranslationMap.get(entity.resourceSubType))),
       new EntityTableColumn<ResourceInfo>('tenantId', 'resource.system', '60px',
         entity => checkBoxCell(entity.tenantId.id === NULL_UUID)),
@@ -144,7 +144,7 @@ export class JsLibraryTableConfigResolver  {
   }
 
   resolve(): EntityTableConfig<Resource, PageLink, ResourceInfo> {
-    this.config.tableTitle = this.translate.instant('javascript.javascript-library');
+    this.config.tableTitle = this.translate.instant('javascript.scripts');
     this.config.componentsData = {
       resourceSubType: ''
     };
diff --git a/ui-ngx/src/app/modules/home/pages/admin/resource/js-library-table-header.component.html b/ui-ngx/src/app/modules/home/pages/admin/resource/js-library-table-header.component.html
index 1daeab7f89..07af940051 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/resource/js-library-table-header.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/resource/js-library-table-header.component.html
@@ -16,7 +16,7 @@
 
 -->
 <mat-form-field class="mat-block" subscriptSizing="dynamic">
-  <mat-label translate>javascript.javascript-type</mat-label>
+  <mat-label translate>javascript.script-type</mat-label>
   <mat-select [ngModel]="entitiesTableConfig.componentsData.resourceSubType"
               (ngModelChange)="jsResourceSubTypeChanged($event)"
               placeholder="{{ 'javascript.javascript-type' | translate }}">
diff --git a/ui-ngx/src/app/modules/home/pages/admin/resource/js-resource.component.html b/ui-ngx/src/app/modules/home/pages/admin/resource/js-resource.component.html
index 009e549554..4c17a7f63f 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/resource/js-resource.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/resource/js-resource.component.html
@@ -16,26 +16,26 @@
 
 -->
 <div class="tb-details-buttons xs:flex xs:flex-col">
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
           [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'downloadResource')"
           [class.!hidden]="isEdit">
     {{ 'javascript.download' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'deleteLibrary')"
           [class.!hidden]="hideDelete() || isEdit">
     {{ 'javascript.delete' | translate }}
   </button>
   <div class="flex flex-row xs:flex-col">
-    <button mat-raised-button
+    <button mat-stroked-button
             ngxClipboard
             (cbOnSuccess)="onResourceIdCopied()"
             [cbContent]="entity?.id?.id"
@@ -49,7 +49,7 @@
   <form [formGroup]="entityForm">
     <fieldset [disabled]="(isLoading$ | async) || !isEdit">
       <mat-form-field class="mat-block" appearance="outline">
-        <mat-label translate>javascript.javascript-type</mat-label>
+        <mat-label translate>javascript.script-type</mat-label>
         <mat-select formControlName="resourceSubType" required>
           @for (resourceSubType of jsResourceSubTypes; track resourceSubType) {
             <mat-option [value]="resourceSubType">
diff --git a/ui-ngx/src/app/modules/home/pages/admin/resource/resources-library-table-config.resolve.ts b/ui-ngx/src/app/modules/home/pages/admin/resource/resources-library-table-config.resolve.ts
index 103aeaaac1..cfe392fb2c 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/resource/resources-library-table-config.resolve.ts
+++ b/ui-ngx/src/app/modules/home/pages/admin/resource/resources-library-table-config.resolve.ts
@@ -149,7 +149,7 @@ export class ResourcesLibraryTableConfigResolver  {
   }
 
   resolve(): EntityTableConfig<Resource, PageLink, ResourceInfo> {
-    this.config.tableTitle = this.translate.instant('resource.resources-library');
+    this.config.tableTitle = this.translate.instant('resource.files');
     this.config.componentsData = {
       resourceType: ''
     };
diff --git a/ui-ngx/src/app/modules/home/pages/admin/send-test-sms-dialog.component.html b/ui-ngx/src/app/modules/home/pages/admin/send-test-sms-dialog.component.html
index 96975f3f70..6827d831b8 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/send-test-sms-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/send-test-sms-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="sendTestSmsFormGroup" style="min-width: 500px; position: relative;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>admin.send-test-sms</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/pages/admin/settings-card.scss b/ui-ngx/src/app/modules/home/pages/admin/settings-card.scss
index b28af41842..2ba6db065e 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/settings-card.scss
+++ b/ui-ngx/src/app/modules/home/pages/admin/settings-card.scss
@@ -34,6 +34,15 @@
      }
    }
 
+   ::ng-deep {
+     button {
+       &.mat-mdc-outlined-button:not(:disabled) {
+         --mat-button-outlined-outline-color: inherit;
+         border-color: inherit;
+       }
+     }
+   }
+
    @media #{$mat-md} {
      width: 80%;
    }
diff --git a/ui-ngx/src/app/modules/home/pages/asset/asset.component.html b/ui-ngx/src/app/modules/home/pages/asset/asset.component.html
index 837342ec57..6ea9450e2d 100644
--- a/ui-ngx/src/app/modules/home/pages/asset/asset.component.html
+++ b/ui-ngx/src/app/modules/home/pages/asset/asset.component.html
@@ -16,44 +16,44 @@
 
 -->
 <div class="tb-details-buttons xs:flex xs:flex-col">
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
           [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'makePublic')"
           [class.!hidden]="isEdit || assetScope !== 'tenant' || isAssignedToCustomer(entity) || entity?.customerIsPublic">
     {{'asset.make-public' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'assignToCustomer')"
           [class.!hidden]="isEdit || assetScope !== 'tenant' || isAssignedToCustomer(entity)">
     {{'asset.assign-to-customer' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'unassignFromCustomer')"
           [class.!hidden]="isEdit || (assetScope !== 'customer' && assetScope !== 'tenant') || !isAssignedToCustomer(entity)">
     {{ (entity?.customerIsPublic ? 'asset.make-private' : 'asset.unassign-from-customer') | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'unassignFromEdge')"
           [class.!hidden]="isEdit || assetScope !== 'edge'">
     {{ 'edge.unassign-from-edge' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
           [class.!hidden]="hideDelete() || isEdit">
     {{'asset.delete' | translate }}
   </button>
   <div class="flex flex-row xs:flex-col">
-    <button mat-raised-button
+    <button mat-stroked-button
             ngxClipboard
             (cbOnSuccess)="onAssetIdCopied($event)"
             [cbContent]="entity?.id?.id"
diff --git a/ui-ngx/src/app/modules/home/pages/customer/customer-routing.module.ts b/ui-ngx/src/app/modules/home/pages/customer/customer-routing.module.ts
index 55d33c833b..d302af7c2c 100644
--- a/ui-ngx/src/app/modules/home/pages/customer/customer-routing.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/customer/customer-routing.module.ts
@@ -26,7 +26,7 @@ import { AssetsTableConfigResolver } from '../asset/assets-table-config.resolver
 import { DashboardsTableConfigResolver } from '@modules/home/pages/dashboard/dashboards-table-config.resolver';
 import { DashboardPageComponent } from '@home/components/dashboard-page/dashboard-page.component';
 import { BreadCrumbConfig } from '@shared/components/breadcrumb';
-import { dashboardBreadcumbLabelFunction, DashboardResolver } from '@home/pages/dashboard/dashboard-routing.module';
+import { DashboardResolver } from '@home/pages/dashboard/dashboard-routing.module';
 import { EdgesTableConfigResolver } from '@home/pages/edge/edges-table-config.resolver';
 import { EntityDetailsPageComponent } from '@home/components/entity/entity-details-page.component';
 import { ConfirmOnExitGuard } from '@core/guards/confirm-on-exit.guard';
@@ -38,7 +38,7 @@ const routes: Routes = [
     path: 'customers',
     data: {
       breadcrumb: {
-        menuId: MenuId.customers
+        menuId: MenuId.customers_and_users
       }
     },
     children: [
@@ -254,7 +254,6 @@ const routes: Routes = [
             canDeactivate: [ConfirmOnExitGuard],
             data: {
               breadcrumb: {
-                labelFunction: dashboardBreadcumbLabelFunction,
                 icon: 'dashboard'
               } as BreadCrumbConfig<DashboardPageComponent>,
               auth: [Authority.TENANT_ADMIN, Authority.CUSTOMER_USER],
diff --git a/ui-ngx/src/app/modules/home/pages/customer/customer.component.html b/ui-ngx/src/app/modules/home/pages/customer/customer.component.html
index cb771237d1..bc098f994c 100644
--- a/ui-ngx/src/app/modules/home/pages/customer/customer.component.html
+++ b/ui-ngx/src/app/modules/home/pages/customer/customer.component.html
@@ -16,52 +16,52 @@
 
 -->
 <div class="tb-details-buttons xs:flex xs:flex-col">
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
           [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'manageUsers')"
           [class.!hidden]="isEdit || isPublic">
     {{'customer.manage-users' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'manageAssets')"
           [class.!hidden]="isEdit">
     {{'customer.manage-assets' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'manageDevices')"
           [class.!hidden]="isEdit">
     {{'customer.manage-devices' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'manageDashboards')"
           [class.!hidden]="isEdit">
     {{'customer.manage-dashboards' | translate }}
   </button>
   @if (edgesSupportEnabled()) {
-    <button mat-raised-button color="primary"
+    <button mat-stroked-button color="primary"
             [disabled]="(isLoading$ | async)"
             (click)="onEntityAction($event, 'manageEdges')"
             [class.!hidden]="isEdit">
       {{'customer.manage-edges' | translate }}
     </button>
   }
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
           [class.!hidden]="hideDelete() || isEdit || isPublic">
     {{'customer.delete' | translate }}
   </button>
   <div class="flex flex-row xs:flex-col">
-    <button mat-raised-button
+    <button mat-stroked-button
             ngxClipboard
             (cbOnSuccess)="onCustomerIdCopied($event)"
             [cbContent]="entity?.id?.id"
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html
index 89e83f4eeb..02e8797012 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html
@@ -16,63 +16,63 @@
 
 -->
 <div class="tb-details-buttons xs:flex xs:flex-col">
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
           [class.!hidden]="isEdit">
     {{'dashboard.open-dashboard' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'export')"
           [class.!hidden]="isEdit || dashboardScope !== 'tenant'">
     {{'dashboard.export' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'import')"
           [class.!hidden]="isEdit || dashboardScope !== 'tenant'">
     {{'dashboard.update-new-version' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'makePublic')"
           [class.!hidden]="isEdit || dashboardScope !== 'tenant' || isPublic(entity)">
     {{'dashboard.make-public' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'makePrivate')"
           [class.!hidden]="isEdit || !(dashboardScope === 'tenant' && isPublic(entity)
                                 || dashboardScope === 'customer' && isCurrentPublicCustomer(entity))">
     {{'dashboard.make-private' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'manageAssignedCustomers')"
           [class.!hidden]="isEdit || dashboardScope !== 'tenant'">
     {{'dashboard.manage-assigned-customers' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'unassignFromCustomer')"
           [class.!hidden]="isEdit || dashboardScope !== 'customer' || isCurrentPublicCustomer(entity)">
     {{ 'dashboard.unassign-from-customer' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'unassignFromEdge')"
           [class.!hidden]="isEdit || dashboardScope !== 'edge'">
     {{ 'edge.unassign-from-edge' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
           [class.!hidden]="hideDelete() || isEdit">
     {{'dashboard.delete' | translate }}
   </button>
   <div class="flex flex-row">
-    <button mat-raised-button
+    <button mat-stroked-button
             ngxClipboard
             (cbOnSuccess)="onDashboardIdCopied($event)"
             [cbContent]="entity?.id?.id"
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-routing.module.ts b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-routing.module.ts
index 3501141558..3f1392154c 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-routing.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-routing.module.ts
@@ -21,7 +21,7 @@ import { EntitiesTableComponent } from '../../components/entity/entities-table.c
 import { Authority } from '@shared/models/authority.enum';
 import { DashboardsTableConfigResolver } from './dashboards-table-config.resolver';
 import { DashboardPageComponent } from '@home/components/dashboard-page/dashboard-page.component';
-import { BreadCrumbConfig, BreadCrumbLabelFunction } from '@shared/components/breadcrumb';
+import { BreadCrumbConfig } from '@shared/components/breadcrumb';
 import { mergeMap, Observable, of } from 'rxjs';
 import { Dashboard } from '@app/shared/models/dashboard.models';
 import { DashboardService } from '@core/http/dashboard.service';
@@ -59,9 +59,6 @@ export class DashboardResolver  {
   }
 }
 
-export const dashboardBreadcumbLabelFunction: BreadCrumbLabelFunction<DashboardPageComponent>
-  = ((route, translate, component) => component.dashboard.title);
-
 const routes: Routes = [
   {
     path: 'dashboards',
@@ -89,7 +86,6 @@ const routes: Routes = [
         canDeactivate: [ConfirmOnExitGuard],
         data: {
           breadcrumb: {
-            labelFunction: dashboardBreadcumbLabelFunction,
             icon: 'dashboard'
           } as BreadCrumbConfig<DashboardPageComponent>,
           auth: [Authority.TENANT_ADMIN, Authority.CUSTOMER_USER],
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/import-dashboard-file-dialog.component.html b/ui-ngx/src/app/modules/home/pages/dashboard/import-dashboard-file-dialog.component.html
index 3286044628..3156968569 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/import-dashboard-file-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/import-dashboard-file-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="uploadFileFormGroup" (ngSubmit)="save()" style="width: 800px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ 'dashboard.update-new-version' | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/make-dashboard-public-dialog.component.html b/ui-ngx/src/app/modules/home/pages/dashboard/make-dashboard-public-dialog.component.html
index e21f996584..00eb0cb3d5 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/make-dashboard-public-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/make-dashboard-public-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <div style="min-width: 400px; position: relative;">
-  <mat-toolbar class="flex flex-row" color="primary">
+  <mat-toolbar class="tb-dialog-header flex flex-row">
     <h2>{{ 'dashboard.public-dashboard-title' | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/manage-dashboard-customers-dialog.component.html b/ui-ngx/src/app/modules/home/pages/dashboard/manage-dashboard-customers-dialog.component.html
index 691a5250cd..a4aefc8364 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/manage-dashboard-customers-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/manage-dashboard-customers-dialog.component.html
@@ -17,7 +17,7 @@
 -->
 <form style="width: 600px;"
       [formGroup]="dashboardCustomersFormGroup" (ngSubmit)="submit()">
-  <mat-toolbar class="flex flex-row" color="primary">
+  <mat-toolbar class="tb-dialog-header flex flex-row">
     <h2>{{ titleText | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/pages/device/device-check-connectivity-dialog.component.html b/ui-ngx/src/app/modules/home/pages/device/device-check-connectivity-dialog.component.html
index 449187e220..dd1fd8b178 100644
--- a/ui-ngx/src/app/modules/home/pages/device/device-check-connectivity-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/device/device-check-connectivity-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2 translate>{{ dialogTitle }}</h2>
   <span class="flex-1"></span>
   <!--  <div [tb-help]="'check-connectivity'"></div>-->
diff --git a/ui-ngx/src/app/modules/home/pages/device/device-credentials-dialog.component.html b/ui-ngx/src/app/modules/home/pages/device/device-credentials-dialog.component.html
index 5f679a5389..2ee604d879 100644
--- a/ui-ngx/src/app/modules/home/pages/device/device-credentials-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/device/device-credentials-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2>{{ 'device.device-credentials' | translate }}</h2>
   <span class="flex-1"></span>
   <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/pages/device/device.component.html b/ui-ngx/src/app/modules/home/pages/device/device.component.html
index 3da91d1e44..04e2181e95 100644
--- a/ui-ngx/src/app/modules/home/pages/device/device.component.html
+++ b/ui-ngx/src/app/modules/home/pages/device/device.component.html
@@ -16,56 +16,56 @@
 
 -->
 <div class="tb-details-buttons xs:flex xs:flex-col">
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
           [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'makePublic')"
           [class.!hidden]="isEdit || deviceScope !== 'tenant' || isAssignedToCustomer(entity) || entity?.customerIsPublic">
     {{'device.make-public' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'assignToCustomer')"
           [class.!hidden]="isEdit || deviceScope !== 'tenant' || isAssignedToCustomer(entity)">
     {{'device.assign-to-customer' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'unassignFromCustomer')"
           [class.!hidden]="isEdit || (deviceScope !== 'customer' && deviceScope !== 'tenant') || !isAssignedToCustomer(entity)">
     {{ (entity?.customerIsPublic ? 'device.make-private' : 'device.unassign-from-customer') | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'manageCredentials')"
           [class.!hidden]="isEdit">
     {{ ((deviceScope === 'customer_user' || deviceScope === 'edge_customer_user') ? 'device.view-credentials' : 'device.manage-credentials') | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'checkConnectivity')"
           [class.!hidden]="isEdit">
     {{ 'device.connectivity.check-connectivity' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'unassignFromEdge')"
           [class.!hidden]="isEdit || deviceScope !== 'edge'">
     {{ 'edge.unassign-from-edge' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
           [class.!hidden]="hideDelete() || isEdit">
     {{'device.delete' | translate }}
   </button>
   <div class="flex flex-row xs:flex-col">
-    <button mat-raised-button
+    <button mat-stroked-button
             ngxClipboard
             (cbOnSuccess)="onDeviceIdCopied($event)"
             [cbContent]="entity?.id?.id"
diff --git a/ui-ngx/src/app/modules/home/pages/edge/edge-instructions-dialog.component.html b/ui-ngx/src/app/modules/home/pages/edge/edge-instructions-dialog.component.html
index 9376ff1b3e..a1df65362f 100644
--- a/ui-ngx/src/app/modules/home/pages/edge/edge-instructions-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/edge/edge-instructions-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2 translate>{{ dialogTitle }}</h2>
   <span class="flex-1"></span>
   <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/pages/edge/edge-routing.module.ts b/ui-ngx/src/app/modules/home/pages/edge/edge-routing.module.ts
index 49f5b2e988..eacf54cbff 100644
--- a/ui-ngx/src/app/modules/home/pages/edge/edge-routing.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/edge/edge-routing.module.ts
@@ -25,7 +25,7 @@ import { EntityViewsTableConfigResolver } from '@home/pages/entity-view/entity-v
 import { DashboardsTableConfigResolver } from '@home/pages/dashboard/dashboards-table-config.resolver';
 import { RuleChainsTableConfigResolver } from '@home/pages/rulechain/rulechains-table-config.resolver';
 import { DashboardPageComponent } from '@home/components/dashboard-page/dashboard-page.component';
-import { dashboardBreadcumbLabelFunction, DashboardResolver } from '@home/pages/dashboard/dashboard-routing.module';
+import { DashboardResolver } from '@home/pages/dashboard/dashboard-routing.module';
 import { BreadCrumbConfig } from '@shared/components/breadcrumb';
 import { RuleChainPageComponent } from '@home/pages/rulechain/rulechain-page.component';
 import { ConfirmOnExitGuard } from '@core/guards/confirm-on-exit.guard';
@@ -243,7 +243,6 @@ const routes: Routes = [
                 canDeactivate: [ConfirmOnExitGuard],
                 data: {
                   breadcrumb: {
-                    labelFunction: dashboardBreadcumbLabelFunction,
                     icon: 'dashboard'
                   } as BreadCrumbConfig<DashboardPageComponent>,
                   auth: [Authority.TENANT_ADMIN, Authority.CUSTOMER_USER],
diff --git a/ui-ngx/src/app/modules/home/pages/edge/edge.component.html b/ui-ngx/src/app/modules/home/pages/edge/edge.component.html
index 25fe5e2c0c..4de5019fd9 100644
--- a/ui-ngx/src/app/modules/home/pages/edge/edge.component.html
+++ b/ui-ngx/src/app/modules/home/pages/edge/edge.component.html
@@ -16,68 +16,68 @@
 
 -->
 <div class="tb-details-buttons xs:flex xs:flex-col">
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
           [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'makePublic')"
           [class.!hidden]="isEdit || edgeScope !== 'tenant' || isAssignedToCustomer(entity) || entity?.customerIsPublic">
     {{'edge.make-public' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'assignToCustomer')"
           [class.!hidden]="isEdit || edgeScope !== 'tenant' || isAssignedToCustomer(entity)">
     {{'edge.assign-to-customer' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'unassignFromCustomer')"
           [class.!hidden]="isEdit || (edgeScope !== 'customer' && edgeScope !== 'tenant') || !isAssignedToCustomer(entity)">
     {{ (entity?.customerIsPublic ? 'edge.make-private' : 'edge.unassign-from-customer') | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'openEdgeAssets')"
           [class.!hidden]="isEdit || edgeScope === 'customer'">
     {{'edge.manage-assets' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'openEdgeDevices')"
           [class.!hidden]="isEdit || edgeScope === 'customer'">
     {{'edge.manage-devices' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'openEdgeEntityViews')"
           [class.!hidden]="isEdit || edgeScope === 'customer'">
     {{'edge.manage-entity-views' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'openEdgeDashboards')"
           [class.!hidden]="isEdit || edgeScope === 'customer'">
     {{'edge.manage-dashboards' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'openEdgeRuleChains')"
           [class.!hidden]="isEdit || edgeScope !== 'tenant'">
     {{'edge.manage-rulechains' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
           [class.!hidden]="hideDelete() || isEdit">
     {{'edge.delete' | translate }}
   </button>
   <div class="flex flex-row flex-wrap xs:flex-col">
-    <button mat-raised-button
+    <button mat-stroked-button
             ngxClipboard
             (cbOnSuccess)="onEdgeIdCopied($event)"
             [cbContent]="entity?.id?.id"
@@ -86,7 +86,7 @@
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>edge.copy-id</span>
     </button>
-    <button mat-raised-button
+    <button mat-stroked-button
             ngxClipboard
             (cbOnSuccess)="onEdgeInfoCopied('key')"
             [cbContent]="entity?.routingKey"
@@ -95,7 +95,7 @@
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>edge.copy-edge-key</span>
     </button>
-    <button mat-raised-button
+    <button mat-stroked-button
             ngxClipboard
             (cbOnSuccess)="onEdgeInfoCopied('secret')"
             [cbContent]="entity?.secret"
@@ -104,7 +104,7 @@
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>edge.copy-edge-secret</span>
     </button>
-    <button mat-raised-button
+    <button mat-stroked-button
             ngxClipboard
             [disabled]="(isLoading$ | async)"
             (click)="onEntityAction($event, 'syncEdge')"
@@ -115,7 +115,7 @@
   </div>
   <div class="flex flex-row xs:flex-col">
     @if (!upgradeAvailable) {
-      <button mat-raised-button color="primary"
+      <button mat-stroked-button color="primary"
               [disabled]="(isLoading$ | async)"
               (click)="onEntityAction($event, 'openInstallInstructions')"
               [class.!hidden]="isEdit || edgeScope === 'customer_user'">
@@ -123,7 +123,7 @@
         <span>{{ 'edge.install-connect-instructions' | translate }}</span>
       </button>
     } @else {
-      <button mat-raised-button color="primary"
+      <button mat-stroked-button color="primary"
               [disabled]="(isLoading$ | async)"
               (click)="onEntityAction($event, 'openUpgradeInstructions')"
               [class.!hidden]="isEdit || edgeScope === 'customer_user'">
diff --git a/ui-ngx/src/app/modules/home/pages/entity-view/entity-view.component.html b/ui-ngx/src/app/modules/home/pages/entity-view/entity-view.component.html
index 06c1470ff6..c29a026f25 100644
--- a/ui-ngx/src/app/modules/home/pages/entity-view/entity-view.component.html
+++ b/ui-ngx/src/app/modules/home/pages/entity-view/entity-view.component.html
@@ -16,44 +16,44 @@
 
 -->
 <div class="tb-details-buttons xs:flex xs:flex-col">
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
           [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'makePublic')"
           [class.!hidden]="isEdit || entityViewScope !== 'tenant' || isAssignedToCustomer(entity) || entity?.customerIsPublic">
     {{'entity-view.make-public' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'assignToCustomer')"
           [class.!hidden]="isEdit || entityViewScope !== 'tenant' || isAssignedToCustomer(entity)">
     {{'entity-view.assign-to-customer' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'unassignFromCustomer')"
           [class.!hidden]="isEdit || (entityViewScope !== 'customer' && entityViewScope !== 'tenant') || !isAssignedToCustomer(entity)">
     {{ (entity?.customerIsPublic ? 'entity-view.make-private' : 'entity-view.unassign-from-customer') | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'unassignFromEdge')"
           [class.!hidden]="isEdit || entityViewScope !== 'edge'">
     {{ 'edge.unassign-from-edge' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
           [class.!hidden]="hideDelete() || isEdit">
     {{'entity-view.delete' | translate }}
   </button>
   <div class="flex flex-row xs:flex-col">
-    <button mat-raised-button
+    <button mat-stroked-button
             ngxClipboard
             (cbOnSuccess)="onEntityViewIdCopied($event)"
             [cbContent]="entity?.id?.id"
diff --git a/ui-ngx/src/app/modules/home/pages/features/features-routing.module.ts b/ui-ngx/src/app/modules/home/pages/features/features-routing.module.ts
index f664a4b607..7e1e9fa970 100644
--- a/ui-ngx/src/app/modules/home/pages/features/features-routing.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/features/features-routing.module.ts
@@ -27,7 +27,8 @@ const routes: Routes = [
     data: {
       auth: [Authority.TENANT_ADMIN],
       breadcrumb: {
-        menuId: MenuId.features
+        menuId: MenuId.features,
+        skip: true
       }
     },
     children: [
diff --git a/ui-ngx/src/app/modules/home/pages/home-links/home-links-routing.module.ts b/ui-ngx/src/app/modules/home/pages/home-links/home-links-routing.module.ts
index 48227502d8..c5f17501dc 100644
--- a/ui-ngx/src/app/modules/home/pages/home-links/home-links-routing.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/home-links/home-links-routing.module.ts
@@ -96,6 +96,7 @@ const applySystemParametersToHomeDashboard = (store: Store<AppState>,
           }
         }
         dashboard.hideDashboardToolbar = true;
+        dashboard.isSystemDashboard = true;
         return dashboard;
       })
     ))
diff --git a/ui-ngx/src/app/modules/home/pages/home-links/home-links.component.html b/ui-ngx/src/app/modules/home/pages/home-links/home-links.component.html
index 848430c0cf..e08aabd6e8 100644
--- a/ui-ngx/src/app/modules/home/pages/home-links/home-links.component.html
+++ b/ui-ngx/src/app/modules/home/pages/home-links/home-links.component.html
@@ -16,7 +16,7 @@
 
 -->
 @if (homeDashboard) {
-  <tb-dashboard-page [embedded]="true" [dashboard]="homeDashboard" [hideToolbar]="homeDashboard.hideDashboardToolbar"></tb-dashboard-page>
+  <tb-dashboard-page [embedded]="true" [dashboard]="homeDashboard" [hideToolbar]="homeDashboard.hideDashboardToolbar" [hideMainToolbar]="hideMainToolbar"></tb-dashboard-page>
 } @else {
   <mat-grid-list class="tb-home-links" [cols]="cols" rowHeight="280px">
     @for (section of homeSections$| async; track section) {
@@ -29,7 +29,7 @@
             <mat-grid-list rowHeight="170px" [cols]="section.places.length">
               @for (place of section.places; track place) {
                 <mat-grid-tile>
-                  <a mat-raised-button color="primary" class="tb-card-button" routerLink="{{place.path}}">
+                  <a mat-stroked-button class="tb-card-button" routerLink="{{place.path}}">
                     <tb-icon matButtonIcon class="tb-mat-96">{{place.icon}}</tb-icon>
                     <span>{{place.customTranslate ? (place.name | customTranslate) : (place.name | translate)}}</span>
                   </a>
diff --git a/ui-ngx/src/app/modules/home/pages/home-links/home-links.component.scss b/ui-ngx/src/app/modules/home/pages/home-links/home-links.component.scss
index 71d86ef85f..4938e8dc54 100644
--- a/ui-ngx/src/app/modules/home/pages/home-links/home-links.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/home-links/home-links.component.scss
@@ -42,19 +42,14 @@
         padding: 16px;
       }
     }
-    .tb-card-button {
+    .tb-card-button.mat-mdc-outlined-button {
       width: 100%;
       height: 100%;
       max-width: 240px;
-      &:hover {
-        border-bottom: none;
-      }
-      &:focus {
-        border-bottom: none;
-      }
       display: flex;
       flex-direction: column;
       align-items: center;
+      color: rgba(0,0,0,0.76);
       .mat-icon {
         margin: auto;
       }
@@ -70,12 +65,6 @@
         white-space: normal;
         text-align: center;
       }
-      &.mat-mdc-raised-button.mat-primary {
-        .mat-ripple-element {
-          opacity: 0.3;
-          background-color: rgba(255, 255, 255, 0.3);
-        }
-      }
     }
   }
 }
diff --git a/ui-ngx/src/app/modules/home/pages/home-links/home-links.component.ts b/ui-ngx/src/app/modules/home/pages/home-links/home-links.component.ts
index f7b38179ab..d1afc4a424 100644
--- a/ui-ngx/src/app/modules/home/pages/home-links/home-links.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/home-links/home-links.component.ts
@@ -14,7 +14,12 @@
 /// limitations under the License.
 ///
 
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  OnInit
+} from '@angular/core';
 import { MenuService } from '@core/services/menu.service';
 import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
 import { MediaBreakpoints } from '@shared/models/constants';
@@ -23,11 +28,11 @@ import { ActivatedRoute } from '@angular/router';
 import { HomeDashboard } from '@shared/models/dashboard.models';
 
 @Component({
-    selector: 'tb-home-links',
-    templateUrl: './home-links.component.html',
-    styleUrls: ['./home-links.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone: false
+  selector: 'tb-home-links',
+  templateUrl: './home-links.component.html',
+  styleUrls: ['./home-links.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false
 })
 export class HomeLinksComponent implements OnInit {
 
@@ -37,6 +42,8 @@ export class HomeLinksComponent implements OnInit {
 
   homeDashboard: HomeDashboard = this.route.snapshot.data.homeDashboard;
 
+  hideMainToolbar = true;
+
   constructor(private menuService: MenuService,
               public breakpointObserver: BreakpointObserver,
               private cd: ChangeDetectorRef,
@@ -44,6 +51,7 @@ export class HomeLinksComponent implements OnInit {
   }
 
   ngOnInit() {
+    this.hideMainToolbar = (!!this.homeDashboard && !this.homeDashboard.isSystemDashboard);
     if (!this.homeDashboard) {
       this.updateColumnCount();
       this.breakpointObserver
diff --git a/ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app-dialog.component.html b/ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app-dialog.component.html
index 79bd13c8b1..00992def0b 100644
--- a/ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form (ngSubmit)="save()" style="width: 850px;max-height: 100vh;display: grid;grid-template-rows: min-content 4px minmax(auto, 1fr) min-content;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ 'mobile.add-application' | translate }}</h2>
     <span class="flex-1"></span>
     <div tb-help="mobileApplication"></div>
diff --git a/ui-ngx/src/app/modules/home/pages/mobile/applications/remove-app-dialog.component.html b/ui-ngx/src/app/modules/home/pages/mobile/applications/remove-app-dialog.component.html
index d02a692247..84d5da8531 100644
--- a/ui-ngx/src/app/modules/home/pages/mobile/applications/remove-app-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/mobile/applications/remove-app-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar class="justify-between" color="primary">
+<mat-toolbar class="tb-dialog-header justify-between">
   <h2 translate>mobile.delete-application</h2>
   <button mat-icon-button
           (click)="cancel()"
diff --git a/ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/add-mobile-page-dialog.component.html b/ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/add-mobile-page-dialog.component.html
index 70b3c4d7ad..188e4968cb 100644
--- a/ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/add-mobile-page-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/add-mobile-page-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary" class="justify-between">
+<mat-toolbar class="tb-dialog-header justify-between">
   <h2 translate>mobile.add-specific-page</h2>
   <button mat-icon-button
           (click)="cancel()"
diff --git a/ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-app-configuration-dialog.component.html b/ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-app-configuration-dialog.component.html
index b6be4742ad..f38b0cb50b 100644
--- a/ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-app-configuration-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-app-configuration-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary" class="justify-between">
+<mat-toolbar class="tb-dialog-header justify-between">
   <h2 translate>mobile.configuration-dialog</h2>
   <button mat-icon-button
           (click)="close()"
diff --git a/ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-bundle-dialog.component.html b/ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-bundle-dialog.component.html
index 738dd372b7..0015300dac 100644
--- a/ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-bundle-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-bundle-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2>{{ dialogTitle | translate }}</h2>
   <span class="flex-1"></span>
   <div tb-help="mobileBundle"></div>
diff --git a/ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-notification-dialog.component.html b/ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-notification-dialog.component.html
index 9d4a353683..5652b5e2a7 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-notification-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-notification-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="targetNotificationForm" class="tb-dialog-container">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ (isAdd ? 'notification.add-notification-recipients-group' : 'notification.edit-notification-recipients-group') | translate }}</h2>
     <span class="flex-1"></span>
     <div tb-help="recipientNotifications"></div>
diff --git a/ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.html b/ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.html
index cb2643d893..a30e05b15c 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2>{{ dialogTitle | translate }}</h2>
   <span class="flex-1"></span>
   <div tb-help="ruleNotifications"></div>
diff --git a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-error-dialog.component.html b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-error-dialog.component.html
index 1c98892b60..6c0fe68d1e 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-error-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-error-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2 translate>notification.failed-send</h2>
   <span class="flex-1"></span>
   <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html
index 1a0be821be..68f7dc4701 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2>{{ dialogTitle | translate }}</h2>
   <span class="flex-1"></span>
   <div tb-help="sentNotification"></div>
diff --git a/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html b/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html
index dbe49a6238..18161037a3 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2>{{ dialogTitle | translate }}</h2>
   <span class="flex-1"></span>
   <div tb-help="templateNotifications"></div>
diff --git a/ui-ngx/src/app/modules/home/pages/ota-update/ota-update.component.html b/ui-ngx/src/app/modules/home/pages/ota-update/ota-update.component.html
index 2cd31dec1d..5f162b0733 100644
--- a/ui-ngx/src/app/modules/home/pages/ota-update/ota-update.component.html
+++ b/ui-ngx/src/app/modules/home/pages/ota-update/ota-update.component.html
@@ -16,26 +16,26 @@
 
 -->
 <div class="tb-details-buttons xs:flex xs:flex-col">
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
           [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async) || !(entity?.hasData && !entity?.url)"
           (click)="onEntityAction($event, 'uploadPackage')"
           [class.!hidden]="isEdit">
     {{ 'ota-update.download' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
           [class.!hidden]="hideDelete() || isEdit">
     {{ 'ota-update.delete' | translate }}
   </button>
   <div class="flex flex-row xs:flex-col">
-    <button mat-raised-button
+    <button mat-stroked-button
             ngxClipboard
             (cbOnSuccess)="onPackageIdCopied()"
             [cbContent]="entity?.id?.id"
@@ -43,7 +43,7 @@
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>ota-update.copyId</span>
     </button>
-    <button mat-raised-button
+    <button mat-stroked-button
             ngxClipboard
             (cbOnSuccess)="onPackageChecksumCopied()"
             [cbContent]="entity?.checksum"
@@ -51,7 +51,7 @@
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>ota-update.copy-checksum</span>
     </button>
-    <button mat-raised-button
+    <button mat-stroked-button
             ngxClipboard
             (cbOnSuccess)="onPackageDirectUrlCopied()"
             [cbContent]="entity?.url"
diff --git a/ui-ngx/src/app/modules/home/pages/profiles/profiles-routing.module.ts b/ui-ngx/src/app/modules/home/pages/profiles/profiles-routing.module.ts
index 7593162704..e99cb56113 100644
--- a/ui-ngx/src/app/modules/home/pages/profiles/profiles-routing.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/profiles/profiles-routing.module.ts
@@ -27,7 +27,8 @@ const routes: Routes = [
     data: {
       auth: [Authority.TENANT_ADMIN],
       breadcrumb: {
-        menuId: MenuId.profiles
+        menuId: MenuId.profiles,
+        skip: true
       }
     },
     children: [
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/add-note-dialog.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/add-note-dialog.component.html
index 33aa61d0e1..33c38208d0 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/add-note-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/add-note-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2 translate>rulechain.add-note</h2>
   <span class="flex-1"></span>
   <button mat-icon-button type="button" (click)="cancel()">
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-dialog.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-dialog.component.html
index 41e72a14cf..5c287cc66d 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form (ngSubmit)="add()" class="dialog-container">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>rulenode.add</h2>
     <span class="flex-1">: {{ruleNode.component.name}}</span>
     <div [tb-help]="helpLinkIdForRuleNodeType()"></div>
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-link-dialog.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-link-dialog.component.html
index 4fc6469d0e..feacb5b5de 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-link-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-link-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="ruleNodeLinkFormGroup" (ngSubmit)="add()" style="width: 480px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>rulenode.add-link</h2>
     <span class="flex-1"></span>
     <div [tb-help]="'ruleEngine'"></div>
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/create-nested-rulechain-dialog.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/create-nested-rulechain-dialog.component.html
index d0b9c32b2b..4da609f98f 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/create-nested-rulechain-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/create-nested-rulechain-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form (ngSubmit)="add()" style="min-width: 650px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>rulenode.create-nested-rulechain</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.html
index e506e8d87c..d36a36a11a 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.html
@@ -27,7 +27,7 @@
                     #drawer
                     opened
                     position="start">
-          <mat-toolbar color="primary" class="tb-dark">
+          <mat-toolbar>
             @if (!isImport) {
               <tb-rule-chain-select
                 class="flex-1"
@@ -185,7 +185,7 @@
           }
         </mat-drawer>
         <mat-drawer-content class="tb-rulechain-graph-content">
-          <button color="primary"
+          <button color="#fff"
                   mat-mini-fab
                   class="tb-library-node-btn"
                   (click)="drawer.toggle();"
@@ -194,7 +194,7 @@
             <mat-icon class="tb-library-node-btn-icon" [class.tb-library-node-btn-icon-toggled]="drawer.opened">chevron_right</mat-icon>
           </button>
           @if (!isImport) {
-            <button color="primary"
+            <button color="#fff"
                     type="button"
                     mat-mini-fab class="add-note-button"
                     (click)="addNote()"
@@ -203,7 +203,7 @@
               <mat-icon>sticky_note_2</mat-icon>
             </button>
             <button #versionControlButton
-                    color="primary"
+                    color="#fff"
                     type="button"
                     mat-mini-fab class="version-control-button"
                     (click)="toggleVersionControl($event, versionControlButton)"
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.scss b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.scss
index b38fe007e8..effb1ad7e1 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.scss
@@ -69,7 +69,7 @@
     position: absolute;
     top: 50%;
     z-index: 1000;
-    opacity: 0.5;
+    opacity: 0.8;
     border-radius: 0 15px 15px 0 !important;
     transform: translateY(-50%);
     &-icon {
@@ -86,7 +86,7 @@
       content: "";
       pointer-events: none;
       border-radius: 0 0 0 15px;
-      box-shadow: -10px 0px 0 0px #305680;
+      box-shadow: -10px 0px 0 0px #fff;
       border: none;
     }
     &:after {
@@ -98,7 +98,7 @@
       content: "";
       pointer-events: none;
       border-top-left-radius: 15px;
-      box-shadow: -10px 0px 0px 0px #305680;
+      box-shadow: -10px 0px 0px 0px #fff;
       border: none;
     }
   }
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain.component.html
index fbc7e9f286..08b47e0635 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain.component.html
@@ -16,56 +16,56 @@
 
 -->
 <div class="tb-details-buttons">
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
           [class.!hidden]="isEdit">
     {{'rulechain.open-rulechain' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'export')"
           [class.!hidden]="isEdit">
     {{'rulechain.export' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'setRoot')"
           [class.!hidden]="isEdit || !((!entity?.root && ruleChainScope === 'tenant') || (!isEdgeRootRuleChain() && ruleChainScope === 'edge'))">
     {{'rulechain.set-root' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'setEdgeTemplateRoot')"
           [class.!hidden]="isEdit || entity?.root || ruleChainScope !== 'edges'">
     {{'rulechain.set-edge-template-root-rulechain' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'setAutoAssignToEdge')"
           [class.!hidden]="isEdit || !isNotAutoAssignToEdgeRuleChain() || ruleChainScope !== 'edges'">
     {{'rulechain.set-auto-assign-to-edge' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'unsetAutoAssignToEdge')"
           [class.!hidden]="isEdit || !isAutoAssignToEdgeRuleChain() || ruleChainScope !== 'edges'">
     {{'rulechain.unset-auto-assign-to-edge' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'unassignFromEdge')"
           [class.!hidden]="isEdit || isEdgeRootRuleChain() || ruleChainScope !== 'edges'">
     {{'edge.unassign-from-edge' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
           [class.!hidden]="hideDelete() || isEdit || ruleChainScope === 'edge'">
     {{'rulechain.delete' | translate }}
   </button>
   <div class="flex flex-row">
-    <button mat-raised-button
+    <button mat-stroked-button
             ngxClipboard
             (cbOnSuccess)="onRuleChainIdCopied($event)"
             [cbContent]="entity?.id?.id"
diff --git a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/backup-code-auth-dialog.component.html b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/backup-code-auth-dialog.component.html
index bb0eace707..0113e49065 100644
--- a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/backup-code-auth-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/backup-code-auth-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar class="flex flex-row" color="primary">
+<mat-toolbar class="tb-dialog-header flex flex-row">
   <h2 translate>security.2fa.dialog.get-backup-code-title</h2>
   <span class="flex-1"></span>
   <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/email-auth-dialog.component.html b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/email-auth-dialog.component.html
index ccf853359c..069b2c566c 100644
--- a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/email-auth-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/email-auth-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar class="flex flex-row" color="primary">
+<mat-toolbar class="tb-dialog-header flex flex-row">
   <h2 translate>security.2fa.dialog.enable-email-title</h2>
   <span class="flex-1"></span>
   <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html
index a568402d99..9f1ae9d781 100644
--- a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar class="flex flex-row" color="primary">
+<mat-toolbar class="tb-dialog-header flex flex-row">
   <h2 translate>security.2fa.dialog.enable-sms-title</h2>
   <span class="flex-1"></span>
   <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/totp-auth-dialog.component.html b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/totp-auth-dialog.component.html
index 03dfc8a112..f7ff8e034e 100644
--- a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/totp-auth-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/totp-auth-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar class="flex flex-row" color="primary">
+<mat-toolbar class="tb-dialog-header flex flex-row">
   <h2 translate>security.2fa.dialog.enable-totp-title</h2>
   <span class="flex-1"></span>
   <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/pages/tenant/tenant.component.html b/ui-ngx/src/app/modules/home/pages/tenant/tenant.component.html
index 8e7b639c38..6c28cf8e1c 100644
--- a/ui-ngx/src/app/modules/home/pages/tenant/tenant.component.html
+++ b/ui-ngx/src/app/modules/home/pages/tenant/tenant.component.html
@@ -16,26 +16,26 @@
 
 -->
 <div class="tb-details-buttons xs:flex xs:flex-col">
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
           [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'manageTenantAdmins')"
           [class.!hidden]="isEdit">
     {{'tenant.manage-tenant-admins' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
           [class.!hidden]="hideDelete() || isEdit">
     {{'tenant.delete' | translate }}
   </button>
   <div class="flex flex-row xs:flex-col">
-    <button mat-raised-button
+    <button mat-stroked-button
             ngxClipboard
             (cbOnSuccess)="onTenantIdCopied($event)"
             [cbContent]="entity?.id?.id"
diff --git a/ui-ngx/src/app/modules/home/pages/user/activation-link-dialog.component.html b/ui-ngx/src/app/modules/home/pages/user/activation-link-dialog.component.html
index c8e1b97f5f..77e430d749 100644
--- a/ui-ngx/src/app/modules/home/pages/user/activation-link-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/user/activation-link-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form style="min-width: 400px; position: relative;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>user.activation-link</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.html b/ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.html
index 60ae3ad1c2..d64863c765 100644
--- a/ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form (ngSubmit)="add()" style="min-width: 450px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>user.add</h2>
     <span class="flex-1"></span>
     <div [tb-help]="'users'"></div>
diff --git a/ui-ngx/src/app/modules/home/pages/user/user.component.html b/ui-ngx/src/app/modules/home/pages/user/user.component.html
index 789d2244b6..b0969dc650 100644
--- a/ui-ngx/src/app/modules/home/pages/user/user.component.html
+++ b/ui-ngx/src/app/modules/home/pages/user/user.component.html
@@ -16,52 +16,52 @@
 
 -->
 <div class="tb-details-buttons xs:flex xs:flex-col">
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
           [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'disableAccount')"
           [class.!hidden]="isEdit || !isUserActivated() || !isUserCredentialsEnabled()">
     {{'user.disable-account' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'enableAccount')"
           [class.!hidden]="isEdit || !isUserActivated() || isUserCredentialsEnabled()">
     {{'user.enable-account' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'displayActivationLink')"
           [class.!hidden]="isEdit || isUserActivated()">
     {{'user.display-activation-link' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'resendActivation')"
           [class.!hidden]="isEdit || isUserActivated()">
     {{'user.resend-activation' | translate }}
   </button>
   @if (loginAsUserEnabled$ | async) {
-    <button mat-raised-button color="primary"
+    <button mat-stroked-button color="primary"
             [disabled]="(isLoading$ | async)"
             (click)="onEntityAction($event, 'loginAsUser')"
             [class.!hidden]="isEdit">
       {{ (entity?.authority === authority.TENANT_ADMIN ? 'user.login-as-tenant-admin' : 'user.login-as-customer-user') | translate }}
     </button>
   }
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
           [class.!hidden]="hideDelete() || isEdit">
     {{'user.delete' | translate }}
   </button>
   <div class="flex flex-row xs:flex-col">
-    <button mat-raised-button
+    <button mat-stroked-button
             ngxClipboard
             (cbOnSuccess)="onUserIdCopied($event)"
             [cbContent]="entity?.id?.id"
diff --git a/ui-ngx/src/app/modules/home/pages/widget/save-widget-type-as-dialog.component.html b/ui-ngx/src/app/modules/home/pages/widget/save-widget-type-as-dialog.component.html
index 1b316cdc81..ccaec1f89e 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/save-widget-type-as-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/widget/save-widget-type-as-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="saveWidgetTypeAsFormGroup" (ngSubmit)="saveAs()" style="min-width: 360px">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>{{ dialogTitle }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/pages/widget/select-widget-type-dialog.component.html b/ui-ngx/src/app/modules/home/pages/widget/select-widget-type-dialog.component.html
index 60ecf4ea6d..b9c559ab05 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/select-widget-type-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/widget/select-widget-type-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form style="width: 800px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>widget.select-widget-type</h2>
     <span class="flex-1"></span>
     <div tb-help="widgetTypes"></div>
diff --git a/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.html b/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.html
index 685f0f3336..5959b80179 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.html
+++ b/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.html
@@ -15,27 +15,44 @@
     limitations under the License.
 
 -->
+
+<ng-template #widgetTitleTpl>
+  <div class="flex flex-row items-center justify-start gap-2">
+    @if ((breadcrumbs$ | async).length > 1) {
+      <span class='tb-breadcrumb-divider'> > </span>
+    }
+    <mat-form-field class="tb-widget-title tb-appearance-transparent flex-1 gt-xmd:flex-initial">
+      <input [disabled]="isReadOnly" matInput required maxlength="255"
+             [(ngModel)]="widget.widgetName" (ngModelChange)="isDirty = true"
+             placeholder="{{ 'widget.widget-title' | translate }}"/>
+    </mat-form-field>
+    <mat-form-field class="tb-appearance-transparent flex-1 gt-xmd:flex-initial">
+      <mat-select [disabled]="isReadOnly" placeholder="{{ 'widget.type' | translate }}"
+                  [(ngModel)]="widget.type" (ngModelChange)="widgetTypeChanged()">
+        @for (type of allWidgetTypes; track type) {
+          <mat-option [value]="type">
+            {{ widgetTypesDataMap.get(widgetTypes[type]).name | translate }}
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+  </div>
+</ng-template>
+
 <div class="flex flex-1 flex-col">
   <div class="flex flex-1 flex-col" tb-fullscreen [fullscreen]="fullscreen" [tb-hotkeys]="hotKeys" [cheatSheet]="cheatSheetComponent">
     <tb-hotkeys-cheatsheet #cheatSheetComponent></tb-hotkeys-cheatsheet>
-    <mat-toolbar class="mat-elevation-z1 tb-edit-toolbar mat-hue-3 gap-4 lt-xl:gap-2">
-      <mat-form-field class="tb-widget-title tb-appearance-transparent">
-        <input [disabled]="isReadOnly" matInput required maxlength="255"
-               [(ngModel)]="widget.widgetName" (ngModelChange)="isDirty = true"
-               placeholder="{{ 'widget.widget-title' | translate }}"/>
-      </mat-form-field>
-      <mat-form-field class="tb-appearance-transparent">
-        <mat-select [disabled]="isReadOnly" placeholder="{{ 'widget.type' | translate }}"
-                    [(ngModel)]="widget.type" (ngModelChange)="widgetTypeChanged()">
-          @for (type of allWidgetTypes; track type) {
-            <mat-option [value]="type">
-              {{ widgetTypesDataMap.get(widgetTypes[type]).name | translate }}
-            </mat-option>
-          }
-        </mat-select>
-      </mat-form-field>
-      <span class="flex-1"></span>
-      <button mat-button class="lt-md:!hidden" [disabled]="!iframeWidgetEditModeInited"
+    <mat-toolbar class="tb-edit-toolbar gap-4 lt-xl:gap-2">
+      <button mat-icon-button
+              [class.!hidden]="fullscreen"
+              class="-ml-2 -mr-2 gt-sm:!hidden" (click)="toggleSidenav()">
+        <mat-icon class="material-icons">menu</mat-icon>
+      </button>
+      <div class="flex flex-1 flex-row items-center overflow-hidden">
+        <tb-breadcrumb class="mat-toolbar-tools" [componentBreadcrumbsTpl]="widgetTitleTpl"></tb-breadcrumb>
+      </div>
+      <tb-github-badge class="lt-lg:!hidden"></tb-github-badge>
+      <button mat-button class="lt-lg:!hidden" [disabled]="!iframeWidgetEditModeInited"
               (click)="applyWidgetScript()"
               matTooltip="{{ 'widget.run' | translate }} (CTRL + Return)"
               matTooltipPosition="below">
@@ -43,7 +60,7 @@
         <span translate>action.run</span>
       </button>
       <button mat-raised-button
-              class="lt-md:!hidden" [disabled]="(isLoading$ | async) || undoDisabled()"
+              class="lt-lg:!hidden" [disabled]="(isLoading$ | async) || undoDisabled()"
               (click)="undoWidget()"
               matTooltip="{{ 'widget.undo' | translate }} (CTRL + Q)"
               matTooltipPosition="below">
@@ -52,7 +69,7 @@
       </button>
       @if (!isReadOnly) {
         <button mat-raised-button
-                class="lt-md:!hidden" [disabled]="(isLoading$ | async) || saveDisabled()"
+                class="lt-lg:!hidden" [disabled]="(isLoading$ | async) || saveDisabled()"
                 (click)="saveWidget()"
                 [tb-circular-progress]="saveWidgetPending"
                 matTooltip="{{ 'widget.save' | translate }} (CTRL + S)"
@@ -62,7 +79,7 @@
         </button>
       }
       <button mat-raised-button
-              class="lt-md:!hidden" [disabled]="(isLoading$ | async) || saveAsDisabled()"
+              class="lt-lg:!hidden" [disabled]="(isLoading$ | async) || saveAsDisabled()"
               (click)="saveWidgetAs()"
               [tb-circular-progress]="saveWidgetAsPending"
               matTooltip="{{ 'widget.saveAs' | translate }} (Shift + CTRL + S)"
@@ -70,24 +87,20 @@
         <mat-icon>save_as</mat-icon>
         <span translate>action.saveAs</span>
       </button>
-      <button mat-button
-              class="lt-lg:!hidden"
-              (click)="fullscreen = !fullscreen"
-              matTooltip="{{ 'widget.toggle-fullscreen' | translate }} (Shift + CTRL + F)"
-              matTooltipPosition="below">
-        <mat-icon>{{ fullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
-        <span translate>widget.toggle-fullscreen</span>
-      </button>
-      <button mat-icon-button class="lt-md:!hidden gt-md:!hidden"
-              (click)="fullscreen = !fullscreen"
-              matTooltip="{{ 'widget.toggle-fullscreen' | translate }} (Shift + CTRL + F)"
-              matTooltipPosition="below">
-        <mat-icon>{{ fullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
-      </button>
       <button mat-icon-button class="gt-md:!hidden"
               [matMenuTriggerFor]="widgetEditMenu">
         <mat-icon>more_vert</mat-icon>
       </button>
+      <div class="flex flex-row items-center">
+        <mat-divider vertical></mat-divider>
+        <button mat-icon-button class="lt-md:!hidden"
+                matTooltip="{{ 'widget.toggle-fullscreen' | translate }} (Shift + CTRL + F)"
+                matTooltipPosition="below"
+                (click)="fullscreen = !fullscreen">
+          <mat-icon>{{ fullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
+        </button>
+        <tb-notification-bell></tb-notification-bell>
+      </div>
       <mat-menu #widgetEditMenu="matMenu" xPosition="before">
         <button mat-menu-item
                 [disabled]="!iframeWidgetEditModeInited"
@@ -117,7 +130,12 @@
         </button>
       </mat-menu>
     </mat-toolbar>
-    <div class="flex-1" style="position: relative;">
+    @if ((homeService.hideLoadingBar$ | async) === false && (isLoading$ | async)) {
+      <mat-progress-bar color="warn" style="z-index: 10; margin-bottom: -4px; width: 100%;" mode="indeterminate"
+      >
+      </mat-progress-bar>
+    }
+    <div class="flex-1 mt-2" style="position: relative;">
       <div class="tb-editor tb-absolute-fill">
         <div #topPanel class="tb-split tb-split-vertical">
           <div #topLeftPanel class="tb-split tb-content">
diff --git a/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.scss b/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.scss
index c9ddc17422..86c9000d74 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.scss
@@ -15,8 +15,6 @@
  */
 @import '../../../../../scss/constants';
 
-$edit-toolbar-height: 40px !default;
-
 tb-widget-editor {
   flex: 1;
   display: flex;
@@ -173,8 +171,34 @@ div.tb-editor-area-title-panel {
 
 mat-toolbar.tb-edit-toolbar {
 
-  min-height: $edit-toolbar-height !important;
-  max-height: $edit-toolbar-height !important;
+  height: 56px;
+  min-height: 56px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+
+  & > div {
+    height: 56px;
+  }
+  .mat-toolbar-tools {
+    padding: 0;
+    height: 56px;
+    width: auto;
+  }
+  .tb-breadcrumb-divider {
+    width: 20px;
+    text-align: center;
+    font-size: 16px;
+    line-height: 20px;
+    font-weight: 400;
+    overflow: hidden;
+    color: rgba(0, 0, 0, 0.76);
+    @media #{$mat-lt-md} {
+      display: none;
+    }
+  }
+
+  .mat-divider-vertical {
+    height: 100%;
+  }
 
   button.mat-mdc-button-base:not(.mat-mdc-icon-button) {
     font-size: 12px;
@@ -193,19 +217,25 @@ mat-toolbar.tb-edit-toolbar {
   }
 
   .mat-mdc-form-field {
+    --mat-form-field-filled-input-text-color: rgba(0,0,0,0.76);
     input, .mat-mdc-select {
-      font-size: 1.1rem;
+      font-size: 16px;
       font-weight: 400;
       letter-spacing: .005em;
     }
     &.tb-widget-title {
-      min-width: 250px;
+      width: 250px;
+      @media #{$mat-lt-md} {
+        input {
+            font-size: 24px;
+        }
+      }
     }
   }
 
-  @media #{$mat-lt-lg} {
+  @media #{$mat-lt-xmd} {
     .mat-mdc-form-field.tb-widget-title {
-      min-width: 0;
+      width: auto;
     }
   }
 }
diff --git a/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.ts b/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.ts
index c5ff08e3c6..eb420a963b 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.ts
@@ -18,7 +18,6 @@ import { PageComponent } from '@shared/components/page.component';
 import {
   Component,
   ElementRef,
-  EventEmitter,
   Inject,
   OnDestroy,
   OnInit,
@@ -74,6 +73,8 @@ import { JsFuncModulesComponent } from '@shared/components/js-func-modules.compo
 import { MatIconButton } from '@angular/material/button';
 import { formPropertyCompletions } from '@shared/models/dynamic-form.models';
 import { CustomTranslatePipe } from '@shared/pipe/custom-translate.pipe';
+import { BreadcrumbService } from '@core/services/breadcrumb.service';
+import { HomeService } from '@core/services/home.service';
 import Timeout = NodeJS.Timeout;
 
 // @dynamic
@@ -172,7 +173,7 @@ export class WidgetEditorComponent extends PageComponent implements OnInit, OnDe
 
   hotKeys: Hotkey[] = [];
 
-  updateBreadcrumbs = new EventEmitter();
+  breadcrumbs$ = this.breadcrumbService.breadcrumbs$;
 
   private rxSubscriptions = new Array<Subscription>();
 
@@ -188,7 +189,9 @@ export class WidgetEditorComponent extends PageComponent implements OnInit, OnDe
               private renderer: Renderer2,
               private viewContainerRef: ViewContainerRef,
               private customTranslate: CustomTranslatePipe,
-              private http: HttpClient) {
+              private http: HttpClient,
+              private breadcrumbService: BreadcrumbService,
+              public homeService: HomeService) {
     super(store);
 
     this.authUser = getCurrentAuthUser(store);
@@ -221,6 +224,7 @@ export class WidgetEditorComponent extends PageComponent implements OnInit, OnDe
   }
 
   ngOnInit(): void {
+    this.homeService.setHideMainToolbar(true);
     this.initSplitLayout();
     this.initAceEditors();
     this.iframe = $(this.widgetIFrameElmRef.nativeElement);
@@ -239,6 +243,10 @@ export class WidgetEditorComponent extends PageComponent implements OnInit, OnDe
     this.rxSubscriptions.length = 0;
   }
 
+  toggleSidenav() {
+    this.homeService.toggleSideBar.emit();
+  }
+
   private initHotKeys(): void {
     this.hotKeys.push(
       new Hotkey('ctrl+q', (event: KeyboardEvent) => {
@@ -628,7 +636,6 @@ export class WidgetEditorComponent extends PageComponent implements OnInit, OnDe
     this.widget.defaultConfig = JSON.stringify(config);
     this.origWidget = deepClone(this.widget);
     this.isDirty = false;
-    this.updateBreadcrumbs.emit();
   }
 
   applyWidgetScript(): void {
diff --git a/ui-ngx/src/app/modules/home/pages/widget/widget-library-routing.module.ts b/ui-ngx/src/app/modules/home/pages/widget/widget-library-routing.module.ts
index 52b757bfe0..6bfd799ab7 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/widget-library-routing.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/widget/widget-library-routing.module.ts
@@ -88,9 +88,11 @@ export const widgetsBundleWidgetsBreadcumbLabelFunction: BreadCrumbLabelFunction
   route.data.widgetsBundle.title);
 
 export const widgetEditorBreadcumbLabelFunction: BreadCrumbLabelFunction<WidgetEditorComponent> =
-  ((route, translate, component) =>
-    component?.widget?.widgetName ?
-      (component.widget.widgetName + (component.widget.deprecated ? ` (${translate.instant('widget.deprecated')})` : '')) : '');
+  ((route, translate, component) => {
+    const widget = component?.widget ?? route.data?.widgetEditorData?.widget;
+    return widget?.widgetName ?
+      (widget.widgetName + (widget.deprecated ? ` (${translate.instant('widget.deprecated')})` : '')) : '';
+  });
 
 const widgetEditorRouter: Routes = [
   {
@@ -242,7 +244,8 @@ export const widgetsLibraryRoutes: Routes = [
     data: {
       auth: [Authority.SYS_ADMIN, Authority.TENANT_ADMIN],
       breadcrumb: {
-        menuId: MenuId.widget_library
+        menuId: MenuId.widget_library,
+        skip: true
       }
     },
     children: [
diff --git a/ui-ngx/src/app/modules/home/pages/widget/widget-library.module.ts b/ui-ngx/src/app/modules/home/pages/widget/widget-library.module.ts
index 1ff2c6e886..87a07e2567 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/widget-library.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/widget/widget-library.module.ts
@@ -30,6 +30,8 @@ import { WidgetsBundleWidgetsComponent } from '@home/pages/widget/widgets-bundle
 import { WidgetTypeAutocompleteComponent } from '@home/pages/widget/widget-type-autocomplete.component';
 import { WidgetsBundleDialogComponent } from '@home/pages/widget/widgets-bundle-dialog.component';
 import { WidgetConfigComponentsModule } from '@home/components/widget/config/widget-config-components.module';
+import { GithubBadgeModule } from '@home/components/github-badge/github-badge.module';
+import { NotificationBellModule } from '@home/components/notification/notification-bell.module';
 
 @NgModule({
   declarations: [
@@ -48,6 +50,8 @@ import { WidgetConfigComponentsModule } from '@home/components/widget/config/wid
     CommonModule,
     SharedModule,
     HomeComponentsModule,
+    GithubBadgeModule,
+    NotificationBellModule,
     WidgetConfigComponentsModule,
     WidgetLibraryRoutingModule
   ]
diff --git a/ui-ngx/src/app/modules/home/pages/widget/widget-type.component.html b/ui-ngx/src/app/modules/home/pages/widget/widget-type.component.html
index b3f4d8024f..2c046e34a2 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/widget-type.component.html
+++ b/ui-ngx/src/app/modules/home/pages/widget/widget-type.component.html
@@ -16,25 +16,25 @@
 
 -->
 <div class="tb-details-buttons xs:flex xs:flex-col">
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'edit')"
           [class.!hidden]="isEdit">
     {{ 'widget.edit' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'openDetails')"
           [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'export')"
           [class.!hidden]="isEdit">
     {{ 'widget.export' | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-stroked-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
           [class.!hidden]="hideDelete() || isEdit">
diff --git a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-dialog.component.html b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-dialog.component.html
index c3a965b752..ee709d36cb 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form (ngSubmit)="save()" style="width: 650px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>widgets-bundle.add</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle.component.html b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle.component.html
index 7f607c1730..4eb281e1c4 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle.component.html
+++ b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle.component.html
@@ -17,25 +17,25 @@
 -->
 @if (!standalone) {
   <div class="tb-details-buttons xs:flex xs:flex-col">
-    <button mat-raised-button color="primary"
+    <button mat-stroked-button color="primary"
             [disabled]="(isLoading$ | async)"
             (click)="onEntityAction($event, 'open')"
             [class.!hidden]="isEdit">
       {{'widgets-bundle.open-widgets-bundle' | translate }}
     </button>
-    <button mat-raised-button color="primary"
+    <button mat-stroked-button color="primary"
             [disabled]="(isLoading$ | async)"
             (click)="onEntityAction($event, 'openDetails')"
             [class.!hidden]="isEdit || isDetailsPage">
       {{'common.open-details-page' | translate }}
     </button>
-    <button mat-raised-button color="primary"
+    <button mat-stroked-button color="primary"
             [disabled]="(isLoading$ | async)"
             (click)="onEntityAction($event, 'export')"
             [class.!hidden]="isEdit">
       {{'widgets-bundle.export' | translate }}
     </button>
-    <button mat-raised-button color="primary"
+    <button mat-stroked-button color="primary"
             [disabled]="(isLoading$ | async)"
             (click)="onEntityAction($event, 'delete')"
             [class.!hidden]="hideDelete() || isEdit">
diff --git a/ui-ngx/src/app/shared/components/breadcrumb.component.html b/ui-ngx/src/app/shared/components/breadcrumb.component.html
index 6fdd55b4a9..ee2cec0f19 100644
--- a/ui-ngx/src/app/shared/components/breadcrumb.component.html
+++ b/ui-ngx/src/app/shared/components/breadcrumb.component.html
@@ -15,28 +15,56 @@
     limitations under the License.
 
 -->
-<div class="tb-breadcrumb flex flex-1 flex-row">
-  <h1 class="flex-1 gt-sm:!hidden" *ngIf="lastBreadcrumb$ | async; let breadcrumb">
-    {{ breadcrumb.labelFunction ? breadcrumb.labelFunction() : (breadcrumb.customTranslate ? (breadcrumb.label | customTranslate) : (breadcrumb.label | translate)) }}
-  </h1>
-  <span class="flex flex-row lt-md:!hidden" *ngFor="let breadcrumb of breadcrumbs$ | async; trackBy: trackByBreadcrumbs; last as isLast;" [ngSwitch]="isLast">
-	    <a *ngSwitchCase="false" [routerLink]="breadcrumb.link" [queryParams]="breadcrumb.queryParams">
+<div class="tb-breadcrumb flex flex-1 flex-row gap-2">
+  @if (lastBreadcrumb$ | async; as breadcrumb) {
+    @if (!componentBreadcrumbsTpl) {
+      <h1 class="flex-1 gt-sm:!hidden">
         <ng-container
-          *ngTemplateOutlet="breadcrumbWithIcon;context:{breadcrumb: breadcrumb}">
+          *ngTemplateOutlet="breadcrumbTpl;context:{breadcrumb: breadcrumb}">
         </ng-container>
-	    </a>
-	    <span *ngSwitchCase="true">
-        <ng-container
-          *ngTemplateOutlet="breadcrumbWithIcon;context:{breadcrumb: breadcrumb}">
-        </ng-container>
-      </span>
-	    <span class="divider" [class.!hidden]="isLast"> > </span>
-	</span>
+      </h1>
+    }
+  }
+  @if (!componentBreadcrumbsTpl || (breadcrumbs$ | async).length > 1) {
+    <div class="flex flex-1 flex-row items-center gap-2 overflow-hidden lt-md:!hidden">
+      @for (breadcrumb of breadcrumbs$ | async; track breadcrumb.id; let isLast = $last; let i = $index;) {
+        @switch (isLast) {
+          @case (false) {
+            @if (i > 0) {
+              <span class="divider"> > </span>
+            }
+            <span class="flex flex-row gap-2">
+            <a [routerLink]="breadcrumb.link" [queryParams]="breadcrumb.queryParams">
+              <ng-container
+                *ngTemplateOutlet="breadcrumbTpl;context:{breadcrumb: breadcrumb}">
+              </ng-container>
+            </a>
+          </span>
+          }
+          @case (true) {
+            @if (!componentBreadcrumbsTpl) {
+              @if (i > 0) {
+                <span class="divider last-divider"> > </span>
+              }
+              <span>
+              <ng-container
+                *ngTemplateOutlet="breadcrumbTpl;context:{breadcrumb: breadcrumb}">
+              </ng-container>
+            </span>
+            }
+          }
+        }
+      }
+    </div>
+  }
+  @if (componentBreadcrumbsTpl) {
+    <span>
+      <ng-container
+        *ngTemplateOutlet="componentBreadcrumbsTpl">
+      </ng-container>
+    </span>
+  }
 </div>
-<ng-template #breadcrumbWithIcon let-breadcrumb="breadcrumb">
-  <img *ngIf="breadcrumb.iconUrl" [src]="breadcrumb.iconUrl"/>
-  <tb-icon *ngIf="!breadcrumb.iconUrl">
-    {{ breadcrumb.icon }}
-  </tb-icon>
+<ng-template #breadcrumbTpl let-breadcrumb="breadcrumb">
   {{ breadcrumb.labelFunction ? breadcrumb.labelFunction() : (breadcrumb.customTranslate ? (breadcrumb.label | customTranslate) : (breadcrumb.label | translate)) }}
 </ng-template>
diff --git a/ui-ngx/src/app/shared/components/breadcrumb.component.scss b/ui-ngx/src/app/shared/components/breadcrumb.component.scss
index 484d152bc4..3d64af65ce 100644
--- a/ui-ngx/src/app/shared/components/breadcrumb.component.scss
+++ b/ui-ngx/src/app/shared/components/breadcrumb.component.scss
@@ -14,12 +14,15 @@
  * limitations under the License.
  */
 :host {
+  pointer-events: auto;
   min-width: 0;
 
   .tb-breadcrumb {
-    font-size: 18px;
+    font-size: 16px;
+    line-height: 20px;
     font-weight: 400;
     overflow: hidden;
+    color: rgba(0,0,0,0.76);
 
     h1,
     a,
@@ -27,9 +30,6 @@
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
-      .mat-icon {
-        vertical-align: bottom;
-      }
     }
 
     h1 {
@@ -54,7 +54,13 @@
     }
 
     .divider {
-      padding: 0 20px;
+      padding: 0;
+      width: 20px;
+      text-align: center;
+      opacity: .75;
+      &.last-divider {
+        opacity: 1;
+      }
     }
   }
 }
diff --git a/ui-ngx/src/app/shared/components/breadcrumb.component.ts b/ui-ngx/src/app/shared/components/breadcrumb.component.ts
index 75603fc9cb..8ec092f803 100644
--- a/ui-ngx/src/app/shared/components/breadcrumb.component.ts
+++ b/ui-ngx/src/app/shared/components/breadcrumb.component.ts
@@ -14,18 +14,19 @@
 /// limitations under the License.
 ///
 
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
-import { BehaviorSubject, Subject, Subscription } from 'rxjs';
-import { BreadCrumb, BreadCrumbConfig } from './breadcrumb';
-import { ActivatedRoute, ActivatedRouteSnapshot, NavigationEnd, Router } from '@angular/router';
-import { distinctUntilChanged, filter, first, map, switchMap } from 'rxjs/operators';
-import { TranslateService } from '@ngx-translate/core';
-import { guid } from '@core/utils';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Input, OnDestroy,
+  OnInit,
+  TemplateRef
+} from '@angular/core';
+import { Observable, Subscription } from 'rxjs';
+import { BreadCrumb } from './breadcrumb';
 import { BroadcastService } from '@core/services/broadcast.service';
-import { ActiveComponentService } from '@core/services/active-component.service';
 import { UtilsService } from '@core/services/utils.service';
-import { MenuSection, menuSectionMap } from '@core/services/menu.models';
-import { MenuService } from '@core/services/menu.service';
+import { BreadcrumbService } from '@core/services/breadcrumb.service';
 
 @Component({
     selector: 'tb-breadcrumb',
@@ -36,118 +37,29 @@ import { MenuService } from '@core/services/menu.service';
 })
 export class BreadcrumbComponent implements OnInit, OnDestroy {
 
-  activeComponentValue: any;
-  updateBreadcrumbsSubscription: Subscription = null;
+  @Input()
+  componentBreadcrumbsTpl?: TemplateRef<any>;
 
-  setActiveComponent(activeComponent: any) {
-    if (this.updateBreadcrumbsSubscription) {
-      this.updateBreadcrumbsSubscription.unsubscribe();
-      this.updateBreadcrumbsSubscription = null;
-    }
-    this.activeComponentValue = activeComponent;
-    if (this.activeComponentValue && this.activeComponentValue.updateBreadcrumbs) {
-      this.updateBreadcrumbsSubscription = this.activeComponentValue.updateBreadcrumbs.subscribe(() => {
-        this.menuService.availableMenuSections().pipe(first()).subscribe((sections) => {
-          this.breadcrumbs$.next(this.buildBreadCrumbs(this.activatedRoute.snapshot, sections));
-        });
-      });
-    }
-  }
-
-  breadcrumbs$: Subject<Array<BreadCrumb>> = new BehaviorSubject<Array<BreadCrumb>>([]);
+  breadcrumbs$: Observable<BreadCrumb[]> = this.breadcrumbService.breadcrumbs$;
+  lastBreadcrumb$: Observable<BreadCrumb> = this.breadcrumbService.lastBreadcrumb$;
 
-  routerEventsSubscription = this.router.events.pipe(
-    filter((event) => event instanceof NavigationEnd ),
-    distinctUntilChanged(),
-    switchMap(() => this.menuService.availableMenuSections().pipe(first())),
-    map( (sections) => this.buildBreadCrumbs(this.activatedRoute.snapshot, sections) )
-  ).subscribe(breadcrumns => this.breadcrumbs$.next(breadcrumns) );
+  private updateBreadcrumbsSubscription: Subscription;
 
-  activeComponentSubscription = this.activeComponentService.onActiveComponentChanged().subscribe(comp => this.setActiveComponent(comp));
-
-  lastBreadcrumb$ = this.breadcrumbs$.pipe(
-    map( breadcrumbs => breadcrumbs[breadcrumbs.length - 1])
-  );
-
-  constructor(private router: Router,
-              private activatedRoute: ActivatedRoute,
-              private broadcast: BroadcastService,
-              private activeComponentService: ActiveComponentService,
+  constructor(private broadcast: BroadcastService,
+              private breadcrumbService: BreadcrumbService,
               private cd: ChangeDetectorRef,
-              private translate: TranslateService,
-              private menuService: MenuService,
               public utils: UtilsService) {
   }
 
   ngOnInit(): void {
-    this.broadcast.on('updateBreadcrumb', () => {
+    this.updateBreadcrumbsSubscription = this.broadcast.on('updateBreadcrumb', () => {
       this.cd.markForCheck();
     });
-    this.setActiveComponent(this.activeComponentService.getCurrentActiveComponent());
   }
 
   ngOnDestroy(): void {
-    if (this.routerEventsSubscription) {
-      this.routerEventsSubscription.unsubscribe();
-    }
-    if (this.activeComponentSubscription) {
-      this.activeComponentSubscription.unsubscribe();
-    }
-  }
-
-  private lastChild(route: ActivatedRouteSnapshot) {
-    let child = route;
-    while (child.firstChild !== null) {
-      child = child.firstChild;
-    }
-    return child;
-  }
-
-  buildBreadCrumbs(route: ActivatedRouteSnapshot, availableMenuSections: MenuSection[],
-                   breadcrumbs: Array<BreadCrumb> = [],
-                   lastChild?: ActivatedRouteSnapshot): Array<BreadCrumb> {
-    if (!lastChild) {
-      lastChild = this.lastChild(route);
-    }
-    let newBreadcrumbs = breadcrumbs;
-    if (route.routeConfig && route.routeConfig.data) {
-      const breadcrumbConfig = route.routeConfig.data.breadcrumb as BreadCrumbConfig<any>;
-      if (breadcrumbConfig && !breadcrumbConfig.skip) {
-        let labelFunction: () => string;
-        let section: MenuSection = null;
-        if (breadcrumbConfig.menuId) {
-          section = availableMenuSections.find(menu => menu.id === breadcrumbConfig.menuId);
-          if (!section) {
-            section = menuSectionMap.get(breadcrumbConfig.menuId);
-          }
-        }
-        const label = section?.name || breadcrumbConfig.label || 'home.home';
-        const customTranslate = section?.customTranslate || false;
-        if (breadcrumbConfig.labelFunction) {
-          labelFunction = () => this.activeComponentValue ?
-            breadcrumbConfig.labelFunction(route, this.translate, this.activeComponentValue, lastChild.data) : label;
-        }
-        const icon = section?.icon || breadcrumbConfig.icon || 'home';
-        const link = [ route.pathFromRoot.map(v => v.url.map(segment => segment.toString()).join('/')).join('/') ];
-        const breadcrumb = {
-          id: guid(),
-          label,
-          customTranslate,
-          labelFunction,
-          icon,
-          link,
-          queryParams: null
-        };
-        newBreadcrumbs = [...breadcrumbs, breadcrumb];
-      }
-    }
-    if (route.firstChild) {
-      return this.buildBreadCrumbs(route.firstChild, availableMenuSections, newBreadcrumbs, lastChild);
+    if (this.updateBreadcrumbsSubscription) {
+      this.updateBreadcrumbsSubscription.unsubscribe();
     }
-    return newBreadcrumbs;
-  }
-
-  trackByBreadcrumbs(_index: number, breadcrumb: BreadCrumb){
-    return breadcrumb.id;
   }
 }
diff --git a/ui-ngx/src/app/shared/components/breadcrumb.ts b/ui-ngx/src/app/shared/components/breadcrumb.ts
index e3ba1a5ae8..ed45335510 100644
--- a/ui-ngx/src/app/shared/components/breadcrumb.ts
+++ b/ui-ngx/src/app/shared/components/breadcrumb.ts
@@ -18,12 +18,12 @@ import { ActivatedRouteSnapshot, Params } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { HasUUID } from '@shared/models/id/has-uuid';
 import { MenuId } from '@core/services/menu.models';
+import { Authority } from '@shared/models/authority.enum';
 
 export interface BreadCrumb extends HasUUID{
   label: string;
   customTranslate: boolean;
   labelFunction?: () => string;
-  icon: string;
   link: any[];
   queryParams: Params;
 }
@@ -33,6 +33,7 @@ export type BreadCrumbLabelFunction<C> = (route: ActivatedRouteSnapshot, transla
 export interface BreadCrumbConfig<C> {
   labelFunction: BreadCrumbLabelFunction<C>;
   menuId?: MenuId;
+  menuIdByAuthority?: {[authority: string]: MenuId};
   label?: string;
   icon?: string;
   skip: boolean;
diff --git a/ui-ngx/src/app/shared/components/dialog/entity-conflict-dialog/entity-conflict-dialog.component.html b/ui-ngx/src/app/shared/components/dialog/entity-conflict-dialog/entity-conflict-dialog.component.html
index e6029c39ba..73455d26e9 100644
--- a/ui-ngx/src/app/shared/components/dialog/entity-conflict-dialog/entity-conflict-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/dialog/entity-conflict-dialog/entity-conflict-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2 class="main-label">
     {{ data.message }}
   </h2>
diff --git a/ui-ngx/src/app/shared/components/dialog/json-object-edit-dialog.component.html b/ui-ngx/src/app/shared/components/dialog/json-object-edit-dialog.component.html
index 289cf0f05b..6449ff9c50 100644
--- a/ui-ngx/src/app/shared/components/dialog/json-object-edit-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/dialog/json-object-edit-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="jsonFormGroup" (ngSubmit)="add()" style="min-width: 400px;" class="h-full">
-  <mat-toolbar class="flex flex-row" color="primary">
+  <mat-toolbar class="tb-dialog-header flex flex-row">
     <h2>{{ title }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/shared/components/dialog/node-script-test-dialog.component.html b/ui-ngx/src/app/shared/components/dialog/node-script-test-dialog.component.html
index 0878443cfa..ac6976d754 100644
--- a/ui-ngx/src/app/shared/components/dialog/node-script-test-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/dialog/node-script-test-dialog.component.html
@@ -17,7 +17,7 @@
 -->
 <form class="tb-node-script-test-dialog"
       [formGroup]="nodeScriptTestFormGroup" (ngSubmit)="save()">
-  <mat-toolbar class="flex flex-row" color="primary">
+  <mat-toolbar class="tb-dialog-header flex flex-row">
     <h2>{{ 'rulenode.test-script-function' | translate }} ({{ (scriptLang === scriptLanguage.JS ? 'rulenode.script-lang-java-script' : 'rulenode.script-lang-tbel') | translate }})</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/shared/components/image/embed-image-dialog.component.html b/ui-ngx/src/app/shared/components/image/embed-image-dialog.component.html
index c5a1a749ef..9016b2c8dd 100644
--- a/ui-ngx/src/app/shared/components/image/embed-image-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/image/embed-image-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2>{{ 'image.embed-image' | translate }}</h2>
   <span class="flex-1"></span>
   <button mat-icon-button
diff --git a/ui-ngx/src/app/shared/components/image/image-dialog.component.html b/ui-ngx/src/app/shared/components/image/image-dialog.component.html
index 0fe1a4be59..d837f4f410 100644
--- a/ui-ngx/src/app/shared/components/image/image-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/image/image-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form class="tb-image-dialog" [formGroup]="imageFormGroup">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ (readonly ? 'image.image-details' : 'image.edit-image') | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/shared/components/image/image-gallery.component.html b/ui-ngx/src/app/shared/components/image/image-gallery.component.html
index 8e4bd5a294..c62bce552a 100644
--- a/ui-ngx/src/app/shared/components/image/image-gallery.component.html
+++ b/ui-ngx/src/app/shared/components/image/image-gallery.component.html
@@ -23,7 +23,7 @@
       <div class="flex flex-1 flex-row items-center justify-start">
         <div class="mat-toolbar-tools">
           <div class="tb-images-title lt-md:!hidden">
-            <div tbTruncateWithTooltip>{{ (isScada ? 'scada.symbols' : 'image.gallery') | translate }}</div>
+            <div tbTruncateWithTooltip>{{ (isScada ? 'scada.symbols' : 'image.images') | translate }}</div>
             @if (isScada) {
               <div tb-help="scada"></div>
             }
diff --git a/ui-ngx/src/app/shared/components/image/upload-image-dialog.component.html b/ui-ngx/src/app/shared/components/image/upload-image-dialog.component.html
index 3e7b85268a..077df3c0d2 100644
--- a/ui-ngx/src/app/shared/components/image/upload-image-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/image/upload-image-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="uploadImageFormGroup" (ngSubmit)="upload()" style="width: 560px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ ( uploadImage ? (isScada ? 'scada.upload-symbol' : 'image.upload-image') : (isScada ? 'scada.update-symbol' : 'image.update-image') ) | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/shared/components/popover.component.scss b/ui-ngx/src/app/shared/components/popover.component.scss
index 21a0e882b5..1c52c35be6 100644
--- a/ui-ngx/src/app/shared/components/popover.component.scss
+++ b/ui-ngx/src/app/shared/components/popover.component.scss
@@ -220,4 +220,36 @@ $box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0,
   &-placement-leftBottom > &-content > &-arrow {
     bottom: 12px;
   }
+  &.tb-menu {
+    padding: 0;
+    .tb-popover-arrow {
+      display: none;
+    }
+    .tb-popover-inner {
+      border-radius: 4px;
+      box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.08), 0 1px 8px 1px rgba(0, 0, 0, 0.08);
+    }
+    .tb-popover-inner-content {
+      padding: 8px 0;
+    }
+    .tb-menu-content {
+      --mat-button-text-label-text-size: 14px;
+      --mat-button-text-label-text-weight: 400;
+      --mat-button-text-container-height: 40px;
+      .mat-mdc-button:not(.mat-mdc-icon-button) {
+        justify-content: start;
+        padding: 8px 16px;
+        & > .mat-icon {
+          width: 18px;
+          height: 18px;
+          font-size: 18px;
+          margin-right: 8px;
+        }
+        .mdc-button__label {
+          line-height: 20px;
+        }
+      }
+    }
+  }
 }
+
diff --git a/ui-ngx/src/app/shared/components/popover.component.ts b/ui-ngx/src/app/shared/components/popover.component.ts
index f971d94ec3..7014963252 100644
--- a/ui-ngx/src/app/shared/components/popover.component.ts
+++ b/ui-ngx/src/app/shared/components/popover.component.ts
@@ -96,6 +96,7 @@ export class TbPopoverDirective implements OnChanges, OnDestroy, AfterViewInit {
   @Input('tbPopoverOverlayClassName') overlayClassName?: string;
   @Input('tbPopoverOverlayStyle') overlayStyle?: { [klass: string]: any };
   @Input() tbPopoverBackdrop = false;
+  @Input() tbPopoverMenu = false;
 
   // eslint-disable-next-line @angular-eslint/no-output-rename
   @Output('tbPopoverVisibleChange') readonly visibleChange = new EventEmitter<boolean>();
@@ -242,7 +243,8 @@ export class TbPopoverDirective implements OnChanges, OnDestroy, AfterViewInit {
       mouseLeaveDelay: ['tbMouseLeaveDelay', () => this.mouseLeaveDelay],
       overlayClassName: ['tbOverlayClassName', () => this.overlayClassName],
       overlayStyle: ['tbOverlayStyle', () => this.overlayStyle],
-      tbPopoverBackdrop: ['tbBackdrop', () => this.tbPopoverBackdrop]
+      tbPopoverBackdrop: ['tbBackdrop', () => this.tbPopoverBackdrop],
+      tbPopoverMenu: ['tbMenu', () => this.tbPopoverMenu]
     };
 
     (keys || Object.keys(mappingProperties).filter(key => !key.startsWith('directive'))).forEach(
@@ -343,7 +345,7 @@ export class TbPopoverDirective implements OnChanges, OnDestroy, AfterViewInit {
               <span class="tb-popover-arrow-content"></span>
             </div>
             <div class="tb-popover-inner" [style]="tbPopoverInnerStyle" role="tooltip">
-              @if (tbShowCloseButton) {
+              @if (tbShowCloseButton && !tbMenu) {
                 <div class="tb-popover-close-button" (click)="closeButtonClick($event)">×</div>
               }
               <div style="width: 100%; height: 100%;">
@@ -389,6 +391,7 @@ export class TbPopoverComponent<T = any> implements OnDestroy, OnInit {
   tbPopoverInnerStyle: { [klass: string]: any } = {};
   tbPopoverInnerContentStyle: { [klass: string]: any } = {};
   tbBackdrop = false;
+  tbMenu = false;
   tbMouseEnterDelay?: number;
   tbMouseLeaveDelay?: number;
   tbHideOnClickOutside = true;
@@ -672,7 +675,8 @@ export class TbPopoverComponent<T = any> implements OnDestroy, OnInit {
   updateStyles(): void {
     this.classMap = {
       [`tb-popover-placement-${this.preferredPlacement}`]: true,
-      ['tb-popover-hidden']: this.tbHidden || !this.lastIsIntersecting
+      ['tb-popover-hidden']: this.tbHidden || !this.lastIsIntersecting,
+      ['tb-menu']: this.tbMenu
     };
     if (this.tbOverlayClassName) {
       this.classMap[this.tbOverlayClassName] = true;
diff --git a/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.scss b/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.scss
index c0cf6368d8..6f3d567691 100644
--- a/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.scss
+++ b/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.scss
@@ -21,7 +21,7 @@
     width: 100%;
 
     input {
-      color: #fff;
+      color: rgba(0,0,0,0.87);
       cursor: pointer;
       text-overflow: ellipsis;
       pointer-events: none;
diff --git a/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.html b/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.html
index 272fa6239c..c3b638be7a 100644
--- a/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="timewindowForm" mat-dialog-content  class="tb-timewindow-form">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ 'timewindow.timewindow-settings' | translate }}</h2>
     <span class="flex-1"></span>
     <div tb-help="timewindowSettings"></div>
diff --git a/ui-ngx/src/app/shared/components/toggle-header.component.scss b/ui-ngx/src/app/shared/components/toggle-header.component.scss
index b15ae6f209..42f2ced89f 100644
--- a/ui-ngx/src/app/shared/components/toggle-header.component.scss
+++ b/ui-ngx/src/app/shared/components/toggle-header.component.scss
@@ -139,7 +139,6 @@
       }
       &.tb-invert {
         .mat-button-toggle.mat-button-toggle-appearance-standard {
-          color: rgba(255, 255, 255, 0.8);
           &.mat-button-toggle-checked {
             .mat-button-toggle-button {
               background: #FFFFFF;
@@ -261,3 +260,17 @@
     }
   }
 }
+
+:host-context(.mat-primary) {
+  ::ng-deep {
+    .mat-button-toggle-group.mat-button-toggle-group-appearance-standard.tb-toggle-header {
+      &.tb-fill {
+        &.tb-invert {
+          .mat-button-toggle.mat-button-toggle-appearance-standard {
+            color: rgba(255, 255, 255, 0.8);
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/ui-ngx/src/app/shared/components/user-menu.component.html b/ui-ngx/src/app/shared/components/user-menu.component.html
index 91454db185..c67be678eb 100644
--- a/ui-ngx/src/app/shared/components/user-menu.component.html
+++ b/ui-ngx/src/app/shared/components/user-menu.component.html
@@ -15,35 +15,47 @@
     limitations under the License.
 
 -->
-<section class="flex flex-row">
-  @if (displayUserInfo) {
-    <div class="tb-user-info flex flex-row lt-lg:!hidden">
-      <mat-icon class="material-icons tb-mini-avatar">account_circle</mat-icon>
-      <div class="flex flex-col items-stretch justify-center">
-        @if (userDisplayName$ | async; as userDisplayName) {
-          <span class="tb-user-display-name">{{ userDisplayName }}</span>
-        }
-        @if (authorityName$ | async; as authorityName) {
-          <span class="tb-user-authority">{{ authorityName | translate }}</span>
-        }
+<button #menuButton #menuPopoverFull="tbPopover" mat-button class="tb-user-menu" [class.tb-collapsed]="collapsed"
+        (click)="$event.stopPropagation();"
+        tb-popover
+        tbPopoverTrigger="click"
+        [tbPopoverMenu]="true"
+        [tbPopoverContent]="userMenuTpl"
+        [tbPopoverOverlayClassName]="collapsed ? 'tb-user-menu-collapsed' : ''"
+        [tbPopoverPlacement]="collapsed ? 'right' : 'topLeft'">
+  <tb-icon class="material-icons tb-mini-avatar">mdi:account-circle-outline</tb-icon>
+  <div class="tb-user-info">
+    @if (userDisplayName$ | async; as userDisplayName) {
+      <span class="tb-user-display-name">{{ userDisplayName }}</span>
+    }
+    @if (authorityName$ | async; as authorityName) {
+      <span class="tb-user-authority">{{ authorityName | translate }}</span>
+    }
+  </div>
+</button>
+<button #menuPopoverIcon="tbPopover" mat-icon-button class="tb-user-menu-icon"
+        (click)="$event.stopPropagation();"
+        tb-popover
+        tbPopoverTrigger="click"
+        [tbPopoverMenu]="true"
+        [tbPopoverContent]="userMenuTpl"
+        [tbPopoverPlacement]="'bottomRight'">
+  <tb-icon class="material-icons tb-mini-avatar">mdi:account-circle-outline</tb-icon>
+</button>
+<ng-template #userMenuTpl>
+  @if (authority$ | async; as authority) {
+    <div class="tb-menu-content tb-user-menu-items" [style.width.px]="!collapsed ? menuButton?._elementRef?.nativeElement?.offsetWidth : ''">
+      <div class="tb-user-email">
+        {{ userEmail$ | async }}
       </div>
+      <button mat-button (click)="menuPopoverFull?.hide(); menuPopoverIcon?.hide(); openAccount()">
+        <tb-icon matButtonIcon>mdi:account-circle-outline</tb-icon>
+        <span translate>account.account</span>
+      </button>
+      <button mat-button class="tb-logout" (click)="menuPopoverFull?.hide(); menuPopoverIcon?.hide(); logout()">
+        <tb-icon matButtonIcon>logout</tb-icon>
+        <span translate>home.logout</span>
+      </button>
     </div>
   }
-  <button mat-icon-button [matMenuTriggerFor]="userMenu">
-    <mat-icon class="material-icons">more_vert</mat-icon>
-  </button>
-  <mat-menu #userMenu="matMenu" xPosition="before">
-    @if (authority$ | async; as authority) {
-      <div class="tb-user-menu-items">
-        <button mat-menu-item (click)="openAccount()">
-          <mat-icon class="material-icons">account_circle</mat-icon>
-          <span translate>account.account</span>
-        </button>
-        <button mat-menu-item (click)="logout()">
-          <mat-icon class="material-icons">exit_to_app</mat-icon>
-          <span translate>home.logout</span>
-        </button>
-      </div>
-    }
-  </mat-menu>
-</section>
+</ng-template>
diff --git a/ui-ngx/src/app/shared/components/user-menu.component.scss b/ui-ngx/src/app/shared/components/user-menu.component.scss
index 92befac2b1..d02051de83 100644
--- a/ui-ngx/src/app/shared/components/user-menu.component.scss
+++ b/ui-ngx/src/app/shared/components/user-menu.component.scss
@@ -13,38 +13,113 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-:host {
-  div.tb-user-info {
+
+@import "constants";
+
+.tb-primary-toolbar, .tb-dashboard-action-panel {
+  tb-user-menu {
+    width: auto;
+    button.mat-mdc-button:not(.mat-mdc-icon-button).tb-user-menu {
+      padding: 12px 16px;
+    }
+    @media #{$mat-lt-lg} {
+      button.mat-mdc-button:not(.mat-mdc-icon-button).tb-user-menu {
+        display: none;
+      }
+      .tb-user-menu-icon {
+        display: block;
+      }
+    }
+  }
+}
+
+tb-user-menu {
+  width: 100%;
+  .tb-user-menu-icon {
+    display: none;
+  }
+  button.mat-mdc-button:not(.mat-mdc-icon-button).tb-user-menu {
+    width: 100%;
+    height: 100%;
+    padding: 16px;
+    display: flex;
+    flex-direction: row;
+    justify-content: start;
+    gap: 8px;
     line-height: 1.5;
 
+    .tb-user-info {
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      justify-content: center;
+      opacity: 1;
+      transition: opacity $sidenav-anim-timing;
+    }
+
     span {
       text-transform: none;
+      text-align: start;
     }
 
     span.tb-user-display-name {
-      font-size: .8rem;
-      font-weight: 300;
-      letter-spacing: .008em;
+      font-size: 14px;
+      line-height: 16px;
+      font-weight: 500;
+      letter-spacing: 0.25px;
     }
 
     span.tb-user-authority {
-      font-size: .8rem;
-      font-weight: 300;
-      letter-spacing: .005em;
-      opacity: .8;
+      color: rgba(0, 0, 0, 0.54);
+      font-size: 12px;
+      line-height: 16px;
+      font-weight: 400;
+      letter-spacing: 0.25px;
     }
 
+    .mat-icon.tb-mini-avatar {
+      width: 32px;
+      height: 32px;
+      font-size: 32px;
+      margin: 0;
+      transition: all $sidenav-anim-timing;
+    }
+    &.tb-collapsed {
+      min-width: 0;
+      .mat-icon.tb-mini-avatar {
+        width: 20px;
+        height: 20px;
+        font-size: 20px;
+      }
+      .tb-user-info {
+        opacity: 0;
+      }
+    }
   }
+}
 
-  .mat-icon.tb-mini-avatar {
-    width: 36px;
-    height: 36px;
-    margin: auto 8px;
-    font-size: 36px;
-    cursor: default;
-  }
+.tb-popover.tb-menu.tb-user-menu-collapsed {
+  padding: 0 0 17px 0;
 }
 
 .tb-user-menu-items {
-  min-width: 256px;
+  min-width: 250px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  .tb-user-email {
+    font-size: 14px;
+    line-height: 16px;
+    font-weight: 500;
+    padding: 2px 16px;
+    color: rgba(0,0,0,0.57);
+  }
+  .mat-mdc-button {
+    &:hover {
+      background-color: rgba(0, 0, 0, .07);
+    }
+  }
+  .tb-logout {
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+  }
 }
diff --git a/ui-ngx/src/app/shared/components/user-menu.component.ts b/ui-ngx/src/app/shared/components/user-menu.component.ts
index 15c56dfb3f..268dc3fd80 100644
--- a/ui-ngx/src/app/shared/components/user-menu.component.ts
+++ b/ui-ngx/src/app/shared/components/user-menu.component.ts
@@ -14,7 +14,14 @@
 /// limitations under the License.
 ///
 
-import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component, EventEmitter,
+  Input,
+  OnDestroy,
+  OnInit, Output,
+  ViewEncapsulation
+} from '@angular/core';
 import { User } from '@shared/models/user.model';
 import { Authority } from '@shared/models/authority.enum';
 import { select, Store } from '@ngrx/store';
@@ -23,17 +30,24 @@ import { selectAuthUser, selectUserDetails } from '@core/auth/auth.selectors';
 import { map } from 'rxjs/operators';
 import { AuthService } from '@core/auth/auth.service';
 import { Router } from '@angular/router';
+import { coerceBoolean } from '@shared/decorators/coercion';
 
 @Component({
     selector: 'tb-user-menu',
     templateUrl: './user-menu.component.html',
     styleUrls: ['./user-menu.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
     standalone: false
 })
 export class UserMenuComponent implements OnInit, OnDestroy {
 
-  @Input() displayUserInfo: boolean;
+  @Input()
+  @coerceBoolean()
+  collapsed = false;
+
+  @Output()
+  menuClicked = new EventEmitter();
 
   authorities = Authority;
 
@@ -52,6 +66,11 @@ export class UserMenuComponent implements OnInit, OnDestroy {
     map((user) => this.getUserDisplayName(user))
   );
 
+  userEmail$ = this.store.pipe(
+    select(selectUserDetails),
+    map((user) => user?.email)
+  );
+
   constructor(private store: Store<AppState>,
               private router: Router,
               private authService: AuthService) {
@@ -104,10 +123,12 @@ export class UserMenuComponent implements OnInit, OnDestroy {
   }
 
   openAccount(): void {
+    this.menuClicked.emit();
     this.router.navigate(['account']);
   }
 
   logout(): void {
+    this.menuClicked.emit();
     this.authService.logout();
   }
 
diff --git a/ui-ngx/src/app/shared/import-export/export-resource-dialog.component.html b/ui-ngx/src/app/shared/import-export/export-resource-dialog.component.html
index 7bd900f1cf..f13bb50fa2 100644
--- a/ui-ngx/src/app/shared/import-export/export-resource-dialog.component.html
+++ b/ui-ngx/src/app/shared/import-export/export-resource-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2>{{ title | translate }}</h2>
   <span class="flex-1"></span>
   <button mat-icon-button
diff --git a/ui-ngx/src/app/shared/import-export/import-dialog-csv.component.html b/ui-ngx/src/app/shared/import-export/import-dialog-csv.component.html
index bf0f0401c8..72f5d94a56 100644
--- a/ui-ngx/src/app/shared/import-export/import-dialog-csv.component.html
+++ b/ui-ngx/src/app/shared/import-export/import-dialog-csv.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form>
-  <mat-toolbar class="flex flex-row" color="primary">
+  <mat-toolbar class="tb-dialog-header flex flex-row">
     <h2 translate>{{ importTitle }}</h2>
     <span class="flex-1"></span>
     <div [tb-help]="'entitiesImport'"></div>
diff --git a/ui-ngx/src/app/shared/import-export/import-dialog.component.html b/ui-ngx/src/app/shared/import-export/import-dialog.component.html
index ec6ed1ff6b..12f20e27b7 100644
--- a/ui-ngx/src/app/shared/import-export/import-dialog.component.html
+++ b/ui-ngx/src/app/shared/import-export/import-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="importFormGroup" (ngSubmit)="importFromJson()" style="width: 500px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>{{ importTitle }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/shared/models/dashboard.models.ts b/ui-ngx/src/app/shared/models/dashboard.models.ts
index 5bd00f2549..aa2481f035 100644
--- a/ui-ngx/src/app/shared/models/dashboard.models.ts
+++ b/ui-ngx/src/app/shared/models/dashboard.models.ts
@@ -199,6 +199,7 @@ export interface Dashboard extends DashboardInfo {
 
 export interface HomeDashboard extends Dashboard {
   hideDashboardToolbar: boolean;
+  isSystemDashboard?: boolean;
 }
 
 export interface HomeDashboardInfo {
diff --git a/ui-ngx/src/app/shared/models/icon.models.ts b/ui-ngx/src/app/shared/models/icon.models.ts
index 263d42d307..e08abb75c5 100644
--- a/ui-ngx/src/app/shared/models/icon.models.ts
+++ b/ui-ngx/src/app/shared/models/icon.models.ts
@@ -81,7 +81,9 @@ export const svgIconsUrl: { [key: string]: string } = {
   windows: '/assets/windows.svg',
   macos: '/assets/macos.svg',
   linux: '/assets/linux.svg',
-  docker: '/assets/docker.svg'
+  docker: '/assets/docker.svg',
+  'sidebar-close': '/assets/icons/sidebar-close.svg',
+  'sidebar-open': '/assets/icons/sidebar-open.svg'
 };
 
 const svgIconNamespaces: string[] = ['mdi'];
diff --git a/ui-ngx/src/app/shared/models/user-settings.models.ts b/ui-ngx/src/app/shared/models/user-settings.models.ts
index a702e9921b..553c426ba6 100644
--- a/ui-ngx/src/app/shared/models/user-settings.models.ts
+++ b/ui-ngx/src/app/shared/models/user-settings.models.ts
@@ -16,6 +16,7 @@
 
 export interface UserSettings {
   openedMenuSections?: string[];
+  menuCollapsed?: boolean;
   notDisplayConnectivityAfterAddDevice?: boolean;
   notDisplayInstructionsAfterAddEdge?: boolean;
   notDisplayConfigurationAfterAddMobileBundle?: boolean;
diff --git a/ui-ngx/src/assets/icons/sidebar-close.svg b/ui-ngx/src/assets/icons/sidebar-close.svg
new file mode 100644
index 0000000000..46f0566806
--- /dev/null
+++ b/ui-ngx/src/assets/icons/sidebar-close.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path d="M14.25 2.25C15.0784 2.25 15.75 2.92157 15.75 3.75V14.25C15.75 15.0267 15.1597 15.6654 14.4033 15.7422L14.25 15.75H3.75L3.59668 15.7422C2.89069 15.6705 2.32949 15.1093 2.25781 14.4033L2.25 14.25V3.75C2.25 2.92157 2.92157 2.25 3.75 2.25H14.25ZM3.75 14.25H10.5V3.75H3.75V14.25ZM12 14.25H14.25V3.75H12V14.25Z"/>
+  <path d="M9.02271 6.77295L6.79541 9.00024L9.02271 11.2275L8.22729 12.0229L5.20459 9.00024L8.22729 5.97754L9.02271 6.77295Z"/>
+</svg>
diff --git a/ui-ngx/src/assets/icons/sidebar-open.svg b/ui-ngx/src/assets/icons/sidebar-open.svg
new file mode 100644
index 0000000000..562cd4a3b7
--- /dev/null
+++ b/ui-ngx/src/assets/icons/sidebar-open.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path d="M3.75 2.25C2.92157 2.25 2.25 2.92157 2.25 3.75V14.25C2.25 15.0267 2.84028 15.6654 3.59668 15.7422L3.75 15.75H14.25L14.4033 15.7422C15.1093 15.6705 15.6705 15.1093 15.7422 14.4033L15.75 14.25V3.75C15.75 2.92157 15.0784 2.25 14.25 2.25H3.75ZM14.25 14.25H7.5V3.75H14.25V14.25ZM6 14.25H3.75V3.75H6V14.25Z"/>
+  <path d="M8.97729 6.77197L11.2046 8.99927L8.97729 11.2266L9.77271 12.022L12.7954 8.99927L9.77271 5.97656L8.97729 6.77197Z"/>
+</svg>
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index 5319ebf309..1007fa3eea 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -100,6 +100,7 @@
     },
     "admin": {
         "settings": "Settings",
+        "platform": "Platform",
         "general": "General",
         "general-settings": "General Settings",
         "home-settings": "Home Settings",
@@ -1732,6 +1733,7 @@
     "customer": {
         "customer": "Customer",
         "customers": "Customers",
+        "customers-and-users": "Customers & users",
         "management": "Customer management",
         "dashboard": "Customer Dashboard",
         "dashboards": "Customer Dashboards",
@@ -3024,6 +3026,8 @@
     "entity": {
         "entity": "Entity",
         "entities": "Entities",
+        "devices-and-assets": "Devices & assets",
+        "data-processing": "Data processing",
         "entities-count": "Entities count",
         "alarms-count": "Alarms count",
         "aliases": "Entity aliases",
@@ -3705,6 +3709,7 @@
         "browse-files": "Browse files"
     },
     "image": {
+        "images": "Images",
         "gallery": "Image gallery",
         "search": "Search image",
         "selected-images": "{ count, plural, =1 {1 image} other {# images} } selected",
@@ -4668,6 +4673,7 @@
         "min-version": "Min version",
         "invalid-version-pattern": "Invalid version format. Please use the format: major.minor.patch (e.g., 1.0.0).",
         "mobile-center": "Mobile center",
+        "mobile-apps": "Mobile apps",
         "mobile-package": "Application package",
         "mobile-package-max-length": "Application package should be less than 256",
         "mobile-package-required": "Application package is required.",
@@ -4766,6 +4772,9 @@
             "getting-started": "Getting Started"
         }
     },
+    "monitor": {
+        "monitor": "Monitor"
+    },
     "notification": {
         "action-button": "Action button",
         "action-type": "Action type",
@@ -4899,6 +4908,7 @@
         "create-new-template": "Create a new one!",
         "not-found-slack-recipient": "Slack recipient not found",
         "notification": "Notification",
+        "notifications": "Notifications",
         "notification-center": "Notification center",
         "notification-tap-action": "Notification tap action",
         "notification-tap-action-hint": "If not enabled, the default alarm dashboard will be used",
@@ -5310,6 +5320,7 @@
         "resource-library-details": "Resource details",
         "resource-type": "Resource type",
         "resources-library": "Resources library",
+        "files": "Files",
         "search": "Search resources",
         "selected-resources": "{ count, plural, =1 {1 resource} other {# resources} } selected",
         "system": "System",
@@ -5352,6 +5363,8 @@
         "drop-resource-file-or": "Drag and drop a JavaScript file or",
         "javascript-library": "JavaScript library",
         "javascript-type": "JavaScript type",
+        "scripts": "Scripts",
+        "script-type": "Script type",
         "javascript-resource-details": "JavaScript resource details",
         "javascript-resource-is-in-use": "JavaScript resource is used by other entities",
         "javascript-resources-are-in-use": "JavaScript resources are used by other entities",
diff --git a/ui-ngx/src/assets/logo_title_black.svg b/ui-ngx/src/assets/logo_title_black.svg
new file mode 100644
index 0000000000..d41bf2df6c
--- /dev/null
+++ b/ui-ngx/src/assets/logo_title_black.svg
@@ -0,0 +1,37 @@
+<svg id="svg2" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="320" width="1543.4" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 1543.4268 320.00026">
+ <g id="layer1" transform="translate(0 -732.36)">
+  <g stroke-width="28">
+   <g id="g5204-0" transform="matrix(-.66287 .69913 -.66371 -.70001 863.46 1410.6)">
+    <g id="g5175-6" transform="translate(2.5254 3.0305)"></g>
+    <g id="g5175-9-8" transform="translate(41.25 -30.543)" stroke-width="28"></g>
+   </g>
+   <g id="g5175-6-35" transform="matrix(.57657 .52719 -.57729 .52786 584.63 346.6)"></g>
+   <g id="g5204-0-5-0" transform="matrix(.66287 -.69913 .66371 .70001 -543.46 380.47)">
+    <g id="g5175-6-35-9" transform="translate(2.5254 3.0305)"></g>
+    <g id="g5175-9-8-2-6" transform="translate(41.25 -30.543)" stroke-width="28"></g>
+   </g>
+  </g>
+  <g id="text4279" transform="translate(0 732.36)" fill="#305680">
+   <g id="g9352" fill="#000">
+    <g id="g4241" transform="translate(-.000061238 -732.36)">
+     <path id="path4278" style="color-rendering:auto;text-decoration-color:#000000;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;block-progression:tb;text-decoration-line:none;text-decoration-style:solid;image-rendering:auto;white-space:normal;text-indent:0;text-transform:none" d="m151.13 732.36c-28.363 0-54.915 7.9153-77.613 21.537-6.4723-5.2623-14.605-8.1915-23.067-8.1937a8.7661 8.7661 0 0 0 -0.0035 0c-20.154 0.00073-36.679 16.528-36.678 36.682a8.7661 8.7661 0 0 0 0 0.0106c0.0099 8.4147 2.9267 16.483 8.1033 22.927-13.83 22.83-21.87 49.58-21.87 78.17a8.7661 8.7661 0 1 0 17.531 0c0-24.702 6.7193-47.748 18.378-67.574 4.5663 1.9846 9.4727 3.1496 14.519 3.1573a8.7661 8.7661 0 0 0 0.01241 0c20.155 0.00062 36.683-16.527 36.682-36.682a8.7661 8.7661 0 0 0 0 -0.004c-0.0016-4.9994-1.1387-9.8628-3.0828-14.397 19.717-11.484 42.585-18.095 67.085-18.095a8.7661 8.7661 0 1 0 0 -17.531zm-100.69 30.88c5.9129 0.002 11.191 2.5121 14.836 7.0769a8.7661 8.7661 0 0 0 0.1826 0.21451c2.6715 3.3798 4.1326 7.5531 4.1341 11.863-0.0015 10.677-8.468 19.144-19.144 19.148-4.37-0.008-8.6011-1.5088-12-4.2546a8.7661 8.7661 0 0 0 -0.01241 -0.009c-4.514-3.6331-7.1358-9.0979-7.1442-14.893 0.0025-10.677 8.4701-19.144 19.148-19.146z"/>
+     <path id="path4486-0-9-6-9-7-6-5" style="color-rendering:auto;text-decoration-color:#000000;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;block-progression:tb;text-decoration-line:none;text-decoration-style:solid;image-rendering:auto;white-space:normal;text-indent:0;text-transform:none" d="m66.992 835.19c-1.492 1.5583-2.3663 3.7103-2.2576 6.0713 0.0962 2.0447 0.91322 4.0204 2.3372 5.5177 6.8051 6.8559 20.223 20.223 20.223 20.223l11.844-11.83s-12.973-12.961-20.176-20.171c-1.604-1.6325-3.7498-2.3141-6.012-2.3243-2.3583-0.0112-4.4673 0.95389-5.9592 2.5122zm32.147 19.983-36.639 36.639c-3.9751 3.976-3.9751 10.421 0 14.397l18.156 18.156 31.753 31.753 30.478 30.478c3.9758 3.9759 10.422 3.9763 14.398 0l24.791-24.791 37.914-37.914 36.639-36.639c3.9754-3.9764 3.975-10.422-0.00067-14.398l-18.63-18.63-31.75-31.76-30.01-30c-3.976-3.9751-10.421-3.9751-14.397 0l-24.79 24.79-37.91 37.91zm37.911-37.91s-12.973-12.961-20.176-20.171c-1.604-1.6325-3.7498-2.3141-6.012-2.3243-4.7166-0.0226-8.4341 3.8616-8.2169 8.5834 0.0962 2.0447 0.91322 4.0204 2.3372 5.5177 6.8051 6.8559 20.223 20.223 20.223 20.223l11.844-11.83zm69.193 5.2132s12.961-12.973 20.171-20.176c1.6325-1.604 2.3141-3.7498 2.3243-6.012 0.0225-4.7166-3.8616-8.4341-8.5834-8.2169-2.0447 0.0962-4.0204 0.91322-5.5177 2.3372-6.8559 6.8051-20.223 20.223-20.223 20.223l11.83 11.844zm31.753 31.753s12.961-12.973 20.171-20.176c1.6325-1.604 2.314-3.7498 2.3243-6.012 0.0225-4.7166-3.8616-8.4341-8.5834-8.2169-2.0447 0.0962-4.0204 0.91323-5.5177 2.3372-6.8559 6.8051-20.223 20.223-20.223 20.223l11.83 11.844zm-18.009 69.667s12.973 12.961 20.178 20.169c1.604 1.6324 3.7498 2.314 6.012 2.3243 4.7166 0.0225 8.4342-3.8615 8.2169-8.5834l-0.002 0.002c-0.0962-2.0447-0.91415-4.0214-2.3382-5.5186-6.8051-6.8559-20.222-20.222-20.222-20.222l-11.844 11.83zm-37.914 37.914s12.973 12.961 20.178 20.169c1.604 1.6324 3.7498 2.314 6.012 2.3242 4.7166 0.023 8.4342-3.8615 8.2169-8.5834h-0.002c-0.0962-2.0447-0.91323-4.0205-2.3372-5.5177-6.8051-6.8559-20.223-20.223-20.223-20.223l-11.844 11.83zm-69.667-5.6871s-12.961 12.973-20.169 20.178c-1.6324 1.604-2.314 3.7498-2.3243 6.012-0.02251 4.7166 3.8615 8.4342 8.5834 8.2169h-0.0019c2.0447-0.096 4.0204-0.9132 5.5177-2.3373 6.8561-6.8048 20.223-20.223 20.223-20.223l-11.82-11.84zm-31.743-31.74s-12.961 12.973-20.169 20.178c-1.6324 1.604-2.314 3.7498-2.3243 6.012-0.02251 4.7167 3.8615 8.4342 8.5834 8.2169h-0.0019c2.0447-0.0962 4.0204-0.91322 5.5177-2.3372 6.8561-6.8047 20.223-20.223 20.223-20.223l-11.829-11.85zm87.237-90.554c1.6794-1.7064 3.9669-2.6599 6.2971-2.626 1.6628 0.0237 3.253 0.55012 4.5625 1.5097l16.499 12.1c3.2009 2.297 4.1445 6.6589 2.2308 10.312-1.9137 3.6528-6.1234 5.5243-9.9506 4.4227l6.124 23.948c1.1128 4.3517-1.564 8.9677-5.9833 10.317l-44.642 13.631 8.2456 31.883c1.1728 4.3696-1.5017 9.0445-5.9546 10.407s-8.9756-1.1106-10.068-5.5047l-10.282-39.769c-1.1265-4.3556 1.5493-8.9847 5.9759-10.338l44.661-13.637-4.1219-16.118c-2.7634 3.0643-7.2335 3.8084-10.586 1.7615-3.3531-2.0469-4.6144-6.2896-2.9861-10.047l8.1169-19.454c0.43322-1.0376 1.0673-1.9888 1.8624-2.7973z" fill-rule="evenodd"/>
+     <path id="path4278-5" style="color-rendering:auto;text-decoration-color:#000000;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;block-progression:tb;text-decoration-line:none;text-decoration-style:solid;image-rendering:auto;white-space:normal;text-indent:0;text-transform:none" d="m168.87 1052.4c28.363 0 54.915-7.9155 77.614-21.538 6.4724 5.2624 14.605 8.1917 23.067 8.1939a8.7662 8.7662 0 0 0 0.004 0c20.155-0.0007 36.68-16.528 36.679-36.682a8.7662 8.7662 0 0 0 0 -0.011c-0.01-8.4149-2.9267-16.484-8.1034-22.927 13.825-22.82 21.866-49.572 21.866-78.162a8.7662 8.7662 0 1 0 -17.531 0c0 24.703-6.7194 47.749-18.378 67.575-4.5664-1.9846-9.4728-3.1496-14.519-3.1573a8.7662 8.7662 0 0 0 -0.0124 0c-20.155-0.00062-36.683 16.527-36.682 36.682 0.002 4.9994 1.1387 9.8628 3.0829 14.397-19.717 11.484-42.586 18.095-67.086 18.095a8.7662 8.7662 0 1 0 0 17.531zm100.69-30.875c-5.913 0-11.191-2.5122-14.836-7.0769a8.7662 8.7662 0 0 0 -0.18261 -0.2146c-2.6715-3.3799-4.1327-7.5531-4.1341-11.863 0.002-10.677 8.4681-19.144 19.144-19.148 4.37 0.008 8.6012 1.5088 12 4.2547a8.7662 8.7662 0 0 0 0.0124 0.009c4.5141 3.6332 7.1359 9.098 7.1443 14.893-0.003 10.677-8.4702 19.145-19.148 19.146z"/>
+    </g>
+    <g id="g8299">
+     <path id="path4345" d="m477.92 93.229h-48.56v134.68h-19.818v-134.68h-48.456v-16.394h116.83v16.394z"/>
+     <path id="path4347" d="m516.72 129.23q12.762-15.668 33.203-15.668 35.59 0 35.901 40.155v74.188h-19.196v-74.292q-0.10376-12.14-5.603-17.95-5.3955-5.8105-16.913-5.8105-9.3384 0-16.394 4.9805-7.0557 4.9805-10.999 13.074v79.999h-19.196v-159.38h19.196v60.699z"/>
+     <path id="path4349" d="m635.43 227.91h-19.196v-112.27h19.196v112.27zm-20.76-142.05q0-4.6692 2.8015-7.8857 2.9053-3.2166 8.5083-3.2166t8.5083 3.2166 2.9053 7.8857q0 4.6692-2.9053 7.782t-8.5083 3.1128-8.5083-3.1128q-2.8015-3.1128-2.8015-7.782z"/>
+     <path id="path4351" d="m684.19 115.64 0.62256 14.111q12.866-16.187 33.618-16.187 35.59 0 35.901 40.155v74.188h-19.196v-74.292q-0.10376-12.14-5.603-17.95-5.3955-5.8105-16.913-5.8105-9.3384 0-16.394 4.9805-7.0557 4.9805-10.999 13.074v79.999h-19.196v-112.27h18.158z"/>
+     <path id="path4353" d="m778.92 170.84q0-26.251 12.14-41.711 12.14-15.564 32.166-15.564 20.544 0 32.062 14.526l0.93384-12.451h17.535v109.57q0 21.79-12.97 34.344-12.866 12.555-34.656 12.555-12.14 0-23.761-5.188t-17.743-14.215l9.9609-11.517q12.347 15.253 30.194 15.253 14.008 0 21.79-7.8857 7.8857-7.8858 7.8857-22.205v-9.6497q-11.517 13.281-31.439 13.281-19.714 0-31.958-15.875-12.14-15.875-12.14-43.268zm19.299 2.179q0 18.988 7.782 29.883 7.782 10.791 21.79 10.791 18.158 0 26.666-16.498v-51.257q-8.8196-16.083-26.459-16.083-14.008 0-21.893 10.895-7.8858 10.895-7.8858 32.269z"/>
+     <path id="path4355" d="m967.98 198.13q0-7.782-5.9143-12.036-5.8106-4.3579-20.441-7.4707-14.526-3.1128-23.138-7.4707-8.5083-4.3579-12.659-10.376-4.0466-6.0181-4.0466-14.319 0-13.8 11.621-23.346 11.725-9.5459 29.883-9.5459 19.092 0 30.92 9.8572 11.932 9.8572 11.932 25.214h-19.299q0-7.8858-6.7444-13.593-6.6406-5.7068-16.809-5.7068-10.48 0-16.394 4.5654-5.9143 4.5654-5.9143 11.932 0 6.9519 5.4993 10.48 5.4993 3.5278 19.818 6.7444 14.423 3.2166 23.346 7.6782 8.9233 4.4617 13.177 10.791 4.3579 6.2256 4.3579 15.253 0 15.045-12.036 24.176-12.036 9.0271-31.232 9.0271-13.489 0-23.865-4.773t-16.29-13.281q-5.8105-8.6121-5.8105-18.573h19.196q0.5188 9.6497 7.6782 15.356 7.2632 5.603 19.092 5.603 10.895 0 17.432-4.3579 6.6406-4.4617 6.6406-11.829z"/>
+     <path id="path4357" d="m1015.2 227.91v-151.07h49.39q24.591 0 36.938 10.168 12.451 10.168 12.451 30.09 0 10.583-6.0181 18.781-6.018 8.0933-16.394 12.555 12.244 3.4241 19.299 13.074 7.1594 9.5459 7.1594 22.827 0 20.337-13.178 31.958t-37.25 11.621h-52.399zm19.922-70.66v54.37h32.892q13.904 0 21.893-7.1594 8.0933-7.2632 8.0933-19.922 0-27.289-29.675-27.289h-33.203zm0-15.979h30.09q13.074 0 20.856-6.5369 7.8858-6.5369 7.8858-17.743 0-12.451-7.2632-18.054-7.2632-5.7068-22.101-5.7068h-29.468v48.041z"/>
+     <path id="path4359" d="m1139.5 170.74q0-16.498 6.4331-29.675 6.5369-13.177 18.054-20.337 11.621-7.1594 26.459-7.1594 22.931 0 37.042 15.875 14.215 15.875 14.215 42.23v1.3489q0 16.394-6.3294 29.468-6.2256 12.97-17.95 20.233-11.621 7.2632-26.77 7.2632-22.827 0-37.042-15.875-14.1-15.88-14.1-42.02v-1.3489zm19.299 2.2827q0 18.677 8.6121 29.987 8.7158 11.31 23.242 11.31 14.63 0 23.242-11.414 8.6121-11.517 8.6121-32.166 0-18.469-8.8196-29.883-8.7158-11.517-23.242-11.517-14.215 0-22.931 11.31-8.7158 11.31-8.7158 32.373z"/>
+     <path id="path4361" d="m1335.1 227.91q-1.6602-3.3203-2.6978-11.829-13.385 13.904-31.958 13.904-16.602 0-27.289-9.3384-10.584-9.4421-10.584-23.865 0-17.535 13.281-27.185 13.385-9.7534 37.561-9.7534h18.677v-8.8196q0-10.065-6.018-15.979-6.0181-6.0181-17.743-6.0181-10.272 0-17.224 5.188-6.9519 5.188-6.9519 12.555h-19.299q0-8.4045 5.9143-16.187 6.0181-7.8858 16.186-12.451 10.272-4.5654 22.516-4.5654 19.403 0 30.402 9.7534 10.998 9.6497 11.414 26.666v51.672q0 15.46 3.9429 24.591v1.6602h-20.129zm-31.854-14.63q9.0271 0 17.12-4.6692 8.0932-4.6692 11.725-12.14v-23.035h-15.045q-35.278 0-35.278 20.648 0 9.0271 6.0181 14.111 6.0181 5.0842 15.46 5.0842z"/>
+     <path id="path4363" d="m1435.8 132.87q-4.3579-0.72632-9.4422-0.72632-18.884 0-25.629 16.083v79.688h-19.196v-112.27h18.677l0.3113 12.97q9.4421-15.045 26.77-15.045 5.603 0 8.5083 1.4526v17.847z"/>
+     <path id="path4365" d="m1448.7 170.84q0-25.836 12.244-41.504 12.244-15.771 32.062-15.771 19.714 0 31.232 13.489v-58.521h19.196v159.38h-17.639l-0.9339-12.036q-11.517 14.111-32.062 14.111-19.507 0-31.854-15.979-12.244-15.979-12.244-41.711v-1.4526zm19.196 2.179q0 19.092 7.8858 29.883 7.8857 10.791 21.79 10.791 18.262 0 26.666-16.394v-51.569q-8.6121-15.875-26.459-15.875-14.111 0-21.997 10.895-7.8858 10.895-7.8858 32.269z"/>
+    </g>
+   </g>
+  </g>
+ </g>
+</svg>
diff --git a/ui-ngx/src/assets/small_logo_title_black.svg b/ui-ngx/src/assets/small_logo_title_black.svg
new file mode 100644
index 0000000000..dcbe6a365c
--- /dev/null
+++ b/ui-ngx/src/assets/small_logo_title_black.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+  <path d="M8.5011 0C6.90566 0 5.41209 0.445179 4.13531 1.2113C3.77124 0.915337 3.31377 0.750592 2.83778 0.750468C2.83771 0.750468 2.83765 0.750468 2.83758 0.750468C1.70391 0.750509 0.774364 1.68005 0.77442 2.81357C0.77442 2.81377 0.77442 2.81397 0.77442 2.81417C0.774977 3.28743 0.939049 3.74122 1.23024 4.10365C0.452289 5.38768 3.37531e-05 6.89218 3.37531e-05 8.50016C-0.000729547 8.56539 0.0114602 8.63012 0.0358966 8.6906C0.0603331 8.75108 0.0965305 8.80612 0.142392 8.85251C0.188253 8.89891 0.242866 8.93574 0.303067 8.96088C0.363267 8.98602 0.427859 8.99896 0.493099 8.99896C0.558339 8.99896 0.622931 8.98602 0.683132 8.96088C0.743333 8.93574 0.797946 8.89891 0.843807 8.85251C0.889668 8.80612 0.925865 8.75108 0.950302 8.6906C0.974738 8.63012 0.986928 8.56539 0.986165 8.50016C0.986165 7.11085 1.36413 5.81467 2.01994 4.6996C2.2768 4.81122 2.55279 4.87674 2.83664 4.87718C2.83688 4.87718 2.83711 4.87718 2.83734 4.87718C3.97107 4.87721 4.90078 3.94765 4.90073 2.81407C4.90073 2.814 4.90073 2.81392 4.90073 2.81385C4.90064 2.53267 4.83668 2.25914 4.72732 2.00412C5.83641 1.35822 7.12275 0.986401 8.5009 0.986401C8.56613 0.987164 8.63087 0.974975 8.69136 0.950542C8.75185 0.926109 8.80689 0.889918 8.85329 0.844063C8.89969 0.798208 8.93653 0.743601 8.96168 0.683408C8.98682 0.623216 8.99976 0.558634 8.99976 0.493403C8.99976 0.428172 8.98682 0.36359 8.96168 0.303398C8.93653 0.243205 8.89969 0.188597 8.85329 0.142743C8.80689 0.0968878 8.75185 0.0606972 8.69136 0.0362641C8.63087 0.011831 8.56613 -0.000358125 8.5009 0.00040507L8.5011 0ZM2.83722 1.73678C3.16982 1.7369 3.46672 1.87807 3.67175 2.13481C3.67511 2.13889 3.67854 2.14291 3.68202 2.14688C3.8323 2.33697 3.91448 2.57168 3.91457 2.81408C3.91448 3.41459 3.43824 3.8908 2.83771 3.89103C2.59189 3.89057 2.35389 3.80616 2.1627 3.65173C2.16247 3.65156 2.16223 3.6514 2.162 3.65123C1.90808 3.44689 1.76061 3.13953 1.76013 2.8136C1.76027 2.21309 2.23658 1.7369 2.83722 1.73678Z" fill="black" fill-opacity="0.87"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.76812 5.78359C3.68419 5.87123 3.63501 5.99226 3.64112 6.12505C3.64654 6.24005 3.69249 6.35117 3.77259 6.43539C4.15539 6.82098 4.91015 7.57279 4.91015 7.57279L5.57639 6.90743C5.57639 6.90743 4.84664 6.17847 4.44147 5.77295C4.35124 5.68114 4.23054 5.6428 4.10329 5.64223C3.97064 5.6416 3.852 5.69588 3.76808 5.78352L3.76812 5.78359ZM5.57641 6.90732L3.51544 8.96806C3.29184 9.19169 3.29184 9.55417 3.51544 9.77779L8.03726 14.299C8.2609 14.5226 8.62351 14.5226 8.84716 14.299L14.4353 8.7116C14.6589 8.48795 14.6589 8.12543 14.4353 7.90181L13.3873 6.854L11.6014 5.06772L9.9133 3.38044C9.68964 3.15686 9.32711 3.15686 9.10346 3.38044L5.57654 6.90687L5.57641 6.90732ZM7.70893 4.77515C7.70893 4.77515 6.97919 4.04618 6.57401 3.64067C6.48379 3.54886 6.36308 3.51052 6.23583 3.50995C5.97052 3.50868 5.76141 3.72713 5.77363 3.9927C5.77904 4.1077 5.825 4.21882 5.9051 4.30303C6.28789 4.68863 7.04265 5.44044 7.04265 5.44044L7.70889 4.77508L7.70893 4.77515ZM11.6011 5.06836C11.6011 5.06836 12.3301 4.33871 12.7357 3.9336C12.8275 3.84338 12.8659 3.7227 12.8665 3.59547C12.8677 3.33019 12.6492 3.12111 12.3836 3.13332C12.2686 3.13873 12.1575 3.18469 12.0733 3.26477C11.6876 3.64751 10.9357 4.40217 10.9357 4.40217L11.6011 5.06831L11.6011 5.06836ZM13.3872 6.85424C13.3872 6.85424 14.1163 6.1246 14.5218 5.71948C14.6137 5.62927 14.652 5.50858 14.6526 5.38135C14.6539 5.11607 14.4354 4.90699 14.1698 4.9192C14.0547 4.92461 13.9436 4.97057 13.8594 5.05066C13.4737 5.4334 12.7218 6.18806 12.7218 6.18806L13.3873 6.8542L13.3872 6.85424ZM12.3742 10.7725C12.3742 10.7725 13.1039 11.5015 13.5092 11.9069C13.5994 11.9987 13.7201 12.037 13.8474 12.0376C14.1127 12.0389 14.3218 11.8204 14.3096 11.5549L14.3095 11.555C14.3041 11.44 14.2581 11.3288 14.178 11.2446C13.7952 10.859 13.0405 10.1072 13.0405 10.1072L12.3742 10.7726L12.3742 10.7725ZM10.2415 12.9049C10.2415 12.9049 10.9712 13.6339 11.3765 14.0393C11.4668 14.1311 11.5875 14.1694 11.7147 14.17C11.98 14.1713 12.1891 13.9528 12.1769 13.6872H12.1768C12.1714 13.5722 12.1254 13.4611 12.0453 13.3769C11.6625 12.9913 10.9078 12.2395 10.9078 12.2395L10.2415 12.9049L10.2415 12.9049ZM6.32269 12.5851C6.32269 12.5851 5.59362 13.3147 5.18817 13.7199C5.09634 13.8101 5.058 13.9308 5.05742 14.0581C5.05616 14.3233 5.27463 14.5324 5.54024 14.5202H5.54014C5.65515 14.5148 5.76629 14.4688 5.85051 14.3887C6.23617 14.006 6.98807 13.2513 6.98807 13.2513L6.32319 12.5854L6.32269 12.5851ZM4.53712 10.7999C4.53712 10.7999 3.80805 11.5295 3.4026 11.9348C3.31078 12.025 3.27244 12.1457 3.27186 12.2729C3.27059 12.5382 3.48907 12.7473 3.75468 12.735H3.75457C3.86959 12.7296 3.98072 12.6837 4.06495 12.6036C4.45061 12.2209 5.2025 11.4662 5.2025 11.4662L4.53711 10.7997L4.53712 10.7999ZM9.44426 5.70688C9.53873 5.6109 9.6674 5.55727 9.79848 5.55918C9.89201 5.56051 9.98146 5.59012 10.0551 5.64409L10.9832 6.32463C11.1633 6.45382 11.2163 6.69915 11.1087 6.90461C11.001 7.11006 10.7642 7.21531 10.549 7.15336L10.8934 8.50026C10.956 8.74501 10.8055 9.00463 10.5569 9.08052L8.04573 9.84717L8.50955 11.6404C8.57552 11.8861 8.42508 12.1491 8.1746 12.2257C7.92412 12.3023 7.66971 12.1632 7.60827 11.9161L7.0299 9.67936C6.96653 9.43438 7.11705 9.17403 7.36605 9.09792L9.87826 8.33093L9.6464 7.42441C9.49095 7.59675 9.23951 7.6386 9.05093 7.52348C8.86231 7.40836 8.79136 7.16973 8.88296 6.95841L9.33954 5.86426C9.36391 5.8059 9.39957 5.7524 9.4443 5.70693L9.44426 5.70688Z" fill="black" fill-opacity="0.87"/>
+  <path d="M9.49903 18C11.0945 18 12.588 17.5548 13.8649 16.7887C14.2289 17.0846 14.6864 17.2494 15.1624 17.2495C15.1625 17.2495 15.1626 17.2495 15.1626 17.2495C16.2964 17.2495 17.2259 16.3199 17.2258 15.1864C17.2258 15.1862 17.2258 15.186 17.2258 15.1858C17.2253 14.7125 17.0612 14.2587 16.77 13.8963C17.5477 12.6128 18 11.1082 18 9.50025C18.0008 9.43498 17.9887 9.3702 17.9643 9.30966C17.9399 9.24913 17.9037 9.19404 17.8578 9.14759C17.8119 9.10115 17.7573 9.06427 17.6971 9.0391C17.6368 9.01394 17.5722 9.00098 17.5069 9.00098C17.4417 9.00098 17.377 9.01394 17.3168 9.0391C17.2566 9.06427 17.2019 9.10115 17.1561 9.14759C17.1102 9.19404 17.074 9.24913 17.0496 9.30966C17.0252 9.3702 17.013 9.43498 17.0139 9.50025C17.0139 10.8896 16.6359 12.1858 15.9801 13.3009C15.7232 13.1892 15.4472 13.1237 15.1634 13.1233C15.1632 13.1233 15.1629 13.1233 15.1627 13.1233C14.029 13.1233 13.0993 14.0528 13.0993 15.1864C13.0994 15.4676 13.1634 15.7411 13.2727 15.9961C12.1636 16.642 10.8772 17.0138 9.49909 17.0138C9.43382 17.013 9.36903 17.0252 9.30848 17.0496C9.24794 17.074 9.19284 17.1101 9.14639 17.156C9.09994 17.2019 9.06306 17.2565 9.03789 17.3167C9.01272 17.3769 8.99976 17.4416 8.99976 17.5068C8.99976 17.5721 9.01272 17.6367 9.03789 17.697C9.06306 17.7572 9.09994 17.8118 9.14639 17.8577C9.19284 17.9035 9.24794 17.9397 9.30848 17.9641C9.36903 17.9885 9.43382 18.0007 9.49909 17.9998L9.49903 18ZM15.1629 16.2635C14.8303 16.2635 14.5334 16.1222 14.3284 15.8655C14.325 15.8614 14.3216 15.8574 14.3181 15.8534C14.1678 15.6633 14.0856 15.4286 14.0856 15.1862C14.0857 14.5857 14.5619 14.1095 15.1624 14.1093C15.4082 14.1097 15.6462 14.1941 15.8374 14.3486C15.8377 14.3487 15.8379 14.3489 15.8381 14.3491C16.092 14.5534 16.2395 14.8608 16.24 15.1867C16.2398 15.7872 15.7635 16.2635 15.1629 16.2635Z" fill="black" fill-opacity="0.87"/>
+</svg>
diff --git a/ui-ngx/src/scss/constants.scss b/ui-ngx/src/scss/constants.scss
index 914e20e4ee..5d197c2532 100644
--- a/ui-ngx/src/scss/constants.scss
+++ b/ui-ngx/src/scss/constants.scss
@@ -40,3 +40,5 @@ $tb-hue3-color: #a7c1de;
 
 $tb-dark-primary-color: #9fa8da;
 $tb-primary-color-light: #7986cb;
+
+$sidenav-anim-timing: 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
diff --git a/ui-ngx/src/styles.scss b/ui-ngx/src/styles.scss
index acd141bcb1..8d22d77393 100644
--- a/ui-ngx/src/styles.scss
+++ b/ui-ngx/src/styles.scss
@@ -166,6 +166,10 @@ section.tb-footer-buttons {
 .tb-details-buttons {
   button {
     margin: 6px 8px;
+    &.mat-mdc-outlined-button:not(:disabled) {
+      --mat-button-outlined-outline-color: inherit;
+      border-color: inherit;
+    }
   }
 }
 
@@ -1074,6 +1078,10 @@ pre.tb-highlight {
     }
   }
 
+  .tb-dialog-header {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  }
+
   .tb-dialog {
     .mat-mdc-dialog-container {
       padding: 0;
diff --git a/ui-ngx/src/theme.scss b/ui-ngx/src/theme.scss
index cb6e47a637..820acbc9de 100644
--- a/ui-ngx/src/theme.scss
+++ b/ui-ngx/src/theme.scss
@@ -134,8 +134,8 @@ $tb-dark-theme: map_merge($tb-dark-theme, (_mat-system: $tb-dark-theme-system));
 
   mat-fab-toolbar {
     .mat-fab-toolbar-background {
-      background: mat.m2-get-color-from-palette($background, app-bar);
-      color: mat.m2-get-color-from-palette($foreground, text);
+      background: var(--mat-toolbar-container-background-color, var(--mat-sys-surface));
+      color: var(--mat-toolbar-container-text-color, var(--mat-sys-on-surface));
     }
     &.mat-primary {
       .mat-fab-toolbar-background {