diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing.module.ts b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing.module.ts
index 6b34c2cf5..4e5910f8a 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing.module.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing.module.ts
@@ -21,9 +21,9 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { ColorPickerModule } from 'ngx-color-picker';
 import { MatIconModule } from '@angular/material/icon';
 import { ConfirmDeleteDossierStateDialogComponent } from './confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component';
-import { MatLegacyCheckboxModule } from '@angular/material/legacy-checkbox';
 import { MatSelectModule } from '@angular/material/select';
 import { MatDialogModule } from '@angular/material/dialog';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 
 @NgModule({
     declarations: [
@@ -55,7 +55,7 @@ import { MatDialogModule } from '@angular/material/dialog';
         ReactiveFormsModule,
         ColorPickerModule,
         MatIconModule,
-        MatLegacyCheckboxModule,
+        MatCheckboxModule,
         MatSelectModule,
     ],
 })
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts
index d82a45c3a..31c052c5a 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts
@@ -9,7 +9,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSelectModule } from '@angular/material/select';
 import { NgForOf } from '@angular/common';
 import { MatLegacySlideToggleModule } from '@angular/material/legacy-slide-toggle';
-import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { ROLES } from '@users/roles';
 
@@ -84,6 +84,4 @@ export class AddEditFileAttributeDialogComponent extends BaseDialogComponent {
             displayedInFileList: { value: fileAttribute?.displayedInFileList, disabled: !this.canSetDisplayed },
         });
     }
-
-    protected readonly ROLES = ROLES;
 }
diff --git a/apps/red-ui/src/app/modules/mat-config/mat-config.module.ts b/apps/red-ui/src/app/modules/mat-config/mat-config.module.ts
index dbc9206cf..73397a378 100644
--- a/apps/red-ui/src/app/modules/mat-config/mat-config.module.ts
+++ b/apps/red-ui/src/app/modules/mat-config/mat-config.module.ts
@@ -9,7 +9,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
-import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
diff --git a/apps/red-ui/src/app/modules/shared/components/dossier-watermark-selector/watermark-selector.component.html b/apps/red-ui/src/app/modules/shared/components/dossier-watermark-selector/watermark-selector.component.html
index eb7683934..915654f6c 100644
--- a/apps/red-ui/src/app/modules/shared/components/dossier-watermark-selector/watermark-selector.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/dossier-watermark-selector/watermark-selector.component.html
@@ -1,5 +1,5 @@
 <div *ngIf="watermarks$ | async as watermarks" class="mt-14">
-    <div class="iqser-input-group w-300">
+    <div class="iqser-input-group">
         <mat-checkbox (change)="changeChecked($event)" [checked]="!!value" [disabled]="disabled || isReadonly" color="primary">
             {{ label }}
         </mat-checkbox>
diff --git a/apps/red-ui/src/app/modules/shared/components/dossier-watermark-selector/watermark-selector.component.ts b/apps/red-ui/src/app/modules/shared/components/dossier-watermark-selector/watermark-selector.component.ts
index 44cb9732d..bf29d44b6 100644
--- a/apps/red-ui/src/app/modules/shared/components/dossier-watermark-selector/watermark-selector.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/dossier-watermark-selector/watermark-selector.component.ts
@@ -5,7 +5,7 @@ import { filter, map, tap } from 'rxjs/operators';
 import { NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Watermark } from '@red/domain';
 import { WatermarksMapService } from '@services/entity-services/watermarks-map.service';
-import { MatLegacyCheckboxChange as MatCheckboxChange } from '@angular/material/legacy-checkbox';
+import { MatCheckboxChange } from '@angular/material/checkbox';
 
 @Component({
     selector: 'redaction-watermark-selector [dossierTemplateId] [label]',
diff --git a/apps/red-ui/src/app/modules/shared/components/select/select.component.ts b/apps/red-ui/src/app/modules/shared/components/select/select.component.ts
index 58c32dd71..be661e398 100644
--- a/apps/red-ui/src/app/modules/shared/components/select/select.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/select/select.component.ts
@@ -15,7 +15,7 @@ import { MatChipListbox, MatChipSelectionChange } from '@angular/material/chips'
     ],
 })
 export class SelectComponent implements AfterViewInit, ControlValueAccessor {
-    @Input() optionTemplate?: TemplateRef<unknown>;
+    @Input() optionTemplate?: TemplateRef<{ option: any }>;
     @Input() label: string;
     @Input() options: any[];
     @Input() disabled = false;
@@ -26,11 +26,6 @@ export class SelectComponent implements AfterViewInit, ControlValueAccessor {
 
     constructor(private readonly _changeDetector: ChangeDetectorRef, private readonly _elementRef: ElementRef) {}
 
-    @HostBinding('class.fixed-height')
-    get isFixedHeight(): boolean {
-        return !!this._height;
-    }
-
     private _height?: number;
 
     @Input()
@@ -42,6 +37,11 @@ export class SelectComponent implements AfterViewInit, ControlValueAccessor {
         }
     }
 
+    @HostBinding('class.fixed-height')
+    get isFixedHeight(): boolean {
+        return !!this._height;
+    }
+
     @Input() valueMapper: (option: any) => any = option => option.key;
 
     ngAfterViewInit(): void {
diff --git a/apps/red-ui/src/app/modules/shared/dialogs/add-dossier-dialog/add-dossier-dialog.component.html b/apps/red-ui/src/app/modules/shared/dialogs/add-dossier-dialog/add-dossier-dialog.component.html
index 9cd46b0e0..434eb1f7d 100644
--- a/apps/red-ui/src/app/modules/shared/dialogs/add-dossier-dialog/add-dossier-dialog.component.html
+++ b/apps/red-ui/src/app/modules/shared/dialogs/add-dossier-dialog/add-dossier-dialog.component.html
@@ -62,9 +62,11 @@
             </redaction-watermark-selector>
 
             <div class="due-date">
-                <mat-checkbox (change)="hasDueDate = !hasDueDate" [checked]="hasDueDate" class="filter-menu-checkbox" color="primary">
-                    {{ 'add-dossier-dialog.form.due-date' | translate }}
-                </mat-checkbox>
+                <div class="iqser-input-group">
+                    <mat-checkbox (change)="hasDueDate = !hasDueDate" [checked]="hasDueDate" color="primary">
+                        {{ 'add-dossier-dialog.form.due-date' | translate }}
+                    </mat-checkbox>
+                </div>
 
                 <div *ngIf="hasDueDate" class="iqser-input-group datepicker-wrapper">
                     <input [matDatepicker]="picker" formControlName="dueDate" placeholder="dd/mm/yy" />
diff --git a/apps/red-ui/src/assets/styles/red-material-theme.scss b/apps/red-ui/src/assets/styles/red-material-theme.scss
index 4ddb1afab..db296b020 100644
--- a/apps/red-ui/src/assets/styles/red-material-theme.scss
+++ b/apps/red-ui/src/assets/styles/red-material-theme.scss
@@ -9,7 +9,7 @@
 //  If you don't need the default component typographies but still want the hierarchy styles,
 //  you can delete this line and instead use:
 //    `@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());`
-@include mat.all-legacy-component-typographies();
+//@include mat.all-legacy-component-typographies();
 @include mat.legacy-core();
 
 $primary-palette: (
@@ -62,13 +62,26 @@ $gn-next-mat-theme: mat.define-light-theme(
     )
 );
 
-@include mat.all-legacy-component-themes($gn-next-mat-theme);
+@include mat.all-component-themes($gn-next-mat-theme);
 
-$custom-typography: mat.define-legacy-typography-config(
+$custom-typography: mat.define-typography-config(
     $font-family: 'Inter, sans-serif',
+    $headline-1: null,
+    $headline-2: null,
+    $headline-3: null,
+    $headline-4: null,
+    $headline-5: null,
+    $headline-6: null,
+    $subtitle-1: null,
+    $subtitle-2: null,
+    $body-1: mat.define-typography-level(13px, 18px, 400),
+    $body-2: mat.define-typography-level(13px, 18px, 400),
+    $caption: null,
+    $button: mat.define-typography-level(13px, 13px, 400),
+    $overline: null,
 );
 
-@include mat.all-legacy-component-typographies($custom-typography);
+@include mat.all-component-typographies($custom-typography);
 
 .mat-flat-button {
     min-width: unset !important;
diff --git a/libs/common-ui b/libs/common-ui
index 226ce2e73..e884d8a51 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit 226ce2e73ad52810fc0035fd744c99c0e6866d6c
+Subproject commit e884d8a513c8dd2df3564b3021bfa0d46bfe74d1