From 6d93d011c9f6e86c1bbcec071daf5e3cb698cec1 Mon Sep 17 00:00:00 2001
From: DominikIwanek <141320833+DominikIwanek@users.noreply.github.com>
Date: Fri, 9 Feb 2024 08:22:01 +0100
Subject: [PATCH] [ACS-6140] - Remove references to internal Angular Material
 CSS classes (#9271)

---
 .../aspect-list-dialog.component.html         |   2 +-
 .../aspect-list-dialog.component.scss         |  16 +-
 .../aspect-list/aspect-list.component.html    |  27 ++--
 .../aspect-list/aspect-list.component.scss    |  32 ++--
 .../lib/breadcrumb/breadcrumb.component.scss  |  16 --
 .../dropdown-breadcrumb.component.html        |   7 +-
 .../dropdown-breadcrumb.component.scss        |  10 +-
 .../categories-management.component.html      |  13 +-
 .../categories-management.component.scss      |  18 +--
 .../categories-management.component.spec.ts   |  18 +--
 .../categories-management.component.ts        |   7 +-
 .../content-metadata-card.component.html      |   6 +-
 .../content-metadata-card.component.scss      |   6 +-
 .../content-metadata.component.html           |  16 +-
 .../content-metadata.component.scss           |  23 +--
 ...content-node-selector-panel.component.scss |  24 ++-
 .../content-node-selector.component.html      | 147 +++++++++---------
 .../content-node-selector.component.scss      |  35 +----
 .../content-node-selector.component.spec.ts   |   6 +-
 .../content-node-share.dialog.html            |   2 +-
 .../content-node-share.dialog.scss            |  41 +----
 .../content-type-dialog.component.scss        |   8 +-
 .../content-user-info.component.html          | 118 +++++++-------
 .../content-user-info.component.scss          |  27 +---
 .../content-user-info.component.spec.ts       |   8 -
 .../src/lib/dialogs/confirm.dialog.html       |   6 +-
 .../src/lib/dialogs/confirm.dialog.scss       |   6 +-
 .../download-zip/download-zip.dialog.html     |   2 +-
 .../download-zip/download-zip.dialog.scss     |   2 +-
 .../src/lib/dialogs/folder.dialog.html        |   2 +-
 .../src/lib/dialogs/folder.dialog.scss        |  21 +--
 .../lib/dialogs/library/library.dialog.html   |  11 +-
 .../lib/dialogs/library/library.dialog.scss   |  11 +-
 .../new-version-uploader.dialog.html          |   6 +-
 .../new-version-uploader.dialog.scss          |  69 ++++----
 .../add-permission-dialog.component.html      |  10 +-
 .../add-permission-dialog.component.scss      |  13 +-
 .../permission-list.component.scss            |   4 -
 .../user-icon-column.component.scss           |   2 +-
 .../search-check-list.component.html          |   3 +-
 .../search-check-list.component.scss          |  10 +-
 ...rch-chip-autocomplete-input.component.html |   7 +-
 ...rch-chip-autocomplete-input.component.scss |  33 ++--
 .../search-chip-list.component.html           |   4 +-
 .../search-chip-list.component.scss           |   4 +-
 .../search-facet-field.component.html         |   9 +-
 .../search-facet-field.component.scss         |  35 +----
 .../search-facet-chip-tabbed.component.scss   |   6 -
 .../search-facet-chip.component.html          |   2 +-
 .../search-filter-chips.component.scss        |  40 ++---
 .../search-widget-chip.component.html         |   4 +-
 .../search-filter-container.component.html    |   2 +-
 .../search-filter-container.component.scss    |  24 +--
 .../search-filter-tabbed.component.html       |   6 +-
 .../search-filter-tabbed.component.scss       |  19 +--
 .../search-filter-tabbed.component.ts         |   6 +
 .../search-filter.component.html              |   6 +-
 .../search-filter.component.scss              |   5 +-
 .../search-form/search-form.component.html    |   6 +-
 .../search-form/search-form.component.scss    |  16 +-
 .../search-properties.component.scss          |   1 +
 .../search-radio/search-radio.component.html  |   3 +-
 .../search-radio/search-radio.component.scss  |  16 +-
 .../search-slider.component.html              |   1 +
 .../search-slider.component.scss              |   4 +-
 .../search-sorting-picker.component.scss      |   2 +-
 .../search-text/search-text.component.html    |   2 +-
 .../search-text/search-text.component.scss    |   2 +-
 .../sites-dropdown.component.html             |   5 +-
 .../sites-dropdown.component.scss             |   7 -
 .../site-dropdown/sites-dropdown.component.ts |   1 -
 .../src/lib/social/rating.component.scss      |   4 -
 .../src/lib/tag/tag-list.component.html       |   2 +-
 .../src/lib/tag/tag-list.component.scss       |   6 +-
 .../tags-creator/tags-creator.component.html  |  12 +-
 .../tags-creator/tags-creator.component.scss  |  33 ++--
 .../tags-creator.component.spec.ts            |  52 +------
 .../tags-creator/tags-creator.component.ts    |   6 +-
 .../components/tree-view.component.html       |   4 +-
 .../components/tree-view.component.scss       |   2 +-
 .../version-list.component.html               |  10 +-
 .../version-list.component.scss               |   2 +-
 .../version-manager.component.scss            |   7 +-
 .../about-license-list.component.html         |   4 +-
 .../about-license-list.component.scss         |   2 +-
 .../components/form-renderer.component.scss   |   1 +
 .../inplace-form-input.component.scss         |   1 +
 .../widgets/amount/amount.widget.scss         |   1 +
 .../widgets/date-time/date-time.widget.scss   |   1 +
 .../multiline-text/multiline-text.widget.scss |   2 +-
 .../widgets/number/number.widget.scss         |   2 +-
 .../components/widgets/text/text.widget.scss  |   1 +
 .../identity-user-info.component.html         |  47 +++---
 .../identity-user-info.component.scss         |  27 +---
 .../components/header/header.component.html   |   4 +-
 .../components/header/header.component.scss   |   8 +-
 .../layout-container.component.html           |   3 +-
 .../layout-container.component.scss           |   5 +-
 .../sidebar-action-menu.component.scss        |  17 +-
 .../sidenav-layout.component.scss             |   3 +-
 .../login-dialog-panel.component.scss         |   2 +-
 .../components/login-dialog.component.html    |   4 +-
 .../lib/login/components/login.component.html |  10 +-
 .../lib/login/components/login.component.scss |  24 ++-
 .../sorting-picker.component.html             |   2 +-
 .../src/lib/toolbar/toolbar.component.html    |   2 +-
 .../src/lib/toolbar/toolbar.component.scss    |  14 +-
 .../analytics-report-list.component.scss      |  17 +-
 ...analytics-report-parameters.component.html |   2 +-
 ...analytics-report-parameters.component.scss |   6 +-
 .../widgets/duration/duration.widget.html     |   2 +-
 .../widgets/duration/duration.widget.scss     |   2 +-
 .../widgets/number/number.widget.scss         |   2 +-
 .../app-details-cloud.component.scss          |   9 --
 .../components/app-list-cloud.component.html  |   2 +-
 .../components/app-list-cloud.component.scss  |   2 +-
 .../form/components/form-cloud.component.html |   2 +-
 .../attach-file-cloud-widget.component.html   |   3 +-
 .../attach-file-cloud-widget.component.scss   |  20 +--
 ...file-properties-table-cloud.component.html |  10 +-
 ...file-properties-table-cloud.component.scss |   8 +-
 .../attach-file/upload-cloud.widget.html      |   2 +-
 .../attach-file/upload-cloud.widget.scss      |   2 +-
 .../widgets/date/date-cloud.widget.scss       |   6 +-
 .../dropdown/dropdown-cloud.widget.scss       |   2 +-
 .../components/group-cloud.component.scss     |   4 -
 ...process-filter-dialog-cloud.component.html |   6 +-
 ...process-filter-dialog-cloud.component.scss |  21 +--
 .../start-process-cloud.component.html        |   2 +-
 .../start-process-cloud.component.scss        |   5 +-
 .../start-task-cloud.component.html           |   8 +-
 .../start-task-cloud.component.scss           |  12 +-
 .../task-filter-dialog-cloud.component.html   |   6 +-
 .../task-filter-dialog-cloud.component.scss   |  30 ++--
 .../components/task-form-cloud.component.scss |  18 +--
 .../task-form/task-form.component.html        |   5 +-
 stylelint-config.json                         |   2 +-
 137 files changed, 638 insertions(+), 996 deletions(-)
 delete mode 100644 lib/content-services/src/lib/site-dropdown/sites-dropdown.component.scss

diff --git a/lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.html b/lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.html
index c542891251..719608e810 100644
--- a/lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.html
+++ b/lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.html
@@ -13,7 +13,7 @@
     </adf-aspect-list>
 </mat-dialog-content>
 
-<mat-dialog-actions>
+<mat-dialog-actions class="adf-aspect-list-dialog">
     <div>
         <button mat-button (click)="aspectList.reset()" id="aspect-list-dialog-actions-reset"
             data-automation-id="aspect-list-dialog-actions-reset">{{
diff --git a/lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.scss b/lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.scss
index f24ec5004c..a606f7c179 100644
--- a/lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.scss
+++ b/lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.scss
@@ -19,21 +19,25 @@
     }
 
     &-aspect-list-dialog {
-        .mat-dialog-actions {
-            justify-content: space-between;
-        }
+        justify-content: space-between;
     }
 
     &-aspect-dialog-content {
         padding-top: 3px;
 
         .adf-aspect-property-table {
-            .mat-cell {
+            .adf-aspect-property-table-cell {
                 font-size: smaller;
             }
 
-            .mat-column-name {
-                width: 30%;
+            .adf-aspect-property-table-column {
+                &-name {
+                    width: 30%;
+                }
+
+                &-title {
+                    width: 50%;
+                }
             }
         }
     }
diff --git a/lib/content-services/src/lib/aspect-list/aspect-list.component.html b/lib/content-services/src/lib/aspect-list/aspect-list.component.html
index abb8cb0c51..8877ca36d3 100644
--- a/lib/content-services/src/lib/aspect-list/aspect-list.component.html
+++ b/lib/content-services/src/lib/aspect-list/aspect-list.component.html
@@ -1,8 +1,11 @@
 <div id="aspect-list-container" class="adf-aspect-list-container" *ngIf="aspects$ | async as aspects; else loading">
     <mat-accordion class="adf-accordion-aspect-list">
-        <mat-expansion-panel *ngFor="let aspect of aspects; let colIndex = index" [id]="'aspect-list-'+getId(aspect)">
-            <mat-expansion-panel-header [id]="'aspect-list-'+(getId(aspect))+'header'">
-                <mat-panel-title>
+        <mat-expansion-panel *ngFor="let aspect of aspects; let colIndex = index"
+                             [id]="'aspect-list-'+getId(aspect)"
+                             class="adf-accordion-aspect-list-expansion-panel">
+            <mat-expansion-panel-header class='adf-accordion-aspect-list-expansion-panel-header'
+                                        [id]="'aspect-list-'+(getId(aspect))+'header'">
+                <mat-panel-title class="adf-accordion-aspect-list-expansion-panel-header-title">
                     <mat-checkbox class="adf-aspect-list-check-button" [id]="'aspect-list-'+colIndex+'-check'"
                                   [checked]="nodeAspects?.includes(aspect?.entry?.id)"
                                   (click)="onCheckBoxClick($event)"
@@ -10,8 +13,10 @@
                                   <p class="adf-aspect-list-element-title">{{getTitle(aspect)}}</p>
                     </mat-checkbox>
                 </mat-panel-title>
-                <mat-panel-description [id]="'aspect-list-'+colIndex+'-title'"
-                                        [matTooltip]="getTitle(aspect)">
+                <mat-panel-description
+                    class="adf-accordion-aspect-list-expansion-panel-header-description"
+                    [id]="'aspect-list-'+colIndex+'-title'"
+                    [matTooltip]="getTitle(aspect)">
                     {{getTitle(aspect)}}
                 </mat-panel-description>
             </mat-expansion-panel-header>
@@ -19,16 +24,16 @@
 
             <table mat-table [dataSource]="aspect?.entry?.properties" *ngIf="aspect?.entry?.properties?.length > 0" class="adf-aspect-property-table" [id]="'aspect-list-'+colIndex+'-properties-table'">
                 <ng-container matColumnDef="name">
-                  <th mat-header-cell *matHeaderCellDef> {{'ADF-ASPECT-LIST.PROPERTY_NAME' | translate}} </th>
-                  <td mat-cell *matCellDef="let property"> {{property.id}} </td>
+                  <th class="adf-aspect-property-table-column-name" mat-header-cell *matHeaderCellDef> {{'ADF-ASPECT-LIST.PROPERTY_NAME' | translate}} </th>
+                  <td class="adf-aspect-property-table-column-name adf-aspect-property-table-cell" mat-cell *matCellDef="let property"> {{property.id}} </td>
                 </ng-container>
                 <ng-container matColumnDef="title">
-                  <th mat-header-cell *matHeaderCellDef> {{'ADF-ASPECT-LIST.DESCRIPTION' | translate}} </th>
-                  <td mat-cell *matCellDef="let property"> {{property.title}} </td>
+                  <th class="adf-aspect-property-table-column-title" mat-header-cell *matHeaderCellDef> {{'ADF-ASPECT-LIST.DESCRIPTION' | translate}} </th>
+                  <td class="adf-aspect-property-table-column-title adf-aspect-property-table-cell" mat-cell *matCellDef="let property"> {{property.title}} </td>
                 </ng-container>
                 <ng-container matColumnDef="dataType">
-                  <th mat-header-cell *matHeaderCellDef> {{'ADF-ASPECT-LIST.DATA_TYPE' | translate}} </th>
-                  <td mat-cell *matCellDef="let property"> {{property.dataType}} </td>
+                  <th class="adf-aspect-property-table-column-data-type" mat-header-cell *matHeaderCellDef> {{'ADF-ASPECT-LIST.DATA_TYPE' | translate}} </th>
+                  <td class="adf-aspect-property-table-column-data-type adf-aspect-property-table-cell" mat-cell *matCellDef="let property"> {{property.dataType}} </td>
                 </ng-container>
                 <tr mat-header-row *matHeaderRowDef="propertyColumns"></tr>
                 <tr mat-row *matRowDef="let row; columns: propertyColumns;"></tr>
diff --git a/lib/content-services/src/lib/aspect-list/aspect-list.component.scss b/lib/content-services/src/lib/aspect-list/aspect-list.component.scss
index c1ea703796..baaec844a4 100644
--- a/lib/content-services/src/lib/aspect-list/aspect-list.component.scss
+++ b/lib/content-services/src/lib/aspect-list/aspect-list.component.scss
@@ -23,20 +23,18 @@
             align-items: center;
         }
 
-        .adf-accordion-aspect-list {
-            .mat-expansion-panel-spacing {
-                margin: 0;
-            }
+        .adf-accordion-aspect-list-expansion-panel {
+            margin: 0;
 
-            .mat-expansion-panel-header {
+            &-header {
                 font-size: smaller;
             }
 
-            .mat-expansion-panel-header-title {
+            &-header-title {
                 flex: 1 1 0;
             }
 
-            .mat-expansion-panel-header-description {
+            &-header-description {
                 justify-content: flex-start;
                 align-items: center;
                 flex: 1 1 0;
@@ -50,17 +48,19 @@
     &-aspect-property-table {
         width: 100%;
 
-        .mat-column-name {
-            width: 15%;
-        }
+        .adf-aspect-property-table-column {
+            &-name {
+                width: 15%;
+            }
 
-        .mat-column-description {
-            width: 65%;
-        }
+            &-title {
+                width: 65%;
+            }
 
-        .mat-column-type {
-            width: 20%;
-            padding-left: 10px;
+            &-data-type {
+                width: 20%;
+                padding-left: 10px;
+            }
         }
     }
 }
diff --git a/lib/content-services/src/lib/breadcrumb/breadcrumb.component.scss b/lib/content-services/src/lib/breadcrumb/breadcrumb.component.scss
index 66134e3782..ad3ce8afc8 100644
--- a/lib/content-services/src/lib/breadcrumb/breadcrumb.component.scss
+++ b/lib/content-services/src/lib/breadcrumb/breadcrumb.component.scss
@@ -23,10 +23,6 @@
             height: 0;
             overflow: hidden;
             margin-top: 35px;
-
-            &.mat-select {
-                width: 0;
-            }
         }
 
         &-trigger {
@@ -100,18 +96,6 @@
             font-size: var(--theme-adf-icon-1-font-size);
         }
 
-        &.mat-primary {
-            color: var(--theme-primary-color);
-        }
-
-        &.mat-accent {
-            color: var(--theme-accent-color);
-        }
-
-        &.mat-warn {
-            color: var(--theme-warn-color);
-        }
-
         &-anchor {
             box-sizing: border-box;
             color: inherit;
diff --git a/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.html b/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.html
index 221e46693c..090be51bce 100644
--- a/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.html
+++ b/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.html
@@ -9,15 +9,16 @@
         (click)="open()"
         [attr.aria-label]="'BREADCRUMB.ARIA-LABEL.DROPDOWN' | translate"
         data-automation-id="dropdown-breadcrumb-trigger">
-        <mat-icon [class.adf-isRoot]="!hasPreviousNodes()">folder</mat-icon>
+        <mat-icon class="adf-dropdown-breadcrumb-icon" [class.adf-isRoot]="!hasPreviousNodes()">folder</mat-icon>
     </button>
 
-    <mat-icon class="adf-dropdown-breadcrumb-item-chevron">chevron_right</mat-icon>
+    <mat-icon class="adf-dropdown-breadcrumb-icon adf-dropdown-breadcrumb-item-chevron">chevron_right</mat-icon>
 
     <div class="adf-dropdown-breadcrumb-path">
         <mat-select
             #dropdown
             *ngIf="hasPreviousNodes()"
+            class="adf-dropdown-breadcrumb-path-select"
             tabindex="-1"
             data-automation-id="dropdown-breadcrumb-path"
             aria-labelledby="dropdown-breadcrumb-button">
@@ -26,7 +27,7 @@
                 *ngFor="let node of previousNodes;"
                 (click)="onRoutePathClick(node, $event)"
                 (onSelectionChange)="onRouteClick(node)"
-                class="adf-dropdown-breadcrumb-path-option"
+                class="adf-dropdown-breadcrumb-path-option adf-dropdown-breadcrumb-path-option-node"
                 data-automation-class="dropdown-breadcrumb-path-option"
                 [disabled]="readOnly">
                 {{ node.name | translate }}
diff --git a/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.scss b/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.scss
index 6ef1aee8d2..3e956e7cfa 100644
--- a/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.scss
+++ b/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.scss
@@ -12,7 +12,7 @@ $dropdown-horizontal-offset: 30px;
         overflow: hidden;
         margin-top: 10px;
 
-        .mat-icon {
+        &-icon {
             height: 35px;
         }
 
@@ -49,7 +49,7 @@ $dropdown-horizontal-offset: 30px;
         overflow: hidden;
         margin-top: 35px;
 
-        &.mat-select {
+        &-select {
             width: 0;
         }
     }
@@ -63,18 +63,18 @@ $dropdown-horizontal-offset: 30px;
         color: var(--adf-theme-foreground-text-color);
     }
 
-    &-dropdown-breadcrumb-path-option.mat-option {
+    &-dropdown-breadcrumb-path-option.adf-dropdown-breadcrumb-path-option-node {
         height: 28px;
         line-height: 28px;
         padding: 0 12px;
         font-size: var(--theme-caption-font-size);
     }
 
-    &-dropdown-breadcrumb-path-option.mat-option:first-child {
+    &-dropdown-breadcrumb-path-option.adf-dropdown-breadcrumb-path-option-node:first-child {
         padding-top: 4px;
     }
 
-    &-dropdown-breadcrumb-path-option.mat-option:last-child {
+    &-dropdown-breadcrumb-path-option.adf-dropdown-breadcrumb-path-option-node:last-child {
         padding-bottom: 4px;
     }
 }
diff --git a/lib/content-services/src/lib/category/categories-management/categories-management.component.html b/lib/content-services/src/lib/category/categories-management/categories-management.component.html
index 1f106b31a2..b7ae49cb2c 100644
--- a/lib/content-services/src/lib/category/categories-management/categories-management.component.html
+++ b/lib/content-services/src/lib/category/categories-management/categories-management.component.html
@@ -43,24 +43,25 @@
             <p class="adf-existing-categories-label">
                 {{ existingCategoriesMsg | translate }}
             </p>
-            <mat-selection-list
+            <mat-list
                 [disabled]="isCRUDMode"
-                (selectionChange)="addCategoryToAssign($event)">
-                <mat-list-option
+                class="adf-categories-management-list">
+                <mat-list-item
                     *ngFor="let category of existingCategories"
                     class="adf-category"
-                    [value]="category">
+                    (click)='addCategoryToAssign(category)'>
                     {{ category.name }}
-                </mat-list-option>
+                </mat-list-item>
                 <p *ngIf="!existingCategories?.length && !existingCategoriesLoading"
                    data-automation-id="no-categories-message">
                     {{ 'CATEGORIES_MANAGEMENT.NO_EXISTING_CATEGORIES' | translate }}
                 </p>
-            </mat-selection-list>
+            </mat-list>
         </ng-container>
         <mat-spinner
             *ngIf="existingCategoriesLoading"
             [diameter]="50"
+            class="adf-categories-management-spinner"
             [attr.aria-label]="'CATEGORIES_MANAGEMENT.LOADING' | translate">
         </mat-spinner>
     </div>
diff --git a/lib/content-services/src/lib/category/categories-management/categories-management.component.scss b/lib/content-services/src/lib/category/categories-management/categories-management.component.scss
index ffa69523b5..3d5865a8f9 100644
--- a/lib/content-services/src/lib/category/categories-management/categories-management.component.scss
+++ b/lib/content-services/src/lib/category/categories-management/categories-management.component.scss
@@ -37,26 +37,20 @@
 }
 
 .adf-categories-list {
-    .mat-list-base .mat-list-item,
-    .mat-list-base .mat-list-option {
+    .adf-categories-management-list .adf-category {
         display: flex;
         height: 100%;
         overflow-wrap: anywhere;
         padding: 5px 0;
         font-size: 14px;
 
-        &.mat-list-item-disabled {
-            background-color: inherit;
-            color: inherit;
+        &:hover {
+            cursor: pointer;
+            background: var(--adf-theme-mat-grey-color-a200);
         }
 
-        .mat-list-item-content,
-        .mat-list-item-content-reverse {
+        & span {
             padding: 0;
-
-            .mat-pseudo-checkbox {
-                display: none;
-            }
         }
     }
 
@@ -66,7 +60,7 @@
         margin-bottom: 2px;
     }
 
-    mat-spinner {
+    .adf-categories-management-spinner {
         margin: auto;
     }
 }
diff --git a/lib/content-services/src/lib/category/categories-management/categories-management.component.spec.ts b/lib/content-services/src/lib/category/categories-management/categories-management.component.spec.ts
index 25e41c8959..c088428718 100644
--- a/lib/content-services/src/lib/category/categories-management/categories-management.component.spec.ts
+++ b/lib/content-services/src/lib/category/categories-management/categories-management.component.spec.ts
@@ -19,7 +19,7 @@ import { Category, CategoryPaging, ResultNode, ResultSetPaging } from '@alfresco
 import { ComponentFixture, discardPeriodicTasks, fakeAsync, flush, TestBed, tick } from '@angular/core/testing';
 import { Validators } from '@angular/forms';
 import { MatError } from '@angular/material/form-field';
-import { MatListOption, MatSelectionList } from '@angular/material/list';
+import { MatList } from '@angular/material/list';
 import { By } from '@angular/platform-browser';
 import { TranslateModule } from '@ngx-translate/core';
 import { of, Subject } from 'rxjs';
@@ -91,8 +91,8 @@ describe('CategoriesManagementComponent', () => {
      *
      * @returns list of material option element
      */
-    function getExistingCategoriesList(): MatListOption[] {
-        return fixture.debugElement.queryAll(By.directive(MatListOption))?.map((debugElem) => debugElem.componentInstance);
+    function getExistingCategoriesList(): HTMLElement[] {
+        return fixture.debugElement.queryAll(By.css('.adf-category'))?.map((debugElem) => debugElem.nativeElement);
     }
 
     /**
@@ -129,8 +129,8 @@ describe('CategoriesManagementComponent', () => {
      *
      * @returns material selection list
      */
-    function getSelectionList(): MatSelectionList {
-        return fixture.debugElement.query(By.directive(MatSelectionList)).componentInstance;
+    function getSelectionList(): MatList {
+        return fixture.debugElement.query(By.directive(MatList)).componentInstance;
     }
 
     /**
@@ -159,7 +159,7 @@ describe('CategoriesManagementComponent', () => {
      * @returns native element
      */
     function getCreateCategoryLabel(): HTMLSpanElement {
-        return fixture.debugElement.query(By.css('.adf-existing-categories-panel span'))?.nativeElement;
+        return fixture.debugElement.query(By.css('.adf-create-category-label'))?.nativeElement;
     }
 
     /**
@@ -323,7 +323,7 @@ describe('CategoriesManagementComponent', () => {
 
         it('should not display create category label', fakeAsync(() => {
             typeCategory('test');
-
+            fixture.detectChanges();
             expect(getCreateCategoryLabel()).toBeUndefined();
         }));
 
@@ -338,7 +338,7 @@ describe('CategoriesManagementComponent', () => {
             typeCategory('test');
             const options = getExistingCategoriesList();
             // eslint-disable-next-line no-underscore-dangle
-            options[0]._handleClick();
+            options[0].click();
 
             expect(component.categories.length).toBe(3);
             expect(component.categories[2].name).toBe('testCat');
@@ -352,7 +352,7 @@ describe('CategoriesManagementComponent', () => {
             typeCategory('test');
             const options = getExistingCategoriesList();
             // eslint-disable-next-line no-underscore-dangle
-            options[0]._handleClick();
+            options[0].click();
             fixture.detectChanges();
 
             const categoriesChangeSpy = spyOn(component.categoriesChange, 'emit').and.callThrough();
diff --git a/lib/content-services/src/lib/category/categories-management/categories-management.component.ts b/lib/content-services/src/lib/category/categories-management/categories-management.component.ts
index e5fd1d24b5..26af4900c5 100644
--- a/lib/content-services/src/lib/category/categories-management/categories-management.component.ts
+++ b/lib/content-services/src/lib/category/categories-management/categories-management.component.ts
@@ -18,7 +18,6 @@
 import { Category } from '@alfresco/js-api';
 import { Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild, ViewEncapsulation } from '@angular/core';
 import { FormControl, Validators } from '@angular/forms';
-import { MatSelectionListChange } from '@angular/material/list';
 import { EMPTY, Observable, Subject, timer } from 'rxjs';
 import { debounce, first, map, takeUntil, tap } from 'rxjs/operators';
 import { CategoriesManagementMode } from './categories-management-mode';
@@ -229,10 +228,10 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
     /**
      * Adds existing category to categories list and removes it from existing categories list.
      *
-     * @param change - selection list change containing selected category
+     * @param category - selection list change containing selected category
      */
-    addCategoryToAssign(change: MatSelectionListChange) {
-        const selectedCategory: Category = change.options[0].value;
+    addCategoryToAssign(category: Category) {
+        const selectedCategory: Category = category;
         this.categories.push(selectedCategory);
         this._existingCategories.splice(this._existingCategories.indexOf(selectedCategory), 1);
         this.categoryNameControl.updateValueAndValidity();
diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.html b/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.html
index d49b5d688b..b45511e8cb 100644
--- a/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.html
+++ b/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.html
@@ -1,5 +1,5 @@
-<mat-card *ngIf="node">
-    <mat-card-content>
+<mat-card *ngIf="node" class="adf-content-metadata-card-view">
+    <mat-card-content class="adf-content-metadata-card-view-content">
         <adf-content-metadata
             [displayDefaultProperties]="displayDefaultProperties"
             [expanded]="expanded"
@@ -14,7 +14,7 @@
             [customPanels]="customPanels">
         </adf-content-metadata>
     </mat-card-content>
-    <mat-card-footer class="adf-content-metadata-card-footer">
+    <mat-card-footer class="adf-content-metadata-card-footer adf-content-metadata-card-view-footer">
         <div>
             <button *ngIf="isEditAspectSupported()"
                 mat-icon-button
diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.scss b/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.scss
index 40f4ae945d..618f2366bf 100644
--- a/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.scss
+++ b/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.scss
@@ -1,13 +1,13 @@
 .adf-content-metadata-card {
-    .mat-card {
+    .adf-content-metadata-card-view {
         padding: 0;
 
-        .mat-card-content {
+        .adf-content-metadata-card-view-content {
             margin-bottom: 0;
         }
     }
 
-    &-footer.mat-card-footer {
+    &-footer.adf-content-metadata-card-view-footer {
         margin: 0;
         padding: 8px 12px;
         border-top: 1px solid var(--adf-theme-foreground-text-color-007);
diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html
index 419c68bf01..322623e271 100644
--- a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html
+++ b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html
@@ -5,7 +5,8 @@
         [(expanded)]="isGeneralPanelExpanded"
         [attr.data-automation-id]="'adf-metadata-group-properties'"
         hideToggle>
-        <mat-expansion-panel-header>
+        <mat-expansion-panel-header class="adf-metadata-properties-header"
+                                    [class.adf-metadata-properties-header-expanded]='isGeneralPanelExpanded'>
             <adf-content-metadata-header [title]="'CORE.METADATA.BASIC.HEADER'" [expanded]="isGeneralPanelExpanded">
                 <button *ngIf="canEditGeneralInfo"
                         mat-icon-button
@@ -36,6 +37,7 @@
             </adf-content-metadata-header>
         </mat-expansion-panel-header>
         <adf-card-view
+            class="adf-metadata-properties-expansion-panel"
             (keydown)="keyDown($event)"
             [properties]="basicProperties$ | async"
             [editable]="isEditingModeGeneralInfo"
@@ -48,7 +50,8 @@
 
     <ng-container *ngIf="displayTags">
         <mat-expansion-panel hideToggle [(expanded)]="isTagPanelExpanded" class="adf-content-metadata-panel">
-            <mat-expansion-panel-header>
+            <mat-expansion-panel-header class="adf-metadata-properties-header"
+                                        [class.adf-metadata-properties-header-expanded]='isTagPanelExpanded'>
                 <adf-content-metadata-header [title]="'METADATA.BASIC.TAGS'" [expanded]="isTagPanelExpanded">
                     <button *ngIf="canEditTags"
                             mat-icon-button
@@ -98,7 +101,8 @@
 
     <ng-container *ngIf="displayCategories">
         <mat-expansion-panel hideToggle [(expanded)]="isCategoriesPanelExpanded" class="adf-content-metadata-panel">
-            <mat-expansion-panel-header>
+            <mat-expansion-panel-header class="adf-metadata-properties-header"
+                                        [class.adf-metadata-properties-header-expanded]='isCategoriesPanelExpanded'>
                 <adf-content-metadata-header [title]="'CATEGORIES_MANAGEMENT.CATEGORIES_TITLE'" [expanded]="isCategoriesPanelExpanded">
                     <button *ngIf="canEditCategories"
                             mat-icon-button
@@ -154,7 +158,8 @@
         (closed)="customPanel.expanded = false"
         class="adf-content-metadata-panel"
         hideToggle>
-        <mat-expansion-panel-header>
+        <mat-expansion-panel-header class="adf-metadata-properties-header"
+                                    [class.adf-metadata-properties-header-expanded]='customPanel.expanded'>
             <adf-content-metadata-header class="adf-metadata-custom-panel-title" [title]="customPanel.panelTitle" [expanded]="customPanel.expanded">
             </adf-content-metadata-header>
         </mat-expansion-panel-header>
@@ -171,7 +176,8 @@
                 (closed)="group.expanded = false"
                 class="adf-content-metadata-panel"
                 hideToggle>
-                <mat-expansion-panel-header>
+                <mat-expansion-panel-header class="adf-metadata-properties-header"
+                                            [class.adf-metadata-properties-header-expanded]='group.expanded'>
                     <adf-content-metadata-header [title]="group.title" [expanded]="group.expanded">
                         <button *ngIf="hasGroupToggleEdit(group)"
                                 mat-icon-button
diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss
index c3649fa77c..9c26d77dca 100644
--- a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss
+++ b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss
@@ -9,36 +9,25 @@ $panel-properties-height: 56px !default;
             margin: 12px;
 
             .adf-property-list .adf-property .adf-property-field {
-                .mat-input-element {
+                .adf-property-value:not(.adf-card-view-selectitem .adf-property-value) {
                     margin-top: 20px;
                 }
 
-                .mat-form-field-label {
-                    transform: translateY(-1.3437em) scale(1);
+                label {
+                    font-size: 19px;
+                    line-height: 20px;
                 }
             }
         }
 
-        mat-expansion-panel-header {
+        .adf-metadata-properties-header {
             height: $panel-properties-height;
             padding: 0 12px;
             border-radius: 12px 12px 0 0;
 
-            &.mat-expanded {
-                height: $panel-properties-height;
+            &.adf-metadata-properties-header-expanded {
                 border-bottom: 1px solid var(--adf-metadata-property-panel-border-color);
             }
-
-            .mat-content {
-                display: contents;
-                margin-right: 0;
-            }
-        }
-
-        .mat-expansion-panel-content {
-            .mat-expansion-panel-body {
-                padding: 0 12px 12px;
-            }
         }
 
         .adf-edit-icon-buttons {
diff --git a/lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.scss b/lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.scss
index 3785bca93d..0e2822af4a 100644
--- a/lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.scss
+++ b/lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.scss
@@ -13,12 +13,11 @@ h2.adf-search-results-label {
     color: var(--adf-theme-foreground-text-color-087);
 }
 
-.adf-toolbar .mat-toolbar {
-    max-height: 48px;
-    border-bottom-width: 0;
-    font-size: var(--theme-body-1-font-size);
-
-    &.mat-toolbar-single-row {
+.adf-content-node-selector-panel {
+    .adf-toolbar .adf-toolbar-container.adf-toolbar-container-row {
+        max-height: 48px;
+        border-bottom-width: 0;
+        font-size: var(--theme-body-1-font-size);
         height: auto;
     }
 }
@@ -48,13 +47,8 @@ h2.adf-search-results-label {
             }
         }
 
-        .mat-form-field-underline .mat-form-field-ripple {
-            height: 1px;
-            transition: none;
-        }
-
         .adf-site-dropdown-container {
-            .mat-form-field {
+            .adf-sites-dropdown-form-field {
                 display: block;
                 margin-bottom: 15px;
             }
@@ -64,7 +58,7 @@ h2.adf-search-results-label {
             width: 100%;
             margin-bottom: 0;
 
-            .mat-select-trigger {
+            .adf-sites-dropdown-select-trigger {
                 font-size: var(--theme-body-1-font-size);
             }
         }
@@ -73,7 +67,7 @@ h2.adf-search-results-label {
             .adf-dropdown-breadcrumb-trigger {
                 outline: none;
 
-                .mat-icon {
+                .adf-dropdown-breadcrumb-icon {
                     color: var(--adf-theme-foreground-base-color-045);
 
                     &:hover {
@@ -81,7 +75,7 @@ h2.adf-search-results-label {
                     }
                 }
 
-                &:focus .mat-icon {
+                &:focus .adf-dropdown-breadcrumb-icon {
                     color: var(--theme-primary-color);
                 }
             }
diff --git a/lib/content-services/src/lib/content-node-selector/content-node-selector.component.html b/lib/content-services/src/lib/content-node-selector/content-node-selector.component.html
index 94e9879983..93a7145266 100644
--- a/lib/content-services/src/lib/content-node-selector/content-node-selector.component.html
+++ b/lib/content-services/src/lib/content-node-selector/content-node-selector.component.html
@@ -1,77 +1,82 @@
-<h1 mat-dialog-title data-automation-id="content-node-selector-title">{{title}}</h1>
-<mat-tab-group class="adf-content-node-selector-dialog-content"
-               mat-align-tabs="start"
-               (selectedIndexChange)="onTabSelectionChange($event)"
-               [class.adf-content-node-selector-headless-tabs]="!canPerformLocalUpload()">
-    <mat-tab label="{{ 'NODE_SELECTOR.REPOSITORY' | translate }}">
-            <adf-content-node-selector-panel
-                [currentFolderId]="data?.currentFolderId"
-                [restrictRootToCurrentFolderId]="data?.restrictRootToCurrentFolderId"
-                [dropdownHideMyFiles]="data?.dropdownHideMyFiles"
-                [dropdownSiteList]="data?.dropdownSiteList"
-                [rowFilter]="data?.rowFilter"
-                [imageResolver]="data?.imageResolver"
-                [isSelectionValid]="data?.isSelectionValid"
-                [breadcrumbTransform]="data?.breadcrumbTransform"
-                [excludeSiteContent]="data?.excludeSiteContent"
-                [selectionMode]="data?.selectionMode"
-                [where]="data?.where"
-                [showSearch]="data?.showSearch"
-                [showDropdownSiteList]="data?.showDropdownSiteList"
-                [showFilesInResult]="data?.showFilesInResult"
-                [showNodeCounter]="isCounterVisible()"
-                (currentFolder)="onCurrentFolder($event)"
-                (folderLoaded)="onFolderLoaded()"
-                (select)="onSelect($event)"
-                (showingSearch)="onShowingSearch($event)"
-                (siteChange)="onSiteChange($event)"
-                (navigationChange)="onNavigationChange($event)">
-            </adf-content-node-selector-panel>
-    </mat-tab>
-    <mat-tab *ngIf="canPerformLocalUpload()"
-             [disabled]="isNotAllowedToUpload()">
-        <div class="adf-content-node-selector-local-upload-container">
-            <div class="adf-content-node-selector-local-upload-header">
-                <adf-toolbar>
-                    <adf-toolbar-title>
-                        <adf-dropdown-breadcrumb
-                            class="adf-content-node-selector-content-breadcrumb"
-                            [folderNode]="breadcrumbFolderNode"
-                            [rootId]="data?.currentFolderId"
-                            [readOnly]="true"
-                            data-automation-id="content-node-selector-upload-breadcrumb"
-                        ></adf-dropdown-breadcrumb>
-                        <ng-container *ngIf="isCounterVisible()" [adf-node-counter]="getSelectedCount()"></ng-container>
-                    </adf-toolbar-title>
-                </adf-toolbar>
-                <ng-template mat-tab-label>
-                    {{ 'NODE_SELECTOR.UPLOAD_FROM_DEVICE' | translate }}
-                    <mat-icon *ngIf="hasUploadError()"
-                              data-automation-id="adf-content-node-selector-disabled-tab-info-icon"
-                              matTooltip="{{ getWarningMessage() | translate }}">info
-                    </mat-icon>
-                </ng-template>
-            </div>
-            <div class="adf-content-node-selector-local-upload-content">
-                <adf-upload-drag-area [rootFolderId]="currentDirectoryId">
-                    <div [class.adf-upload-dialog-container]="uploadStarted">
-                        <adf-file-uploading-dialog [alwaysVisible]="true"></adf-file-uploading-dialog>
-                    </div>
-                    <adf-empty-list data-automation-id="adf-empty-list" *ngIf="!uploadStarted">
-                        <div class="adf-empty-list_template adf-empty-folder">
-                            <div class="adf-empty-folder-drag-drop">{{ 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.TITLE' | translate }}</div>
-                            <div class="adf-empty-folder-any-files-here-to-add">{{ 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate }}</div>
-                            <img [alt]="'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.TITLE' | translate" class="adf-empty-folder-image"
-                                 [src]="emptyFolderImageUrl">
+<h1 mat-dialog-title class="adf-content-node-selector-dialog-title" data-automation-id="content-node-selector-title">{{title}}</h1>
+<ng-container *ngIf="canPerformLocalUpload(); else contentNodePanel">
+    <mat-tab-group class="adf-content-node-selector-dialog-content"
+                   mat-align-tabs="start"
+                   (selectedIndexChange)="onTabSelectionChange($event)">
+        <mat-tab label="{{ 'NODE_SELECTOR.REPOSITORY' | translate }}">
+            <ng-container *ngTemplateOutlet='contentNodePanel'></ng-container>
+        </mat-tab>
+        <mat-tab [disabled]="isNotAllowedToUpload()">
+            <div class="adf-content-node-selector-local-upload-container">
+                <div class="adf-content-node-selector-local-upload-header">
+                    <adf-toolbar>
+                        <adf-toolbar-title>
+                            <adf-dropdown-breadcrumb
+                              class="adf-content-node-selector-content-breadcrumb"
+                              [folderNode]="breadcrumbFolderNode"
+                              [rootId]="data?.currentFolderId"
+                              [readOnly]="true"
+                              data-automation-id="content-node-selector-upload-breadcrumb"
+                            ></adf-dropdown-breadcrumb>
+                            <ng-container *ngIf="isCounterVisible()" [adf-node-counter]="getSelectedCount()"></ng-container>
+                        </adf-toolbar-title>
+                    </adf-toolbar>
+                    <ng-template mat-tab-label>
+                        {{ 'NODE_SELECTOR.UPLOAD_FROM_DEVICE' | translate }}
+                        <mat-icon *ngIf="hasUploadError()"
+                                  data-automation-id="adf-content-node-selector-disabled-tab-info-icon"
+                                  matTooltip="{{ getWarningMessage() | translate }}">info
+                        </mat-icon>
+                    </ng-template>
+                </div>
+                <div class="adf-content-node-selector-local-upload-content">
+                    <adf-upload-drag-area [rootFolderId]="currentDirectoryId">
+                        <div [class.adf-upload-dialog-container]="uploadStarted">
+                            <adf-file-uploading-dialog [alwaysVisible]="true"></adf-file-uploading-dialog>
                         </div>
-                    </adf-empty-list>
-                </adf-upload-drag-area>
+                        <adf-empty-list data-automation-id="adf-empty-list" *ngIf="!uploadStarted">
+                            <div class="adf-empty-list_template adf-empty-folder">
+                                <div class="adf-empty-folder-drag-drop">{{ 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.TITLE' | translate }}</div>
+                                <div class="adf-empty-folder-any-files-here-to-add">{{ 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate }}</div>
+                                <img [alt]="'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.TITLE' | translate" class="adf-empty-folder-image"
+                                     [src]="emptyFolderImageUrl">
+                            </div>
+                        </adf-empty-list>
+                    </adf-upload-drag-area>
+                </div>
             </div>
-        </div>
-    </mat-tab>
-</mat-tab-group>
+        </mat-tab>
+    </mat-tab-group>
+</ng-container>
 
-<mat-dialog-actions>
+<ng-template #contentNodePanel>
+    <adf-content-node-selector-panel
+      [currentFolderId]="data?.currentFolderId"
+      [restrictRootToCurrentFolderId]="data?.restrictRootToCurrentFolderId"
+      [dropdownHideMyFiles]="data?.dropdownHideMyFiles"
+      [dropdownSiteList]="data?.dropdownSiteList"
+      [rowFilter]="data?.rowFilter"
+      [imageResolver]="data?.imageResolver"
+      [isSelectionValid]="data?.isSelectionValid"
+      [breadcrumbTransform]="data?.breadcrumbTransform"
+      [excludeSiteContent]="data?.excludeSiteContent"
+      [selectionMode]="data?.selectionMode"
+      [where]="data?.where"
+      [showSearch]="data?.showSearch"
+      [showDropdownSiteList]="data?.showDropdownSiteList"
+      [showFilesInResult]="data?.showFilesInResult"
+      [showNodeCounter]="isCounterVisible()"
+      (currentFolder)="onCurrentFolder($event)"
+      (folderLoaded)="onFolderLoaded()"
+      (select)="onSelect($event)"
+      (showingSearch)="onShowingSearch($event)"
+      (siteChange)="onSiteChange($event)"
+      (navigationChange)="onNavigationChange($event)">
+    </adf-content-node-selector-panel>
+</ng-template>
+
+
+<mat-dialog-actions class="adf-content-node-selector-dialog-actions">
     <div>
         <ng-container *ngIf="isUploadEnabled()">
             <adf-upload-button
diff --git a/lib/content-services/src/lib/content-node-selector/content-node-selector.component.scss b/lib/content-services/src/lib/content-node-selector/content-node-selector.component.scss
index 1d4924b9d1..ebca2925c0 100644
--- a/lib/content-services/src/lib/content-node-selector/content-node-selector.component.scss
+++ b/lib/content-services/src/lib/content-node-selector/content-node-selector.component.scss
@@ -1,10 +1,4 @@
 adf-content-node-selector {
-    .adf-content-node-selector-headless-tabs {
-        .mat-tab-header {
-            display: none;
-        }
-    }
-
     .adf-upload-dialog {
         box-shadow: none;
 
@@ -46,14 +40,7 @@ adf-content-node-selector {
 }
 
 .adf-content-node-selector-dialog {
-    &-content {
-        padding-left: 24px;
-        padding-right: 24px;
-    }
-
-    .mat-dialog-title {
-        margin-left: 24px;
-        margin-right: 24px;
+    .adf-content-node-selector-dialog-title {
         font-size: var(--theme-title-font-size);
         font-weight: 600;
         font-style: normal;
@@ -68,17 +55,7 @@ adf-content-node-selector {
         }
     }
 
-    .mat-dialog-container {
-        padding-left: 0;
-        padding-right: 0;
-    }
-
-    .mat-dialog-content {
-        margin: 0;
-        overflow: hidden;
-    }
-
-    .mat-dialog-actions {
+    .adf-content-node-selector-dialog-actions {
         padding: 8px;
         height: 61px;
         background-color: var(--theme-background-color);
@@ -102,10 +79,10 @@ adf-content-node-selector {
             }
         }
     }
+}
 
-    @media screen and (max-width: 768px) {
-        .mat-dialog-container {
-            height: 100vh;
-        }
+@media screen and (max-width: 768px) {
+    .adf-content-node-selector-dialog {
+        height: 100vh;
     }
 }
diff --git a/lib/content-services/src/lib/content-node-selector/content-node-selector.component.spec.ts b/lib/content-services/src/lib/content-node-selector/content-node-selector.component.spec.ts
index ad4fff2902..68e889cf8e 100644
--- a/lib/content-services/src/lib/content-node-selector/content-node-selector.component.spec.ts
+++ b/lib/content-services/src/lib/content-node-selector/content-node-selector.component.spec.ts
@@ -428,9 +428,11 @@ describe('ContentNodeSelectorComponent', () => {
         it('should tabs be headless when local upload is not enabled', () => {
             component.data.showLocalUploadButton = false;
             fixture.detectChanges();
-            const tabGroup = fixture.debugElement.queryAll(By.css('.adf-content-node-selector-headless-tabs'))[0];
+            const tabGroup = fixture.debugElement.queryAll(By.css('.adf-content-node-selector-dialog-content'))[0];
+            const nodePanel = fixture.debugElement.queryAll(By.css('.adf-content-node-selector-panel'))[0];
 
-            expect(tabGroup).not.toBe(undefined);
+            expect(tabGroup).toBeUndefined();
+            expect(nodePanel).not.toBeUndefined();
         });
 
         it('should tabs show headers when local upload is enabled', () => {
diff --git a/lib/content-services/src/lib/content-node-share/content-node-share.dialog.html b/lib/content-services/src/lib/content-node-share/content-node-share.dialog.html
index d030ea6947..a0583bbde6 100644
--- a/lib/content-services/src/lib/content-node-share/content-node-share.dialog.html
+++ b/lib/content-services/src/lib/content-node-share/content-node-share.dialog.html
@@ -112,7 +112,7 @@
             </form>
             <hr class="adf-share-link__separation-line" />
         </mat-dialog-content>
-        <div mat-dialog-actions>
+        <div class="adf-share-link__actions" mat-dialog-actions>
             <button data-automation-id="adf-share-dialog-close" mat-button color="primary" mat-dialog-close>
                 {{ 'SHARE.CLOSE' | translate }}
             </button>
diff --git a/lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss b/lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss
index fe0346c62a..2f907a68c9 100644
--- a/lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss
+++ b/lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss
@@ -97,20 +97,14 @@
 
     .adf-full-width {
         width: 100%;
-        background-color: var(--theme-grey-text-background-color);
         border-radius: 6px;
-        padding-top: 8px;
     }
 
     .adf-sharable-link {
         margin-left: 8px;
     }
 
-    .mat-form-field-infix {
-        border-top: unset;
-    }
-
-    .mat-dialog-actions {
+    .adf-share-link__actions {
         justify-content: flex-end;
         padding: 0;
         margin: 8px 0 0;
@@ -121,37 +115,4 @@
             margin-right: 12px;
         }
     }
-
-    .mat-form-field-flex {
-        align-items: center;
-    }
-
-    .mat-dialog-container {
-        padding: 0;
-    }
-
-    .mat-form-field-appearance-legacy .mat-form-field-underline {
-        display: none;
-    }
-
-    .mat-form-field-appearance-legacy .mat-form-field-wrapper {
-        padding-bottom: 8px;
-        margin-right: 8px;
-        margin-left: 8px;
-    }
-
-    @media screen and (max-width: 380px) {
-        .mat-dialog-container {
-            padding: 0 15px;
-        }
-
-        .mat-dialog-actions {
-            margin-bottom: 0;
-            padding: 2px 0;
-        }
-
-        .mat-form-field-suffix {
-            padding-left: 8px;
-        }
-    }
 }
diff --git a/lib/content-services/src/lib/content-type/content-type-dialog.component.scss b/lib/content-services/src/lib/content-type/content-type-dialog.component.scss
index d0652bd84d..f53f72bc8b 100644
--- a/lib/content-services/src/lib/content-type/content-type-dialog.component.scss
+++ b/lib/content-services/src/lib/content-type/content-type-dialog.component.scss
@@ -1,14 +1,10 @@
 .adf {
     &-content-type-dialog {
-        .mat-expansion-panel {
-            margin-bottom: 10px;
+        & .adf-content-type-accordion {
+            margin: 10px;
         }
     }
 
-    &-content-type-accordion {
-        margin: 10px;
-    }
-
     &-content-type-dialog-title {
         font-size: large;
         font-weight: 200;
diff --git a/lib/content-services/src/lib/content-user-info/content-user-info.component.html b/lib/content-services/src/lib/content-user-info/content-user-info.component.html
index 6f696105ee..bb00aa1d68 100644
--- a/lib/content-services/src/lib/content-user-info/content-user-info.component.html
+++ b/lib/content-services/src/lib/content-user-info/content-user-info.component.html
@@ -8,7 +8,7 @@
     <span *ngIf="showName" id="adf-userinfo-ecm-name-display" class="adf-userinfo-name">
         {{ecmUser | fullName}}
     </span>
-    <button mat-button [matMenuTriggerFor]="menu" class="adf-userinfo-menu_button"
+    <button mat-button [matMenuTriggerFor]="menu" class="adf-userinfo-menu_button adf-content-userinfo-button"
             data-automation-id="adf-user-profile">
         <div class="adf-userinfo-button-profile" id="user-profile">
             <div *ngIf="identityUser; else showEcmUserImage" id="identity-user-image">
@@ -38,72 +38,64 @@
 
     <mat-menu #menu="matMenu" id="user-profile-lists" [xPosition]="menuPositionX" [yPosition]="menuPositionY"
               [overlapTrigger]="false" class="adf-userinfo-menu">
-        <mat-tab-group id="tab-group-env" (click)="stopClosing($event)" selectedIndex="0" role="menuitem"
-                       class="adf-userinfo-tab adf-hide-tab">
-            <mat-tab label="{{ 'USER_PROFILE.TAB.CS' | translate }}" role="dialog"
-                     *ngIf="mode === userInfoMode.CONTENT">
-                <mat-card class="adf-userinfo-card">
-                    <mat-card-header class="adf-userinfo-card-header"
-                                     [style.background-image]="'url(' + ecmBackgroundImage + ')'">
-                        <div *ngIf="ecmUser.avatarId; else initialTemplate"
-                             class="adf-userinfo-profile-container adf-hide-small">
-                            <img class="adf-userinfo-profile-picture" id="ecm-user-detail-image"
-                                 alt="ecm-profile-image" [src]="getEcmAvatar(ecmUser.avatarId)"/>
-                        </div>
-                        <ng-template #initialTemplate>
-                            <div
-                                [outerHTML]="ecmUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
-                        </ng-template>
+        <mat-card *ngIf="mode === userInfoMode.CONTENT" class="adf-userinfo-card adf-content-userinfo-card">
+            <mat-card-header class="adf-userinfo-card-header"
+                             [style.background-image]="'url(' + ecmBackgroundImage + ')'">
+                <div *ngIf="ecmUser.avatarId; else initialTemplate"
+                     class="adf-userinfo-profile-container adf-hide-small">
+                    <img class="adf-userinfo-profile-picture" id="ecm-user-detail-image"
+                         alt="ecm-profile-image" [src]="getEcmAvatar(ecmUser.avatarId)"/>
+                </div>
+                <ng-template #initialTemplate>
+                    <div
+                      [outerHTML]="ecmUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
+                </ng-template>
 
-                        <div class="mat-title" id="ecm-username">{{ecmUser | fullName}}</div>
-                    </mat-card-header>
-                    <mat-card-content>
-                        <div class="adf-userinfo-supporting-text">
-                            <div class="adf-userinfo-detail">
-                                <h2 id="ecm-full-name"
-                                      class="adf-userinfo__detail-title">{{ecmUser | fullName}}</h2>
-                                <span id="ecm-email"> {{ecmUser.email}} </span>
-                                <a href="#/profile">
-                                    {{ 'USER_PROFILE.LABELS.MY_PROFILE' | translate }}</a>
-                            </div>
-                            <div class="adf-userinfo-detail">
+                <div class="mat-title" id="ecm-username">{{ecmUser | fullName}}</div>
+            </mat-card-header>
+            <mat-card-content>
+                <div class="adf-userinfo-supporting-text">
+                    <div class="adf-userinfo-detail">
+                        <h2 id="ecm-full-name"
+                            class="adf-userinfo__detail-title">{{ecmUser | fullName}}</h2>
+                        <span id="ecm-email"> {{ecmUser.email}} </span>
+                        <a href="#/profile">
+                            {{ 'USER_PROFILE.LABELS.MY_PROFILE' | translate }}</a>
+                    </div>
+                    <div class="adf-userinfo-detail">
                                     <span class="adf-userinfo__secondary-info" id="ecm-job-title-label">
                                         {{ 'USER_PROFILE.LABELS.ECM.JOB_TITLE' | translate }}
                                         <span id="ecm-job-title"> {{ ecmUser.jobTitle ? ecmUser.jobTitle : 'N/A' }} </span>
                                     </span>
-                            </div>
-                        </div>
-                    </mat-card-content>
-                </mat-card>
-            </mat-tab>
-            <mat-tab id="identity-panel" role="dialog" *ngIf="mode === userInfoMode.CONTENT_SSO">
-                <mat-card class="adf-userinfo-card">
-                    <mat-card-header class="adf-userinfo-card-header"
-                                     [style.background-image]="'url(' + bpmBackgroundImage + ')'">
-                        <div *ngIf="ecmUser.avatarId; else initialTemplate"
-                                class="adf-userinfo-profile-container adf-hide-small">
-                            <img class="adf-userinfo-profile-picture" id="ecm-user-detail-image"
-                                    alt="ecm-profile-image" [src]="getEcmAvatar(ecmUser.avatarId)"/>
-                        </div>
-                        <ng-template #initialTemplate>
-                            <div
-                                [outerHTML]="identityUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
-                        </ng-template>
-                        <div class="mat-title" id="identity-username">{{identityUser | fullName}}</div>
-                    </mat-card-header>
-                    <mat-card-content>
-                        <div class="adf-userinfo-supporting-text">
-                            <div class="adf-userinfo-detail">
-                                <h2 id="identity-full-name"
-                                      class="adf-userinfo__detail-title">{{identityUser | fullName}}</h2>
-                                <span id="identity-email"> {{identityUser.email}} </span>
-                                <a href="#/profile">
-                                      {{ 'USER_PROFILE.LABELS.MY_PROFILE' | translate }}</a>
-                            </div>
-                        </div>
-                    </mat-card-content>
-                </mat-card>
-            </mat-tab>
-        </mat-tab-group>
+                    </div>
+                </div>
+            </mat-card-content>
+        </mat-card>
+        <mat-card *ngIf="mode === userInfoMode.CONTENT_SSO" class="adf-userinfo-card adf-content-userinfo-card">
+            <mat-card-header class="adf-userinfo-card-header"
+                             [style.background-image]="'url(' + bpmBackgroundImage + ')'">
+                <div *ngIf="ecmUser.avatarId; else initialTemplate"
+                     class="adf-userinfo-profile-container adf-hide-small">
+                    <img class="adf-userinfo-profile-picture" id="ecm-user-detail-image"
+                         alt="ecm-profile-image" [src]="getEcmAvatar(ecmUser.avatarId)"/>
+                </div>
+                <ng-template #initialTemplate>
+                    <div
+                      [outerHTML]="identityUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
+                </ng-template>
+                <div class="mat-title" id="identity-username">{{identityUser | fullName}}</div>
+            </mat-card-header>
+            <mat-card-content>
+                <div class="adf-userinfo-supporting-text">
+                    <div class="adf-userinfo-detail">
+                        <h2 id="identity-full-name"
+                            class="adf-userinfo__detail-title">{{identityUser | fullName}}</h2>
+                        <span id="identity-email"> {{identityUser.email}} </span>
+                        <a href="#/profile">
+                            {{ 'USER_PROFILE.LABELS.MY_PROFILE' | translate }}</a>
+                    </div>
+                </div>
+            </mat-card-content>
+        </mat-card>
     </mat-menu>
 </div>
diff --git a/lib/content-services/src/lib/content-user-info/content-user-info.component.scss b/lib/content-services/src/lib/content-user-info/content-user-info.component.scss
index 8d458c8f6e..7b2b78640d 100644
--- a/lib/content-services/src/lib/content-user-info/content-user-info.component.scss
+++ b/lib/content-services/src/lib/content-user-info/content-user-info.component.scss
@@ -49,7 +49,7 @@
         display: inline-block;
     }
 
-    &-userinfo-menu_button.mat-button {
+    &-userinfo-menu_button.adf-content-userinfo-button {
         margin-right: 0;
         border-radius: 90%;
         padding: 0;
@@ -57,21 +57,6 @@
         height: 40px;
     }
 
-    &-userinfo-tab .mat-tab-header {
-        align-self: center;
-        width: 100%;
-        min-width: 250px;
-    }
-
-    &-userinfo-tab .mat-tab-label {
-        flex: auto;
-        font-weight: 500;
-        font-size: var(--theme-body-1-font-size);
-        text-transform: uppercase;
-        line-height: 48px;
-        text-align: center;
-    }
-
     &-userinfo-card-header {
         align-items: center;
         display: flex;
@@ -81,7 +66,7 @@
         box-sizing: border-box;
     }
 
-    &-userinfo-card.mat-card {
+    &-userinfo-card.adf-content-userinfo-card {
         padding: 0;
     }
 
@@ -146,14 +131,10 @@
     &-userinfo-detail {
         text-align: left;
     }
-
-    &-hide-tab .mat-tab-label-active {
-        display: none !important;
-    }
 }
 
 @media only screen and (min-device-width: 480px) {
-    .mat-menu-panel.adf-userinfo-menu {
+    .adf-content-userinfo-menu.adf-userinfo-menu {
         max-height: 450px;
         min-width: 450px;
         overflow: auto;
@@ -161,6 +142,6 @@
     }
 }
 
-.mat-menu-panel.adf-userinfo-menu .mat-menu-content {
+.adf-content-userinfo-menu.adf-userinfo-menu > div {
     padding: 0;
 }
diff --git a/lib/content-services/src/lib/content-user-info/content-user-info.component.spec.ts b/lib/content-services/src/lib/content-user-info/content-user-info.component.spec.ts
index 3d82c178f1..f91e9b378d 100644
--- a/lib/content-services/src/lib/content-user-info/content-user-info.component.spec.ts
+++ b/lib/content-services/src/lib/content-user-info/content-user-info.component.spec.ts
@@ -217,14 +217,6 @@ describe('ContentUserInfoComponent', () => {
                     expect(ecmJobTitle.nativeElement.textContent).toContain('N/A');
                 });
 
-                it('should not show the tabs', () => {
-                    const imageButton = element.querySelector<HTMLButtonElement>('[data-automation-id="user-initials-image"]');
-                    imageButton.click();
-                    fixture.detectChanges();
-                    const tabHeader = fixture.debugElement.query(By.css('#tab-group-env'));
-                    expect(tabHeader.classes['adf-hide-tab']).toBeTruthy();
-                });
-
                 it('should display the current user Initials if the user dose not have avatarId', () => {
                     fixture.detectChanges();
                     const pipe = new InitialUsernamePipe(new FakeSanitizer());
diff --git a/lib/content-services/src/lib/dialogs/confirm.dialog.html b/lib/content-services/src/lib/dialogs/confirm.dialog.html
index 5ffd7cbd6b..77f2a922ea 100644
--- a/lib/content-services/src/lib/dialogs/confirm.dialog.html
+++ b/lib/content-services/src/lib/dialogs/confirm.dialog.html
@@ -10,9 +10,9 @@
 </mat-dialog-content>
 <mat-dialog-actions>
     <span class="adf-dialog-spacer" data-automation-id="adf-confirm-dialog-spacer"></span>
-    <button id="adf-confirm-accept" mat-button color="primary" data-automation-id="adf-confirm-dialog-confirmation"
+    <button id="adf-confirm-accept" class="adf-confirm-dialog-button" mat-button color="primary" data-automation-id="adf-confirm-dialog-confirmation"
         [mat-dialog-close]="true">{{ yesLabel | translate }}</button>
-    <button id="adf-confirm-all" mat-button *ngIf="thirdOptionLabel" [mat-dialog-close]="thirdOptionLabel" data-automation-id="adf-confirm-dialog-confirm-all">{{ thirdOptionLabel | translate }}</button>
-    <button id="adf-confirm-cancel" mat-button [mat-dialog-close]="false" data-automation-id="adf-confirm-dialog-reject"
+    <button id="adf-confirm-all" class="adf-confirm-dialog-button" mat-button *ngIf="thirdOptionLabel" [mat-dialog-close]="thirdOptionLabel" data-automation-id="adf-confirm-dialog-confirm-all">{{ thirdOptionLabel | translate }}</button>
+    <button id="adf-confirm-cancel" class="adf-confirm-dialog-button" mat-button [mat-dialog-close]="false" data-automation-id="adf-confirm-dialog-reject"
         cdkFocusInitial>{{ noLabel | translate }}</button>
 </mat-dialog-actions>
diff --git a/lib/content-services/src/lib/dialogs/confirm.dialog.scss b/lib/content-services/src/lib/dialogs/confirm.dialog.scss
index 2475496a16..77a57ed2bf 100644
--- a/lib/content-services/src/lib/dialogs/confirm.dialog.scss
+++ b/lib/content-services/src/lib/dialogs/confirm.dialog.scss
@@ -2,6 +2,8 @@
     flex: 1 1 auto;
 }
 
-.adf-confirm-dialog .mat-dialog-actions .mat-button-wrapper {
-    text-transform: uppercase;
+.adf-confirm-dialog {
+    & .adf-confirm-dialog-button {
+        text-transform: uppercase;
+    }
 }
diff --git a/lib/content-services/src/lib/dialogs/download-zip/download-zip.dialog.html b/lib/content-services/src/lib/dialogs/download-zip/download-zip.dialog.html
index 46882dfebb..5da7e68718 100755
--- a/lib/content-services/src/lib/dialogs/download-zip/download-zip.dialog.html
+++ b/lib/content-services/src/lib/dialogs/download-zip/download-zip.dialog.html
@@ -3,7 +3,7 @@
     <mat-progress-bar color="primary" mode="indeterminate"></mat-progress-bar>
 </div>
 <mat-dialog-actions align="end">
-    <button mat-button color="primary" id="cancel-button" (click)="cancelDownload()">
+    <button class="adf-download-zip-dialog-button" mat-button color="primary" id="cancel-button" (click)="cancelDownload()">
         {{ 'CORE.DIALOG.DOWNLOAD_ZIP.ACTIONS.CANCEL' | translate }}
     </button>
 </mat-dialog-actions>
diff --git a/lib/content-services/src/lib/dialogs/download-zip/download-zip.dialog.scss b/lib/content-services/src/lib/dialogs/download-zip/download-zip.dialog.scss
index b21782e6b9..8c9a585c27 100755
--- a/lib/content-services/src/lib/dialogs/download-zip/download-zip.dialog.scss
+++ b/lib/content-services/src/lib/dialogs/download-zip/download-zip.dialog.scss
@@ -1,3 +1,3 @@
-.adf-download-zip-dialog .mat-dialog-actions .mat-button-wrapper {
+.adf-download-zip-dialog-button {
     text-transform: uppercase;
 }
diff --git a/lib/content-services/src/lib/dialogs/folder.dialog.html b/lib/content-services/src/lib/dialogs/folder.dialog.html
index 56d8b6d3c4..f1bcb70cf8 100644
--- a/lib/content-services/src/lib/dialogs/folder.dialog.html
+++ b/lib/content-services/src/lib/dialogs/folder.dialog.html
@@ -1,4 +1,4 @@
-<h2 data-automation-id="adf-folder-dialog-title" mat-dialog-title>
+<h2 data-automation-id="adf-folder-dialog-title" class="adf-folder-dialog-title" mat-dialog-title>
     {{ (editing ? editTitle : createTitle) | translate }}
 </h2>
 
diff --git a/lib/content-services/src/lib/dialogs/folder.dialog.scss b/lib/content-services/src/lib/dialogs/folder.dialog.scss
index c046663901..6bd206495d 100644
--- a/lib/content-services/src/lib/dialogs/folder.dialog.scss
+++ b/lib/content-services/src/lib/dialogs/folder.dialog.scss
@@ -6,21 +6,6 @@
     width: 100%;
 }
 
-.adf-lock-file-name {
-    .mat-checkbox-layout {
-        width: 100%;
-    }
-
-    .mat-checkbox-label {
-        text-overflow: ellipsis;
-        overflow: hidden;
-    }
-
-    .mat-checkbox-inner-container {
-        margin: auto 8px auto 0;
-    }
-}
-
 .adf-dialog-buttons button {
     text-transform: uppercase;
 }
@@ -34,11 +19,7 @@
 }
 
 @media screen and (max-width: 380px) {
-    .mat-form-field {
-        font-size: 6px;
-    }
-
-    .mat-dialog-title {
+    .adf-folder-dialog-title {
         margin: 0;
     }
 
diff --git a/lib/content-services/src/lib/dialogs/library/library.dialog.html b/lib/content-services/src/lib/dialogs/library/library.dialog.html
index c8c205bee8..8d750481f0 100644
--- a/lib/content-services/src/lib/dialogs/library/library.dialog.html
+++ b/lib/content-services/src/lib/dialogs/library/library.dialog.html
@@ -2,7 +2,7 @@
 
 <mat-dialog-content>
   <form novalidate [formGroup]="form" (submit)="submit()">
-    <mat-form-field>
+    <mat-form-field class="adf-library-dialog-form-field">
       <input
         placeholder="{{ 'LIBRARY.DIALOG.FORM.NAME' | translate }}"
         required
@@ -28,7 +28,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field>
+    <mat-form-field class="adf-library-dialog-form-field">
       <input
         required
         placeholder="{{ 'LIBRARY.DIALOG.FORM.SITE_ID' | translate }}"
@@ -46,7 +46,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field>
+    <mat-form-field class="adf-library-dialog-form-field">
       <textarea
         matInput
         placeholder="{{ 'LIBRARY.DIALOG.FORM.DESCRIPTION' | translate }}"
@@ -60,12 +60,14 @@
     </mat-form-field>
 
     <mat-radio-group
+      class="adf-library-dialog-radio-group"
       [ngModelOptions]="{ standalone: true }"
       [(ngModel)]="visibilityOption"
       (change)="visibilityChangeHandler($event)"
     >
       <mat-radio-button
         color="primary"
+        class="adf-library-dialog-radio-group-button"
         [disabled]="option.disabled"
         *ngFor="let option of visibilityOptions"
         [attr.data-automation-id]="option.value"
@@ -79,12 +81,13 @@
 </mat-dialog-content>
 
 <mat-dialog-actions class="adf-action-buttons">
-  <button mat-button mat-dialog-close data-automation-id="cancel-library-id">
+  <button class="adf-action-button" mat-button mat-dialog-close data-automation-id="cancel-library-id">
     {{ 'LIBRARY.DIALOG.CANCEL' | translate }}
   </button>
 
   <button
     color="primary"
+    class="adf-action-button"
     mat-button
     (click)="submit()"
     [disabled]="!form.valid || disableCreateButton"
diff --git a/lib/content-services/src/lib/dialogs/library/library.dialog.scss b/lib/content-services/src/lib/dialogs/library/library.dialog.scss
index f8ddbcc305..914e75c11f 100644
--- a/lib/content-services/src/lib/dialogs/library/library.dialog.scss
+++ b/lib/content-services/src/lib/dialogs/library/library.dialog.scss
@@ -1,19 +1,16 @@
 .adf-library-dialog {
-    .mat-radio-group {
+    .adf-library-dialog-radio-group {
         display: flex;
         flex-direction: column;
         margin: 0 0 20px;
     }
 
-    .mat-radio-group .mat-radio-button {
+    .adf-library-dialog-radio-group .adf-library-dialog-radio-group-button {
         margin: 10px 0;
     }
 
-    .mat-form-field {
+    .adf-library-dialog-form-field {
         width: 100%;
-    }
-
-    mat-form-field {
         padding-top: 20px;
     }
 
@@ -22,7 +19,7 @@
         flex-direction: row;
         justify-content: flex-end;
 
-        .mat-button {
+        .adf-action-button {
             text-transform: uppercase;
         }
     }
diff --git a/lib/content-services/src/lib/new-version-uploader/new-version-uploader.dialog.html b/lib/content-services/src/lib/new-version-uploader/new-version-uploader.dialog.html
index a47f6d297c..5410ffd1aa 100644
--- a/lib/content-services/src/lib/new-version-uploader/new-version-uploader.dialog.html
+++ b/lib/content-services/src/lib/new-version-uploader/new-version-uploader.dialog.html
@@ -1,5 +1,5 @@
-<h1 mat-dialog-title data-automation-id="new-version-uploader-dialog-title">{{ title | translate }}</h1>
-<section mat-dialog-content *ngIf="!data.showVersionsOnly">
+<h1 class="adf-new-version-uploader-dialog-title" mat-dialog-title data-automation-id="new-version-uploader-dialog-title">{{ title | translate }}</h1>
+<section class="adf-new-version-uploader-dialog-content" mat-dialog-content *ngIf="!data.showVersionsOnly">
   <adf-version-comparison id="adf-version-comparison" [newFileVersion]="data.file" [node]="data.node"></adf-version-comparison>
   <adf-version-upload
     id="adf-version-upload-button"
@@ -27,7 +27,7 @@
       </div>
     </div>
   </section>
-  <div mat-dialog-actions>
+  <div class="adf-new-version-uploader-dialog-actions" mat-dialog-actions>
     <button mat-button color="primary" [mat-dialog-close]="true">{{ 'ADF-NEW-VERSION-UPLOADER.DIALOG_LIST.CLOSE' | translate }}</button>
   </div>
 </ng-container>
diff --git a/lib/content-services/src/lib/new-version-uploader/new-version-uploader.dialog.scss b/lib/content-services/src/lib/new-version-uploader/new-version-uploader.dialog.scss
index f994ff9cec..41020d7e8c 100644
--- a/lib/content-services/src/lib/new-version-uploader/new-version-uploader.dialog.scss
+++ b/lib/content-services/src/lib/new-version-uploader/new-version-uploader.dialog.scss
@@ -24,45 +24,38 @@
         height: 500px;
     }
 
-    .mat-dialog {
-        &-title {
-            flex: 0 0 auto;
-            font-size: 20px;
-            font-weight: 600;
-            font-style: normal;
-            font-stretch: normal;
-            line-height: 1.6;
-            margin: 0;
-            letter-spacing: -0.5px;
-            color: var(--adf-theme-foreground-text-color-087);
-        }
-
-        &-content {
-            flex: 1 1 auto;
-            position: relative;
-            overflow-y: auto;
-            max-height: 100vh;
-            overflow: hidden;
-            padding: 2px 26px;
-        }
-
-        &-actions {
-            /* stylelint-disable-next-line shorthand-property-no-redundant-values */
-            padding: 8px 8px 24px 8px;
-            display: flex;
-            justify-content: flex-end;
-            color: var(--adf-theme-foreground-text-color-054);
-
-            button {
-                text-transform: uppercase;
-                font-weight: normal;
-            }
-        }
+    &-title {
+        flex: 0 0 auto;
+        font-size: 20px;
+        font-weight: 600;
+        font-style: normal;
+        font-stretch: normal;
+        line-height: 1.6;
+        margin: 0;
+        letter-spacing: -0.5px;
+        color: var(--adf-theme-foreground-text-color-087);
     }
 
-    .mat-list-item-content {
-        padding: 0;
-        margin: 0 16px;
+    &-content {
+        flex: 1 1 auto;
+        position: relative;
+        overflow-y: auto;
+        max-height: 100vh;
+        overflow: hidden;
+        padding: 2px 26px;
+    }
+
+    &-actions {
+        /* stylelint-disable-next-line shorthand-property-no-redundant-values */
+        padding: 8px 8px 24px 8px;
+        display: flex;
+        justify-content: flex-end;
+        color: var(--adf-theme-foreground-text-color-054);
+
+        button {
+            text-transform: uppercase;
+            font-weight: normal;
+        }
     }
 
     .adf-version-list-container {
@@ -72,7 +65,7 @@
             padding: 0;
         }
 
-        .mat-list.adf-version-list {
+        .adf-version-list-element {
             overflow: auto;
         }
     }
diff --git a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.html b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.html
index cb4bfd7b2c..199bfbe18b 100644
--- a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.html
+++ b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.html
@@ -1,9 +1,9 @@
-<h2 mat-dialog-title id="add-permission-dialog-title">
+<h2 mat-dialog-title class='adf-add-permission-dialog-title' id="add-permission-dialog-title">
     {{ (data?.title ? data?.title : "PERMISSION_MANAGER.ADD-PERMISSION.BASE-DIALOG-TITLE") | translate }}
 </h2>
 
 <ng-container *ngIf="!isSearchActive">
-    <mat-dialog-content>
+    <mat-dialog-content class="adf-add-permission-dialog-content">
         <button mat-button (click)="enableSearch()" class="adf-search-user-button">
             {{ "PERMISSION_MANAGER.ADD-PERMISSION.SEARCH" | translate }}
             <span class="adf-toolbar--spacer"></span>
@@ -73,7 +73,7 @@
 
     </mat-dialog-content>
 
-    <mat-dialog-actions>
+    <mat-dialog-actions class="adf-add-permission-dialog-actions">
         <button mat-button
                 mat-dialog-close
                 data-automation-id="add-permission-dialog-close-button">
@@ -91,11 +91,11 @@
 </ng-container>
 
 <ng-container *ngIf="isSearchActive">
-    <mat-dialog-content>
+    <mat-dialog-content class="adf-add-permission-dialog-content">
         <adf-add-permission-panel class="adf-search-container" (select)="onSelect($event)"></adf-add-permission-panel>
     </mat-dialog-content>
 
-    <mat-dialog-actions>
+    <mat-dialog-actions class="adf-add-permission-dialog-actions">
             <button mat-button
                     (click)="canCloseDialog()"
                     data-automation-id="add-permission-dialog-close-button">
diff --git a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.scss b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.scss
index 5b4ed96024..11e693ff32 100644
--- a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.scss
+++ b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.scss
@@ -1,5 +1,5 @@
 .adf-add-permission-dialog {
-    .mat-dialog-title {
+    .adf-add-permission-dialog-title {
         margin-left: 24px;
         margin-right: 24px;
         font-size: var(--theme-title-font-size);
@@ -11,12 +11,7 @@
         color: var(--adf-theme-foreground-text-color-087);
     }
 
-    .mat-dialog-container {
-        padding-left: 0;
-        padding-right: 0;
-    }
-
-    .mat-dialog-content {
+    .adf-add-permission-dialog-content {
         margin: 0;
         overflow: hidden;
         flex-grow: 1;
@@ -31,7 +26,7 @@
         }
     }
 
-    .mat-dialog-actions {
+    .adf-add-permission-dialog-actions {
         padding: 0 24px;
         background-color: var(--theme-background-color);
         display: flex;
@@ -58,7 +53,7 @@
         &-search-user-button {
             width: 100%;
 
-            .mat-button-wrapper {
+            span {
                 display: flex;
                 align-items: center;
             }
diff --git a/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.scss b/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.scss
index 1c3800187c..35236ac529 100644
--- a/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.scss
+++ b/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.scss
@@ -50,10 +50,6 @@
     &-permission-role-column-header {
         position: relative;
         height: 40px;
-
-        .mat-form-field-infix {
-            border: none;
-        }
     }
 
     &-permission-header {
diff --git a/lib/content-services/src/lib/permission-manager/components/user-icon-column/user-icon-column.component.scss b/lib/content-services/src/lib/permission-manager/components/user-icon-column/user-icon-column.component.scss
index 3b230b5075..646a62b053 100644
--- a/lib/content-services/src/lib/permission-manager/components/user-icon-column/user-icon-column.component.scss
+++ b/lib/content-services/src/lib/permission-manager/components/user-icon-column/user-icon-column.component.scss
@@ -34,7 +34,7 @@
         }
     }
 
-    &-datatable-selected.mat-icon {
+    &-datatable-selected {
         height: 100%;
         width: 100%;
         margin-left: -2px;
diff --git a/lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.html b/lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.html
index c5a5df9594..ef2cfed367 100644
--- a/lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.html
+++ b/lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.html
@@ -2,6 +2,7 @@
     <mat-checkbox
         *ngFor="let option of options"
         [checked]="option.checked"
+        labelPosition="before"
         (keydown.enter)="option.checked = !option.checked"
         [attr.data-automation-id]="'checkbox-' + (option.name)"
         [attr.aria-label]="option.name | translate"
@@ -9,7 +10,7 @@
         class="adf-facet-filter">
         <div matTooltip="{{ option.name | translate }}"
             matTooltipPosition="right"
-            class="facet-name">
+            class="adf-search-check-list-label">
             {{ option.name | translate }}
         </div>
 
diff --git a/lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.scss b/lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.scss
index 936267870d..198ee75856 100644
--- a/lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.scss
+++ b/lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.scss
@@ -3,20 +3,14 @@
     flex-direction: column;
 
     .adf-facet-filter {
-        &.mat-checkbox {
-            display: block;
-        }
+        display: block;
 
-        .mat-checkbox-label {
+        .adf-search-check-list-label {
             text-overflow: ellipsis;
             overflow: hidden;
             width: 100%;
         }
 
-        .mat-checkbox-layout {
-            width: 100%;
-        }
-
         .adf-facet-name {
             text-overflow: ellipsis;
             overflow: hidden;
diff --git a/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.html b/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.html
index 2082007384..91b08741e0 100644
--- a/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.html
+++ b/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.html
@@ -1,18 +1,18 @@
 <mat-form-field class="adf-chip-list" appearance="outline">
     <mat-chip-list #chipList [attr.aria-label]="'SEARCH.FILTER.ARIA-LABEL.OPTIONS-SELECTION' | translate">
         <mat-chip
-            class="adf-option-chips"
+            class="adf-option-chips adf-autocomplete-added-option-chips"
             *ngFor="let option of selectedOptions"
             (removed)="remove(option)">
             <span [matTooltip]="'SEARCH.RESULTS.WILL_CONTAIN' | translate:{searchTerm: option.fullPath}"
                   [matTooltipDisabled]="!option.fullPath" [matTooltipShowDelay]="tooltipShowDelay">
                 {{ option.value }}
             </span>
-            <button matChipRemove class="adf-option-chips-delete-button" [matTooltipDisabled]="!option.fullPath"
+            <button matChipRemove class="adf-option-chips-delete-button adf-autocomplete-added-option-chips-delete-button" [matTooltipDisabled]="!option.fullPath"
                     [matTooltip]="('SEARCH.FILTER.BUTTONS.REMOVE' | translate) + ' \'' + option.fullPath + '\''"
                     [matTooltipShowDelay]="tooltipShowDelay"
                     [attr.aria-label]="('SEARCH.FILTER.BUTTONS.REMOVE' | translate) + ' ' + option.value">
-                <mat-icon class="adf-option-chips-delete-icon">close</mat-icon>
+                <mat-icon class="adf-option-chips-delete-icon adf-autocomplete-added-option-chips-delete-icon">close</mat-icon>
             </button>
         </mat-chip>
         <input
@@ -37,6 +37,7 @@
                 [matTooltipDisabled]="!option.fullPath" matTooltipPosition="right"
                 [attr.data-automation-id]="'option-' + (option.value)"
                 [matTooltip]="'SEARCH.RESULTS.WILL_CONTAIN' | translate:{searchTerm: option.fullPath || option.value}"
+                class="adf-search-chip-autocomplete-added-option"
                 [ngClass]="(option | adfIsIncluded: selectedOptions : compareOption) && 'adf-autocomplete-added-option'">
                 {{ option.fullPath || option.value }}
             </mat-option>
diff --git a/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss b/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss
index ced2a9d4a1..5d85411cd1 100644
--- a/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss
+++ b/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss
@@ -1,17 +1,14 @@
 adf-search-chip-autocomplete-input {
     .adf-chip-list {
         width: 100%;
+
+        /* stylelint-disable-next-line */
+        .mat-form-field-infix {
+            border: none;
+        }
     }
 
-    .mat-form-field-appearance-outline .mat-form-field-outline {
-        top: 0;
-    }
-
-    .mat-form-field-infix {
-        border: none;
-    }
-
-    .mat-chip.adf-option-chips {
+    .adf-autocomplete-added-option-chips.adf-option-chips {
         border: 1px solid var(--theme-text-color);
         border-radius: 10px;
         background-color: var(--theme-primary-color-default-contrast);
@@ -19,32 +16,20 @@ adf-search-chip-autocomplete-input {
         word-break: break-word;
     }
 
-    .mat-chip-remove.adf-option-chips-delete-button {
+    .adf-option-chips-delete-button.adf-autocomplete-added-option-chips-delete-button {
         font-size: 13px;
         height: 13px;
         width: 13px;
 
-        .adf-option-chips-delete-icon.mat-icon {
+        .adf-option-chips-delete-icon.adf-autocomplete-added-option-chips-delete-icon {
             font-size: 13px;
             height: 13px;
             width: 13px;
         }
     }
-
-    .mat-chip-list-wrapper {
-        min-height: 40px;
-    }
-
-    .mat-form-field-wrapper {
-        padding: 0;
-    }
 }
 
-.mat-tooltip-hide {
-    display: none;
-}
-
-.mat-option.adf-autocomplete-added-option {
+.adf-search-chip-autocomplete-added-option.adf-autocomplete-added-option {
     background: var(--adf-theme-mat-grey-color-a200);
     color: var(--adf-theme-primary-300);
 }
diff --git a/lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.html b/lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.html
index 1090d59cec..451d5c5e51 100644
--- a/lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.html
+++ b/lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.html
@@ -4,6 +4,7 @@
             data-automation-id="reset-filter"
             color="primary"
             selected
+            class="adf-search-chip-list-item"
             matTooltip="{{ 'SEARCH.FILTER.BUTTONS.CLEAR-ALL.TOOLTIP' | translate }}"
             matTooltipPosition="right"
             (click)="facetFiltersService.resetAllSelectedBuckets()">
@@ -12,11 +13,12 @@
 
         <mat-chip
             data-automation-id="chip-list-entry"
+            class="adf-search-chip-list-item"
             *ngFor="let selection of facetFiltersService.selectedBuckets"
             [removable]="true"
             (removed)="facetFiltersService.unselectFacetBucket(selection.field, selection.bucket)">
             {{ (selection.bucket.display || selection.bucket.label) | translate }}
-            <mat-icon matChipRemove>cancel</mat-icon>
+            <mat-icon class="adf-search-chip-list-item-remove" matChipRemove>cancel</mat-icon>
         </mat-chip>
     </ng-container>
 </mat-chip-list>
diff --git a/lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.scss b/lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.scss
index d1e581d6a9..2728353f52 100644
--- a/lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.scss
+++ b/lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.scss
@@ -1,8 +1,8 @@
-.mat-chip:focus {
+.adf-search-chip-list-item:focus {
     color: var(--theme-accent-color-default-contrast);
     background-color: var(--theme-accent-color);
 
-    .mat-chip-remove {
+    .adf-search-chip-list-item-remove {
         color: var(--theme-accent-color-default-contrast);
         opacity: 1;
     }
diff --git a/lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.html b/lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.html
index 1b0de7df58..4fcaec861c 100644
--- a/lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.html
+++ b/lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.html
@@ -2,7 +2,7 @@
     <div class="adf-facet-result-filter">
         <div class="adf-facet-search-container">
             <button mat-icon-button class="adf-facet-search-icon" tabindex="-1">
-                <mat-icon>search</mat-icon>
+                <mat-icon class="adf-search-field-icon">search</mat-icon>
             </button>
             <mat-form-field class="adf-facet-search-field" floatLabel="never">
                 <input matInput placeholder="{{ 'SEARCH.FILTER.ACTIONS.SEARCH' | translate }}"
@@ -19,9 +19,12 @@
     <div class="adf-checklist">
         <mat-checkbox *ngFor="let bucket of field.buckets" [checked]="bucket.checked"
             [attr.data-automation-id]="'checkbox-'+field.label+'-'+(bucket.display || bucket.label)"
-            (change)="onToggleBucket($event, field, bucket)">
+            (change)="onToggleBucket($event, field, bucket)"
+            class="adf-search-filter-facet-checkbox">
             <div matTooltip="{{ bucket.display || bucket.label | translate }} {{ getBucketCountDisplay(bucket) }}"
-                matTooltipPosition="right" class="adf-facet-label">
+                matTooltipPosition="right"
+                class="adf-facet-label"
+                [class.adf-search-filter-facet-checkbox-checked]='bucket.checked'>
                 {{ bucket.display || bucket.label | translate }} {{ getBucketCountDisplay(bucket) }}
             </div>
         </mat-checkbox>
diff --git a/lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.scss b/lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.scss
index 894fa64168..9b1f9ee8fa 100644
--- a/lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.scss
+++ b/lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.scss
@@ -7,26 +7,10 @@
         padding: 5px 0;
         overflow-y: auto;
 
-        .mat-checkbox-label {
-            text-overflow: ellipsis;
-            overflow: hidden;
-            width: 100%;
-        }
-
-        .mat-checkbox-layout {
-            width: 100%;
-        }
-
-        .adf-facet-label {
-            text-overflow: ellipsis;
-            overflow: hidden;
-            white-space: nowrap;
-        }
-
-        .mat-checkbox {
+        .adf-search-filter-facet-checkbox {
             margin: 5px;
 
-            &.mat-checkbox-checked .mat-checkbox-label {
+            .adf-search-filter-facet-checkbox-checked {
                 font-weight: bold;
             }
         }
@@ -45,7 +29,7 @@
                 width: 27px;
                 margin-top: -4px;
 
-                .mat-icon {
+                .adf-search-field-icon {
                     font-size: var(--theme-subheading-1-font-size);
                 }
             }
@@ -57,14 +41,6 @@
                 font-size: var(--theme-body-1-font-size);
                 line-height: 24px;
                 letter-spacing: 0.25px;
-
-                .mat-form-field-underline {
-                    display: none;
-                }
-
-                .mat-form-field-suffix {
-                    padding-right: 1px;
-                }
             }
         }
     }
@@ -72,7 +48,7 @@
     .adf-facet-buttons {
         text-align: right;
 
-        .mat-button {
+        button {
             text-transform: uppercase;
         }
 
@@ -81,8 +57,7 @@
         }
     }
 
-    .mat-checkbox-label,
-    .mat-radio-label {
+    .adf-facet-label {
         color: var(--adf-theme-foreground-text-color-054);
     }
 }
diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip-tabbed/search-facet-chip-tabbed.component.scss b/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip-tabbed/search-facet-chip-tabbed.component.scss
index fcc7c885c3..fe421ccb65 100644
--- a/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip-tabbed/search-facet-chip-tabbed.component.scss
+++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip-tabbed/search-facet-chip-tabbed.component.scss
@@ -9,9 +9,3 @@ adf-search-facet-chip-tabbed {
         max-width: 500px;
     }
 }
-
-adf-search-filter-tabbed {
-    .mat-tab-body-wrapper {
-        margin-top: 16px;
-    }
-}
diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.html b/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.html
index 4f014722b9..b32eda5a93 100644
--- a/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.html
+++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.html
@@ -1,6 +1,6 @@
 <mat-chip [attr.data-automation-id]="'search-filter-chip-' + field.label"
           disableRipple
-          class="adf-search-filter-chip"
+          class="adf-search-filter-chip adf-search-filter-facet-chip"
           [class.adf-search-toggle-chip]="(facetField.displayValue$ | async) || menuTrigger.menuOpen"
           [disabled]="!isPopulated()"
           tabIndex="0"
diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.scss b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.scss
index 3277cbb268..44bdc06085 100644
--- a/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.scss
+++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.scss
@@ -2,35 +2,16 @@
 
 .adf-search-filter-chip,
 .adf-search-filter-chip-tabbed {
-    &.mat-chip {
-        border: 2px solid transparent;
-        transition: border 500ms ease-in-out;
-        max-width: 320px;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        background: var(--adf-theme-background-unselected-chip-color);
-
-        &:focus {
-            color: unset;
-        }
-
-        &.mat-standard-chip::after {
-            background: var(--adf-theme-background-unselected-chip-color);
-            color: unset;
-        }
-
-        &.mat-chip-list-wrapper {
-            margin: 4px 6px;
-        }
-    }
+    border: 2px solid transparent;
+    transition: border 500ms ease-in-out;
+    max-width: 320px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    background: var(--adf-theme-background-unselected-chip-color);
 
     &.adf-search-toggle-chip {
         background: var(--adf-theme-background-card-color);
         border: 2px solid var(--theme-primary-color);
-
-        &.mat-chip::after {
-            background: unset;
-        }
     }
 
     .adf-search-filter-placeholder {
@@ -39,6 +20,11 @@
         color: var(--adf-theme-foreground-disabled-text-color);
     }
 
+    &.adf-search-filter-facet-chip::after {
+        background: var(--adf-theme-background-unselected-chip-color);
+        color: unset;
+    }
+
     .adf-search-filter-ellipsis {
         overflow: hidden;
         text-overflow: ellipsis;
@@ -50,12 +36,12 @@
         font-weight: 500;
     }
 
-    .mat-icon {
+    .adf-search-filter-chip-icon {
         padding-top: 5px;
         padding-left: 5px;
     }
 
-    &-menu + * .cdk-overlay-pane .mat-menu-panel {
+    &-menu + * .adf-search-filter-chip-menu-panel {
         min-width: 320px;
         border-radius: 12px;
 
diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.html b/lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.html
index 75bbbe6403..5ef712147b 100644
--- a/lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.html
+++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.html
@@ -16,10 +16,10 @@
         &nbsp;{{ displayValue | translate }}
     </span>
     <ng-template #showAny><span class="adf-search-filter-ellipsis adf-filter-value">&nbsp;{{ 'SEARCH.FILTER.ANY' | translate }}</span></ng-template>
-    <mat-icon>{{ chipIcon }}</mat-icon>
+    <mat-icon class="adf-search-filter-chip-icon">{{ chipIcon }}</mat-icon>
 </mat-chip>
 
-<mat-menu #menu="matMenu" class="adf-search-widget-extra-width" backdropClass="adf-search-filter-chip-menu" [class]="'adf-search-filter-chip-menu-panel-' + category.id" (closed)="onClosed()">
+<mat-menu #menu="matMenu" class="adf-search-widget-extra-width" backdropClass="adf-search-filter-chip-menu" [class]="'adf-search-filter-chip-menu-panel adf-search-filter-chip-menu-panel-' + category.id" (closed)="onClosed()">
     <div #menuContainer [attr.data-automation-id]="'search-field-' + category.name">
         <adf-search-filter-menu-card (click)="$event.stopPropagation()"
                                      (keydown.tab)="$event.stopPropagation();"
diff --git a/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.html b/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.html
index da123c2eee..f4fc8c6c37 100644
--- a/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.html
+++ b/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.html
@@ -19,7 +19,7 @@
     </button>
 
     <mat-menu #filter="matMenu"
-              class="adf-filter-menu"
+              class="adf-filter-menu adf-search-filter-menu"
               (closed)="onClosed()">
         <div #filterContainer
               role="menuitem"
diff --git a/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.scss b/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.scss
index 0fede8f85b..37c91336f3 100644
--- a/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.scss
+++ b/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.scss
@@ -8,19 +8,16 @@
 
             &-active {
                 color: var(--theme-primary-color);
-            }
 
-            .mat-badge-active {
-                border: 2px solid var(--adf-theme-background-card-color) !important;
+                span {
+                    border: 2px solid var(--adf-theme-background-card-color) !important;
+                    width: 10px;
+                    height: 10px;
+                    top: -3px !important;
+                    right: -6px !important;
+                }
             }
         }
-
-        .mat-badge-content {
-            width: 10px;
-            height: 10px;
-            top: -3px !important;
-            right: -6px !important;
-        }
     }
 
     &-container {
@@ -61,7 +58,10 @@
     }
 }
 
-.mat-menu-panel.adf-filter-menu .mat-menu-content {
+.adf-search-filter-menu.adf-filter-menu {
     min-width: 260px;
-    padding: 0;
+
+    > div:first-child {
+        padding: 0;
+    }
 }
diff --git a/lib/content-services/src/lib/search/components/search-filter-tabbed/search-filter-tabbed.component.html b/lib/content-services/src/lib/search/components/search-filter-tabbed/search-filter-tabbed.component.html
index 558c13b1ee..32e951ba6d 100644
--- a/lib/content-services/src/lib/search/components/search-filter-tabbed/search-filter-tabbed.component.html
+++ b/lib/content-services/src/lib/search/components/search-filter-tabbed/search-filter-tabbed.component.html
@@ -1,5 +1,7 @@
-<mat-tab-group>
-    <mat-tab *ngFor="let tabContent of tabsContents" label="{{tabContent.name | translate}}">
+<mat-tab-group (selectedIndexChange)="onTabIndexChanged($event)">
+    <mat-tab *ngFor="let tabContent of tabsContents; let i = index"
+             [labelClass]='selectedIndex === i ? "adf-search-tab-label-active" : ""'
+             label="{{tabContent.name | translate}}">
         <ng-container *ngTemplateOutlet="tabContent.templateRef"></ng-container>
     </mat-tab>
 </mat-tab-group>
diff --git a/lib/content-services/src/lib/search/components/search-filter-tabbed/search-filter-tabbed.component.scss b/lib/content-services/src/lib/search/components/search-filter-tabbed/search-filter-tabbed.component.scss
index fa74c8d502..3f66d6b218 100644
--- a/lib/content-services/src/lib/search/components/search-filter-tabbed/search-filter-tabbed.component.scss
+++ b/lib/content-services/src/lib/search/components/search-filter-tabbed/search-filter-tabbed.component.scss
@@ -1,20 +1,5 @@
 adf-search-filter-tabbed {
-    .mat-tab-label {
-        flex: 1;
-
-        &.mat-tab-label-active {
-            border-bottom: 2px solid var(--theme-primary-color);
-        }
-    }
-
-    // The important tag is used here as a workaround for a bug in angular material, when MatTabs are used in conjunction with MatMenu
-    // https://github.com/angular/components/issues/27426
-    .mat-tab-body.mat-tab-body-active .mat-tab-body-content {
-        display: block;
-        visibility: visible !important;
-    }
-
-    .mat-ink-bar {
-        display: none;
+    .adf-search-tab-label-active {
+        border-bottom: 2px solid var(--theme-primary-color);
     }
 }
diff --git a/lib/content-services/src/lib/search/components/search-filter-tabbed/search-filter-tabbed.component.ts b/lib/content-services/src/lib/search/components/search-filter-tabbed/search-filter-tabbed.component.ts
index 50a03adff7..8d4c76516f 100644
--- a/lib/content-services/src/lib/search/components/search-filter-tabbed/search-filter-tabbed.component.ts
+++ b/lib/content-services/src/lib/search/components/search-filter-tabbed/search-filter-tabbed.component.ts
@@ -27,4 +27,10 @@ import { SearchFilterTabDirective } from './search-filter-tab.directive';
 export class SearchFilterTabbedComponent {
     @ContentChildren(SearchFilterTabDirective)
     tabsContents: QueryList<SearchFilterTabDirective>;
+
+    selectedIndex: number = 0;
+
+    onTabIndexChanged(index: number): void {
+        this.selectedIndex = index;
+    }
 }
diff --git a/lib/content-services/src/lib/search/components/search-filter/search-filter.component.html b/lib/content-services/src/lib/search/components/search-filter/search-filter.component.html
index 8a6b47682c..487cf4068d 100644
--- a/lib/content-services/src/lib/search/components/search-filter/search-filter.component.html
+++ b/lib/content-services/src/lib/search/components/search-filter/search-filter.component.html
@@ -13,7 +13,7 @@
         [attr.data-automation-id]="'expansion-panel-'+category.name"
         [(expanded)]="category.expanded">
         <mat-expansion-panel-header>
-            <mat-panel-title>
+            <mat-panel-title class="adf-search-filter-header-title">
                 {{ category.name | translate }}
             </mat-panel-title>
         </mat-expansion-panel-header>
@@ -25,7 +25,7 @@
     <ng-container *ngIf="facetFiltersService.tabbedFacet && showContextFacets">
         <mat-expansion-panel [attr.data-automation-id]="'expansion-panel-'+facetFiltersService.tabbedFacet.label" [expanded]="true">
             <mat-expansion-panel-header>
-                <mat-panel-title>{{ facetFiltersService.tabbedFacet.label | translate }}</mat-panel-title>
+                <mat-panel-title class="adf-search-filter-header-title">{{ facetFiltersService.tabbedFacet.label | translate }}</mat-panel-title>
             </mat-expansion-panel-header>
             <adf-search-facet-tabbed-content
                 [tabbedFacet]="facetFiltersService.tabbedFacet"
@@ -38,7 +38,7 @@
         <mat-expansion-panel [attr.data-automation-id]="'expansion-panel-'+field.label" *ngFor="let field of facetFiltersService.responseFacets"
                              [expanded]="shouldExpand(field)">
             <mat-expansion-panel-header>
-                <mat-panel-title>{{ field.label | translate }}</mat-panel-title>
+                <mat-panel-title class="adf-search-filter-header-title">{{ field.label | translate }}</mat-panel-title>
             </mat-expansion-panel-header>
 
             <adf-search-facet-field [field]="field"></adf-search-facet-field>
diff --git a/lib/content-services/src/lib/search/components/search-filter/search-filter.component.scss b/lib/content-services/src/lib/search/components/search-filter/search-filter.component.scss
index 275ecf1bf1..8b54e3bbef 100644
--- a/lib/content-services/src/lib/search/components/search-filter/search-filter.component.scss
+++ b/lib/content-services/src/lib/search/components/search-filter/search-filter.component.scss
@@ -1,11 +1,10 @@
 .adf-search-filter {
-    .mat-expansion-panel-header-title {
+    .adf-search-filter-header-title {
         font-size: var(--theme-body-1-font-size);
         color: var(--adf-theme-foreground-text-color-087);
     }
 
-    .mat-checkbox-label,
-    .mat-radio-label {
+    .adf-search-check-list-label {
         color: var(--adf-theme-foreground-text-color-054);
     }
 }
diff --git a/lib/content-services/src/lib/search/components/search-form/search-form.component.html b/lib/content-services/src/lib/search/components/search-form/search-form.component.html
index 3dd0dd86e6..3057b6749d 100644
--- a/lib/content-services/src/lib/search/components/search-form/search-form.component.html
+++ b/lib/content-services/src/lib/search/components/search-form/search-form.component.html
@@ -1,7 +1,7 @@
 <ng-container *ngIf="queryBuilder.searchForms | async as forms">
 
     <ng-container *ngIf="forms.length === 1">
-        <button class="adf-search-form"
+        <button class="adf-search-form adf-search-form-button"
                 disableRipple mat-button
                 [title]="getSelected(forms) | translate"
                 [attr.aria-label]="getSelected(forms) | translate">
@@ -12,7 +12,7 @@
     </ng-container>
 
     <ng-container  *ngIf="forms.length > 1">
-        <button class="adf-search-form"
+        <button class="adf-search-form adf-search-form-button"
                 [matMenuTriggerFor]="menu"
                 #menuTrigger="matMenuTrigger"
                 disableRipple
@@ -28,7 +28,7 @@
             <mat-icon [class.adf-search-form-icon-selected]="menuTrigger.menuOpen" class="adf-search-form-icon">expand_more</mat-icon>
         </button>
 
-        <mat-menu #menu="matMenu" backdropClass="adf-search-form-menu">
+        <mat-menu #menu="matMenu" class="adf-search-form-menu">
             <button *ngFor="let form of forms"
                     mat-menu-item
                     tabindex="0"
diff --git a/lib/content-services/src/lib/search/components/search-form/search-form.component.scss b/lib/content-services/src/lib/search/components/search-form/search-form.component.scss
index 32a6efea66..b908b35bec 100644
--- a/lib/content-services/src/lib/search/components/search-form/search-form.component.scss
+++ b/lib/content-services/src/lib/search/components/search-form/search-form.component.scss
@@ -1,14 +1,14 @@
 @use '@angular/material' as mat;
 
 .adf-search-form {
-    &.mat-button {
+    &.adf-search-form-button {
         height: 35px;
         max-width: 190px;
         min-width: 190px;
         align-content: center;
         overflow: hidden;
 
-        .mat-button-wrapper {
+        > span:first-child {
             display: flex;
             align-items: center;
         }
@@ -35,14 +35,14 @@
     &-icon-selected {
         border-color: var(--theme-accent-color);
     }
+}
 
-    &-menu + * .mat-menu-panel {
-        @include mat.elevation(2);
+.adf-search-form-menu {
+    @include mat.elevation(2);
 
-        border-radius: 6px;
+    border-radius: 6px;
 
-        .mat-menu-content {
-            padding: 0;
-        }
+    > div:first-child {
+        padding: 0;
     }
 }
diff --git a/lib/content-services/src/lib/search/components/search-properties/search-properties.component.scss b/lib/content-services/src/lib/search/components/search-properties/search-properties.component.scss
index c9f27a09c1..09b224fad6 100644
--- a/lib/content-services/src/lib/search/components/search-properties/search-properties.component.scss
+++ b/lib/content-services/src/lib/search/components/search-properties/search-properties.component.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable selector-class-pattern */
 adf-search-properties {
     .adf-search-properties-file-size-label {
         display: block;
diff --git a/lib/content-services/src/lib/search/components/search-radio/search-radio.component.html b/lib/content-services/src/lib/search/components/search-radio/search-radio.component.html
index 0bd62fe2e2..794673eb17 100644
--- a/lib/content-services/src/lib/search/components/search-radio/search-radio.component.html
+++ b/lib/content-services/src/lib/search/components/search-radio/search-radio.component.html
@@ -1,4 +1,5 @@
 <mat-radio-group
+    class="adf-search-radio-group"
     [(ngModel)]="value"
     (change)="changeHandler($event)">
     <mat-radio-button [attr.data-automation-id]="'search-radio-'+(option.name | translate)"
@@ -8,7 +9,7 @@
         <div
             matTooltip="{{ option.name | translate }}"
             matTooltipPosition="right"
-            class="filter-label">
+            class="adf-filter-label">
             {{ option.name | translate }}
         </div>
     </mat-radio-button>
diff --git a/lib/content-services/src/lib/search/components/search-radio/search-radio.component.scss b/lib/content-services/src/lib/search/components/search-radio/search-radio.component.scss
index dbbcd0c374..1ceb4243e3 100644
--- a/lib/content-services/src/lib/search/components/search-radio/search-radio.component.scss
+++ b/lib/content-services/src/lib/search/components/search-radio/search-radio.component.scss
@@ -1,23 +1,11 @@
 .adf-search-radio {
-    .mat-radio-group {
+    .adf-search-radio-group {
         display: flex;
         flex-direction: column;
     }
 
-    .mat-radio-button {
-        margin: 5px;
-    }
-
     .adf-facet-filter {
-        .mat-radio-label-content {
-            text-overflow: ellipsis;
-            overflow: hidden;
-            width: 100%;
-        }
-
-        .mat-radio-label {
-            width: 100%;
-        }
+        margin: 5px;
 
         .adf-filter-label {
             text-overflow: ellipsis;
diff --git a/lib/content-services/src/lib/search/components/search-slider/search-slider.component.html b/lib/content-services/src/lib/search/components/search-slider/search-slider.component.html
index e5f4bab942..8de1e24d98 100644
--- a/lib/content-services/src/lib/search/components/search-slider/search-slider.component.html
+++ b/lib/content-services/src/lib/search/components/search-slider/search-slider.component.html
@@ -5,6 +5,7 @@
     [step]="step"
     [thumbLabel]="thumbLabel"
     (change)="onChangedHandler($event)"
+    class="adf-search-slider"
     data-automation-id="slider-range">
 </mat-slider>
 
diff --git a/lib/content-services/src/lib/search/components/search-slider/search-slider.component.scss b/lib/content-services/src/lib/search/components/search-slider/search-slider.component.scss
index 2f05890816..0733495966 100644
--- a/lib/content-services/src/lib/search/components/search-slider/search-slider.component.scss
+++ b/lib/content-services/src/lib/search/components/search-slider/search-slider.component.scss
@@ -1,5 +1,3 @@
 .adf-search-slider {
-    .mat-slider {
-        width: 100%;
-    }
+    width: 100%;
 }
diff --git a/lib/content-services/src/lib/search/components/search-sorting-picker/search-sorting-picker.component.scss b/lib/content-services/src/lib/search/components/search-sorting-picker/search-sorting-picker.component.scss
index 4e3d6bb66c..a36bc2f622 100644
--- a/lib/content-services/src/lib/search/components/search-sorting-picker/search-sorting-picker.component.scss
+++ b/lib/content-services/src/lib/search/components/search-sorting-picker/search-sorting-picker.component.scss
@@ -1,5 +1,5 @@
 .adf-search-sorting-picker {
-    .mat-icon-button {
+    .adf-sorting-picker-button {
         color: var(--adf-theme-foreground-text-color-054);
     }
 }
diff --git a/lib/content-services/src/lib/search/components/search-text/search-text.component.html b/lib/content-services/src/lib/search/components/search-text/search-text.component.html
index fedfd6393f..428a429ab5 100644
--- a/lib/content-services/src/lib/search/components/search-text/search-text.component.html
+++ b/lib/content-services/src/lib/search/components/search-text/search-text.component.html
@@ -1,4 +1,4 @@
-<mat-form-field>
+<mat-form-field class="adf-search-text-form-field">
     <input
         matInput
         placeholder="{{ settings?.placeholder | translate }}"
diff --git a/lib/content-services/src/lib/search/components/search-text/search-text.component.scss b/lib/content-services/src/lib/search/components/search-text/search-text.component.scss
index c617acaf08..e8ade73333 100644
--- a/lib/content-services/src/lib/search/components/search-text/search-text.component.scss
+++ b/lib/content-services/src/lib/search/components/search-text/search-text.component.scss
@@ -1,5 +1,5 @@
 .adf-search-text {
-    .mat-form-field {
+    .adf-search-text-form-field {
         width: 100%;
         max-width: 168px;
     }
diff --git a/lib/content-services/src/lib/site-dropdown/sites-dropdown.component.html b/lib/content-services/src/lib/site-dropdown/sites-dropdown.component.html
index e8140751dd..bb5647dbe6 100644
--- a/lib/content-services/src/lib/site-dropdown/sites-dropdown.component.html
+++ b/lib/content-services/src/lib/site-dropdown/sites-dropdown.component.html
@@ -1,5 +1,5 @@
 <div id="site-dropdown-container" class="adf-site-dropdown-container">
-    <mat-form-field>
+    <mat-form-field class="adf-sites-dropdown-form-field">
         <mat-label>{{ 'NODE_SELECTOR.LOCATION' | translate }}</mat-label>
         <mat-select
             adf-infinite-select-scroll
@@ -12,6 +12,9 @@
             floatPlaceholder="never"
             [(value)]="selected"
             (selectionChange)="selectedSite($event)">
+            <mat-select-trigger class="adf-sites-dropdown-select-trigger">
+                {{ selected?.entry.title | translate}}
+            </mat-select-trigger>
             <mat-option *ngFor="let site of siteList?.list.entries;" [value]="site">
                 {{ site.entry.title | translate}}
             </mat-option>
diff --git a/lib/content-services/src/lib/site-dropdown/sites-dropdown.component.scss b/lib/content-services/src/lib/site-dropdown/sites-dropdown.component.scss
deleted file mode 100644
index d3d5abc34f..0000000000
--- a/lib/content-services/src/lib/site-dropdown/sites-dropdown.component.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.adf-sites-dropdown {
-    &.adf-full-width {
-        .mat-form-field {
-            width: 100%;
-        }
-    }
-}
diff --git a/lib/content-services/src/lib/site-dropdown/sites-dropdown.component.ts b/lib/content-services/src/lib/site-dropdown/sites-dropdown.component.ts
index d65654aad1..0d8d2d2a58 100644
--- a/lib/content-services/src/lib/site-dropdown/sites-dropdown.component.ts
+++ b/lib/content-services/src/lib/site-dropdown/sites-dropdown.component.ts
@@ -33,7 +33,6 @@ export enum Relations {
 
 @Component({
     selector: 'adf-sites-dropdown',
-    styleUrls: ['./sites-dropdown.component.scss'],
     templateUrl: './sites-dropdown.component.html',
     encapsulation: ViewEncapsulation.None,
     host: { class: 'adf-sites-dropdown' }
diff --git a/lib/content-services/src/lib/social/rating.component.scss b/lib/content-services/src/lib/social/rating.component.scss
index 99e22d3078..a0ae86c0d2 100644
--- a/lib/content-services/src/lib/social/rating.component.scss
+++ b/lib/content-services/src/lib/social/rating.component.scss
@@ -23,10 +23,6 @@ $adf-average-star-color: #808080;
         cursor: pointer;
         width: 25px;
 
-        .mat-list-item-content {
-            padding: 0 !important;
-        }
-
         &:hover {
             transform: rotate(13deg) scale(1.2);
         }
diff --git a/lib/content-services/src/lib/tag/tag-list.component.html b/lib/content-services/src/lib/tag/tag-list.component.html
index 9c9d678ca9..4a23bc3c12 100644
--- a/lib/content-services/src/lib/tag/tag-list.component.html
+++ b/lib/content-services/src/lib/tag/tag-list.component.html
@@ -1,6 +1,6 @@
 <mat-chip-list class="adf-tag-chips-list">
     <div class="adf-list-tag" *ngFor="let currentEntry of tagsEntries; let idx = index">
-        <mat-chip>
+        <mat-chip class="adf-tag-list-chip">
             <span id="tag_name_{{idx}}">{{currentEntry.entry.tag}}</span>
         </mat-chip>
     </div>
diff --git a/lib/content-services/src/lib/tag/tag-list.component.scss b/lib/content-services/src/lib/tag/tag-list.component.scss
index cb06582d20..1f99e5cc65 100644
--- a/lib/content-services/src/lib/tag/tag-list.component.scss
+++ b/lib/content-services/src/lib/tag/tag-list.component.scss
@@ -12,13 +12,9 @@
             display: block;
             font-size: var(--theme-subheading-2-font-size);
 
-            .mat-chip {
+            .adf-tag-list-chip {
                 color: var(--theme-primary-color-default-contrast);
                 background-color: var(--theme-primary-color);
-
-                .mat-icon {
-                    color: var(--theme-primary-color-default-contrast);
-                }
             }
         }
     }
diff --git a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.html b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.html
index 581e4093a0..ce395e6b05 100644
--- a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.html
+++ b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.html
@@ -47,20 +47,20 @@
         {{ (isOnlyCreateMode() ? 'TAG.TAGS_CREATOR.EXISTING_TAGS' : 'TAG.TAGS_CREATOR.EXISTING_TAGS_SELECTION') | translate }}
     </p>
     <div class="adf-tags-list">
-        <mat-selection-list
+        <mat-list
             *ngIf="!spinnerVisible && existingTags"
-            (selectionChange)="addExistingTagToTagsToAssign($event)"
             [disabled]="isOnlyCreateMode()">
-            <mat-list-option
+            <mat-list-item
                 *ngFor="let tagRow of existingTags"
                 class="adf-tag"
-                [value]="tagRow">
+                (click)='addExistingTagToTagsToAssign(tagRow)'>
                 {{ tagRow.entry.tag }}
-            </mat-list-option>
+            </mat-list-item>
             <p *ngIf="!existingTags?.length">{{ 'TAG.TAGS_CREATOR.NO_EXISTING_TAGS' | translate }}</p>
-        </mat-selection-list>
+        </mat-list>
         <mat-spinner
             *ngIf="spinnerVisible"
+            class="adf-tags-creator-spinner"
             [diameter]="50"
             [attr.aria-label]="'TAG.TAGS_CREATOR.TAGS_LOADING' | translate">
         </mat-spinner>
diff --git a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.scss b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.scss
index 92158d7666..724a9b5aa8 100644
--- a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.scss
+++ b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.scss
@@ -94,38 +94,25 @@ adf-tags-creator {
                 height: auto;
                 width: unset;
 
+                &:hover {
+                    cursor: pointer;
+                    background: var(--adf-theme-mat-grey-color-a200);
+                }
+
+                & span {
+                    padding: 0;
+                }
+
                 & + .adf-tag {
                     margin-top: -10px;
                 }
-
-                .mat-list-item-content-reverse {
-                    padding: 0;
-
-                    .mat-pseudo-checkbox {
-                        display: none;
-                    }
-                }
             }
 
-            mat-spinner {
+            .adf-tags-creator-spinner {
                 margin: auto;
                 overflow: unset;
                 min-height: 62px;
             }
-
-            .mat-list-item-disabled {
-                background-color: inherit;
-                color: inherit;
-            }
-        }
-    }
-
-    mat-dialog-actions {
-        margin-right: -24px;
-        background-color: inherit;
-
-        .adf-save-button {
-            margin-right: 24px;
         }
     }
 
diff --git a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.spec.ts b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.spec.ts
index a7e6bcd11f..f6f9b1bb5b 100644
--- a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.spec.ts
+++ b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.spec.ts
@@ -30,7 +30,7 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { EMPTY, of, throwError } from 'rxjs';
 import { DebugElement } from '@angular/core';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { MatListModule, MatSelectionList, MatSelectionListChange } from '@angular/material/list';
+import { MatListModule } from '@angular/material/list';
 
 describe('TagsCreatorComponent', () => {
     let fixture: ComponentFixture<TagsCreatorComponent>;
@@ -159,15 +159,6 @@ describe('TagsCreatorComponent', () => {
         fixture.detectChanges();
     }
 
-    /**
-     * Find the selection list
-     *
-     * @returns material component
-     */
-    function findSelectionList(): MatSelectionList {
-        return fixture.debugElement.query(By.directive(MatSelectionList)).componentInstance;
-    }
-
     /**
      * Get the existing tags label
      *
@@ -513,8 +504,8 @@ describe('TagsCreatorComponent', () => {
              * @returns list of tags
              */
             function getExistingTags(): string[] {
-                const tagElements = fixture.debugElement.queryAll(By.css(`.adf-existing-tags-panel .adf-tag .mat-list-text`));
-                return tagElements.map(el => el.nativeElement.firstChild.nodeValue.trim());
+                const tagElements = fixture.debugElement.queryAll(By.css(`.adf-existing-tags-panel .adf-tag`));
+                return tagElements.map(el => el.nativeElement.textContent.trim());
             }
 
             it('should call findTagByName on tagService using name set in input', fakeAsync(() => {
@@ -673,38 +664,12 @@ describe('TagsCreatorComponent', () => {
 
             it('should selection be disabled if mode is Create', fakeAsync(() => {
                 component.mode = TagsCreatorMode.CREATE;
-                spyOn(tagService, 'searchTags').and.returnValue(
-                    of({
-                        list: {
-                            entries: [
-                                { entry: { tag: 'tag' } as any }
-                            ],
-                            pagination: {}
-                        }
-                    })
-                );
-
-                typeTag('Tag');
-
-                expect(findSelectionList().disabled).toBeTrue();
+                expect(component.isOnlyCreateMode()).toBeTrue();
             }));
 
             it('should selection be enabled if mode is Create And Assign', fakeAsync(() => {
                 component.mode = TagsCreatorMode.CREATE_AND_ASSIGN;
-                spyOn(tagService, 'searchTags').and.returnValue(
-                    of({
-                        list: {
-                            entries: [
-                                { entry: { tag: 'tag' } as any }
-                            ],
-                            pagination: {}
-                        }
-                    })
-                );
-
-                typeTag('Tag');
-
-                expect(findSelectionList().disabled).toBeFalse();
+                expect(component.isOnlyCreateMode()).toBeFalse();
             }));
 
             it('should select existing tag when selectionChange event emits', fakeAsync(() => {
@@ -724,11 +689,8 @@ describe('TagsCreatorComponent', () => {
                 );
 
                 typeTag('Tag');
-                findSelectionList().selectionChange.emit({
-                    options: [{
-                        value: selectedTag
-                    }]
-                } as MatSelectionListChange);
+
+                component.addExistingTagToTagsToAssign(selectedTag);
                 fixture.detectChanges();
 
                 expect(getAddedTags()).toEqual([selectedTag.entry.tag]);
diff --git a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.ts b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.ts
index 0a383737de..c93143741f 100644
--- a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.ts
+++ b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.ts
@@ -33,7 +33,6 @@ import { debounce, distinctUntilChanged, finalize, first, map, takeUntil, tap }
 import { EMPTY, forkJoin, Observable, Subject, timer } from 'rxjs';
 import { NotificationService } from '@alfresco/adf-core';
 import { TagsCreatorMode } from './tags-creator-mode';
-import { MatSelectionListChange } from '@angular/material/list';
 import { TagService } from '../services/tag.service';
 
 interface TagNameControlErrors {
@@ -278,10 +277,9 @@ export class TagsCreatorComponent implements OnInit, OnDestroy {
     /**
      * Called when user selects any tag from list of existing tags. It moves tag from existing tags list to top list.
      *
-     * @param change changes
+     * @param selectedTag changes
      */
-    addExistingTagToTagsToAssign(change: MatSelectionListChange): void {
-        const selectedTag: TagEntry = change.options[0].value;
+    addExistingTagToTagsToAssign(selectedTag: TagEntry): void {
         this.tags.push(selectedTag.entry.tag);
         this.removeTagFromArray(this.existingTags, selectedTag);
         this.tagNameControl.updateValueAndValidity();
diff --git a/lib/content-services/src/lib/tree-view/components/tree-view.component.html b/lib/content-services/src/lib/tree-view/components/tree-view.component.html
index b30518438a..a63d18f3b1 100644
--- a/lib/content-services/src/lib/tree-view/components/tree-view.component.html
+++ b/lib/content-services/src/lib/tree-view/components/tree-view.component.html
@@ -1,11 +1,11 @@
 <mat-tree class="adf-tree-view-main" [dataSource]="dataSource"
           [treeControl]="treeControl" *ngIf="nodeId; else missingNodeId">
-    <mat-tree-node class="adf-tree-view-node"
+    <mat-tree-node class="adf-tree-view adf-tree-view-node"
         *matTreeNodeDef="let treeNode" id="{{treeNode.name + '-tree-node'}}"
         matTreeNodePadding [matTreeNodePaddingIndent]="15">
         {{treeNode.name}}
     </mat-tree-node>
-    <mat-tree-node class="adf-tree-view-node"
+    <mat-tree-node class="adf-tree-view adf-tree-view-node"
         id="{{treeNode.name + '-tree-child-node'}}" *matTreeNodeDef="let treeNode; when: hasChild"
         matTreeNodePadding [matTreeNodePaddingIndent]="15">
         <button matTreeNodeToggle id="{{'button-'+treeNode.name}}" (click)="onNodeClicked(treeNode.node)"
diff --git a/lib/content-services/src/lib/tree-view/components/tree-view.component.scss b/lib/content-services/src/lib/tree-view/components/tree-view.component.scss
index 1adda3befd..78c9426fd8 100644
--- a/lib/content-services/src/lib/tree-view/components/tree-view.component.scss
+++ b/lib/content-services/src/lib/tree-view/components/tree-view.component.scss
@@ -3,7 +3,7 @@
         color: #d9e022;
     }
 
-    &-tree-view-node.mat-tree-node {
+    &-tree-view-node.adf-tree-view {
         min-height: 40px;
         font-size: var(--theme-caption-font-size);
         align-items: baseline;
diff --git a/lib/content-services/src/lib/version-manager/version-list.component.html b/lib/content-services/src/lib/version-manager/version-list.component.html
index ae91acae47..572b0e2afa 100644
--- a/lib/content-services/src/lib/version-manager/version-list.component.html
+++ b/lib/content-services/src/lib/version-manager/version-list.component.html
@@ -1,12 +1,12 @@
 <mat-progress-bar *ngIf="isLoading" data-automation-id="version-history-loading-bar" mode="indeterminate" color="accent"></mat-progress-bar>
-<mat-list class="adf-version-list" [hidden]="isLoading">
+<mat-list class="adf-version-list adf-version-list-element" [hidden]="isLoading">
     <cdk-virtual-scroll-viewport #viewport itemSize="88" class="adf-version-list-viewport">
-        <mat-list-item *cdkVirtualFor="let version of versionsDataSource; let idx = index; let latestVersion = first">
+        <mat-list-item class="adf-version-list-item" *cdkVirtualFor="let version of versionsDataSource; let idx = index; let latestVersion = first">
             <mat-icon mat-list-icon>insert_drive_file</mat-icon>
-            <p mat-line class="adf-version-list-item-name" [id]="'adf-version-list-item-name-' + version.entry.id" >{{version.entry.name}}</p>
+            <p mat-line class="adf-version-list-item-line adf-version-list-item-name" [id]="'adf-version-list-item-name-' + version.entry.id" >{{version.entry.name}}</p>
             <p mat-line>
-                <span class="adf-version-list-item-version"  [id]="'adf-version-list-item-version-' + version.entry.id" >{{version.entry.id}}</span> -
-                <span class="adf-version-list-item-date"     [id]="'adf-version-list-item-date-' + version.entry.id" >{{version.entry.modifiedAt | date}}</span>
+                <span class="adf-version-list-item-line adf-version-list-item-version" [id]="'adf-version-list-item-version-' + version.entry.id" >{{version.entry.id}}</span> -
+                <span class="adf-version-list-item-line adf-version-list-item-date" [id]="'adf-version-list-item-date-' + version.entry.id" >{{version.entry.modifiedAt | date}}</span>
             </p>
             <p mat-line [id]="'adf-version-list-item-comment-'+ version.entry.id" class="adf-version-list-item-comment"
                *ngIf="showComments">{{version.entry.versionComment}}</p>
diff --git a/lib/content-services/src/lib/version-manager/version-list.component.scss b/lib/content-services/src/lib/version-manager/version-list.component.scss
index e49cb0f09c..c8327ecdc2 100644
--- a/lib/content-services/src/lib/version-manager/version-list.component.scss
+++ b/lib/content-services/src/lib/version-manager/version-list.component.scss
@@ -3,7 +3,7 @@
         height: 100%;
     }
 
-    .mat-list-item-content {
+    .adf-version-list-item {
         border-bottom: 1px solid #d8d8d8;
     }
 
diff --git a/lib/content-services/src/lib/version-manager/version-manager.component.scss b/lib/content-services/src/lib/version-manager/version-manager.component.scss
index 65ac5b6193..1f3136d7fb 100644
--- a/lib/content-services/src/lib/version-manager/version-manager.component.scss
+++ b/lib/content-services/src/lib/version-manager/version-manager.component.scss
@@ -1,15 +1,12 @@
 adf-version-manager {
-    .mat-list .mat-3-line {
+    .adf-version-list .adf-version-list-item {
         height: auto !important;
         width: 100% !important;
-    }
-
-    .mat-list-item-content {
         padding: 16px 0 !important;
     }
 }
 
-.adf-version-list-item-comment.mat-line {
+.adf-version-list-item-comment.adf-version-list-item-line {
     height: 100%;
     word-break: break-all;
     white-space: unset !important;
diff --git a/lib/core/src/lib/about/about-license-list/about-license-list.component.html b/lib/core/src/lib/about/about-license-list/about-license-list.component.html
index d84eb685e5..523bd1c271 100644
--- a/lib/core/src/lib/about/about-license-list/about-license-list.component.html
+++ b/lib/core/src/lib/about/about-license-list/about-license-list.component.html
@@ -3,7 +3,9 @@
     <mat-header-cell *matHeaderCellDef>
       {{ column.header | translate }}
     </mat-header-cell>
-    <mat-cell *matCellDef="let row" [innerHTML]="column.cell(row)"></mat-cell>
+    <mat-cell *matCellDef="let row"
+              class="adf-about-license-cell"
+              [innerHTML]="column.cell(row)"></mat-cell>
   </ng-container>
 
   <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
diff --git a/lib/core/src/lib/about/about-license-list/about-license-list.component.scss b/lib/core/src/lib/about/about-license-list/about-license-list.component.scss
index ed2bfbb093..0251beb465 100644
--- a/lib/core/src/lib/about/about-license-list/about-license-list.component.scss
+++ b/lib/core/src/lib/about/about-license-list/about-license-list.component.scss
@@ -1,4 +1,4 @@
-mat-cell {
+.adf-about-license-cell {
     white-space: pre-line;
     line-height: 30px;
 }
diff --git a/lib/core/src/lib/form/components/form-renderer.component.scss b/lib/core/src/lib/form/components/form-renderer.component.scss
index 5254c61089..47fae71a37 100644
--- a/lib/core/src/lib/form/components/form-renderer.component.scss
+++ b/lib/core/src/lib/form/components/form-renderer.component.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable selector-class-pattern */
 @import 'styles/flex';
 
 .adf-hidden {
diff --git a/lib/core/src/lib/form/components/inplace-form-input/inplace-form-input.component.scss b/lib/core/src/lib/form/components/inplace-form-input/inplace-form-input.component.scss
index 2e60e7605d..ed94dbd088 100644
--- a/lib/core/src/lib/form/components/inplace-form-input/inplace-form-input.component.scss
+++ b/lib/core/src/lib/form/components/inplace-form-input/inplace-form-input.component.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable selector-class-pattern */
 $adf-inplace-input-padding: 7px;
 
 .adf-inplace-input-container {
diff --git a/lib/core/src/lib/form/components/widgets/amount/amount.widget.scss b/lib/core/src/lib/form/components/widgets/amount/amount.widget.scss
index a43212f0d3..7711107cc5 100644
--- a/lib/core/src/lib/form/components/widgets/amount/amount.widget.scss
+++ b/lib/core/src/lib/form/components/widgets/amount/amount.widget.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable selector-class-pattern */
 .adf {
     &-amount-widget {
         width: 100%;
diff --git a/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.scss b/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.scss
index ce89bbcb49..5ff60d8414 100644
--- a/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.scss
+++ b/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable selector-class-pattern */
 .adf {
     &-date-time-widget {
         .mat-form-field-suffix {
diff --git a/lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.scss b/lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.scss
index 326f144b55..4938fb6f41 100644
--- a/lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.scss
+++ b/lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.scss
@@ -2,7 +2,7 @@
     &-multiline-text-widget {
         width: 100%;
 
-        .mat-form-field-label-wrapper {
+        .adf-label {
             top: 20px;
         }
     }
diff --git a/lib/core/src/lib/form/components/widgets/number/number.widget.scss b/lib/core/src/lib/form/components/widgets/number/number.widget.scss
index 9a5867bb6b..59276a274e 100644
--- a/lib/core/src/lib/form/components/widgets/number/number.widget.scss
+++ b/lib/core/src/lib/form/components/widgets/number/number.widget.scss
@@ -2,7 +2,7 @@
     &-number-widget {
         width: 100%;
 
-        .mat-form-field-label-wrapper {
+        .adf-label {
             top: 20px;
         }
     }
diff --git a/lib/core/src/lib/form/components/widgets/text/text.widget.scss b/lib/core/src/lib/form/components/widgets/text/text.widget.scss
index f6c64e84df..85ea3400a5 100644
--- a/lib/core/src/lib/form/components/widgets/text/text.widget.scss
+++ b/lib/core/src/lib/form/components/widgets/text/text.widget.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable selector-class-pattern */
 .adf {
     &-text-widget {
         width: 100%;
diff --git a/lib/core/src/lib/identity-user-info/identity-user-info.component.html b/lib/core/src/lib/identity-user-info/identity-user-info.component.html
index ee782b9fc3..17128e3d70 100644
--- a/lib/core/src/lib/identity-user-info/identity-user-info.component.html
+++ b/lib/core/src/lib/identity-user-info/identity-user-info.component.html
@@ -1,14 +1,12 @@
-<div 
-    id="userinfo_container" 
-    [class.adf-userinfo-name-right]="showOnRight" 
+<div *ngIf="isLoggedIn"
+    id="userinfo_container"
+    [class.adf-userinfo-name-right]="showOnRight"
     (keyup)="onKeyPress($event)"
-    class="adf-userinfo-container" 
-    *ngIf="isLoggedIn"
->
+    class="adf-userinfo-container">
     <span *ngIf="showName" id="adf-userinfo-identity-name-display" class="adf-userinfo-name">
         {{identityUser | fullName}}
     </span>
-    <button mat-button [matMenuTriggerFor]="menu" class="adf-userinfo-menu_button"
+    <button mat-button [matMenuTriggerFor]="menu" class="adf-userinfo-menu_button adf-identity-userinfo-button"
             data-automation-id="adf-user-profile">
         <div class="adf-userinfo-button-profile" id="user-profile">
             <div id="identity-user-image">
@@ -17,25 +15,20 @@
         </div>
     </button>
     <mat-menu #menu="matMenu" id="user-profile-lists" [xPosition]="menuPositionX" [yPosition]="menuPositionY"
-              [overlapTrigger]="false" class="adf-userinfo-menu">
-        <mat-tab-group id="tab-group-env" (click)="stopClosing($event)" selectedIndex="0" role="menuitem"
-                       class="adf-userinfo-tab adf-hide-tab">
-            <mat-tab id="identity-panel" role="dialog">
-                <mat-card class="adf-userinfo-card">
-                    <mat-card-header class="adf-userinfo-card-header"
-                                     [style.background-image]="'url(' + bpmBackgroundImage + ')'">
-                        <div class="mat-title" id="identity-username">{{identityUser | fullName}}</div>
-                    </mat-card-header>
-                    <mat-card-content>
-                        <div class="adf-userinfo-supporting-text">
-                            <h2 id="identity-full-name"
-                                  class="adf-userinfo__detail-title">{{identityUser | fullName}}</h2>
-                            <span id="identity-email"> {{identityUser.email}} </span>
-                            <a href="#/profile"> {{ 'USER_PROFILE.LABELS.MY_PROFILE' | translate }}</a>
-                        </div>
-                    </mat-card-content>
-                </mat-card>
-            </mat-tab>
-        </mat-tab-group>
+              [overlapTrigger]="false" class="adf-userinfo-menu adf-identity-userinfo-menu">
+        <mat-card class="adf-userinfo-card adf-identity-userinfo-card">
+            <mat-card-header class="adf-userinfo-card-header"
+                             [style.background-image]="'url(' + bpmBackgroundImage + ')'">
+                <div class="mat-title" id="identity-username">{{identityUser | fullName}}</div>
+            </mat-card-header>
+            <mat-card-content>
+                <div class="adf-userinfo-supporting-text">
+                    <h2 id="identity-full-name"
+                        class="adf-userinfo__detail-title">{{identityUser | fullName}}</h2>
+                    <span id="identity-email"> {{identityUser.email}} </span>
+                    <a href="#/profile"> {{ 'USER_PROFILE.LABELS.MY_PROFILE' | translate }}</a>
+                </div>
+            </mat-card-content>
+        </mat-card>
     </mat-menu>
 </div>
diff --git a/lib/core/src/lib/identity-user-info/identity-user-info.component.scss b/lib/core/src/lib/identity-user-info/identity-user-info.component.scss
index 7beb2ac4f4..c161ae8c31 100644
--- a/lib/core/src/lib/identity-user-info/identity-user-info.component.scss
+++ b/lib/core/src/lib/identity-user-info/identity-user-info.component.scss
@@ -36,7 +36,7 @@
         display: inline-block;
     }
 
-    &-userinfo-menu_button.mat-button {
+    &-userinfo-menu_button.adf-identity-userinfo-button {
         margin-right: 0;
         border-radius: 90%;
         padding: 0;
@@ -44,21 +44,6 @@
         height: 40px;
     }
 
-    &-userinfo-tab .mat-tab-header {
-        align-self: center;
-        width: 100%;
-        min-width: 250px;
-    }
-
-    &-userinfo-tab .mat-tab-label {
-        flex: auto;
-        font-weight: 500;
-        font-size: var(--theme-body-1-font-size);
-        text-transform: uppercase;
-        line-height: 48px;
-        text-align: center;
-    }
-
     &-userinfo-card-header {
         align-items: center;
         display: flex;
@@ -68,7 +53,7 @@
         box-sizing: border-box;
     }
 
-    &-userinfo-card.mat-card {
+    &-userinfo-card.adf-identity-userinfo-card {
         padding: 0;
     }
 
@@ -103,14 +88,10 @@
         border: 0;
         vertical-align: middle;
     }
-
-    &-hide-tab .mat-tab-label-active {
-        display: none;
-    }
 }
 
 @media only screen and (min-device-width: 480px) {
-    .mat-menu-panel.adf-userinfo-menu {
+    .adf-identity-userinfo-menu.adf-userinfo-menu {
         max-height: 450px;
         min-width: 450px;
         overflow: auto;
@@ -118,6 +99,6 @@
     }
 }
 
-.mat-menu-panel.adf-userinfo-menu .mat-menu-content {
+.adf-identity-userinfo-menu.adf-userinfo-menu > div {
     padding: 0;
 }
diff --git a/lib/core/src/lib/layout/components/header/header.component.html b/lib/core/src/lib/layout/components/header/header.component.html
index b0da719337..94536034d5 100644
--- a/lib/core/src/lib/layout/components/header/header.component.html
+++ b/lib/core/src/lib/layout/components/header/header.component.html
@@ -12,7 +12,7 @@
         [attr.aria-expanded]="expandedSidenav"
         [attr.aria-label]="'CORE.HEADER.ACCESSIBILITY.SIDEBAR_TOGGLE_BUTTON_ARIA_LABEL' | translate">
         <mat-icon
-            class="mat-icon material-icon"
+            class="adf-menu-icon-header"
             role="img"
             aria-hidden="true">{{ toggleIcon }}
         </mat-icon>
@@ -47,7 +47,7 @@
         [attr.aria-expanded]="expandedSidenav"
         [attr.aria-label]="'CORE.HEADER.ACCESSIBILITY.SIDEBAR_TOGGLE_BUTTON_ARIA_LABEL' | translate">
         <mat-icon
-            class="mat-icon material-icon"
+            class="adf-menu-icon-header"
             role="img"
             aria-hidden="true">{{ toggleIcon }}
         </mat-icon>
diff --git a/lib/core/src/lib/layout/components/header/header.component.scss b/lib/core/src/lib/layout/components/header/header.component.scss
index e31e536324..6c38862c46 100644
--- a/lib/core/src/lib/layout/components/header/header.component.scss
+++ b/lib/core/src/lib/layout/components/header/header.component.scss
@@ -1,6 +1,6 @@
 @import 'styles/flex';
 
-adf-layout-header .mat-toolbar-single-row {
+adf-layout-header .adf-toolbar-container-row {
     color: var(--theme-header-text-color) !important;
     background-color: var(--theme-primary-color);
     position: relative;
@@ -10,7 +10,7 @@ adf-layout-header .mat-toolbar-single-row {
         position: relative;
         margin-right: 0;
 
-        .mat-icon {
+        .adf-menu-icon-header {
             font-size: 29px;
             padding: 0 5px 0 0;
         }
@@ -73,7 +73,7 @@ adf-layout-header .mat-toolbar-single-row {
     }
 }
 
-[dir='rtl'] adf-layout-header .mat-toolbar-single-row {
+[dir='rtl'] adf-layout-header .adf-toolbar-container-row {
     .adf-menu-icon {
         margin-right: -11px;
     }
@@ -99,7 +99,7 @@ adf-layout-header .mat-toolbar-single-row {
     }
 }
 
-[dir='ltr'] adf-layout-header .mat-toolbar-single-row {
+[dir='ltr'] adf-layout-header .adf-toolbar-container-row {
     .adf-menu-icon {
         margin-left: -11px;
     }
diff --git a/lib/core/src/lib/layout/components/layout-container/layout-container.component.html b/lib/core/src/lib/layout/components/layout-container/layout-container.component.html
index 7486c25018..5ddc5e0be9 100644
--- a/lib/core/src/lib/layout/components/layout-container/layout-container.component.html
+++ b/lib/core/src/lib/layout/components/layout-container/layout-container.component.html
@@ -1,5 +1,6 @@
-<mat-sidenav-container>
+<mat-sidenav-container class="adf-layout-container">
     <mat-sidenav
+        class="adf-layout-container-sidenav"
         [position]="position"
         [disableClose]="!isMobileScreenSize"
         [ngClass]="{ 'adf-sidenav--hidden': hideSidenav }"
diff --git a/lib/core/src/lib/layout/components/layout-container/layout-container.component.scss b/lib/core/src/lib/layout/components/layout-container/layout-container.component.scss
index 642b9a6539..644453babe 100644
--- a/lib/core/src/lib/layout/components/layout-container/layout-container.component.scss
+++ b/lib/core/src/lib/layout/components/layout-container/layout-container.component.scss
@@ -23,19 +23,20 @@ adf-layout-container {
     opacity: 0 !important;
 }
 
-.mat-sidenav-container {
+.adf-layout-container {
     display: block;
     width: 100%;
     height: 100%;
     overflow: hidden;
 }
 
-.mat-sidenav {
+.adf-layout-container-sidenav {
     overflow: hidden;
     border-right: 1px solid var(--adf-theme-foreground-text-color-007);
     background-color: var(--theme-background-color);
 }
 
+/* stylelint-disable selector-class-pattern */
 mat-sidenav-content.mat-sidenav-content,
 .mat-drawer-transition .mat-drawer-content {
     margin-left: 0 !important;
diff --git a/lib/core/src/lib/layout/components/sidebar-action/sidebar-action-menu.component.scss b/lib/core/src/lib/layout/components/sidebar-action/sidebar-action-menu.component.scss
index c38c42290a..01ec33675f 100644
--- a/lib/core/src/lib/layout/components/sidebar-action/sidebar-action-menu.component.scss
+++ b/lib/core/src/lib/layout/components/sidebar-action/sidebar-action-menu.component.scss
@@ -2,7 +2,7 @@
 
 .adf {
     &-sidebar-action-menu {
-        & .mat-raised-button {
+        & .adf-sidebar-action-menu-button {
             width: 100%;
             display: block;
             box-shadow: none !important;
@@ -12,11 +12,6 @@
             color: var(--theme-primary-color-default-contrast) !important;
             border-radius: 4px;
 
-            & mat-icon {
-                width: 24px;
-                height: 25px;
-                color: var(--theme-primary-color-default-contrast) !important;
-            }
         }
 
         &-text {
@@ -40,17 +35,17 @@
         text-align: left;
         letter-spacing: -0.4px;
 
-        .mat-menu-item {
+        button {
             font-size: var(--theme-body-1-font-size);
             color: var(--adf-theme-foreground-text-color-087);
             text-align: left;
             line-height: 1.5;
             letter-spacing: -0.4px;
-        }
 
-        .mat-menu-item:hover {
-            color: var(--theme-primary-color);
-            opacity: inherit;
+            &:hover {
+                color: var(--theme-primary-color);
+                opacity: inherit;
+            }
         }
     }
 
diff --git a/lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.scss b/lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.scss
index 567638a13f..8edb77ca1e 100644
--- a/lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.scss
+++ b/lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.scss
@@ -25,12 +25,13 @@
     }
 
     @include flex.layout-bp(lt-sm) {
-        .mat-drawer {
+        .adf-layout-container {
             width: calc(-50px + 100vw) !important;
             max-width: 300px !important;
         }
     }
 
+    /* stylelint-disable-next-line selector-class-pattern */
     .mat-drawer-content {
         @include flex-column;
 
diff --git a/lib/core/src/lib/login/components/login-dialog-panel.component.scss b/lib/core/src/lib/login/components/login-dialog-panel.component.scss
index 2c04c315b1..4b5cb3a4f9 100644
--- a/lib/core/src/lib/login/components/login-dialog-panel.component.scss
+++ b/lib/core/src/lib/login/components/login-dialog-panel.component.scss
@@ -1,5 +1,5 @@
 .adf-panel-login-dialog-component .adf-login-content {
-    .mat-card-actions,
+    .adf-login-dialog-content-actions,
     .adf-login-button,
     .adf-login__remember-me,
     .adf-copyright {
diff --git a/lib/core/src/lib/login/components/login-dialog.component.html b/lib/core/src/lib/login/components/login-dialog.component.html
index 5f0661e526..e161eaaa79 100644
--- a/lib/core/src/lib/login/components/login-dialog.component.html
+++ b/lib/core/src/lib/login/components/login-dialog.component.html
@@ -9,9 +9,9 @@
     </adf-login-dialog-panel>
 </mat-dialog-content>
 
-<mat-dialog-actions align="end">
+<mat-dialog-actions class="adf-login-dialog-content-actions" align="end">
     <button
-        mat-button (click)="close()" 
+        mat-button (click)="close()"
         data-automation-id="login-dialog-actions-cancel">
             {{ 'LOGIN.DIALOG.CANCEL' | translate }}
     </button>
diff --git a/lib/core/src/lib/login/components/login.component.html b/lib/core/src/lib/login/components/login.component.html
index eebe6f9fa4..31be00794b 100644
--- a/lib/core/src/lib/login/components/login.component.html
+++ b/lib/core/src/lib/login/components/login.component.html
@@ -8,7 +8,7 @@
                     [formGroup]="form"
                     autocomplete="off"
                     (submit)="onSubmit(form.value)">
-                    <mat-card-header>
+                    <mat-card-header class="adf-login-card-header-text">
                         <mat-card-title>
                             <div class="adf-alfresco-logo">
                                 <!--HEADER TEMPLATE-->
@@ -51,7 +51,7 @@
                                 class="adf-login__field"
                                 [ngClass]="{'adf-is-invalid': isErrorStyle(form.controls.username)}">
                                 <mat-form-field
-                                    class="adf-full-width"
+                                    class="adf-full-width adf-login-form-field"
                                     floatPlaceholder="never"
                                     color="primary">
                                     <input
@@ -81,7 +81,7 @@
                             <!--PASSWORD FIELD-->
                             <div class="adf-login__field">
                                 <mat-form-field
-                                    class="adf-full-width"
+                                    class="adf-full-width adf-login-form-field"
                                     floatPlaceholder="never"
                                     color="primary">
                                         <input
@@ -99,7 +99,7 @@
                                             (click)="toggleShowPassword($event)"
                                             (keyup.enter)="toggleShowPassword($event)"
                                             [attr.data-automation-id]="isPasswordShow ? 'hide_password' : 'show_password'">
-                                                <mat-icon class="adf-login-password-icon">
+                                                <mat-icon class="adf-login-form-password-icon adf-login-password-icon">
                                                     {{ isPasswordShow ? 'visibility' : 'visibility_off' }}
                                                 </mat-icon>
                                         </button>
@@ -165,7 +165,9 @@
                                     class="adf-login-remember-me"
                                     [checked]="rememberMe"
                                     (change)="rememberMe = !rememberMe">
+                                    <div class="adf-login-remember-me-label">
                                         {{ 'LOGIN.LABEL.REMEMBER' | translate }}
+                                    </div>
                                 </mat-checkbox>
                             </div>
                         </div>
diff --git a/lib/core/src/lib/login/components/login.component.scss b/lib/core/src/lib/login/components/login.component.scss
index 5ec0416a47..99e61dffcc 100644
--- a/lib/core/src/lib/login/components/login.component.scss
+++ b/lib/core/src/lib/login/components/login.component.scss
@@ -95,7 +95,7 @@
         margin-right: 10px;
     }
 
-    .mat-card-header-text {
+    .adf-login-card-header-text {
         margin: 0 auto;
     }
 
@@ -120,10 +120,6 @@
         box-shadow: none;
     }
 
-    .adf-login-button .mat-button-wrapper {
-        display: inline-flex;
-    }
-
     .adf-login-button-label {
         color: var(--theme-accent-color-default-contrast);
     }
@@ -195,20 +191,20 @@
         opacity: 0.54;
     }
 
-    .mat-form-field .adf-login-password-icon.mat-icon {
+    .adf-login-form-field .adf-login-password-icon.adf-login-form-password-icon {
         color: var(--adf-theme-foreground-text-color);
     }
 
-    .adf-login__field .mat-form-field-wrapper {
+    .adf-login__field {
         margin: 1em 0 0;
         font-size: var(--theme-subheading-2-font-size);
-    }
 
-    .adf-login__field input:-webkit-autofill {
-        /* stylelint-disable */
-        -webkit-box-shadow: 0 0 0 1000px var(--adf-theme-background-dialog-color) inset;
-        -webkit-text-fill-color: var(--adf-theme-foreground-text-color) !important;
-        /* stylelint-enable */
+        & input:-webkit-autofill {
+            /* stylelint-disable */
+            -webkit-box-shadow: 0 0 0 1000px var(--adf-theme-background-dialog-color) inset;
+            -webkit-text-fill-color: var(--adf-theme-foreground-text-color) !important;
+            /* stylelint-enable */
+        }
     }
 
     .adf-login-validation {
@@ -233,7 +229,7 @@
         padding-top: 22px;
     }
 
-    .adf-login__remember-me .mat-checkbox-label {
+    .adf-login__remember-me .adf-login-remember-me-label {
         opacity: 0.87;
     }
 
diff --git a/lib/core/src/lib/sorting-picker/sorting-picker.component.html b/lib/core/src/lib/sorting-picker/sorting-picker.component.html
index d8389a2dff..49e44f111c 100644
--- a/lib/core/src/lib/sorting-picker/sorting-picker.component.html
+++ b/lib/core/src/lib/sorting-picker/sorting-picker.component.html
@@ -7,7 +7,7 @@
     </mat-select>
 </mat-form-field>
 
-<button *ngIf="selected" mat-icon-button (click)="toggleSortDirection()" aria-label="'CORE.SEARCH.TOGGLE_ASC_DESC_ORDER' | translate">
+<button *ngIf="selected" class="adf-sorting-picker-button" mat-icon-button (click)="toggleSortDirection()" aria-label="'CORE.SEARCH.TOGGLE_ASC_DESC_ORDER' | translate">
     <mat-icon *ngIf="ascending">arrow_upward</mat-icon>
     <mat-icon *ngIf="!ascending">arrow_downward</mat-icon>
 </button>
diff --git a/lib/core/src/lib/toolbar/toolbar.component.html b/lib/core/src/lib/toolbar/toolbar.component.html
index d83c5004b8..481ff66028 100644
--- a/lib/core/src/lib/toolbar/toolbar.component.html
+++ b/lib/core/src/lib/toolbar/toolbar.component.html
@@ -1,4 +1,4 @@
-<mat-toolbar [color]="color">
+<mat-toolbar class="adf-toolbar-container adf-toolbar-container-row" [color]="color">
     <span class="adf-toolbar-title" *ngIf="title">{{ title | translate }}</span>
     <ng-content select="adf-toolbar-title"></ng-content>
     <ng-content></ng-content>
diff --git a/lib/core/src/lib/toolbar/toolbar.component.scss b/lib/core/src/lib/toolbar/toolbar.component.scss
index 3fd7f81f6f..bb7c3319a6 100644
--- a/lib/core/src/lib/toolbar/toolbar.component.scss
+++ b/lib/core/src/lib/toolbar/toolbar.component.scss
@@ -9,25 +9,17 @@
         width: 100%;
     }
 
-    .mat-toolbar {
-        min-height: 48px;
+    .adf-toolbar-container.adf-toolbar-container-row {
         border: 1px solid var(--adf-theme-foreground-text-color-007);
         color: var(--adf-theme-foreground-text-color-054);
-    }
-
-    .mat-toolbar-row {
-        height: 48px;
+        height: 64px;
         font-size: var(--theme-body-1-font-size);
         white-space: normal;
-    }
-
-    .mat-toolbar-single-row {
         padding: 0 16px;
-        height: 64px;
     }
 
     &.adf-toolbar--inline {
-        .mat-toolbar {
+        .adf-toolbar-container {
             background-color: inherit;
             border: none;
             padding: 0;
diff --git a/lib/insights/src/lib/analytics-process/components/analytics-report-list.component.scss b/lib/insights/src/lib/analytics-process/components/analytics-report-list.component.scss
index f4be333007..107116bc58 100644
--- a/lib/insights/src/lib/analytics-process/components/analytics-report-list.component.scss
+++ b/lib/insights/src/lib/analytics-process/components/analytics-report-list.component.scss
@@ -1,9 +1,14 @@
 .adf-analytics-report-list {
     .adf-activiti-filters__entry {
         cursor: pointer;
+
+        .adf-active {
+            color: var(--theme-primary-color);
+        }
     }
 
     .adf-activiti-filters__entry-icon {
+        color: var(--theme-primary-color);
         position: relative;
         top: 5px;
     }
@@ -13,18 +18,6 @@
         overflow: hidden;
     }
 
-    .mat-nav-list .mat-list-item .mat-list-item-content {
-        line-height: 48px;
-    }
-
-    .adf-activiti-filters__entry.adf-active {
-        color: var(--theme-primary-color);
-    }
-
-    .adf-activiti-filters__entry.adf-active .adf-activiti-filters__entry-icon {
-        color: var(--theme-primary-color);
-    }
-
     .adf-report-card-grids {
         display: flex;
         padding: 8px;
diff --git a/lib/insights/src/lib/analytics-process/components/analytics-report-parameters.component.html b/lib/insights/src/lib/analytics-process/components/analytics-report-parameters.component.html
index 902827bba5..fe3d324355 100644
--- a/lib/insights/src/lib/analytics-process/components/analytics-report-parameters.component.html
+++ b/lib/insights/src/lib/analytics-process/components/analytics-report-parameters.component.html
@@ -138,7 +138,7 @@
                                 </mat-form-field>
                             </div>
                         </div>
-                        <div mat-dialog-actions>
+                        <div class="adf-report-dialog-actions" mat-dialog-actions>
                             <button mat-button
                                 color="accent"
                                 type="button"
diff --git a/lib/insights/src/lib/analytics-process/components/analytics-report-parameters.component.scss b/lib/insights/src/lib/analytics-process/components/analytics-report-parameters.component.scss
index e1b9223ac5..13fb480012 100644
--- a/lib/insights/src/lib/analytics-process/components/analytics-report-parameters.component.scss
+++ b/lib/insights/src/lib/analytics-process/components/analytics-report-parameters.component.scss
@@ -59,7 +59,7 @@
     border-bottom: solid 1px var(--adf-theme-foreground-divider-color);
     padding-top: 10px;
 
-    .mat-toolbar {
+    .adf-toolbar-container {
         border: 0 !important;
         padding: 0 !important;
     }
@@ -92,11 +92,11 @@
 }
 
 .adf-report-dialog {
-    .mat-form-field {
+    .adf-example-full-width {
         width: 100%;
     }
 
-    .mat-dialog-actions {
+    .adf-report-dialog-actions {
         justify-content: flex-end;
     }
 }
diff --git a/lib/insights/src/lib/analytics-process/components/widgets/duration/duration.widget.html b/lib/insights/src/lib/analytics-process/components/widgets/duration/duration.widget.html
index 0af231afe2..4a45b573f2 100644
--- a/lib/insights/src/lib/analytics-process/components/widgets/duration/duration.widget.html
+++ b/lib/insights/src/lib/analytics-process/components/widgets/duration/duration.widget.html
@@ -1,7 +1,7 @@
 <div class="adf-duration-widget-grid">
     <div class="adf-duration-widget-cell">
         <div class="adf-number-widget">
-            <mat-form-field class="example-full-width" floatPlaceholder="always">
+            <mat-form-field class="adf-example-full-width" floatPlaceholder="always">
                 <input matInput
                     placeholder="{{field.nameKey | translate}}"
                     type="text"
diff --git a/lib/insights/src/lib/analytics-process/components/widgets/duration/duration.widget.scss b/lib/insights/src/lib/analytics-process/components/widgets/duration/duration.widget.scss
index 6b57ab8d93..7bd8c6522e 100644
--- a/lib/insights/src/lib/analytics-process/components/widgets/duration/duration.widget.scss
+++ b/lib/insights/src/lib/analytics-process/components/widgets/duration/duration.widget.scss
@@ -10,7 +10,7 @@
 .adf-number-widget {
     width: 100%;
 
-    .mat-form-field {
+    .adf-example-full-width {
         width: 100%;
     }
 }
diff --git a/lib/insights/src/lib/analytics-process/components/widgets/number/number.widget.scss b/lib/insights/src/lib/analytics-process/components/widgets/number/number.widget.scss
index 8ce9397af3..23d79bdcab 100644
--- a/lib/insights/src/lib/analytics-process/components/widgets/number/number.widget.scss
+++ b/lib/insights/src/lib/analytics-process/components/widgets/number/number.widget.scss
@@ -1,7 +1,7 @@
 .adf-number-widget {
     width: 100%;
 
-    .mat-form-field {
+    .example-full-width {
         width: 100%;
     }
 }
diff --git a/lib/process-services-cloud/src/lib/app/components/app-details-cloud.component.scss b/lib/process-services-cloud/src/lib/app/components/app-details-cloud.component.scss
index a34fa7077a..1039063a57 100644
--- a/lib/process-services-cloud/src/lib/app/components/app-details-cloud.component.scss
+++ b/lib/process-services-cloud/src/lib/app/components/app-details-cloud.component.scss
@@ -128,15 +128,6 @@ adf-cloud-app-details {
                     &-icon {
                         color: #e9f1f3;
                     }
-
-                    &.mat-card-actions {
-                        margin-left: 0;
-                        margin-right: 0;
-
-                        &:last-child {
-                            margin-bottom: 0 !important;
-                        }
-                    }
                 }
             }
         }
diff --git a/lib/process-services-cloud/src/lib/app/components/app-list-cloud.component.html b/lib/process-services-cloud/src/lib/app/components/app-list-cloud.component.html
index 8964e33c21..7f52fe0c61 100644
--- a/lib/process-services-cloud/src/lib/app/components/app-list-cloud.component.html
+++ b/lib/process-services-cloud/src/lib/app/components/app-list-cloud.component.html
@@ -43,7 +43,7 @@
     <ng-template #loading>
     <ng-container>
         <div class="adf-app-list-spinner">
-            <mat-spinner></mat-spinner>
+            <mat-spinner class="adf-app-list-cloud--spinner"></mat-spinner>
         </div>
     </ng-container>
 </ng-template>
diff --git a/lib/process-services-cloud/src/lib/app/components/app-list-cloud.component.scss b/lib/process-services-cloud/src/lib/app/components/app-list-cloud.component.scss
index 9dc9e7f2be..10f86147c3 100644
--- a/lib/process-services-cloud/src/lib/app/components/app-list-cloud.component.scss
+++ b/lib/process-services-cloud/src/lib/app/components/app-list-cloud.component.scss
@@ -16,7 +16,7 @@ adf-cloud-app-list {
         flex-direction: column;
         height: 85vh;
 
-        .mat-spinner {
+        .adf-app-list-cloud-spinner {
             margin: 0 auto;
         }
     }
diff --git a/lib/process-services-cloud/src/lib/form/components/form-cloud.component.html b/lib/process-services-cloud/src/lib/form/components/form-cloud.component.html
index 9af182ad1f..e633fcd3e6 100644
--- a/lib/process-services-cloud/src/lib/form/components/form-cloud.component.html
+++ b/lib/process-services-cloud/src/lib/form/components/form-cloud.component.html
@@ -4,7 +4,7 @@
 </div>
 
 <div *ngIf="hasForm()" class="adf-form-container">
-    <mat-card>
+    <mat-card class="adf-form-container-card">
         <mat-card-header *ngIf="showTitle || showRefreshButton || showValidationIcon">
             <mat-card-title>
                 <h4>
diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.html b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.html
index 053ae3d111..b362837564 100644
--- a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.html
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.html
@@ -9,13 +9,14 @@
                 <button
                     (click)="openSelectDialog()"
                     mat-raised-button
+                    class="adf-attach-widget__menu-upload__button"
                     color="primary"
                     [id]="field.id"
                     [matTooltip]="field.tooltip"
                     matTooltipPosition="above"
                     matTooltipShowDelay="1000">
                         {{ 'FORM.FIELD.ATTACH' | translate }}
-                        <mat-icon class="adf-attach-widget__icon">{{getWidgetIcon()}}</mat-icon>
+                        <mat-icon class="adf-attach-widget__menu-upload__button__icon">{{getWidgetIcon()}}</mat-icon>
                 </button>
             </div>
         </div>
diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.scss b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.scss
index b0dbf89744..2e993d1c81 100644
--- a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.scss
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.scss
@@ -20,7 +20,7 @@
         align-items: center;
         margin-right: 8px;
 
-        .mat-raised-button {
+        .adf-attach-widget__menu-upload__button {
             line-height: 28px;
             font-size: var(--theme-caption-font-size);
         }
@@ -43,18 +43,6 @@
         padding-left: 5px;
     }
 
-    &-attach-widget-repo-button {
-        padding-left: 10px;
-
-        .mat-button-wrapper {
-            display: inline;
-        }
-
-        .mat-mini-fab.mat-accent {
-            background-color: inherit;
-        }
-    }
-
     &-attach-widget {
         display: flex;
         justify-content: space-between;
@@ -87,17 +75,17 @@
     }
 
     &-attach-files-row {
-        div.mat-list-item-content {
+        > div:first-child {
             cursor: pointer;
         }
 
-        .mat-line {
+        .adf-file {
             margin-bottom: 0;
         }
     }
 
     &-attach-selected-file-row {
-        div.mat-list-item-content {
+        > div:first-child {
             .adf-datatable-selected {
                 color: var(--theme-primary-color);
                 padding-right: 6px;
diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/file-properties-table-cloud.component.html b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/file-properties-table-cloud.component.html
index adb2e7fe24..440cea7e51 100644
--- a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/file-properties-table-cloud.component.html
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/file-properties-table-cloud.component.html
@@ -2,7 +2,7 @@
     <table mat-table [dataSource]="uploadedFiles" class="mat-elevation-z0" *ngIf="hasFile">
         <ng-container matColumnDef="icon">
             <th mat-header-cell *matHeaderCellDef></th>
-            <td mat-cell *matCellDef="let element">
+            <td mat-cell class="adf-file-properties-table-cell" *matCellDef="let element">
                 <mat-icon mat-list-icon class="adf-datatable-selected"
                     *ngIf="selectedNode && element.id === selectedNode.id" (click)="onRowClicked(element)">
                     check_circle
@@ -17,7 +17,7 @@
 
         <ng-container matColumnDef="fileName">
             <th mat-header-cell *matHeaderCellDef>{{ 'FORM.FIELD.FILE_NAME' | translate }}</th>
-            <td mat-cell *matCellDef="let element">
+            <td mat-cell class="adf-file-properties-table-cell" *matCellDef="let element">
                 <span matLine id="{{'file-'+element?.id}}"
                       role="button"
                       tabindex="0"
@@ -30,7 +30,7 @@
         <ng-container *ngFor="let columnName of field?.params?.displayableCMProperties" [matColumnDef]="columnName.name">
             <th mat-header-cell *matHeaderCellDef>{{ columnName.title ? columnName.title : columnName.name | titlecase
                 }}</th>
-            <td mat-cell *matCellDef="let row">
+            <td mat-cell class="adf-file-properties-table-cell" *matCellDef="let row">
                 <span matLine id="{{'fileProperty-'+row?.id+'-'+columnName?.name}}" role="button" tabindex="0"
                     (click)="onRowClicked(row)">{{ getColumnValue(row, columnName) }}</span>
             </td>
@@ -38,7 +38,7 @@
 
         <ng-container matColumnDef="action">
             <th mat-header-cell *matHeaderCellDef></th>
-            <td mat-cell *matCellDef="let element">
+            <td mat-cell class="adf-file-properties-table-cell" *matCellDef="let element">
                 <button id="{{'file-'+element?.id+'-option-menu'}}" mat-icon-button [matMenuTriggerFor]="fileActionMenu"
                     *ngIf="!!element.content?.mimeType" [attr.aria-label]="'ADF_PROCESS_LIST.DETAILS.BUTTON.FILE_OPTION_MENU' | translate">
                     <mat-icon>more_vert</mat-icon>
@@ -77,7 +77,7 @@
                 </mat-menu>
             </td>
         </ng-container>
-        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-header-row class="adf-file-properties-table-header-row" *matHeaderRowDef="displayedColumns"></tr>
         <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
 
     </table>
diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/file-properties-table-cloud.component.scss b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/file-properties-table-cloud.component.scss
index a97d41d385..cfa28a6ebb 100644
--- a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/file-properties-table-cloud.component.scss
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/file-properties-table-cloud.component.scss
@@ -16,7 +16,7 @@
             padding: 6px;
         }
 
-        tr.mat-header-row {
+        tr.adf-file-properties-table-header-row {
             height: 32px;
         }
 
@@ -33,10 +33,8 @@
             padding-right: 0 !important;
         }
 
-        td.mat-cell:first-of-type,
-        td.mat-footer-cell:first-of-type,
-        td.mat-cell:last-of-type,
-        td.mat-footer-cell:last-of-type {
+        td.adf-file-properties-table-cell:first-of-type,
+        td.adf-file-properties-table-cell:last-of-type {
             width: 18% !important;
         }
     }
diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/upload-cloud.widget.html b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/upload-cloud.widget.html
index 7ecfeabc5d..b753875a45 100644
--- a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/upload-cloud.widget.html
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/upload-cloud.widget.html
@@ -9,7 +9,7 @@
                     <img mat-list-icon class="adf-upload-widget__icon" [id]="'file-'+file.id+'-icon'"
                         [src]="getIcon(file.content.mimeType)" [alt]="mimeTypeIcon" (click)="fileClicked(file)"
                         (keyup.enter)="fileClicked(file)" role="button" tabindex="0" />
-                    <span matLine id="{{'file-'+file.id}}" (click)="fileClicked(file)" (keyup.enter)="fileClicked(file)"
+                    <span class="adf-upload-widget__button" matLine id="{{'file-'+file.id}}" (click)="fileClicked(file)" (keyup.enter)="fileClicked(file)"
                         role="button" tabindex="0" class="adf-file">{{file.name}}</span>
                     <button *ngIf="!field.readOnly" mat-icon-button [id]="'file-'+file.id+'-remove'"
                         (click)="removeFile(file);" (keyup.enter)="removeFile(file);">
diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/upload-cloud.widget.scss b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/upload-cloud.widget.scss
index 60ad9c35b8..0cebe9219c 100644
--- a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/upload-cloud.widget.scss
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/upload-cloud.widget.scss
@@ -25,7 +25,7 @@
     }
 
     &-upload-files-row {
-        .mat-line {
+        .adf-upload-widget__button {
             margin-bottom: 0;
         }
     }
diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.scss b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.scss
index d73296ddb6..e2cbb22237 100644
--- a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.scss
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.scss
@@ -1,19 +1,23 @@
 .adf {
     &-date-widget {
+        /* stylelint-disable-next-line */
         .mat-form-field-suffix {
             top: 26px;
         }
 
-        .mat-form-field-label-wrapper {
+        .adf-label {
             top: 20px;
         }
     }
 
     &-left-label-input-datepicker {
+
+        /* stylelint-disable-next-line */
         .mat-form-field-suffix {
             top: 0;
         }
 
+        /* stylelint-disable-next-line */
         .mat-form-field-infix {
             width: 100%;
         }
diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.scss b/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.scss
index f523361fbd..11ec6d123a 100644
--- a/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.scss
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.scss
@@ -8,7 +8,7 @@
             width: 100%;
         }
 
-        .mat-select-value-text {
+        .adf-select-filter {
             font-size: var(--theme-body-1-font-size);
         }
 
diff --git a/lib/process-services-cloud/src/lib/group/components/group-cloud.component.scss b/lib/process-services-cloud/src/lib/group/components/group-cloud.component.scss
index d69af562c6..dd2c5a5390 100644
--- a/lib/process-services-cloud/src/lib/group/components/group-cloud.component.scss
+++ b/lib/process-services-cloud/src/lib/group/components/group-cloud.component.scss
@@ -4,10 +4,6 @@
         width: 40px;
         height: 40px;
         box-shadow: none !important;
-
-        .mat-button-wrapper {
-            display: inline !important;
-        }
     }
 
     &-cloud-group-list {
diff --git a/lib/process-services-cloud/src/lib/process/process-filters/components/process-filter-dialog-cloud.component.html b/lib/process-services-cloud/src/lib/process/process-filters/components/process-filter-dialog-cloud.component.html
index fa68256976..05efbd300a 100644
--- a/lib/process-services-cloud/src/lib/process/process-filters/components/process-filter-dialog-cloud.component.html
+++ b/lib/process-services-cloud/src/lib/process/process-filters/components/process-filter-dialog-cloud.component.html
@@ -2,15 +2,15 @@
     <span mat-dialog-title id="adf-process-filter-dialog-title">
          {{ 'ADF_CLOUD_EDIT_PROCESS_FILTER.DIALOG.TITLE' | translate}}
     </span>
-    <mat-card>
-        <mat-card-content>
+    <mat-card class="adf-process-filter-dialog-card">
+        <mat-card-content class="adf-process-filter-dialog-card-content">
         <form [formGroup]="filterForm">
             <mat-form-field class="adf-process-filter-name" [floatLabel]="'auto'">
                 <input matInput placeholder="{{ 'ADF_CLOUD_EDIT_PROCESS_FILTER.FILTER_NAME' | translate }}" formControlName="name" id="adf-filter-name-id">
             </mat-form-field>
         </form>
         </mat-card-content>
-        <mat-card-actions>
+        <mat-card-actions class='adf-process-filter-dialog-actions'>
             <button mat-button (click)="onSaveClick()" id="adf-save-button-id" [disabled]="!isValid()">
                 {{ 'ADF_CLOUD_EDIT_PROCESS_FILTER.DIALOG.SAVE' | translate}}
             </button>
diff --git a/lib/process-services-cloud/src/lib/process/process-filters/components/process-filter-dialog-cloud.component.scss b/lib/process-services-cloud/src/lib/process/process-filters/components/process-filter-dialog-cloud.component.scss
index 4695b26b17..59a39648a2 100644
--- a/lib/process-services-cloud/src/lib/process/process-filters/components/process-filter-dialog-cloud.component.scss
+++ b/lib/process-services-cloud/src/lib/process/process-filters/components/process-filter-dialog-cloud.component.scss
@@ -1,22 +1,17 @@
 adf-cloud-process-filter-dialog-cloud {
-    .adf-process-filter-dialog .mat-card {
-        padding: 0;
-        box-shadow: none;
-
-        mat-card-actions {
-            display: flex;
-            max-height: 100%;
-            place-content: flex-end;
-            align-items: flex-end;
-        }
-    }
-
-    .adf-process-filter-dialog .mat-card-content {
+    .adf-process-filter-dialog .adf-process-filter-dialog-card {
         padding: 0;
         box-shadow: none;
 
         .adf-process-filter-name {
             flex: 1;
         }
+
+        .adf-process-filter-dialog-actions {
+            display: flex;
+            max-height: 100%;
+            place-content: flex-end;
+            align-items: flex-end;
+        }
     }
 }
diff --git a/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.html b/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.html
index eb0f0b657f..a15b2a8486 100755
--- a/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.html
+++ b/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.html
@@ -19,7 +19,7 @@
                     floatLabel="always"
                     *ngIf="showSelectProcessDropdown"
                     data-automation-id="adf-select-cloud-process-dropdown">
-                        <mat-label>{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.LABEL.TYPE' | translate }}</mat-label>
+                        <mat-label class="adf-start-process-input-label">{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.LABEL.TYPE' | translate }}</mat-label>
                         <input
                             matInput
                             formControlName="processDefinition"
diff --git a/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.scss b/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.scss
index bc8ecf5d84..a8248e8c96 100755
--- a/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.scss
+++ b/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.scss
@@ -1,10 +1,9 @@
 .adf {
     &-start-process {
-        .mat-form-field-label {
+        .adf-start-process-input-label {
             color: var(--adf-theme-mat-grey-color-a200-dark);
         }
 
-        mat-card-actions,
         &-cloud-actions {
             display: flex;
             justify-content: flex-end;
@@ -35,7 +34,7 @@
     }
 
     &-form-container {
-        .mat-card {
+        .adf-form-container-card {
             box-shadow: none !important;
             padding: 0 !important;
         }
diff --git a/lib/process-services-cloud/src/lib/task/start-task/components/start-task-cloud.component.html b/lib/process-services-cloud/src/lib/task/start-task/components/start-task-cloud.component.html
index d4777f6513..598638b5c6 100644
--- a/lib/process-services-cloud/src/lib/task/start-task/components/start-task-cloud.component.html
+++ b/lib/process-services-cloud/src/lib/task/start-task/components/start-task-cloud.component.html
@@ -1,12 +1,12 @@
 <mat-card>
     <mat-card-header class="adf-cloud-start-task-heading">
-        <mat-card-title>{{'ADF_CLOUD_TASK_LIST.START_TASK.FORM.TITLE' | translate}}</mat-card-title>
+        <mat-card-title class="adf-cloud-start-task-heading-title">{{'ADF_CLOUD_TASK_LIST.START_TASK.FORM.TITLE' | translate}}</mat-card-title>
     </mat-card-header>
     <form [formGroup]="taskForm" (ngSubmit)="saveTask()">
 
         <mat-card-content>
             <div class="adf-task-name">
-                <mat-form-field>
+                <mat-form-field class="adf-task-name-form-field">
                     <mat-label>{{'ADF_CLOUD_TASK_LIST.START_TASK.FORM.LABEL.NAME' | translate }}</mat-label>
                     <input
                         matInput
@@ -22,7 +22,7 @@
                 </mat-form-field>
             </div>
             <div class="adf-cloud-start-task-form-row">
-                <mat-form-field>
+                <mat-form-field class="adf-cloud-start-task-form-row-form-field">
                     <mat-label>{{'ADF_CLOUD_TASK_LIST.START_TASK.FORM.LABEL.DESCRIPTION' | translate}}</mat-label>
                     <textarea
                         matInput
@@ -90,6 +90,7 @@
             <div class="adf-cloud-start-task-footer">
                 <button
                     mat-button
+                    class="adf-cloud-start-task-footer-button"
                     type="button"
                     (click)="onCancel()"
                     id="button-cancel">
@@ -100,6 +101,7 @@
                     type="submit"
                     [disabled]="!canStartTask()"
                     mat-button
+                    class="adf-cloud-start-task-footer-button"
                     id="button-start">
                     {{'ADF_CLOUD_TASK_LIST.START_TASK.FORM.ACTION.START'|translate}}
                 </button>
diff --git a/lib/process-services-cloud/src/lib/task/start-task/components/start-task-cloud.component.scss b/lib/process-services-cloud/src/lib/task/start-task/components/start-task-cloud.component.scss
index 2223dfed5e..cc98cb31f9 100644
--- a/lib/process-services-cloud/src/lib/task/start-task/components/start-task-cloud.component.scss
+++ b/lib/process-services-cloud/src/lib/task/start-task/components/start-task-cloud.component.scss
@@ -4,7 +4,7 @@
     border-bottom: 1px solid var(--adf-theme-foreground-divider-color);
     margin-bottom: 10px;
 
-    .mat-card-title {
+    .adf-cloud-start-task-heading-title {
         font-weight: bold;
         font-size: var(--theme-adf-task-title-font-size);
     }
@@ -53,7 +53,7 @@
 adf-cloud-start-task {
     .adf {
         &-cloud-start-task-footer {
-            .mat-button {
+            .adf-cloud-start-task-footer-button {
                 text-transform: uppercase !important;
             }
         }
@@ -61,7 +61,7 @@ adf-cloud-start-task {
         &-task-name {
             display: flex;
 
-            mat-form-field {
+            .adf-task-name-form-field {
                 flex: 1;
             }
         }
@@ -69,14 +69,14 @@ adf-cloud-start-task {
         &-cloud-start-task-form-row {
             display: flex;
 
-            mat-form-field,
+            .adf-cloud-start-task-form-row-form-field,
             adf-cloud-people,
             adf-cloud-group,
             adf-cloud-form-definition-selector {
                 flex: 1;
             }
 
-            mat-form-field,
+            .adf-cloud-start-task-form-row-form-field,
             adf-cloud-group {
                 margin-right: 20px;
 
@@ -88,7 +88,7 @@ adf-cloud-start-task {
             @include layout-bp(lt-md) {
                 flex-direction: column;
 
-                mat-form-field,
+                .adf-cloud-start-task-form-row-form-field,
                 adf-cloud-group {
                     margin-right: 0;
                 }
diff --git a/lib/process-services-cloud/src/lib/task/task-filters/components/task-filter-dialog/task-filter-dialog-cloud.component.html b/lib/process-services-cloud/src/lib/task/task-filters/components/task-filter-dialog/task-filter-dialog-cloud.component.html
index 42570f0648..438874f5be 100644
--- a/lib/process-services-cloud/src/lib/task/task-filters/components/task-filter-dialog/task-filter-dialog-cloud.component.html
+++ b/lib/process-services-cloud/src/lib/task/task-filters/components/task-filter-dialog/task-filter-dialog-cloud.component.html
@@ -2,15 +2,15 @@
     <span mat-dialog-title id="adf-task-filter-dialog-title">
          {{ 'ADF_CLOUD_EDIT_TASK_FILTER.DIALOG.TITLE' | translate}}
     </span>
-    <mat-card>
-        <mat-card-content>
+    <mat-card class="adf-task-filter-dialog-card">
+        <mat-card-content class="adf-task-filter-dialog-card-content">
         <form [formGroup]="filterForm">
             <mat-form-field class="adf-task-filter-name" [floatLabel]="'auto'">
                 <input matInput placeholder="{{ 'ADF_CLOUD_EDIT_TASK_FILTER.FILTER_NAME' | translate }}" formControlName="name" id="adf-filter-name-id">
             </mat-form-field>
         </form>
         </mat-card-content>
-        <mat-card-actions>
+        <mat-card-actions class="adf-task-filter-dialog-card-actions">
             <button mat-button (click)="onSaveClick()" id="adf-save-button-id" [disabled]="!isValid()">
                 {{ 'ADF_CLOUD_EDIT_TASK_FILTER.DIALOG.SAVE' | translate}}
             </button>
diff --git a/lib/process-services-cloud/src/lib/task/task-filters/components/task-filter-dialog/task-filter-dialog-cloud.component.scss b/lib/process-services-cloud/src/lib/task/task-filters/components/task-filter-dialog/task-filter-dialog-cloud.component.scss
index 74dde4c3a9..0d91c02083 100644
--- a/lib/process-services-cloud/src/lib/task/task-filters/components/task-filter-dialog/task-filter-dialog-cloud.component.scss
+++ b/lib/process-services-cloud/src/lib/task/task-filters/components/task-filter-dialog/task-filter-dialog-cloud.component.scss
@@ -1,22 +1,24 @@
 adf-cloud-task-filter-dialog {
-    .adf-task-filter-dialog .mat-card {
-        padding: 0;
-        box-shadow: none;
+    .adf-task-filter-dialog {
+        .adf-task-filter-dialog-card {
+            padding: 0;
+            box-shadow: none;
 
-        mat-card-actions {
-            display: flex;
-            max-height: 100%;
-            place-content: flex-end;
-            align-items: flex-end;
+            .adf-task-filter-dialog-card-actions {
+                display: flex;
+                max-height: 100%;
+                place-content: flex-end;
+                align-items: flex-end;
+            }
         }
-    }
 
-    .adf-task-filter-dialog .mat-card-content {
-        padding: 0;
-        box-shadow: none;
+        .adf-task-filter-dialog-card-content {
+            padding: 0;
+            box-shadow: none;
 
-        .adf-task-filter-name {
-            flex: 1;
+            .adf-task-filter-name {
+                flex: 1;
+            }
         }
     }
 }
diff --git a/lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud.component.scss b/lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud.component.scss
index 0d1f4fc58a..f1764b6692 100644
--- a/lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud.component.scss
+++ b/lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud.component.scss
@@ -8,23 +8,23 @@
         padding-bottom: 25px !important;
         padding-right: 25px !important;
 
-        & .mat-button {
+        & .adf-task-form-actions-button {
             height: 36px;
             border-radius: 5px;
-        }
 
-        & .mat-button-wrapper {
-            width: 58px;
-            height: 20px;
-            opacity: 0.54;
-            font-size: var(--theme-body-2-font-size);
-            font-weight: bold;
+            span {
+                width: 58px;
+                height: 20px;
+                opacity: 0.54;
+                font-size: var(--theme-body-2-font-size);
+                font-weight: bold;
+            }
         }
     }
 }
 
 adf-cloud-task-form {
-    mat-spinner {
+    .adf-task-form-spinner {
         display: flex !important;
         justify-content: center !important;
         align-items: center !important;
diff --git a/lib/process-services/src/lib/task-list/components/task-form/task-form.component.html b/lib/process-services/src/lib/task-list/components/task-form/task-form.component.html
index 71640c8dac..0e9028a80e 100644
--- a/lib/process-services/src/lib/task-list/components/task-form/task-form.component.html
+++ b/lib/process-services/src/lib/task-list/components/task-form/task-form.component.html
@@ -60,11 +60,12 @@
                 </ng-template>
             </mat-card-content>
             <mat-card-actions>
-                <div class="adf-task-form-actions"> 
+                <div class="adf-task-form-actions">
                     <ng-template [ngTemplateOutlet]="taskFormButtons"></ng-template>
                     <button mat-button
                         *ngIf="!isCompletedTask()" id="adf-no-form-complete-button"
                         color="primary"
+                        class="adf-task-form-actions-button"
                         [disabled]="canCompleteNoFormTask()"
                         (click)="onCompleteTask()">
                         {{'ADF_TASK_FORM.EMPTY_FORM.BUTTONS.COMPLETE' | translate}}
@@ -100,5 +101,5 @@
   </ng-template>
 </ng-container>
 <ng-template #loadingTemplate>
-  <mat-spinner></mat-spinner>
+  <mat-spinner class="adf-task-form-spinner"></mat-spinner>
 </ng-template>
diff --git a/stylelint-config.json b/stylelint-config.json
index 0294b8e491..034b093e30 100644
--- a/stylelint-config.json
+++ b/stylelint-config.json
@@ -91,7 +91,7 @@
     "max-line-length": 240,
     "linebreaks": "unix",
     "selector-class-pattern": [
-      "^_?(adf|adf-|app|app-|cdk-|example-|demo-|mat-|material-|textLayer|canvasWrapper|page)",
+      "^_?(adf|adf-|app|app-|example-|demo-|textLayer|canvasWrapper|page)",
       {
         "resolveNestedSelectors": true
       }