diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-panel.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-panel.component.html
index 9829e8c436..f6ba02e7a0 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-panel.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-form-field appearance="outline" [formGroup]="selectUserFormGroup" class="mat-block container">
+<mat-form-field appearance="outline" [formGroup]="selectUserFormGroup" class="mat-block search-users">
   <input matInput type="text" placeholder="{{ 'user.search' | translate }}"
          #userInput
          formControlName="user"
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-panel.component.scss b/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-panel.component.scss
index 8db3bb111f..a10848cc70 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-panel.component.scss
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-panel.component.scss
@@ -23,34 +23,25 @@
 }
 
 ::ng-deep  {
-  mat-form-field.container {
-    padding-top: 8px;
+  mat-form-field.search-users {
+    padding: 8px;
     height: 340px;
     font-size: 14px;
     background-color: #fff;
-    .mat-form-field-wrapper {
-      margin-right: 8px;
-      margin-left: 8px;
-      padding: 0;
-    }
   }
 
-  .mat-form-field-appearance-outline .mat-form-field-outline {
-    color: rgba(0, 0, 0, 0.12) !important;
-  }
-
-  .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
+  .mat-form-field-appearance-outline .mdc-notched-outline__trailing{
     color: rgba(0, 0, 0, 0.12) !important;
   }
 
   .tb-assignee-autocomplete {
-    &.tb-assignee-autocomplete.mat-autocomplete-visible {
+    &.tb-assignee-autocomplete.mat-mdc-autocomplete-panel {
       position: relative;
       left: -8px;
       margin-top: 8px;
       box-shadow: none !important;
     }
-    .mat-option {
+    .mat-mdc-option {
       font-size: 14px;
       border: none;
       height: 52px !important;
@@ -87,7 +78,7 @@
           color: rgba(0, 0, 0, 0.38);
         }
       }
-      .mat-option-text {
+      .mdc-list-item__primary-text {
         display: flex;
         justify-content: start;
         align-items: center;
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee.component.html
index 6e50082e8b..52066ff3ac 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee.component.html
@@ -18,15 +18,17 @@
 
 <div class="tb-assignee" fxLayout="row" fxLayoutAlign="start center"
      (click)="openAlarmAssigneePanel($event, alarm)">
-  <span *ngIf="alarm.assigneeId" class="assigned-container">
+  <span *ngIf="alarm?.assigneeId" class="assigned-container">
     <span class="user-avatar" [style.backgroundColor]="getAvatarBgColor(alarm.assignee)">
       {{ getUserInitials(alarm.assignee) }}
     </span>
     <span [matTooltip]="getUserDisplayName(alarm.assignee)"
           matTooltipPosition="above"
-          style="text-overflow: ellipsis">{{ getUserDisplayName(alarm.assignee) }}</span>
+          style="text-overflow: ellipsis">
+      {{ getUserDisplayName(alarm.assignee) }}
+    </span>
   </span>
-  <span *ngIf="!alarm.assigneeId" class="unassigned-container" fxLayout="row" fxLayoutAlign="start center">
+  <span *ngIf="!alarm?.assigneeId" class="unassigned-container" fxLayout="row" fxLayoutAlign="start center">
     <mat-icon class="material-icons unassigned-icon">account_circle</mat-icon>
     <span translate>alarm.unassigned</span>
   </span>
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee.component.scss b/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee.component.scss
index 5736aa8ef1..935ac2f32d 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee.component.scss
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee.component.scss
@@ -17,9 +17,9 @@
 :host {
   .tb-assignee {
     cursor: pointer;
+    max-width: 273px;
 
     .assigned-container {
-      max-width: 233px;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
@@ -28,7 +28,6 @@
         display: inline-flex;
         justify-content: center;
         align-items: center;
-        margin-right: 8px;
         border-radius: 50%;
         width: 28px;
         height: 28px;
@@ -43,7 +42,6 @@
       width: 28px;
       height: 28px;
       font-size: 28px;
-      margin-right: 8px;
       color: rgba(0, 0, 0, 0.38);
       overflow: visible;
     }
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.html
index 990ceb53d0..91b4871d86 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.html
@@ -42,7 +42,7 @@
     <ng-container *ngIf="isDirectionDescending()">
       <ng-container *ngTemplateOutlet="commentInput"></ng-container>
     </ng-container>
-    <div fxFlex *ngFor="let displayDataElement of displayData; let i = index">
+    <div fxFlex *ngFor="let displayDataElement of displayData; index as i">
       <div style="margin-left: 38px"
            *ngIf="displayDataElement.isSystemComment; else userComment">
         <span class="tb-alarm-comments-system-text"
@@ -77,12 +77,12 @@
           </div>
           <div fxLayout="row" class="tb-alarm-comments-action-buttons"
                [ngClass]="{ 'show-buttons': displayDataElement.showActions }">
-            <button mat-button mat-icon-button
+            <button mat-icon-button
                     type="button"
                     (click)="editComment(displayDataElement.commentId)">
               <mat-icon class="material-icons">edit</mat-icon>
             </button>
-            <button mat-button mat-icon-button
+            <button mat-icon-button
                     type="button"
                     (click)="deleteComment(displayDataElement.commentId)">
               <mat-icon class="material-icons">delete</mat-icon>
@@ -96,7 +96,7 @@
                  [style.background-color]="displayDataElement.avatarBgColor">
               {{ getUserInitials(displayDataElement.displayName) }}
             </div>
-            <mat-form-field fxFlex appearance="standard" class="mat-block">
+            <mat-form-field fxFlex appearance="fill" class="mat-block">
               <textarea matInput
                         type="text"
                         placeholder="{{ 'alarm-comment.add' | translate }}"
@@ -136,7 +136,7 @@
            [style.background-color]="getCurrentUserBgColor(userDisplayName)">
         {{ getUserInitials(userDisplayName) }}
       </div>
-      <mat-form-field appearance="standard" fxFlex class="mat-block">
+      <mat-form-field appearance="fill" fxFlex class="mat-block">
           <textarea matInput
                     type="text"
                     placeholder="{{ 'alarm-comment.add' | translate }}"
@@ -147,8 +147,7 @@
                     (keyup.enter)="saveComment()"
                     (keydown.enter)="$event.preventDefault()">
           </textarea>
-        <button mat-button
-                mat-icon-button
+        <button mat-icon-button
                 type="button"
                 matSuffix
                 *ngIf="getAlarmCommentFormControl().value"
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.html
index c1be93431d..e2af9dcf24 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.html
@@ -31,28 +31,28 @@
   <div mat-dialog-content style="padding: 24px 0 0 0">
     <fieldset [disabled]="isLoading$ | async" style="padding: 0 24px">
       <div fxLayout="row" fxLayoutGap="6px">
-        <mat-form-field appearance="none" fxFlex class="mat-block">
+        <mat-form-field fxFlex class="mat-block">
           <mat-label translate>alarm.originator</mat-label>
           <input matInput formControlName="originatorName" readonly>
         </mat-form-field>
-        <mat-form-field appearance="none" fxFlex class="mat-block">
+        <mat-form-field fxFlex class="mat-block">
           <mat-label translate>alarm.created-time</mat-label>
           <input matInput formControlName="createdTime" readonly>
         </mat-form-field>
       </div>
       <div fxLayout="row" fxLayoutGap="6px">
-        <mat-form-field appearance="none" fxFlex class="mat-block">
+        <mat-form-field fxFlex class="mat-block">
           <mat-label translate>alarm.type</mat-label>
           <input matInput formControlName="type" readonly>
         </mat-form-field>
-        <mat-form-field appearance="none" fxFlex class="mat-block">
+        <mat-form-field fxFlex class="mat-block">
           <mat-label translate>alarm.severity</mat-label>
           <input matInput formControlName="alarmSeverity" readonly
                  [ngStyle]="{fontWeight: 'bold', color: alarmSeverityColorsMap.get((alarm$ | async)?.severity)}">
         </mat-form-field>
       </div>
       <div fxLayout="row" fxLayoutGap="6px">
-        <mat-form-field appearance="none" fxFlex class="mat-block">
+        <mat-form-field fxFlex class="mat-block">
           <mat-label translate>alarm.status</mat-label>
           <input matInput formControlName="alarmStatus" readonly>
         </mat-form-field>
@@ -72,11 +72,11 @@
         <ng-template matExpansionPanelContent>
           <div fxLayout="row" fxLayoutGap="6px" *ngIf="alarmFormGroup.get('startTime').value ||
                                  alarmFormGroup.get('endTime').value">
-            <mat-form-field *ngIf="alarmFormGroup.get('startTime').value" appearance="none" fxFlex class="mat-block">
+            <mat-form-field *ngIf="alarmFormGroup.get('startTime').value" fxFlex class="mat-block">
               <mat-label translate>alarm.start-time</mat-label>
               <input matInput formControlName="startTime" readonly>
             </mat-form-field>
-            <mat-form-field *ngIf="alarmFormGroup.get('endTime').value" appearance="none" fxFlex class="mat-block">
+            <mat-form-field *ngIf="alarmFormGroup.get('endTime').value" fxFlex class="mat-block">
               <mat-label translate>alarm.end-time</mat-label>
               <input matInput formControlName="endTime" readonly>
             </mat-form-field>
@@ -84,11 +84,11 @@
           </div>
           <div fxLayout="row" fxLayoutGap="6px" *ngIf="alarmFormGroup.get('ackTime').value ||
                                  alarmFormGroup.get('clearTime').value">
-            <mat-form-field *ngIf="alarmFormGroup.get('ackTime').value" appearance="none" fxFlex class="mat-block">
+            <mat-form-field *ngIf="alarmFormGroup.get('ackTime').value" fxFlex class="mat-block">
               <mat-label translate>alarm.ack-time</mat-label>
               <input matInput formControlName="ackTime" readonly>
             </mat-form-field>
-            <mat-form-field *ngIf="alarmFormGroup.get('clearTime').value" appearance="none" fxFlex class="mat-block">
+            <mat-form-field *ngIf="alarmFormGroup.get('clearTime').value" fxFlex class="mat-block">
               <mat-label translate>alarm.clear-time</mat-label>
               <input matInput formControlName="clearTime" readonly>
             </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.scss
index deec6e2b1d..2a77861e21 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.scss
@@ -26,7 +26,7 @@
         &.invisible {
           visibility: hidden;
         }
-        .mat-cell {
+        .mat-mdc-cell {
           .assignee-cell {
             .assigned-container {
               white-space: nowrap;